/* ============================================================================
   업계 비교 리포트 — 데스크탑 전용 콘솔
   ⚠ 반응형 없음 (소유자 지시: 현업은 데스크탑으로 본다). 최소폭 1360px.
   ⚠ 5사 비교표는 가로가 길다 → 표 자체만 가로 스크롤, 페이지는 절대 안 밀린다.
   ============================================================================ */

:root {
  --nav-1:#16265E; --nav-2:#0C1738; --nav-line:rgba(255,255,255,.09);
  --nav-ink:#C7D2EA; --nav-ink-dim:#8394BC; --nav-accent:#4F8BFF;

  --bg:#F4F6FA; --card:#FFFFFF; --line:#E3E8F2; --line-2:#EEF1F7;
  --ink:#101B33; --ink-2:#4B5A76; --ink-3:#7D8AA3;
  --blue:#1E40AF; --blue-2:#2563EB; --blue-bg:#EEF3FF;
  --warn-bg:#FFF8E6; --warn-ink:#7A5B00; --warn-line:#F0DCA0;

  /* 5사 팔레트 — OKLab/색각이상 검사 통과분 (정상시야 최소 ΔE 16.0)
     CVD 최소 분리가 6.5 라 색만으로 구분하지 않는다:
     선은 점선 패턴, 점은 마커 모양, 끝에는 직접 라벨을 반드시 같이 쓴다. */
  --c-삼성:#1E40AF; --c-KB:#B45309; --c-DB:#0E7490; --c-메리츠:#DB2777; --c-현대:#65A30D;

  --hi-3:#FBD5D5; --hi-2:#FCE4E4; --hi-1:#FDF0F0;   /* 삼성보다 비쌈 */
  --lo-3:#CFE3FA; --lo-2:#E2EEFB; --lo-3b:#EFF6FE;  /* 삼성보다 쌈 */
  --hi-ink:#9B1C1C; --lo-ink:#1E40AF;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  min-width:1360px;
  background:var(--bg); color:var(--ink);
  font-family:'Pretendard','Pretendard Variable','Malgun Gothic','맑은 고딕',
              system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--blue-2); }

/* ── 좌측 메뉴 ───────────────────────────────────────────────────────────── */
#nav {
  position:fixed; inset:0 auto 0 0; width:248px; z-index:30;
  background:linear-gradient(180deg,var(--nav-1),var(--nav-2));
  display:flex; flex-direction:column; overflow-y:auto;
}
#nav::-webkit-scrollbar { width:6px; }
#nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:3px; }

/* BEDROCKS 로고 — 흰 선화 + 투명 배경이라 검은 바탕이 필수다.
   메뉴가 길어져 사이드바가 스크롤돼도 늘 보이도록 sticky 로 붙여 둔다. */
.logo {
  position:sticky; top:0; z-index:3;
  background:#000; padding:22px 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.logo img { display:block; width:100%; height:auto; }
.brand { padding:14px 18px 15px; border-bottom:1px solid var(--nav-line); }
.brand b { display:block; color:#fff; font-size:16.5px; font-weight:700; letter-spacing:-.2px; }
.brand span { display:block; color:var(--nav-ink-dim); font-size:12.5px; }

.nav-label {
  color:var(--nav-accent); font-size:11.5px; font-weight:700; letter-spacing:.6px;
  padding:16px 18px 7px;
}
.nav-item {
  display:flex; align-items:center; gap:11px; padding:11px 18px; cursor:pointer;
  color:var(--nav-ink); font-size:15px; border-left:3px solid transparent; user-select:none;
}
.nav-item svg { width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-item.on {
  background:rgba(255,255,255,.11); color:#fff; font-weight:700;
  border-left-color:var(--nav-accent);
}
.nav-item.on svg { opacity:1; }
.nav-sep { height:1px; background:var(--nav-line); margin:14px 0 0; }
.nav-foot { margin-top:auto; padding:14px 0 18px; border-top:1px solid var(--nav-line); }

/* AI 버튼 — 사이드바에서 가장 눈에 띄어야 한다 */
.nav-ai {
  margin:14px 14px 4px; padding:13px 14px; border-radius:11px; cursor:pointer;
  background:linear-gradient(135deg,#2F6BFF,#1D4ED8);
  box-shadow:0 6px 18px rgba(29,78,216,.42);
  display:flex; gap:10px; align-items:center; color:#fff;
}
.nav-ai:hover { filter:brightness(1.08); }
.nav-ai b { font-size:14.5px; font-weight:700; display:block; }
.nav-ai span { font-size:11.5px; color:#D5E2FF; display:block; }

/* ── 본문 ────────────────────────────────────────────────────────────────── */
#main { margin-left:248px; padding:26px 30px 80px; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px; }
.page-head h1 { margin:0 0 5px; font-size:29px; font-weight:800; letter-spacing:-.6px; }
.page-head p { margin:0; color:var(--ink-2); font-size:15.5px; }

/* 상단 AI 바 — 본문에서도 항상 보인다 */
.ai-bar {
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  padding:15px 20px; border-radius:13px; color:#fff;
  background:linear-gradient(120deg,#173A8F 0%,#1D4ED8 46%,#2F6BFF 100%);
  box-shadow:0 8px 22px rgba(23,58,143,.28);
}
.ai-bar .ic { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.17); display:grid; place-items:center; flex:0 0 40px; }
.ai-bar b { font-size:16.5px; }
.ai-bar p { margin:2px 0 0; font-size:13.5px; color:#D9E5FF; }
.ai-bar .go {
  margin-left:auto; background:#fff; color:#1D4ED8; border:0; cursor:pointer;
  padding:11px 20px; border-radius:9px; font-size:14.5px; font-weight:700;
  font-family:inherit; white-space:nowrap;
}
.ai-bar .go:hover { background:#EAF0FF; }

.card { background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.card + .card { margin-top:18px; }
.card > h2 { margin:0; padding:17px 22px; border-bottom:1px solid var(--line-2); font-size:18px; font-weight:700; display:flex; align-items:center; gap:9px; }
.card > h2 .tag { font-size:12px; font-weight:600; color:var(--ink-3); background:var(--bg); border:1px solid var(--line); padding:2px 9px; border-radius:20px; }
.card .body { padding:20px 22px; }
.card .body > p { font-size:16.5px; color:var(--ink-2); margin:0 0 12px; }
.card .body > p:last-child { margin-bottom:0; }

.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:18px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:13px; padding:16px 18px; }
.kpi .t { font-size:13.5px; color:var(--ink-3); display:flex; justify-content:space-between; }
.kpi .v { font-size:33px; font-weight:800; letter-spacing:-1px; margin-top:4px; }
.kpi .s { font-size:12.5px; color:var(--ink-3); }

.note { background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); border-radius:10px; padding:12px 16px; font-size:15px; margin-bottom:16px; }
.note b { font-weight:700; }

/* ── 컨트롤 ──────────────────────────────────────────────────────────────── */
.ctrls { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; padding:16px 22px; border-bottom:1px solid var(--line-2); }
.ctrl > label { display:block; font-size:12.5px; font-weight:700; color:var(--ink-3); margin-bottom:6px; letter-spacing:.2px; }
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:3px; gap:3px; }
.seg button {
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  padding:8px 15px; border-radius:7px; font-size:14.5px; color:var(--ink-2); font-weight:600;
}
.seg button.on { background:var(--blue); color:#fff; box-shadow:0 1px 3px rgba(30,64,175,.35); }
.seg button:not(.on):hover { background:#E8ECF5; }

.agewrap { display:flex; align-items:center; gap:12px; }
.agewrap input[type=range] { width:280px; accent-color:var(--blue); }
.agebox { font-size:22px; font-weight:800; min-width:74px; }
.agebox small { font-size:13px; font-weight:600; color:var(--ink-3); }

.bigbtn {
  border:2px solid var(--blue); background:#fff; color:var(--blue); cursor:pointer;
  font-family:inherit; font-size:15.5px; font-weight:700; padding:12px 22px; border-radius:10px;
  display:inline-flex; align-items:center; gap:9px;
}
.bigbtn:hover { background:var(--blue-bg); }
.bigbtn.on { background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(30,64,175,.34); }
.bigbtn .dot { width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.6; }
.bigbtn.on .dot { opacity:1; background:#7DD3FC; }

.btn { border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; padding:9px 15px; border-radius:8px; }
.btn:hover { background:var(--bg); }
.btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.primary:hover { filter:brightness(1.1); }

/* ── 표 ──────────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x:auto; overflow-y:visible; }
.tablewrap::-webkit-scrollbar { height:11px; }
.tablewrap::-webkit-scrollbar-thumb { background:#C3CCDD; border-radius:6px; }
.tablewrap::-webkit-scrollbar-track { background:var(--line-2); }

table.grid { border-collapse:separate; border-spacing:0; font-size:14.5px; width:max-content; min-width:100%; }
table.grid th, table.grid td { border-bottom:1px solid var(--line-2); padding:8px 10px; vertical-align:middle; text-align:left; }
table.grid thead th { position:sticky; top:0; z-index:5; background:#16265E; color:#fff; font-weight:700; font-size:13.5px; text-align:center; border-bottom:0; }
table.grid thead tr.sub th { top:35px; background:#22357A; font-size:12.5px; font-weight:600; }
table.grid thead th.prod { background:#2C3F86; color:#C9D6F5; font-weight:500; font-size:12px; text-align:center; }
table.grid tbody tr:hover td { background:#FAFBFE; }
table.grid td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.grid td.cov { max-width:330px; }
table.grid .axis { background:#F1F5FD; font-weight:700; border-right:1px solid var(--line); white-space:nowrap; vertical-align:top; }
table.grid .setn { color:var(--ink-2); font-weight:600; white-space:nowrap; }
table.grid tr.band td { background:#16265E; color:#fff; font-weight:700; font-size:14px; padding:8px 14px; }
table.grid tr.sub td { background:#F5F7FB; font-weight:700; }
table.grid tr.tot td { background:#FFF8E6; font-weight:800; font-size:15px; border-top:2px solid #E6C878; }
table.grid td.sep { border-left:1px solid var(--line); }

.hi3{background:var(--hi-3)!important;color:var(--hi-ink);font-weight:700}
.hi2{background:var(--hi-2)!important;color:var(--hi-ink)}
.hi1{background:var(--hi-1)!important}
.lo3{background:var(--lo-3)!important;color:var(--lo-ink);font-weight:700}
.lo2{background:var(--lo-2)!important;color:var(--lo-ink)}
.lo1{background:var(--lo-3b)!important}
.delta { font-size:12px; color:var(--ink-3); margin-left:5px; }

.pill { display:inline-block; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px; border:1px solid var(--line); color:var(--ink-3); }
.pill.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
.pill.same { background:#ECFDF5; border-color:#A7E8CB; color:#065F46; }
.pill.diff { background:#FEF2F2; border-color:#F6C6C6; color:#9B1C1C; }

.clausebtn { border:1px solid var(--line); background:#fff; color:var(--blue-2); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:7px; white-space:nowrap; }
.clausebtn:hover { background:var(--blue-bg); }

/* ── 차트 ────────────────────────────────────────────────────────────────── */
.charts { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.charts .full { grid-column:1/-1; }
.chart-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.chart-head h3 { margin:0; font-size:16.5px; font-weight:700; }
.chart-head span { font-size:13px; color:var(--ink-3); }
svg.chart { display:block; width:100%; height:auto; overflow:visible; }
svg.chart text { font-family:inherit; fill:var(--ink-2); }
svg.chart .ax { stroke:#DDE3EE; stroke-width:1; }
svg.chart .grid-l { stroke:#EFF2F7; stroke-width:1; }
.legend { display:flex; flex-wrap:wrap; gap:15px; margin-top:9px; font-size:13.5px; }
.legend i { display:inline-block; width:22px; height:0; border-top-width:3px; border-top-style:solid; vertical-align:middle; margin-right:6px; }

/* ── 모달 ────────────────────────────────────────────────────────────────── */
.mask { position:fixed; inset:0; background:rgba(9,17,38,.55); z-index:60; display:none; }
.mask.on { display:block; }
.modal {
  position:fixed; z-index:61; left:50%; top:50%; transform:translate(-50%,-50%);
  width:940px; max-width:calc(100vw - 60px); max-height:calc(100vh - 60px);
  background:#fff; border-radius:14px; box-shadow:0 24px 70px rgba(9,17,38,.42);
  display:none; flex-direction:column; overflow:hidden;
}
.modal.on { display:flex; }
.modal.wide { width:1120px; }
.modal > header { background:linear-gradient(120deg,#173A8F,#1D4ED8); color:#fff; padding:15px 20px; display:flex; align-items:center; gap:12px; }
.modal > header .ic { width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex:0 0 38px; }
.modal > header b { font-size:17px; }
.modal > header p { margin:1px 0 0; font-size:13px; color:#D3E1FF; }
.modal > header .x { margin-left:auto; background:transparent; border:0; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:0 4px; }
.modal .scroll { overflow-y:auto; padding:18px 20px; flex:1; }
.modal .foot { border-top:1px solid var(--line); padding:12px 20px 16px; }

/* AI 대화 */
#chat { min-height:180px; }
.msg { margin-bottom:14px; display:flex; }
.msg .bub { max-width:82%; padding:12px 16px; border-radius:13px; font-size:15.5px; line-height:1.72; white-space:pre-wrap; word-break:break-word; }
.msg.q { justify-content:flex-end; }
.msg.q .bub { background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
.msg.a .bub { background:#F3F5FA; border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.a .bub.err { background:#FEF2F2; border-color:#F6C6C6; color:#9B1C1C; }
.msg .who { font-size:11.5px; color:var(--ink-3); margin-bottom:3px; font-weight:700; }
.ctas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:11px; }
.cta { border:1px solid #BFD3FF; background:#F5F8FF; color:#1D4ED8; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600; padding:7px 13px; border-radius:20px; }
.cta:hover { background:#E4ECFF; }
.cta-group { font-size:12px; font-weight:800; color:var(--ink-3); width:100%; margin:5px 0 -2px; letter-spacing:.3px; }
.askrow { display:flex; gap:10px; align-items:center; }
.askrow input { flex:1; border:1px solid var(--line); border-radius:10px; padding:13px 16px; font-family:inherit; font-size:15.5px; outline:0; }
.askrow input:focus { border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.askrow button { width:46px; height:46px; border-radius:50%; border:0; background:var(--blue-2); color:#fff; cursor:pointer; font-size:17px; flex:0 0 46px; }
.askrow button:disabled { background:#B9C6DE; cursor:default; }
.ctx { font-size:12.5px; color:var(--ink-3); margin-bottom:9px; }

/* 약관 팝업 */
.clause-sec { border:1px solid var(--line); border-radius:11px; margin-bottom:14px; overflow:hidden; }
.clause-sec > h4 { margin:0; padding:11px 15px; background:#F5F7FB; border-bottom:1px solid var(--line-2); font-size:15px; display:flex; gap:9px; align-items:center; }
.clause-sec > h4 .co { font-weight:800; }
.clause-sec .src { font-size:12px; color:var(--ink-3); margin-left:auto; font-weight:500; }
.clause-sec .txt { padding:13px 16px; font-size:14.5px; line-height:1.8; color:var(--ink-2); white-space:pre-wrap; max-height:340px; overflow-y:auto; }
.clause-sec .txt mark { background:#FFF3BF; padding:0 2px; }
.diffbox { background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:10px; padding:13px 16px; margin-bottom:15px; font-size:15px; color:var(--warn-ink); }
.diffbox b { display:block; margin-bottom:5px; }
.diffbox ul { margin:6px 0 0; padding-left:19px; }
.diffbox li { margin:3px 0; }

/* ── 약관 보유현황 표 ────────────────────────────────────────────────────── */
table.grid.hold { font-size:15px; }
table.grid.hold td { padding:9px 12px; }
table.grid.hold tbody tr.base td { background:#F2F6FF; }
table.grid.hold tbody tr.base:hover td { background:#EAF0FF; }
.hbar { position:relative; height:22px; display:flex; align-items:center; }
.hbar i { position:absolute; left:0; top:3px; height:16px; border-radius:4px; background:#C9D8F2; }
.hbar b { position:relative; padding-left:9px; font-variant-numeric:tabular-nums; }
table.grid.hold tr.base .hbar i { background:#8FB0EA; }

/* ── 증거자료 카드 ───────────────────────────────────────────────────────── */
.ev-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px; }
.ev-card {
  border:1px solid var(--line); border-radius:13px; padding:20px 22px 18px;
  background:linear-gradient(180deg,#FBFCFE,#fff);
}
.ev-top { display:flex; gap:13px; align-items:center; margin-bottom:11px; }
.ev-ic {
  width:46px; height:46px; flex:0 0 46px; border-radius:11px;
  background:var(--blue); color:#fff; display:grid; place-items:center;
}
.ev-ic svg { width:23px; height:23px; }
.ev-top b { display:block; font-size:19px; font-weight:800; letter-spacing:-.3px; }
.ev-top span { display:block; font-size:13px; color:var(--ink-3); }
.ev-desc { font-size:15.5px; color:var(--ink-2); margin:0 0 15px; line-height:1.65; min-height:52px; }
.ev-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.ev-nums > div { background:var(--bg); border:1px solid var(--line-2); border-radius:9px; padding:10px 12px; }
.ev-nums label { display:block; font-size:11.5px; color:var(--ink-3); font-weight:700; }
.ev-nums b { font-size:22px; font-weight:800; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.ev-nums small { font-size:12.5px; font-weight:600; color:var(--ink-3); margin-left:1px; }
.ev-co-wrap { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.ev-co {
  display:flex; align-items:baseline; gap:6px; font-size:12.5px;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:4px 11px;
}
.ev-co span { color:var(--ink-2); font-weight:700; }
.ev-co b { font-variant-numeric:tabular-nums; }
.ev-co i { color:var(--ink-3); font-style:normal; }
.ev-btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--blue); color:#fff; text-decoration:none;
  padding:14px 18px; border-radius:10px; font-size:16px; font-weight:700;
  box-shadow:0 6px 18px rgba(30,64,175,.30);
}
.ev-btn:hover { filter:brightness(1.12); }
.ev-btn svg { width:19px; height:19px; }
.ev-btn.off { background:#E6EAF3; color:var(--ink-3); box-shadow:none; cursor:default; }
.ev-src { text-align:center; font-size:12px; color:var(--ink-3); margin-top:8px; }

.empty { padding:60px 20px; text-align:center; color:var(--ink-3); font-size:16px; }
.spin { display:inline-block; width:13px; height:13px; border:2px solid #C7D2EA; border-top-color:var(--blue-2); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; }
@keyframes sp { to { transform:rotate(360deg); } }

.tbl-simple { width:100%; border-collapse:collapse; font-size:15px; }
.tbl-simple th, .tbl-simple td { border-bottom:1px solid var(--line-2); padding:9px 12px; text-align:left; }
.tbl-simple th { background:#F5F7FB; font-weight:700; font-size:13.5px; color:var(--ink-2); }
.tbl-simple td.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ── 판매중 상품 펼치기 (2026-08-20) ─────────────────────────────────────
   숫자만 보여 주면 「무슨 상품인데요?」에 답을 못 한다. 숫자 옆에 실물을 둔다.
   ⚠ 글씨를 작게 만들지 말 것 — 소유자 규칙(본문 19px 이상, 숫자는 더 크게). */
.lnk-open {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--accent, #1f6feb);
  border-bottom: 2px dotted currentColor;
}
.lnk-open:hover { filter: brightness(1.15); }
.lnk-open.on { border-bottom-style: solid; }

tr.prod-panel > td { padding: 0 !important; background: var(--bg-2, #f6f8fa); }
.prod-box { padding: 14px 18px 18px; }
.prod-head { font-size: 19px; margin-bottom: 10px; }
.prod-head b { font-size: 21px; }
.prod-list { max-height: 460px; overflow: auto; border-radius: 10px; }
.prod-list table.mini { width: 100%; font-size: 17px; }
.prod-list table.mini th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-1, #fff); font-size: 16px; padding: 8px 10px;
}
.prod-list table.mini td { padding: 7px 10px; }
.prod-list table.mini tbody tr:nth-child(odd) { background: rgba(127,127,127,.06); }

/* 새 기능 안내 — 눈에 띄어야 한다. 소유자 지시 「굵은 글씨로 알려줘」 */
.newfeat {
  margin: 14px 0 4px; padding: 14px 18px;
  border: 2px solid var(--accent, #1f6feb); border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #1f6feb) 8%, transparent);
  font-size: 19px; line-height: 1.65;
}
.newfeat b { font-size: 20px; }
.newfeat-tag {
  display: inline-block; margin-right: 10px; padding: 3px 12px;
  border-radius: 999px; background: var(--accent, #1f6feb); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px;
}

/* ═══ 09-29 kactuary 옷 — 원래 콘솔 스타일 위에 덮는다 (콘솔다듬기.py) ═══ */
:root{--nav-1:#fff;--nav-2:#fff;--nav-line:#E5E8EB;--nav-ink:#4E5968;--nav-ink-dim:#8B95A1;--nav-accent:#3182F6;
 --bg:#F9FAFB;--card:#fff;--line:#E5E8EB;--line-2:#F2F4F6;--ink:#191F28;--ink-2:#4E5968;--ink-3:#8B95A1;
 --blue:#3182F6;--blue-2:#1B64DA;--blue-bg:#E8F3FF;
 --c-메리츠:#E4002B;--c-KB:#C98A00;--c-DB:#00875A;--c-삼성:#1428A0;--c-현대:#EA6A1F}
body{font-family:"Inter","Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;background:var(--bg);color:var(--ink);letter-spacing:-.01em}
#nav{background:#fff;border-right:1px solid var(--line)}
#nav::-webkit-scrollbar-thumb{background:#D1D6DB}
.kxlogo{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:20px 20px 18px;background:#fff;border-bottom:1px solid var(--line);color:#191F28;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em}
.kxlogo i{width:30px;height:30px;border-radius:8px;background:#3182F6;color:#fff;display:grid;place-items:center;font-style:normal;font-size:16px;font-weight:800}
.brand{border-bottom:1px solid var(--line)}
.brand b{color:#191F28}.brand span{color:#8B95A1}
.nav-label{color:#8B95A1}
.nav-item{color:#4E5968;border-left:0;margin:2px 10px;padding:10px 12px;border-radius:10px;font-weight:500}
.nav-item:hover{background:#F2F4F6;color:#191F28}
.nav-item.on{background:#E8F3FF;color:#1B64DA;font-weight:700}
.nav-foot{border-top:1px solid var(--line)}
.page-head h1{color:#191F28;letter-spacing:-.03em}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:none}
.seg button.on,.bigbtn.on{background:#3182F6;box-shadow:none}
.seg button:not(.on):hover{background:#F2F4F6}
table.grid thead th{background:#191F28}
table.grid thead tr.sub th{background:#333D4B}
table.grid thead th.prod{background:#4E5968;color:#E5E8EB}
table.grid tr.band td{background:#F2F4F6;color:#191F28}
table.grid .axis{background:#F9FAFB}
table.grid tr.sub td{background:#F9FAFB}
table.grid tr.tot td{background:#E8F3FF;border-top:2px solid #3182F6}
/* 09-29 밤 — 왼쪽 바 없이 비교표 한 장 */
#nav{display:none!important}
#main{margin:0 auto!important;max-width:1480px;padding-top:12px!important}
.kxtop{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.kxtop .in{max-width:1480px;margin:0 auto;padding:0 30px;height:60px;display:flex;align-items:center;gap:14px}
.kxtop .kxlogo{position:static;padding:0;border:0;background:none}
.kxtop small{color:#8B95A1;font-size:13px;font-weight:500}
#kxlang{top:12px!important}
/* 📚 맨 위 문서 단추 둘 (한국어 원문) — 숫자로 압도 */
#kxdocs{max-width:1480px;margin:20px auto 4px;padding:0 30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
#kxdocs a{display:block;padding:16px 22px;border:1px solid #D1D6DB;border-radius:16px;background:#fff;color:#191F28;text-decoration:none}
#kxdocs a:hover{border-color:#3182F6;background:#F5F9FF}
#kxdocs b{display:inline;font-size:34px;font-weight:800;letter-spacing:-.03em;color:#1B64DA;margin-right:8px}
#kxdocs span span{font-size:16px;font-weight:600;color:#191F28}
#kxdocs em{display:block;margin-top:4px;font-style:normal;font-size:13px;font-weight:500;color:#8B95A1}
html[lang=en] #kxdocs .ko,html[lang=ko] #kxdocs .en{display:none}
/* 📏 간단히 보기 — 왼쪽 두 칸(대표담보·세부세트)은 가로로 넘겨도 붙어 있다 */
table.grid{width:100%}
table.grid thead tr:first-child th:nth-child(1),table.grid td.axis{position:sticky;left:0;z-index:6;width:170px;min-width:170px!important;max-width:170px;white-space:normal}
table.grid thead tr:first-child th:nth-child(2),table.grid td.setn{position:sticky;left:170px;z-index:6;width:200px;min-width:200px!important;max-width:200px;white-space:normal;background:#fff;box-shadow:1px 0 0 var(--line)}
table.grid thead tr:first-child th:nth-child(1),table.grid thead tr:first-child th:nth-child(2){z-index:8;background:#191F28}
table.grid tr.sub td.setn{background:#F9FAFB}table.grid tr.tot td.setn{background:#E8F3FF}
table.grid thead th.prod{white-space:normal;font-size:11px;line-height:1.35;max-width:220px}
table.grid td.num[title]{cursor:help}
.plannote{margin-top:8px;max-width:560px;font-size:12.5px;line-height:1.5;color:#4E5968;background:#F2F4F6;border-radius:8px;padding:6px 10px}