/* 움터 누리집 공통 — 토큰(A 「새벽 새싹」 최종 2026-10-18) · 글꼴 · 틀 · 부품. 이름은 앱(src/styles.css · tailwind)과 같다.
   밝게가 기본. 어둡게는 :root[data-theme="dark"](assets/theme.js 가 붙임) · 화면에서만(인쇄는 늘 밝게).
   숫자: DESIGN_PRINCIPLES 3장. 글자는 rem, 여백은 px. 요소 규칙은 .page 안에만(소개 무대와 부딪히지 않게)
   명세: docs/design/web-dashboard/SPEC.md 2장(토큰) · 3장(글자·간격) · 5장(페이지) · 7장(이 파일 초안).
   토큰 값은 tests/site-tokens.test.js 가 motion.css · verify.html · theme.js 와 맞는지 본다 */
@font-face { font-family: 'UmteoSans'; src: url('/assets/fonts/umteo-sans.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root { color-scheme: light;
  --bg:#FAF8F3; --surface:#FFFEFC; --sunken:#F3F0E8; --overlay:#FFFFFF; --line:#E7E1D7; --line-strong:#808799;
  --ink:#1F2A44; --sub:#586178; --muted:#62697C; --faint:#838999;
  --brand:#277636; --brand-hover:#1F632C; --on-brand:#FFFFFF; --brand-soft:#E8F3E6; --brand-ink:#277636;
  --accent:#E9C66E; --on-accent:#2A2410; --accent-soft:#FEF8D9; --accent-ink:#845B22;
  --good:#3C7660; --good-soft:#E5EFE9; --good-ink:#2F6752; --warn:#8C5E1C; --warn-soft:#F7EEDC; --warn-ink:#835418;
  --bad:#A6544D; --bad-soft:#F7E8E4; --bad-ink:#94433E; --bad-fill:#A4524B; --on-bad:#FFFFFF; --focus:#2F4A86;
  --shadow-card: 0 1px 2px rgb(31 42 68 / .06); --shadow-overlay: 0 12px 32px -12px rgb(31 42 68 / .18);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --dur-1:150ms; --dur-2:200ms; --dur-3:260ms; --ease-out:cubic-bezier(.2,.8,.2,1);
  --gutter:16px; --read-max:576px; --task-max:360px; --hit:44px;
  --sans:'UmteoSans','Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --serif:'UmteoSerif','Gowun Batang','Nanum Myeongjo','AppleMyungjo',serif;
}
@media screen {
  :root[data-theme="dark"] { color-scheme: dark;
    --bg:#0E1624; --surface:#172031; --sunken:#0A101C; --overlay:#202A3C; --line:#283243; --line-strong:#6D7789;
    --ink:#E8E5DE; --sub:#A8B0C1; --muted:#929CB2; --faint:#747F96;
    --brand:#2E7D40; --brand-hover:#2A7139; --on-brand:#FFFFFF; --brand-soft:#1B3422; --brand-ink:#8BCD99;
    --accent:#EBC57D; --on-accent:#2A2410; --accent-soft:#362C1C; --accent-ink:#EBC57D;
    --good:#8CC4AA; --good-soft:#1B342B; --good-ink:#8CC4AA; --warn:#DEBA7A; --warn-soft:#382B19; --warn-ink:#DEBA7A;
    --bad:#E2A49A; --bad-soft:#402527; --bad-ink:#E2A49A; --bad-fill:#A05652; --on-bad:#FFFFFF; --focus:#ACBFF0;
    --shadow-card: none; --shadow-overlay: 0 12px 32px -12px rgb(0 0 0 / .55);
  }
  :root[data-theme="dark"] img.shot { filter: brightness(.92); }   /* 밝은 화면 사진이 어둡게에서 빛나지 않게(Apple HIG) — 인쇄엔 걸지 않음 */
}
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(> body.page) { background: var(--sunken); }   /* 짧은 글 페이지(404)에서 바닥 띠 아래도 바닥 색 — 빈 바탕이 끼지 않게. 몸통(.page)은 --bg */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 글자 단계 — tailwind 이름 그대로 */
.t-2xs{font-size:.6875rem;line-height:1.273} .t-xs{font-size:.75rem;line-height:1.333} .t-sm{font-size:.8125rem;line-height:1.385}
.t-base{font-size:.9375rem;line-height:1.467} .t-lg{font-size:1rem;line-height:1.375} .t-2xl{font-size:1.25rem;line-height:1.3} .t-3xl{font-size:1.5rem;line-height:1.25}

/* 글 페이지 바탕 (body.page) */
.page { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:.9375rem; line-height:1.467;
  word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; }
.page *, .page *::before, .page *::after { box-sizing:border-box; }
.wrap { max-width:calc(var(--read-max) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }
.wrap.task { max-width:calc(var(--task-max) + 2 * var(--gutter)); }
.page main:focus { outline:none; }   /* '본문 바로 가기'로 옮긴 포커스(tabindex=-1)에는 링을 그리지 않음 — 키보드 포커스는 다음 링크부터 */
.page h1 { margin:16px 0 4px; font-size:1.5rem; line-height:1.25; font-weight:800; }
.page h2 { margin:16px 0 8px; font-size:1rem; line-height:1.375; font-weight:700; }
.page p, .page li { margin:0 0 8px; }
.page .read p, .page .read li { line-height:1.7; }
.page .read ul, .page .read ol { margin:0 0 8px; padding-left:20px; }
.page .meta, .page .hint { color:var(--sub); font-size:.8125rem; line-height:1.385; }
.page a { color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.skip { position:absolute; left:8px; top:-60px; z-index:50; padding:12px 16px; background:var(--overlay); color:var(--ink); border-radius:var(--r-md); }
.skip:focus { top:8px; }

/* 머리 띠 — 보통 판은 a.brand-link, 막다른 판은 span.brand-link */
.site-head { background:var(--bg); border-bottom:1px solid var(--line); }
.site-head-in { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; padding-top:4px; padding-bottom:4px; }   /* 양옆 16 은 .wrap 이 줌(padding 한꺼번에 쓰면 지워짐) */
.brand-link { display:inline-flex; align-items:center; gap:4px; min-height:var(--hit); color:var(--ink); font-weight:800; font-size:1rem; }
.page .brand-link { color:var(--ink); text-decoration:none; }
.mark { width:36px; height:36px; flex:none; }
.head-actions { display:flex; align-items:center; gap:8px; }

/* 버튼 */
.btn, .theme-btn, .head-link { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:var(--hit);
  border:1px solid transparent; border-radius:var(--r-md); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.btn { padding:0 16px; font-size:.9375rem; }
.btn.fill { background:var(--brand); color:var(--on-brand); }
.btn.soft { background:var(--brand-soft); color:var(--brand-ink); }
.btn.line { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn.danger { background:var(--bad-fill); color:var(--on-bad); }
.btn.block { display:flex; width:100%; }
.btn:active { transform:translateY(1px); }
@media (hover:hover) { .btn.fill:hover { background:var(--brand-hover); } .btn.line:hover, .theme-btn:hover, .head-link:hover { background:var(--sunken); } }
.page .btn, .page .theme-btn, .page .head-link { text-decoration:none; }   /* 링크로 만든 버튼의 밑줄만 지움. 글자색은 .btn.fill(클래스 둘)이 .page a 를 이겨요 */

/* 테마 버튼 — 스크립트가 data-theme 을 붙였을 때만 보임 · 글자/아이콘은 data-theme 으로 고름 */
.theme-btn { display:none; padding:0 12px; background:var(--surface); color:var(--ink); border-color:var(--line); font-size:.8125rem; white-space:nowrap; }
:root[data-theme] .theme-btn { display:inline-flex; }
.theme-btn svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.when-dark, .theme-btn .ico-sun { display:none; }
:root[data-theme="dark"] .when-dark, :root[data-theme="dark"] .theme-btn .ico-sun { display:inline; }
:root[data-theme="dark"] .when-light, :root[data-theme="dark"] .theme-btn .ico-moon { display:none; }
.head-link { padding:0 12px; color:var(--ink); font-size:.8125rem; }

/* 카드 · 안내 상자 · 꼬리표 */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; box-shadow:var(--shadow-card); }
.glance { background:var(--brand-soft); border-radius:var(--r-md); padding:12px; margin:12px 0 16px; }
.glance h2 { margin:0 0 4px; color:var(--brand-ink); }
.glance ul { margin:0; padding-left:20px; } .glance li, .page .read .glance li { margin:0; line-height:1.467; }
.note-warn { background:var(--warn-soft); color:var(--ink); border-radius:var(--r-md); padding:12px; }   /* 늘 ⚠ + '주의' 글자와 함께 */
.chip { display:inline-flex; align-items:center; padding:0 8px; min-height:22px; border-radius:var(--r-pill); font-size:.75rem; font-weight:700;
  background:var(--brand-soft); color:var(--brand-ink); }   /* 글자 꼬리표 — 누르는 것이 아님(D7) */
.list-plain, .page .read .list-plain { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px; }
.page .list-plain li { margin:0; }
.list-plain .card > b, .list-plain .card > .meta { display:block; }   /* [제목 16 굵게] 한 줄 + 설명 13 */
.list-plain .card > .meta { margin-top:4px; }

/* 믿음 한 줄 — '아이 기록은 이 휴대폰에만 저장돼요'(DESIGN_PRINCIPLES 1-5 D, 2026-10-29). 색은 토큰만.
   .trust-line: 첫 화면·글 한 장 소개 — 상자 전체가 '움터의 약속' 으로 가는 링크(누르는 곳 44 이상). .trust-note: 안내 글 끝 앱 받기 곁의 작은 글 한 줄 */
.trust-line, .page a.trust-line { display:flex; align-items:flex-start; gap:8px; margin:12px 0; padding:12px; background:var(--brand-soft); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); font-size:.8125rem; line-height:1.5; font-weight:400; text-align:left; text-decoration:none; }
.trust-line > svg { flex:none; width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--brand-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.trust-line .tl-body { min-width:0; }
.trust-line .tl-main { display:block; font-size:.9375rem; line-height:1.467; }
.trust-line b { font-weight:700; }
.trust-line .tl-sub { display:block; margin-top:4px; color:var(--sub); }
.trust-line .tl-more { display:block; margin-top:4px; color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover) { .trust-line:hover { background:var(--sunken); } }
.trust-note, .page .trust-note { margin:8px 0 0; color:var(--sub); font-size:.8125rem; line-height:1.385; text-align:center; text-wrap:balance; }
.trust-note span { display:inline-block; } /* 문장 한 덩어리 — 줄은 문장 사이에서 바뀐다(문장이 한 줄보다 길면 그 안에서 바뀜) */
.trust-note a { display:inline-flex; align-items:center; min-height:var(--hit); }
@media (forced-colors: active) { .trust-line { border-color:CanvasText; } .trust-line > svg { stroke:CanvasText; } }

/* 차례(접기) — 항목 글은 본문 제목 그대로라 번호 표시는 두지 않음 · 열림/닫힘은 꺾쇠로 */
.toc { margin:0 0 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.toc summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:var(--hit); padding:0 12px; font-weight:700; cursor:pointer; list-style:none; }
.toc summary::-webkit-details-marker { display:none; }
.toc summary::after { content:''; flex:none; width:8px; height:8px; margin:-4px 4px 0 0; border-right:2px solid var(--sub); border-bottom:2px solid var(--sub); transform:rotate(45deg); }
.toc[open] summary::after { margin-top:4px; transform:rotate(-135deg); }
.toc ol, .page .read .toc ol { margin:0; padding:0 12px 4px; list-style:none; }
.page .toc li { margin:0 0 4px; line-height:1.385; }
.toc a { display:flex; align-items:center; min-height:var(--hit); }
@media (min-width:600px) { .toc ol { columns:2; column-gap:16px; } .toc li { break-inside:avoid; } }

/* 쌓이는 표 — 600 미만은 줄마다 카드 */
.stack-table { width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:.8125rem; line-height:1.385; overflow-wrap:break-word; }   /* anywhere 이면 표가 열 폭을 한 글자까지 줄여 '구분' 열이 낱자로 꺾임 */
.stack-table th, .stack-table td { padding:8px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
.stack-table thead th { background:var(--sunken); color:var(--ink); font-weight:700; }
.stack-table .cell-label { display:none; }
@media (max-width:599.98px) {
  .stack-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td { display:block; }
  .stack-table tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; margin-top:8px; }
  .stack-table th, .stack-table td { border:0; padding:0; }
  .stack-table tbody th { font-size:1rem; line-height:1.375; margin-bottom:8px; }
  .stack-table td + td { margin-top:8px; }
  .stack-table .cell-label { display:block; color:var(--sub); font-weight:600; }
}

/* 바닥 */
.site-foot { margin-top:16px; background:var(--sunken); border-top:1px solid var(--line); padding:8px 0 16px; }
.foot-links { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:auto auto; justify-content:start; gap:0 16px; }   /* 2×2 · 칸 폭은 글자만큼 — 320 폭 115% 에서도 '문의 help@umteo.org' 한 줄(약 149 + 16 + 103 = 268 ≤ 288) */
.page .foot-links li { margin:0; }
.foot-links a { display:flex; align-items:center; min-height:var(--hit); color:var(--sub); font-weight:600; font-size:.8125rem; }
.foot-links a[aria-current="page"] { color:var(--ink); text-decoration:none; }
@media (min-width:600px) { .foot-links { display:flex; flex-wrap:wrap; gap:0 16px; } }
.foot-note { margin:8px 0 0; color:var(--sub); font-size:.8125rem; line-height:1.385; }
.page .foot-note + .foot-note { margin-top:0; }

/* 동작 줄이기 — 움직임만 끈다(transform 을 모든 요소에서 풀지 않음) */
@media (prefers-reduced-motion: reduce) {
  .page *, .page *::before, .page *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .page .btn:active { transform:none; }
}
@media (forced-colors: active) { .theme-btn svg { stroke:CanvasText; } }
@media print { :root { color-scheme: light !important; } .site-head, .site-foot, .theme-btn, .skip { display:none !important; } .page { background:#fff; } }