:root{
  --ink:#17211c;
  --muted:#66706a;
  --paper:#fff;
  --canvas:#f1f3ef;
  --line:#d8ddd8;
  --green:#194f3b;
  --green-2:#dce9e1;
  --orange:#e8682c;
  --shadow:0 18px 55px rgba(26,46,36,.11);
}

*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Malgun Gothic","Noto Sans KR",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.shell{width:min(1500px,calc(100% - 44px));margin:0 auto;padding:42px 0 70px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:4px 4px 34px}
.eyebrow{margin:0 0 10px;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.18em}
.hero h1{font-size:clamp(36px,5vw,68px);line-height:1;margin:0;letter-spacing:-.065em;font-weight:800}
.hero-copy{margin:18px 0 0;color:var(--muted);font-size:15px}
.hero-tools{display:flex;align-items:center;gap:20px}.feature-link{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--green);color:var(--green);background:#fff;padding:12px 14px;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}.feature-link:hover{background:var(--green);color:#fff}.feature-link span{font-size:15px}
.bank-count{display:grid;grid-template-columns:auto auto;gap:2px 12px;align-items:baseline;padding:21px 24px;border-left:1px solid #bec7c0}
.bank-count span{font-size:24px;font-weight:800}.bank-count small{font-size:11px;color:var(--muted)}
.layout{display:grid;grid-template-columns:365px minmax(0,1fr);gap:24px;align-items:start}
.panel,.workspace{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.controls{padding:28px;position:sticky;top:18px}
.panel-heading{display:flex;gap:14px;align-items:flex-start;padding-bottom:23px;border-bottom:1px solid var(--line);margin-bottom:24px}
.panel-heading>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:white;font-weight:800;font-size:12px}
.panel-heading h2{font-size:19px;margin:0 0 3px;letter-spacing:-.03em}.panel-heading p{margin:0;color:var(--muted);font-size:12px}
.field{display:block;margin:0 0 23px}.field>span,legend{display:block;font-weight:800;font-size:13px;margin-bottom:9px}.field em{font-style:normal;color:#98a19b;font-weight:400;margin-left:5px}
.field-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.field-title>span{font-weight:800;font-size:13px}
.mode-toggle{border:1px solid #b9c5bd;background:#fff;color:var(--green);padding:5px 8px;font-size:10px;font-weight:800}.mode-toggle:hover{background:#f3f8f4}.mode-toggle.active{border-color:var(--green);background:var(--green);color:#fff}.mode-toggle:disabled{opacity:.5;cursor:not-allowed}
input{width:100%;height:45px;border:1px solid #cbd2cd;background:#fbfcfa;padding:0 13px;outline:none;border-radius:0;color:var(--ink)}
input:disabled{background:#edf1ed;color:#68736c;cursor:not-allowed}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-2)}
.field small{display:block;margin-top:7px;color:#8a938d;font-size:10px;line-height:1.45}
.number-field{display:flex;border:1px solid #cbd2cd;background:#fbfcfa;align-items:center}.number-field:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-2)}
.number-field input{border:0;min-width:0;box-shadow:none!important;font-size:20px;font-weight:800}.number-field b{padding-right:13px;font-size:12px;color:var(--muted);white-space:nowrap}
fieldset{border:0;padding:0;margin:0 0 23px}.fieldset-head{display:flex;align-items:center;justify-content:space-between}.fieldset-head legend{padding:0;margin:0}
.text-button{border:0;background:transparent;color:var(--green);font-size:11px;padding:3px}.text-button:disabled{opacity:.45;cursor:not-allowed}
.category-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.category{position:relative;display:block;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 10px 10px 36px;min-height:55px;background:#fff;transition:.15s ease}
.category:hover{background:#f7faf7}.category:has(input:checked){background:var(--green-2)}
.category input{position:absolute;left:11px;top:16px;width:15px;height:15px;accent-color:var(--green)}
.category strong{display:block;font-size:12px}.category small{font-size:9px;color:var(--muted)}
.skeleton{height:55px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,#f4f5f3,#ebeeeb,#f4f5f3);background-size:200% 100%;animation:shine 1.2s infinite}
@keyframes shine{to{background-position:-200% 0}}
.primary{border:0;background:var(--green);color:#fff;width:100%;height:52px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-weight:800;transition:.2s}.primary:hover{background:#0f3f2e;transform:translateY(-1px)}.primary:disabled{opacity:.6;cursor:wait;transform:none}
.status{min-height:17px;margin:9px 0 0;font-size:11px;color:var(--muted)}.status.error{color:#b43f24}
.workspace{min-height:720px;overflow:hidden}
.empty-state{min-height:720px;display:grid;place-content:center;text-align:center;padding:30px;color:var(--muted)}
.empty-mark{width:86px;height:86px;border:1px solid var(--green);display:grid;place-items:center;margin:0 auto 25px;color:var(--green);font-family:serif;font-size:38px;transform:rotate(-3deg)}
.empty-state h2{font-size:20px;color:var(--ink);margin:0 0 10px}.empty-state p{font-size:13px;line-height:1.7;margin:0}
.result-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:27px 30px;border-bottom:1px solid var(--line)}
.result-bar h2{font-size:24px;letter-spacing:-.04em;margin:0 0 6px}.result-bar>div>p:last-child{margin:0;color:var(--muted);font-size:11px}
.downloads{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.download{height:42px;border:1px solid var(--green);background:var(--green);color:white;padding:0 14px;font-size:12px;font-weight:800}.download span{margin-left:10px}.download.secondary{background:white;color:var(--green)}.download:disabled{opacity:.55;cursor:wait}
.unit-chips{display:flex;gap:6px;flex-wrap:wrap;padding:13px 30px;background:#fafbf9;border-bottom:1px solid var(--line)}
.chip{border:1px solid #d7ddd8;padding:5px 8px;font-size:9px;color:#4b5650;background:#fff}.chip b{color:var(--green);margin-right:4px}
.tabs{display:flex;padding:18px 30px 0;gap:22px}.tab{border:0;background:transparent;padding:0 0 10px;color:#8a938e;font-size:12px;font-weight:800;border-bottom:2px solid transparent}.tab.active{color:var(--green);border-color:var(--green)}
.preview-wrap{background:#e4e8e4;padding:22px 24px 28px;min-height:630px}.preview-wrap iframe{display:block;width:100%;height:780px;border:0;background:white;box-shadow:0 8px 28px rgba(24,39,31,.13)}

@media(max-width:980px){.layout{grid-template-columns:1fr}.controls{position:static}.workspace,.empty-state{min-height:560px}.result-bar{align-items:flex-start;flex-direction:column}.downloads{justify-content:flex-start}}
@media(max-width:640px){.shell{width:min(100% - 22px,1500px);padding-top:24px}.hero{align-items:flex-start;flex-direction:column}.hero-tools{align-items:stretch;flex-direction:column;width:100%}.feature-link{justify-content:space-between}.bank-count{padding:12px 0;border-left:0;border-top:1px solid #bec7c0;width:100%}.controls{padding:21px}.category-list{grid-template-columns:1fr}.result-bar,.unit-chips{padding-left:18px;padding-right:18px}.preview-wrap{padding:12px}.preview-wrap iframe{height:680px}.downloads{width:100%}.download{flex:1}}