/*
 * 단비 정적 페이지 공통 스타일.
 *
 * ⚠️ 값의 정본은 **`rn-apps/apps/danbi/DESIGN.md` + `src/theme/danbi-theme.ts`** 다.
 * 그 두 곳의 동일성은 `design-doc.test.ts` 가 강제한다. 이 파일은 그 강제 **밖**이므로,
 * 정본을 고쳤으면 여기도 손으로 맞춰야 한다. 토큰 이름을 정본과 같게 둔 이유가 그것이다 —
 * DESIGN.md 의 표와 나란히 놓고 눈으로 대조할 수 있어야 한다.
 *
 * (처음엔 `docs/prototypes/17-visual-system.html` 의 값을 옮겼는데 그건 #17 이 만든 **제안
 *  문서의 크롬**이고 구현된 정본이 아니었다. 다크 배경·보조색·상태색·나뭇잎색이 전부 달랐고,
 *  타이포·간격·반경·모션은 정본에 10단·5단 스케일이 있는데 즉흥값을 썼다.)
 *
 * 정본과 의도적으로 다른 곳 둘 — 웹이라서 어쩔 수 없는 것만이다:
 *
 *  ① 글꼴 굵기를 패밀리 이름이 아니라 `font-weight` 로 고른다. 정본이 패밀리로 고르는 이유는
 *     RN 에서 `fontWeight` 가 기기마다 다르게 떨어지기 때문인데, 웹은 그 문제가 없다.
 *     Pretendard 를 **번들하지 않는다** — 외부 호스트 요청 0 을 지켜야 하고(rules/05 예외의
 *     "순수 HTML"), 폰트 파일을 저장소에 넣으면 그 성질이 깨진다. 설치된 기기에서는 쓰이고
 *     없으면 시스템 한글 글꼴로 떨어진다.
 *  ② 타이포 스케일에 `clamp()` 를 얹지 않는다 — 정본이 절대 px 이므로 그대로 쓴다. 좁은
 *     화면 대응은 미디어 쿼리로 단계를 갈아탄다.
 *
 * 대비(WCAG 2.x): **정보를 전달하는 텍스트**는 라이트·다크 양쪽에서 4.5:1 이상이다.
 * 정본 값으로 실측해 통과하는 조합만 쓴다:
 *
 *   ink  on ground   16.67 / 15.28      ink  on fillNormal  15.13 / 12.03
 *   ink3 on ground    4.56 /  6.34      blue50 on ground     4.54 /  5.00
 *   ink  on blue95   15.74 / 15.06
 *
 * 그래서 지키는 규칙 셋 — 어기면 조용히 미달이 된다:
 *   · `ink3` 는 **ground 위에서만** 쓴다(fillNormal 위 4.14, blue95 위 4.30 으로 떨어진다)
 *   · 링크는 `primary` 가 아니라 **`blue50`** 이다(`primary` on ground 는 4.40)
 *   · **채운 primary 버튼을 두지 않는다.** primary·blue50 배경 위 어떤 글자색도 다크에서
 *     4.5 를 못 넘는다(white on primary 다크 3.39 — 앱도 같은 상태다). 정본의 주된 시각
 *     언어가 애초에 `ground` + `fillNormal` 틴트이므로, 강조는 blue95 워시 + primary 테두리로
 *     만든다.
 *
 * `.mark` 안의 글리프(✓·!·?)는 `aria-hidden` 장식이라 대비 대상이 아니다 — 뜻은 바로 아래
 * `h1` 이 글로 진다. 이 예외를 늘리지 말 것.
 */

/* ── 색 (DESIGN.md `## 색`) ─────────────────────────────── */
:root {
  --ground:#F5F8FD;
  --ink:#101828;
  --ink3:#63728E;
  --primary:#3366FF;
  --blue50:rgb(0,102,255);
  --blue90:rgb(201,222,254);
  --blue95:rgb(234,242,254);
  --green95:rgb(217,255,230);
  --red95:rgb(254,236,236);
  --status-positive:rgb(0,191,64);
  --status-negative:rgb(255,66,66);

  /* 반투명 토큰은 정본 그대로 둔다 — 합성값을 하드코딩하면 정본과 대조가 안 된다. */
  --fill-normal:rgba(112,115,124,0.08);
  --line-normal:rgba(112,115,124,0.22);
  --line-neutral:rgba(112,115,124,0.16);

  /* 자연색 (DESIGN.md `## 색` — 마음밭 은유 전용). #16 의 흙·나무 자산이 이 이름을 쓴다. */
  --earth-dry:#D4C19A;
  --earth-wet:#8A6540;
  --bark:#6B4E32;
  --leaf:#3D7A4A;
  --leaf-dark:#2A5533;

  /* 캐릭터 몸통. 정본에 이 넷이 없다 — #16 자산이 쓰는 값이고 다크에서 덮지 않는 것이
     의도다(파랑이 캐릭터의 정체성이다). 프로토타입도 같은 선택을 했다. */
  --c-top:#9BCEFF; --c-bottom:#6DB4FF; --c-pool:#4E9FF5; --c-limb:#3366FF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#172033;
    --ink:#F5F8FD;
    --ink3:#94A3B8;
    --primary:rgb(91,132,255);
    --blue50:rgb(70,140,255);
    --blue90:rgb(28,48,92);
    --blue95:rgb(20,32,64);
    --green95:rgb(16,40,28);
    --red95:rgb(64,24,24);
    --status-positive:rgb(30,212,90);
    --status-negative:rgb(255,99,99);
    --fill-normal:rgba(112,115,124,0.22);
    --line-normal:rgba(112,115,124,0.32);
    --line-neutral:rgba(112,115,124,0.28);
    --earth-dry:#4A3F2A;
    --earth-wet:#3A2A1A;
    --bark:#2A1C12;
    --leaf:#5A9A68;
    --leaf-dark:#3D7A4A;
  }
}

/* ── 타이포 (DESIGN.md `## 타이포그래피`) — 절대 px, 10단 ── */
:root {
  --t-caption:12px;  --lh-caption:16px;
  --t-footnote:13px; --lh-footnote:18px;
  --t-subhead:15px;  --lh-subhead:20px;
  --t-body:17px;     --lh-body:26px;
  --t-headline:17px; --lh-headline:22px;
  --t-title3:20px;   --lh-title3:26px;
  --t-title2:24px;   --lh-title2:31px;
  --t-title1:30px;   --lh-title1:38px;

  /* 자간 (DESIGN.md `### 자간`) */
  --tr-open:0.25px; --tr-snug:-0.25px; --tr-tight:-0.5px;

  /* 간격 (DESIGN.md `## 간격`). 화면 좌우는 md(16) 가 아니라 screenPaddingX(20) 다. */
  --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px;
  --sp-12:12px; --sp-20:20px; --sp-48:48px; --sp-64:64px;
  --screen-x:20px;

  /* 반경 (DESIGN.md `## 반경`). 버튼은 md 가 아니라 button 이다. */
  --r-sm:4px; --r-md:12px; --r-lg:16px; --r-pill:999px; --r-button:12px;

  /* 모션 (DESIGN.md `## 모션`) */
  --m-quick:160ms; --m-slow:400ms;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` 이 어떤 display 규칙보다 이겨야 한다 — 숨긴 것이 보이면 즉시 오답을 보여준다. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* 한국어는 단어 중간에서 끊기면 읽기 어렵다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--blue50); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── 레이아웃 ───────────────────────────────────────────── */

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--screen-x); }
.wrap--wide { max-width: 880px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ground); color: var(--ink);
  padding: var(--sp-12) var(--sp-md);
  border-radius: var(--r-md); border: 1px solid var(--line-normal);
}
.skip:focus { left: var(--sp-md); top: var(--sp-md); z-index: 10; }

/* ── 헤더 / 푸터 ────────────────────────────────────────── */

.site-head { border-bottom: 1px solid var(--line-neutral); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); min-height: 60px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-weight: 700; letter-spacing: var(--tr-snug);
  font-size: var(--t-headline); line-height: var(--lh-headline);
  color: var(--ink); text-decoration: none;
}
.brand svg { width: 24px; height: 31px; display: block; }
.site-head nav { display: flex; gap: var(--sp-md); font-size: var(--t-subhead); }
.site-head nav a { color: var(--ink3); text-decoration: none; }
.site-head nav a:hover { color: var(--ink); text-decoration: underline; }

.site-foot {
  margin-top: var(--sp-64);
  border-top: 1px solid var(--line-neutral);
  padding: var(--sp-lg) 0 var(--sp-xl);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  color: var(--ink3);
}
.site-foot .links {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-12);
}
.site-foot .links a { color: var(--ink3); }
.site-foot p { margin: 0; }

/* ── 타이포 적용 ────────────────────────────────────────── */

h1 {
  margin: 0;
  font-size: var(--t-title1); line-height: var(--lh-title1);
  letter-spacing: var(--tr-tight); font-weight: 800;
  text-wrap: balance;
}
h2 {
  margin: var(--sp-xl) 0 0;
  font-size: var(--t-title2); line-height: var(--lh-title2);
  letter-spacing: var(--tr-snug); font-weight: 800;
  text-wrap: balance;
}
h3 {
  margin: 0 0 var(--sp-xs);
  font-size: var(--t-headline); line-height: var(--lh-headline);
  letter-spacing: var(--tr-snug); font-weight: 700;
}
p { margin: var(--sp-12) 0 0; }
.lede { margin-top: var(--sp-md); font-size: var(--t-title3); line-height: var(--lh-title3); }
.eyebrow {
  font-size: var(--t-caption); line-height: var(--lh-caption);
  letter-spacing: var(--tr-open); text-transform: uppercase;
  color: var(--ink3); font-weight: 700; margin: 0 0 var(--sp-12);
}
strong { font-weight: 700; }
ul, ol { margin: var(--sp-12) 0 0; padding-left: var(--sp-lg); }
li + li { margin-top: var(--sp-xs); }

/* 좁은 화면에서만 한 단계 내린다 — 정본이 절대 px 이라 clamp 를 얹지 않는다. */
@media (max-width: 480px) {
  h1 { font-size: var(--t-title2); line-height: var(--lh-title2); }
  h2 { font-size: var(--t-title3); line-height: var(--lh-title3); }
  .lede { font-size: var(--t-body); line-height: var(--lh-body); }
}

/* ── 문서 페이지 ───────────────────────────────────────── */

.doc { padding: var(--sp-xl) 0 var(--sp-sm); }
.doc .meta {
  margin-top: var(--sp-md); padding: var(--sp-12) var(--sp-md);
  background: var(--fill-normal); border-radius: var(--r-md);
  font-size: var(--t-subhead); line-height: var(--lh-subhead);
  /* fillNormal 위에서는 ink3 가 4.14 로 떨어진다 — ink 를 쓴다. */
  color: var(--ink);
}
.doc .meta dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-xs) var(--sp-12); margin: 0; }
.doc .meta dt { font-weight: 700; white-space: nowrap; }
.doc .meta dd { margin: 0; }
.doc section { scroll-margin-top: var(--sp-md); }
.toc {
  margin-top: var(--sp-lg); padding: var(--sp-md) var(--sp-20);
  background: var(--fill-normal); border-radius: var(--r-lg);
}
.toc h2 {
  margin: 0 0 var(--sp-sm);
  font-size: var(--t-caption); line-height: var(--lh-caption);
  letter-spacing: var(--tr-open); text-transform: uppercase;
  color: var(--ink); font-weight: 700;
}
.toc ol { margin: 0; padding-left: var(--sp-20); font-size: var(--t-subhead); line-height: var(--lh-subhead); }

/* ── 히어로 / 스토어 배지 ──────────────────────────────── */

.hero { padding: var(--sp-48) 0 var(--sp-sm); text-align: center; }
.hero .figure { display: flex; justify-content: center; margin-bottom: var(--sp-lg); }
.hero .figure svg { width: 108px; height: 140px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  /* 일반 전환이 아니라 캐릭터 숨쉬기다. celebrate·soil 은 앱의 완료·마음밭 연출 전용이라
     쓰지 않는다(DESIGN.md `## 모션`). slow 의 배수로 둔다. */
  .hero .figure svg { animation: bob calc(var(--m-slow) * 11) ease-in-out infinite; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.stores { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; margin-top: var(--sp-lg); }
/*
 * 배지는 자리만 잡는다 — 앱이 아직 어느 스토어에도 없다(#4·#6). 점선 테두리와 "준비 중"
 * 태그로 상태를 **텍스트로** 알린다. `aria-disabled` 는 쓰지 않는다 — 위젯 롤이 없는 요소에서
 * 보조기술이 무시하므로 있으나 없으나 같고, 있으면 처리된 것처럼 보여 더 나쁘다.
 * 출시 때 `<span>` 을 `<a href>` 로 바꾸고 태그를 지운다.
 */
.store-badge {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-12) var(--sp-20);
  border-radius: var(--r-button);
  border: 1px dashed var(--line-normal);
  background: var(--fill-normal); color: var(--ink);
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 700;
}
.store-badge .tag {
  font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 700;
  padding: 0 var(--sp-sm); border-radius: var(--r-pill);
  background: var(--blue90); color: var(--ink);
}
.hero .stores-note {
  margin-top: var(--sp-12);
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  color: var(--ink3);
}

.promise {
  margin-top: var(--sp-xl); padding: var(--sp-20);
  border-radius: var(--r-lg); background: var(--blue95);
}
.promise p { margin: 0; font-size: var(--t-subhead); line-height: var(--lh-subhead); color: var(--ink); }
.promise p + p { margin-top: var(--sp-sm); }
.promise .fine { font-size: var(--t-footnote); line-height: var(--lh-footnote); }

/* ── 결과 화면 (/verify) ────────────────────────────────── */

.result { padding: var(--sp-64) 0 var(--sp-sm); text-align: center; }
.result .mark {
  width: 56px; height: 56px; margin: 0 auto var(--sp-md);
  border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: var(--t-title2); font-weight: 700; line-height: 1;
}
.result .mark--ok  { background: var(--green95); color: var(--status-positive); }
.result .mark--bad { background: var(--red95);   color: var(--status-negative); }
.result .mark--wait { background: var(--blue95); color: var(--blue50); }
@media (prefers-reduced-motion: no-preference) {
  .result .mark--wait { animation: pulse calc(var(--m-slow) * 3.5) ease-in-out infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.result p { max-width: 34em; margin-left: auto; margin-right: auto; }
.result .fine {
  font-size: var(--t-footnote); line-height: var(--lh-footnote);
  color: var(--ink3); margin-top: var(--sp-md);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; margin-top: var(--sp-lg); }
/*
 * 채운 primary 버튼을 두지 않는다 — primary·blue50 배경 위 어떤 글자색도 다크에서 4.5 를
 * 넘지 못한다(white on primary 다크 3.39). 강조는 blue95 워시 + primary 테두리로 만든다.
 * 정본의 주된 언어가 애초에 채운 면이 아니라 틴트다.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-12) var(--sp-lg);
  border-radius: var(--r-button);
  font-size: var(--t-subhead); line-height: var(--lh-subhead); font-weight: 700;
  text-decoration: none; cursor: pointer; font-family: inherit;
  color: var(--ink); background: var(--fill-normal);
  border: 1px solid var(--line-normal);
  transition: background var(--m-quick) ease-out;
}
.btn:hover { background: var(--blue95); }
.btn--primary { background: var(--blue95); border-color: var(--primary); }
.btn--primary:hover { background: var(--blue90); }

/* ── 주간 토양 (CONTEXT.md [주간 토양]) ─────────────────── */
/*
 * 칸은 **세 상태뿐이다** — 마른 땅 · [은혜 덮기]로 젖은 땅 · 다 자란 나무.
 * 자라는 과정은 그 하루의 연출이지 칸의 상태가 아니다. 그래서 여기서도 중간 단계를 그리지
 * 않는다. 자산은 #16 의 원본을 옮겼고 색은 전부 DESIGN.md 의 자연색 토큰이다.
 */
.soil { margin-top: var(--sp-lg); }
.soil-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-sm); max-width: 420px; margin: 0 auto;
}
.soil-cell { display: grid; gap: var(--sp-xs); justify-items: center; }
.soil-cell svg { width: 100%; height: auto; display: block; }
.soil-cell .day {
  font-size: var(--t-caption); line-height: var(--lh-caption);
  color: var(--ink3); font-weight: 700;
}
.soil-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md);
  justify-content: center; margin-top: var(--sp-md);
  font-size: var(--t-footnote); line-height: var(--lh-footnote); color: var(--ink3);
}
.soil-legend span { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.soil-legend i {
  width: 12px; height: 12px; border-radius: var(--r-sm); display: inline-block;
}
.soil-legend .i-dry { background: var(--earth-dry); }
.soil-legend .i-wet { background: var(--earth-wet); }
.soil-legend .i-tree { background: var(--leaf); }

/* ── 루프 3단 ──────────────────────────────────────────── */

.loop { display: grid; gap: var(--sp-12); margin-top: var(--sp-lg); counter-reset: step; }
@media (min-width: 700px) { .loop { grid-template-columns: repeat(3, 1fr); } }
.loop > li {
  list-style: none; margin: 0;
  padding: var(--sp-md);
  background: var(--fill-normal);
  border-radius: var(--r-lg);
}
.loop > li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-bottom: var(--sp-sm);
  border-radius: var(--r-pill);
  background: var(--blue90); color: var(--ink);
  font-size: var(--t-caption); font-weight: 700; line-height: 1;
}
.loop h3 { margin: 0 0 var(--sp-xs); }
.loop p { margin: 0; font-size: var(--t-subhead); line-height: var(--lh-subhead); }