/* 몬스터 헌터 — 따뜻한 코지 "새벽 마을 디오라마" 테마 */
:root{
  --cream:#fbf1dc; --cream2:#fffdf6; --panel:#fffaf0;
  --ink:#3c2c18; --ink2:#7a6650; --muted:#8a755c;
  --sky-top:#a9d8f5; --sky-bot:#e9f6d8; --dawn:#ffd9a8;
  --grass:#8ecf66; --grass-d:#6bb04a;
  --gold:#ffc24d; --gold-d:#f39c12; --wood:#b7855a;
  --line:rgba(90,60,30,.14); --line-2:rgba(90,60,30,.22);
  --ok:#3fa35f; --err:#e0533d;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
  --shadow-card:0 2px 0 rgba(255,255,255,.6) inset, 0 10px 24px rgba(120,84,40,.14);
  --shadow-soft:0 6px 18px rgba(120,84,40,.12);
  --glow-gold:0 8px 22px rgba(243,156,18,.35);
  --max:1080px; --max-text:720px;
  --wt-h:800; --wt-b:500;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-weight:var(--wt-b); line-height:1.62; -webkit-text-size-adjust:100%;
}
h1,h2,h3{line-height:1.14; margin:0 0 .35em; letter-spacing:-.02em; font-weight:var(--wt-h)}
h1{font-size:clamp(32px,6.4vw,64px)}
h2{font-size:clamp(26px,4vw,40px); text-align:center; margin-bottom:.5em}
p{margin:0 0 1em}
a{color:var(--gold-d); font-weight:700}
img{max-width:100%}
section{padding:clamp(56px,9vw,104px) 20px; max-width:var(--max); margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.section-sub{text-align:center; color:var(--ink2); max-width:640px; margin:0 auto 2.4em; font-size:clamp(15px,2.2vw,18px)}

/* reveal (IntersectionObserver) */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1; transform:none}

/* inapp banner */
#inapp-banner{background:var(--gold); color:#3a2600; font-weight:800; text-align:center;
  padding:10px 14px; font-size:14px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap}
#inapp-banner a{color:#3a2600; text-decoration:underline}

/* header */
.site-header{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(255,250,240,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{font-weight:900; font-size:21px; color:var(--gold-d); letter-spacing:-.02em}
.header-nav{display:flex; align-items:center; gap:8px}
.navlink{color:var(--ink2); text-decoration:none; font-size:14px; font-weight:700; padding:8px 12px; border-radius:var(--r-sm);
  min-height:44px; display:inline-flex; align-items:center; transition:background .15s,color .15s}
.navlink:hover{background:rgba(243,156,18,.12); color:var(--ink)}
.lang-toggle{display:flex; gap:4px; margin-left:4px}
.lang-toggle button{background:transparent; border:1px solid var(--line-2); color:var(--ink2);
  border-radius:10px; padding:0 12px; min-height:40px; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s}
.lang-toggle button.active{color:#3a2600; border-color:var(--gold-d); background:var(--gold)}
.lang-toggle button:hover{border-color:var(--gold-d)}

/* HERO — diorama */
.hero{position:relative; max-width:none; padding:0; overflow:hidden; isolation:isolate;
  min-height:100svh; display:flex; align-items:center}
/* 하늘 = 폴백 베이스(언덕 씬이 로드 안 될 때 대비) */
.hero .sky{position:absolute; inset:0; z-index:-4;
  background:linear-gradient(180deg, var(--dawn) 0%, var(--sky-top) 34%, #cdeef5 62%, var(--sky-bot) 100%)}
/* 언덕 씬 = 실제 페인팅 아트(Gemini): 하늘+풍차+마을+grass 풀 배경(cover) */
.hero .hills{position:absolute; inset:0; z-index:-3;
  background:url(/assets/img/hero/hills.webp?v=11) no-repeat center center; background-size:cover; will-change:transform}
/* 소프트 페인터리 구름(투명 PNG) 레이어드 드리프트 — 정적 씬 위를 흐름(패럴랙스) */
.hero .clouds{position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden}
.hero .clouds .cloud{position:absolute; height:auto; will-change:transform;
  filter:drop-shadow(0 8px 12px rgba(120,140,170,.12))}
.hero .clouds .c1{width:220px; top:9%;  left:-26%; opacity:.95; animation:drift 66s linear infinite}
.hero .clouds .c2{width:148px; top:19%; left:-32%; opacity:.82; animation:drift 92s linear infinite}
.hero .clouds .c3{width:280px; top:4%;  left:-30%; opacity:.88; animation:drift 112s linear infinite}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(172vw)}}
@media (prefers-reduced-motion:reduce){.hero .clouds .cloud{animation:none}
  .hero .clouds .c1{left:5%}.hero .clouds .c2{left:58%}.hero .clouds .c3{left:30%}}
/* 텍스트 가독 scrim — 좌측 크림 페이드(데스크톱) */
.hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(251,243,224,.88) 0%, rgba(251,243,224,.6) 32%, rgba(251,243,224,0) 60%)}
@media (max-width:899px){ /* 모바일: 세로 스택 → 하단 크림 scrim(텍스트가 하단) */
  .hero::before{background:linear-gradient(180deg, rgba(251,243,224,0) 30%, rgba(251,243,224,.72) 56%, rgba(251,243,224,.94) 100%)}}
.hero-inner{max-width:760px; margin:0 auto; padding:104px 20px calc(72px + env(safe-area-inset-bottom)); text-align:center; position:relative}
.badge{display:inline-block; background:rgba(255,255,255,.72); border:1px solid var(--line-2);
  color:var(--ink2); font-size:13px; font-weight:700; padding:6px 14px; border-radius:var(--r-pill); margin-bottom:16px}
.slogan{color:var(--gold-d); font-weight:900; font-size:clamp(15px,2.6vw,20px); margin:0 0 8px}
.hero h1{color:var(--ink); text-shadow:0 2px 0 rgba(255,255,255,.5)}
.hero-sub{color:var(--ink2); font-size:clamp(15px,2.3vw,19px); max-width:600px; margin:14px auto 22px}

/* idle HUD */
.idle-hud{display:inline-flex; flex-direction:column; gap:6px; text-align:left;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:14px 20px;
  box-shadow:var(--shadow-card); margin:0 auto 12px; min-width:270px}
.hud-tag{font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.02em; margin-bottom:2px; opacity:.85}
.hud-row{display:flex; justify-content:space-between; gap:24px; align-items:baseline; font-size:14px; color:var(--ink2)}
.hud-row b{font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:900}
.hud-note{font-size:12.5px; color:var(--grass-d); font-weight:700}
.hud-note b{color:var(--grass-d)}
.grow-line{font-size:14px; color:var(--ink2); max-width:460px; margin:0 auto 26px}
.grow-line b{color:var(--gold-d); font-variant-numeric:tabular-nums}

/* form */
.prereg-form{max-width:520px; margin:0 auto; text-align:left}
.field-row{display:flex; gap:8px}
input[type="email"]{flex:1 1 auto; min-width:0; font-size:16px; padding:15px 16px; border-radius:14px;
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink); min-height:54px; transition:border-color .15s, box-shadow .15s}
input[type="email"]::placeholder{color:#b0a08c}
input[type="email"]:focus-visible{outline:none; border-color:var(--gold-d); box-shadow:0 0 0 4px rgba(255,194,77,.3)}
.btn-primary{position:relative; overflow:hidden; font-size:16px; font-weight:900; padding:15px 22px; border:none; border-radius:14px;
  cursor:pointer; background:linear-gradient(180deg,var(--gold),var(--gold-d)); color:#3a2600; min-height:54px; white-space:nowrap;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--glow-gold);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(243,156,18,.45); filter:brightness(1.04)}
.btn-primary:active{transform:translateY(0) scale(.97); filter:brightness(.97)}
.btn-primary:focus-visible{outline:3px solid var(--gold-d); outline-offset:3px}
.btn-primary:disabled{opacity:.6; cursor:default; transform:none}
.form-hint{font-size:12.5px; color:var(--muted); margin:10px 2px 4px}
.check{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink2); margin-top:10px; cursor:pointer}
.check:hover{color:var(--ink)}
.check input{width:20px; height:20px; margin-top:2px; accent-color:var(--gold-d); flex:0 0 auto}
.form-msg{min-height:1.4em; margin-top:12px; font-weight:800}
.form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--err)}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0}

/* CAST */
.cast h2{color:var(--ink)}
.cast-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; max-width:960px; margin:0 auto}
.mon{margin:0; background:linear-gradient(180deg,#fff,#fdf3df); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-card); text-align:center; transition:transform .18s ease, box-shadow .18s ease}
.mon img{display:block; width:100%; height:150px; object-fit:cover; object-position:center 42%}
.mon figcaption{padding:9px 6px; font-weight:800; font-size:14px; color:var(--ink)}
.mon:hover{transform:translateY(-6px) rotate(-1deg); box-shadow:0 16px 30px rgba(120,84,40,.22)}
@media (hover:none){ .mon{animation:bob 3.4s ease-in-out infinite; animation-delay:calc(var(--i,0)*.3s)} }
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* LOOP */
.loop{max-width:820px}
.loop h2{color:var(--ink)}
.steps{list-style:none; padding:0; margin:0 auto; display:grid; gap:14px; max-width:720px}
.steps li{display:flex; gap:16px; align-items:flex-start; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-soft)}
.step-no{flex:0 0 42px; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#3a2600; background:linear-gradient(180deg,var(--gold),var(--gold-d)); box-shadow:var(--shadow-soft)}
.steps h3{color:var(--ink); font-size:18px; margin-bottom:.2em}
.steps p{color:var(--ink2); font-size:14.5px; margin:0}
.loop-repeat{text-align:center; color:var(--grass-d); font-weight:800; margin-top:20px}

/* IDLE / TEAM prose */
.idle,.team{text-align:center; max-width:var(--max-text)}
.idle h2,.team h2{color:var(--ink)}
.idle p,.team p{color:var(--ink2); font-size:clamp(15px,2.2vw,18px)}

/* FEATURES / ROADMAP cards */
.features h2,.roadmap h2,.gauge h2{color:var(--ink)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.card{background:linear-gradient(180deg,#fffdf7,#fdf1da); border:1px solid var(--line-2); border-radius:var(--r);
  padding:24px; box-shadow:var(--shadow-card)}
.card h3{color:var(--ink); font-size:18px}
.card p{color:var(--ink2); font-size:14.5px; margin:0}
.card.rm{position:relative}
.rm-tag{position:absolute; top:-12px; left:20px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#3a2600; background:var(--gold); box-shadow:var(--shadow-soft)}

/* FOUNDER GAUGE */
.gauge{max-width:820px; text-align:center}
.gauge .section-sub b{color:var(--gold-d)}
.milestones{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:620px; margin:0 auto 8px}
.ms{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:16px 8px; box-shadow:var(--shadow-soft)}
.ms-ico{font-size:26px; display:block; margin-bottom:6px}
.ms b{display:block; color:var(--ink); font-size:14px}
.ms small{color:var(--muted); font-size:12px}
.gbar{height:16px; border-radius:var(--r-pill); background:#eaddc4; border:1px solid var(--line-2); overflow:hidden; max-width:620px; margin:14px auto 8px}
.gbar-fill{height:100%; width:0; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--grass),var(--gold)); transition:width 1s ease}
.ms.hit{border-color:var(--gold-d); background:linear-gradient(180deg,#fff,#fff2d4)}
.gauge-note{font-size:12.5px; color:var(--muted); margin:6px auto 22px; max-width:520px}

/* team members */
.members{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.member{background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:18px 30px; box-shadow:var(--shadow-soft); min-width:150px}
.member strong{display:block; color:var(--ink); font-size:18px}
.member span{color:var(--muted); font-size:13px}

/* FAQ */
.faq{max-width:var(--max-text)}
.faq h2{color:var(--ink)}
.faq details{border:1px solid var(--line-2); border-radius:var(--r); padding:16px 18px; margin-bottom:10px; background:var(--panel); box-shadow:var(--shadow-soft)}
.faq summary{cursor:pointer; font-weight:800; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"⌄"; color:var(--gold-d); font-size:20px; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details[open]{border-color:rgba(243,156,18,.4)}
.faq p{color:var(--ink2); margin:.7em 0 0; font-size:14.5px}

/* sticky mobile CTA */
#sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,250,240,.9); backdrop-filter:blur(8px); border-top:1px solid var(--line-2); text-align:center}
#sticky-cta a{display:block; max-width:520px; margin:0 auto; background:linear-gradient(180deg,var(--gold),var(--gold-d));
  color:#3a2600; font-weight:900; padding:14px; border-radius:14px; text-decoration:none; box-shadow:var(--shadow-soft)}

/* footer */
.site-footer{border-top:1px solid var(--line); padding:34px 20px calc(90px + env(safe-area-inset-bottom)); text-align:center; color:var(--muted); font-size:13px; background:var(--cream2)}
.platform-note{max-width:660px; margin:0 auto 14px}
.controller,.rights{margin:.3em 0}

/* confetti canvas */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:60}

@media (max-width:600px){ .hide-sm{display:none} .milestones{grid-template-columns:1fr; max-width:340px} }
@media (max-width:520px){
  .field-row{flex-direction:column}
  .btn-primary{width:100%}
  .cast-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:521px){ body{padding-bottom:0} }
/* 데스크톱은 sticky CTA 숨김 (히어로 폼 상시 근접) */
@media (hover:hover) and (pointer:fine){ #sticky-cta{display:none!important} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* 히어로 게임 아트 (v3 — 2컬럼: 텍스트/폼 | 캐릭터) */
.hero-inner{max-width:1140px}
.hero-art{position:relative; display:flex; align-items:flex-end; justify-content:center; margin-top:16px; pointer-events:none}
.hero-char{width:min(62vw,300px); height:auto; filter:drop-shadow(0 16px 24px rgba(50,35,15,.42)); animation:bob 4.6s ease-in-out infinite}
.hero-village{display:none}
@media (min-width:900px){
  .hero-inner{display:grid; grid-template-columns:1.06fr .94fr; align-items:center; gap:30px; text-align:left; padding:92px 24px 72px}
  .hero-text{text-align:left}
  .hero-text .badge{margin-left:0}
  .hero-text .hero-sub{margin-left:0; margin-right:0; max-width:520px}
  .hero-text .idle-hud{margin:0 0 12px}
  .hero-text .grow-line{margin:0 0 22px; text-align:left}
  .hero-text .prereg-form{margin-left:0}
  .hero-char{width:100%; max-width:460px}
  .hero-village{display:block; position:absolute; right:-2%; bottom:2%; width:44%; max-width:210px; height:auto; border-radius:16px; opacity:.96; z-index:-1; filter:drop-shadow(0 10px 16px rgba(50,35,15,.3))}
}

/* 모바일: 캐릭터를 히어로 상단으로(게임 먼저 노출) */
@media (max-width:899px){
  .hero-inner{display:flex; flex-direction:column}
  .hero-art{order:-1; margin:6px auto 2px}
  .hero-char{width:min(50vw,210px)}
}

/* v5: 히어로 = 실제 페인팅 씬(hills.webp 풀 배경) + 드리프트 구름 — v4 CSS 블롭 규칙 제거됨 */