:root{
  --bg:#eef1f6; --card:#ffffff; --ink:#1a2230; --ink-soft:#5b6678; --line:#e2e7f0;
  --brand:#2f54eb; --brand-d:#1d39c4; --brand-soft:#eaf0ff;
  --good:#0f8a5f; --warn:#c2410c; --bad:#d4380d;
  --shadow:0 1px 2px rgba(20,30,50,.06),0 8px 24px rgba(20,30,50,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
.app{max-width:780px;margin:0 auto;padding:0 16px 64px}

/* Header */
.hd{padding:30px 0 16px}
.hd h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tab{flex:1 1 130px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  font-family:inherit;font-size:14px;font-weight:700;padding:13px 8px;border-radius:12px;cursor:pointer;transition:.15s}
.tab:hover{border-color:#c7d0e0}
.tab.is-active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--shadow)}

/* Panels */
.panel{display:none}
.panel.is-active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.form-card{margin-bottom:18px}

/* Fields */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.hint{color:var(--ink-soft);font-weight:500;font-size:11.5px}
select,input[type=text]{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;outline:none;transition:.15s}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6678' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,84,235,.12)}
.won-input{position:relative;display:flex;align-items:center}
.won-input input{padding-right:42px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.won-input span{position:absolute;right:12px;color:var(--ink-soft);font-size:13px;pointer-events:none}
.readout{border:1px dashed var(--line);border-radius:10px;padding:11px 12px;background:#f7f9fc;
  text-align:right;font-weight:700;color:var(--brand-d);font-variant-numeric:tabular-nums}

/* Combobox (검색+드롭다운) */
.combo{position:relative}
.combo-input{padding-right:32px!important;cursor:text}
.combo-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:12px;pointer-events:none}
.combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 24px rgba(20,30,50,.14);max-height:260px;overflow:auto;z-index:30;display:none;padding:5px}
.combo.open .combo-list{display:block}
.combo.open .combo-caret{transform:translateY(-50%) rotate(180deg)}
.combo-opt{padding:10px 11px;border-radius:8px;cursor:pointer;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.combo-opt:hover,.combo-opt.active{background:var(--brand-soft)}
.combo-opt .opt-rate{font-size:11.5px;color:var(--ink-soft);font-weight:700;font-variant-numeric:tabular-nums}
.combo-opt.is-selected{font-weight:800;color:var(--brand-d)}
.combo-empty{padding:12px;color:var(--ink-soft);font-size:13px;text-align:center}

/* Segmented */
.seg{display:flex;background:#f1f4f9;border-radius:10px;padding:4px;gap:4px}
.seg-btn{flex:1;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-soft);
  padding:9px 8px;border-radius:7px;cursor:pointer;transition:.15s}
.seg-btn.is-active{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(20,30,50,.12)}

/* Help tooltip (? 아이콘) */
.help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:#dde3ee;color:#56627a;font-size:11px;font-weight:800;cursor:pointer;
  user-select:none;flex:0 0 auto;outline:none;transition:.15s}
.help:hover{background:var(--brand);color:#fff}
.help .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:260px;background:#1f2937;color:#f3f5f9;font-size:12px;font-weight:500;line-height:1.55;
  text-align:left;padding:10px 12px;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transition:.12s;z-index:50;pointer-events:none;white-space:normal}
.help .tip b{color:#fff;font-weight:700}
.help .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#1f2937}
.help:hover .tip,.help:focus .tip,.help.show .tip{opacity:1;visibility:visible}
@media (max-width:560px){.help .tip{max-width:200px;left:auto;right:-4px;transform:none}
  .help .tip::after{left:auto;right:8px;transform:none}}

/* Preset note */
.preset-note{font-size:12.5px;color:var(--ink-soft);background:#f7f9fc;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.55;display:none}
.preset-note.show{display:block}
.badge{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px;margin-right:6px;vertical-align:1px}
.badge.verified{background:#dcfce7;color:#15803d}
.badge.estimated{background:#fef9c3;color:#a16207}
.badge.manual,.badge.reference,.badge.pending{background:#e5e7eb;color:#4b5563}

/* Advanced */
.adv{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.adv summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--brand);padding:8px 0;list-style:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"⊕ ";font-weight:700}
.adv[open] summary::before{content:"⊖ "}
.chk-box{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;transition:.15s}
.chk-box:hover{border-color:#c7d0e0}
.chk-box input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex:0 0 auto;margin:0}
.chk-box:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-d)}

/* Calc button */
.calc-btn{width:100%;margin-top:20px;border:none;background:var(--brand);color:#fff;
  font-family:inherit;font-size:16px;font-weight:800;padding:15px;border-radius:12px;cursor:pointer;
  transition:.15s;box-shadow:0 6px 16px rgba(47,84,235,.28)}
.calc-btn:hover{background:var(--brand-d)}
.calc-btn:active{transform:translateY(1px)}

/* Result */
.result-card{padding:0;overflow:hidden}
.res-head{background:linear-gradient(135deg,#1d39c4,#2f54eb);color:#fff;padding:22px 24px}
.res-head .res-label{font-size:13px;opacity:.85;font-weight:600}
.res-head .res-total{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.res-head .res-total small{font-size:18px;font-weight:700;margin-left:2px}
.res-head .res-refund{color:#bbf7d0}
.res-body{padding:8px 24px 22px}
.res-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;gap:12px}
.res-row:last-child{border-bottom:none}
.res-row .rk{color:var(--ink-soft);display:flex;flex-direction:column;gap:3px;min-width:0}
.res-row .rk .rk-top{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:600}
.res-row .rk small{font-size:11.5px;opacity:.9;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.res-row .rv{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.res-row.minus .rv{color:var(--good)}
.res-row.sum{border-top:2px solid var(--ink);border-bottom:none;margin-top:4px;padding-top:14px}
.res-row.sum .rk .rk-top{font-weight:800;font-size:15.5px}
.res-row.sum .rv{font-size:18px;color:var(--brand-d)}

/* 계산 과정 steps */
.calc-steps{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.calc-steps-h{background:#f1f4f9;padding:11px 14px;font-size:13px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:6px}
.step{padding:12px 14px;border-top:1px solid var(--line);font-size:13px}
.step:first-of-type{border-top:none}
.step .st-t{font-weight:700;color:var(--ink);margin-bottom:5px;display:flex;gap:6px}
.step .st-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:5px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:0 5px}
.step .formula{font-family:"Pretendard",monospace;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;color:#243; font-size:12.5px;line-height:1.7;word-break:break-all;font-variant-numeric:tabular-nums}
.step .formula b{color:var(--brand-d);font-weight:800}
.step .st-note{margin-top:6px;font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.res-meta{margin-top:14px;font-size:12px;color:var(--ink-soft);line-height:1.6;background:#f7f9fc;border-radius:10px;padding:11px 13px}
.res-meta .mk{font-weight:700;color:var(--ink)}
.res-warn{color:var(--warn);font-weight:600}

/* 요율표 */
.rates-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.rates-title{margin:0;font-size:19px;font-weight:800}
.rates-desc{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.reset-btn{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-family:inherit;
  font-size:12.5px;font-weight:700;padding:9px 13px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap}
.reset-btn:hover{border-color:var(--brand);color:var(--brand)}
.rates-wrap{overflow-x:auto;margin:0 -4px}
.rates-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rates-table th,.rates-table td{padding:10px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;vertical-align:middle}
.rates-table th:last-child,.rates-table td:last-child{border-right:none}
.rates-table tbody tr:last-child td{border-bottom:1px solid var(--line)}
.rates-table th{font-size:11.5px;font-weight:700;color:var(--ink-soft);background:#f7f9fc;position:sticky;top:0}
.th-hint{font-weight:500;opacity:.8}
.rates-table td:first-child{font-weight:700;white-space:nowrap}
.rate-cell{width:84px;white-space:nowrap}
.rate-cell input{width:50px;text-align:center;padding:7px 6px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.rate-cell .pct{color:var(--ink-soft);font-size:12px;margin-left:3px}
.rate-cell input.edited{border-color:var(--brand);background:var(--brand-soft)}
.cell-formula{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.lg.custom{background:#e0e7ff;color:#3730a3}
/* 캐피탈사 추가 행 */
.add-row td{background:#f7f9fc}
#add-name{width:100%;text-align:center;padding:8px 9px;font-size:13px;font-weight:600}
.add-btn{border:none;background:var(--brand);color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;
  padding:9px 14px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
.add-btn:hover{background:var(--brand-d)}
.del-co{border:none;background:transparent;color:#b9c0cd;font-size:13px;cursor:pointer;margin-left:7px;
  padding:2px 6px;border-radius:6px;transition:.15s;vertical-align:middle;line-height:1}
.del-co:hover{background:#fee2e2;color:#dc2626}
/* 숫자 입력 스피너 제거(혹시 모를 type=number 대비) */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.cell-na{color:#c0c6d2}
.lg{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px}
.lg.verified{background:#dcfce7;color:#15803d}
.lg.estimated{background:#fef9c3;color:#a16207}
.rates-legend{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--ink-soft)}
.rates-legend b{margin-right:4px}

/* 근거·검증자료 */
.refs-card{margin-top:18px}
.ref-block{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.ref-block:first-of-type{border-top:none;padding-top:4px}
.ref-h{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:9px}
.ref-formula{background:var(--brand-soft);border:1px solid #cdd9ff;border-radius:10px;padding:13px 14px;
  font-size:14px;color:var(--brand-d);text-align:center;font-weight:600}
.ref-formula b{font-weight:800}
.ref-note{margin:9px 0 0;font-size:12px;color:var(--ink-soft);line-height:1.6}
.ref-note b{color:var(--ink);font-weight:700}
.ref-table-wrap{overflow-x:auto}
.ref-table{width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ref-table th,.ref-table td{padding:9px 11px;border:1px solid var(--line);text-align:left;vertical-align:middle}
.ref-table th{background:#f7f9fc;font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.ref-table td:first-child{font-weight:800;color:var(--brand-d);white-space:nowrap;text-align:center;width:74px}
.ref-links{margin:4px 0 0;padding-left:18px}
.ref-links li{margin:7px 0;font-size:13px;line-height:1.5}
.ref-links a{color:var(--brand);text-decoration:none;font-weight:600}
.ref-links a:hover{text-decoration:underline}

@media (max-width:560px){
  .hd h1{font-size:22px}
  .tab{font-size:13px;padding:12px 5px}
  .field-row,.field-grid{grid-template-columns:1fr}
  .res-head .res-total{font-size:28px}
  .card{padding:18px}
}