.saver-ui{--paper:#f6f4ef;--paper-2:#fbfaf6;--sidebar:#efece4;--ink:#1b1a16;--ink-soft:#6d6a5f;--ink-faint:#9a978c;
    --rule:#d8d4c8;--green:#14663a;--green-dim:#e8f0ea;
    --stamp:#c0392b;--stamp-dim:#fbece9;--gold:#9a7b2e;
    --sb:236px;--sb-min:66px;
    --sans:"Pretendard","Pretendard Variable",-apple-system,system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--serif:"Noto Serif KR",serif;}
.saver-ui *{box-sizing:border-box;margin:0;padding:0}
.saver-ui{-webkit-text-size-adjust:100%}
.saver-ui{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;letter-spacing:-.005em}
.saver-ui a{color:inherit;text-decoration:none}
.saver-ui svg{display:block}
.saver-ui .app{display:flex;min-height:100vh}
.saver-ui .sidebar{width:var(--sb);flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
    background:var(--sidebar);border-right:2px solid var(--ink);display:flex;flex-direction:column;transition:width .2s}
.saver-ui .app.collapsed .sidebar{width:var(--sb-min)}
.saver-ui .sb-head{display:flex;align-items:center;gap:10px;padding:18px 16px 16px;border-bottom:2px solid var(--ink)}
.saver-ui .sb-brand{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.saver-ui .sb-brand .co{color:var(--green)}
.saver-ui .collapse-btn{margin-left:auto;width:28px;height:28px;border:1px solid var(--rule);background:var(--paper-2);border-radius:6px;
    display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);flex:none;transition:.14s}
.saver-ui .collapse-btn:hover{border-color:var(--ink);color:var(--ink)}
.saver-ui .app.collapsed .collapse-btn svg{transform:rotate(180deg)}
.saver-ui .app.collapsed .sb-brand{opacity:0;width:0}
.saver-ui .sb-nav{flex:1;padding:10px 10px 16px}
.saver-ui .sb-group{padding:10px 0 6px;border-bottom:1px solid var(--rule)}
.saver-ui .sb-group:last-child{border-bottom:none}
.saver-ui .sb-glabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:4px 8px 8px;white-space:nowrap;overflow:hidden}
.saver-ui .app.collapsed .sb-glabel{height:10px;padding:4px 0 8px;text-align:center;color:var(--rule)}
.saver-ui .app.collapsed .sb-glabel span{display:none}
.saver-ui .app.collapsed .sb-glabel::after{content:"·";color:var(--ink-faint)}
.saver-ui .sb-link{position:relative;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:7px;color:var(--ink-soft);
    font-family:var(--mono);font-size:12px;white-space:nowrap;transition:.13s;margin:1px 0}
.saver-ui .sb-link:hover{background:var(--paper-2);color:var(--ink)}
.saver-ui .sb-link .ico{width:19px;height:19px;flex:none;color:var(--ink-faint);transition:.13s}
.saver-ui .sb-link:hover .ico{color:var(--ink-soft)}
.saver-ui .sb-link .lbl{overflow:hidden;transition:opacity .15s}
.saver-ui .sb-link .badge{margin-left:auto;font-size:10px;color:#fff;background:var(--stamp);border-radius:99px;padding:1px 7px;font-weight:600}
.saver-ui .sb-link.on{color:var(--green);font-weight:600;background:var(--green-dim)}
.saver-ui .sb-link.on .ico{color:var(--green)}
.saver-ui .sb-link.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--green);border-radius:0 3px 3px 0}
.saver-ui .app.collapsed .sb-link{justify-content:center;padding:9px 0}
.saver-ui .app.collapsed .sb-link .lbl, .saver-ui .app.collapsed .sb-link .badge{opacity:0;width:0;overflow:hidden}
.saver-ui .app.collapsed .sb-link.on .badge{opacity:1;width:auto;position:absolute;top:3px;right:8px;padding:0 5px;font-size:9px}
.saver-ui .sb-foot{padding:14px 16px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-faint);white-space:nowrap;overflow:hidden}
.saver-ui .app.collapsed .sb-foot{text-align:center;padding:14px 4px}
.saver-ui .app.collapsed .sb-foot .fl{display:none}
.saver-ui .topbar{display:none}
.saver-ui .scrim{display:none}
.saver-ui .main{flex:1;min-width:0}
.saver-ui .inner{max-width:900px;margin:0 auto;padding:0 30px 72px}
.saver-ui .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.saver-ui .hero{padding:34px 0 4px}
.saver-ui .hero .kicker{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.saver-ui .hero h1{font-family:var(--serif);font-size:clamp(30px,6vw,46px);font-weight:700;line-height:1.05;margin:20px 0 5px;letter-spacing:-.01em}
.saver-ui .hero .dek{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.saver-ui .figrow{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:26px}
.saver-ui .figure{min-width:170px}
.saver-ui .figure .big{font-family:var(--serif);font-size:clamp(56px,12vw,88px);font-weight:700;line-height:.85;color:var(--green)}
.saver-ui .figure .big small{font-size:.34em;color:var(--ink-faint);font-weight:500}
.saver-ui .figure .cap{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:10px}
.saver-ui .figure .cap b{color:var(--green)}
.saver-ui .manifest{margin-left:auto;flex:1;min-width:260px}
.saver-ui .manifest .mh{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:8px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between}
.saver-ui .mrow{display:flex;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--rule);transition:.14s background}
.saver-ui .mrow:hover{background:var(--paper-2)}
.saver-ui .mrow .mode{font-family:var(--mono);font-size:12px;color:var(--ink-soft);width:78px;flex:none;display:flex;align-items:center;gap:6px}
.saver-ui .mrow .ono{font-family:var(--mono);font-size:12.5px;font-weight:500}
.saver-ui .mrow .amt{font-family:var(--mono);font-size:12.5px;margin-left:auto;color:var(--ink)}
.saver-ui .mrow .stwrap{width:56px;text-align:right;flex:none}
.saver-ui .stamp{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;padding:2px 7px;border-radius:3px;border:1.5px solid var(--stamp);color:var(--stamp);transform:rotate(-4deg);white-space:nowrap}
.saver-ui .stamp.ok{color:var(--green);border-color:var(--green);transform:none}
.saver-ui .strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.saver-ui .strip a{padding:18px 4px 16px;border-right:1px solid var(--rule);transition:.14s background;position:relative}
.saver-ui .strip a:last-child{border-right:none}
.saver-ui .strip a:hover{background:var(--paper-2)}
.saver-ui .strip .v{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1}
.saver-ui .strip .k{font-size:11.5px;color:var(--ink-soft);margin-top:5px}
.saver-ui .strip a.alert .v{color:var(--stamp)}
.saver-ui .strip a .go{position:absolute;top:16px;right:8px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);opacity:0;transition:.14s}
.saver-ui .strip a:hover .go{opacity:1}
.saver-ui .sec{margin-top:44px}
.saver-ui .sechead{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:9px}
.saver-ui .sechead h2{font-family:var(--serif);font-size:20px;font-weight:700}
.saver-ui .sechead a{font-family:var(--mono);font-size:11.5px;color:var(--green);letter-spacing:.04em}
.saver-ui .sechead a:hover{text-decoration:underline}
.saver-ui table.ledger{width:100%;border-collapse:collapse}
.saver-ui .ledger thead th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);text-align:left;font-weight:500;padding:12px 6px}
.saver-ui .ledger thead th.r{text-align:right}
.saver-ui .ledger thead tr{border-bottom:1px solid var(--rule)}
.saver-ui .ledger tbody td{padding:15px 6px;border-bottom:1px solid var(--rule);vertical-align:middle}
.saver-ui .ledger tbody tr{cursor:pointer;transition:.13s background}
.saver-ui .ledger tbody tr:hover{background:var(--paper-2)}
.saver-ui .ledger .ono{font-family:var(--mono);font-size:14px;font-weight:500}
.saver-ui .ledger .date{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.saver-ui .ledger .route{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.saver-ui .ledger td.r{text-align:right}
.saver-ui .ledger .qty{font-family:var(--mono);color:var(--ink-soft)}
.saver-ui .ledger .won{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:-.01em}
.saver-ui .ledger .won .cur{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-weight:400;margin-right:2px}
.saver-ui .notice{margin-top:16px;border:1.5px solid var(--stamp);background:var(--stamp-dim);border-radius:8px;padding:18px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.saver-ui .notice .seal{width:52px;height:52px;border-radius:50%;border:2px solid var(--stamp);color:var(--stamp);display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-align:center;line-height:1.15;transform:rotate(-8deg);flex:none}
.saver-ui .notice .txt{min-width:0}
.saver-ui .notice .txt .t{font-family:var(--serif);font-size:16px;font-weight:600}
.saver-ui .notice .txt .m{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:3px}
.saver-ui .notice .cta{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--stamp);font-weight:600;border:1.5px solid var(--stamp);border-radius:6px;padding:9px 15px;transition:.15s;white-space:nowrap}
.saver-ui .notice .cta:hover{background:var(--stamp);color:#fff}
.saver-ui .quick{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border-top:1px solid var(--rule)}
.saver-ui .quick a{padding:18px 4px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);display:flex;align-items:center;gap:12px;transition:.14s background}
.saver-ui .quick a:last-child{border-right:none}
.saver-ui .quick a:hover{background:var(--paper-2)}
.saver-ui .quick .qn{color:var(--green);flex:none;display:grid;place-items:center}
.saver-ui .quick .qt{font-size:13.5px;font-weight:600}
.saver-ui .quick .qd{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:1px}
.saver-ui .quick .arr{margin-left:auto;font-family:var(--mono);color:var(--ink-faint);transition:.14s}
.saver-ui .quick a:hover .arr{color:var(--green);transform:translateX(2px)}
.saver-ui .colophon{margin-top:40px;padding-top:16px;border-top:2px solid var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (max-width:900px){.saver-ui .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40;background:var(--paper);
      border-bottom:2px solid var(--ink);padding:12px 16px}
.saver-ui .hamb{width:34px;height:34px;border:1px solid var(--rule);background:var(--paper-2);border-radius:7px;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.saver-ui .topbar .tb-brand{font-family:var(--serif);font-weight:700;font-size:19px}
.saver-ui .topbar .tb-brand .co{color:var(--green)}
.saver-ui .topbar .tb-meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.saver-ui .sidebar{position:fixed;left:0;top:0;height:100%;z-index:60;width:var(--sb);transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 40px -10px rgba(0,0,0,.4)}
.saver-ui .app.drawer-open .sidebar{transform:none}
.saver-ui .collapse-btn{display:none}
.saver-ui .scrim{display:block;position:fixed;inset:0;background:rgba(27,26,22,.42);z-index:55;opacity:0;visibility:hidden;transition:.2s}
.saver-ui .app.drawer-open .scrim{opacity:1;visibility:visible}
.saver-ui .inner{padding:0 20px 64px}
}
@media (max-width:560px){.saver-ui .strip{grid-template-columns:repeat(2,1fr)}
.saver-ui .strip a:nth-child(2){border-right:none}
.saver-ui .strip a:nth-child(1), .saver-ui .strip a:nth-child(2){border-bottom:1px solid var(--rule)}
.saver-ui .quick{grid-template-columns:1fr}
.saver-ui .quick a{border-right:none}
.saver-ui .manifest{margin-left:0}
.saver-ui .ledger .qty-col, .saver-ui .ledger .qty-cell{display:none}
}
.saver-ui .inner.wide{max-width:1180px}
.saver-ui .inner.wide{padding-top:26px}
.saver-ui .inner h1{font-family:var(--serif)}
.saver-ui .inner p{margin:0}
.saver-ui .inner .container{max-width:none;margin:0;padding:0}

/* ============ 앱 공통 컴포넌트 (에디토리얼) ============ */
.saver-ui .page-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding:26px 0 12px;margin-bottom:22px}
.saver-ui .page-head h1{font-family:var(--serif);font-size:clamp(24px,4vw,32px);font-weight:700;line-height:1.05}
.saver-ui .page-head .sub{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.saver-ui .page-head .ha{font-family:var(--mono);font-size:11.5px;color:var(--green)}

/* 버튼 */
.saver-ui .ebtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;font-weight:500;
  border:1.5px solid var(--ink);background:var(--paper-2);color:var(--ink);border-radius:6px;padding:9px 15px;cursor:pointer;
  white-space:nowrap;transition:.14s;line-height:1}
.saver-ui .ebtn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.saver-ui .ebtn.primary{background:var(--green);border-color:var(--green);color:#fff}
.saver-ui .ebtn.primary:hover{filter:brightness(1.12)}
.saver-ui .ebtn.ghost{border-color:var(--rule);background:transparent}
.saver-ui .ebtn.ghost:hover{border-color:var(--ink);background:var(--paper-2);color:var(--ink)}
.saver-ui .ebtn.danger{border-color:var(--stamp);color:var(--stamp);background:transparent}
.saver-ui .ebtn.danger:hover{background:var(--stamp);color:#fff}
.saver-ui .ebtn.sm{padding:6px 11px;font-size:11.5px}

/* 폼 컨트롤 */
.saver-ui input[type=text],.saver-ui input[type=number],.saver-ui input[type=date],
.saver-ui input[type=search],.saver-ui input:not([type]),.saver-ui select,.saver-ui textarea{
  font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:6px;padding:9px 11px;width:100%;transition:.14s}
.saver-ui input:focus,.saver-ui select:focus,.saver-ui textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-dim)}
.saver-ui select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314663a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.saver-ui input[type=file]{border:none;background:none;padding:0;font-family:var(--mono);font-size:12px;color:var(--ink-soft);width:auto}
.saver-ui input[type=checkbox]{width:16px;height:16px;accent-color:var(--green);cursor:pointer}
.saver-ui .field{display:flex;flex-direction:column;gap:6px}
.saver-ui .field > label,.saver-ui .flabel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}

/* 필터/툴바 */
.saver-ui .toolbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
  border:1px solid var(--rule);background:var(--paper-2);border-radius:8px;padding:16px 18px;margin-bottom:22px}
.saver-ui .toolbar .field{min-width:130px}

/* 패널(카드 대체) */
.saver-ui .panel{border:1px solid var(--rule);background:var(--paper-2);border-radius:8px;padding:20px 22px;margin-bottom:22px}
.saver-ui .panel.flat{background:transparent}

/* 알림 */
.saver-ui .ealert{font-family:var(--mono);font-size:12.5px;border-radius:7px;padding:13px 16px;margin-bottom:18px;border:1.5px solid}
.saver-ui .ealert.err{border-color:var(--stamp);background:var(--stamp-dim);color:var(--stamp)}
.saver-ui .ealert.ok{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.saver-ui .ealert.warn{border-color:var(--gold);background:#f7f1e2;color:var(--gold)}

/* 스탬프 변형 */
.saver-ui .stamp.warn{color:var(--gold);border-color:var(--gold);transform:none}

/* ledger 우측정렬/숫자 보조 */
.saver-ui .ledger td.r,.saver-ui .ledger th.r{text-align:right}
.saver-ui .ledger .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.saver-ui .ledger a{color:var(--green)}
.saver-ui .ledger .empty{text-align:center;color:var(--ink-faint);padding:40px 6px;font-family:var(--mono)}

/* 썸네일 */
.saver-ui .ethumb{width:44px;height:44px;object-fit:cover;border:1px solid var(--rule);border-radius:5px;background:var(--paper)}

/* 반응형: ledger 가로 스크롤 래퍼 */
.saver-ui .tscroll{overflow-x:auto}
@media(max-width:700px){
  .saver-ui .ledger{min-width:640px}
}

/* rate-mode 세그먼트 토글 (에디토리얼) */
.saver-ui .seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.saver-ui .seg label{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font-family:var(--mono);
  font-size:12px;color:var(--ink-soft);cursor:pointer;transition:.13s;background:var(--paper-2)}
.saver-ui .seg label:has(input:checked){background:var(--green);color:#fff}
.saver-ui .seg input{width:auto;position:absolute;opacity:0}
.saver-ui .rate-mode{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 6px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.saver-ui .form-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}
.saver-ui .form-grid .hint{font-family:var(--mono);font-size:10.5px;color:var(--green);min-height:14px}
.saver-ui .form-grid label[hidden]{display:none}
.saver-ui .req{color:var(--stamp)}
.saver-ui .pn{font-family:var(--mono);font-size:12px}
.saver-ui .pn.need{border-color:var(--gold);background:#f7f1e2}
.saver-ui .cn-zh{font-size:12.5px;color:var(--ink);max-width:340px;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.saver-ui .cn-ko{font-size:11px;color:var(--green);margin-top:3px;max-width:340px;overflow-wrap:anywhere;line-height:1.5}
.saver-ui tr.unmapped td{background:#f7f1e2}
@media(max-width:760px){.saver-ui .form-grid{grid-template-columns:repeat(2,1fr)}}

/* 지출결의서 요약 박스 */
.saver-ui .expense-box{width:100%;min-height:150px;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  white-space:pre;background:var(--paper-2);border:1px solid var(--rule);border-radius:7px;padding:13px 15px;
  color:var(--ink);resize:vertical}
.saver-ui .expense-box:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
.saver-ui .ledger tfoot td{border-top:2px solid var(--ink);padding-top:14px;font-family:var(--mono)}
.saver-ui .ledger .strong{color:var(--green);font-weight:700}

/* ============ 판매량 차트 (에디토리얼) ============ */
.saver-ui .figrow2{display:flex;align-items:flex-end;gap:40px;flex-wrap:wrap;padding:8px 0 26px;border-bottom:2px solid var(--ink);margin-bottom:26px}
.saver-ui .egauge{--p:0;position:relative;width:118px;height:118px;flex:none;border-radius:50%;
  background:conic-gradient(var(--green) calc(var(--p)*1%), var(--rule) 0)}
.saver-ui .egauge::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--paper)}
.saver-ui .egauge .gin{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.saver-ui .egauge .gp{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--green);line-height:1}
.saver-ui .egauge .gl{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:2px}
.saver-ui .edonut{position:relative;width:118px;height:118px;flex:none;border-radius:50%}
.saver-ui .edonut .hole{position:absolute;inset:24px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  font-family:var(--serif);font-size:19px;font-weight:700}
.saver-ui .dlegend{list-style:none;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12px}
.saver-ui .dlegend li{display:flex;align-items:center;gap:8px}
.saver-ui .dlegend i{width:10px;height:10px;border-radius:2px;flex:none}
.saver-ui .dlegend .ln{flex:1;color:var(--ink)}
.saver-ui .dlegend .lv{font-weight:600}

/* 연도 탭 */
.saver-ui .etabs{display:inline-flex;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
.saver-ui .etabs a{padding:7px 14px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--paper-2);border-right:1px solid var(--rule)}
.saver-ui .etabs a:last-child{border-right:none}
.saver-ui .etabs a:hover{background:var(--paper);color:var(--ink);text-decoration:none}
.saver-ui .etabs a.on{background:var(--green);color:#fff}

/* 월별 세로 막대 */
.saver-ui .mchart{display:flex;align-items:stretch;gap:6px;height:180px;margin-top:16px}
.saver-ui .mcol2{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;text-decoration:none}
.saver-ui a.mcol2:hover .mb{filter:brightness(1.1)}
.saver-ui .mv{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--green);height:15px}
.saver-ui .mbw{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.saver-ui .mb{width:62%;max-width:30px;background:var(--green);border-radius:3px 3px 0 0;min-height:3px;transition:.4s}
.saver-ui .mb.z{background:var(--rule)}
.saver-ui .mb.on{background:var(--ink)}
.saver-ui .ml{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:7px}
.saver-ui .mcol2.on .ml{color:var(--green);font-weight:700}

/* 제품 가로 막대 */
.saver-ui .pbar{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.saver-ui .prow{display:grid;grid-template-columns:24px 130px 1fr 44px;align-items:center;gap:12px}
.saver-ui .prow .rk{font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:center}
.saver-ui .prow .pn2{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saver-ui .ptrack{height:18px;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;overflow:hidden;display:flex}
.saver-ui .pfill{height:100%;display:flex;min-width:2px}
.saver-ui .pfill .sd{background:var(--green)}
.saver-ui .pfill .sw{background:repeating-linear-gradient(45deg,var(--rule),var(--rule) 4px,#e8e4d8 4px,#e8e4d8 8px)}
.saver-ui .prow .pv{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--green);text-align:right}
.saver-ui .ysum2{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.saver-ui .ysum2 a{border:1px solid var(--rule);border-radius:7px;padding:10px 16px;background:var(--paper-2);min-width:110px}
.saver-ui .ysum2 a.on{border-color:var(--green);background:var(--green-dim)}
.saver-ui .ysum2 .yy{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.saver-ui .ysum2 .yc{font-family:var(--serif);font-size:22px;font-weight:700}
@media(max-width:760px){.saver-ui .prow{grid-template-columns:20px 88px 1fr 38px;gap:8px}.saver-ui .mchart{height:150px;gap:3px}}

/* ============ 대시보드 카드 래퍼 (옅은 테두리) ============ */
.saver-ui .card{
  background:#fbfaf6;
  border:1px solid #cfcabb;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(27,26,22,.04),0 14px 34px -22px rgba(27,26,22,.28);
}
.saver-ui .hero.card{padding:26px 30px 22px;margin-bottom:20px}
.saver-ui .sec.card{padding:22px 26px 24px;margin-top:0}

/* ============ 가독성: 라벨·표헤더 대비 강화 ============ */
.saver-ui .field > label,.saver-ui .flabel{color:var(--ink-soft);font-weight:600}
.saver-ui .ledger thead th{color:var(--ink-soft);font-weight:600}
.saver-ui .rate-mode{color:var(--ink);font-size:12px}
.saver-ui .manifest .mh,.saver-ui .toolbar .field > label{color:var(--ink-soft)}

/* ============ 스탬프 가독성 + 완료행 처리 ============ */
.saver-ui .stamp{font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-width:1.5px}
/* 완료행: 투명도로 죽이지 않고 글자색만 살짝 눌러 표시 (스탬프는 또렷하게) */
.saver-ui .ledger tr.done{background:var(--paper-2)}
.saver-ui .ledger tr.done td{color:var(--ink-soft)}
.saver-ui .ledger tr.done .stamp{opacity:1}

/* ============ '대기' 스탬프 강조 ============ */
.saver-ui .stamp{color:#9e2b1e;border-color:#9e2b1e;background:var(--stamp-dim);font-weight:700}
/* 완료/확정(초록)·경고(금색)는 배경 없이 기존 톤 유지 */
.saver-ui .stamp.ok{background:transparent;color:var(--green);border-color:var(--green);font-weight:600}
.saver-ui .stamp.warn{background:transparent;color:var(--gold);border-color:var(--gold);font-weight:600}

/* ============ 확정/완료 스탬프도 동일 강도로 강조 ============ */
.saver-ui .stamp.ok{color:#0f4d2b;border-color:#0f4d2b;background:var(--green-dim);font-weight:700}
.saver-ui .stamp.warn{color:#7d6220;border-color:#7d6220;background:#f7f1e2;font-weight:700}

/* ============ 홈 콘텐츠 폭 소폭 확대 (900 → 960) ============ */
.saver-ui .inner{max-width:960px}

/* ============ 판매량 그래프: 값이 클수록 진해지는 색 구간 ============
   경계값은 ship.TIER_BREAKS (0 / 1~9 / 10~29 / 30~49 / 50+) 에서 계산된다.
   높이·크기·위치는 건드리지 않고 색만 단계별로 바뀐다. */

/* 월별 세로 막대 */
.saver-ui .mb.t0{background:#e4e0d4;box-shadow:none}
.saver-ui .mb.t1{background:linear-gradient(180deg,#8fe3a6,#43c96f);box-shadow:0 -1px 4px rgba(67,201,111,.18)}
.saver-ui .mb.t2{background:linear-gradient(180deg,#4fd47e,#1fa94e);box-shadow:0 -1px 6px rgba(31,169,78,.24)}
.saver-ui .mb.t3{background:linear-gradient(180deg,#2fce5f,#12833c);box-shadow:0 -2px 9px rgba(18,131,60,.30)}
.saver-ui .mb.t4{background:linear-gradient(180deg,#28c65a,#0c6e31);box-shadow:0 -2px 12px rgba(12,110,49,.38)}

/* 막대 위 숫자도 같은 단계로 진해짐 */
.saver-ui .mv.v0{color:var(--ink-faint)}
.saver-ui .mv.v1{color:#43c96f}
.saver-ui .mv.v2{color:#1fa94e}
.saver-ui .mv.v3{color:#12833c}
.saver-ui .mv.v4{color:#0c6e31}

/* 선택된 달은 계속 먹색으로 강조 (tier 뒤에 두어 우선 적용) */
.saver-ui .mb.on{background:var(--ink);box-shadow:0 0 0 2px var(--green-dim)}

/* 제품별 가로 막대 채움 (진행중 .sw 빗금은 그대로) */
.saver-ui .pfill .sd.d0{background:#cfe8d6}
.saver-ui .pfill .sd.d1{background:linear-gradient(90deg,#43c96f,#8fe3a6)}
.saver-ui .pfill .sd.d2{background:linear-gradient(90deg,#1fa94e,#4fd47e)}
.saver-ui .pfill .sd.d3{background:linear-gradient(90deg,#12833c,#2fce5f)}
.saver-ui .pfill .sd.d4{background:linear-gradient(90deg,#0c6e31,#28c65a)}

/* 제품 판매량 숫자도 단계별 */
.saver-ui .prow .pv.v0{color:var(--ink-faint)}
.saver-ui .prow .pv.v1{color:#43c96f}
.saver-ui .prow .pv.v2{color:#1fa94e}
.saver-ui .prow .pv.v3{color:#12833c}
.saver-ui .prow .pv.v4{color:#0c6e31}

/* ============ 배경색 고정 (스코프 무관) ============
   .saver-ui 클래스가 없어도(옛 HTML이 캐시된 경우 등) 캔버스는 항상 종이색.
   dashboard.css 가 style.css 뒤에 로드되므로 옛 배경을 확실히 덮는다. */
html,body{background:#f6f4ef}

/* ============ 월 선택 상태를 확실히 구분 ============
   막대 색만으로는 tier 진한초록과 헷갈리므로,
   선택된 컬럼 전체를 테두리+배경으로 감싸고 라벨/숫자도 함께 강조한다. */
.saver-ui .mcol2.on{
  background:var(--green-dim);
  border-radius:8px 8px 0 0;
  box-shadow:inset 0 0 0 1.5px var(--green);
  position:relative;
}
/* 선택 막대: 먹색 + 초록 링으로 tier 색과 확실히 분리 */
.saver-ui .mb.on{
  background:var(--ink);
  box-shadow:0 0 0 2px var(--green), 0 -2px 10px rgba(27,26,22,.35);
}
/* 숫자·월 라벨도 함께 강조 (tier 색보다 우선) */
.saver-ui .mcol2.on .mv{color:var(--ink);font-weight:700}
.saver-ui .mcol2.on .ml{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* 선택 표식(▲) — 레이아웃을 밀지 않도록 절대배치 */
.saver-ui .mcol2.on::after{
  content:"▲";
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:-2px;font-size:8px;color:var(--green);line-height:1;
}
/* 선택 안내 배너 */
.saver-ui .selbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  border:1.5px solid var(--green);background:var(--green-dim);border-radius:7px;padding:10px 14px;
  font-family:var(--mono);font-size:12px;color:var(--green);font-weight:600;
}

/* ============ 작은 글씨 가독성 개선 ============
   10px + 자간 0.12em 은 한글에서 흐릿하게 보인다.
   크기를 키우고 자간을 줄이고 색을 진하게. (레이아웃은 그대로) */

/* 폼 라벨: 상품 실결제액 / 중국 배송료 / 배송비 / 관세·통관료 */
.saver-ui .field > label,.saver-ui .flabel{
  font-size:11.5px;letter-spacing:.02em;text-transform:none;
  color:var(--ink);font-weight:600;
}
/* 표 헤더: 이미지 / 부품명 / 중국어 상품명 … */
.saver-ui .ledger thead th{
  font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-soft);font-weight:600;
}
/* 환율/상품값 힌트 ("총 ¥123 기준", "→ 상품값 ≈ …") */
.saver-ui .form-grid .hint{font-size:11.5px;color:#0f4d2b;font-weight:600}
/* 입력창 placeholder */
.saver-ui input::placeholder,.saver-ui textarea::placeholder{color:#8a8779}
/* 하단 ※ 안내문 */
.saver-ui .sub{color:var(--ink-soft)}
/* 상품값 입력 방식 줄 */
.saver-ui .rate-mode{font-size:12.5px;color:var(--ink-soft)}

/* ============ 히어로: 관세확정 비율을 세로 가운데로 ============
   기존 align-items:flex-end 라 선적 명세가 길어질수록 숫자가 아래로 내려갔다. */
.saver-ui .figrow{align-items:center}

/* ============ 표(ledger)는 항상 가운데 정렬 (기본값) ============
   페이지마다 따로 지정하지 않아도 모든 장부 표의 헤더·본문·합계가 가운데 정렬된다.
   .r(우측정렬) 클래스보다 우선하도록 특이도를 맞춰 둔다. */
.saver-ui .ledger thead th,
.saver-ui .ledger thead th.r{text-align:center}
.saver-ui .ledger tbody td,
.saver-ui .ledger tbody td.r{text-align:center}
.saver-ui .ledger tfoot td,
.saver-ui .ledger tfoot td.r{text-align:center}
/* 셀 안의 flex 요소(선적 아이콘 등)도 가운데로 */
.saver-ui .ledger .route{justify-content:center}

/* ============ 집계 스트립도 칸 안에서 가운데 정렬 ============
   (대시보드 4칸, 출하지시서 3칸, BOM 상세 4칸 모두 동일 적용) */
.saver-ui .strip > *{text-align:center}

/* ============ 모바일 가로 밀림 방지 ============
   넓은 요소(표 등)는 자기 래퍼 안에서만 스크롤되고, 페이지는 절대 밀리지 않는다.
   overflow-x:clip 은 세로 overflow 를 건드리지 않아 sticky/그림자에 영향이 없다. */
.saver-ui .main{min-width:0;overflow-x:clip}
.saver-ui .inner{overflow-x:clip}
.saver-ui .tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* ============ 3칸 집계 스트립(출하지시서): 모바일에서도 한 줄 ============ */
.saver-ui .strip-3 > *{padding:16px 4px}
.saver-ui .strip-3 .v{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1}
.saver-ui .strip-3 .v.ok{color:var(--green)}
.saver-ui .strip-3 .v.warn{color:var(--stamp)}
.saver-ui .strip-3 .k{font-size:11.5px;color:var(--ink-soft);margin-top:5px}
@media(max-width:560px){
  /* 기본 2칸 규칙보다 우선 → 3칸을 한 줄에 */
  .saver-ui .strip.strip-3{grid-template-columns:repeat(3,1fr)}
  .saver-ui .strip-3 .v{font-size:26px}
  .saver-ui .strip-3 .k{font-size:10.5px;white-space:nowrap}
}

/* ============ 판매량 요약줄 정렬 정리 ============
   기존 align-items:flex-end 라 56건 / 게이지 / 도넛의 세로 기준선이 어긋나 보였다. */
.saver-ui .figrow2{align-items:center}
.saver-ui .dwrap{display:flex;align-items:center;gap:20px;margin-left:auto}
.saver-ui .dlegend .lv{white-space:nowrap;font-variant-numeric:tabular-nums}
/* 한 줄에 다 못 들어가는 폭에서는 도넛을 오른쪽으로 밀지 말고
   아랫줄에 통째로 가운데 배치 (어정쩡한 우측 밀림 방지) */
@media(max-width:1040px){
  .saver-ui .figrow2{justify-content:center;gap:26px}
  .saver-ui .dwrap{margin-left:0;width:100%;justify-content:center}
}

/* ============ 출하지시서 상단 도구줄: 항상 한 줄 ============
   소스 선택 · 월 선택 · 구글시트 버튼이 좁은 화면에서 줄바꿈되지 않도록,
   셀렉트가 줄어들고 버튼은 고정폭을 유지한다. */
.saver-ui .ship-tools{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;flex:1 1 100%;margin-top:10px}
.saver-ui .ship-tools select{width:auto}
.saver-ui .ship-tools form{display:flex;min-width:0}
.saver-ui .ship-tools .ebtn{flex:none}
@media(max-width:640px){
  .saver-ui .ship-tools{width:100%;gap:6px;flex-wrap:wrap}
  /* 검색창 한 줄 전체, 안에서 입력칸·버튼 50:50 (아래 줄들과 폭 일치) */
  .saver-ui .ship-tools .ship-search{flex:1 1 100%;gap:6px}
  .saver-ui .ship-tools .ship-search input[type=search]{width:auto;flex:1 1 0;min-width:0}
  .saver-ui .ship-tools .ship-search .ebtn{flex:1 1 0}
  /* 소스·월 셀렉트는 남는 폭을 나눠 갖는다 */
  .saver-ui .ship-tools > select,
  .saver-ui .ship-tools > #monthForm{flex:1 1 40%;min-width:0}
  .saver-ui .ship-tools select{
    width:100%;min-width:0;
    font-size:12px;padding:8px 26px 8px 9px;background-position:right 8px center;
    text-overflow:ellipsis;
  }
  .saver-ui .ship-tools .ebtn{padding:8px 10px;font-size:11px;flex:1 1 auto;justify-content:center}
}

/* ============ 산소발생기 사양 계산기 ============ */
.saver-ui .calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.saver-ui .calc-inputs .field > label{display:flex;align-items:baseline;gap:6px;font-size:11.5px}
.saver-ui .calc-inputs .cv{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--green);line-height:1}
.saver-ui .calc-inputs .cu{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.saver-ui .crange{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-top:2px}

/* 슬라이더 */
.saver-ui input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--rule);border:none;border-radius:99px;padding:0;margin:10px 0 2px;cursor:pointer}
.saver-ui input[type=range]:focus{outline:none;box-shadow:none}
.saver-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--green);border:3px solid var(--paper-2);
  box-shadow:0 1px 4px rgba(27,26,22,.3);cursor:pointer}
.saver-ui input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--green);border:3px solid var(--paper-2);cursor:pointer}

.saver-ui .calc-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:14px;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.saver-ui .calc-meta b{color:var(--ink);font-weight:600;margin-left:4px}

/* 결과 스트립 (4칸) */
.saver-ui .calc-strip > *{padding:20px 8px 18px;border-right:1px solid var(--rule)}
.saver-ui .calc-strip > *:last-child{border-right:none}
.saver-ui .calc-strip .v{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1;color:var(--green)}
.saver-ui .calc-strip .v.vs{font-size:15px;line-height:1.35;color:var(--ink)}
.saver-ui .calc-strip .k{font-size:11.5px;color:var(--ink-soft);margin-top:7px}
.saver-ui .calc-strip .k2{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:5px;line-height:1.4}

/* 고정 주의문구 */
.saver-ui .calc-note{margin-top:18px;border:1.5px dashed var(--gold);background:#f9f5ea;
  border-radius:8px;padding:14px 16px;font-family:var(--mono);font-size:11.5px;
  color:#7d6220;line-height:1.7}

/* 기준 모델 추가 폼 */
.saver-ui .calc-form{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.saver-ui .calc-form .ebtn{grid-column:1/-1;justify-self:start}

@media(max-width:820px){
  .saver-ui .calc-inputs{grid-template-columns:1fr;gap:20px}
  .saver-ui .calc-strip{grid-template-columns:repeat(2,1fr)}
  .saver-ui .calc-strip > *:nth-child(2){border-right:none}
  .saver-ui .calc-strip > *:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .saver-ui .calc-form{grid-template-columns:repeat(2,1fr)}
}

/* 사양 계산기 결과 카드: 보조 문구 가독성 */
.saver-ui .calc-strip .k2{font-size:11px;color:var(--ink-soft);font-weight:500}
.saver-ui .calc-strip .k{color:var(--ink);font-weight:600}

/* 사양 계산기: 입력 도움말 */
.saver-ui .calc-help{grid-column:1/-1;font-family:var(--mono);font-size:11.5px;line-height:1.75;
  color:var(--ink-soft);border-left:2px solid var(--gold);background:#f9f5ea;
  border-radius:0 6px 6px 0;padding:11px 14px;margin-top:4px}
.saver-ui .calc-help b{color:var(--ink)}

/* 사양 계산기: 용어 해설 */
.saver-ui .calc-glossary{margin-top:16px;border:1px solid var(--rule);background:var(--paper-2);border-radius:8px}
.saver-ui .calc-glossary summary{cursor:pointer;padding:13px 16px;font-family:var(--mono);font-size:12.5px;
  font-weight:600;color:var(--green);list-style:none}
.saver-ui .calc-glossary summary::-webkit-details-marker{display:none}
.saver-ui .calc-glossary summary:hover{background:var(--green-dim);border-radius:8px}
.saver-ui .calc-glossary[open] summary{border-bottom:1px solid var(--rule);border-radius:8px 8px 0 0}
.saver-ui .calc-glossary dl{padding:6px 18px 18px}
.saver-ui .calc-glossary dt{font-weight:700;font-size:13px;color:var(--ink);margin-top:14px}
.saver-ui .calc-glossary dd{font-size:12.5px;color:var(--ink-soft);line-height:1.75;margin-top:4px}
.saver-ui .calc-glossary dd b{color:var(--ink)}

/* ===== 1688 소싱 어시스턴트 ===== */
.saver-ui .src-terms{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.saver-ui .src-term{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--rule);
  border-radius:10px;background:var(--paper-2,#fbfaf6)}
.saver-ui .src-term .cn{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);flex:0 0 auto}
.saver-ui .src-term .ko{font-size:13px;color:var(--ink-soft);flex:1 1 auto;line-height:1.5}
.saver-ui .src-term .ko b{color:var(--ink)}
.saver-ui .copybtn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px solid var(--rule);
  background:#fff;color:var(--ink-soft);border-radius:7px;padding:6px 11px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.saver-ui .copybtn:hover{border-color:var(--green);color:var(--green)}
.saver-ui .copybtn.done{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.saver-ui .cn-box{position:relative;border:1px solid var(--rule);border-radius:10px;background:#fbfaf6;
  padding:14px 14px 12px;font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--ink);white-space:pre-wrap}
.saver-ui .cn-box .copybtn{position:absolute;top:10px;right:10px}
.saver-ui .tips{margin:10px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-soft);line-height:1.8}
.saver-ui .riskchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:20px;border:1px solid;margin:0 6px 6px 0}
.saver-ui .riskchip.red{color:var(--stamp);border-color:var(--stamp);background:var(--stamp-dim)}
.saver-ui .riskchip.yellow{color:#7d6220;border-color:#7d6220;background:#f7f1e2}
.saver-ui .miss{display:inline-block;font-size:12px;color:#7d6220;border:1px dashed #7d6220;
  border-radius:6px;padding:2px 8px;margin:0 6px 6px 0}
.saver-ui .src-hint{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);line-height:1.7;margin-top:6px}

/* 판매자 번역기 */
.saver-ui .tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:8px}
.saver-ui .tr-out{position:relative;border:1px solid var(--rule);border-radius:10px;background:#fbfaf6;
  padding:14px 14px 12px;font-size:14px;line-height:1.7;color:var(--ink);white-space:pre-wrap}
.saver-ui .tr-out .copybtn,.saver-ui .cn-box .copybtn{position:absolute;top:10px;right:10px}
.saver-ui .tr-grid .cn-box{padding-top:14px}
@media (max-width:760px){ .saver-ui .tr-grid{grid-template-columns:1fr} }

/* 출하 완료행 — '확실히 완료' 고무도장 느낌 */
.saver-ui .ship-ledger tbody tr.done{background:#eef4ee}
.saver-ui .ship-ledger tbody tr.done td{color:var(--ink)}          /* 완료라고 흐려지지 않게 */
.saver-ui .ship-ledger tbody tr.done td:first-child{box-shadow:inset 3px 0 0 var(--green)}
/* 상태 배지는 기본(작은) 스타일 그대로 사용 — 큰 도장은 되돌림 */

/* 출하 증빙 사진 — 고객명 옆 배지 + 팝업 */
.saver-ui .name-photo{cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.saver-ui .name-photo:hover{color:var(--green)}
.saver-ui .ph-badge{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-faint);
  border:1px solid var(--rule);border-radius:20px;padding:2px 8px;white-space:nowrap}
.saver-ui .ph-badge.has{color:var(--green);border-color:var(--green);background:var(--green-dim);font-weight:600}
.saver-ui .name-photo:hover .ph-badge{border-color:var(--green);color:var(--green)}

.saver-ui .ph-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.saver-ui .ph-modal[hidden]{display:none}
.saver-ui .ph-modal-bg{position:absolute;inset:0;background:rgba(20,20,15,.55)}
.saver-ui .ph-modal-box{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:14px;
  padding:20px;width:min(560px,94vw);max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.saver-ui .ph-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:16px}
.saver-ui .ph-modal-name{font-family:var(--serif);font-size:22px;font-weight:700;margin-top:3px}
.saver-ui .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.saver-ui .ph-empty{grid-column:1/-1;text-align:center;color:var(--ink-faint);font-family:var(--mono);
  font-size:12.5px;padding:30px 0}
.saver-ui .ph-th{position:relative;display:block;line-height:0}
.saver-ui .ph-th img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--rule);cursor:pointer;display:block}
.saver-ui .ph-del{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--paper);background:var(--stamp);color:#fff;font-size:15px;line-height:20px;text-align:center;
  cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* 사진 팝업 하단 버튼 */
.saver-ui .ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.saver-ui .ph-actions .ebtn{cursor:pointer;display:inline-flex;align-items:center}
.saver-ui .ph-status{font-family:var(--mono);font-size:12px;color:var(--green)}

/* 출하 고객명 검색 */
.saver-ui .ship-search{display:flex;gap:6px;align-items:center}
.saver-ui .ship-search input[type=search]{width:150px}

/* 신제품 진행 현황 */
.saver-ui .np-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);margin-top:8px}
.saver-ui .np-strip > div{padding:18px 4px 16px;border-right:1px solid var(--rule);text-align:center}
.saver-ui .np-strip > div:last-child{border-right:none}
.saver-ui .np-strip .v{font-family:var(--serif);font-size:32px;font-weight:700;line-height:1}
.saver-ui .np-strip .k{font-size:11.5px;color:var(--ink-soft);margin-top:5px}
.saver-ui .np-bar{position:relative;height:26px;margin-top:16px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.saver-ui .np-bar-fill{height:100%;background:var(--green);opacity:.85}
.saver-ui .np-bar-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11.5px;color:var(--ink);font-weight:600}
.saver-ui .np-badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap}
.saver-ui .np-badge.wait{color:var(--stamp);border-color:var(--stamp);background:var(--stamp-dim)}
.saver-ui .np-badge.ordered{color:#7d6220;border-color:#7d6220;background:#f7f1e2}
.saver-ui .np-badge.done{color:#0f4d2b;border-color:var(--green);background:var(--green-dim)}
.saver-ui .np-badge.etc{color:var(--ink-soft);border-color:var(--rule)}
@media(max-width:600px){ .saver-ui .np-strip .v{font-size:24px} }

/* 신제품 비용 요약 */
.saver-ui .np-cost{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.saver-ui .np-cost-col{border:1px solid var(--rule);border-radius:12px;padding:16px 18px;background:var(--paper-2)}
.saver-ui .np-cost-col .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft);font-weight:600}
.saver-ui .np-cost-col .amt{font-family:var(--serif);font-size:26px;font-weight:700;margin-top:8px;line-height:1;letter-spacing:-.01em}
.saver-ui .np-cost-col .amt .cur{font-family:var(--mono);font-size:14px;color:var(--ink-faint);font-weight:400;margin-right:3px}
.saver-ui .np-cost-col .sub{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:7px}
.saver-ui .np-cost-col.paid{border-color:var(--green);background:var(--green-dim)}
.saver-ui .np-cost-col.paid .amt{color:#0f4d2b}
.saver-ui .np-cost-col.up{border-color:var(--gold);background:#f7f1e2}
.saver-ui .np-cost-col.up .amt{color:#7d6220}
.saver-ui .np-cost-col.tot{border-color:var(--ink);background:var(--paper)}
.saver-ui .np-cost-col.tot .amt{color:var(--ink)}
@media(max-width:680px){ .saver-ui .np-cost{grid-template-columns:1fr;gap:10px}
  .saver-ui .np-cost-col{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .saver-ui .np-cost-col .amt{margin-top:0;font-size:22px} .saver-ui .np-cost-col .sub{flex-basis:100%;margin-top:2px} }

/* 신제품 제품 1개당 원가 (히어로) */
.saver-ui .np-unitcost{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:2px solid var(--ink);border-radius:14px;padding:18px 24px;margin-top:8px;background:var(--paper-2)}
.saver-ui .np-unitcost .uc-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink);font-weight:600}
.saver-ui .np-unitcost .uc-note{font-weight:400;color:var(--ink-soft);letter-spacing:0}
.saver-ui .np-unitcost .uc-head{display:flex;align-items:center;gap:16px;min-width:0}
.saver-ui .np-unitcost .uc-img{width:78px;height:78px;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--rule);border-radius:9px;padding:6px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
@media(max-width:600px){ .saver-ui .np-unitcost .uc-img{width:60px;height:60px} }
/* 다변형(공용+전용) 개당원가 — 벽걸이/스탠드 나란히 */
.saver-ui .np-unitcost.np-multi{flex-direction:column;align-items:stretch;gap:14px}
.saver-ui .np-multi .uc-vars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.saver-ui .np-multi .uc-var{border:1px solid var(--rule);border-radius:12px;padding:12px 18px;background:#fff}
.saver-ui .np-multi .uc-vn{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px}
.saver-ui .np-multi .uc-var .uc-amt{font-size:clamp(24px,4.6vw,34px)}
@media(max-width:600px){ .saver-ui .np-multi .uc-vars{grid-template-columns:1fr} }
.saver-ui .np-multi .uc-var{display:flex;align-items:center;gap:14px}
.saver-ui .np-multi .uc-vimg{width:64px;height:64px;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--rule);border-radius:9px;padding:5px}
.saver-ui .np-multi .uc-vbody{min-width:0}

/* 제품 선택 — 크고 확실한 초록 세그먼트 토글 */
.saver-ui .np-prodsel-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 24px}
.saver-ui .np-prodsel-lbl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft)}
.saver-ui .np-prodsel{display:flex;border:2px solid var(--green);border-radius:12px;overflow:hidden;
  width:fit-content;max-width:100%;box-shadow:0 2px 8px rgba(20,102,58,.12)}
.saver-ui .np-prodsel a{font-family:var(--sans);font-size:15px;font-weight:700;padding:11px 30px;
  color:var(--green);text-decoration:none;background:#fff;transition:.15s;white-space:nowrap}
.saver-ui .np-prodsel a+a{border-left:2px solid var(--green)}
.saver-ui .np-prodsel a.on{background:var(--green);color:#fff}
.saver-ui .np-prodsel a:hover:not(.on){background:var(--green-dim)}
@media(max-width:600px){ .saver-ui .np-prodsel a{padding:11px 18px;font-size:14px} }

/* 제품 선택 + 경고를 한 줄로 (경고가 오른쪽 빈칸 채움) */
.saver-ui .np-topbar{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap;margin:6px 0 22px}
.saver-ui .np-topbar .np-prodsel-wrap{margin:0}
.saver-ui .np-topbar .np-warn{flex:1 1 320px;min-width:260px;margin:0;align-items:center}

/* 확정 전 BOM 경고 배너 */
.saver-ui .np-warn{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  border:2px solid var(--stamp);background:var(--stamp-dim);color:var(--stamp);
  border-radius:10px;padding:12px 16px;margin:0 0 22px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.55}
.saver-ui .np-warn-tag{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;
  color:#fff;background:var(--stamp);border-radius:6px;padding:3px 9px}
.saver-ui .np-unitcost .uc-amt{font-family:var(--serif);font-size:clamp(30px,6vw,44px);font-weight:700;line-height:1;color:var(--green);letter-spacing:-.01em}
.saver-ui .np-unitcost .uc-amt .cur{font-family:var(--mono);font-size:.5em;color:var(--ink-faint);font-weight:400;margin-right:4px}

/* 신제품 — 화사한 색감 오버라이드 */
.saver-ui .np-bar{height:30px;background:#e9ede9;border:none;border-radius:99px;margin-top:18px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.saver-ui .np-bar-fill{background:linear-gradient(90deg,#34d17f,#12a35c);opacity:1;border-radius:99px;
  box-shadow:0 2px 8px rgba(18,163,92,.35)}
.saver-ui .np-bar-lbl{font-weight:700;color:#0f5a34}

.saver-ui .np-cost-col{border-width:1.5px}
.saver-ui .np-cost-col.paid{border-color:#19a866;background:#e6f8ef}
.saver-ui .np-cost-col.paid .lbl,.saver-ui .np-cost-col.paid .amt{color:#0d8f52}
.saver-ui .np-cost-col.up{border-color:#f0a92b;background:#fff4de}
.saver-ui .np-cost-col.up .lbl,.saver-ui .np-cost-col.up .amt{color:#c9820f}
.saver-ui .np-cost-col.tot{border-color:#4560d8;background:#eef2fe}
.saver-ui .np-cost-col.tot .lbl,.saver-ui .np-cost-col.tot .amt{color:#2f47bd}
.saver-ui .np-cost-col .amt .cur{opacity:.7}

/* 상태 배지도 살짝 화사하게 */
.saver-ui .np-badge.done{color:#0d8f52;border-color:#19a866;background:#e6f8ef}
.saver-ui .np-badge.ordered{color:#c9820f;border-color:#f0a92b;background:#fff4de}
.saver-ui .np-badge.wait{color:#d64027;border-color:#ef6a52;background:#fdeae6}

/* 비타에어 1개당 원가 — 초록 더 생기있게 */
.saver-ui .np-unitcost{border-color:#19a866;background:linear-gradient(180deg,#effaf3,#e6f8ef)}
.saver-ui .np-unitcost .uc-amt{color:#12a35c}

/* 신제품 발주 진행 — 원형 게이지(애니메이션) */
.saver-ui .np-gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:22px 0 6px}
.saver-ui .np-gauge{position:relative;width:190px;height:190px}
.saver-ui .np-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.saver-ui .np-track{fill:none;stroke:#e9ede9;stroke-width:13}
.saver-ui .np-prog{fill:none;stroke:url(#ggrad);stroke-width:13;stroke-linecap:round;
  filter:url(#gglow);
  stroke-dasharray:314.159;stroke-dashoffset:314.159;
  transition:stroke-dashoffset 1.3s cubic-bezier(.22,.68,.2,1)}
.saver-ui .np-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.saver-ui .np-gauge-center .pv{font-family:var(--serif);font-size:46px;font-weight:700;line-height:1;color:#0e9152}
.saver-ui .np-gauge-center .pv .pu{font-size:.5em;color:var(--ink-faint);margin-left:2px}
.saver-ui .np-gauge-center .pl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);margin-top:5px}
.saver-ui .np-gauge-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.saver-ui .np-gauge-legend span{display:inline-flex;align-items:center;gap:6px}
.saver-ui .np-gauge-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.saver-ui .np-gauge-legend .dot.done{background:#19a866}
.saver-ui .np-gauge-legend .dot.ordered{background:#f0a92b}
.saver-ui .np-gauge-legend .dot.wait{background:#cfd3cd}

/* ===== 신제품 상단 재설계 (깔끔한 타일 + 세그먼트 막대) ===== */
.saver-ui .np-money{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.saver-ui .mtile{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--rule);
  border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.saver-ui .mtile .mt-dot{width:11px;height:11px;border-radius:50%;flex:none}
.saver-ui .mtile.paid .mt-dot{background:#12a35c;box-shadow:0 0 0 4px rgba(18,163,92,.15)}
.saver-ui .mtile.up   .mt-dot{background:#f0a92b;box-shadow:0 0 0 4px rgba(240,169,43,.15)}
.saver-ui .mtile.tot  .mt-dot{background:#4560d8;box-shadow:0 0 0 4px rgba(69,96,216,.15)}
.saver-ui .mtile .mt-lbl{font-family:var(--mono);font-size:11px;color:var(--ink-soft);font-weight:600;letter-spacing:.02em}
.saver-ui .mtile .mt-amt{font-family:var(--serif);font-size:23px;font-weight:700;margin-top:4px;line-height:1;letter-spacing:-.01em}
.saver-ui .mtile.paid .mt-amt{color:#0e9152}
.saver-ui .mtile.up   .mt-amt{color:#c9820f}
.saver-ui .mtile.tot  .mt-amt{color:#2f47bd}
.saver-ui .mtile .mt-sub{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--stamp);margin-top:5px;letter-spacing:.02em}
@media(max-width:680px){ .saver-ui .np-money{grid-template-columns:1fr;gap:8px} .saver-ui .mtile .mt-amt{font-size:20px} }

.saver-ui .np-prog2{margin-top:24px}
.saver-ui .np-prog2-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.saver-ui .np-prog2-head .ph-title{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-soft);font-weight:600}
.saver-ui .np-prog2-head .ph-pct{font-family:var(--serif);font-size:30px;font-weight:700;color:#0e9152;line-height:1}
.saver-ui .np-prog2-head .ph-pct small{font-size:.5em;color:var(--ink-faint);margin-left:1px}
.saver-ui .np-bar2{display:flex;gap:3px;height:22px;background:#eceeec;border-radius:99px;padding:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
.saver-ui .np-bar2 .seg{height:100%;width:0;border-radius:99px;transition:width 1.1s cubic-bezier(.22,.68,.2,1)}
.saver-ui .np-bar2 .seg.done{background:linear-gradient(180deg,#45db8b,#12a35c)}
.saver-ui .np-bar2 .seg.ordered{background:linear-gradient(180deg,#ffc85c,#f0a92b)}
.saver-ui .np-bar2 .seg.wait{background:linear-gradient(180deg,#e2e6e2,#cfd4ce)}
.saver-ui .np-legend2{display:flex;gap:20px;flex-wrap:wrap;margin-top:13px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.saver-ui .np-legend2 span{display:inline-flex;align-items:center;gap:6px}
.saver-ui .np-legend2 b{color:var(--ink);font-weight:600}
.saver-ui .np-legend2 .dot{width:11px;height:11px;border-radius:3px;flex:none}
.saver-ui .np-legend2 .dot.done{background:#12a35c}
.saver-ui .np-legend2 .dot.ordered{background:#f0a92b}
.saver-ui .np-legend2 .dot.wait{background:#cfd4ce}

/* 세그먼트 막대 — CSS 전용 등장 애니메이션(값은 인라인으로 항상 정확) */
.saver-ui .np-bar2 .seg{width:auto;transition:none;transform-origin:left center;
  animation:npSegGrow .8s cubic-bezier(.22,.68,.2,1) both}
.saver-ui .np-bar2 .seg.ordered{animation-delay:.1s}
.saver-ui .np-bar2 .seg.wait{animation-delay:.2s}
@keyframes npSegGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){ .saver-ui .np-bar2 .seg{animation:none} }

/* 세그먼트 막대: 애니메이션 제거(모든 환경에서 항상 정확히 표시) */
.saver-ui .np-bar2 .seg{animation:none;transform:none}

/* ============ 신제품 상단 — 사이버/디지털 HUD ============ */
.saver-ui .cyber-hud{position:relative;margin-top:10px;padding:22px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 120% at 0% 0%,rgba(34,211,238,.12),transparent 42%),
            radial-gradient(120% 120% at 100% 100%,rgba(52,211,153,.12),transparent 46%),
            linear-gradient(160deg,#0d1526,#090d17);
  border:1px solid rgba(120,200,255,.22);
  box-shadow:0 14px 44px rgba(3,8,20,.5),inset 0 1px 0 rgba(255,255,255,.05)}
.saver-ui .cyber-hud::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(130% 90% at 50% 0%,#000,transparent 78%);
          mask:radial-gradient(130% 90% at 50% 0%,#000,transparent 78%)}
.saver-ui .cyber-hud::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.75),rgba(52,211,153,.75),transparent);
  animation:cybScan 4.5s ease-in-out infinite}
@keyframes cybScan{0%,100%{opacity:.5}50%{opacity:1}}
.saver-ui .cyber-hud > *{position:relative;z-index:1}

/* 비타에어 원가 — 네온 디지털 */
.saver-ui .cyber-hud .np-unitcost{background:rgba(255,255,255,.02);border:1px solid rgba(52,211,153,.4);
  box-shadow:inset 0 0 30px rgba(52,211,153,.12)}
.saver-ui .cyber-hud .uc-lbl{color:#b7c7da}
.saver-ui .cyber-hud .uc-note{color:#64788f}
.saver-ui .cyber-hud .uc-amt{font-family:var(--mono);color:#4ade80;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(74,222,128,.6)}
.saver-ui .cyber-hud .uc-amt .cur{color:#6b8299}

/* 비용 타일 — 글래스 + 네온 */
.saver-ui .cyber-hud .mtile{background:rgba(255,255,255,.035);border:1px solid rgba(120,200,255,.2);
  box-shadow:none;backdrop-filter:blur(4px)}
.saver-ui .cyber-hud .mt-lbl{color:#8ea3ba}
.saver-ui .cyber-hud .mt-amt{font-family:var(--mono);letter-spacing:.01em}
.saver-ui .cyber-hud .mtile .mt-dot{box-shadow:0 0 12px 1px currentColor}
.saver-ui .cyber-hud .mtile.paid .mt-dot,.saver-ui .cyber-hud .mtile.paid .mt-amt{color:#4ade80}
.saver-ui .cyber-hud .mtile.up   .mt-dot,.saver-ui .cyber-hud .mtile.up   .mt-amt{color:#fbbf24}
.saver-ui .cyber-hud .mtile.tot  .mt-dot,.saver-ui .cyber-hud .mtile.tot  .mt-amt{color:#22d3ee}
.saver-ui .cyber-hud .mtile.paid .mt-amt{text-shadow:0 0 12px rgba(74,222,128,.5)}
.saver-ui .cyber-hud .mtile.up   .mt-amt{text-shadow:0 0 12px rgba(251,191,36,.45)}
.saver-ui .cyber-hud .mtile.tot  .mt-amt{text-shadow:0 0 12px rgba(34,211,238,.5)}
.saver-ui .cyber-hud .mtile .mt-dot{background:currentColor}

/* 발주 진행 막대 — 발광 */
.saver-ui .cyber-hud .ph-title{color:#8ea3ba}
.saver-ui .cyber-hud .ph-pct{font-family:var(--mono);color:#4ade80;text-shadow:0 0 18px rgba(74,222,128,.65)}
.saver-ui .cyber-hud .ph-pct small{color:#64788f}
.saver-ui .cyber-hud .np-bar2{background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(120,200,255,.14),inset 0 2px 8px rgba(0,0,0,.6)}
.saver-ui .cyber-hud .np-bar2 .seg.done{background:linear-gradient(180deg,#6ee7c7,#10b981);box-shadow:0 0 14px rgba(52,211,153,.65)}
.saver-ui .cyber-hud .np-bar2 .seg.ordered{background:linear-gradient(180deg,#fde047,#f59e0b);box-shadow:0 0 14px rgba(245,158,11,.6)}
.saver-ui .cyber-hud .np-bar2 .seg.wait{background:linear-gradient(180deg,#4a5a72,#2f3b4e)}
.saver-ui .cyber-hud .np-legend2{color:#8ea3ba}
.saver-ui .cyber-hud .np-legend2 b{color:#e2edf7}
.saver-ui .cyber-hud .np-legend2 .dot.done{background:#34d399;box-shadow:0 0 9px #34d399}
.saver-ui .cyber-hud .np-legend2 .dot.ordered{background:#f59e0b;box-shadow:0 0 9px #f59e0b}
.saver-ui .cyber-hud .np-legend2 .dot.wait{background:#64748b;box-shadow:0 0 8px rgba(100,116,139,.6)}

/* 발주 진행 막대 — 3D 광택 + 이동 하이라이트(안전: 값은 인라인, 애니는 위에 덧입힘) */
.saver-ui .np-bar2{position:relative;overflow:hidden;height:24px}
.saver-ui .np-bar2 .seg{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.15)}
.saver-ui .np-bar2 .seg.done{background:linear-gradient(180deg,#5fe6a0,#0f9a53 60%,#0c8547)}
.saver-ui .np-bar2 .seg.ordered{background:linear-gradient(180deg,#ffd166,#ef9f16 60%,#d98c0c)}
.saver-ui .np-bar2 .seg.wait{background:linear-gradient(180deg,#e6eae6,#c9cec8 60%,#bcc2bb)}
.saver-ui .np-bar2::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:3;
  pointer-events:none;transform:translateX(-180%);
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);
  animation:npShine 2.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes npShine{0%{transform:translateX(-180%)}55%{transform:translateX(320%)}100%{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){ .saver-ui .np-bar2::after{animation:none;opacity:0} }

/* 신제품 — 부가세 별도 표기 */
.saver-ui .np-unitcost .uc-vat{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--stamp);
  border:1px solid var(--stamp);border-radius:20px;padding:2px 8px;margin-left:12px;vertical-align:middle;letter-spacing:.02em}
.saver-ui .np-vatnote{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:10px}
.saver-ui .np-vatnote b{color:var(--stamp)}

/* 판매량 막대 — 월별·제품별 카테고리 색(--bar 인라인) */
.saver-ui .mchart .mb{background:var(--bar,#43c96f);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar,#43c96f) 42%, #fff), var(--bar,#43c96f));
  box-shadow:0 -1px 6px color-mix(in srgb, var(--bar,#43c96f) 30%, transparent)}
.saver-ui .pbar .pfill .sd{background:var(--bar,var(--green));
  background:linear-gradient(90deg, var(--bar,var(--green)), color-mix(in srgb, var(--bar,var(--green)) 45%, #fff))}

/* 출고완료율 게이지 — 완료율에 따라 색 변동 + 그라데이션 */
.saver-ui .egauge{
  background:conic-gradient(from -90deg, var(--gc,var(--green)) calc(var(--p)*1%), var(--rule) 0);
  background:conic-gradient(from -90deg,
    color-mix(in srgb, var(--gc,var(--green)) 48%, #fff) 0%,
    var(--gc,var(--green)) calc(var(--p)*1%),
    var(--rule) calc(var(--p)*1%))}
.saver-ui .egauge .gp{color:var(--gc,var(--green))}

/* ── 판매량 페이지 리디자인 — 앱 에디토리얼 톤에 맞춤 ── */
/* 상단 요약: 공통 strip 을 위아래 굵은 괘선으로 감싸 표(帳簿) 느낌 */
.saver-ui .sales-strip{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* 소제목(소스별 비중) — 굵은 sechead 보다 가볍게 */
.saver-ui .sub-head{border-bottom:1px solid var(--rule);margin:24px 0 14px;padding-bottom:8px}
.saver-ui .sub-head h2{font-size:14px}
/* 소스별 세그먼트 막대 — 알약 대신 각진 플랫 바 */
.saver-ui .src-bar{height:22px;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:4px;padding:3px;gap:3px}
.saver-ui .src-bar .seg{border-radius:2px;background:var(--bar,#9a978c);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar,#9a978c) 76%, #fff), var(--bar,#9a978c))}
.saver-ui .src-bar::after{display:none}          /* 반짝임 스윕 제거 → 차분하게 */
.saver-ui .np-legend2 .dot{border:1px solid rgba(0,0,0,.08)}
/* 구획 구분선 */
.saver-ui .sales-div{border-bottom:2px solid var(--ink);margin:26px 0}

/* 막대 톤 다운 — 광택/글로우 걷어내고 종이 위 인쇄된 느낌으로 */
.saver-ui .mchart .mb{
  background:var(--bar,var(--green));
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar,var(--green)) 72%, #fff), var(--bar,var(--green)));
  box-shadow:none}
.saver-ui .mchart .mb.on{background:var(--ink)}
.saver-ui .pbar .pfill .sd{
  background:var(--bar,var(--green));
  background:linear-gradient(90deg, color-mix(in srgb, var(--bar,var(--green)) 88%, #000 0%), color-mix(in srgb, var(--bar,var(--green)) 82%, #fff))}
/* 연도 요약 카드 — 배경 걷어 종이 위 얇은 괘선 카드로 */
.saver-ui .ysum2 a{background:transparent;border-radius:4px}
.saver-ui .ysum2 a.on{background:var(--green-dim)}

/* ---------- 인증 진행 현황 ---------- */
/* 6단계 범례 */
.saver-ui .cert-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;
  border:1px solid var(--rule);border-radius:12px;background:var(--paper-2);padding:12px 16px}
.saver-ui .cert-legend-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-right:5px}
.saver-ui .cert-arrow{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-style:normal}

/* 진행단계 스탬프 배지 */
.saver-ui .cert-badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.02em;padding:3px 10px;border-radius:5px;border:1.5px solid;white-space:nowrap}
.saver-ui .cert-badge.gray{color:var(--ink-soft);border-color:var(--rule);background:var(--paper-2)}
.saver-ui .cert-badge.blue{color:#2f47bd;border-color:#4560d8;background:#eef2fe}
.saver-ui .cert-badge.orange{color:#c9820f;border-color:#f0a92b;background:#fff4de}
.saver-ui .cert-badge.green{color:#0d8f52;border-color:#19a866;background:#e6f8ef}

/* 배지 옆 6단계 스텝 인디케이터 */
.saver-ui .cert-stage{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.saver-ui .cert-steps{display:inline-flex;align-items:center;gap:3px;--tone:var(--ink-faint)}
.saver-ui .cert-steps.gray{--tone:var(--ink-faint)}
.saver-ui .cert-steps.blue{--tone:#4560d8}
.saver-ui .cert-steps.orange{--tone:#f0a92b}
.saver-ui .cert-steps.green{--tone:#19a866}
.saver-ui .cert-steps i{display:block;width:13px;height:5px;border-radius:99px;background:var(--rule)}
.saver-ui .cert-steps i.done{background:var(--tone);opacity:.45}      /* 지나온 단계 = 채움 */
.saver-ui .cert-steps i.current{width:22px;height:6px;background:var(--tone);opacity:1;   /* 현재 = 강조 */
  box-shadow:0 1px 4px rgba(0,0,0,.14)}
.saver-ui .cert-steps i.todo{background:var(--rule);opacity:.5}       /* 남은 단계 = 흐리게 */
@media(max-width:680px){ .saver-ui .cert-stage{gap:6px}
  .saver-ui .cert-steps i{width:9px} .saver-ui .cert-steps i.current{width:16px} }

/* 인증 — 대상 제품 히어로(제품명 + 전체 진행률 + 인증비용) */
.saver-ui .cert-hero{border:2px solid var(--ink);border-radius:14px;background:var(--paper-2);
  padding:18px 22px 16px;margin-top:8px}
.saver-ui .cert-hero .ch-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.saver-ui .cert-hero .ch-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.saver-ui .cert-hero .ch-name{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1.1;
  letter-spacing:-.01em;margin-top:4px}
.saver-ui .cert-hero .ch-meta{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:6px}
.saver-ui .cert-hero .ch-pct{display:flex;flex-direction:column;align-items:flex-end}
.saver-ui .cert-hero .ch-pct .v{font-family:var(--serif);font-size:40px;font-weight:700;line-height:1;color:#12a35c}
.saver-ui .cert-hero .ch-pct .v small{font-size:.45em;color:var(--ink-faint);margin-left:2px}
.saver-ui .cert-hero .ch-pct .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-soft);margin-top:4px}
.saver-ui .cert-bar{height:12px;margin-top:14px;background:#e9ede9;border-radius:99px;overflow:hidden}
.saver-ui .cert-bar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#34d17f,#12a35c);
  box-shadow:0 2px 8px rgba(18,163,92,.35);transition:width .9s cubic-bezier(.22,.68,.2,1)}
.saver-ui .cert-hero .ch-money{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.saver-ui .cert-hero .mt{border:1.5px solid var(--rule);border-radius:10px;padding:11px 14px;background:var(--paper)}
.saver-ui .cert-hero .mt-lbl{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);font-weight:600}
.saver-ui .cert-hero .mt-amt{font-family:var(--serif);font-size:21px;font-weight:700;margin-top:5px;line-height:1}
.saver-ui .cert-hero .mt.done{border-color:#19a866;background:#e6f8ef}
.saver-ui .cert-hero .mt.done .mt-lbl,.saver-ui .cert-hero .mt.done .mt-amt{color:#0d8f52}
.saver-ui .cert-hero .mt.open{border-color:#f0a92b;background:#fff4de}
.saver-ui .cert-hero .mt.open .mt-lbl,.saver-ui .cert-hero .mt.open .mt-amt{color:#c9820f}
.saver-ui .cert-hero .mt.tot{border-color:var(--ink)}
@media(max-width:680px){ .saver-ui .cert-hero{padding:16px}
  .saver-ui .cert-hero .ch-name{font-size:30px} .saver-ui .cert-hero .ch-pct .v{font-size:32px}
  .saver-ui .cert-hero .ch-money{grid-template-columns:1fr} }

/* 배지 안의 세부상태(진행중/완료) */
.saver-ui .cert-badge .st{margin-left:5px;padding-left:5px;border-left:1px solid currentColor;
  font-weight:400;opacity:.75;font-size:10px}
/* 다음 단계 대기 = 테두리만 */
.saver-ui .cert-steps i.next{background:transparent;border:1.5px solid var(--tone);opacity:.55}
.saver-ui .cert-legend .cert-hint{flex-basis:100%;font-size:11px;color:var(--ink-soft);margin-top:2px}
.saver-ui .cert-legend .cert-hint b{color:var(--ink);font-weight:600}

/* 인증 — 글꼴 정리: 한글 라벨은 sans(모노에 한글 글리프가 없어 자간이 깨짐),
   숫자·통화기호만 mono/serif 유지 */
.saver-ui .cert-hero .ch-kicker{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;font-weight:600}
.saver-ui .cert-hero .ch-meta{font-family:var(--sans);font-size:11.5px;letter-spacing:0}
.saver-ui .cert-hero .ch-pct .l{font-family:var(--sans);font-size:11px;letter-spacing:.02em;font-weight:500}
.saver-ui .cert-hero .mt-lbl{font-family:var(--sans);font-size:11.5px;letter-spacing:0;font-weight:600}
.saver-ui .cert-legend .cert-legend-lbl{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;font-weight:600}
.saver-ui .cert-badge{font-family:var(--sans);font-size:11.5px;letter-spacing:0}
/* 금액: 원화기호만 mono로 작게, 숫자는 serif */
.saver-ui .cert-hero .mt-amt .cur{font-family:var(--mono);font-size:13px;font-weight:400;
  color:var(--ink-faint);margin-right:3px}
/* 배지 안 세부상태(진행중/완료) */
.saver-ui .cert-badge .st{margin-left:6px;padding-left:6px;font-size:10.5px;font-weight:500;opacity:.7}
/* 원화기호는 mono에 글리프가 없어 깨짐 → sans 사용 */
.saver-ui .cert-hero .mt-amt .cur{font-family:var(--sans);font-size:15px;font-weight:500;
  color:var(--ink-faint);margin-right:2px}

/* 인증 — 대비 개선: 회색 톤이 종이색에 묻혀 안 보이던 문제 */
.saver-ui .cert-badge.gray{color:var(--ink);border-color:var(--ink-faint);background:#eceadf}
.saver-ui .cert-badge .st{opacity:.85;font-weight:500}
.saver-ui .cert-steps.gray{--tone:var(--ink-soft)}
.saver-ui .cert-steps i{width:14px;height:6px;background:#d5d0c2}
.saver-ui .cert-steps i.done{background:var(--tone);opacity:.8}
.saver-ui .cert-steps i.current{width:24px;height:7px;background:var(--tone);opacity:1;
  box-shadow:0 1px 5px rgba(0,0,0,.22)}
.saver-ui .cert-steps i.todo{background:#dcd7c9;opacity:1}
.saver-ui .cert-steps i.next{background:transparent;border:2px solid var(--tone);opacity:.85}
@media(max-width:680px){ .saver-ui .cert-steps i{width:10px} .saver-ui .cert-steps i.current{width:18px} }


/* ══════════════════════════════════════════════════════════════════════
   카드 UI 통일 (전 페이지)
   부품 검색 화면에서 정리한 색·모양을 공용 요소로 올린다. 페이지마다
   마크업을 새로 짜지 않아도 카드/표/칩/버튼/입력이 같은 얼굴이 되도록.
   ══════════════════════════════════════════════════════════════════════ */
.saver-ui{
  /* 순백을 쓰면 종이색(--paper #f6f4ef) 위에서 차갑게 뜬다.
     카드는 종이보다 아주 살짝 밝은 미색, 표 머리는 살짝 어두운 미색. */
  --card:#fdfcf8;            /* 카드 바탕 — 따뜻한 미색 */
  --line:#e4dfd2;            /* 카드 테두리·표 구분선 */
  --line-2:#eee9dd;          /* 더 옅은 구분선 */
  --head:#f4f1e8;            /* 표 머리·카드 바닥 */
  --blue:#1d4ed8;            /* 내림(▼) */
  --blue-dim:#eaf0fe;
  --radius-c:14px;
}

/* ── 페이지 머리: 두꺼운 검정 괘선을 옅은 선으로 ── */
.saver-ui .page-head{border-bottom:1px solid var(--line);padding:26px 0 16px;margin-bottom:20px}
.saver-ui .page-head .stamp{transform:none}

/* ── 카드 ── */
.saver-ui .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-c);
  box-shadow:0 1px 2px rgba(27,26,22,.03);
  margin-bottom:18px;
  overflow:hidden;
}
.saver-ui .hero.card{padding:26px 30px 22px}
.saver-ui .sec.card{padding:22px 26px 24px}
.saver-ui .panel{background:var(--card);border-color:var(--line);border-radius:var(--radius-c)}

/* 카드 머리 / 바닥 — 카드 안에서 좌우로 갈라지는 줄 */
.saver-ui .chead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.saver-ui .chead h2{font-family:var(--serif);font-size:17px;font-weight:700}
.saver-ui .chead form{margin:0}
.saver-ui .cfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 20px;border-top:1px solid var(--line);background:var(--head);
  font-family:var(--mono);font-size:11px;color:var(--ink-faint)}

/* ── 집계 스트립: 라벨을 위로, 숫자를 아래로 ── */
.saver-ui .strip{margin-top:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-c);overflow:hidden}
.saver-ui .strip > *,.saver-ui .strip a{display:flex;flex-direction:column-reverse;justify-content:center;
  border-right:1px solid var(--line);padding:20px 12px}
.saver-ui .strip > *:last-child{border-right:none}
.saver-ui .strip a:hover{background:var(--head)}
.saver-ui .strip .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-faint);margin:0 0 8px}
.saver-ui .strip .v{font-family:var(--serif);font-size:31px;line-height:1}

.saver-ui .card.stats3{display:grid;grid-template-columns:repeat(3,1fr)}
.saver-ui .stats3 > *{padding:20px 22px;border-right:1px solid var(--line);transition:.14s background}
.saver-ui .stats3 > *:last-child{border-right:none}
.saver-ui .stats3 a:hover{background:var(--head)}
.saver-ui .stats3 .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-faint);margin-bottom:9px}
.saver-ui .stats3 .vl{font-family:var(--serif);font-size:32px;font-weight:700;line-height:1;letter-spacing:-.01em}
.saver-ui .stats3 .vl small{font-size:.4em;color:var(--ink-faint);font-weight:500;margin-left:4px}
.saver-ui .stats3 .vl.warn{color:var(--stamp)}
.saver-ui .stats3 .vl.at{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--ink-soft)}

/* ── 섹션 제목: 2px 검정 → 1px 옅은 선 ── */
.saver-ui .sechead{border-bottom:1px solid var(--line);padding-bottom:10px}
.saver-ui .sechead h2{font-size:18px}

/* ── 버튼: 알약 모양 ── */
.saver-ui .ebtn{border-radius:99px;padding:8px 16px;border:1px solid var(--rule)}
.saver-ui .ebtn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.saver-ui .ebtn.primary{background:var(--green);border-color:var(--green);color:#fff}
.saver-ui .ebtn.sm{padding:7px 14px}

/* ── 입력 ── */
.saver-ui input[type=text],.saver-ui input[type=number],.saver-ui input[type=date],
.saver-ui input[type=search],.saver-ui input:not([type]),.saver-ui select,.saver-ui textarea{
  background:var(--card);border-color:var(--line);border-radius:9px;padding:10px 12px}
.saver-ui .toolbar{background:var(--card);border-color:var(--line);border-radius:var(--radius-c);padding:18px 20px}

/* ── 칩 필터 ── */
.saver-ui .chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0}
.saver-ui .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border:1px solid var(--line);border-radius:99px;background:var(--card);
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);transition:.13s;white-space:nowrap}
.saver-ui .chip:hover{border-color:var(--ink-faint);color:var(--ink)}
.saver-ui .chip .cnt{font-size:10.5px;color:var(--ink-faint)}
.saver-ui .chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.saver-ui .chip.on .cnt{color:rgba(255,255,255,.62)}

/* ── 카드 안 필터 영역: 왼쪽에 라벨, 오른쪽에 내용 ── */
.saver-ui .cfilters{padding:16px 20px;border-bottom:1px solid var(--line)}
.saver-ui .frow{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.saver-ui .frow:last-child{margin-bottom:0}
.saver-ui .frow .rl{flex:none;width:52px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;color:var(--ink-faint)}
.saver-ui .isearch{position:relative;flex:1;min-width:0}
.saver-ui .isearch svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-faint);pointer-events:none}
.saver-ui .isearch input{padding-left:34px}
.saver-ui .cnote{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);line-height:1.7;
  margin-top:12px;padding:10px 13px;background:var(--head);border-radius:9px}

/* ── 표 ── */
.saver-ui .ledger thead tr{border-bottom:1px solid var(--line)}
.saver-ui .ledger thead th{background:var(--head);padding:11px 14px;font-size:10.5px;letter-spacing:.1em}
.saver-ui .ledger tbody td{border-bottom:1px solid var(--line-2);padding:14px}
.saver-ui .ledger tbody tr:last-child td{border-bottom:none}
.saver-ui .ledger tbody tr:hover{background:var(--head)}
.saver-ui .ledger td.nw{white-space:nowrap}
.saver-ui .ledger .ono.dim{color:var(--ink-soft);font-size:12px}
.saver-ui .ledger .empty .sm{font-size:11.5px;color:var(--ink-faint)}

/* 자재 표: 이름·규격은 왼쪽, 금액·재고는 오른쪽 (전역 가운데정렬 해제) */
.saver-ui .ledger.mat thead th,
.saver-ui .ledger.mat tbody td{text-align:left}
.saver-ui .ledger.mat thead th.r,
.saver-ui .ledger.mat tbody td.r{text-align:right}

.saver-ui .ledger .pname{font-weight:600;font-size:14px}
.saver-ui .ledger .psub{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.saver-ui .ledger .was{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);text-decoration:line-through}
.saver-ui .ledger .now{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

/* 재고 */
.saver-ui .qty{font-family:var(--mono);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.saver-ui .qty.zero{color:var(--stamp)}
.saver-ui .qunit{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-left:3px}
.saver-ui .whlist{display:flex;flex-direction:column;gap:2px;margin-top:5px;align-items:flex-end}
.saver-ui .whq{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
.saver-ui .whq b{font-weight:600;color:var(--ink-soft);margin-left:6px}

/* 증감 뱃지 */
.saver-ui .dbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;white-space:nowrap}
.saver-ui .dbadge.up{background:var(--stamp-dim);color:var(--stamp)}
.saver-ui .dbadge.down{background:var(--blue-dim);color:var(--blue)}
.saver-ui .dbadge.sm{margin-top:5px;padding:3px 8px;font-size:10.5px}
.saver-ui .dbadge i{font-style:normal;font-weight:400;opacity:.7}

@media(max-width:760px){
  .saver-ui .card.stats3{grid-template-columns:1fr}
  .saver-ui .stats3 > *{border-right:none;border-bottom:1px solid var(--line);padding:15px 18px;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .saver-ui .stats3 > *:last-child{border-bottom:none}
  .saver-ui .stats3 .lb{margin-bottom:0}
  .saver-ui .stats3 .vl{font-size:25px}
  .saver-ui .stats3 .vl.at{font-size:13px}
  .saver-ui .frow{flex-wrap:wrap;gap:8px}
  .saver-ui .frow .rl{width:auto}
  .saver-ui .isearch{flex:1 1 100%;order:2}
  .saver-ui .ledger.mat{min-width:720px}
  .saver-ui .chead,.saver-ui .cfilters,.saver-ui .cfoot{padding-left:14px;padding-right:14px}
  .saver-ui .ledger tbody td,.saver-ui .ledger thead th{padding:12px 10px}
}

/* ── 탭/세그먼트도 같은 알약 모양으로 (판매량·BOM·소싱 등) ── */
.saver-ui .etabs,.saver-ui .seg{border:1px solid var(--line);border-radius:99px;
  background:var(--card);padding:3px;gap:2px}
.saver-ui .etabs a{border-right:none;border-radius:99px;background:transparent;padding:6px 14px}
.saver-ui .etabs a:hover{background:var(--head);color:var(--ink)}
.saver-ui .etabs a.on{background:var(--ink);color:var(--paper);font-weight:600}
.saver-ui .seg label{border-radius:99px;padding:6px 13px}
.saver-ui .seg label:has(input:checked){background:var(--ink);color:var(--paper)}

/* ── 나머지 옅은 패널들도 카드와 같은 흰 바탕으로 ── */
.saver-ui .cert-hero,.saver-ui .np-strip,.saver-ui .sales-strip,.saver-ui .calc-strip,
.saver-ui .quick,.saver-ui .tips,.saver-ui .notice,.saver-ui .expense-box,.saver-ui .src-bar{
  background:var(--card);border-color:var(--line)}

/* ── 스탬프(상태 뱃지)도 알약으로 ── */
.saver-ui .stamp{border-radius:99px;padding:4px 11px;transform:none}

/* ══════════════════════════════════════════════════════════════════════
   시인성 보정 (전 페이지)
   미색 카드(#fdfcf8) 위에서 보조 글자색이 너무 옅어 흐리게 보였다.
   대비 기준(4.5:1)을 넘도록 색을 진하게 하고, 10~11px 짜리 작은 글자를
   키운다. 토큰을 바꾸므로 사이드바·표·라벨이 전부 같이 진해진다.
   ══════════════════════════════════════════════════════════════════════ */
.saver-ui{
  --ink-soft:#565349;        /* 이전 #6d6a5f — 카드 위 대비 약 7.8:1 */
  --ink-faint:#77746a;       /* 이전 #9a978c (2.9:1) → 약 4.7:1 */
}
.saver-ui input::placeholder,.saver-ui textarea::placeholder{color:#807d72}

/* 표 머리 — 자간을 줄이고 키운다 (넓은 자간은 작은 글자에서 읽기 나쁘다) */
.saver-ui .ledger thead th{font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);font-weight:700}

/* 표 본문 보조줄(규격·구분·품목코드) */
.saver-ui .ledger .psub{font-size:12px;color:var(--ink-soft)}
.saver-ui .ledger .ono.dim{font-size:12.5px;color:var(--ink-soft)}
.saver-ui .ledger .date{font-size:12px;color:var(--ink-soft)}
.saver-ui .ledger .was{font-size:13px}

/* 라벨류 */
.saver-ui .frow .rl{font-size:11px;letter-spacing:.08em;color:var(--ink-soft);font-weight:600}
.saver-ui .stats3 .lb{font-size:11px;letter-spacing:.08em;color:var(--ink-soft);font-weight:600}
.saver-ui .strip .k{font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
.saver-ui .field > label,.saver-ui .flabel{font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}

/* 칩 */
.saver-ui .chip{font-size:12.5px;color:var(--ink-soft);font-weight:500}
.saver-ui .chip .cnt{font-size:11px;color:var(--ink-faint)}
.saver-ui .chip.on .cnt{color:rgba(255,255,255,.78)}

/* 재고 창고별 내역 */
.saver-ui .whq{font-size:11.5px;color:var(--ink-soft)}
.saver-ui .whq b{color:var(--ink)}
.saver-ui .qunit{font-size:11px;color:var(--ink-soft)}

/* 카드 바닥줄·안내문 */
.saver-ui .cfoot{font-size:11.5px;color:var(--ink-soft)}
.saver-ui .cnote{color:var(--ink-soft)}
.saver-ui .src-hint{font-size:12px;color:var(--ink-soft)}
.saver-ui .page-head .sub{font-size:12px;color:var(--ink-soft)}
.saver-ui .ledger .empty .sm{font-size:12px;color:var(--ink-soft)}
.saver-ui .dbadge i{opacity:.85}

/* 사이드바 메뉴 글자도 조금 키운다 (12px 모노 → 작았다) */
.saver-ui .sb-link{font-size:12.5px}
.saver-ui .sb-glabel{font-size:10.5px;letter-spacing:.16em}

/* ── 사이드바: 노트북 화면에서 메뉴가 잘려 스크롤바가 생기던 것 ──
   글자 크기(12.5px)는 시인성 때문에 유지하고, 줄 간격만 줄여 높이를 확보한다.
   푸터 문구("해외구매 통관 시스템 · 2026")는 base.html 에서 뺐다. */
.saver-ui .sb-nav{padding:6px 10px 10px}
.saver-ui .sb-group{padding:7px 0 4px}
.saver-ui .sb-glabel{padding:3px 8px 6px}
.saver-ui .sb-link{padding:7px 10px;margin:0}
.saver-ui .sb-head{padding:15px 16px 13px}

/* ══════════════════════════════════════════════════════════════════════
   칩 필터 다듬기
   창고가 6개라 두 줄로 접히던 것을 한 줄로 고정하고, 넘치면 가로로만
   밀리게 한다(스크롤바는 숨기고 오른쪽 끝을 흐리게 해서 더 있음을 알린다).
   ══════════════════════════════════════════════════════════════════════ */
.saver-ui .frow .chips{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.saver-ui .frow .chips::-webkit-scrollbar{display:none}
/* 넘칠 때만 오른쪽 끝 페이드 (JS가 .over 를 붙인다) */
.saver-ui .frow .chips.over{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}

.saver-ui .chip{padding:6px 13px;font-size:12px;line-height:1.4;
  box-shadow:0 1px 1px rgba(27,26,22,.03);transition:.14s}
.saver-ui .chip:hover{background:var(--head);border-color:#cfc9b8;color:var(--ink);
  transform:translateY(-1px);box-shadow:0 2px 5px rgba(27,26,22,.07)}
.saver-ui .chip.on{box-shadow:0 2px 6px rgba(27,26,22,.22)}
.saver-ui .chip.on:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);
  transform:translateY(-1px)}

/* 창고 옆 숫자를 알약 뱃지로 */
.saver-ui .chip .cnt{background:var(--head);border-radius:99px;padding:1px 7px;
  font-size:10.5px;font-weight:600;color:var(--ink-soft);margin-right:-4px}
.saver-ui .chip.on .cnt{background:rgba(255,255,255,.17);color:#fff}

/* 라벨 세로 가운데 정렬 유지 */
.saver-ui .frow{align-items:center}

/* 표 머리가 '구 / 분' 처럼 두 줄로 깨지지 않게 */
.saver-ui .ledger thead th{white-space:nowrap}

/* 보기(뷰 전환)는 네모, 창고는 알약 — 성격이 다른 필터라 모양으로 구분한다 */
.saver-ui .chips.sq .chip{border-radius:8px;padding:7px 14px}

/* 카드 머리에 버튼이 둘 이상일 때 */
.saver-ui .hactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.saver-ui .hactions form{margin:0}
.saver-ui .hactions label.ebtn{cursor:pointer}

/* 사용중단 표시 — 검색 결과에 섞여도 한눈에 구분되게 */
.saver-ui .stopbadge{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:99px;
  background:var(--stamp-dim);color:var(--stamp);border:1px solid #e6c3bd;
  font-family:var(--mono);font-size:10.5px;font-weight:700;vertical-align:1px;white-space:nowrap}
.saver-ui .cnote a{color:var(--green);font-weight:600;text-decoration:underline}

/* 단가없음 등 경고성 표시 (사용중단 배지의 노란 변형) */
.saver-ui .stopbadge.warn{background:#f7f1e2;color:#7d6220;border-color:#e3d5ae}
/* BOM 합계줄 */
.saver-ui .ledger tfoot td{border-top:1px solid var(--line);background:var(--head);padding:14px}

/* ── 상세 화면에서 목록으로 돌아가는 길 ──
   우측 상단의 옅은 링크는 못 찾는다는 지적이 있었다. 제목과 같은 줄에 두되
   먹색으로 채워 눈에 띄게 한다. */
.saver-ui .page-head.with-back{align-items:center}
.saver-ui .bigback{display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:11px 24px;border-radius:99px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(27,26,22,.22);transition:.15s}
.saver-ui .bigback:hover{background:var(--green);color:#fff;
  box-shadow:0 4px 12px rgba(20,102,58,.3);transform:translateY(-1px)}
.saver-ui .bigback svg{width:16px;height:16px}
@media(max-width:680px){ .saver-ui .bigback{width:100%;justify-content:center;margin-top:12px} }

/* 이력 안의 부품별 단가 변동 표 */
.saver-ui .ptbl{width:100%;border-collapse:collapse;margin-top:7px}
.saver-ui .ptbl td{padding:5px 0;vertical-align:middle;border:none}
.saver-ui .ptbl td.r{text-align:right;white-space:nowrap;padding-left:14px}
.saver-ui .ptbl td.pn{width:100%}
.saver-ui .ptbl .pname{font-size:13px}
.saver-ui .ptbl .now{font-size:12.5px}
.saver-ui .ptbl .was{font-size:12.5px}
.saver-ui .nkind.price{background:var(--stamp-dim);color:var(--stamp)}
.saver-ui .notelist li.price{background:transparent}

/* ── BOM 이력 · 코멘트 ── */
.saver-ui .notefrm{display:flex;gap:10px;align-items:flex-start}
.saver-ui .notefrm textarea{flex:1;min-width:0;resize:vertical;font-family:var(--sans);font-size:13.5px;line-height:1.6}
.saver-ui .notefrm .ebtn{flex:none;margin-top:2px}
.saver-ui .notelist{list-style:none;margin:0;padding:0}
.saver-ui .notelist li{padding:14px 20px;border-bottom:1px solid var(--line-2)}
.saver-ui .notelist li:last-child{border-bottom:none}
.saver-ui .notelist li.upload{background:var(--head)}
.saver-ui .nmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.saver-ui .nmeta form{margin:0 0 0 auto}
.saver-ui .nkind{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:2px 8px;border-radius:99px;background:var(--green-dim);color:var(--green)}
.saver-ui .nkind.upload{background:#efeadc;color:var(--gold)}
.saver-ui .ndate{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.saver-ui .ncost{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  background:var(--head);border-radius:99px;padding:2px 9px}
.saver-ui .ndel{border:none;background:transparent;cursor:pointer;color:var(--ink-faint);
  font-size:13px;line-height:1;padding:2px 4px;border-radius:4px}
.saver-ui .ndel:hover{color:var(--stamp);background:var(--stamp-dim)}
.saver-ui .nbody{font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.saver-ui .notepeek{margin-top:4px;display:flex;gap:8px;align-items:baseline}
.saver-ui .notepeek .nd{color:var(--ink-faint);font-size:10.5px;flex:none}
@media(max-width:680px){ .saver-ui .notefrm{flex-direction:column} .saver-ui .notefrm .ebtn{width:100%;justify-content:center} }

/* 구성 변경 태그 (추가 / 빠짐 / 소요량) */
.saver-ui .ctag{display:inline-block;margin-right:7px;padding:1px 8px;border-radius:99px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em}
.saver-ui .ctag.in{background:var(--green-dim);color:var(--green)}
.saver-ui .ctag.out{background:var(--stamp-dim);color:var(--stamp)}
.saver-ui .ctag.qty{background:#efeadc;color:var(--gold)}

/* BOM 구성 편집 */
.saver-ui .qtyfrm{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end}
.saver-ui .qtyfrm input{width:78px;padding:6px 8px;text-align:right}
.saver-ui .nkind.edit{background:#e7eefb;color:#1d4ed8}
.saver-ui .acbox{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 8px 24px rgba(27,26,22,.14);max-height:290px;overflow-y:auto}
.saver-ui .acrow{padding:9px 13px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.saver-ui .acrow:last-child{border-bottom:none}
.saver-ui .acrow:hover{background:var(--head)}
.saver-ui .acrow b{display:block;font-size:13.5px;font-weight:600}
.saver-ui .acrow .psub{display:block;margin-top:2px}
.saver-ui .ctag.swap{background:#e7eefb;color:#1d4ed8}

/* 품목 이미지 썸네일 */
.saver-ui .thumbcol{width:56px;padding-right:0!important}
.saver-ui .pthumb{width:42px;height:42px;object-fit:contain;border-radius:7px;
  background:var(--head);border:1px solid var(--line);display:block}
.saver-ui .pthumb.none{background:repeating-linear-gradient(45deg,var(--head),var(--head) 5px,transparent 5px,transparent 10px)}

/* 품목 이미지 모달 */
.saver-ui .pthumb[data-cd]{cursor:pointer;transition:.13s}
.saver-ui .pthumb[data-cd]:hover{border-color:var(--ink-faint);transform:scale(1.08)}
.saver-ui .imodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.saver-ui .imodal[hidden]{display:none}
.saver-ui .imodal-bg{position:absolute;inset:0;background:rgba(27,26,22,.55)}
.saver-ui .imodal-box{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-c);box-shadow:0 20px 60px rgba(27,26,22,.35);
  width:min(520px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.saver-ui .imodal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--line)}
.saver-ui .imodal-body{flex:1;display:flex;align-items:center;justify-content:center;
  padding:28px;background:var(--head);overflow:auto}
/* 이카운트 원본이 작아도(50x40) 시원하게 보이도록 흰 판 위에 크게 얹는다 */
.saver-ui .imodal-plate{background:#fff;border:1px solid var(--line);border-radius:12px;
  width:min(272px,78%);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:18px;box-shadow:0 2px 10px rgba(27,26,22,.07)}
.saver-ui .imodal-plate img{width:100%;height:100%;object-fit:contain;display:block}
.saver-ui .imodal-empty{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint)}
.saver-ui .imodal-foot{display:flex;gap:9px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line)}
.saver-ui .imodal-foot form{margin:0}
.saver-ui .imodal-foot label.ebtn{cursor:pointer}
.saver-ui .pthumb.big{width:64px;height:64px}
.saver-ui a.pthumb.link{display:block;cursor:pointer}
.saver-ui a.pthumb.link:hover{border-color:var(--green)}

/* BOM 목록의 제품 사진은 조금 크게 (부품 목록 썸네일은 42px 유지) */
.saver-ui .bomlist .thumbcol{width:74px}
.saver-ui .bomlist .pthumb{width:58px;height:58px;border-radius:9px}
@media(max-width:680px){
  .saver-ui .bomlist .thumbcol{width:58px}
  .saver-ui .bomlist .pthumb{width:46px;height:46px}
}

/* 모바일: 검색줄이 '라벨 검색버튼 / 입력칸' 순으로 뒤집혀 보이던 것 정리 */
@media(max-width:760px){
  .saver-ui .frow{flex-wrap:wrap;gap:8px}
  .saver-ui .frow .rl{flex:1 1 100%;width:auto;margin-bottom:-2px}
  .saver-ui .frow .isearch{flex:1 1 auto;order:0;min-width:0}
  .saver-ui .frow .ebtn{flex:none;order:1}
  .saver-ui .chead{flex-wrap:wrap}
  .saver-ui .chead .hactions{flex:1 1 100%}
}
.saver-ui .trfail{color:var(--stamp);font-family:var(--mono);font-size:12px;line-height:1.6}