:root{
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --pri:#16a34a;
  --pri2:#0ea5e9;
  --soft:#f1f5f9;
  --shadow: 0 12px 30px rgba(15,23,42,.08);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }

.sv-wrap{
  max-width: 980px; /* ✅ 1열에 최적 */
  margin: 0 auto;
  padding: 18px 14px 40px;
  color: var(--text);
}

/* hero */
.sv-hero{
  display:flex; gap:12px; align-items:center;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #e8f7ee 0%, #ecfeff 100%);
  border: 1px solid rgba(22,163,74,.18);
}
.sv-hero__icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 14px;
  background:#16a34a;
  color:#fff;
  box-shadow: 0 10px 18px rgba(22,163,74,.28);
}
.sv-title{ margin:0; font-size: 22px; letter-spacing:-.2px; }
.sv-sub{ margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ✅ stack layout */
.sv-stack{ display:grid; gap: 14px; margin-top: 14px; }

.sv-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.sv-card--soft{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.sv-card--result{
  border-color: rgba(22,163,74,.25);
}

.sv-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}
.sv-card__title{
  margin:0;
  font-size: 15px;
  display:flex; align-items:center; gap: 8px;
}
.sv-i{ display:inline-flex; align-items:center; justify-content:center; opacity:.9; }

.sv-chip{
  display:inline-flex; align-items:center; gap: 6px;
  font-size: 12px;
  color:#0f172a;
  background:#e0f2fe;
  border: 1px solid #bae6fd;
  padding: 6px 10px;
  border-radius: 999px;
  white-space:nowrap;
}

.sv-form{ padding: 14px 16px 16px; }
.sv-row{ padding: 10px 0; border-bottom: 1px dashed #eef2f7; }
.sv-row:last-child{ border-bottom:0; }

.sv-row--two{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px){
  .sv-row--two{ grid-template-columns: 1fr; }
}

.sv-label{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 10px; margin: 0 0 8px;
}
.sv-label__left{
  display:flex; align-items:center; gap: 8px;
  font-weight: 800; font-size: 13px;
}
.sv-hint{ font-size: 12px; color: var(--muted); margin-top: 1px; }

.sv-inputGroup{ position:relative; display:flex; align-items:center; }
.sv-inputGroup input{
  width:100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 52px 0 12px;
  font-size: 14px;
  outline: none;
  background:#fff;
}
.sv-inputGroup input:focus{
  border-color: rgba(14,165,233,.55);
  box-shadow: 0 0 0 4px rgba(14,165,233,.14);
}
.sv-suffix{
  position:absolute; right: 10px;
  height: 28px; display:grid; place-items:center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}

.sv-mini{ margin-top: 10px; }
.sv-mini input[type="range"]{ width:100%; }
.sv-mini__meta{
  display:flex; justify-content:space-between;
  color: var(--muted); font-size: 11px; margin-top: 4px;
}

.sv-btnRow{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sv-pill{
  border: 1px solid var(--line);
  background:#fff;
  color:#0f172a;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor:pointer;
}
.sv-pill:hover{ background:#f8fafc; }

.sv-seg{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.sv-seg input{ display:none; }
.sv-seg label{
  text-align:center;
  padding: 10px 10px;
  font-size: 13px;
  cursor:pointer;
  color: var(--muted);
}
.sv-seg input:checked + label{
  background: rgba(22,163,74,.10);
  color:#065f46;
  font-weight: 900;
}

.sv-checkRow{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-top: 10px; }
.sv-check{ display:flex; align-items:center; gap: 8px; font-size: 13px; cursor:pointer; }
.sv-check input{ width: 16px; height: 16px; }

.sv-linkBtn{
  border:0;
  background:transparent;
  color: var(--pri2);
  font-size: 13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
}
.sv-linkBtn:hover{ background: rgba(14,165,233,.08); }

.sv-adv{
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 10px;
}
.sv-adv__head{
  font-weight: 900;
  font-size: 13px;
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 8px;
}
.sv-adv__body{ margin-top: 10px; }
.sv-note{ margin-top: 8px; font-size: 12px; color: var(--muted); }

/* buttons */
.sv-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.sv-btn{
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:#fff;
  color:#0f172a;
  padding: 0 14px;
  font-size: 14px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.sv-btn:hover{ background:#f8fafc; }
.sv-btn--primary{
  background: var(--pri);
  border-color: rgba(22,163,74,.35);
  color:#fff;
}
.sv-btn--primary:hover{ filter: brightness(.98); }
.sv-btn--ghost{
  background: #0f172a;
  border-color: rgba(15,23,42,.25);
  color:#fff;
}
.sv-btn--ghost:hover{ filter: brightness(1.05); }

/* result */
.sv-resultBody{ padding: 14px 16px 16px; }
.sv-badge{
  font-family: var(--mono);
  font-size: 12px;
  color:#0f172a;
  background: #ecfeff;
  border: 1px solid #bae6fd;
  padding: 6px 10px;
  border-radius: 999px;
  white-space:nowrap;
}

.sv-kpis{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 560px){
  .sv-kpis{ grid-template-columns: 1fr; }
}
.sv-kpi{
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  background:#fff;
}
.sv-kpi__label{
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 6px;
}
.sv-kpi__value{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:-.2px;
}
.sv-kpi__sub{ margin-top: 4px; font-size: 12px; color: var(--muted); }
.sv-kpi--highlight{
  border-color: rgba(22,163,74,.35);
  box-shadow: 0 10px 18px rgba(22,163,74,.10);
}
.sv-kpi--warn{ border-color: rgba(245,158,11,.45); }

.sv-chart{
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background:#fff;
  padding: 10px;
}
.sv-chart__meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sv-chart__title{ font-weight: 900; font-size: 13px; }
.sv-chart__desc{ color: var(--muted); font-size: 12px; }
#balanceChart{ width:100%; height: 220px; display:block; }

.sv-details{
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background:#fff;
  overflow:hidden;
}
.sv-details summary{
  list-style:none;
  cursor:pointer;
  padding: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
}
.sv-details summary::-webkit-details-marker{ display:none; }
.sv-tableWrap{
  border-top: 1px solid #e2e8f0;
  max-height: 320px;
  overflow:auto;
}
.sv-table{ width:100%; border-collapse: collapse; font-size: 12px; }
.sv-table th, .sv-table td{
  padding: 10px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.sv-table th{
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
  text-align:left;
}
.t-right{ text-align:right; font-variant-numeric: tabular-nums; }

/* guide/info section body */
.sv-sectionBody{ padding: 14px 16px 16px; }
.sv-list{
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.65;
}
.sv-list b{ color:#065f46; }
.sv-callout{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  border-radius: 14px;
  padding: 10px;
  background: #f0fdf4;
  border: 1px solid rgba(22,163,74,.25);
}
.sv-callout__icon{ font-size: 18px; }
.sv-callout__text{ font-size: 12.5px; color:#064e3b; }

.sv-infoBlock{ margin-bottom: 14px; }
.sv-infoBlock__title{ font-weight: 900; font-size: 13px; margin-bottom: 6px; }
.sv-infoBlock__text{ margin:0; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.sv-divider{ height:1px; background: var(--line); margin: 12px 0; }

.sv-bullets{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.sv-tags{ display:flex; flex-wrap:wrap; gap: 8px; }
.sv-tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color:#0f172a;
}
.sv-tag--blue{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; }
.sv-tag--purple{ background:#faf5ff; border-color:#e9d5ff; color:#5b21b6; }
.sv-tag--green{ background:#f0fdf4; border-color:#bbf7d0; color:#065f46; }

/* Toast */
.sv-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(420px, calc(100% - 32px));
  display:flex;
  gap: 12px;
  align-items:flex-start;
  background:#0f172a;
  color:#fff;
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  z-index: 9999;
}
.sv-toast__icon{ margin-top: 2px; }
.sv-toast__title{ font-weight: 900; }
.sv-toast__desc{ font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.45; }
.sv-toast__close{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#fff;
  font-size: 18px;
  cursor:pointer;
  opacity:.85;
}
.sv-toast__close:hover{ opacity:1; }

/* Modal */
.sv-modal{ position: fixed; inset: 0; z-index: 9998; }
.sv-modal__backdrop{ position:absolute; inset:0; background: rgba(15,23,42,.55); }
.sv-modal__panel{
  position: relative;
  width: min(560px, calc(100% - 28px));
  margin: 8vh auto 0;
  background:#fff;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  overflow:hidden;
}
.sv-modal__head{
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  display:flex; align-items:center; justify-content:space-between;
}
.sv-modal__title{ font-weight: 900; }
.sv-modal__x{ border:0; background:transparent; font-size: 18px; cursor:pointer; opacity:.8; }
.sv-modal__x:hover{ opacity:1; }
.sv-modal__body{ padding: 14px; }
.sv-modal__foot{
  padding: 12px 14px;
  border-top: 1px solid #e2e8f0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}