/* ============================================================
   김프워치 디자인 시스템 — 단일 소스 (ds.css)
   2026-07-05 신설. 전 페이지가 이 파일을 링크해 토큰·컴포넌트를 공유한다.
   페이지 고유 스타일만 각 페이지 <style>에 남기고, 공통은 여기서만 수정.
   (차트 src/chart는 앱형 다크 테마라 별도 유지 — 이 파일 미적용)
   ============================================================ */

/* ── 토큰 ── */
:root {
  --bg: #0d1117;
  --bg2: #10151d;
  --card: #161b22;
  --card2: #1c2333;
  --border: #2d333b;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #f0b90b;
  --accent-dim: #b8901a;
  --accent2: #ffd54f;
  --green: #3fb950;
  --red: #f85149;
  --blue: #58a6ff;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 4px 18px rgba(0,0,0,.35);
  --shadow-2: 0 8px 30px rgba(0,0,0,.55);
  --ease: .16s ease;
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* ── 리셋 · 베이스 ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }

/* ── 타이포 ── */
.ds-h1 { font-size: 1.7rem; letter-spacing: -0.5px; }
.ds-h1 .hl, .ds-h1 .coin { color: var(--accent); }
.ds-sub { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 페이지 헤더 (계산기/도구 공통) ── */
header.site { text-align: center; padding: 24px 0 8px; }
header.site h1 { font-size: 1.7rem; letter-spacing: -0.5px; }
header.site h1 .hl, header.site h1 .coin { color: var(--accent); }
header.site p.sub { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }

/* ── 서브내비 (알약형 탭 링크) ── */
.subnav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.subnav a {
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); font-size: 0.85rem; font-weight: 600;
  text-decoration: none; transition: border-color var(--ease), color var(--ease);
}
.subnav a:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.subnav a.on { background: var(--accent); color: #1a1300; border-color: transparent; }

/* ── 탭 (버튼형) ── */
.tabs { display: flex; gap: 8px; margin: 20px 0 16px; }
.tabs button {
  flex: 1; padding: 12px 8px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card);
  color: var(--muted); font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: all var(--ease); font-family: var(--font);
}
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #111; }
.tabs button:not(.on):hover { border-color: var(--accent); color: var(--text); }
.panel { display: none; } .panel.on { display: block; }

/* ── 카드 ── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-top: 16px;
}
.card h2 { font-size: 1.05rem; margin-bottom: 4px; }
.card p.desc { color: var(--muted); font-size: 0.85rem; margin-bottom: 14px; }

/* ── 폼 필드 ── */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font-size: 1rem; font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field .unit { font-size: 0.75rem; color: var(--muted); margin-left: 4px; }

/* ── 결과 박스 ── */
.result {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 16px;
}
.result .row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.result .row:last-child { border-bottom: none; }
.result .k { color: var(--muted); font-size: 0.88rem; }
.result .v { font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.result .v.big { font-size: 1.35rem; color: var(--accent); }
.result .v.up { color: var(--green); }
.result .v.down { color: var(--red); }
.result .hint { color: var(--muted); font-size: 0.8rem; margin-top: 10px; }

/* ── 알림/면책 배너 ── */
.notice {
  background: rgba(240,185,11,.08); border: 1px solid rgba(240,185,11,.35);
  border-radius: var(--radius); padding: 12px 16px; margin-top: 20px;
  font-size: 0.85rem; color: #e8d18a;
}

/* ── SEO 본문 (가이드/계산기 하단 설명) ── */section.seo { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 32px; }
section.seo h2 { font-size: 1.25rem; margin: 24px 0 10px; }
section.seo h3 { font-size: 1.02rem; margin: 18px 0 6px; }
section.seo p, section.seo li { color: #b8c1cb; font-size: 0.93rem; }
section.seo ul { padding-left: 20px; margin: 8px 0; }
section.seo code { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 0.85em; }

/* ── 공식 박스 · 면책 노트 (가이드/약관/계산기 공유) ── */
.formula { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: 12px 0; font-size: 0.95rem; font-weight: 600; line-height: 1.6; }
.note { background: rgba(240,185,11,.07); border: 1px solid rgba(240,185,11,.3); border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; font-size: 0.87rem; color: #e8d18a; line-height: 1.6; }

/* ── 미니 시세표 ── */
table.mini { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.mini th { font-size: 0.75rem; color: var(--muted); font-weight: 600; text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--border); }
table.mini th:first-child, table.mini td:first-child { text-align: left; }
table.mini td { padding: 8px 4px; text-align: right; font-size: 0.92rem; border-bottom: 1px dashed var(--border); }
table.mini tr:last-child td { border-bottom: none; }

/* ── 페이지 하단 푸터 (계산기/도구 공통) ── */
footer { margin-top: 48px; text-align: center; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--border); padding-top: 20px; }

/* ── 문서형 페이지(소개/약관/개인정보/가이드 글) ── */
.doc { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.8; }
.doc h1 { font-size: 1.45rem; margin-bottom: 6px; line-height: 1.4; }
.doc h1 em { font-style: normal; color: var(--accent); }
.doc .date { color: var(--muted); font-size: 0.83rem; margin-bottom: 24px; }
.doc h2 { font-size: 1.12rem; margin: 30px 0 10px; color: var(--accent); }
.doc h3 { font-size: 1.02rem; margin: 20px 0 6px; }
.doc p, .doc li { font-size: 0.94rem; color: #c9d1d9; margin-bottom: 10px; }
.doc ul, .doc ol { padding-left: 22px; margin: 8px 0 14px; }
.doc li { margin-bottom: 4px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.9rem; }
.doc th, .doc td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.doc th { background: var(--card); color: var(--muted); font-weight: 600; white-space: nowrap; }
.doc .back { display: inline-block; margin-bottom: 20px; color: var(--muted); font-size: 0.88rem; text-decoration: none; }
.doc footer { margin-top: 48px; text-align: center; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--border); padding-top: 20px; }

/* ── CTA 버튼 (가이드 → 도구 유도) ── */
.cta {
  display: block; background: var(--card); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 14px 18px; margin: 20px 0;
  font-weight: 700; text-align: center; transition: background var(--ease);
}
.cta:hover { background: rgba(240,185,11,.1); text-decoration: none; }

/* ── 접근성 ── */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }