/* 서버스캔 — 어두운 보안 콘솔. 모바일 먼저(min-width 만), 색 · 간격 · 크기는 토큰으로 */
:root {
  --bg: #06080c; --bg-2: #0a0e14; --panel: #0e131b; --panel-2: #131a24; --line: #1d2633; --line-2: #2a3546;
  --ink: #e8eef5; --ink-2: #b4c0cd; --ink-3: #8593a3;
  --sig: #39e5a0; --sig-2: #6ff0bd; --sig-dim: rgba(57, 229, 160, .12); --sig-ink: #032417;
  --high: #ff6b6b; --high-bg: rgba(255, 107, 107, .12); --medium: #ffb84d; --medium-bg: rgba(255, 184, 77, .12); --low: #74b9ff; --low-bg: rgba(116, 185, 255, .12);
  --info: #a4b1c0; --info-bg: rgba(164, 177, 192, .1);
  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: 16px; --maxw: 1200px;
  --sec-y: clamp(56px, 9vw, 112px);
  --f-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: clamp(18px, 2vw, 20px);
  --t-h3: clamp(18px, 2.2vw, 21px); --t-h2: clamp(26px, 4.2vw, 40px); --t-h1: clamp(34px, 6.4vw, 64px);
  --tap: 44px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, pre, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
.ico { display: block; flex: none; }
code, pre, .mono { font-family: var(--f-mono); }
code { font-size: .9em; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; color: var(--sig-2); overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
::selection { background: var(--sig); color: var(--sig-ink); }
.skip { position: absolute; left: var(--s-4); top: -60px; z-index: 50; background: var(--sig); color: var(--sig-ink); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: var(--s-3); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r); border: 1px solid transparent; font: inherit; font-size: var(--t-md); font-weight: 600; line-height: 1.25; cursor: pointer; text-align: center; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-sig { background: var(--sig); color: var(--sig-ink); }
.btn-sig:hover, .btn-sig:focus-visible { background: var(--sig-2); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--sig); color: var(--sig-2); }
.btn-sm { min-height: var(--tap); padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn-busy { display: none; align-items: center; gap: var(--s-2); }
.btn-idle { display: inline-flex; align-items: center; gap: var(--s-2); }
.is-busy .btn-idle { display: none; }
.is-busy .btn-busy { display: inline-flex; }
.is-busy button { pointer-events: none; opacity: .9; }
.spin { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 머리 ── */
.top { position: relative; z-index: 20; background: rgba(6, 8, 12, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); min-height: 64px; padding-top: var(--s-2); padding-bottom: var(--s-1); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); flex: none; }
.logo-mark { display: block; flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-txt b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.brand-txt small { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .16em; }
.nav { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); width: 100%; margin: 0 calc(var(--s-3) * -1); }
.nav a { display: flex; align-items: center; min-height: var(--tap); min-width: 0; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current] { color: var(--ink); background: var(--panel-2); }
.nav-wide { display: none !important; }
.top-cta { margin-left: auto; flex: none; }
.flash { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--sig-dim); border: 1px solid rgba(57, 229, 160, .35); color: var(--sig-2); font-size: var(--t-sm); line-height: 1.5; }
.flash span { min-width: 0; }
.flash.is-err { background: var(--high-bg); border-color: rgba(255, 107, 107, .4); color: #ffc2c2; }

/* ── 공통 머리말 ── */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.4; letter-spacing: .08em; color: var(--sig); text-transform: uppercase; }
.dot-live { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 4px var(--sig-dim); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(57, 229, 160, 0); } }
.lead { font-size: var(--t-lg); line-height: 1.65; color: var(--ink-2); max-width: 44em; }
.sec { padding: var(--sec-y) 0; }
.sec-tight { padding: var(--s-8) 0 var(--sec-y); }
.sec-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: var(--s-3); max-width: 760px; margin-bottom: var(--s-10); }
.sec-head h2 { font-size: var(--t-h2); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
.sec-head > p:not(.kicker) { color: var(--ink-2); line-height: 1.7; }
.kicker { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.4; letter-spacing: .08em; color: var(--sig); }

/* ── 히어로 ── */
.hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(57, 229, 160, .09), transparent 70%), linear-gradient(var(--bg), var(--bg)); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .35; mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%); }
.hero-in { position: relative; display: grid; gap: var(--s-10); }
.hero-copy { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hero h1 { font-size: var(--t-h1); line-height: 1.16; letter-spacing: -.03em; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--sig); }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); }
.hero-facts li { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.hero-facts b { font-family: var(--f-mono); font-size: clamp(24px, 4vw, 34px); line-height: 1.3; font-weight: 600; color: var(--ink); }
.hero-facts span { font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); }

/* 도메인 입력 */
.scan-form { display: flex; flex-direction: column; width: 100%; }
.scan-label, .field-label { display: flex; align-items: flex-end; min-height: var(--tap); font-size: var(--t-sm); line-height: 1.4; font-weight: 600; color: var(--ink-2); }
.scan-note { margin-top: var(--s-2); }
.scan-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); padding: var(--s-2); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); transition: border-color .15s, box-shadow .15s; }
.scan-row:focus-within { border-color: var(--sig); box-shadow: 0 0 0 4px var(--sig-dim); }
.scan-pre { display: none; align-items: center; padding-left: var(--s-3); font-family: var(--f-mono); font-size: var(--t-md); line-height: 1.4; color: var(--ink-3); }
.scan-row input { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 var(--s-3); background: transparent; border: 0; color: var(--ink); font-family: var(--f-mono); font-size: 17px; line-height: 1.4; outline: none; }
.scan-row input::placeholder { color: var(--ink-3); opacity: .7; }
.scan-row .btn { flex: 1 1 100%; min-height: 48px; }
.scan-note { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }

/* 콘솔 */
.console { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
.console-bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.console-bar span { margin-left: var(--s-2); min-width: 0; font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-log { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4); font-family: var(--f-mono); font-size: 13px; line-height: 1.55; color: var(--ink); }
.console-log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.console-log li > span { min-width: 0; }
.console-log b { color: var(--sig-2); font-weight: 500; }
.c-dim { color: var(--ink-3); } .c-mono { color: var(--ink-2); }
.c-ok { color: var(--sig); } .c-mid { color: var(--medium); } .c-bad { color: var(--high); }
.js .console-log[data-console] li { opacity: 0; transform: translateY(4px); }
.js .console-log[data-console].is-run li { animation: logIn .35s ease-out forwards; }
@keyframes logIn { to { opacity: 1; transform: none; } }
.console-result { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border-top: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.console-sum { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.console-sum p { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.console-sum ul { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.console-sum li { display: flex; align-items: center; gap: 6px; }
.console-sum li b { font-family: var(--f-mono); font-size: 18px; line-height: 1.35; }

/* 등급 고리 */
.ring { position: relative; flex: none; width: 76px; height: 76px; }
.ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line-2); stroke-width: 9; }
.ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring-ok .ring-fg { stroke: var(--sig); } .ring-mid .ring-fg { stroke: var(--medium); } .ring-bad .ring-fg { stroke: var(--high); }
.ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-txt b { font-family: var(--f-mono); font-size: 26px; line-height: 1.25; font-weight: 600; }
.ring-txt span { font-size: var(--t-xs); line-height: 1.3; color: var(--ink-3); }
.ring-ok .ring-txt b { color: var(--sig); } .ring-mid .ring-txt b { color: var(--medium); } .ring-bad .ring-txt b { color: var(--high); }
.ring-na .ring-txt b { color: var(--ink-3); }
.ring-lg { width: 148px; height: 148px; }
.ring-lg .ring-txt b { font-size: 52px; line-height: 1.35; }
.ring-lg .ring-txt span { font-size: var(--t-sm); }

/* 위험도 · 상태 칩 */
.sev, .st { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 var(--s-2); border-radius: var(--r-sm); font-size: var(--t-xs); line-height: 1; font-weight: 600; white-space: nowrap; flex: none; }
.sev-high { background: var(--high-bg); color: var(--high); } .sev-medium { background: var(--medium-bg); color: var(--medium); } .sev-low { background: var(--low-bg); color: var(--low); }
.st-pass { background: var(--sig-dim); color: var(--sig); } .st-warn { background: var(--medium-bg); color: var(--medium); } .st-fail { background: var(--high-bg); color: var(--high); }
.st-error, .st-info { background: var(--info-bg); color: var(--info); }

/* ── 1단계 7가지 ── */
.check-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.check-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .2s; }
.check-card:hover { border-color: var(--line-2); }
.check-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.check-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--sig-dim); color: var(--sig); }
.check-no { font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1; color: var(--ink-3); }
.check-card h3 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.check-why { font-size: var(--t-md); line-height: 1.6; color: var(--ink); }
.check-how { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-3); }

/* ── 단계 ── */
.stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.stage { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stage-key { border-color: rgba(57, 229, 160, .4); box-shadow: 0 0 0 1px rgba(57, 229, 160, .15) inset; }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.stage-no { font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.4; color: var(--ink-3); }
.stage-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--s-3); border-radius: 999px; font-size: var(--t-xs); line-height: 1; font-weight: 600; }
.tag-free { background: var(--sig-dim); color: var(--sig); } .tag-verify { background: var(--medium-bg); color: var(--medium); } .tag-local { background: var(--low-bg); color: var(--low); }
.stage h3 { display: flex; align-items: center; gap: var(--s-2); font-size: clamp(22px, 3vw, 26px); line-height: 1.3; font-weight: 700; }
.stage h3 .ico { color: var(--sig); }
.stage > p { color: var(--ink-2); line-height: 1.65; }
.ticks { display: flex; flex-direction: column; gap: var(--s-2); }
.ticks li { position: relative; padding-left: 26px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--sig); border-bottom: 2px solid var(--sig); transform: rotate(-45deg); }
.stage .btn { margin-top: auto; align-self: flex-start; }

/* ── 리포트 예시 · 발견 카드 ── */
.report-demo { display: grid; gap: var(--s-8); }
.report-demo .sec-head { margin-bottom: 0; }
.report-points { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.report-points li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.report-points .ico { color: var(--sig); }
.demo-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.finding { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--r); }
.f-high { border-left-color: var(--high); } .f-medium { border-left-color: var(--medium); } .f-low { border-left-color: var(--low); }
.finding header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.finding h3 { flex: 1 1 220px; min-width: 0; font-size: 17px; line-height: 1.45; font-weight: 700; }
.finding-cat { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.evidence { padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.rec { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }
.rec b { font-size: var(--t-xs); line-height: 1.4; color: var(--sig); font-weight: 600; letter-spacing: .02em; }

/* ── 안전 원칙 ── */
.principles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.principles li { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.principles .ico { color: var(--sig); }
.principles h3 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; }
.principles p { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }

/* ── FAQ ── */
.faq-wrap { display: grid; gap: var(--s-8); }
.faq-wrap .sec-head { margin-bottom: 0; }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; padding: var(--s-4) 0; font-size: 17px; line-height: 1.45; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 16px; line-height: 1; color: var(--sig); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 var(--s-5); color: var(--ink-2); line-height: 1.75; font-size: var(--t-md); }

/* ── 마지막 띠 ── */
.cta-band { background: radial-gradient(ellipse 60% 100% at 0% 100%, rgba(57, 229, 160, .12), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); }
.cta-in { display: grid; gap: var(--s-6); align-items: center; }
.cta-in h2 { font-size: var(--t-h2); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
.cta-in p { margin-top: var(--s-2); color: var(--ink-2); }

/* ── 바닥 ── */
.foot { border-top: 1px solid var(--line); padding: var(--s-12) 0 var(--s-8); background: var(--bg); }
.foot-in { display: grid; gap: var(--s-8); }
.foot-brand { display: flex; flex-direction: column; gap: var(--s-3); max-width: 360px; }
.foot-brand p { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-3); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.foot-cols div { display: flex; flex-direction: column; min-width: 0; }
.foot-cols h2 { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.4; letter-spacing: .08em; color: var(--ink-3); font-weight: 500; margin-bottom: var(--s-1); }
.foot-cols a { display: block; min-height: var(--tap); padding: var(--s-3) 0; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.foot-cols a:hover, .foot-cols a:focus-visible { color: var(--sig-2); }
.foot-legal { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); }
.foot-legal span { min-width: 0; overflow-wrap: anywhere; }
.foot-legal a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ── 리포트 ── */
.rep-head { padding: var(--s-8) 0; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(57, 229, 160, .07), transparent 70%), var(--bg); }
.rep-head-in { display: grid; gap: var(--s-8); }
.rep-id { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.rep-target { font-family: var(--f-mono); font-size: clamp(26px, 5vw, 44px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rep-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
.rep-meta div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-meta dt { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.rep-meta dd { font-size: var(--t-sm); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.rep-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.inline-form { display: contents; }
.rep-basis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--t-sm); line-height: 1.5; }
.rep-basis b { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); border-radius: var(--r-sm); background: var(--medium-bg); color: var(--medium); font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1; font-weight: 600; }
.rep-basis span { min-width: 0; color: var(--ink-2); }
.btn.is-off { color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
.cl-at { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--medium); font-weight: 500; }
.rep-cache { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); line-height: 1.65; color: var(--ink-3); }
.rep-cache .ico { flex: none; color: var(--ink-3); }
.rep-cache span { min-width: 0; }
.rep-cache a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--sig-2); text-decoration: underline; text-underline-offset: 3px; }
.rep-score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.rep-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); flex: 1 1 220px; min-width: 0; }
.rep-counts li { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r); background: var(--bg); min-width: 0; }
.rep-counts b { font-family: var(--f-mono); font-size: 28px; line-height: 1.3; font-weight: 600; }
.rep-counts span { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.cnt-high b { color: var(--high); } .cnt-medium b { color: var(--medium); } .cnt-low b { color: var(--low); }
.notice-down { display: flex; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-5); border: 1px solid rgba(255, 184, 77, .4); border-radius: var(--r-lg); background: var(--medium-bg); }
.notice-down > .ico { color: var(--medium); }
.notice-down > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.notice-down h2 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; }
.notice-down p { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }
.upsell { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-5); border: 1px solid rgba(57, 229, 160, .35); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(57, 229, 160, .1), var(--panel) 60%); }
.upsell > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.upsell h2 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; }
.upsell p { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); }
.upsell-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--sig-dim); color: var(--sig); flex: none; }
.upsell .btn { align-self: flex-start; }
.rep-body { display: grid; gap: var(--s-10); }
.rep-main { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.rep-side { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.rep-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); font-size: 20px; line-height: 1.4; font-weight: 700; }
.rep-h small { font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.4; color: var(--ink-3); font-weight: 400; }
.check-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.check-list li + li { border-top: 1px solid var(--line); }
.check-list summary { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-4); cursor: pointer; list-style: none; }
.check-list summary::-webkit-details-marker { display: none; }
.check-list summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; }
.check-list details[open] summary::after { transform: rotate(225deg); }
.cl-name { min-width: 0; font-size: var(--t-sm); line-height: 1.45; font-weight: 600; }
.cl-sum { padding: 0 var(--s-4) var(--s-3); font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.cl-rows { display: flex; flex-direction: column; margin: 0 var(--s-4) var(--s-4); border-top: 1px dashed var(--line-2); }
.cl-rows div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px dashed var(--line); }
.cl-rows dt { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.cl-rows dd { display: flex; flex-direction: column; font-size: var(--t-xs); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.cl-rows small { font-size: var(--t-xs); color: var(--ink-3); }
.disclaimer { font-size: var(--t-xs); line-height: 1.7; color: var(--ink-3); }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-8) var(--s-6); border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--panel); }
.empty .ico { color: var(--sig); }
.empty h3 { font-size: var(--t-h3); line-height: 1.35; }
.empty p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }

/* ── 일반 페이지 머리 ── */
.page-head { padding: clamp(40px, 6vw, 72px) 0 var(--s-8); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(57, 229, 160, .07), transparent 70%), var(--bg); }
.page-head .wrap { display: flex; flex-direction: column; gap: var(--s-4); }
.page-head h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; }
.card { padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.form-card { display: flex; flex-direction: column; }

/* 소유 인증 */
.verify-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); }
.verify-status > .ico { color: var(--medium); }
.verify-status.is-ok { border-color: rgba(57, 229, 160, .45); background: linear-gradient(120deg, rgba(57, 229, 160, .1), var(--panel) 60%); }
.verify-status.is-ok > .ico { color: var(--sig); }
.verify-status > div { flex: 1 1 240px; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.verify-status h2 { font-family: var(--f-mono); font-size: 20px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.verify-status p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.methods { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.method { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.method h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: 18px; line-height: 1.4; font-weight: 700; }
.method h3 small { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); font-weight: 400; }
.m-no { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--sig-dim); color: var(--sig); font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1; font-weight: 600; }
.kv { display: flex; flex-direction: column; gap: var(--s-3); }
.kv div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.kv dt { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.kv dd { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-2); min-width: 0; }
.copy { cursor: pointer; }
.copy.is-copied { border-color: var(--sig); }
.wrap-any { overflow-wrap: anywhere; word-break: break-all; }
.verify-go { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-6); }

/* 내 점검 */
.my-grid { display: grid; gap: var(--s-10); }
.my-grid > div { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.my-grid .btn-sm { align-self: flex-start; }
.scan-list, .dom-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.scan-list li + li, .dom-list li + li { border-top: 1px solid var(--line); }
.scan-list a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-4); }
.scan-list a:hover, .dom-list a:hover, .scan-list a:focus-visible, .dom-list a:focus-visible { background: var(--panel-2); }
.g-badge { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--r); font-family: var(--f-mono); font-size: 20px; line-height: 1.3; font-weight: 600; background: var(--info-bg); color: var(--info); }
.g-a, .g-b { background: var(--sig-dim); color: var(--sig); } .g-c, .g-d { background: var(--medium-bg); color: var(--medium); } .g-e, .g-f { background: var(--high-bg); color: var(--high); }
.sl-main { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.sl-main b { font-family: var(--f-mono); font-size: var(--t-md); line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.sl-main small { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.sl-cnt { display: flex; gap: var(--s-1); }
.sl-cnt .sev { min-width: 28px; font-family: var(--f-mono); }
.dom-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-4); }
.dl-name { min-width: 0; font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.45; overflow-wrap: anywhere; }

/* 설치형 */
.cli-grid { display: grid; gap: var(--s-10); }
.steps { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.step { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.step h2 { display: flex; align-items: center; gap: var(--s-3); font-size: 20px; line-height: 1.4; font-weight: 700; }
.step > p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }
.step .btn-sm { align-self: flex-start; }
.code { padding: var(--s-4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; line-height: 1.7; color: var(--sig-2); white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.code.is-copied { border-color: var(--sig); }
.os-block { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px dashed var(--line-2); min-width: 0; }
.os-block h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--t-md); line-height: 1.45; font-weight: 700; }
.os-block h3 .ico { color: var(--sig); }
.os-block h3 small { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); font-weight: 400; }
.os-block .btn-sm { align-self: flex-start; }
.os-note { font-size: var(--t-xs); line-height: 1.65; color: var(--ink-3); }
.hash { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.hash code { font-size: var(--t-xs); color: var(--ink-2); }
.upload { display: flex; flex-direction: column; gap: var(--s-3); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 132px; padding: var(--s-5); border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--bg); text-align: center; cursor: pointer; transition: border-color .15s; }
.drop:hover, .drop:focus-within, .drop.has-file { border-color: var(--sig); }
.drop .ico { color: var(--sig); }
.drop-t { font-size: var(--t-md); line-height: 1.4; font-weight: 600; }
.drop-s { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.file-in { display: block; width: 100%; max-width: 320px; margin-top: var(--s-2); min-height: var(--tap); font: inherit; font-size: var(--t-sm); color: var(--ink-2); }
.file-in::file-selector-button { min-height: 36px; margin-right: var(--s-3); padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.upload .btn { align-self: flex-start; }
.cli-side { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cli-checks { display: flex; flex-direction: column; gap: var(--s-2); }
.cli-checks li { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); min-width: 0; }
.cli-checks .ico { color: var(--sig); }
.cli-checks div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cli-checks h3 { font-size: var(--t-md); line-height: 1.4; font-weight: 700; }
.cli-checks p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); }

.lite-in .sec-head { margin-bottom: var(--s-6); }
.lite-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.lite-steps .step h3 { display: flex; align-items: center; gap: var(--s-3); font-size: 18px; line-height: 1.4; font-weight: 700; }
.lite-last { font-size: var(--t-xs); line-height: 1.8; color: var(--ink-2); overflow-wrap: anywhere; }
/* AI 수정 프롬프트 */
.ai-prompt { border-top: 1px dashed var(--line-2); padding-top: var(--s-2); }
.ai-prompt summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); cursor: pointer; font-size: var(--t-sm); line-height: 1.4; font-weight: 600; color: var(--sig); list-style: none; }
.ai-prompt summary::-webkit-details-marker { display: none; }
.ai-prompt[open] summary { margin-bottom: var(--s-1); }
.ai-note { margin-bottom: var(--s-2); font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); }
.ai-prompt .code { max-height: 320px; overflow: auto; color: var(--ink-2); }
.ai-all { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
/* 호스팅 유형 · 점검 경로 */
.host-card { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--panel); }
.host-id { display: flex; gap: var(--s-4); min-width: 0; }
.host-id > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.host-id h2 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.host-id p:not(.kicker) { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); }
.host-paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.host-paths li { display: flex; min-width: 0; }
.host-paths a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who ico" "what ico"; align-items: center; gap: var(--s-1) var(--s-3); width: 100%; min-width: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); transition: border-color .15s; }
.host-paths a:hover, .host-paths a:focus-visible { border-color: var(--sig); }
.host-paths .is-fit a { border-color: rgba(57, 229, 160, .45); background: var(--sig-dim); }
.hp-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--t-md); line-height: 1.45; font-weight: 700; }
.hp-what { grid-area: what; min-width: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.host-paths a > .ico { grid-area: ico; color: var(--sig); }

/* 전문가 상담 — 홈 구간 */
.consult-band { background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(57, 229, 160, .1), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.svc-cards li { display: flex; min-width: 0; }
.svc-card { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; min-width: 0; padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .15s; }
.svc-card:hover, .svc-card:focus-visible { border-color: var(--sig); }
.svc-card h3 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; }
.svc-card p { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); }
.svc-more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: auto; font-size: var(--t-sm); line-height: 1.4; font-weight: 600; color: var(--sig); }
.consult-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-8); }
.consult-row p { min-width: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); }
/* 리포트 끝 상담 카드 */
.consult-cta { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); padding: var(--s-6); border: 1px solid rgba(57, 229, 160, .4); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(57, 229, 160, .12), var(--panel) 65%); }
.consult-cta > div { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.consult-cta h2 { font-size: var(--t-h3); line-height: 1.35; font-weight: 700; }
.consult-cta > div > p:not(.kicker) { font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); }
.consult-cta .btn { align-self: flex-start; }
/* 상담 신청 화면 */
.consult-grid { display: grid; gap: var(--s-10); }
.consult-form { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.consult-form .flash { margin-top: 0; }
.consult-scan { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid rgba(57, 229, 160, .35); border-radius: var(--r); background: var(--sig-dim); }
.consult-scan .ico { color: var(--sig); }
.consult-scan div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.consult-scan b { font-size: var(--t-sm); line-height: 1.5; overflow-wrap: anywhere; }
.consult-scan span { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); }
.svc { margin: 0; padding: 0; border: 0; min-width: 0; }
.svc legend { padding: 0; }
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.svc-opt { position: relative; display: flex; min-width: 0; cursor: pointer; }
.svc-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svc-box { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; min-height: var(--tap); padding: var(--s-3) var(--s-4) var(--s-3) 44px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); transition: border-color .15s, background .15s; }
.svc-box::before { content: ""; position: absolute; left: var(--s-4); top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); box-sizing: border-box; }
.svc-opt input:checked + .svc-box { border-color: var(--sig); background: var(--sig-dim); }
.svc-opt input:checked + .svc-box::before { border: 5px solid var(--sig); }
.svc-opt input:focus-visible + .svc-box { outline: 2px solid var(--sig); outline-offset: 2px; }
.svc-box b { font-size: var(--t-md); line-height: 1.45; font-weight: 600; }
.svc-box small { font-size: var(--t-xs); line-height: 1.55; color: var(--ink-3); }
.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field-label em, .check em { font-style: normal; font-size: var(--t-xs); color: var(--sig); margin-left: var(--s-1); }
.inp { width: 100%; min-width: 0; min-height: 48px; padding: var(--s-3) var(--s-4); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); font: inherit; font-size: var(--t-md); line-height: 1.5; }
.inp:focus { outline: none; border-color: var(--sig); box-shadow: 0 0 0 3px var(--sig-dim); }
.inp[aria-invalid="true"] { border-color: var(--high); }
textarea.inp { resize: vertical; min-height: 132px; }
select.inp { appearance: auto; }
.field-err { margin-top: var(--s-1); font-size: var(--t-xs); line-height: 1.5; color: var(--high); }
.hp { display: none; }
.agree { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.check { position: relative; display: flex; align-items: center; min-height: var(--tap); padding-left: 32px; cursor: pointer; font-size: var(--t-sm); line-height: 1.45; font-weight: 600; }
.check input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check span::before { content: ""; position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: var(--r-sm); border: 2px solid var(--line-2); box-sizing: border-box; background: var(--panel); }
.check input:checked + span::before { background: var(--sig); border-color: var(--sig); box-shadow: inset 0 0 0 3px var(--panel); }
.check input:focus-visible + span::before { outline: 2px solid var(--sig); outline-offset: 2px; }
.agree-txt { font-size: var(--t-xs); line-height: 1.7; color: var(--ink-3); }
.consult-submit { align-self: stretch; min-height: 52px; }
.consult-side { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.flow { display: flex; flex-direction: column; gap: var(--s-2); }
.flow li { display: flex; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); min-width: 0; }
.flow li > div { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.flow h3 { font-size: var(--t-md); line-height: 1.4; font-weight: 700; }
.flow p { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-3); }
.done-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-8) var(--s-6); border: 1px solid rgba(57, 229, 160, .4); border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(57, 229, 160, .12), var(--panel) 65%); }
.done-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sig); color: var(--sig-ink); }
.done-card h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.done-card p { color: var(--ink-2); line-height: 1.7; }
.done-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* 관리 */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-5); }
.tabs a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.tabs a[aria-current] { border-color: var(--sig); color: var(--sig); background: var(--sig-dim); }
.tabs small { font-family: var(--f-mono); font-size: var(--t-xs); }
.inq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.inq { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.inq header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.inq h2 { flex: 1 1 200px; min-width: 0; font-size: 18px; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
.inq time { font-family: var(--f-mono); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.inq-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
.inq-kv a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--sig-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.inq-msg { padding: var(--s-4); border-radius: var(--r); background: var(--bg); font-size: var(--t-sm); line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }
.inq-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); align-items: end; }
.inq-form .btn { justify-self: start; }
.inq-form .field-label { align-items: center; }

/* 글 */
.prose { display: flex; flex-direction: column; gap: var(--s-3); }
.prose h2 { margin-top: var(--s-5); font-size: 20px; line-height: 1.4; font-weight: 700; }
.prose p { color: var(--ink-2); line-height: 1.8; }
.prose code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }   /* 줄바꿈에서 쪼개지면 상자가 겹쳐 보인다 */
.prose a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--sig-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: 560px; margin: 0 auto; padding: 96px var(--gutter); }
.msg h1 { font-size: 28px; line-height: 1.3; overflow-wrap: anywhere; }
.msg { min-width: 0; }
.msg p { color: var(--ink-2); }

/* ── 640 ── */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .scan-pre { display: flex; }
  .scan-row { flex-wrap: nowrap; }
  .scan-row .btn { flex: none; padding: 0 var(--s-6); }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-legal { flex-direction: row; justify-content: space-between; gap: var(--s-4); }
  .rep-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .upsell { flex-direction: row; align-items: center; }
  .upsell > div { flex: 1 1 auto; }
  .upsell .btn, .upsell form { flex: none; align-self: center; }
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
  .consult-cta { flex-direction: row; align-items: center; }
  .consult-cta > div { flex: 1 1 auto; }
  .consult-cta .btn { flex: none; align-self: center; }
  .consult-submit { align-self: flex-start; }
  .inq-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .host-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lite-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .host-paths a { grid-template-areas: "who who" "what ico"; align-items: start; }
}
/* ── 768 ── */
@media (min-width: 768px) {
  .top { position: sticky; top: 0; }
  .top-in { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  .nav { order: 0; flex-wrap: nowrap; flex: 0 1 auto; width: auto; min-width: 0; margin: 0 0 0 var(--s-6); }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .my-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* ── 1024 ── */
@media (min-width: 1024px) {
  .nav-wide { display: flex !important; }
  .hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--s-12); }
  .check-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--s-12); }
  .faq-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-12); }
  .cta-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-12); }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .rep-head-in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  .rep-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .rep-side { position: sticky; top: 88px; }
  .cli-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .svc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .consult-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .consult-side { position: sticky; top: 88px; }
  .inq-form { grid-template-columns: auto minmax(0, 180px) auto minmax(0, 1fr) auto; align-items: center; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}

/* ── 인쇄(PDF) ── */
@media print {
  :root { --bg: #fff; --bg-2: #fff; --panel: #fff; --panel-2: #f4f6f8; --line: #d6dde5; --line-2: #c3ccd6; --ink: #0d1117; --ink-2: #333c47; --ink-3: #5b6672; --sig: #0b8a5a; --sig-2: #0b8a5a; --sig-dim: #e3f5ed; color-scheme: light; }
  body { background: #fff; font-size: 11pt; }
  .top, .foot, .no-print, .skip, .flash { display: none !important; }
  .rep-head, .page-head { background: none; padding: 0 0 12pt; }
  .rep-head-in, .rep-body { grid-template-columns: minmax(0, 1fr) !important; gap: 12pt; }
  .rep-side { position: static; }
  .check-list details > *:not(summary) { display: block; }
  .finding, .check-list li { break-inside: avoid; }
  .evidence { max-height: none; overflow: visible; }
  .sec-tight { padding: 12pt 0; }
}