/* (주)늘푸른 수주등록 — A안 「실무형」
 *
 * 고객이 시안 4종 중 고른 안이다. 정본은 mockup/v4.html.
 * 시그니처 넷을 유지한다 — 이게 선택된 이유다.
 *   1. 탐색기 셸 (좌측 4탭 + 상단 경로줄)
 *   2. 진한 세율 헤더 (면세 초록 / 과세 적갈) — 표 자체를 세율로 쪼갠다
 *   3. 발주서와 달라진 행에 주황 점 + 「발주서 원본 ← 프로그램 변환」 2열
 *   4. 「전체 보기 / 변환 행만」 토글
 *
 * 목업과 다른 점 — 목업은 Electron 타이틀바(.chrome)를 그렸으나 배포 형태가
 * 웹으로 확정되어(2026-08-06) 앱 바(.top)로 바꿨다. 웹에는 로그인 사용자와
 * 설정 진입점이 필요한데 데스크톱 목업에는 그 자리가 없었다.
 */

/* ── 폰트 — CDN 대신 번들한다 (CDN 장애 시 화면이 무너지지 않게) ── */
@font-face{
  font-family:'Pretendard Variable';
  font-style:normal;
  font-display:swap;
  font-weight:45 920;
  src:url('/static/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root{
  --bg:#F3F4F1; --surf:#FFFFFF; --side:#F7F8F5;
  --ink:#16181A; --ink2:#4E535A; --mute:#8A8F96;
  --rule:#DFE1DD; --rule2:#EDEEEA; --hl:#EAF1F7;
  --ex:#17604A; --ex-soft:#E9F3EF;          /* 면세 */
  --tx:#9A3B26; --tx-soft:#FBEEEA;          /* 과세 */
  --mark:#C2410C; --mark-soft:#FDF3EC;      /* 변환·주의 */
  --warn:#B4541F; --warn-soft:#FDF1E7;
  --sans:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ex);outline-offset:1px}

/* ── 앱 바 (목업의 .chrome 자리) ── */
.top{background:#E9EBE7;border-bottom:1px solid var(--rule);padding:7px 14px;
     display:flex;align-items:center;gap:9px;flex:none}
.top .app{width:15px;height:15px;border-radius:3px;background:var(--ex);color:#fff;
          font-size:9px;font-weight:700;display:grid;place-items:center}
.top .logo{height:18px;width:auto;display:block}
.gate .logo{height:52px;width:auto;display:block;margin:0 auto 16px}
.top .ttl{font-size:12.5px;font-weight:600;color:var(--ink2)}
.top .ver{font-size:11.5px;color:var(--mute)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px}
.top .who{color:var(--ink2)}
.top .who b{font-weight:600;color:var(--ink)}
.top .lnk{color:var(--ink2);border-bottom:1px solid transparent;padding-bottom:1px}
.top .lnk:hover{border-bottom-color:var(--ink2)}

/* ── 경로줄 ── */
.path{background:var(--surf);border-bottom:1px solid var(--rule);padding:9px 14px;
      display:flex;align-items:center;gap:10px;flex:none;font-size:12.5px}
.crumb{display:flex;align-items:center;gap:7px;color:var(--ink2);background:var(--bg);
       border:1px solid var(--rule);border-radius:4px;padding:5px 11px;flex:1;min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.crumb i{font-style:normal;color:var(--mute)}
.state{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);white-space:nowrap}

/* LED 3상태 — 목업은 초록 단색뿐이었다. ERP·MES가 별도 로그인이라
 * 「어느 쪽이 실패했는지」를 띄울 자리가 필요하다 (화면사양 3-4). */
.led{width:6px;height:6px;border-radius:50%;background:var(--ex);flex:none}
.led.busy{background:var(--mark);animation:pulse 1.1s ease-in-out infinite}
.led.fail{background:var(--tx)}
.led.idle{background:var(--mute)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.flow{font-size:12px;color:var(--mute);white-space:nowrap}
.flow b{color:var(--ink2);font-weight:600}

/* ── 본체 ── */
.body{flex:1;display:flex;min-height:0}
.side{width:214px;flex:none;background:var(--side);border-right:1px solid var(--rule);
      padding:14px 10px;overflow-y:auto;display:flex;flex-direction:column}
.side .cap{font-size:10.5px;letter-spacing:.09em;color:var(--mute);padding:0 10px 9px;font-weight:600}
.nav{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:6px;
     font-size:13.5px;font-weight:500;color:var(--ink2);text-align:left;margin-bottom:2px}
.nav:hover{background:#EDEFEA}
.nav[aria-current=page]{background:var(--hl);color:var(--ink);font-weight:600}
.nav .ic{width:16px;text-align:center;flex:none;opacity:.7}
.nav .n{margin-left:auto;font-size:12px;font-weight:600;color:var(--mute);
        background:var(--rule);border-radius:9px;padding:1px 7px}
.nav[aria-current=page] .n{background:var(--ex);color:#fff}
.nav .n.f{background:var(--mark);color:#fff}
.side .foot{margin-top:auto;padding-top:14px}

.pane{flex:1;display:flex;flex-direction:column;min-width:0}
.tool{background:var(--surf);border-bottom:1px solid var(--rule);padding:9px 16px;
      display:flex;align-items:center;gap:12px;flex:none}
.tool h1{font-size:14px;font-weight:600;letter-spacing:-.01em}
.tool .hint{font-size:12.5px;color:var(--mute)}
.seg{margin-left:auto;display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.seg button{padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed=true]{background:var(--mark);color:#fff}
.seg .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
          background:var(--mark);margin-right:6px;vertical-align:1px}
.seg button[aria-pressed=true] .dot{background:#fff}

main{flex:1;overflow-y:auto;padding:14px 16px 18px}

/* ── 그룹 = 폴더 ── */
.grp{background:var(--surf);border:1px solid var(--rule);border-radius:7px;overflow:hidden;margin-bottom:14px}
.grp-hd{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#FAFBF8;
        border-bottom:1px solid var(--rule)}
.grp-hd .fd{font-size:14px;opacity:.75}
.grp-hd h2{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.grp-hd .po{font-size:12.5px;color:var(--mute)}
.grp-hd .tag{margin-left:auto;font-size:12px;font-weight:600;color:var(--tx);
             background:var(--tx-soft);border-radius:5px;padding:4px 11px}
.grp-hd .tag.ok{color:var(--ex);background:var(--ex-soft)}

/* 세율 헤더 — A안의 핵심. 표를 세율로 쪼개고 헤더를 진하게 채운다.
 * ⚠ 이 색이 cont_tax_type 과 어긋나면 세무 사고다. 값에서 클래스를 유도할 것. */
.tax{display:flex;align-items:center;gap:11px;padding:9px 15px;color:#fff}
.tax.ex{background:var(--ex)} .tax.tx{background:var(--tx)}
.tax .t{font-size:14.5px;font-weight:700}
.tax .c{font-size:12.5px;opacity:.85}
.tax .amt{margin-left:auto;font-size:16px;font-weight:700;letter-spacing:-.02em}
.tax .vat{font-size:12px;opacity:.85;margin-left:9px}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;font-weight:600;color:var(--mute);padding:8px 12px;
   background:#FBFCF9;border-bottom:1px solid var(--rule2);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--rule2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBF8}
tbody tr.chg{background:var(--mark-soft)}
tbody tr.chg:hover{background:#FBEDE2}
.num{text-align:right;white-space:nowrap}
.q{font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.q .u{font-size:12px;color:var(--mute);font-weight:400;margin-left:3px}
.money{font-size:15px;font-weight:700;letter-spacing:-.02em}
.cost{font-size:13px;color:var(--ink2)}
.nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.nm .cd{font-size:12px;color:var(--mute);font-weight:400}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mark);flex:none}
tr.same .nm{padding-left:15px}
.src{font-size:12.5px;color:var(--ink2)}
.src .ar{color:var(--mute);margin-right:5px}
tr.same .src{color:var(--mute)}
.op{display:inline-block;font-size:12px;font-weight:600;color:var(--mark);background:#fff;
    border:1px solid #F0D2BC;border-radius:5px;padding:2px 9px;white-space:nowrap}
.op.none{color:var(--mute);background:transparent;border-color:var(--rule2);font-weight:400}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--ex);cursor:pointer}

/* ── 확인 필요 카드 ── */
.card{background:var(--surf);border:1px solid var(--rule);border-left:4px solid var(--mark);
      border-radius:7px;padding:17px 19px;margin-bottom:12px}
.card h3{font-size:15.5px;font-weight:700;margin-bottom:5px;letter-spacing:-.015em}
.card p{font-size:13.5px;color:var(--ink2);margin-bottom:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px;
    background:var(--bg);border-radius:6px;padding:13px 15px}
.kv dt{color:var(--mute)}.kv dd{color:var(--ink)}
.kv dd b{color:var(--mark);font-weight:700}
.acts{display:flex;gap:8px;margin-top:14px}
.mini{border:1px solid var(--rule);border-radius:6px;padding:8px 15px;font-size:13.5px;
      font-weight:600;background:var(--surf)}
.mini:hover{border-color:var(--ink2)}
.mini.key{background:var(--ink);color:#fff;border-color:var(--ink)}

.tg{font-size:12px;font-weight:700;padding:2px 9px;border-radius:10px}
.tg.ex{background:var(--ex-soft);color:var(--ex)}
.tg.tx{background:var(--tx-soft);color:var(--tx)}

/* ── 빈 상태 (화면사양 3-5) ──
 * 발주 0건인 날이 영업일의 37%다. 빈 화면이 수집 실패와 구분되지 않으면
 * 담당자가 매번 ERP를 다시 연다. 그래서 문구를 다르게 준다. */
.empty{background:var(--surf);border:1px solid var(--rule);border-radius:7px;
       padding:52px 24px;text-align:center}
.empty .ic{font-size:26px;opacity:.35;margin-bottom:12px}
.empty h3{font-size:15px;font-weight:600;margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--mute);line-height:1.65}

/* 파일 투입 영역 — 발주서 읽기 탭의 기본 상태는 문구가 아니라 이것이다 */
.drop{background:var(--surf);border:2px dashed var(--rule);border-radius:9px;
      padding:46px 24px;text-align:center;transition:border-color .12s,background .12s}
.drop.over{border-color:var(--ex);background:var(--ex-soft)}
.drop .ic{font-size:26px;opacity:.4;margin-bottom:12px}
.drop h3{font-size:15px;font-weight:600;margin-bottom:6px}
.drop p{font-size:13.5px;color:var(--mute);margin-bottom:15px}

/* ── 배너 ── */
.banner{border-radius:7px;padding:13px 16px;margin-bottom:14px;font-size:13.5px;
        display:flex;align-items:flex-start;gap:10px;line-height:1.6}
.banner b{font-weight:700}
.banner.warn{background:var(--warn-soft);border:1px solid #F0D2BC;color:#7A3712}
.banner.fail{background:var(--tx-soft);border:1px solid #EDCBC1;color:var(--tx)}
.banner.ok{background:var(--ex-soft);border:1px solid #C9E2D8;color:var(--ex)}
.banner .ic{flex:none}

/* ── 하단 ── */
.bar{flex:none;background:var(--surf);border-top:1px solid var(--rule);display:flex;
     align-items:center;gap:16px;padding:12px 18px}
.pill{border:1px solid var(--rule);border-radius:6px;padding:6px 13px;font-size:13px;
      font-weight:600;background:var(--bg)}
.calc{font-size:13.5px;color:var(--ink2)}
.calc b{font-weight:700;color:var(--ink)}
.calc .big{font-size:17px;font-weight:700;letter-spacing:-.025em;margin-left:4px}
.calc .vat{font-size:12.5px;color:var(--mute);margin-left:8px}
.acts-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.go{background:var(--ex);color:#fff;padding:11px 30px;border-radius:7px;
    font-weight:700;font-size:15px;letter-spacing:-.015em}
.go:hover{background:#124E3D}
.go:active{transform:translateY(1px)}
.go[disabled]{background:var(--mute);cursor:not-allowed}
.ghost{border:1px solid var(--rule);border-radius:7px;padding:10px 16px;font-size:13.5px;font-weight:600}
.ghost:hover{border-color:var(--ink2)}

/* ── 로그인 ── */
.gate{flex:1;display:grid;place-items:center;padding:24px}
.gate form{background:var(--surf);border:1px solid var(--rule);border-radius:10px;
           padding:32px 34px;width:100%;max-width:352px}
.gate .brand{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.gate .brand .app{width:22px;height:22px;border-radius:5px;background:var(--ex);color:#fff;
                  font-size:12px;font-weight:700;display:grid;place-items:center}
.gate .brand h1{font-size:16.5px;font-weight:700;letter-spacing:-.02em}

/* ── 폼 (로그인·설정 공통) ── */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.fld input,.fld select{width:100%;border:1px solid var(--rule);border-radius:6px;
                       padding:9px 11px;font:inherit;font-size:13.5px;background:var(--surf);color:var(--ink)}
.fld input:focus,.fld select:focus{border-color:var(--ex);outline:none}
.fld .help{font-size:12px;color:var(--mute);margin-top:5px;line-height:1.55}
.fld .set{font-size:12px;font-weight:600;color:var(--ex);margin-left:6px}
.fld .unset{font-size:12px;font-weight:600;color:var(--mute);margin-left:6px}
.err{font-size:13px;color:var(--tx);background:var(--tx-soft);border:1px solid #EDCBC1;
     border-radius:6px;padding:9px 12px;margin-bottom:14px}
.submit{width:100%;background:var(--ex);color:#fff;padding:11px;border-radius:7px;
        font-weight:700;font-size:14.5px}
.submit:hover{background:#124E3D}

/* ── 설정 ── */
.sect{background:var(--surf);border:1px solid var(--rule);border-radius:7px;
      overflow:hidden;margin-bottom:14px}
.sect-hd{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#FAFBF8;
         border-bottom:1px solid var(--rule)}
.sect-hd h2{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.sect-hd .note{font-size:12.5px;color:var(--mute)}
.sect-hd .act{margin-left:auto}
.sect-bd{padding:16px 18px 6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:900px){.two{grid-template-columns:1fr}}