/* ===========================================================
   GBuy 대사 · 통관 청구서 검산
   설계 : 검산 도구는 "틀린 것만 보이게" 한다.
          일치하는 행의 차액 칸은 비우고, 어긋난 행만 드러낸다.
   =========================================================== */

:root{
  --bg:#EDEFEA;          /* 화면 바탕 — 세이지 그레이 */
  --panel:#FFFFFF;
  --ink:#101F1A;         /* 장부 잉크 — 딥 그린블랙 */
  --ink2:#2C4038;
  --sub:#5E6E67;
  --rule:#D6DBD4;
  --rule2:#E7EAE5;
  --ok:#1F7A4C;          /* 검산 통과 */
  --warn:#C4571F;        /* 차액 발생 */
  --key:#E9B31A;         /* 강조 */
  --key-d:#9C7208;
  --zone-kr:#EEF3F6;
  --zone-cn:#FBF3E8;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Pretendard','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.6; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
}
.num,input.num,.mono-k{
  font-family:'DejaVu Sans Mono','Roboto Mono','SFMono-Regular',Consolas,monospace;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;font-size:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--key);outline-offset:2px;}

/* ── 상단 대조 바 (시그니처) ── */
.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:stretch; gap:0;
  background:var(--ink); color:#EAF0EC;
  border-bottom:3px solid var(--key);
}
.bar-id{display:flex;align-items:center;gap:8px;padding:0 20px;white-space:nowrap;}
.bar-id .mark{font-weight:800;letter-spacing:.14em;font-size:12px;color:var(--key);}
.bar-id .sep{color:#4E635B;}
.bar-id .app{font-weight:700;font-size:15px;letter-spacing:-.02em;}

.recon{
  flex:1; display:flex; align-items:center; gap:0;
  position:relative; padding:0 8px; min-width:0;
}
.recon-cell{
  display:flex; flex-direction:column; justify-content:center;
  padding:9px 20px; border-left:1px solid #29403A; min-width:150px;
}
.recon-k{font-size:10px;letter-spacing:.14em;color:#7D948B;text-transform:uppercase;}
.recon-v{font-size:19px;font-weight:700;line-height:1.3;}
.recon-diff .recon-v{color:var(--key);}
.recon-diff.ok .recon-v{color:#5FC08A;}
.recon-diff.bad .recon-v{color:#F2874E;}
.recon-track{
  position:absolute; left:8px; right:8px; bottom:0; height:3px; background:#29403A;
}
.recon-fill{height:100%;width:0;background:#5FC08A;transition:width .35s ease,background .2s;}
.recon-fill.bad{background:#F2874E;}

.bar-act{display:flex;align-items:center;gap:8px;padding:0 18px;}

/* ── 버튼 ── */
.btn{
  border:0;border-radius:3px;padding:7px 13px;font-size:12.5px;font-weight:700;
  letter-spacing:-.01em;transition:.14s;white-space:nowrap;
}
.btn-ghost{background:rgba(255,255,255,.1);color:#EAF0EC;}
.btn-ghost:hover{background:rgba(255,255,255,.2);}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--rule);}
.btn-line:hover{border-color:var(--ink);background:#F6F8F5;}
.btn-key{background:var(--key);color:var(--ink);}

/* ── 레이아웃 ── */
.shell{display:flex;min-height:calc(100vh - 52px);align-items:stretch;}
.side{
  width:186px;flex-shrink:0;background:#F5F7F3;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;padding:16px 0;
}
.nav{
  display:block;width:100%;text-align:left;background:0;border:0;
  padding:11px 20px;font-size:14px;font-weight:600;color:var(--sub);
  border-left:3px solid transparent;transition:.14s;
}
.nav:hover{color:var(--ink);background:#EDF0EA;}
.nav.on{color:var(--ink);border-left-color:var(--key);background:#fff;font-weight:800;}
.side-foot{margin-top:auto;padding:18px 20px 4px;}
.side-note{font-size:11.5px;color:var(--sub);line-height:1.62;}
.side-note b{color:var(--ink);}

.work{flex:1;padding:26px 30px 60px;min-width:0;}
.view{display:none;}
.view.on{display:block;}

.view-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px;flex-wrap:wrap;}
h1{font-size:24px;font-weight:800;letter-spacing:-.035em;}
.lede{font-size:13.5px;color:var(--sub);margin-top:5px;max-width:70ch;}
.samples{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.mono-k{font-size:10.5px;letter-spacing:.12em;color:var(--sub);text-transform:uppercase;margin-right:2px;}

/* ── 패널 ── */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:5px;padding:18px 20px 20px;margin-bottom:18px;}
.panel-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
h2{font-size:15px;font-weight:800;letter-spacing:-.025em;}
.hint{font-size:11.5px;color:var(--sub);}
.panel-act{display:flex;gap:7px;}

/* ── 입력 그리드 ── */
.grid-head{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 14px;}
.grid-fx{display:grid;grid-template-columns:repeat(5,1fr);gap:11px 14px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--rule);}
.grid-split{display:grid;grid-template-columns:repeat(4,1fr);gap:11px 14px;}
.grid-head label,.grid-fx label,.grid-split label{
  display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--sub);
}
.unit{color:var(--key-d);font-weight:800;}
input[type=text],input[type=date],input[type=number],select{
  border:1px solid var(--rule);border-radius:3px;padding:7px 9px;background:#fff;
  font-size:13.5px;width:100%;
}
input.num{text-align:right;}
input.strong{border-color:var(--ink);font-weight:700;}
input:focus,select:focus{border-color:var(--key);}
input.inline{padding:4px 7px;font-size:12.5px;max-width:110px;}

/* ── 원장 테이블 ── */
.ledger{width:100%;border-collapse:collapse;font-size:12.5px;}
.ledger th{
  background:var(--ink);color:#EAF0EC;font-weight:700;font-size:11px;
  letter-spacing:.03em;padding:8px 9px;text-align:left;white-space:nowrap;
}
.ledger th.c-num{text-align:right;}
.ledger td{padding:5px 9px;border-bottom:1px solid var(--rule2);vertical-align:middle;}
.ledger td.num{text-align:right;}
.ledger tbody tr:hover{background:#FAFBF9;}
.c-zone{width:82px;} .c-name{min-width:170px;} .c-calc{width:120px;}
.c-num{width:104px;} .c-vat{width:46px;text-align:center;} .c-del{width:34px;}

.ledger td input,.ledger td select{padding:4px 7px;font-size:12.5px;border-radius:2px;}
.ledger td input.num{text-align:right;}

.zone-tag{display:inline-block;padding:2px 7px;border-radius:2px;font-size:10.5px;font-weight:800;white-space:nowrap;}
.zone-kr{background:var(--zone-kr);color:#2C4A5C;}
.zone-cn{background:var(--zone-cn);color:#8A5A10;}

/* 검산 결과 — 일치하면 비우고, 어긋나면 드러낸다 */
td.calc{color:var(--sub);}
td.diff{font-weight:800;}
td.diff.zero{color:transparent;}          /* 일치 — 아무것도 보이지 않음 */
td.diff.warn{color:var(--warn);background:#FCF1EA;}
tr.bad td{background:#FDF6F1;}
tr.bad td.c-name,tr.bad .zone-tag{}

.del{background:0;border:0;color:#B6BFB9;font-size:15px;line-height:1;padding:2px 5px;border-radius:2px;}
.del:hover{color:var(--warn);background:#FCF1EA;}

.ledger tfoot .sum td{border-top:1px solid var(--ink);border-bottom:0;padding:9px;font-weight:800;background:#F7F9F6;}
.ledger tfoot .total td{background:var(--ink);color:#EAF0EC;font-size:14px;border-top:0;}
.ledger tfoot .total .sub{font-weight:400;font-size:11px;color:#8FA79E;margin-left:6px;}
.ledger tfoot td.num.warn{color:#F2874E;}

.empty{padding:26px 0 6px;text-align:center;color:var(--sub);font-size:13px;}
.empty.hide{display:none;}

/* ── 산정 방식 ── */
.formula .rules{display:grid;grid-template-columns:104px 1fr;gap:7px 16px;font-size:12.5px;}
.formula dt{font-weight:800;color:var(--ink);}
.formula dd{color:var(--ink2);}
.formula dd b{color:var(--key-d);}
.formula .ex{color:var(--sub);font-size:11.5px;margin-left:7px;}

/* ── 콜아웃 ── */
.callout{
  margin-top:14px;padding:11px 14px;background:#F7F9F6;border-left:3px solid var(--key);
  font-size:12.5px;color:var(--ink2);line-height:1.62;
}
.callout.ok{border-left-color:var(--ok);background:#F1F8F3;}
.callout.bad{border-left-color:var(--warn);background:#FCF1EA;}
.callout b{font-weight:800;}

/* ── 예외 목록 ── */
.issues{list-style:none;}
.issues li{
  display:flex;gap:13px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--rule2);font-size:13px;
}
.issues li:last-child{border-bottom:0;}
.issues .tag{
  flex-shrink:0;padding:2px 8px;border-radius:2px;font-size:10.5px;font-weight:800;
  background:#FCF1EA;color:var(--warn);white-space:nowrap;
}
.issues .tag.info{background:#EEF3F6;color:#2C4A5C;}
.issues .tag.ok{background:#F1F8F3;color:var(--ok);}
.issues .body b{font-weight:800;}
.issues .body .sub{display:block;color:var(--sub);font-size:11.5px;margin-top:2px;}
.issues .none{color:var(--sub);padding:20px 0;text-align:center;}

.fxtable tr.gap td{border-top:1px dashed var(--rule);padding-top:10px;}

@media (max-width:1180px){
  .grid-head{grid-template-columns:repeat(2,1fr);}
  .grid-fx,.grid-split{grid-template-columns:repeat(3,1fr);}
  .recon-cell{min-width:120px;padding:9px 13px;}
  .recon-v{font-size:16px;}
}
@media (max-width:860px){
  .shell{flex-direction:column;}
  .side{width:100%;flex-direction:row;overflow-x:auto;padding:0;}
  .nav{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:12px 16px;}
  .nav.on{border-left:0;border-bottom-color:var(--key);}
  .side-foot{display:none;}
  .work{padding:18px 16px 50px;}
  .grid-head,.grid-fx,.grid-split{grid-template-columns:repeat(2,1fr);}
  .bar{flex-wrap:wrap;}
  .recon{order:3;width:100%;}
}

@media print{
  .bar-act,.side,.samples,.panel-act,.del,.c-del,.formula{display:none!important;}
  body{background:#fff;}
  .panel{border-color:#999;break-inside:avoid;}
  .view{display:none;} .view.on{display:block;}
}