/* Pretendard Variable — 한글 가독성. 로컬 번들(외부 폰트 CDN 없음, CSP font-src 'self'). */
@font-face{font-family:'Pretendard Variable';src:url('/vendor/fonts/PretendardVariable.subset.woff2') format('woff2-variations');font-weight:45 920;font-style:normal;font-display:swap}
:root{
  --bg:#fbfcfd;--panel:#fff;--ink:#101d28;--muted:#56687a;--line:#e3e9ef;--line-soft:#eef2f6;
  --brand:#0f766e;--brand-ink:#0b5a54;--brand-soft:#e7f4f1;
  --warn:#845400;--warn-soft:#fff8e8;--warn-line:#f0dfb8;
  --deep:#0d1b26;--deep-ink:#eaf2f6;--deep-muted:#9cb2c0;--deep-line:#22384a;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b141d;--panel:#121f2b;--ink:#e8eff4;--muted:#9bb0bf;--line:#223445;--line-soft:#1a2937;
  --brand:#5eead4;--brand-ink:#8ff0e1;--brand-soft:#11322f;
  --warn:#f3c777;--warn-soft:#2a2213;--warn-line:#3d3119;
  --deep:#17293a;--deep-ink:#eef5f9;--deep-muted:#a7bccb;--deep-line:#2b4257;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16.5px;line-height:1.72;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand-ink)}
@media (prefers-color-scheme:dark){a{color:var(--brand)}}

/* ── 머리말 ───────────────────────────────────────────────────────────── */
.top{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;
  max-width:1060px;margin:auto;padding:18px 24px}
.top .brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:18px;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.top .brand svg{width:26px;height:26px;flex:none;color:var(--brand)}
@media (prefers-color-scheme:dark){.top .brand svg{color:var(--brand)}}
.top nav{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14.5px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}
/* 첫 화면부터 이어지는 로고 배경(2026-10-17 초안) — 원본 로고 무늬 하나를 아주 크게(tools/make_header_backgrounds.py,
   VectorCraft 로 미리보기 확인). 중심이 오른쪽 가장자리에 있어 고리의 왼쪽 호가 첫 화면 오른쪽 위에서 시작해
   스크롤을 내리면 아래로 2~3 화면 이어지고, 끝에서 바탕색으로 사라진다. 글자 뒤를 지나므로 옅게 그렸다.
   캔버스 1600×2400 을 가운데 기준으로 깐다. 테마별 색을 박은 파일을 고른다. */
body{background-image:url(img/hero-long-light.svg);background-repeat:no-repeat;
  background-position:center top;background-size:max(1600px,100%) auto}
@media (prefers-color-scheme:dark){body{background-image:url(img/hero-long-dark.svg)}}
/* 좁은 화면: 같은 고리를 작게 줄여 오른쪽에 붙인다 — 호가 화면 오른쪽 가장자리를 따라 내려간다 */
@media (max-width:760px){body{background-size:1000px auto;background-position:right -330px top 0}}
.draft-banner{margin:0;border-radius:0;text-align:center}

/* ── 본문 틀 ──────────────────────────────────────────────────────────── */
main{max-width:1060px;margin:auto;padding:8px 24px 40px}
main.doc{max-width:760px;padding-top:28px}
.sec{padding:52px 0 8px;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}

h1{font-size:clamp(31px,5.1vw,53px);line-height:1.15;font-weight:800;letter-spacing:-.032em;margin:.18em 0 .5em;text-wrap:balance}
h1 em{font-style:normal;box-shadow:inset 0 -.3em 0 var(--brand-soft)}
h2{font-size:clamp(23px,2.7vw,31px);line-height:1.28;font-weight:750;letter-spacing:-.024em;margin:0 0 .6em;text-wrap:balance}
h3{font-size:17.5px;line-height:1.45;font-weight:700;letter-spacing:-.012em;margin:0 0 .3em}
.doc h2{font-size:21px;margin:1.9em 0 .5em}
.doc h3{margin:1.4em 0 .3em}
.doc ol,.doc ul{padding-left:1.3em}
.doc li{margin:.25em 0}

.eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--brand-ink)}
.lead{font-size:19px;line-height:1.66;color:var(--muted);max-width:54ch;margin:0 0 1.2em}
.sub{font-size:16px;color:var(--muted);max-width:60ch;margin:-.3em 0 1.6em}
.meta{color:var(--muted);font-size:14px}
.note{display:block;margin:20px 0 0;padding:11px 15px;border:1px solid var(--warn-line);border-radius:10px;
  background:var(--warn-soft);color:var(--warn);font-size:14.5px}

/* ── 행동 유도 ────────────────────────────────────────────────────────── */
.cta{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:0 0 4px}
.btn{display:inline-block;padding:13px 22px;border-radius:10px;font-size:15.5px;font-weight:700;
  text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--panel)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
@media (prefers-color-scheme:dark){.btn-primary{color:#06201d}}
.btn:hover{border-color:var(--brand)}
.cta-note{font-size:14px;color:var(--muted)}

/* ── 실측 숫자 ────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px 28px;margin:4px 0 0}
.stat{padding:16px 0}
.stat b{display:block;font-size:clamp(28px,3.6vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.03em;
  color:var(--brand-ink);font-variant-numeric:tabular-nums}
@media (prefers-color-scheme:dark){.stat b{color:var(--brand)}}
.stat span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink)}
.stat small{display:block;margin-top:3px;font-size:13px;color:var(--muted)}

pre.snippet{margin:22px 0 8px;padding:16px 18px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);tab-size:2}
figure{margin:0}
.shot{margin:22px 0 10px}
.shot a{display:block;max-width:860px;border-radius:14px}
.shot a:hover img{border-color:var(--brand)}
.shot img{display:block;width:100%;height:auto;max-width:860px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel)}

figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}

/* ── 작동 순서 ────────────────────────────────────────────────────────── */
.flow{counter-reset:step;margin:0;padding:0;list-style:none}
.flow li{counter-increment:step;position:relative;padding:18px 0 18px 54px;border-top:1px solid var(--line-soft)}
.flow li:first-child{border-top:0}
.flow li::before{content:counter(step);position:absolute;left:0;top:18px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
@media (prefers-color-scheme:dark){.flow li::before{color:var(--brand)}}
.flow h3{display:inline;margin-right:8px}
.flow p{margin:.25em 0 0;color:var(--muted);font-size:15.5px}
.badge{display:inline-block;vertical-align:2px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}

/* ── 기능 목록(가격 카드와 구분되는 가벼운 형태) ───────────────────────── */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px 32px;margin:0}
.features div{padding:18px 0;border-top:2px solid var(--brand-soft)}
.features p{margin:.25em 0 0;color:var(--muted);font-size:15px}

/* ── 데이터 원칙(반전 패널) ───────────────────────────────────────────── */
.band{margin:44px 0 8px;padding:clamp(24px,4vw,42px);border-radius:18px;background:var(--deep);color:var(--deep-ink);
  border:1px solid var(--deep-line)}
.band h2{color:var(--deep-ink)}
.band .lead{color:var(--deep-muted);max-width:58ch}
.band dl{margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 32px}
.band dl>div{min-width:0}
.band dt{font-size:16px;font-weight:700;letter-spacing:-.012em}
.band dd{margin:.3em 0 0;font-size:15px;line-height:1.66;color:var(--deep-muted)}
.band .meta{color:var(--deep-muted)}

/* ── 가격 ─────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:14px;margin:4px 0 18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.card p{margin:.3em 0;color:var(--muted);font-size:15px}
.card .price{font-size:27px;font-weight:800;letter-spacing:-.025em;margin:.15em 0;color:var(--ink);font-variant-numeric:tabular-nums}
.card .price small{font-size:14px;font-weight:600;color:var(--muted)}
.terms{margin:4px 0 0;padding-left:1.2em;color:var(--muted);font-size:14px}
.terms li{margin:.3em 0}

table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px;background:var(--panel)}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
th{background:var(--brand-soft)}

footer{max-width:1060px;margin:auto;padding:28px 24px 44px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer p{margin:.3em 0}
.zoom-hint{display:none}
@media (max-width:600px){.zoom-hint{display:inline}table{display:block;overflow-x:auto}.btn{width:100%;text-align:center}}

/* ── 접근성 바닥(2026-10-22, 디자인 Q2·Q3·Q10) — 포커스 링·본문 바로가기·움직임 줄이기 ── */
:root{--focus:#0f766e}
@media (prefers-color-scheme:dark){:root{--focus:#5eead4}}
.band{--focus:#5eead4}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#main:focus{outline:none}
.skip-link{position:absolute;left:12px;top:-64px;z-index:10;padding:10px 16px;border-radius:8px;background:var(--panel);
  color:var(--ink);border:2px solid var(--focus);font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ── 첫 화면 2열(2026-10-22, 디자인 M4): 왼쪽 제목·버튼, 오른쪽 실제 화면 사진 — 문구는 그대로, 자리만 옮겼다 ── */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.hero h1{font-size:clamp(30px,3.8vw,46px)}
.hero-shot{margin:6px 0 0}
.hero-shot figcaption{font-size:13px}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-shot{max-width:640px}}

/* ── 좁은 화면 머리말(2026-10-22, 디자인 M5): 핵심 링크만 두고 나머지는 '더 보기'(스크립트 없이 <details>) ── */
.nav-more{display:none}
@media (max-width:760px){
  .top nav{gap:0 16px;align-items:center}
  .top nav a{display:inline-block;padding:10px 0}
  .top nav .nav-sec{display:none}
  .nav-more{display:block;position:relative;font-size:14.5px}
  .nav-more summary{cursor:pointer;color:var(--muted);padding:10px 0;list-style:none}
  .nav-more summary::-webkit-details-marker{display:none}
  .nav-more summary::after{content:" ▾"}
  .nav-more[open]>div{position:absolute;right:0;top:100%;z-index:5;display:grid;min-width:11em;padding:6px 14px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px #0000001f}
}