/* 딸깍헌트 — 따뜻한 코지 "새벽 마을 디오라마" 테마 */
: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:-3;
  background:linear-gradient(180deg, var(--dawn) 0%, var(--sky-top) 34%, #cdeef5 62%, var(--sky-bot) 100%);
  transition:filter 1.2s ease}
.hero .hills{position:absolute; left:0; right:0; bottom:0; height:34vh; z-index:-2;
  background:radial-gradient(120% 100% at 50% 100%, var(--grass) 0%, var(--grass-d) 78%);
  border-radius:50% 50% 0 0/22% 22% 0 0}
.hero .clouds{position:absolute; inset:0; z-index:-2; pointer-events:none}
.hero .clouds span{position:absolute; width:180px; height:52px; background:rgba(255,255,255,.86); border-radius:var(--r-pill);
  box-shadow:38px 12px 0 -8px rgba(255,255,255,.86), -40px 10px 0 -10px rgba(255,255,255,.86); filter:blur(.4px)}
.hero .clouds span:nth-child(1){top:14%; left:-20%; animation:drift 46s linear infinite}
.hero .clouds span:nth-child(2){top:26%; left:-30%; transform:scale(.7); animation:drift 62s linear infinite 6s}
.hero .clouds span:nth-child(3){top:9%; left:-25%; transform:scale(1.2); opacity:.7; animation:drift 80s linear infinite 12s}
@keyframes drift{to{left:120%}}
.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}
}