/* (주)늘푸른 수주등록 — 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:13.5px;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 .home{display:flex;align-items:center;gap:9px}
.top .home:hover .ttl{color:var(--ink)}
.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 .right{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px}
/* 세 항목의 글자 밑선이 어긋나던 문제 — `.lnk` 만 밑줄 자리(border+padding)를 갖고
   있어 가운데 정렬 시 「홍길동 님」보다 1px 떠 보였다. 상자를 통일한다. */
.top .right>*{display:block;line-height:18px;
              border-bottom:1px solid transparent;padding-bottom:1px}
.top .who{color:var(--ink2)}
.top .who b{font-weight:600;color:var(--ink)}
.top .lnk{color:var(--ink2)}
.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:12.5px;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:12.5px;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:11.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:12.5px;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:14.5px;font-weight:600;letter-spacing:-.01em}
.tool .hint{font-size:12.5px;color:var(--mute)}
/* 도구줄 오른쪽 묶음 — 「발주 불러오기」와 보기 토글이 같이 붙는다 */
.tool-act{margin-left:auto;display:flex}
.tool-act+.seg{margin-left:10px}
.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:14.5px;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:12.5px;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 과 어긋나면 세무 사고다. 값에서 클래스를 유도할 것. */
/* 날짜 묶음 안쪽 — 세율 카드가 서로 떨어져 있어야 경계가 보인다.
   여기서 갈린 하나하나가 MES 수주 1건이고 세금계산서 1장이다. */
.grp-bd{padding:11px;display:flex;flex-direction:column;gap:11px;background:var(--bg)}
.blk{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--surf)}
.blk.ex{border-color:#BBD3C6}
.blk.tx{border-color:#E6C6BC}
/* 카드 마지막 행의 밑줄은 카드 테두리와 겹친다 */
.blk table tbody tr:last-child td{border-bottom:none}

.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:17px;font-weight:700;letter-spacing:-.02em}
.tax .vat{font-size:12.5px;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:12.5px;color:var(--mute);font-weight:400;margin-left:3px}
.money{font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.cost{font-size:13.5px;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:12.5px;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:12.5px;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}

/* ── 확인 필요 ──────────────────────────────────────────────────
 * 문장이 아니라 표다. 예전에는 카드마다 같은 설명문이 반복되고
 * 「수량 4,159 → 4,158」이 문장 속에 묻혀 있었다. 지금은 등록값과 발주값을
 * 두 열로 놓아 눈이 좌우로만 움직이면 된다. */
.sec-t{font-size:12.5px;font-weight:700;color:var(--mute);letter-spacing:.04em;
       margin:2px 0 9px}
.sec-t+.rv{margin-top:0}

.rv{background:var(--surf);border:1px solid var(--rule);border-radius:8px;
    overflow:hidden;margin-bottom:12px}
.rv.ex{border-left:3px solid var(--ex)}
.rv.tx{border-left:3px solid var(--tx)}

.rv-hd{display:flex;align-items:center;gap:11px;padding:11px 15px;background:#FAFBF8;
       border-bottom:1px solid var(--rule)}
.rv-hd .date{font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.rv-hd .cont{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-hd .acts{margin-left:auto;display:flex;gap:7px;flex:none;margin-top:0}

.rv-sub{display:flex;align-items:center;gap:10px;padding:10px 15px;
        border-top:1px solid var(--rule);background:#FAFBF8}
.rv-sub .date{font-size:13.5px;font-weight:600}
.rv-sub .cont{font-size:12.5px;color:var(--mute)}

.rv-ft{padding:10px 15px;background:#FAFBF8;border-top:1px solid var(--rule2);
       font-size:12.5px;color:var(--ink2);display:flex;align-items:flex-start;gap:8px;
       line-height:1.7}
.rv-ft.warn{color:var(--tx);background:var(--tx-soft)}
.rv-ft.move{color:var(--mark);background:var(--mark-soft)}
.rv-ft b{color:inherit;font-weight:700}
.rv-ft .ic{flex:none}

/* 비교 표 — 왼쪽은 지나간 값, 오른쪽은 맞춰야 할 값 */
.cmp{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cmp th{text-align:left;font-size:11.5px;font-weight:600;color:var(--mute);
        padding:8px 14px;border-bottom:1px solid var(--rule);background:var(--surf)}
.cmp th.num{text-align:right}
.cmp td{padding:10px 14px;border-bottom:1px solid var(--rule2);vertical-align:middle}
.cmp tr:last-child td{border-bottom:none}
.cmp td.num{text-align:right}
.cmp .nm{font-size:13.5px;display:inline;font-weight:600}
.cmp .cd{font-size:11.5px;color:var(--mute);font-weight:400;margin-left:6px}
.was{color:var(--mute);font-size:13.5px}
.was s{text-decoration-color:#C9CDD2}
.now{color:var(--ink);font-weight:700;font-size:13.5px}
.none{color:#BFC4C9;font-size:12.5px}

/* 달라진 종류 — 배지 하나로 끝낸다. 문장으로 쓰면 표가 아니라 글이 된다 */
.why{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:5px;
     white-space:nowrap;display:inline-block}
.why.up{background:var(--mark-soft);color:var(--mark)}
.why.gone{background:var(--tx-soft);color:var(--tx)}
.why.new{background:var(--ex-soft);color:var(--ex)}
.why.move{background:var(--hl);color:#1D4E77}

.cmp select{font:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--rule);
            border-radius:6px;background:var(--surf);color:var(--ink)}
.cmp select:focus{border-color:var(--ex);outline:none}

.rv>summary{padding:12px 15px;font-size:13.5px;color:var(--ink2);
            display:flex;align-items:center;gap:8px}
.rv>summary b{color:var(--ink)}

.scroll{overflow-x:auto}

.acts{display:flex;gap:8px;margin-top:14px}
/* 버튼은 세 단계다 — 주요 / 보통 / 조용.
 * 같은 무게의 동작인데 화면마다 다른 모양이면 무엇이 중요한지 매번 다시 판단해야 한다.
 * **한 화면에 진한 버튼은 하나만.** 클래스 이름은 그대로 두고 모양만 모은다. */
.mini,.ghost{border:1px solid var(--rule);border-radius:6px;padding:8px 15px;
             font-size:13.5px;font-weight:600;background:var(--surf);color:var(--ink2)}
.mini:hover:not(:disabled),.ghost:hover:not(:disabled){border-color:var(--ink2);color:var(--ink)}
.mini:disabled,.ghost:disabled{opacity:.45;cursor:default}
.mini.key{background:var(--ink);color:#fff;border-color:var(--ink)}
.mini.key:hover:not(:disabled){background:#000;color:#fff}

.tg{font-size:12.5px;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:14.5px;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:14.5px;font-weight:600;margin-bottom:6px}
.drop p{font-size:13.5px;color:var(--mute);margin-bottom:15px}
/* 글로 온 발주서 붙여넣기 칸 — 카톡 발주는 사진만 오지 않는다 */
textarea{width:100%;border:1px solid var(--rule);border-radius:6px;padding:10px 12px;
         font:inherit;font-size:13.5px;line-height:1.6;background:var(--surf);color:var(--ink);
         resize:vertical}
textarea:focus{border-color:var(--ex);outline:none}

/* ── 배너 ── */
.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}
/* 네 단계 — 색이 아니라 **담당자가 취할 행동**이 기준이다.
 *   ok    끝났다. 읽고 넘어가면 된다
 *   info  알아두면 된다. 지금 할 일은 없다
 *   warn  확인이 필요하다. 안 하면 기능이 동작하지 않는다
 *   fail  멈췄다. 고치기 전에는 진행할 수 없다 */
.banner.ok{background:var(--ex-soft);border:1px solid #C9E2D8;color:var(--ex)}
.banner.info{background:var(--hl);border:1px solid #CBDDEB;color:#1D4E77}
.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 .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:13.5px;
      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:14.5px;letter-spacing:-.015em}
.go:hover{background:#124E3D}
.go:active{transform:translateY(1px)}
.go[disabled]{background:var(--mute);cursor:not-allowed}

/* ── 로그인 ── */
.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:12.5px;font-weight:700;display:grid;place-items:center}
.gate .brand h1{font-size:17px;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:12.5px;color:var(--mute);margin-top:5px;line-height:1.55}
.fld .set{font-size:12.5px;font-weight:600;color:var(--ex);margin-left:6px}
/* 접이식 — 거래처가 많은 표를 기본으로 접어 둔다 */
details summary{list-style:none;user-select:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"▸ ";color:var(--mute)}
details[open] summary::before{content:"▾ "}
details summary:hover{color:var(--ink)}

/* 읽기 전용 값(버전 등) — 입력칸과 같은 자리를 쓰되 만질 수 없다는 것이 보이게 */
.fld .ro{border:1px solid var(--rule);border-radius:6px;padding:9px 11px;
         font-size:13.5px;background:var(--bg);color:var(--ink2)}
.fld .unset{font-size:12.5px;font-weight:600;color:var(--mute);margin-left:6px}
.err{font-size:13.5px;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}

/* ── 모달 (거래처 조회 등) ── */
.modal-back{position:fixed;inset:0;background:rgba(22,24,26,.45);display:none;
            align-items:flex-start;justify-content:center;padding-top:12vh;z-index:50}
.modal-back.on{display:flex}
.modal{background:var(--surf);border-radius:10px;width:min(560px,92vw);
       max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
       box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;
          border-bottom:1px solid var(--rule2)}
.modal-hd h3{font-size:14.5px;font-weight:700}
.modal-hd .src{margin-left:auto;font-size:12.5px;color:var(--mute)}
.modal-bd{overflow-y:auto;padding:6px 0}
.modal-item{display:flex;gap:10px;width:100%;padding:10px 18px;text-align:left;
            font-size:13.5px;align-items:baseline}
.modal-item:hover{background:var(--hl)}
.modal-item .cd{color:var(--mute);font-size:12.5px;margin-left:auto}
.modal-empty{padding:22px 18px;font-size:13.5px;color:var(--mute);text-align:center}

/* ── 설정 ── */
.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}}