:root{
  --bg:#0f1420; --panel:#171e2e; --panel-2:#1e2740; --line:#2a3350;
  --ink:#e8ecf5; --ink-dim:#9aa6c2; --ink-mute:#6b7796;
  --accent:#4f8cff; --accent-2:#7aa7ff; --ok:#37c98a; --warn:#f5a623; --danger:#ff6b6b;
  --badge-s:#5b8def; --badge-m:#37c98a; --badge-l:#f5a623; --badge-xl:#ff6b6b;
  --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.35);
  --font:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}

.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:baseline;gap:12px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.5px;color:#fff}
.logo-sq{color:var(--accent)}
.brand-sub{color:var(--ink-dim);font-size:13px}
.provider-pill{font-size:12px;padding:5px 11px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--ink-dim)}
.provider-pill.live{color:var(--ok);border-color:var(--ok)}
.provider-pill.offline{color:var(--ink-mute)}

.layout{display:grid;grid-template-columns:400px 1fr;gap:20px;padding:20px;max-width:1280px;margin:0 auto;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.input-panel{position:sticky;top:78px}
.panel-title{margin:0 0 4px;font-size:16px}
.panel-hint{margin:0 0 16px;color:var(--ink-dim);font-size:13px}

.field{margin-bottom:16px}
.field.hidden{display:none}
.field>label{display:block;font-size:13px;font-weight:600;color:var(--ink-dim);margin-bottom:7px}
.options{display:flex;flex-wrap:wrap;gap:6px}
.options .opt{flex:1 1 calc(20% - 6px);min-width:60px}
.options.wide{display:grid;grid-template-columns:1fr 1fr}
.options.wide .opt{flex:none}
.opt{padding:9px 6px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;cursor:pointer;font-size:13px;transition:.12s;font-family:inherit}
.opt:hover{border-color:var(--accent-2)}
.opt.sel{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.sep{border:none;border-top:1px solid var(--line);margin:18px 0}

.actions{display:flex;gap:10px;margin-top:20px}
.btn{padding:11px 18px;border-radius:9px;border:1px solid var(--line);cursor:pointer;
  font-size:14px;font-weight:600;font-family:inherit;transition:.12s}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;flex:1}
.btn-primary:hover{background:#3f7ae8}
.btn-ghost{background:transparent;color:var(--ink-dim)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-mute)}
.btn-sm{padding:6px 12px;font-size:12px;font-weight:600}
.form-error{color:var(--danger);font-size:13px;margin-top:10px}

.empty-state{text-align:center;color:var(--ink-mute);padding:80px 20px}
.empty-ico{font-size:48px;margin-bottom:14px}
.hidden{display:none}

/* 결과 */
.result-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.result-head h2{margin:0;font-size:20px}
.badges{display:flex;gap:8px}
.badge{font-size:13px;font-weight:800;padding:6px 14px;border-radius:999px;color:#fff}
.badge-tier{background:var(--badge-m)}
.badge-tier[data-t="XS"]{background:#6b7796}
.badge-tier[data-t="XXL"]{background:#8b5cf6}
.badge-tier[data-t="S"]{background:var(--badge-s)}
.badge-tier[data-t="M"]{background:var(--badge-m)}
.badge-tier[data-t="L"]{background:var(--badge-l)}
.badge-tier[data-t="XL"]{background:var(--badge-xl)}
.badge-case{background:#5566aa}
.tier-target{color:var(--ink-dim);font-size:13px;margin:2px 0 12px}

.scaleout-banner{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.5);
  border-radius:8px;padding:11px 14px;font-size:12.5px;color:#c4b5fd;margin:0 0 12px;line-height:1.5}
.scaleout-banner b{color:#ddd6fe}
.scaleout-banner div{margin-top:4px;color:#b8a8e8}
.demo-banner{background:rgba(107,119,150,.12);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;font-size:12.5px;color:var(--ink-dim);margin:0 0 12px;line-height:1.5}
.demo-banner.warn{background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.4);color:#f5c877}

.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media(max-width:520px){.spec-grid{grid-template-columns:1fr}}
.spec-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px}
.spec-card .k{font-size:12px;color:var(--ink-mute);margin-bottom:4px}
.spec-card .v{font-size:19px;font-weight:800}
.spec-card .sub{font-size:12px;color:var(--ink-dim);margin-top:3px}

.section-h{font-size:14px;font-weight:700;margin:20px 0 10px;color:var(--accent-2);
  display:flex;align-items:center;justify-content:space-between}

.bom{width:100%;border-collapse:collapse;font-size:13px}
.bom th,.bom td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.bom th{color:var(--ink-mute);font-weight:600;font-size:12px}
.bom td.num,.bom th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bom tr:hover td{background:rgba(255,255,255,.02)}
.bom .est{color:var(--warn);font-size:11px;margin-left:4px}
.bom .live-price{color:var(--ok);font-weight:700}
.bom .live-price.warn-price{color:var(--warn)}
.bom .live-old{color:var(--ink-mute);text-decoration:line-through;font-size:11px;margin-right:5px}
.bom .live-tag{display:inline-block;font-size:10px;font-weight:700;color:var(--ok);
  border:1px solid var(--ok);border-radius:4px;padding:0 4px;vertical-align:middle}
.bom .dn-link.sub{color:var(--ink-mute);margin-left:6px}
.bom td.c-spec{max-width:340px}
.spec-main{font-weight:600}
.rec-chip{font-size:10px;font-weight:700;color:var(--accent-2);border:1px solid var(--accent-2);
  border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:middle}
.req{font-size:11px;color:var(--ink-mute);margin-top:3px;line-height:1.35}
.c-price .price-val{font-variant-numeric:tabular-nums}
.c-price .price-lbl{font-size:10px;color:var(--ink-mute);margin-top:2px}
.bom-hint{font-size:12px;color:var(--ink-dim);margin:0 0 10px;line-height:1.5}

.no-match{color:var(--ink-mute);font-size:11px}

/* 대안 토글 & 서브행 */
.alt-toggle{background:var(--panel-2);border:1px solid var(--line);color:var(--accent-2);
  border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.alt-toggle:hover{border-color:var(--accent-2)}
.alt-row{display:none}
.alt-row.open{display:table-row}
.alt-wrap{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:2px 0 6px}
.alt-cap{font-size:11px;color:var(--ink-mute);margin-bottom:6px}
.alt-table{width:100%;border-collapse:collapse;font-size:12px}
.alt-table td{padding:5px 8px;border-bottom:1px solid var(--line)}
.alt-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.alt-name{color:var(--ink-dim)}
.alt-mall{color:var(--ink-mute);white-space:nowrap}
.alt-price{font-weight:700}
.role{display:inline-block;font-size:9px;font-weight:800;padding:1px 5px;border-radius:4px;margin-right:6px;color:#fff}
.role.rec{background:var(--accent)}
.role.save{background:var(--ok)}
.role.prem{background:var(--badge-l)}

/* 우려사항 */
.concerns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
@media(max-width:640px){.concerns{grid-template-columns:1fr}}
.concern-block{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.concern-head{font-size:12px;font-weight:700;color:var(--accent-2);margin-bottom:5px}
.concern-block ul{margin:0;padding-left:16px}
.concern-block li{font-size:11.5px;color:var(--ink-dim);margin:3px 0;line-height:1.4}
.bom .dn-link{color:var(--accent-2);text-decoration:none;font-size:11px;white-space:nowrap}
.bom .dn-link:hover{text-decoration:underline}
.bom tfoot td{font-weight:800;border-top:2px solid var(--line);border-bottom:none;padding-top:12px}
.bom .row-add td{color:var(--accent-2)}
.bom .grand td{font-size:16px;color:#fff}

.reason{background:var(--panel-2);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:12px 14px;font-size:13px;color:var(--ink-dim);margin:16px 0}
.reason b{color:var(--ink)}

.warn-banner{background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.4);
  border-radius:8px;padding:12px 14px;font-size:12.5px;color:#f5c877;margin:14px 0}
.warn-banner ul{margin:6px 0 0;padding-left:18px}
.warn-banner li{margin:3px 0}

.result-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

.phys-note{font-size:12px;color:var(--ink-dim);margin:4px 0}

/* 인쇄 */
@media print{
  :root{--bg:#fff;--panel:#fff;--panel-2:#f4f6fb;--line:#d5dbe8;
    --ink:#111;--ink-dim:#444;--ink-mute:#777}
  body{font-size:12px}
  .topbar{position:static;box-shadow:none;border-bottom:2px solid #111}
  .provider-pill{display:none}
  .input-panel,.result-actions,.empty-state,#refreshBtn,.alt-toggle{display:none!important}
  .concerns{grid-template-columns:1fr 1fr}
  .spec-card,.bom,.reason,.warn-banner,.concern-block{break-inside:avoid}
  .layout{display:block;max-width:none;padding:0}
  .panel{box-shadow:none;border:none;padding:0}
  .spec-card,.bom,.reason,.warn-banner{break-inside:avoid}
  .brand-sub::after{content:" — 견적 제안서"}
  a[href]::after{content:""}
}