/* pages.css — 소개·가이드 정적 페이지 공유 스타일 (index.html 토큰과 동일 계열) */
:root {
  --paper:#d9f5ec; --surface:rgba(255,255,255,.42); --card:rgba(255,255,255,.55);
  --ink:#12313a; --ink-2:#2f4a52; --ink-3:#5f8088;
  --rule:rgba(92,112,145,.22); --rule-2:rgba(92,112,145,.13);
  --accent:#12a594; --accent-h:#0f8f80; --accent-t:rgba(18,165,148,.14);
  --bad:#e0405a; --warn-bg:#FEF3C7; --warn-bd:#f0d68a; --warn-ink:#7c5410;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(165deg,#d9f5ec 0%,#d6eef5 46%,#dbeeff 100%) fixed; color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.74; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; min-height:100vh; word-break:keep-all; overflow-wrap:break-word; }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }
header.site { position:sticky; top:0; z-index:50; background:rgba(217,245,236,.82); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--rule-2); }
header.site .wrap { display:flex; align-items:center; gap:10px; padding-top:13px; padding-bottom:13px; }
.brand { font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:7px; }
.brand .mk { width:10px; height:10px; border-radius:50%; background:var(--accent); display:inline-block; }
header.site .cta { margin-left:auto; }
.btn { display:inline-block; border:0; border-radius:11px; padding:9px 16px; font-size:13.5px; font-weight:700;
  cursor:pointer; font-family:var(--sans); text-decoration:none; letter-spacing:-.01em; }
.btn-p { background:var(--accent); color:#fff; } .btn-p:hover { background:var(--accent-h); }
.btn-g { background:transparent; border:1px solid var(--rule); color:var(--ink-2); }

article { padding:44px 0 10px; }
.eyebrow { font-family:var(--mono); font-size:12px; color:var(--accent-h); letter-spacing:.06em; margin-bottom:10px; }
h1 { font-size:31px; line-height:1.3; letter-spacing:-.03em; margin:0 0 10px; text-wrap:balance; }
.lede { font-size:17.5px; color:var(--ink-2); margin:0 0 8px; text-wrap:pretty; }
h2 { font-size:21px; letter-spacing:-.02em; margin:42px 0 10px; }
h3 { font-size:16.5px; margin:26px 0 6px; }
p { margin:0 0 14px; text-wrap:pretty; }
ul,ol { margin:0 0 14px; padding-left:22px; }
li { margin-bottom:5px; }
b { color:var(--ink); }
.emj { height:1.12em; vertical-align:-0.18em; }
.hero-icons { display:flex; gap:14px; margin:22px 0 6px; }
.hero-icons img { width:44px; height:44px; filter:drop-shadow(0 4px 10px rgba(18,90,80,.15)); }
/* 인용·포인트 박스 */
.point { background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:15px 18px; margin:18px 0;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.point b:first-child { color:var(--accent-h); }
.warn { background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:12px; padding:13px 16px; color:var(--warn-ink); margin:18px 0; font-size:15px; }
/* 표 */
.tbl { width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px; background:var(--card); border-radius:12px; overflow:hidden; }
.tbl th { text-align:left; font-size:12.5px; color:var(--ink-3); font-weight:600; padding:9px 13px; border-bottom:1px solid var(--rule); background:var(--surface); }
.tbl td { padding:10px 13px; border-bottom:1px solid var(--rule-2); vertical-align:top; }
.tbl tr:last-child td { border-bottom:none; }
.tbl-scroll { overflow-x:auto; margin:16px 0; border-radius:12px; }
.tbl-scroll .tbl { margin:0; min-width:480px; }
/* before/after */
.ba { display:grid; gap:10px; margin:16px 0; }
.ba > div { border-radius:12px; padding:13px 16px; font-size:15px; }
.ba .b4 { background:rgba(224,64,90,.07); border:1px solid rgba(224,64,90,.22); }
.ba .af { background:var(--accent-t); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); }
.ba .tag { font-family:var(--mono); font-size:11px; display:block; margin-bottom:4px; }
.ba .b4 .tag { color:var(--bad); } .ba .af .tag { color:var(--accent-h); }
/* CTA 박스 */
.cta-box { background:var(--card); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:16px;
  padding:24px 22px; margin:40px 0 8px; text-align:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.cta-box h2 { margin:0 0 6px; font-size:19px; text-wrap:balance; }
.cta-box p { color:var(--ink-2); font-size:14.5px; margin-bottom:14px; }
.cta-box .btn-p { font-size:15px; padding:12px 26px; }
/* 관련 글 */
.rel { margin:34px 0 0; padding-top:18px; border-top:1px solid var(--rule-2); }
.rel .h { font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:9px; }
.rel a { display:block; color:var(--accent-h); text-decoration:none; font-size:15px; padding:4px 0; }
.rel a:hover { text-decoration:underline; }
footer.site { border-top:1px solid var(--rule); margin-top:48px; padding:24px 0 46px; font-family:var(--mono);
  font-size:11.5px; color:var(--ink-3); line-height:1.9; }
footer.site a { color:var(--accent); text-decoration:none; }
@media (max-width:560px){ h1 { font-size:26px; } body { font-size:16px; } article { padding-top:32px; } }