:root {
  color-scheme: light;
  --svi-red: #c8202a;
  --svi-red-dark: #a01720;
  --svi-red-soft: #fbe9ea;
  --svi-navy: #22262c;
  --svi-navy-2: #2c3138;
  --svi-page-bg: #f2f1ec;
  --svi-border: #ddd8cc;
  --svi-text: #1a1a18;
  --svi-muted: #5c5748;
  --svi-field-bg: #ececec;
}
body { margin:0; padding:0; background:var(--svi-page-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.svi-root { color: var(--svi-text); }
.svi-root * { box-sizing: border-box; }

/* ---------- top nav ---------- */
.svi-topnav { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 28px; background:#fff; border-bottom:1px solid #eee6df; }
.svi-logo { display:flex; align-items:center; gap:9px; }
.svi-logo .mark { width:30px; height:30px; border-radius:7px; background:var(--svi-red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svi-logo .mark svg { display:block; }
.svi-logo .word { font-size:15px; font-weight:700; letter-spacing:-0.2px; color:var(--svi-text); }
.svi-logo .sub { font-size:10.5px; color:var(--svi-muted); margin-top:-1px; }
.svi-topnav nav { display:flex; gap:6px; flex-wrap:wrap; }
.svi-tabbtn { border:none; background:none; padding:9px 14px; border-radius:6px; font-size:13.5px; font-weight:600; cursor:pointer; color:#54544e; border-bottom:2.5px solid transparent; }
.svi-tabbtn:hover { color:var(--svi-red); background:var(--svi-red-soft); }
.svi-tabbtn.active { color:var(--svi-red); border-bottom-color:var(--svi-red); background:none; }

/* ---------- section bar (red) ---------- */
.svi-section-bar { background:var(--svi-red); color:#fff; padding:18px 28px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:8px; }
.svi-section-bar .label { font-size:11.5px; opacity:.85; margin-bottom:3px; letter-spacing:.2px; }
.svi-section-bar .title { font-size:21px; font-weight:700; letter-spacing:-0.2px; }
.svi-section-bar .crumb { font-size:12px; opacity:.9; }

/* ---------- page container ---------- */
.svi-wrap { max-width:1180px; margin:0 auto; padding:22px 24px 40px; }

/* ---------- overview stat row ---------- */
.svi-badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:500; }
.svi-stat { background:#fff; border:1px solid var(--svi-border); border-radius:10px; padding:12px 14px; }
.svi-stat .n { font-size:22px; font-weight:700; color:var(--svi-text); }
.svi-stat .l { font-size:12px; color:var(--svi-muted); margin-top:2px; }

/* ---------- panel (card with dark header) ---------- */
.svi-panel { background:#fff; border-radius:10px; border:1px solid var(--svi-border); box-shadow:0 1px 3px rgba(20,20,15,.05); overflow:hidden; margin-bottom:18px; }
.svi-panel-head { background:var(--svi-navy); color:#fff; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.svi-panel-head .h { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; }
.svi-panel-head .h .check { width:20px; height:20px; border-radius:50%; background:var(--svi-red); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.svi-panel-head .wordmark { font-size:11px; letter-spacing:1px; color:#9a9da2; opacity:.7; font-weight:600; }
.svi-panel-body { padding:20px 22px; }

/* ---------- indicator explorer layout (sidebar stepper + main) ---------- */
.svi-ind-layout { display:flex; gap:26px; align-items:flex-start; }
.svi-stepper { width:190px; flex-shrink:0; }
.svi-stepper .step { display:flex; align-items:flex-start; gap:10px; padding:0 4px 20px; position:relative; cursor:pointer; }
.svi-stepper .step:last-child { padding-bottom:2px; }
.svi-stepper .step::before { content:''; position:absolute; left:10px; top:22px; bottom:0; width:1px; background:#e4e0d4; }
.svi-stepper .step:last-child::before { display:none; }
.svi-stepper .step .dot { width:21px; height:21px; border-radius:50%; border:2px solid #d6d1c2; background:#fff; color:#9a9585; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; flex-shrink:0; z-index:1; }
.svi-stepper .step .label { font-size:12.5px; color:#726d5e; line-height:1.4; padding-top:2px; }
.svi-stepper .step:hover .label { color:var(--svi-text); }
.svi-stepper .step.active .dot { border-color:var(--svi-red); background:var(--svi-red); color:#fff; }
.svi-stepper .step.active .label { color:var(--svi-red); font-weight:700; }
.svi-stepper .step.done .dot { border-color:#2c5a3a; background:#2c5a3a; color:#fff; }
.svi-ind-main { flex:1; min-width:0; }

/* ---------- form controls ---------- */
.svi-input, .svi-select { height:36px; border:1px solid var(--svi-border); border-radius:7px; padding:0 11px; font-size:13px; background:#fff; color:var(--svi-text); }
.svi-input:focus, .svi-select:focus { outline:none; border-color:var(--svi-red); box-shadow:0 0 0 3px var(--svi-red-soft); }
.svi-btn-primary { background:var(--svi-red); color:#fff; border:none; border-radius:7px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; }
.svi-btn-primary:hover { background:var(--svi-red-dark); }
.svi-btn-primary:disabled { opacity:.55; cursor:default; }

/* ---------- indicator list / detail ---------- */
.svi-card { background:#fff; border: 1px solid var(--svi-border); border-radius: 10px; padding: 1rem 1.25rem; }
.svi-ind-row { border:1px solid var(--svi-border); border-radius:10px; padding:12px 15px; margin-bottom:8px; cursor:pointer; }
.svi-ind-row:hover { border-color:#c9a9a9; }
.svi-ind-row.svi-ind-row-active { border-color:var(--svi-red); box-shadow:0 0 0 1px var(--svi-red); }
.svi-detail { border-top:1px solid var(--svi-border); margin-top:10px; padding-top:10px; font-size:13px; line-height:1.6; display:none; }
.svi-detail.open { display:block; }
.svi-chip { display:inline-block; background:#f4f1e8; color:var(--svi-muted); font-size:11px; padding:3px 8px; border-radius:6px; margin:2px 4px 2px 0; }
.svi-copybtn { border:1px solid var(--svi-border); background:#fff; font-size:11px; padding:2px 8px; border-radius:6px; cursor:pointer; margin-left:6px; color:var(--svi-muted); }
.svi-copybtn:hover { border-color:var(--svi-red); color:var(--svi-red); }

table.svi-table { width:100%; border-collapse:collapse; font-size:12.5px; }
table.svi-table th { text-align:left; border-bottom:1px solid var(--svi-border); padding:8px; color:var(--svi-muted); font-weight:600; position:sticky; top:0; background:#fff; }
table.svi-table td { border-bottom:1px solid #eee9db; padding:9px 8px; vertical-align:top; }
table.svi-table tr:hover td { background:#faf8f2; }

.svi-note { font-size:12px; color:var(--svi-muted); line-height:1.6; }
.svi-bar-outer { height:8px; background:#eee9db; border-radius:4px; overflow:hidden; display:flex; }

/* ---------- 증빙 첨부/검증 ---------- */
.svi-ev-upload-btn { border:1px solid var(--svi-border); background:#fff; font-size:11.5px; padding:3px 9px; border-radius:6px; cursor:pointer; color:var(--svi-muted); }
.svi-ev-upload-btn:hover { border-color:var(--svi-red); color:var(--svi-red); }
.svi-ev-remove { border:none; background:none; color:var(--svi-red); font-size:11px; cursor:pointer; padding:0 0 0 4px; text-decoration:underline; }
.svi-ev-badge { display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.svi-ev-badge-none { background:#f4f1e8; color:var(--svi-muted); }
.svi-ev-badge-wait { background:#fdeecb; color:#7a4e0a; }
.svi-ev-badge-ok { background:#e2ede0; color:#2c5a3a; }
.svi-ev-badge-risk { background:#fbe0e0; color:#a12c2c; }
.svi-ev-warnings { margin-top:8px; background:#fbe0e0; border:1px solid #e3a3a3; border-radius:8px; padding:8px 12px; }
.svi-ev-warning-line { font-size:12px; color:#a12c2c; line-height:1.6; }

/* ---------- calculator ---------- */
.svi-calc-card { border:1px solid var(--svi-border); border-radius:10px; padding:16px; margin-bottom:14px; }
.svi-calc-card h4 { margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--svi-text); }
.svi-calc-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; align-items:center; }
.svi-calc-row label { font-size:12px; color:var(--svi-muted); min-width:150px; }
.svi-calc-result { background:#eef4ee; border-radius:8px; padding:9px 12px; font-size:13px; margin-top:8px; }
.svi-calc-result b { color:#2c5a3a; }
.svi-input.svi-autofill { background:#fffaf0; border-color:#e3b558; }
.svi-autofill-tag { display:inline-block; background:#fdeecb; color:#7a4e0a; font-size:10.5px; padding:1px 6px; border-radius:6px; margin-left:6px; white-space:nowrap; }
.svi-upload-result { font-size:12px; color:var(--svi-muted); line-height:1.6; }
.svi-upload-result ul { margin:4px 0 0 16px; padding:0; }

@media (max-width: 760px) {
  .svi-ind-layout { flex-direction:column; }
  .svi-stepper { width:100%; display:flex; flex-wrap:wrap; gap:0 14px; }
  .svi-stepper .step { padding-bottom:10px; }
  .svi-stepper .step::before { display:none; }
}