/* 색·간격·모서리·그림자·모션은 design/tokens.json 값을 그대로 쓴다. */
@font-face { font-family: "Jua"; src: url("/fonts/jua.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gaegu"; src: url("/fonts/gaegu.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/pretendard.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("/fonts/pretendard-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f8f4ea; --paper-raised: #fffdf7; --paper-sunken: #efe9da;
  --line: #e2dac6; --line-strong: #7e8579;
  --ink: #20291f; --ink-muted: #5a6356;
  --bamboo: #2f6b47; --on-bamboo: #fff; --bamboo-press: #214f34;
  --sprout: #c5e58a; --sprout-soft: #eaf5d3; --sun: #ffd66b; --on-sun: #2a2410;
  --ember: #b5431a; --on-ember: #fff; --ember-press: #7f2e10; --ember-glow: #ffb25e;
  --care: #2f5d8a;
  --key: #d9d0b9;
  --clay: 0 2px 0 rgba(32,41,31,.06), 0 12px 28px rgba(32,41,31,.08);
  --night: #10191a; --night-raised: #182325; --night-ink: #f1ede2; --night-muted: #a9b3ad; --night-bamboo: #8fd0a3;

  --display: "Jua", "Pretendard", system-ui, sans-serif;
  --hand: "Gaegu", "Jua", cursive;
  --sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-calm: cubic-bezier(.45,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10191a; --paper-raised: #182325; --paper-sunken: #0b1213;
    --line: #26343a; --line-strong: #6b7a7c;
    --ink: #f1ede2; --ink-muted: #a9b3ad;
    --bamboo: #8fd0a3; --on-bamboo: #0c2116; --bamboo-press: #4f8f66;
    --sprout: #a9d36c; --sprout-soft: #22331f; --sun: #f2c14e;
    --ember: #f0956a; --on-ember: #2a1208; --ember-press: #a85a35;
    --care: #8db4dc;
    --key: #050a0b;
    --clay: 0 2px 0 rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.35);
    --night: #0b1213; --night-raised: #182325;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--sans); word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--bamboo); outline-offset: 3px; border-radius: 12px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 26px/1 var(--display); color: var(--bamboo); }
.brand-mark { width: 30px; height: 33px; }
.nav-end { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; border-radius: 999px; background: var(--paper-sunken); box-shadow: inset 0 0 0 1.5px var(--line); }
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-muted); font: 15px/1 var(--display); letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent;
}
.lang button[aria-pressed="true"] { background: var(--bamboo); color: var(--on-bamboo); }
html[data-pending] body { visibility: hidden; animation: reveal 0s 1.5s forwards; } /* 영어 첫 페인트 전 깜빡임 방지. JS가 실패해도 1.5초 뒤 보인다 */
@keyframes reveal { to { visibility: visible; } }
.nav-cta { font: 17px/1 var(--display); color: var(--bamboo); text-decoration: none; padding: 10px 16px; border-radius: 999px; background: var(--sprout-soft); }

/* keys: 누르면 key edge가 사라지며 4px 내려간다 */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 18px/1 var(--display); text-decoration: none; cursor: pointer;
  background: var(--paper-raised); color: var(--ink);
  box-shadow: 0 4px 0 var(--key), inset 0 0 0 1.5px var(--line-strong);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.key:active, .key.down { transform: translateY(4px); box-shadow: 0 0 0 var(--key), inset 0 0 0 1.5px var(--line-strong); }
.key-bamboo { background: var(--bamboo); color: var(--on-bamboo); box-shadow: 0 4px 0 var(--bamboo-press); }
.key-bamboo:active { box-shadow: 0 0 0 var(--bamboo-press); }
.key-ember { background: var(--ember); color: var(--on-ember); box-shadow: 0 4px 0 var(--ember-press); }
.key-ember:active, .key-ember.down { box-shadow: 0 0 0 var(--ember-press); }
/* 스토어 링크가 아직 없을 때(빌드 시 환경 변수 없음): 누를 수 없게 흐리게 */
.key[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; box-shadow: none; }

/* hero */
.hero { display: grid; gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 96px; }
@media (min-width: 880px) { .hero { grid-template-columns: 1.1fr 1fr; padding-top: 72px; padding-bottom: 128px; } }
.eyebrow { display: inline-block; font: 16px/1 var(--display); color: var(--bamboo); background: var(--sprout-soft); padding: 9px 14px; border-radius: 999px; }
h1 { font-size: clamp(48px, 9vw, 84px); line-height: 1.08; margin: 22px 0 22px; }
.hl { background: linear-gradient(transparent 62%, var(--sun) 62% 92%, transparent 92%); padding: 0 4px; margin: 0 -4px; }
@media (prefers-color-scheme: dark) { .hl { background: none; color: var(--sun); } }
.lede { font-size: 19px; color: var(--ink-muted); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.free { margin-top: 16px; font-size: 15px; color: var(--ink-muted); }

/* demo */
.demo { margin: 0; padding: 24px; border-radius: 28px; background: var(--paper-raised); box-shadow: var(--clay); display: grid; gap: 18px; }
.say { display: flex; align-items: flex-end; gap: 10px; }
.mascot { width: 92px; height: 101px; flex: none; transform-origin: 50% 100%; animation: breathe 4.8s var(--ease-calm) infinite; }
.mascot-sm { width: 72px; height: 79px; }
@keyframes breathe { 50% { transform: scale(1.02, .975); } }
.mascot .face-happy { display: none; }
.mascot[data-face="happy"] .face-still { display: none; }
.mascot[data-face="happy"] .face-happy { display: inline; }
.bubble {
  position: relative; margin-bottom: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--sprout-soft); font: 700 21px/1.25 var(--hand); color: var(--ink);
  transition: opacity 220ms var(--ease-out);
}
.bubble::before { content: ""; position: absolute; left: -6px; bottom: 8px; border: 7px solid transparent; border-right-color: var(--sprout-soft); border-left: 0; }

.note-wrap { position: relative; }
.note {
  border-radius: 18px; background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--line) 31px 32px);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: inset(var(--b, 0%) 0 0 0 round 18px);
}
.note textarea {
  display: block; width: 100%; resize: none; border: 0; background: transparent; color: var(--ink);
  font: 17px/32px var(--sans); padding: 8px 18px 16px; outline: none; border-radius: 18px;
}
.note:focus-within { box-shadow: inset 0 0 0 2px var(--bamboo); }
/* glow는 이미 탄(잘려 나간) 부분에만 그려 글자 뒤로 가지 않는다 (결정 37) */
.glow {
  position: absolute; left: 6%; right: 6%; top: 0; height: var(--b, 0%); pointer-events: none;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--ember-glow) 70%, transparent));
  border-radius: 0 0 50% 50% / 0 0 14px 14px; filter: blur(6px); opacity: var(--g, 0);
}
.note { transition: opacity 2400ms var(--ease-calm); }
.demo.gone .note { opacity: 0; }

.hold { position: relative; width: 100%; overflow: hidden; touch-action: none; }
.ring { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--ember-press); opacity: .45; border-radius: inherit; }
.hold-label { position: relative; }
.hold:disabled { cursor: default; }

/* steps */
.steps { padding-bottom: 96px; }
h2 { font-size: clamp(32px, 5vw, 44px); line-height: 1.2; margin-bottom: 32px; }
.steps ol { display: grid; gap: 16px; }
@media (min-width: 760px) { .steps ol { grid-template-columns: repeat(3, 1fr); } }
.card { position: relative; padding: 28px 24px; border-radius: 28px; background: var(--paper-raised); box-shadow: var(--clay); }
.num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--sprout); color: #20291f; font: 20px/1 var(--display); margin-bottom: 18px; }
.card:nth-child(3) .num { background: var(--ember); color: var(--on-ember); }
.card h3 { font-size: 26px; margin-bottom: 8px; }
.card p { color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { font: 15px/1 var(--display); padding: 9px 13px; border-radius: 999px; background: var(--sprout-soft); color: var(--ink); }

/* extras */
.extras { padding-bottom: 96px; text-align: center; }
.chips-lg { justify-content: center; gap: 10px; margin: 0; }
.chips-lg li { font-size: 18px; padding: 13px 18px; background: var(--paper-raised); box-shadow: 0 4px 0 var(--key), inset 0 0 0 1.5px var(--line); }
.chips-lg li:nth-child(4) { background: var(--sun); color: var(--on-sun); box-shadow: 0 4px 0 #d9b04a; }
.aside { margin-top: 24px; color: var(--ink-muted); }

/* night: 밤의 숲 띠 — 두 테마 모두 어두운 바탕 */
.night { background: var(--night); color: #f1ede2; padding: 96px 0; position: relative; overflow: hidden; }
.night::before, .night::after {
  content: ""; position: absolute; top: -20px; bottom: -20px; width: 46px; border-radius: 20px; opacity: .12;
  background: repeating-linear-gradient(#8fd0a3 0 180px, transparent 180px 192px);
}
.night::before { left: 4%; } .night::after { right: 6%; width: 36px; top: -110px; }
.night h2 { color: #8fd0a3; }
.facts { display: grid; gap: 28px 40px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.facts li { display: grid; gap: 6px; padding-left: 20px; border-left: 3px solid #4f8f66; }
.facts b { font: 400 22px/1.3 var(--display); }
.facts span { color: #a9b3ad; }

/* final */
.final { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 112px; padding-bottom: 112px; }
.stamp { margin-top: 12px; font: 700 clamp(30px, 5vw, 40px)/1.25 var(--hand); padding: 12px 24px; background: var(--sun); color: var(--on-sun); border-radius: 18px; transform: rotate(-2deg); }
.final .stores { justify-content: center; margin-top: 40px; }
.plus { margin-top: 28px; font-size: 15px; color: var(--ink-muted); }

/* footer: 위기 안내는 마스코트·Jua 없이 평이하게 */
.foot { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 14px; color: var(--ink-muted); }
.care a { color: var(--care); font-weight: 700; }
.copy { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mascot { animation: none; }
  .key { transition: none; }
}