/*
 * 이츠자비스 화면 공통 스타일 — design.md v4 의 토큰 · 부품을 시안(.dc.html 인라인 스타일)에서 클래스로 옮겼다.
 * 템플릿에는 style 속성을 쓰지 않는다(CSP style-src 'self'). 색 · 크기는 아래 변수로만 쓴다.
 */

/* ── 토큰 (design.md §1 ~ §4 · §8.1, 근거 배지 --badge-* 는 시안 <helmet><style> 값) ───────── */
:root {
  /* §1.1 주색 · 글자 · 바탕 */
  --c-navy: #1a2d5a;
  --c-navy-700: #24407a;
  --c-navy-300: #9fb0cf;
  --c-navy-100: #dde4f1;
  --c-navy-50: #eef2f8;
  --c-ink: #141a24;
  --c-slate-700: #3a4555;
  --c-slate-600: #4d5868;
  --c-slate-500: #647082;
  --c-slate-300: #aab2be;
  --c-line: #e1e5eb;
  --c-line-strong: #c5ccd6;
  --c-bg: #f4f5f7;
  --c-surface: #ffffff;
  --c-surface-2: #f9fafb;
  /* §1.2 상태색 */
  --c-ok: #1d7347;
  --c-ok-bg: #e5f2eb;
  --c-warn: #a8530a;
  --c-warn-fill: #dd8a26;
  --c-warn-bg: #fcf0e1;
  --c-risk: #b42318;
  --c-risk-dark: #8a1a12;
  --c-risk-bg: #fbe9e7;
  --c-chart-2: #4d5868;
  /* §8.1 추가 토큰 */
  --c-muted-bg: #eceef1;
  --c-disabled-bg: #c9cfd8;
  --c-bar-muted: #c5ccd6;
  --c-overlay: rgba(20, 26, 36, 0.5);
  --w-diag: 960px;
  --w-auth-login: 400px;
  --w-auth-signup: 440px;
  --w-profile: 720px;
  --w-modal: 640px;
  --w-doc: 760px;
  --h-input-lg: 48px;
  --h-btn-header: 34px;
  /* §2 타이포 */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-body: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  /* §3 간격 · 반경 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  /* §4 레이아웃 */
  --h-header: 56px;
  /* §5.2 근거 배지 (시안 근거 배지 명세 디자인 값 표) */
  --badge-sm-height: 24px;
  --badge-sm-font: 12.5px;
  --badge-sm-gap: 6px;
  --badge-sm-pad: 2px 8px 2px 2px;
  --badge-sm-radius: 4px;
  --badge-sm-border: 1px solid #e1e5eb;
  --badge-chip-sm-height: 18px;
  --badge-chip-sm-font: 12px;
  --badge-chip-sm-radius: 3px;
  --badge-lg-height: 32px;
  --badge-lg-font: 14px;
  --badge-lg-gap: 8px;
  --badge-lg-pad: 3px 12px 3px 4px;
  --badge-lg-radius: 6px;
  --badge-lg-border: 1px solid #c5ccd6;
  --badge-chip-lg-height: 24px;
  --badge-chip-lg-font: 13px;
  --badge-chip-lg-radius: 4px;
  --badge-chip-outline: 1.5px solid #1a2d5a;
  --badge-tip-bg: #141a24;
  --badge-tip-sub: #cfd6e2;
  --badge-tip-font: 13px;
  --badge-tip-pad: 9px 12px;
  --badge-tip-radius: 6px;
  /* §5.4 ~ §5.10 투찰 분석 차트 · 안내 상자 (시안 값) */
  --chart-grid: #e8ebf0;
  --chart-stable: rgba(26, 45, 90, 0.12);
  --chart-stable-legend: rgba(26, 45, 90, 0.14);
  --chart-attack: rgba(221, 138, 38, 0.2);
  --chart-attack-legend: rgba(221, 138, 38, 0.22);
  --chart-hatch-bg: #f3f5f8;
  --chart-hatch-line: #cfd5de;
  --chart-hatch-legend: #d3d8e0;
  --chart-q50: #e3e8f2;
  --chart-q90: #f1f3f7;
  --chart-bar: #8d9fc2;
  --warn-border: #efc995;
  --warn-text: #6b3606;
  --warn-title: #7a3d06;
  --warn-desc: #5a2e05;
  --risk-border: #f0bcb6;
  --risk-desc: #5c1610;
  --ok-border: #b6d9c4;
  --ok-title: #11502f;
  --ok-desc: #174a2e;
  --rec-attack-hover: #fffaf3;
  --diag-hint: #c9d3e6;
  /* 가가 버튼 배율(common.js 가 바꾼다) — 오른쪽 패널 높이 계산용 */
  --zoom: 1;
}

/* ── 바탕 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* 휴대폰: 데스크탑 화면을 줄이지 않고 최소 폭을 지킨 채 가로 스크롤(spec 결정 ⑥) */
body { min-width: 1024px; }

input, button, select, textarea { font: inherit; color: inherit; }

a { color: var(--c-navy); text-decoration: none; }
a:hover { color: var(--c-navy-700); text-decoration: underline; }

/* 한글 안내 문장은 단어 단위 줄바꿈(design.md §2 구현 규칙) */
p, li, dd, .keep { word-break: keep-all; overflow-wrap: break-word; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); }
.page > main { flex: 1 0 auto; width: 100%; }

/* 본문 폭(헤더 · 푸터와 같은 좌우 24px) */
.main-wide { max-width: 1440px; margin: 0 auto; padding: var(--sp-3) var(--sp-6) 48px; display: flex; flex-direction: column; gap: var(--sp-3); }
.main-doc { max-width: calc(var(--w-doc) + 48px); margin: 0 auto; padding: var(--sp-8) var(--sp-6) 64px; display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── 헤더 (design.md §4 · §8.2) ────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.site-header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-6); height: var(--h-header);
  display: flex; align-items: center; gap: var(--sp-8);
}
.logo { display: flex; align-items: center; gap: var(--sp-2); }
.logo:hover { text-decoration: none; }
.logo-mark { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--c-navy); display: inline-block; }
.logo-text { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--c-navy); white-space: nowrap; }

.nav { display: flex; align-items: stretch; height: 100%; gap: var(--sp-1); }
.nav-item {
  height: 100%; padding: 3px 14px 0; white-space: nowrap; display: flex; align-items: center; gap: 5px;
  border-bottom: 3px solid transparent; font-size: var(--fs-md); color: var(--c-slate-600);
}
.nav-item:hover { color: var(--c-ink); text-decoration: none; }
.nav-item.is-active { font-weight: 700; color: var(--c-navy); border-bottom-color: var(--c-navy); }
.nav-lock { color: var(--c-slate-500); flex: none; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.header-search {
  display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 280px; min-width: 160px; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface-2); margin: 0;
}
.header-search:focus-within { border-color: var(--c-navy); }
.header-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-body); }
.icon-search { flex: none; fill: none; stroke: var(--c-slate-500); stroke-width: 1.8; }

.scale-btn {
  height: 38px; padding: 0 10px; display: flex; align-items: baseline; gap: 2px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer;
}
.scale-btn:hover { background: var(--c-navy-50); }
.scale-ga-s { font-size: var(--fs-sm); font-weight: 700; }
.scale-ga-l { font-size: var(--fs-lg); font-weight: 700; }
.scale-label { font-size: var(--fs-xs); color: var(--c-slate-600); margin-left: 6px; }

.account { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--c-line); color: var(--c-ink); }
.account:hover { color: var(--c-ink); text-decoration: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-navy-100); color: var(--c-navy);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none;
}
.account-name { font-weight: 600; white-space: nowrap; }

.header-login { height: var(--h-btn-header); padding: 0 var(--sp-3); display: inline-flex; align-items: center; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.header-login:hover { color: var(--c-navy); text-decoration: none; }
.header-logout-form { margin: 0; display: inline-flex; }
button.header-login { font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; }
.header-signup {
  height: var(--h-btn-header); padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-md);
  background: var(--c-navy); color: var(--c-surface); font-weight: 600; white-space: nowrap;
}
.header-signup:hover { background: var(--c-navy-700); color: var(--c-surface); text-decoration: none; }

/* ── 푸터 (design.md §8.6) ──────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--c-line); background: var(--c-bg); }
.site-footer-inner {
  margin: 0 auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--c-slate-600);
}
.footer-wide { max-width: 1440px; }
.footer-diag { max-width: calc(var(--w-diag) + 48px); }
.footer-profile { max-width: calc(var(--w-profile) + 48px); }
.footer-doc { max-width: calc(var(--w-doc) + 48px); }
.footer-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-terms { color: var(--c-slate-700); }
.footer-privacy { color: var(--c-ink); font-weight: 700; }
.footer-company { word-break: keep-all; }
.footer-company a { color: inherit; }
.footer-disclaimer { font-size: var(--fs-xs); color: var(--c-slate-500); word-break: keep-all; }

/* ── 카드 (design.md §5.3) ─────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5) 14px; }
.card-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.card-desc { margin: 0; font-size: 14px; color: var(--c-slate-600); }
.card-foot { margin-top: var(--sp-3); padding-top: 10px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-slate-600); }

/* ── 버튼 · 입력 (design.md §5.11 · §8.1) ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 var(--sp-4);
  border-radius: var(--r-md); border: 0; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--c-navy); color: var(--c-surface); }
.btn-primary:hover { background: var(--c-navy-700); color: var(--c-surface); }
.btn-primary:disabled, .btn-primary.is-disabled { background: var(--c-disabled-bg); color: var(--c-surface); cursor: default; }
.btn-secondary { background: var(--c-surface); border: 1px solid var(--c-line-strong); color: var(--c-ink); }
.btn-secondary:hover { background: var(--c-navy-50); color: var(--c-ink); }
.btn-lg { height: 44px; font-weight: 700; }
.btn-block { width: 100%; }

.input {
  height: 44px; width: 100%; padding: 0 var(--sp-3); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface); font-size: var(--fs-body); outline: 0;
}
.input:focus { border-color: var(--c-navy); }
.input.is-error { border-color: var(--c-risk); }
.field-error { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-risk); }
.select {
  height: 38px; min-width: 170px; padding: 0 var(--sp-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface); font-size: var(--fs-body);
}
.field-label { font-size: var(--fs-sm); color: var(--c-slate-600); }

/* ── 상태 배지 (design.md §5.1) ─────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
}
.badge-open { background: var(--c-navy-50); color: var(--c-navy); }
.badge-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.badge-closed { background: var(--c-muted-bg); color: var(--c-slate-600); }
.badge-muted { background: var(--c-muted-bg); color: var(--c-slate-700); }

/* ── 상태 화면 카드 (design.md §5.10 `분석 대상 아님` — 오류 · 비공개 · 한도 초과에도 재사용) ─────── */
.state-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 40px var(--sp-8);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.state-badge { height: 26px; padding: 0 10px; }
.state-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
.state-reason { margin: 0; max-width: 720px; color: var(--c-slate-700); text-wrap: pretty; }
.state-actions { display: flex; gap: var(--sp-2); }

/* ── 근거 배지 EvidenceBadge (design.md §5.2) ───────────────────────── */
.ev {
  position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; min-width: 0;
  line-height: 1.5; outline-offset: 2px;
}
.ev-body {
  display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%;
  background: var(--c-surface); color: var(--c-slate-700); white-space: nowrap; cursor: help;
}
.ev-sm .ev-body {
  gap: 1px var(--badge-sm-gap); min-height: var(--badge-sm-height); padding: var(--badge-sm-pad);
  border: var(--badge-sm-border); border-radius: var(--badge-sm-radius); font-size: var(--badge-sm-font);
}
.ev-lg .ev-body {
  gap: 2px var(--badge-lg-gap); min-height: var(--badge-lg-height); padding: var(--badge-lg-pad);
  border: var(--badge-lg-border); border-radius: var(--badge-lg-radius); font-size: var(--badge-lg-font);
}
.ev-chip { display: inline-flex; align-items: center; font-weight: 700; }
.ev-sm .ev-chip { height: var(--badge-chip-sm-height); border-radius: var(--badge-chip-sm-radius); font-size: var(--badge-chip-sm-font); }
.ev-lg .ev-chip { height: var(--badge-chip-lg-height); border-radius: var(--badge-chip-lg-radius); font-size: var(--badge-chip-lg-font); letter-spacing: 0.02em; }
/* 실측 = 남색 채움, 추정 = 남색 테두리(색이 아니라 모양으로 구분) */
.ev-measured { background: var(--c-navy); color: var(--c-surface); }
.ev-estimated { border: var(--badge-chip-outline); color: var(--c-navy); }
.ev-sm .ev-measured { padding: 0 6px; }
.ev-sm .ev-estimated { padding: 0 5px; }
.ev-lg .ev-measured { padding: 0 9px; }
.ev-lg .ev-estimated { padding: 0 var(--sp-2); }
.ev-n { font-weight: 600; color: var(--c-ink); }
.ev-dot { color: var(--c-line-strong); }
.ev-rel { color: var(--c-slate-500); }
.ev-tip {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; flex-direction: column; gap: 3px;
  background: var(--badge-tip-bg); color: var(--c-surface); font-size: var(--badge-tip-font); line-height: 1.45;
  padding: var(--badge-tip-pad); border-radius: var(--badge-tip-radius); white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.ev-tip-left .ev-tip { right: auto; left: 0; }
.ev:hover .ev-tip, .ev:focus .ev-tip, .ev:focus-within .ev-tip { display: flex; }
.ev-tip-kind { font-weight: 700; }
.ev-tip-source { color: var(--badge-tip-sub); }

/* ── 약관 페이지 (design.md §8.5) ───────────────────────────────────── */
.doc-head { display: flex; flex-direction: column; gap: 6px; }
.doc-title { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.01em; }
.doc-meta { font-size: var(--fs-sm); color: var(--c-slate-600); }
.doc-toc {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: 14px 18px;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
}
.doc-toc-label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-slate-600); }
.doc-toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-6); margin: 0; padding: 0; list-style: none; }
.doc-toc-list a { display: block; padding: 2px 0; font-size: 14px; color: var(--c-navy); }
.doc-body {
  display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6) 28px;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
  font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink); word-break: keep-all;
}
/* 목차를 눌러 이동했을 때 고정 헤더(56px)에 조 제목이 가리지 않게 */
.doc-article { display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 72px; }
.doc-heading { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.doc-article p { margin: 0; text-wrap: pretty; }

/* ── 로그인 · 회원가입 (design.md §8.4) ─────────────────────────────── */
[hidden] { display: none !important; }
.auth-main { padding: 64px var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.auth-main-signup { padding: 40px var(--sp-6) 64px; }
.auth-card {
  width: 100%; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
.auth-card-login { max-width: var(--w-auth-login); padding: var(--sp-8) var(--sp-8) 28px; gap: var(--sp-4); }
.auth-card-signup { max-width: var(--w-auth-signup); padding: 28px var(--sp-8); gap: 14px; }
.auth-logo { align-self: flex-start; }
.auth-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
.auth-head { display: flex; flex-direction: column; gap: 2px; }
.auth-sub { font-size: 14px; color: var(--c-slate-600); }
.auth-note { font-size: var(--fs-sm); color: var(--c-slate-500); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.auth-form-signup { gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label { font-size: 14px; font-weight: 600; color: var(--c-slate-700); }
.auth-field .field-error { word-break: keep-all; }
.auth-submit { font-size: var(--fs-md); }
.auth-help { font-size: var(--fs-sm); color: var(--c-slate-600); }
.auth-hint { margin-top: -6px; font-size: var(--fs-sm); color: var(--c-slate-600); }
.auth-switch { padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-slate-700); }
.auth-card-signup .auth-switch { padding-top: var(--sp-3); }
.auth-switch-link { font-weight: 700; color: var(--c-navy); }
.auth-tagline { margin: 0; font-size: var(--fs-md); color: var(--c-slate-700); }

.auth-notice {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px var(--sp-3); border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; text-wrap: pretty;
}
.auth-notice-icon {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; color: var(--c-surface);
  font-size: var(--fs-xs); font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.auth-notice-warn { border: 1px solid #efc995; background: var(--c-warn-bg); color: #6b3606; }
.auth-notice-warn .auth-notice-icon { background: var(--c-warn); }
.auth-notice-error { align-items: center; border: 1px solid #f0bcb6; background: var(--c-risk-bg); color: var(--c-risk-dark); }
.auth-notice-error .auth-notice-icon { background: var(--c-risk); font-size: 11px; margin-top: 0; }

/* 비밀번호 칸 + 눈 아이콘 */
.input-group {
  display: flex; align-items: center; height: 44px; padding: 0 4px 0 var(--sp-3);
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface);
}
.input-group:focus-within { border-color: var(--c-navy); }
.input-group input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: var(--fs-body); }
.pw-toggle {
  flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--c-slate-600);
}
.pw-toggle .pw-eye-on { display: none; }
.pw-toggle.is-shown .pw-eye-on { display: block; }
.pw-toggle.is-shown .pw-eye-off { display: none; }

.pw-rule { font-size: var(--fs-sm); color: var(--c-slate-600); }
.pw-rule.is-ok { font-weight: 600; color: var(--c-ok); }

/* 동의 상자 + 체크박스(20px, 반경 4px, 켜짐 = 남색 채움 ✓) */
.agree-box {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2);
}
.agree-row { display: flex; align-items: center; gap: 10px; }
.agree-all { font-weight: 700; cursor: pointer; }
.agree-label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.check {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer;
}
.check:checked { border-color: var(--c-navy); background: var(--c-navy); }
.check:checked::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--c-surface); font-size: 13px; font-weight: 800; line-height: 1;
}
.check:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.agree-view {
  margin-left: auto; padding: 0; border: 0; background: transparent; font-size: var(--fs-sm);
  color: var(--c-slate-600); text-decoration: underline; cursor: pointer;
}
.agree-collect { padding-top: 6px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-slate-600); }

/* 약관 보기 모달 (design.md §8.5) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); background: var(--c-overlay);
}
.modal {
  width: 100%; max-width: var(--w-modal); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--c-surface); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.24); overflow: hidden;
}
.modal-head { flex: none; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-5) var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--c-line); }
.modal-head-row { display: flex; align-items: center; gap: var(--sp-3); }
.modal-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.modal-close {
  margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: var(--r-md); background: transparent;
  font-size: var(--fs-lg); color: var(--c-slate-600); cursor: pointer;
}
.modal-close:hover { background: var(--c-surface-2); }
.modal-meta { font-size: var(--fs-sm); color: var(--c-slate-600); }
.modal-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-body); line-height: 1.7; word-break: keep-all;
}
.modal-article { display: flex; flex-direction: column; gap: var(--sp-1); }
.modal-heading { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.modal-article p { margin: 0; text-wrap: pretty; }
.modal-foot { flex: none; display: flex; justify-content: flex-end; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-line); }
.modal-ok { padding: 0 var(--sp-5); }

/* ── 기업 프로필 (design.md §8.4 · 시안 `내 기업 프로필`) ───────────────────── */
.main-profile { max-width: calc(var(--w-profile) + 48px); margin: 0 auto; padding: var(--sp-8) var(--sp-6) 64px; display: flex; flex-direction: column; gap: var(--sp-3); }
.profile-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.profile-title { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.01em; }
.profile-desc { margin: 0; color: var(--c-slate-700); }
.saved-box {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #b6d9c4; border-radius: var(--r-md);
  background: var(--c-ok-bg); font-weight: 600; color: #11502f;
}
.saved-icon {
  width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--c-ok); color: var(--c-surface);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.profile-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6) 28px; }
.profile-form { margin: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.profile-label { font-size: 14px; font-weight: 600; color: var(--c-slate-700); }
.profile-label .req { color: var(--c-risk); }
.profile-label .opt { font-weight: 400; color: var(--c-slate-600); }
.input-bold { font-weight: 600; }
.profile-field .field-error, .profile-block .field-error { word-break: keep-all; }
.link-button {
  align-self: flex-start; padding: 0; border: 0; background: transparent; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-navy); text-decoration: underline; cursor: pointer; text-align: left;
}
.chip-box {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; padding: 6px; border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-md); background: var(--c-surface);
}
.chip-box:focus-within { border-color: var(--c-navy); }
.chip-box.is-error { border-color: var(--c-risk); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.chip-row.is-error { outline: 1.5px solid var(--c-risk); outline-offset: 2px; border-radius: var(--r-sm); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: var(--r-sm);
  background: var(--c-navy-50); border: 1px solid var(--c-navy-100); color: var(--c-navy); font-size: 14px; font-weight: 600;
}
.chip-x { width: 22px; height: 22px; border: 0; background: transparent; color: var(--c-navy); cursor: pointer; font-size: 14px; }
.chip-search { flex: 1; min-width: 180px; height: 28px; border: 0; outline: 0; padding: 0 6px; background: transparent; font-size: var(--fs-body); }
.chip-empty { font-size: 13.5px; color: var(--c-slate-600); }
.suggest-row { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest {
  height: 28px; padding: 0 10px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface);
  font-size: 13.5px; color: var(--c-slate-700); cursor: pointer;
}
.suggest:hover { border-color: var(--c-navy); color: var(--c-navy); }
.region-pick { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.region-select { height: 40px; min-width: 140px; }
.btn-outline {
  height: 40px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface);
  font-weight: 600; cursor: pointer;
}
.btn-outline:hover { border-color: var(--c-navy); color: var(--c-navy); }
.profile-foot { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.profile-actions { margin-left: auto; display: flex; gap: var(--sp-2); }
.btn-save { padding: 0 var(--sp-5); }
@media (max-width: 640px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 공고 목록 (design.md §4 · §5.11 · §5.12, 시안 `공고 목록`) ───────────────────────── */
.main-list { padding-top: var(--sp-4); }
.filter-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap;
}
.filter-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-slate-600); }
.filter-field .select { color: var(--c-ink); }
.filter-license { min-width: 170px; }
.filter-region { min-width: 120px; }
.filter-amount, .filter-method { min-width: 140px; }
.filter-deadline { min-width: 130px; }
.toggle { height: 38px; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-1); cursor: pointer; }
.toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { width: 36px; height: 20px; border-radius: 10px; background: var(--c-slate-300); position: relative; display: inline-block; }
.toggle-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-surface); }
.toggle-input:checked + .toggle-track { background: var(--c-navy); }
.toggle-input:checked + .toggle-track .toggle-knob { left: 18px; }
.toggle-input:focus-visible + .toggle-track { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.toggle-text { font-weight: 600; }
.filter-search {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); width: 300px; height: 38px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
}
.filter-search:focus-within { border-color: var(--c-navy); }
.filter-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-body); }

.list-summary { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-1); flex-wrap: wrap; }
.summary-main { font-size: var(--fs-md); }
.summary-main b.is-warn { color: var(--c-warn); }
.summary-count { font-size: 14px; color: var(--c-slate-600); }
.sort-wrap { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.sort-label { font-size: 14px; color: var(--c-slate-600); }
.sort-group { display: flex; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.sort-btn { height: 34px; padding: 0 14px; border: 0; background: transparent; color: var(--c-slate-700); cursor: pointer; font-size: var(--fs-body); }
.sort-btn:hover { background: var(--c-navy-50); }
.sort-btn.is-active, .sort-btn.is-active:hover { background: var(--c-navy); color: var(--c-surface); font-weight: 600; cursor: default; }

.table-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow-x: auto; }
.notice-table { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: var(--fs-body); }
.notice-table th {
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-line-strong); font-size: var(--fs-sm); color: var(--c-slate-600);
  text-align: left; font-weight: 600; padding: 9px 12px;
}
.notice-table td { padding: 7px 12px; border-bottom: 1px solid var(--c-line); }
.notice-table .col-status { width: 96px; padding-left: var(--sp-4); }
.notice-table .col-no { width: 180px; }
.notice-table .col-agency { width: 190px; }
.notice-table .col-base { width: 150px; text-align: right; }
.notice-table .col-rate { width: 84px; text-align: right; }
.notice-table .col-close { width: 96px; text-align: right; }
.notice-table .col-analysis { width: 116px; padding-right: var(--sp-4); }
.notice-table td.col-name { font-weight: 600; }
.notice-table td.col-no { font-size: 14px; color: var(--c-slate-600); }
.notice-table td.col-agency { color: var(--c-slate-700); }
.notice-table td.col-base { font-weight: 600; }
.notice-table td.col-close { font-weight: 500; }
.notice-table td.col-close.is-soon { font-weight: 700; color: var(--c-warn); }
.notice-row { position: relative; cursor: pointer; }
.notice-row:hover { background: var(--c-navy-50); }
.row-link { color: inherit; }
.row-link:hover { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.list-more { display: flex; justify-content: center; margin-top: var(--sp-4); }
.notice-empty td { padding: 32px var(--sp-4); text-align: center; color: var(--c-slate-600); }
.badge-sm { height: 22px; padding: 0 7px; }
.badge-solid { background: var(--c-navy); color: var(--c-surface); }
.badge-outline { padding: 0 6px; border: 1.5px solid var(--c-navy); color: var(--c-navy); }
.badge-dashed { padding: 0 6px; border: 1px dashed var(--c-slate-500); color: var(--c-slate-600); font-weight: 600; }
.badge-gray { background: var(--c-muted-bg); color: var(--c-slate-600); font-weight: 600; }

/* ── 투찰 분석 (design.md §4 · §5.4 ~ §5.10 · §6, 시안 `투찰 분석`) ─────────────────────── */
/* 공고 요약 줄 — 칸마다 오른쪽 구분선 + 16px, 마감 · 개찰은 한 칸 */
.summary-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.summary-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.summary-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
.summary-no { font-size: 14px; color: var(--c-slate-600); }
.summary-link { margin-left: auto; font-size: 14px; font-weight: 600; }
.summary-items { display: flex; flex-wrap: wrap; row-gap: var(--sp-2); border-top: 1px solid var(--c-line); padding-top: var(--sp-2); }
.sum-item {
  display: flex; flex-direction: column; padding-right: var(--sp-4); margin-right: var(--sp-4);
  border-right: 1px solid var(--c-line);
}
.sum-label { font-size: var(--fs-sm); color: var(--c-slate-600); }
.sum-value { font-weight: 600; }
.sum-strong { font-weight: 700; font-size: var(--fs-md); }
.sum-when { white-space: nowrap; }
.sum-close.is-soon { color: var(--c-warn); }

/* 경쟁사 데이터 부족 띠 (§5.10) */
.lack-band {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--warn-border); border-radius: var(--r-lg); background: var(--c-warn-bg);
}
.lack-icon {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-warn); color: var(--c-surface);
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.lack-text { font-weight: 600; color: var(--warn-text); word-break: keep-all; }
.lack-count { margin-left: auto; font-size: 14px; color: var(--warn-text); white-space: nowrap; }

/* 2단 그리드 · 왼쪽 본문 · 오른쪽 패널(sticky, 높이는 배율로 나눈 값) */
.analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-4); align-items: start; }
.analysis-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.analysis-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
.analysis-aside {
  position: sticky; top: 72px; max-height: calc(100vh / var(--zoom) - 88px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}

/* 카드 제목 줄 + 근거 배지 */
.card-head { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.card-head-center { align-items: center; gap: var(--sp-2); }
.card-head-text { display: flex; flex-direction: column; gap: 2px; }
.card-head-badge { margin-left: auto; min-width: 0; max-width: 100%; }

/* ① 금액별 확률 */
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-slate-700); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-line { width: 18px; display: inline-block; }
.legend-pass { height: 3px; background: var(--c-navy); }
.legend-win { height: 0; border-top: 2.5px dashed var(--c-chart-2); }
.legend-box { width: 14px; height: 12px; display: inline-block; }
.legend-stable { background: var(--chart-stable-legend); }
.legend-attack { background: var(--chart-attack-legend); }
.legend-floor {
  background: repeating-linear-gradient(135deg, var(--chart-hatch-legend) 0 2px, transparent 2px 5px);
  border: 1px solid var(--c-line-strong);
}
.legend-vline { width: 0; height: 12px; border-left: 1.5px dashed var(--c-slate-600); display: inline-block; }
.chart-wrap { position: relative; margin-top: 6px; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-curve { cursor: crosshair; }
.chart-labels { position: absolute; inset: 0; pointer-events: none; }
.chart-tip {
  position: absolute; top: 28px; pointer-events: none; background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md); box-shadow: 0 4px 14px rgba(20, 26, 36, 0.12); padding: 10px var(--sp-3); min-width: 210px;
  display: flex; flex-direction: column; gap: var(--sp-1); font-size: 14px;
}
.chart-tip[hidden] { display: none; }
.chart-caption { font-size: 11.5px; fill: var(--c-slate-500); }
.hatch-bg { fill: var(--chart-hatch-bg); }
.hatch-line { stroke: var(--chart-hatch-line); stroke-width: 2; }
.chart-foot { margin-top: 6px; }

/* ② 사정률 분포 */
.dist-card { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.dist-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
.stat { display: flex; flex-direction: column; }
.stat-label { font-size: var(--fs-sm); color: var(--c-slate-600); }
.stat-main { font-size: 20px; font-weight: 700; color: var(--c-navy); }
.stat-value { font-size: var(--fs-md); font-weight: 600; }
.stat-count { font-weight: 400; color: var(--c-slate-600); }
.dist-card .chart-wrap { margin-top: 0; }
.dist-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--c-slate-700); margin-top: -6px; }
.dist-legend .legend-item { gap: 5px; }
.dist-legend .legend-box { width: 12px; height: 10px; }
.legend-q50 { background: var(--chart-q50); }
.legend-q90 { background: var(--chart-q90); border: 1px solid var(--c-line); }
.legend-mode { background: var(--c-navy); }
.dist-unit { margin-left: auto; color: var(--c-slate-600); }
.monthly { border-top: 1px solid var(--c-line); padding-top: 10px; display: flex; flex-direction: column; gap: var(--sp-1); }
.monthly-head { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); }
.monthly-title { font-weight: 600; }
.monthly-note { color: var(--c-slate-600); }
.monthly .chart-wrap { margin-top: 0; }

/* ③ 이 금액이면 몇 등? — 머리글 한 줄 */
.rank-card { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rank-desc { margin-top: -4px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.rank-table thead tr { border-bottom: 1px solid var(--c-line-strong); color: var(--c-slate-600); font-size: var(--fs-sm); }
.rank-table th { font-weight: 600; padding: 6px 4px; text-align: right; }
.rank-table th.col-amount { text-align: left; }
.rank-table tbody tr { border-bottom: 1px solid var(--c-line); }
.rank-table td { padding: 7px 4px; text-align: right; }
.rank-table td.col-amount { text-align: left; font-weight: 700; color: var(--c-navy); }
.rank-table td.col-first { font-weight: 600; }
.rank-table td.col-over { color: var(--c-slate-600); }
.rank-table tr.is-active { background: var(--c-navy-50); box-shadow: inset 3px 0 0 var(--c-navy); }
.rank-table tr.is-active td { font-weight: 700; }
.rank-table tr.is-active td.col-amount { padding-left: var(--sp-2); }
.below-cell { display: inline-flex; align-items: center; gap: 6px; }
.mini-bar { display: inline-block; flex: none; }
.mini-bar-bg { fill: var(--c-muted-bg); }
.mini-bar-fill { fill: var(--c-risk); }
.rank-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-slate-600); }
.rank-empty {
  border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 10px; background: var(--c-surface-2);
}
.rank-empty-title { color: var(--c-slate-600); }
.rank-empty-text { margin: 0; color: var(--c-slate-700); text-wrap: pretty; }
.rank-empty-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); font-size: 14px; padding-top: 10px;
  border-top: 1px solid var(--c-line);
}
.rank-empty-label { color: var(--c-slate-600); }
.rank-empty-value { font-weight: 600; }

/* ④ 근거 · 표본 부족 카드의 칸 묶음 */
.evidence-card { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 14px; }
.evidence-text {
  margin: 0; padding: 14px var(--sp-4); background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--r-md); font-size: var(--fs-md); line-height: 1.75; text-wrap: pretty;
}
.info-grid { display: grid; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.info-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.info-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-cell { padding: 10px 14px; border-right: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 2px; }
.info-cell:last-child { border-right: 0; }
.info-cell-lg { padding: var(--sp-3) 14px; }
.info-label { font-size: var(--fs-sm); color: var(--c-slate-600); }
.info-value { font-weight: 600; word-break: keep-all; }
.info-value-lg { font-weight: 700; font-size: var(--fs-lg); }
.info-sub { font-weight: 400; color: var(--c-slate-600); }
.sample-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 28px;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.sample-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sample-text { margin: 0; font-size: var(--fs-md); color: var(--c-slate-700); text-wrap: pretty; }
.sample-text b { color: var(--c-ink); }
.sample-note { margin: 0; font-size: 14px; color: var(--c-slate-600); text-wrap: pretty; }

/* ⑤ 추천 금액 — 보조 2줄은 잘리지 않게: 좁으면 금액 글자를 줄이지 않고 보조 칸을 아래 줄로 내린다(§5.8 구현 규칙) */
.rec-card {
  flex-shrink: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 10px var(--sp-3); display: flex; flex-direction: column; gap: 6px;
}
.rec-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.rec-title { margin: 0; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.rec-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: 6px var(--sp-2);
  border: 1px solid var(--c-line); border-radius: var(--r-md); cursor: pointer;
}
.rec-stable:hover, .rec-stable:focus-visible { border-color: var(--c-navy); background: var(--c-navy-50); }
.rec-attack:hover, .rec-attack:focus-visible { border-color: var(--c-warn-fill); background: var(--rec-attack-hover); }
.rec-row:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 1px; }
.rec-chip {
  flex: none; display: inline-flex; align-items: center; height: 22px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 700;
}
.rec-chip-stable { padding: 0 7px; background: var(--c-navy); color: var(--c-surface); }
.rec-chip-attack { padding: 0 6px; border: 1.5px solid var(--c-warn-fill); color: var(--c-warn); }
.rec-amount { flex: none; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.rec-won { font-size: 14px; font-weight: 600; margin-left: 1px; }
.rec-aux {
  flex: 1 0 auto; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35;
  color: var(--c-slate-700); white-space: nowrap;
}
.rec-aux b.is-warn { color: var(--c-warn); }
.rec-copy {
  flex: none; margin-left: auto; height: 28px; min-width: 28px; padding: 0 6px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface);
  cursor: pointer; font-size: var(--fs-xs); color: var(--c-ok); font-weight: 700;
}
.rec-copy-icon { fill: none; stroke: var(--c-slate-700); stroke-width: 1.5; }
.rec-copy.is-copied .rec-copy-icon { display: none; }

/* ⑥ 실효 하한 진단 — 대표 기능: 2px 남색 테두리 + 남색 머리띠 */
.diag-card { flex-shrink: 0; background: var(--c-surface); border: 2px solid var(--c-navy); border-radius: var(--r-lg); overflow: hidden; }
.diag-head { background: var(--c-navy); color: var(--c-surface); padding: 6px 14px; display: flex; align-items: center; gap: var(--sp-2); }
.diag-title { margin: 0; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.diag-hint { margin-left: auto; font-size: 12.5px; color: var(--diag-hint); white-space: nowrap; }
.diag-body { padding: 10px 14px; display: flex; flex-direction: column; gap: var(--sp-2); }
.diag-input {
  display: flex; align-items: center; height: 42px; padding: 0 var(--sp-3); border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-md); background: var(--c-surface);
}
.diag-input:focus-within { border-color: var(--c-navy); }
.diag-input-label { flex: none; margin-right: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-slate-600); }
.diag-input-field {
  flex: 1; min-width: 0; border: 0; outline: 0; text-align: right; font-size: var(--fs-xl); font-weight: 700;
  background: transparent;
}
.diag-input-unit { margin-left: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--c-slate-600); }
.diag-risk { display: flex; flex-direction: column; gap: 6px; }
.diag-risk-head { display: flex; align-items: center; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }
.diag-risk-title { font-size: 14px; font-weight: 700; }
.diag-cells {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--c-line);
  border-radius: var(--r-md); overflow: hidden;
}
.diag-cell { padding: 6px var(--sp-2); border-right: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.diag-cell:last-child { border-right: 0; }
/* 라벨은 한 줄(§5.9 구현 규칙 — 좁은 칸이라 줄인 이름, 전체 이름은 title) */
.diag-cell-label { font-size: 12.5px; line-height: 1.3; color: var(--c-slate-600); white-space: nowrap; }
.diag-cell-value { font-size: 20px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.diag-cell-level { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; min-height: 1.2em; }
.diag-cell-level.is-low { color: var(--c-ok); }
.diag-cell-level.is-medium { color: var(--c-warn); }
.diag-cell-level.is-high { color: var(--c-risk); }
.diag-measured { margin-left: var(--sp-1); font-size: 11.5px; font-weight: 700; color: var(--c-navy); }
.diag-note { font-size: var(--fs-xs); line-height: 1.4; color: var(--c-slate-600); word-break: keep-all; text-wrap: pretty; }
.diag-note[hidden] { display: none; }

/* 위험 구간 막대 — 빗금은 `확정` 구간에만(§7). 구간 폭 기본값은 시안 비율, analysis.js 가 서버 경계 금액에 비례해 바꾼다 */
.zone { display: flex; flex-direction: column; gap: 6px; }
.zone-marker { position: relative; height: 34px; }
.zone-bar { display: flex; gap: 2px; height: 18px; }
.zone-seg { display: block; min-width: 0; }
.zone-certain { background: repeating-linear-gradient(135deg, var(--c-risk) 0 5px, var(--c-risk-dark) 5px 8px); }
.zone-possible { background: var(--c-warn-fill); }
.zone-valid { background: var(--c-ok); }
.zone-start { border-radius: 3px 0 0 3px; }
.zone-end { border-radius: 0 3px 3px 0; }
.zone-labels {
  display: flex; gap: 2px; font-size: var(--fs-xs); line-height: 1.3; font-weight: 600; text-align: center;
  letter-spacing: -0.01em;
}
.zone-label { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.zone-label > span { white-space: nowrap; }
.zone-bar > :nth-child(1), .zone-labels > :nth-child(1), .zone-bar > :nth-child(5), .zone-labels > :nth-child(5) { flex: 18 1 0; }
.zone-bar > :nth-child(2), .zone-labels > :nth-child(2), .zone-bar > :nth-child(4), .zone-labels > :nth-child(4) { flex: 24 1 0; }
.zone-bar > :nth-child(3), .zone-labels > :nth-child(3) { flex: 16 1 0; }
.zone-label.is-risk { color: var(--c-risk); }
.zone-label.is-warn { color: var(--c-warn); }
.zone-label.is-ok { color: var(--c-ok); }
.zone-ranges { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1); font-size: var(--fs-sm); }
.zone-range { display: flex; justify-content: space-between; gap: var(--sp-2); }
.zone-range-label { color: var(--c-slate-600); }
.zone-range-value { font-weight: 700; white-space: nowrap; }

/* 안내 상자(입력 금액이 놓인 구간) — 색은 서버 구간 값으로 고른다(is-red · is-orange · is-green) */
.diag-guide { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-md); border: 1px solid var(--c-line); }
.diag-guide[hidden] { display: none; }
.diag-guide-icon {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--c-surface); font-weight: 800;
  font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center;
}
.diag-guide-text { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.4; word-break: keep-all; }
.diag-guide.is-red { background: var(--c-risk-bg); border-color: var(--risk-border); }
.diag-guide.is-red .diag-guide-icon { background: var(--c-risk); }
.diag-guide.is-red b { color: var(--c-risk-dark); }
.diag-guide.is-red .diag-guide-text > span { color: var(--risk-desc); }
.diag-guide.is-orange { background: var(--c-warn-bg); border-color: var(--warn-border); }
.diag-guide.is-orange .diag-guide-icon { background: var(--c-warn); font-size: 14px; }
.diag-guide.is-orange b { color: var(--warn-title); }
.diag-guide.is-orange .diag-guide-text > span { color: var(--warn-desc); }
.diag-guide.is-green { background: var(--c-ok-bg); border-color: var(--ok-border); }
.diag-guide.is-green .diag-guide-icon { background: var(--c-ok); }
.diag-guide.is-green b { color: var(--ok-title); }
.diag-guide.is-green .diag-guide-text > span { color: var(--ok-desc); }

/* 실효 하한 안내 · 사정률별 실효 하한 — 기본 접힘(<details>, 스크립트 없이 열고 닫힘) */
.floor-guide { border-top: 1px solid var(--c-line); padding-top: 6px; }
.floor-guide-summary { display: flex; align-items: center; gap: var(--sp-2); padding: 2px 0; cursor: pointer; list-style: none; }
.floor-guide-summary::-webkit-details-marker { display: none; }
.floor-guide-title { font-size: 14px; font-weight: 700; }
.floor-guide-sub { font-size: 12.5px; color: var(--c-slate-600); }
.floor-guide-arrow { margin-left: auto; font-size: var(--fs-sm); color: var(--c-slate-600); }
.floor-guide .when-open { display: none; }
.floor-guide[open] .when-open { display: inline; }
.floor-guide[open] .when-closed { display: none; }
.floor-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: var(--sp-2); }
.floor-table thead tr { color: var(--c-slate-600); border-bottom: 1px solid var(--c-line-strong); }
.floor-table th { font-weight: 600; padding: 5px 2px; text-align: right; }
.floor-table th:first-child { text-align: left; }
.floor-table tbody tr { border-bottom: 1px solid var(--c-line); }
.floor-table td { padding: 6px 2px; text-align: right; }
.floor-table td.col-rate { text-align: left; font-weight: 600; }
.floor-table td.col-floor { font-weight: 700; }
.floor-table td.col-basis { color: var(--c-slate-700); white-space: nowrap; }
.floor-guide-note { margin: var(--sp-2) 0 0; font-size: 12.5px; color: var(--c-slate-600); text-wrap: pretty; }

/* ── 투찰 분석 스크립트(analysis.js)가 만드는 차트 · 마커 요소 — 위치는 SVG 속성 · CSSOM(element.style), 색 · 크기는 여기서 ── */
/* HTML 눈금 글자(차트 위에 겹침): at-end = 왼쪽 축(글자 오른쪽 끝을 점에), at-start = 오른쪽 축, at-mid = 가운데 */
.chart-label { position: absolute; line-height: 1; white-space: nowrap; pointer-events: none; }
.chart-label.at-end { transform: translate(-100%, -50%); }
.chart-label.at-start { transform: translate(0, -50%); }
.chart-label.at-mid { transform: translate(-50%, -50%); }
.lbl-axis { font-size: 12px; color: var(--c-slate-600); }
.lbl-amount { font-size: 12.5px; font-weight: 600; color: var(--c-slate-700); }
.lbl-rate { font-size: 11.5px; color: var(--c-slate-500); }
.lbl-hist-y { font-size: 11.5px; color: var(--c-slate-500); }
.lbl-hist-x { font-size: var(--fs-xs); color: var(--c-slate-700); }
.lbl-count { font-size: 10px; color: var(--c-slate-600); }
.lbl-month { font-size: 11px; color: var(--c-slate-500); }
/* ① SVG */
.cv-floor { fill: url(#hatchL); }
.cv-stable { fill: var(--chart-stable); }
.cv-attack { fill: var(--chart-attack); }
.cv-band-label { font-size: 12.5px; font-weight: 700; }
.cv-stable-label { fill: var(--c-navy); }
.cv-attack-label { fill: var(--c-warn); }
.cv-grid { stroke: var(--chart-grid); stroke-width: 1; }
.cv-axis { stroke: var(--c-slate-300); stroke-width: 1; }
.cv-median { stroke: var(--c-slate-600); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cv-median-label { font-size: var(--fs-xs); fill: var(--c-slate-700); }
.cv-pass { fill: none; stroke: var(--c-navy); stroke-width: 2.75; stroke-linejoin: round; }
.cv-win { fill: none; stroke: var(--c-chart-2); stroke-width: 2.25; stroke-dasharray: 6 4; stroke-linejoin: round; }
.cv-hover-line { stroke: var(--c-ink); stroke-width: 1; }
.cv-hover-pass { fill: var(--c-surface); stroke: var(--c-navy); stroke-width: 2.5; }
.cv-hover-win { fill: var(--c-surface); stroke: var(--c-chart-2); stroke-width: 2.25; }
/* ① 마우스 올림 말풍선 줄 */
.tip-amount { font-weight: 700; font-size: var(--fs-md); }
.tip-row { display: flex; justify-content: space-between; gap: var(--sp-4); color: var(--c-slate-600); }
.tip-row b { color: var(--c-ink); }
.tip-row.tip-rate b { font-weight: 600; }
.tip-row.tip-pass b { color: var(--c-navy); }
/* ② 막대 · 음영 · 중앙값 · 월별 흐름 */
.hg-q90 { fill: var(--chart-q90); }
.hg-q50 { fill: var(--chart-q50); }
.hg-grid { stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 2 3; }
.hg-bar { fill: var(--chart-bar); }
.hg-bar-mode { fill: var(--c-navy); }
.hg-axis { stroke: var(--c-slate-300); stroke-width: 1; }
.hg-median { stroke: var(--c-navy); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mo-ref { stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.mo-axis-text { font-size: 10.5px; fill: var(--c-slate-500); }
.mo-line { fill: none; stroke: var(--c-navy); stroke-width: 1.75; }
.mo-dot { fill: var(--c-navy); }
/* ⑥ 입력 금액 마커(검정 말풍선 + 삼각 + 2px 세로선) */
.zone-marker-label {
  position: absolute; top: 0; transform: translateX(-50%); background: var(--c-ink); color: var(--c-surface);
  font-size: var(--fs-sm); font-weight: 700; padding: 1px 7px; border-radius: var(--r-sm); white-space: nowrap;
}
.zone-marker-tip {
  position: absolute; top: 21px; transform: translateX(-50%); width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--c-ink);
}
.zone-marker-line { position: absolute; top: 26px; transform: translateX(-50%); width: 2px; height: 28px; background: var(--c-ink); z-index: 2; }
.zone-seg[hidden], .zone-label[hidden] { display: none; }
/* ⑥ API 오류 줄 */
.diag-error { color: var(--c-risk); }
.diag-error-link { font-weight: 600; }
.diag-error-link[hidden] { display: none; }

/* ── 하한선 미달 진단 (design.md §8.3 · 시안 `하한선 미달 진단`) ───────────────────── */
.main-diag { max-width: calc(var(--w-diag) + 48px); margin: 0 auto; padding: var(--sp-6) var(--sp-6) 64px; display: flex; flex-direction: column; gap: var(--sp-3); }
.diag-input-card { padding: var(--sp-6) 28px; display: flex; flex-direction: column; gap: var(--sp-3); }
.diag-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.diag-title { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.01em; }
.diag-desc { margin: 0; color: var(--c-slate-700); }
.diag-form { margin: 0; display: flex; gap: var(--sp-2); align-items: stretch; max-width: 560px; }
.diag-input {
  flex: 1; min-width: 0; height: var(--h-input-lg); padding: 0 14px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md);
  outline: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; background: var(--c-surface);
}
.diag-input:focus { border-color: var(--c-navy); }
.diag-input.is-error { border-color: var(--c-risk); }
.diag-submit { flex: none; height: var(--h-input-lg); padding: 0 22px; font-size: var(--fs-md); font-weight: 700; }
.diag-submit.is-disabled { cursor: not-allowed; }
.diag-bizno-error { display: flex; align-items: center; gap: 6px; margin-top: -4px; font-size: 14px; font-weight: 600; color: var(--c-risk); }
.diag-bizno-error-icon {
  width: 16px; height: 16px; border-radius: 50%; background: var(--c-risk); color: var(--c-surface); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.diag-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--c-slate-600); }
.diag-meta-item { display: flex; align-items: center; gap: 6px; }
.diag-lock { color: var(--c-slate-500); }
.diag-sep { color: var(--c-line-strong); }
.diag-remaining { color: var(--c-ink); }
.diag-example { padding: 0; border: 0; background: transparent; color: var(--c-navy); font-weight: 600; cursor: pointer; }
.diag-example:hover { text-decoration: underline; }

.diag-summary { padding: 18px var(--sp-6) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.diag-summary-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.diag-corp { margin-left: auto; font-size: var(--fs-md); font-weight: 700; }
.diag-corp-biz { font-weight: 500; color: var(--c-slate-600); }
.diag-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.diag-col { display: flex; flex-direction: column; gap: 6px; padding-right: var(--sp-6); }
.diag-col-right { padding: 0 0 0 var(--sp-6); border-left: 1px solid var(--c-line); }
.diag-col-label { font-size: 14px; font-weight: 600; color: var(--c-slate-700); }
.diag-col-sub { font-size: 14px; color: var(--c-slate-600); }
.diag-value-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.diag-value { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.2; }
.diag-value-main { color: var(--c-navy); }
.diag-value-median { color: var(--c-slate-700); }
.diag-chip-muted {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--r-sm);
  background: var(--c-muted-bg); color: var(--c-slate-600); font-size: var(--fs-xs); font-weight: 700;
}
.diag-badge-row { display: flex; min-height: 24px; }
.diag-compare { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.diag-compare-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 220px; align-items: center; gap: var(--sp-3); }
.diag-compare-scale { align-items: start; }
.diag-compare-label { font-size: 14px; font-weight: 600; }
.diag-bar { display: block; width: 100%; overflow: visible; }
.diag-bar-track { fill: var(--c-surface-2); stroke: var(--c-line); stroke-width: 1; }
.diag-bar-fill { fill: var(--c-navy); }
.diag-bar-muted { fill: var(--c-bar-muted); }
.diag-median-line { stroke: var(--c-slate-500); stroke-width: 2; }
.diag-verdict { font-size: 14px; font-weight: 700; word-break: keep-all; }
.diag-verdict-above { color: var(--c-warn); }
.diag-verdict-below { color: var(--c-ok); }
.diag-verdict-equal { font-size: var(--fs-sm); font-weight: 600; color: var(--c-slate-600); }
.diag-verdict-note { font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; color: var(--c-slate-600); text-wrap: pretty; }
.diag-ticks { position: relative; height: 16px; font-size: var(--fs-xs); color: var(--c-slate-600); }
.diag-tick { position: absolute; }
.diag-tick-0 { left: 0; }
.diag-tick-5 { left: 25%; transform: translateX(-50%); }
.diag-tick-10 { left: 50%; transform: translateX(-50%); }
.diag-tick-15 { left: 75%; transform: translateX(-50%); }
.diag-tick-20 { right: 0; }
.diag-legend { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-slate-600); }
.diag-legend-line { width: 2px; height: 12px; background: var(--c-slate-500); }

.diag-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.diag-license, .diag-range { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.diag-range { gap: 10px; }
.diag-license-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.diag-license-head .ev { margin-left: auto; min-width: 0; max-width: 100%; }
.diag-license-name { font-size: var(--fs-xl); font-weight: 700; }
.diag-license-none { color: var(--c-slate-600); }
.diag-license-sub { font-size: 14px; color: var(--c-slate-600); text-wrap: pretty; word-break: keep-all; }
.diag-short {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px var(--sp-3); border: 1px solid #efc995; border-radius: var(--r-md);
  background: var(--c-warn-bg);
}
.diag-short-icon {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--c-warn); color: var(--c-surface);
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.diag-short-text { font-size: 14px; font-weight: 600; color: #6b3606; text-wrap: pretty; word-break: keep-all; }
.diag-range-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.diag-range-wide .diag-range-grid { grid-template-columns: repeat(3, auto minmax(0, 1fr)); }
.diag-range-key { color: var(--c-slate-600); }
.diag-range-val { font-weight: 600; }
.diag-guide { padding: var(--sp-3) var(--sp-5); }
.diag-guide-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); padding: 2px 0; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.diag-guide-title { font-size: var(--fs-md); font-weight: 700; }
.diag-guide-arrow { margin-left: auto; font-size: var(--fs-sm); color: var(--c-slate-600); }
.diag-guide-list { margin: 10px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--c-slate-700); font-size: 14px; word-break: keep-all; }
.diag-guide-list[hidden] { display: none; }
.diag-guide-list b { color: var(--c-ink); }
.diag-state { padding: 28px; gap: var(--sp-2); }
.diag-state .state-badge { height: 24px; padding: 0 9px; font-size: var(--fs-sm); }
.diag-state .state-reason { word-break: keep-all; }
.diag-cta {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-navy-100); border-radius: var(--r-lg); background: var(--c-navy-50);
}
.diag-cta-text { margin: 0; flex: 1; min-width: 280px; color: var(--c-ink); text-wrap: pretty; word-break: keep-all; }
.diag-cta-free { color: var(--c-slate-600); }
.diag-cta-actions { display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 720px) {
  .diag-cols, .diag-pair { grid-template-columns: minmax(0, 1fr); }
  .diag-col { padding-right: 0; }
  .diag-col-right { padding: var(--sp-3) 0 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .diag-compare-row { grid-template-columns: minmax(0, 1fr); }
  .diag-compare-scale > span:first-child { display: none; }
  .diag-range-wide .diag-range-grid { grid-template-columns: auto minmax(0, 1fr); }
}