/* 앱 토큰(src/theme/tokens.ts)과 같은 색: 화이트 + 잉크 + 볼트 포인트 하나 */
:root {
  --bg: #ffffff;
  --surface: #f5f5f3;
  --border: #efefef;
  --border-strong: #dddddd;
  --text: #111111;
  --text-2: #555555;
  --muted: #707070;
  --volt: #d4ff3f;
  --on-volt: #111111;
  --todo: #fff3b0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f10;
    --surface: #1a1b1d;
    --border: #232427;
    --border-strong: #303236;
    --text: #f2f2f0;
    --text-2: #b8b8b5;
    --muted: #9a9a97;
    --todo: #5a4c00;
    color-scheme: dark;
  }
  .logo img { content: url('/wordmark-white.svg'); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a { color: inherit; }

/* 머리·꼬리 */
.top {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.logo { display: block; line-height: 0; }
.logo img { height: 28px; width: auto; }
.top nav { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 14px; }
.top nav a { text-decoration: none; color: var(--text-2); padding: 4px 0; }
.top nav a:hover, .top nav a[aria-current='page'] { color: var(--text); }
.top nav a[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--volt); }

.foot {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--text-2);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .note { flex-basis: 100%; }

/* 문서(방침·약관·지원) */
.doc { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }
.doc h1 { font-size: 32px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.doc .effective { color: var(--text-2); font-size: 14px; margin: 0 0 32px; }
.doc h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 44px 0 12px;
  scroll-margin-top: 16px;
}
.doc p, .doc li { color: var(--text-2); }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 1.25em; margin: 0 0 14px; }
.doc li { margin: 4px 0; }
.doc strong { color: var(--text); font-weight: 700; }
.doc code { font-size: 0.9em; background: var(--surface); padding: 1px 5px; border-radius: 4px; }
.doc blockquote { margin: 0 0 14px; padding: 12px 16px; background: var(--surface); border-radius: 12px; }
.doc a { text-decoration-color: var(--border-strong); text-underline-offset: 3px; }

.table { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--border); }
th { background: var(--surface); font-weight: 600; white-space: nowrap; }
td { color: var(--text-2); min-width: 7em; }
tr:last-child td { border-bottom: 0; }

mark.todo { background: var(--todo); color: inherit; padding: 0 3px; border-radius: 3px; }

/* 소개(첫 화면) */
.hero { max-width: 960px; margin: 0 auto; padding: 56px 16px 40px; }
.hero .eyebrow { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 0 0 16px; }
.hero h1 {
  font-size: clamp(36px, 8vw, 64px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.hero h1 .hl { background: linear-gradient(transparent 58%, var(--volt) 58%); color: var(--text); }
@media (prefers-color-scheme: dark) { .hero h1 .hl { background: none; color: var(--volt); } }
.hero .lead { font-size: 18px; color: var(--text-2); margin: 0 0 28px; max-width: 32em; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--volt);
  color: var(--on-volt);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
}

.features {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 16px 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.feature { background: var(--surface); border-radius: 20px; padding: 24px 22px; }
.feature .num { font-size: 13px; font-weight: 700; color: var(--muted); }
.feature h3 { font-size: 18px; margin: 8px 0 6px; }
.feature p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* 지원 */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  background: var(--surface);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 8px;
}
.contact strong { display: block; font-size: 17px; }
.contact span { color: var(--muted); font-size: 14px; }
.btn {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 999px;
}
.doc details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.doc summary { cursor: pointer; font-weight: 600; color: var(--text); }
.doc details p { margin: 10px 0 0; }