/* ============================================================
   실효비용 미터 — 계기(instrument) 인터페이스
   색은 장식이 아니라 정보입니다.
   teal=정책자금 / amber=은행 / coral=캐피탈 / violet=수수료
   violet은 UI 상호작용 색도 겸합니다(포커스·활성).
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.6/index.css");

:root{
  --bg:#0E1218;
  --bg-lift:#141922;
  --surface:#171D26;
  --surface-2:#1D2430;
  --line:#28303C;
  --line-soft:#1E2530;

  --text:#E7EAEF;
  --text-2:#8C96A5;
  --text-3:#5B6573;

  --policy:#5FD3BC;
  --bank:#E8B84E;
  --cap:#F0705F;
  --fee:#A88BFF;
  --alert:#FF6B6B;

  --ui:#A88BFF;
  --ui-dim:rgba(168,139,255,.16);

  --sans:"Wanted Sans Variable","Wanted Sans",-apple-system,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Geist Mono Variable","Geist Mono",ui-monospace,"SFMono-Regular",monospace;

  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  font-size:15px;line-height:1.55;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 68% -8%, rgba(168,139,255,.07), transparent 62%),
    radial-gradient(700px 420px at 8% 6%, rgba(95,211,188,.05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  padding:22px 20px 64px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) .5px, transparent .5px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}
.shell{max-width:1240px;margin:0 auto;position:relative;z-index:1}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── 마이크로 라벨 ── */
.tag{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}

/* ══ 헤더 ══ */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--policy);
  box-shadow:0 0 0 3px rgba(95,211,188,.14);
  animation:blip 2.6s var(--ease) infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.32}}
.brand h1{font-size:17px;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.brand p{font-size:12px;color:var(--text-2);margin-top:2px}

.slots{display:flex;gap:8px;flex-wrap:wrap}
.slot{display:flex;flex-direction:column;gap:4px}
.slot input{
  font-family:var(--mono);font-size:13px;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 9px;width:136px;
}
.slot input::placeholder{color:var(--text-3)}
.slot input:focus{outline:none;border-color:var(--ui);box-shadow:0 0 0 3px var(--ui-dim)}

/* ══ 레이아웃 ══ */
.layout{display:grid;grid-template-columns:344px 1fr;gap:20px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr}}

/* ══ 모듈 ══ */
.mod{
  background:linear-gradient(180deg,var(--bg-lift),var(--surface));
  border:1px solid var(--line);border-radius:6px;
  padding:18px;margin-bottom:18px;
}
.mod:last-child{margin-bottom:0}
.mod > header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mod > header .tag{white-space:nowrap}
.mod > header::after{content:"";flex:1;height:1px;background:var(--line)}
.dot{width:5px;height:5px;background:var(--ui);border-radius:1px;flex:none}

/* ══ 입력 ══ */
.f{margin-bottom:15px}
.f:last-child{margin-bottom:0}
.f > label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--text-2);margin-bottom:6px;
}
.f > label b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text-3)}
.inp{position:relative;display:flex;align-items:center}
.inp input{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);
  padding:9px 42px 9px 11px;font-variant-numeric:tabular-nums;
}
.inp input:focus{outline:none;border-color:var(--ui);box-shadow:0 0 0 3px var(--ui-dim)}
.inp .unit{
  position:absolute;right:11px;font-family:var(--mono);font-size:11.5px;color:var(--text-3);
  pointer-events:none;letter-spacing:.02em;
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}

select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--sans);font-size:13.5px;color:var(--text);padding:9px 11px;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select:focus{outline:none;border-color:var(--ui);box-shadow:0 0 0 3px var(--ui-dim)}

.note{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:7px}

/* ── 슬라이더 ── */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;background:transparent;
  height:16px;margin-top:8px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:16px;border-radius:2px;
  background:var(--text);margin-top:-7px;border:0;
  transition:background .12s var(--ease),box-shadow .12s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:11px;height:16px;border-radius:2px;background:var(--text);border:0;
}
input[type=range]:hover::-webkit-slider-thumb{background:var(--ui)}
input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--ui);box-shadow:0 0 0 4px var(--ui-dim)}

/* ── 채널 ── */
.ch{border:1px solid var(--line-soft);border-radius:var(--r);padding:13px;margin-bottom:11px;background:rgba(0,0,0,.16)}
.ch:last-of-type{margin-bottom:0}
.ch-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.chip{width:9px;height:9px;border-radius:2px;flex:none}
.ch-head input{
  flex:1;background:transparent;border:0;border-bottom:1px solid transparent;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);padding:1px 0 3px;
}
.ch-head input:focus{outline:none;border-bottom-color:var(--ui)}
.ch .duo label{font-size:11.5px;color:var(--text-2);display:block;margin-bottom:5px}
.ch .inp input{font-size:13.5px;padding:7px 34px 7px 9px}
.ch .inp .unit{right:9px;font-size:11px}

/* ══ 게이지 모듈 ══ */
.gauge-mod{position:relative;padding:22px 20px 18px;overflow:hidden}
.gauge-mod::before,.gauge-mod::after{
  content:"";position:absolute;width:16px;height:16px;border:1px solid var(--ui);opacity:.45;
}
.gauge-mod::before{top:10px;left:10px;border-right:0;border-bottom:0}
.gauge-mod::after{bottom:10px;right:10px;border-left:0;border-top:0}

.gauge-grid{display:grid;grid-template-columns:minmax(280px,1fr) 250px;gap:26px;align-items:center}
@media(max-width:760px){.gauge-grid{grid-template-columns:1fr}}

.dial{width:100%;max-width:430px;margin:0 auto;display:block}
.dial .track{fill:none;stroke:var(--line);stroke-width:9;stroke-linecap:butt}
.dial .arc-base{fill:none;stroke:var(--policy);stroke-width:9;stroke-linecap:butt;
  transition:stroke-dasharray .5s var(--ease)}
.dial .arc-fee{fill:none;stroke:var(--fee);stroke-width:9;stroke-linecap:butt;
  transition:stroke-dasharray .5s var(--ease),stroke-dashoffset .5s var(--ease)}
.dial .tick{stroke:var(--line);stroke-width:1}
.dial .tick.major{stroke:var(--text-3);stroke-width:1.5}
.dial .tick-lab{fill:var(--text-3);font-family:var(--mono);font-size:9.5px;text-anchor:middle}
.dial .mark{stroke-width:2}
.dial .mark-lab{font-family:var(--mono);font-size:9.5px;font-weight:500}
.dial .needle{stroke:var(--text);stroke-width:2;stroke-linecap:round;
  transition:x2 .5s var(--ease),y2 .5s var(--ease)}
.dial .hub{fill:var(--text)}

.readout{text-align:center}
.readout .cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.readout .big{
  font-family:var(--mono);font-size:60px;font-weight:600;letter-spacing:-.045em;line-height:1;
  margin:8px 0 2px;color:var(--text);
}
.readout .big em{font-style:normal;font-size:28px;font-weight:500;color:var(--text-2);letter-spacing:0}
.readout .from{font-family:var(--mono);font-size:13px;color:var(--text-2);margin-top:9px}
.readout .from s{color:var(--text-3);text-decoration-thickness:1px}
.readout .from i{font-style:normal;color:var(--fee)}
.readout .verdict{
  display:inline-block;margin-top:14px;padding:6px 13px;border-radius:99px;
  font-size:12px;font-weight:600;letter-spacing:-.01em;
  border:1px solid;
}
.readout .verdict.ok{color:var(--policy);border-color:rgba(95,211,188,.35);background:rgba(95,211,188,.08)}
.readout .verdict.no{color:var(--alert);border-color:rgba(255,107,107,.38);background:rgba(255,107,107,.09)}

/* ══ 스탯 ══ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:18px}
@media(max-width:600px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface);padding:15px 16px}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.stat .v{font-family:var(--mono);font-size:23px;font-weight:600;letter-spacing:-.03em;margin:7px 0 3px}
.stat .n{font-size:11.5px;color:var(--text-2);line-height:1.45}
.stat.fee .v{color:var(--fee)}
.stat.be .v{color:var(--bank)}
.stat.be.over .v{color:var(--alert)}

/* ══ 바 ══ */
.bars{display:flex;flex-direction:column;gap:15px}
.row .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.row .nm{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.row .tot{font-family:var(--mono);font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.row .track{display:flex;height:26px;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.row .seg{height:100%;transition:width .45s var(--ease)}
.row .seg.hatch{
  background-image:repeating-linear-gradient(-45deg,var(--fee) 0 4px,rgba(168,139,255,.45) 4px 8px);
}
.row .foot{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--text-3);margin-top:6px}

/* ══ 표 ══ */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 9px;text-align:right;border-bottom:1px solid var(--line-soft)}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;border-bottom:1px solid var(--line)}
tbody td{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
tbody td:first-child{font-family:var(--sans);font-weight:600;line-height:1.35}
tbody td:first-child .chip{display:inline-block;margin-right:7px;vertical-align:middle}
tbody td small{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px}
tbody tr:last-child td{border-bottom:0}

/* ══ 고지 ══ */
.legal{font-size:12px;color:var(--text-2);line-height:1.7}
.legal ul{margin:0 0 15px 15px}
.legal li{margin-bottom:5px}
.legal strong{color:var(--text);font-weight:600}
.sign{display:flex;gap:30px;padding-top:15px;border-top:1px solid var(--line);flex-wrap:wrap}
.sign > div{flex:1;min-width:170px}
.sign .cap{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.sign .line{border-bottom:1px solid var(--line);height:32px;margin-top:8px}

/* ══ 버튼 ══ */
.acts{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
button{
  font-family:var(--sans);font-size:13px;font-weight:600;padding:11px 20px;
  border-radius:var(--r);cursor:pointer;transition:.14s var(--ease);
  border:1px solid var(--ui);background:var(--ui);color:#120F1D;
}
button.ghost{background:transparent;color:var(--text-2);border-color:var(--line)}
button:hover{filter:brightness(1.08)}
button.ghost:hover{color:var(--text);border-color:var(--text-3)}
button:focus-visible{outline:2px solid var(--ui);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══════════ 인쇄: 밝은 문서로 전환 ══════════ */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff !important;color:#111;padding:0;font-size:10.5pt}
  body::before{display:none}
  .acts{display:none}
  .layout{grid-template-columns:270px 1fr;gap:14px}
  .mod{background:#fff;border:1px solid #c8c8c8;padding:12px;break-inside:auto;margin-bottom:12px}
  .gauge-mod,.stats,.legal-mod{break-inside:avoid}
  tr{break-inside:avoid}
  .bar{border-bottom:1.5px solid #111}
  .brand h1{color:#111}
  .brand p,.note,.stat .n,.legal,.row .foot{color:#555}
  .pulse{background:#111;box-shadow:none;animation:none}
  .tag,.stat .k,.sign .cap,thead th,.readout .cap{color:#777}
  .slot input,.inp input,select,.ch-head input{background:#fff;color:#111;border-color:#c8c8c8}
  .ch{background:#fff;border-color:#ddd}
  .gauge-mod::before,.gauge-mod::after{border-color:#999}
  .dial .track{stroke:#e2e2e2}
  .dial .tick{stroke:#ccc}.dial .tick.major{stroke:#888}
  .dial .tick-lab{fill:#888}
  .dial .needle,.dial .hub{stroke:#111;fill:#111}
  .readout .big,.stat .v,.row .tot,tbody td,.legal strong{color:#111}
  .readout .from{color:#555}
  .stats{background:#c8c8c8;border-color:#c8c8c8}
  .stat{background:#fff}
  .row .track{background:#f2f2f2;border-color:#ddd}
  th,td{border-bottom-color:#ddd}
  thead th{border-bottom-color:#111}
  .sign .line{border-bottom-color:#888}
  /* 지면 압축 — 산출표 + 서명이 함께 보이도록 */
  .dial{max-width:300px}
  .readout .big{font-size:34pt}
  .gauge-mod{padding:12px}
  .gauge-grid{gap:14px;grid-template-columns:1fr 190px}
  .stat{padding:10px 12px}
  .stat .v{font-size:15pt}
  .bars{gap:9px}
  .row .track{height:16px}
  th,td{padding:5px 7px}
  .legal{font-size:8.5pt;line-height:1.5}
  .legal ul{margin-bottom:9px}
  .mod > header{margin-bottom:9px}
  input[type=range]{display:none}
  .f{margin-bottom:9px}
  .ch{padding:9px;margin-bottom:7px}
}