:root{
  --app-bg:#F1F3F5; --surface:#F7F8F9; --surface-2:#EEF0F2; --surface-3:#E8EBEE;
  --border:#E0E3E6; --border-soft:#E8EBEE; --text:#3A4149; --text-strong:#2C333A;
  --muted:#7A8490; --muted-2:#9AA3AD; --input-bg:#EEF0F2; --input-focus:#F7F8F9;
  --accent:#2563EB; --accent-dark:#1D4ED8; --accent-soft:#E8F1FC; --brand-red:#C8102E;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--app-bg);color:var(--text);font-family:"Pretendard","Malgun Gothic","맑은 고딕","Segoe UI",system-ui,sans-serif;font-size:14px;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased;}
input,select,button,textarea{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C5CBD1;border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:#9AA3AD}
.hidden{display:none!important}
/* ---------- sidebar ---------- */
.side{width:232px;min-width:232px;background:#F3F5F8;border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:6px 0 28px rgba(0,0,0,.06);z-index:5}
.side-head{padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.side-brand-kicker{font-size:.65rem;font-weight:800;letter-spacing:.22em;color:var(--brand-red);text-transform:uppercase}
.side-brand-title{margin:2px 0 0;font-size:1.5rem;font-weight:800;letter-spacing:-.04em;line-height:1.15;color:#0B1B33}
.brand-row{display:flex;align-items:center;gap:10px}
.logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#1D4ED8 0%,#0EA5E9 100%);color:#fff;font-weight:900;font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(37,99,235,.28);flex-shrink:0}
.side-brand-sub{margin:4px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#3B82F6}
.side-brand-ver{margin:8px 0 0;font-size:.68rem;font-weight:600;color:var(--muted-2)}
.side-body{flex:1;overflow-y:auto;padding:10px 12px}
.menu-item{padding:.55rem .85rem;border-radius:.85rem;color:#3A4149;font-weight:600;font-size:.86rem;cursor:pointer;transition:all .18s ease;display:flex;align-items:center;justify-content:center;text-align:center;gap:.4rem;margin:.32rem 0;background:linear-gradient(165deg,#FFFFFF 0%,#EEF2F7 100%);border:1px solid #D5DEE8;box-shadow:0 2px 6px rgba(44,51,58,.08),0 1px 2px rgba(44,51,58,.04)}
.menu-item:hover{background:linear-gradient(165deg,#FFFFFF 0%,#E7EEF8 100%);border-color:#C5D0DC;box-shadow:0 3px 10px rgba(44,51,58,.12),0 1px 3px rgba(44,51,58,.06);transform:translateY(-1px)}
.menu-item:active{transform:scale(.98)}
.menu-item.active{background:linear-gradient(165deg,#DCEAFB 0%,#C9DFF8 100%);color:#1D4ED8;border-color:#93C5FD;font-weight:700;box-shadow:0 3px 12px rgba(37,99,235,.18),0 1px 3px rgba(37,99,235,.1)}
.menu-item.primary{background:linear-gradient(165deg,#3B82F6 0%,#2563EB 100%);color:#fff;border-color:#1D4ED8;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.menu-item.primary:hover{background:linear-gradient(165deg,#2563EB 0%,#1D4ED8 100%)}
.menu-item.tint-green{background:linear-gradient(165deg,#ECFBF6,#DDF5EE);border-color:#BFE8DA}
.menu-item.tint-violet{background:linear-gradient(165deg,#F3F0FF,#E9E4FB);border-color:#D4CCF3}
.menu-item.tint-orange{background:linear-gradient(165deg,#FFF6EB,#FFEEDB);border-color:#F0D7B5}
.menu-item.tint-gray{background:linear-gradient(165deg,#F5F6F8,#EBEEF2);border-color:#D5DAE1}
.menu-item.disabled{opacity:.5;pointer-events:none}
.menu-item.primary.on{box-shadow:0 0 0 3px #BFDBFE,0 4px 12px rgba(37,99,235,.25)}
.menu-item .mi-ico{font-size:.9rem;line-height:1;opacity:.9}
.menu-section{font-size:.7rem;font-weight:700;color:var(--muted-2);margin:.9rem 0 .2rem;padding:0 .5rem;letter-spacing:.04em}
.menu-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.32rem 0}
.menu-grid2 .menu-item{margin:0;padding:.55rem .3rem;font-size:.8rem}
.side-foot{padding:12px;border-top:1px solid var(--border);background:var(--surface-2);font-size:.72rem;color:var(--muted);text-align:center;line-height:1.55}
.side-foot b{color:var(--text-strong);font-weight:700}
.side-foot .copyright{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border);font-size:.64rem;color:var(--muted-2);line-height:1.5}
.side-foot a{color:#3B82F6;font-weight:600;text-decoration:none;cursor:pointer}

/* ---------- main ---------- */
main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.scroll{flex:1;overflow-y:auto}
.shell{max-width:1180px;margin:0 auto;padding:24px 28px 28px}
.home-brand-sub{margin-top:8px;font-size:.82rem;color:#7B8794;font-weight:600}
.btn{border:1px solid var(--border);background:linear-gradient(165deg,#FFFFFF 0%,#F2F5F9 100%);color:var(--text);border-radius:.75rem;padding:.55rem 1rem;font-size:.84rem;font-weight:700;cursor:pointer;transition:all .18s ease;white-space:nowrap;box-shadow:0 1px 2px rgba(44,51,58,.05)}
.btn:hover{border-color:#C5D0DC;box-shadow:0 3px 10px rgba(44,51,58,.10);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-primary{background:#2563EB;border-color:#1D4ED8;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.btn-primary:hover{background:#1D4ED8;border-color:#1E40AF}
.btn-lg{padding:.72rem 1.4rem;font-size:.92rem;border-radius:.85rem}
.btn-sm{padding:.38rem .75rem;font-size:.78rem;border-radius:.6rem}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent-soft);border-color:#C5DBF5;box-shadow:none}
.btn-danger{color:#B91C1C}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.card-stat{border:1px solid #E0E6EE;background:linear-gradient(165deg,#FFFFFF 0%,#F7F9FC 100%);border-radius:16px;padding:13px 16px;box-shadow:0 2px 8px rgba(44,51,58,.04)}
.card-stat .l{font-size:.78rem;font-weight:700;color:#64748B}
.card-stat .v{font-size:1.5rem;font-weight:800;color:#0F172A;margin-top:3px;letter-spacing:-.02em}
.card-stat .v small{font-size:.8rem;font-weight:700;color:var(--muted);margin-left:2px}
.card-stat.is-blue .v{color:#1D4ED8} .card-stat.is-orange .v{color:#C2410C} .card-stat.is-green .v{color:#047857} .card-stat.is-violet .v{color:#6D28D9}
.panel{background:rgba(255,255,255,.88);border:1px solid var(--border);border-radius:18px;box-shadow:0 2px 8px rgba(44,51,58,.04);padding:18px 20px;margin-bottom:16px}
.panel h2{margin:0 0 12px;font-size:1rem;font-weight:800;color:#0B1B33}
.num,.mono,input[type=number],.card-stat .v{font-family:"Cascadia Mono",Consolas,monospace}
.grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start}
#drop{border:2px dashed #C5D0DC;border-radius:14px;padding:24px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface);transition:.18s}
#drop.over,#drop:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
table{width:100%;border-collapse:collapse;margin-top:12px}th,td{padding:8px 6px;border-bottom:1px solid var(--border-soft);text-align:left}
th{color:var(--muted);font-weight:700;font-size:.75rem;background:var(--surface-2)}td.num,th.num{text-align:right}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:.7rem;overflow:hidden;background:var(--surface-2)}
.seg button{border:0;background:transparent;padding:.4rem .85rem;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--text)}
.seg button.on{background:var(--accent);color:#fff}
.row{display:flex;justify-content:space-between;align-items:center;margin:10px 0;gap:10px}
input[type=number]{width:120px;padding:.45rem .6rem;border:1px solid var(--border);border-radius:.6rem;text-align:right;background:var(--input-bg);color:var(--text-strong)}
input[type=number]:focus{outline:none;background:var(--input-focus);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.del{border:0;background:none;color:var(--muted-2);cursor:pointer;font-size:15px}.del:hover{color:var(--brand-red)}
.sum .line{display:flex;justify-content:space-between;padding:6px 0;color:var(--muted)}.sum .line span:last-child,.sum .line b{font-family:"Cascadia Mono",Consolas,monospace;color:var(--text-strong)}
.sum .total{font-size:1.3rem;font-weight:800;border-top:2px solid var(--border);margin-top:8px;padding-top:12px;color:#0B1B33}.sum .total span:last-child{color:var(--accent-dark)!important}
.sum .btn{width:100%;margin-top:10px}.muted{color:var(--muted-2);font-size:.75rem}

.home-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.home-brand-kicker{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--brand-red);text-transform:uppercase;margin-bottom:4px}
.home-brand-title{margin:0;font-size:1.8rem;font-weight:800;letter-spacing:-.035em;line-height:1.15;background:linear-gradient(120deg,#0B1B33 0%,#1D4ED8 55%,#0EA5E9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.qside{width:470px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);min-height:0}
.qside-head{padding:16px 16px 10px;border-bottom:1px solid var(--border)}
.qside-head h3{margin:0 0 8px;font-size:1rem}
.qside-btns{display:flex;gap:6px;flex-wrap:wrap}.qside-btns .btn{flex:1}
.qside-opt{font-size:.78rem;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between;align-items:center}
.qside-body{flex:1;overflow:auto;padding:14px}
.qzoom{zoom:.54;width:210mm;margin:0 auto}
#quote{--H:#dcd5c9;--A:#c4b8a8;--T:#3d3832;--M:#8a8178;--L:#ddd6cc;--TL:#8f8478;
 width:210mm;height:297mm;box-sizing:border-box;padding:18mm;background:#fff;color:var(--T);position:relative;
 font-family:"Malgun Gothic","맑은 고딕",sans-serif;font-size:9pt;box-shadow:0 4px 24px rgba(0,0,0,.18);line-height:1.25;text-align:left}
#quote [contenteditable]{outline:none;border-radius:2px}#quote [contenteditable]:hover{background:#fdf8e6}#quote [contenteditable]:focus{background:#fff3c4}
.q-top{display:flex;justify-content:space-between;height:52pt;border-bottom:.6pt solid var(--L);box-sizing:border-box}
.q-co{font:bold 13pt "Malgun Gothic",sans-serif;display:flex;align-items:center;gap:6pt;margin-top:3pt}
.q-co i{width:8pt;height:8pt;border-radius:1.2pt;background:var(--A);display:inline-block}
.q-reg{font-size:8pt;color:var(--M);margin-top:5pt}
.q-ttl{font:bold 22pt "Malgun Gothic",sans-serif;letter-spacing:1.6pt;text-align:right;margin-top:-2pt}
.q-iss{font-size:8.5pt;color:var(--M);text-align:right;margin-top:1pt}
.q-parties{display:flex;gap:14mm;margin-top:13pt;height:120pt}
.q-pb{flex:1;min-width:0}.q-pb h4{margin:0;font:bold 8pt "Malgun Gothic",sans-serif;color:var(--M);text-align:center;padding-bottom:4pt;border-bottom:.4pt solid var(--L)}
.q-pr{display:flex;margin-top:9pt;min-height:11pt;position:relative}.q-pr b{font-weight:normal;font-size:8pt;color:var(--M);width:38pt;flex:none}
.q-pr span{font-size:8.5pt;flex:1;min-width:0}
.q-stamp{position:absolute;width:46pt;height:46pt;left:150pt;top:-18pt;pointer-events:none}
.q-tbl{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:4pt}
.q-tbl th{background:var(--H);font:bold 8.5pt "Malgun Gothic",sans-serif;height:26pt;color:var(--T);text-align:center;padding:0;border:0}
.q-tbl th:first-child{border-radius:2pt 0 0 2pt}.q-tbl th:last-child{border-radius:0 2pt 2pt 0}
.q-tbl td{height:24pt;border-bottom:.35pt solid var(--L);text-align:center;font-size:9pt;padding:3pt 4pt;color:var(--T);word-break:keep-all;overflow-wrap:anywhere}
.q-note{margin-top:14pt;border:.6pt solid var(--L);border-radius:3pt;background:rgb(250,250,251);padding:7pt 8pt 8pt}
.q-note h5{margin:0 0 6pt;font:bold 8pt "Malgun Gothic",sans-serif;color:var(--M)}.q-note div{min-height:14pt;white-space:pre-wrap;font-size:9pt}
.q-sum{width:150pt;margin:26pt 0 0 auto;font-size:9pt}
.q-sum div{display:flex;justify-content:space-between;height:18pt;align-items:center}.q-sum span{color:var(--M)}
.q-sum .g{border-top:1.1pt solid var(--TL);border-bottom:1.4pt solid var(--TL);font:bold 11pt "Malgun Gothic",sans-serif;height:24pt;margin-top:4pt}.q-sum .g span{color:var(--T)}
.q-foot{position:absolute;left:18mm;right:18mm;bottom:18mm;display:flex;justify-content:space-between;align-items:flex-end}
.q-foot .h{font:bold 8pt "Malgun Gothic",sans-serif;color:var(--M);margin-bottom:6pt}.q-foot .r .h{font-size:9pt;color:var(--T);text-align:right}
.q-foot .bank{font-size:9pt}.q-foot .addr{font-size:7.5pt;color:var(--M)}
@media print{@page{size:A4;margin:0}
 body>*:not(#quote){display:none!important}html,body{background:#fff!important;height:auto!important;overflow:visible!important;display:block!important}
 #quote{box-shadow:none;margin:0}#quote [contenteditable]:hover,#quote [contenteditable]:focus{background:none}
 #quote *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}