/* ─────────────────────────────────────────────────────────────
   오라주 문서·가이드 공용 스타일

   about/privacy/terms 는 각자 인라인 CSS 를 갖고 있으나,
   가이드는 페이지 수가 많아 중복 인라인 대신 공용 파일로 뺀다.
   빌드 단계가 없으므로 <link> 로 그대로 로드한다.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

:root {
  --p900:#26215C; --p800:#3C3489; --p600:#534AB7; --p400:#7F77DD;
  --p200:#AFA9EC; --p100:#CECBF6; --p50:#EEEDFE;
  --bg:#ffffff; --bg2:#f7f7f8; --bg3:#f0eff3;
  --text:#111118; --muted:#6b6b7a;
  --border:rgba(0,0,0,0.10); --border2:rgba(0,0,0,0.06);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f0e1a; --bg2:#19182a; --bg3:#221f35;
    --text:#eeedf8; --muted:#9997b8;
    --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.06);
    --p50:#26215C; --p100:#3C3489;
  }
}

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-decoration: none; }

.wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── 상단 로고 · 홈 링크 ── */
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.logo { display:flex; align-items:center; gap:12px; }
.logo-mark {
  width:40px; height:40px; border-radius:11px;
  background:var(--p600); border:1px solid var(--p400);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#fff;
}
.logo-name { font-size:16px; font-weight:600; color:var(--text); letter-spacing:0.03em; }
.logo-sub  { font-size:11px; color:var(--muted); margin-top:1px; }
.back-link {
  font-size:12px; color:var(--p600);
  border:0.5px solid var(--border); border-radius:999px; padding:6px 14px;
  transition:border-color 0.15s; white-space:nowrap;
}
.back-link:hover { border-color:var(--p400); }
@media (prefers-color-scheme: dark) { .back-link { color:var(--p400); } }

/* ── 문서 간 이동 탭 ── */
.doc-nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.5rem; }
.doc-nav a {
  font-size:12px; color:var(--muted);
  border:0.5px solid var(--border); border-radius:999px; padding:6px 14px;
  transition:border-color 0.15s, color 0.15s;
}
.doc-nav a:hover { border-color:var(--p400); color:var(--text); }
.doc-nav a[aria-current="page"] {
  color:var(--p800); background:var(--p50); border-color:var(--p100); font-weight:500;
}
@media (prefers-color-scheme: dark) {
  .doc-nav a[aria-current="page"] {
    color:var(--p200); background:rgba(83,74,183,0.18); border-color:rgba(83,74,183,0.30);
  }
}

/* ── 빵부스러기 ── */
.crumb { font-size:12px; color:var(--muted); margin-bottom:0.9rem; }
.crumb a { color:var(--p600); }
.crumb a:hover { text-decoration:underline; }
@media (prefers-color-scheme: dark) { .crumb a { color:var(--p400); } }

/* ── 본문 카드 ── */
.doc {
  background:var(--bg); border:0.5px solid var(--border);
  border-radius:var(--radius-lg); padding:2.25rem 2rem;
}
.doc-kicker {
  display:inline-block; font-size:11px; font-weight:500;
  color:var(--p800); background:var(--p50);
  border:0.5px solid var(--p100); border-radius:999px;
  padding:4px 12px; margin-bottom:0.9rem;
}
@media (prefers-color-scheme: dark) {
  .doc-kicker { color:var(--p200); background:rgba(83,74,183,0.18); border-color:rgba(83,74,183,0.30); }
}
.doc-title { font-size:clamp(24px,4vw,30px); font-weight:600; line-height:1.25; margin-bottom:0.5rem; }
.doc-updated { font-size:12px; color:var(--muted); margin-bottom:1.75rem; }
.doc-intro { font-size:15px; color:var(--muted); margin-bottom:2rem; line-height:1.75; }

.doc section { margin-bottom:1.9rem; }
.doc h2 {
  font-size:16px; font-weight:600; color:var(--text); margin-bottom:0.6rem;
  display:flex; align-items:baseline; gap:8px;
}
.doc h2 .num { font-size:12px; font-weight:500; color:var(--p600); flex-shrink:0; }
@media (prefers-color-scheme: dark) { .doc h2 .num { color:var(--p400); } }
.doc h3 { font-size:14px; font-weight:600; color:var(--text); margin:1.1rem 0 0.4rem; }
.doc p { font-size:14.5px; color:var(--muted); line-height:1.78; }
.doc p + p { margin-top:0.7rem; }

.doc ul, .doc ol { list-style:none; margin-top:0.5rem; }
.doc ul li {
  position:relative;
  font-size:14.5px; color:var(--muted); line-height:1.7;
  padding:4px 0 4px 15px;
}
.doc ul li::before {
  content:""; position:absolute; left:0; top:13px;
  width:5px; height:5px; border-radius:50%;
  background:var(--p400);
}
/* 순서가 의미를 갖는 절차는 번호를 노출한다 */
.doc ol { counter-reset:step; }
.doc ol li {
  position:relative; counter-increment:step;
  font-size:14.5px; color:var(--muted); line-height:1.7;
  padding:5px 0 5px 28px;
}
.doc ol li::before {
  content:counter(step);
  position:absolute; left:0; top:6px;
  width:19px; height:19px; border-radius:50%;
  background:var(--p50); color:var(--p800);
  font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
@media (prefers-color-scheme: dark) {
  .doc ol li::before { background:rgba(83,74,183,0.25); color:var(--p200); }
}

.doc a { color:var(--p600); }
.doc a:hover { text-decoration:underline; }
@media (prefers-color-scheme: dark) { .doc a { color:var(--p400); } }
.doc strong { color:var(--text); font-weight:600; }
.doc code {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; background:var(--bg3); color:var(--text);
  border-radius:5px; padding:2px 6px;
}

/* ── 강조 박스 ── */
.callout {
  background:var(--bg2); border-left:3px solid var(--p400);
  border-radius:var(--radius-sm); padding:0.95rem 1.15rem; margin-top:0.8rem;
}
.callout p { font-size:13.5px; }
.callout-title { font-size:12px; font-weight:600; color:var(--text); margin-bottom:0.25rem; }

/* ── 표 (좁은 화면에서는 가로 스크롤) ── */
.table-scroll { overflow-x:auto; margin-top:0.8rem; }
.doc table { border-collapse:collapse; width:100%; min-width:420px; }
.doc th, .doc td {
  text-align:left; font-size:13.5px; line-height:1.6;
  padding:9px 12px; border-bottom:0.5px solid var(--border);
}
.doc th { color:var(--text); font-weight:600; background:var(--bg2); white-space:nowrap; }
.doc td { color:var(--muted); }

/* ── 가이드 목록 카드 ── */
.glist { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:0.9rem; }
.gcard {
  display:block; background:var(--bg2); border:0.5px solid var(--border2);
  border-radius:var(--radius-md); padding:1rem 1.1rem; color:var(--text);
  transition:border-color 0.15s, transform 0.15s;
}
.gcard:hover { border-color:var(--p400); transform:translateY(-2px); text-decoration:none; }
.gcard-icon { font-size:20px; line-height:1; margin-bottom:0.5rem; }
.gcard-title { font-size:14px; font-weight:600; }
.gcard-desc { font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.6; }

/* ── 관련 문서 / 다음 읽을 것 ── */
.related { display:flex; flex-wrap:wrap; gap:8px; margin-top:0.7rem; }
.related a {
  font-size:12.5px; color:var(--p600);
  border:0.5px solid var(--border); border-radius:999px; padding:6px 14px;
  transition:border-color 0.15s;
}
.related a:hover { border-color:var(--p400); text-decoration:none; }
@media (prefers-color-scheme: dark) { .related a { color:var(--p400); } }

/* ── 앱 바로가기 버튼 ── */
.app-cta {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  background:var(--bg2); border:0.5px solid var(--border);
  border-radius:var(--radius-md); padding:1.05rem 1.25rem; margin-top:1rem;
}
.app-cta-name { font-size:14px; font-weight:600; color:var(--text); }
.app-cta-url { font-size:11.5px; color:var(--muted); margin-top:2px; }
.app-cta-btn {
  font-size:12.5px; font-weight:500; color:#fff; background:var(--p600);
  border-radius:999px; padding:8px 18px; white-space:nowrap;
  transition:background 0.15s;
}
.app-cta-btn:hover { background:var(--p800); text-decoration:none; }

/* ── 푸터 ── */
.footer {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  background:var(--bg); border:0.5px solid var(--border);
  border-radius:var(--radius-md); padding:1.1rem 1.35rem; margin-top:1.5rem;
}
.footer-brand { font-size:14px; font-weight:500; color:var(--text); }
.footer-meta {
  font-size:11px; color:var(--muted); margin-top:3px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.footer-meta a { color:var(--p600); }
@media (prefers-color-scheme: dark) { .footer-meta a { color:var(--p400); } }
.sep { width:3px; height:3px; border-radius:50%; background:var(--border); display:inline-block; flex-shrink:0; }
.footer-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; color:var(--p800);
  background:var(--p50); border:0.5px solid var(--p100);
  border-radius:999px; padding:6px 14px;
}
@media (prefers-color-scheme: dark) {
  .footer-badge { color:var(--p200); background:rgba(83,74,183,0.18); border-color:rgba(83,74,183,0.30); }
}

@media (max-width: 600px) {
  .wrap { padding:1rem 1rem 3rem; }
  .doc { padding:1.5rem 1.25rem; }
  .footer { flex-direction:column; align-items:flex-start; }
  .app-cta { flex-direction:column; align-items:flex-start; }
}