/*
 * Copyright 2026 Hancom Inc. All rights reserved.
 *
 * https://www.hancom.com/
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');


/* ========================================
   기본 초기화
   ======================================== */
html{box-sizing:border-box; overflow:hidden;}
html, body{height:100%;}
*, *:before, *:after{box-sizing:inherit;}
*, #unity-container, #unity-canvas{/*cursor: url('cursor.png'), pointer !important;*/}
body{transform:scale(1); margin:0; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-direction:row;}
p, div{margin:0; padding:0;}
canvas{display:block;}


/* ========================================
   Unity 컨테이너 & 캔버스
   ======================================== */
#unity-container{padding:0; position:absolute; width:min(calc(100svh * (16/9)), 100vw); height:auto; max-height:100%; aspect-ratio:16/9; display:block; z-index:-1;}
#unity-canvas{width:100%; height:100%; background:#231F20;}


/* ========================================
   광고 영역
   ======================================== */
#ads-area-300by600{position:relative; top:0%; left:32%; width:min(calc(32vw * (1/2)), 32vh); max-width:300px; height:auto; aspect-ratio:1/2; z-index:1;}
#ads-area-300by250{position:fixed; text-align:end; bottom:5px; right:5px; width:auto; height:min(calc(33vh * (5/6)), 33vw); aspect-ratio:6/5; z-index:2;}
#admixer-area{position:relative; top:0%; left:32%; width:min(calc(32vw * (1/2)), 32vh); max-width:300px; height:auto; aspect-ratio:1/2; z-index:1;}


/* ========================================
   로딩 화면 — 전체 레이아웃
   --s: 16:9 기준 스케일 변수 (1920px 시안 기준)
   ======================================== */
.loading-wrap{--s:min(calc(100svh * (16/9)), 100vw); font-family:"Roboto", "Noto Sans KR", "Apple SD Gothic Neo", "AppleGothic", sans-serif; position:absolute; left:0; top:0; width:100vw; height:100svh; background-color:#FFC430; background-image:url('assets/intro_bg_pattern.svg'); background-position:-10px -25px; background-repeat:repeat; overflow:hidden; display:flex; flex-direction:column;}
.loading-wrap.fadeout{opacity:0; transition:1.5s;}


/* ========================================
   로딩 화면 — 헤더 (로고 + 타이틀)
   ======================================== */
.loading-header{padding-top:calc(var(--s) * 25 / 1920); color:#fff; display:flex; align-items:flex-start; justify-content:center;}
.loading-header img{height:calc(var(--s) * 33 / 1920);}
.loading-header #loading-tit{color:#fff; font-size:calc(var(--s) * 24 / 1920); font-weight:400; margin:0; padding:0; margin-left:calc(var(--s) * 10 / 1920); line-height:1;}


/* ========================================
   로딩 화면 — 메인 (flex:1로 나머지 공간 차지)
   ======================================== */
.loading-main{flex:1; display:flex; align-items:center; justify-content:center;}
.loading-stage{position:relative; width:calc(var(--s) * 760 / 1920); height:calc(var(--s) * 250 / 1920); font-size:0; text-align:left; display:flex; flex-direction:column; justify-content:flex-end;}
.loading-stage .loading-object{position:relative; display:flex; align-items:flex-end; padding:0 calc(var(--s) * 5 / 1920);}
.loading-char{position:relative; bottom:calc(var(--s) * -5 / 1920); width:calc(var(--s) * 160 / 1920); height:calc(var(--s) * 220 / 1920);}
.loading-char img{position:absolute; left:0; top:0; width:100%; height:100%; visibility:hidden;}
.loading-char img:first-child{animation:charFrame1 0.8s steps(1) infinite;}
.loading-char img:last-child{animation:charFrame2 0.8s steps(1) infinite;}
.loading-char-flower{width:calc(var(--s) * 80 / 1920); height:calc(var(--s) * 80 / 1920); margin-bottom:calc(var(--s) * -3 / 1920); visibility:hidden;}
.loading-stage .loading-object:before{content:''; position:absolute; left:calc(var(--s) * 61 / 1920); top:calc(var(--s) * -46 / 1920); width:calc(var(--s) * 44 / 1920); height:calc(var(--s) * 40 / 1920); background:url('assets/heart.gif') no-repeat center / contain;}
.loading-stage .loading-object:after{content:''; position:absolute; right:calc(var(--s) * 5 / 1920); bottom:calc(var(--s) * -3 / 1920); width:calc(var(--s) * 64 / 1920); height:calc(var(--s) * 64 / 1920); background:url('assets/clock.gif') no-repeat center / contain;}

@keyframes charFrame1{
  0%,49.99%{opacity:0; transform:translateY(0);}
  50%{opacity:1; transform:translateY(0);}
  62.5%{opacity:1; transform:translateY(1px);}
  75%{opacity:1; transform:translateY(2px);}
  87.5%,100%{opacity:1; transform:translateY(3px);}
}
@keyframes charFrame2{
  0%,49.99%{opacity:1;}
  50%,100%{opacity:0;}
}

.loading-tip{width:calc(var(--s) * 500 / 1920); height:calc(var(--s) * 100 / 1920); position:absolute; left:calc(var(--s) * 200 / 1920); top:calc(var(--s) * 30 / 1920); display:flex;}
.loading-tip .tip-label{width:calc(var(--s) * 40 / 1920); height:100%; background-color:#FFBC2B; background-image:url('assets/intro_tip.svg'); background-position:center center; background-repeat:no-repeat; background-size:auto calc(100% - 16px); border:4px solid #151009; border-right:2px dashed #151009; clip-path:polygon(4px 0, 100% 0, 100% 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); position:relative; box-shadow:inset 0 4px 0 0 #FFE645, inset 0 -4px 0 0 #FA9930;}
.loading-tip .tip-label:after{content:''; position:absolute; left:0; top:4px; width:4px; height:12px; background:repeating-linear-gradient(to bottom, #FFE645 0px, #FFE645 4px, transparent 4px, transparent 8px, #FFE645 8px, #FFE645 12px);}
.loading-tip .tip-text{flex:1; word-break:break-all; padding:calc(var(--s) * 10 / 1920); display:flex; align-items:center; justify-content:center; height:100%; font-size:calc(var(--s) * 18 / 1920); border:4px solid #151009; clip-path:polygon(0 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 0 100%); background-color:#fff; border-left:0; box-shadow:inset -4px 0 0 0 #DEDEDE, inset 0 -4px 0 0 #DEDEDE;}

.progress-bar{width:100%; height:calc(var(--s) * 30 / 1920); min-height:15px; border:4px solid #151009; clip-path:polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px); background-color:#fff; padding:max(2px, calc(var(--s) * 4 / 1920)); box-sizing:border-box;}
.progress-bar .bar{display:block; width:0%; height:100%; background-color:#1ADCC8;}

/* ========================================
   로딩 화면 — 푸터 (광고 + 가이드 + 안내 문구)
   ======================================== */
.loading-footer{position:relative; width:100%; padding:calc(var(--s) * 85 / 1920) 0 0 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; background-color:#513926; background-image:url('assets/intro_bottom_pattern.svg'); background-repeat:repeat;}
.loading-footer:before{content:''; display:block; width:100%; height:calc(var(--s) * 50 / 1920); position:absolute; left:0; top:0; background-image:url('assets/intro_bottom_grass.svg'); background-repeat:repeat-x; background-size:auto 100%;}
.loading-footer .loading-ad{font-size:0; position:relative;}
.loading-footer .loading-ad img{margin-bottom:calc(var(--s) * 50 / 1920);}
#loading-ad-pc img{width:calc(var(--s) * 760 / 1920); display:block;}
#loading-ad-mo{display:none;}
.loading-footer .loading-object{width:100%; position:absolute; left:0; top:0;}
.loading-footer .loading-object:before{content:''; position:absolute; left:20px; top:0; transform:translateY(-100%); width:calc(var(--s) * 276 / 1920); aspect-ratio:276/132; background:url('assets/intro_bottom_object01.png') no-repeat center / contain;}
.loading-footer .loading-object:after{content:''; position:absolute; right:20px; top:0; transform:translateY(-100%); width:calc(var(--s) * 276 / 1920); aspect-ratio:276/132; background:url('assets/intro_bottom_object02.png') no-repeat center / contain;}
.loading-guide{display:inline-block; text-align:left; color:#fff; line-height:1; white-space:nowrap; background:rgba(21, 16, 9, 0.70); border-radius:calc(var(--s) * 10 / 1920) calc(var(--s) * 10 / 1920) 0 0; padding:calc(var(--s) * 20 / 1920) calc(var(--s) * 20 / 1920) calc(var(--s) * 20 / 1920) calc(var(--s) * 50 / 1920); min-width:calc(var(--s) * 760 / 1920);}
.loading-guide div{position:relative; margin:0; padding:0; padding-left:calc(var(--s) * 30 / 1920);}
.loading-guide div:before{display:inline-block; content:'!'; position:absolute; left:0; top:calc(var(--s) * 3 / 1920); width:calc(var(--s) * 20 / 1920); height:calc(var(--s) * 20 / 1920); margin-right:calc(var(--s) * 5 / 1920); vertical-align:middle; border:2px solid #FFBC2B; color:#FFBC2B; font-size:calc(var(--s) * 13 / 1920); font-weight:bold; border-radius:50%; line-height:calc(var(--s) * 17 / 1920); box-sizing:border-box; text-align:center;}
.loading-guide div a{color:#fff; font-weight:600; text-decoration:none;}
.loading-guide div p{line-height:1.4;}
.loading-guide div p:nth-child(1){font-size:calc(var(--s) * 16 / 1920);}
.loading-guide div p:nth-child(2){font-size:calc(var(--s) * 14 / 1920); margin-top:calc(var(--s) * 5 / 1920);}
.loading-guide div p a span{text-decoration:underline;}

/* ========================================
   모바일 + 태블릿 (세로 모드)
   ======================================== */
@media screen and (orientation:portrait){
  .loading-header{padding-top:20px;}
  .loading-header img{height:20px}
  .loading-header #loading-tit{font-size:16px;}

  .loading-main{padding:0 20px}
  .loading-stage{width:100%; height:auto;}

  .loading-char{width:auto; height:20svh; bottom:-5px; aspect-ratio:240/330;}
  .loading-char img {width:auto;}
  .loading-char-flower{width:auto; height:6svh;}
  .loading-stage .loading-object:before{left:16.1svh; top:9svh; width:3svh; height:auto; aspect-ratio:44/40;}
  .loading-stage .loading-object:after{right:10px; bottom:-2px; width:40px; height:40px;}
  .loading-tip{width:100%; position:relative; left:auto; top:auto; height:auto; margin-bottom:20px}
  .loading-tip .tip-label{position:absolute; left:0; top:-27px; width:30px; height:30px; border:3px solid #151009; clip-path:polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px); background-size:55% auto; background-position:6px 5px;}
  .loading-tip .tip-label:after{width:2px; height:6px; background:repeating-linear-gradient(to bottom, #FFE645 0px, #FFE645 2px, transparent 2px, transparent 4px, #FFE645 4px, #FFE645 6px);}
  .loading-tip .tip-text{font-size:13px; padding:5px; border:3px solid #151009; clip-path:polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px);}

  .progress-bar{height:25px; padding:3px; border:3px solid #151009; clip-path:polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px);}

  .loading-footer{padding:40px 0 0 0; max-height:50svh; overflow:hidden;}
  .loading-footer:before{height:25px;}
  .loading-footer .loading-object{display:none;}
  #loading-ad-pc{display:none !important;}
  #loading-ad-mo{display:flex !important; flex:1; min-height:0; height:0; overflow:hidden; align-items:flex-end; justify-content:center; font-size:0;}
  #loading-ad-mo img{width:100%; max-height:100%; aspect-ratio:340/200; object-fit:contain; margin:0 20px 20px 20px;}

  .loading-guide{padding:15px 10px; width:100%; display:block; white-space:wrap;}
  .loading-guide div{padding-left:30px;}
  .loading-guide div:before{width:20px; height:20px; margin-right:10px; line-height:17px; top:3px; font-size:13px;}
  .loading-guide div p:nth-child(1){font-size:13px;}
  .loading-guide div p:nth-child(2){font-size:11px; margin-top:5px}
}