/* 담아두 웹 — iOS DesignSystem.swift 토큰 그대로 (brandPurple/Pink/Orange, radius 18/14) */
:root {
  --purple: #5C33C2; --pink: #C72980; --orange: #F2792B;
  --accent: #8C2173; --accent-fg: #7A1463; --accent-soft: #F7E8F7;
  --canvas: #F2F2F7; --surface: #fff; --ink: #111114; --ink-2: #5f5f66; --ink-3: #8A8A8F;
  --line: rgba(60,60,67,.10); --radius: 18px; --control: 14px;
  --grad: linear-gradient(135deg, var(--purple), var(--pink) 55%, var(--orange));
}
@media (prefers-color-scheme: dark) {
  :root { --canvas:#0f0f12; --surface:#1c1c21; --ink:#f2f2f5; --ink-2:#b8b8c0; --ink-3:#8a8a92;
          --accent-fg:#ff94cc; --accent-soft:#33122e; --line:rgba(255,255,255,.10); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--canvas); color:var(--ink); font:16px/1.65 -apple-system, "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif; -webkit-font-smoothing:antialiased; word-break:keep-all; }
a { color:var(--accent-fg); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
header.top { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.4px; color:var(--ink); font-size:18px; }
.brand img { width:28px; height:28px; border-radius:8px; display:block; box-shadow:0 2px 6px rgba(0,0,0,.12); }
nav.top a { color:var(--ink-2); font-size:14px; font-weight:600; margin-left:18px; }
nav.top a:hover { color:var(--ink); text-decoration:none; }
footer { border-top:1px solid var(--line); margin-top:72px; padding:28px 0 40px; color:var(--ink-3); font-size:13px; }
footer .links { display:flex; flex-wrap:wrap; gap:6px 16px; }
footer .links a { color:var(--ink-2); }
.card { background:var(--surface); border-radius:var(--radius); padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.05); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 22px; border-radius:var(--control); font-weight:800; font-size:16px; letter-spacing:-.2px; }
/* 밝은 모드: 검정 막을 얇게(글자 대비용) + 브랜드색 그림자로 선명하게. 22%는 밝은 배경에서 갈색빛으로 탁해짐 */
.btn-primary { color:#fff; background:var(--grad); position:relative; overflow:hidden; box-shadow:0 8px 22px rgba(199,41,128,.28); text-shadow:0 1px 2px rgba(0,0,0,.18); }
.btn-primary::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.10); }
.btn-primary span { position:relative; }
.btn-primary:hover { text-decoration:none; box-shadow:0 10px 26px rgba(199,41,128,.36); }
@media (prefers-color-scheme: dark) {
  .btn-primary { box-shadow:none; text-shadow:none; }
  .btn-primary::after { background:rgba(0,0,0,.22); }
  .btn-primary:hover { box-shadow:none; }
}
.btn-ghost { color:var(--accent-fg); background:var(--accent-soft); }
.chip { display:inline-block; font-size:12px; font-weight:700; color:var(--accent-fg); background:var(--accent-soft); padding:5px 10px; border-radius:999px; }
/* 문서 페이지 */
.doc h1 { font-size:30px; letter-spacing:-.8px; margin:36px 0 8px; }
.doc .meta { color:var(--ink-3); font-size:14px; margin-bottom:28px; }
.doc h2 { font-size:20px; letter-spacing:-.4px; margin:36px 0 10px; }
.doc h3 { font-size:16px; margin:22px 0 6px; }
.doc p, .doc li { color:var(--ink-2); }
.doc table { width:100%; border-collapse:collapse; font-size:14px; margin:12px 0 18px; }
.doc th, .doc td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc th { color:var(--ink-3); font-weight:700; white-space:nowrap; }
.doc .todo { background:#FFF4E5; color:#8A4005; border-radius:10px; padding:10px 14px; font-size:14px; }
@media (prefers-color-scheme: dark) { .doc .todo { background:#3a2410; color:#ffb96a; } }
.doc-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }

/* 모바일 — 좁은 폭에서 어색한 줄바꿈 정리 */
@media (max-width: 600px) {
  header.top { gap:12px; }
  nav.top { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 12px; }
  nav.top a { margin-left:0; font-size:13px; white-space:nowrap; }
  footer { margin-top:56px; }
  .doc h1 { font-size:26px; margin-top:28px; }
  .doc h2 { font-size:19px; margin-top:32px; }
  /* 표 → 행마다 카드로 쌓기. 열 3~4개를 335px에 억지로 넣으면 한 줄에 한두 단어씩 끊김 */
  .doc table, .doc tbody, .doc tr, .doc td { display:block; width:100%; }
  .doc tr:has(th) { display:none; }
  .doc tr { padding:12px 0 14px; border-bottom:1px solid var(--line); }
  .doc tr:last-child { border-bottom:0; }
  .doc td { padding:4px 0; border:0; }
  .doc td[data-label]::before { content:attr(data-label); display:block; font-size:12px; font-weight:700; color:var(--ink-3); margin-bottom:1px; }
  .doc td:first-child { color:var(--ink); font-weight:600; }
}