/* 홈트레이더스 앱 — 무채색(흰/검/그레이) · 보더리스. Pretendard 단일. */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f1f1ef; --surface-3:#e6e6e2;
  --ink:#1a1a1a; --muted:#77756f; --faint:#a4a29d;
  --accent:#1a1a1a; --accent-ink:#ffffff; --accent-soft:#e7e7e4;
  --ok-bg:#ececea; --ok-ink:#8a8884;
  --low-bg:#d6d5d1; --low-ink:#3a3936;
  --out-bg:#1e1d1c; --out-ink:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.05); --shadow-lg:0 -2px 16px rgba(0,0,0,.06);
  --nav-h:64px; --max:520px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,"Noto Sans KR",sans-serif;
}
/* 라이트 모드 단일 (다크모드 제거) */
:root{color-scheme:light;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}
#app{max-width:var(--max);margin:0 auto;min-height:100vh;background:var(--bg);position:relative;}
button{font-family:inherit;cursor:pointer;border:0;}
input,select,textarea{font-family:inherit;font-size:16px;border:0;}

/* ── 상단 헤더 ── */
.appbar{position:sticky;top:0;z-index:20;background:var(--surface);
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  padding-top:calc(14px + env(safe-area-inset-top));box-shadow:0 2px 10px rgba(0,0,0,.03);}
.appbar .logo{height:30px;width:auto;max-width:120px;object-fit:contain;flex:none;}
.il-src{font-size:11px;color:var(--muted);font-weight:600;margin-left:3px}
/* 이카운트식 출고/입고 품목 라인 */
.sfline{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:12px;padding:10px 11px;margin-bottom:8px}
.sfl-amt{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-top:8px;min-height:0}
.sfl-amt:empty{display:none;margin-top:0}
.sf-foot:empty{display:none}
.sf-foot{background:var(--surface-2);border:1px solid var(--surface-3);border-radius:12px;padding:11px 13px;margin-top:4px}
.sf-foot>div{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:5px}
.sf-foot>div b{color:var(--ink);font-weight:600}
.sf-foot>div.big{font-size:16px;padding-top:6px;margin-top:1px;margin-bottom:0;border-top:1px solid var(--surface-3)}
.sf-foot>div.big span,.sf-foot>div.big b{color:var(--ink);font-weight:700}
/* 실리콘 재고 매트릭스 (색상 × 창고) */
.silsum{display:flex;gap:10px;margin:6px 0 14px}
.silsum-c{flex:1;background:var(--surface-2);border:1px solid var(--surface-3);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.silsum-c .l{font-size:13px;color:var(--muted);font-weight:600}
.silsum-c b{font-size:26px;font-weight:800;line-height:1.1}
.silsum-c .u{font-size:12px;color:var(--muted)}
.silsum-c.tot{background:var(--surface-3);border-color:var(--surface-3)}
.silsum-c.tot b{color:var(--ink)}
.silmtx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;border:1px solid var(--surface-3);border-radius:12px}
.silmtx{width:auto;border-collapse:collapse;font-size:15px}
.silmtx td.cell-nm,.silmtx th.cell-nm{text-align:left}
.silmtx th,.silmtx td{padding:12px 8px;text-align:center;border-bottom:1px solid var(--surface-3);white-space:nowrap}
.silmtx thead th{font-size:15px;color:var(--ink);font-weight:800;background:var(--surface-2)}
.silmtx td.cell-nm,.silmtx th.cell-nm{text-align:left;padding-left:12px}
.silmtx .nmwrap{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:17px}
.silmtx .mtx-note{margin-top:4px;margin-left:31px;color:#e05a52;font-size:12.5px;font-weight:600;white-space:normal;line-height:1.35}
.silmtx td.z{color:var(--faint)}
.silmtx .cell-tot{font-weight:800}
.silmtx td.cell-tot.out{color:#e05a52}
.silmtx td.cell-tot.low{color:#b26a1e}
.silmtx tbody tr:active{background:var(--surface-2)}
.silmtx tbody tr{cursor:pointer}
.silmtx tfoot td{font-weight:800;background:var(--surface-2);border-bottom:0}
.appbar h1{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em;flex:1;}
.appbar .sub{font-size:12px;color:var(--muted);font-weight:500;}

/* ── 스크롤 영역 ── */
.screen{padding:16px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));}
/* FAB 있는 화면은 마지막 카드가 버튼에 가리지 않도록 아래 여백 확보 */
#app:has(.fab-wrap) .screen{padding-bottom:calc(var(--nav-h) + 120px + env(safe-area-inset-bottom));}
.sec-title{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  margin:26px 2px 12px;}
.sec-title:first-child{margin-top:8px;}

/* ── 카드 ── */
.card{background:var(--surface-2);border-radius:14px;padding:15px 16px;box-shadow:none;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{background:var(--surface);border-radius:14px;padding:14px;box-shadow:var(--shadow);}
.stat .k{font-size:12px;color:var(--muted);font-weight:500;}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums;}
.stat .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px;}
.stat.accent{background:var(--accent);color:var(--accent-ink);}
.stat.accent .k{color:var(--accent-ink);opacity:.7;}

/* ── 재고 목록 row ── */
.rows{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;gap:13px;background:transparent;border-radius:0;
  padding:15px 2px;width:100%;text-align:left;color:inherit;box-shadow:none;border-bottom:1px solid var(--surface-2);}
.rows > .row:last-child{border-bottom:0;}
.row:active{background:var(--surface-2);}
.sw{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;}
.row .nm{flex:1;min-width:0;}
.row .nm b{font-size:15px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .nm span{font-size:12px;color:var(--muted);}
.row .qty{text-align:right;flex:none;}
.row .qty b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
.row .qty span{font-size:11px;color:var(--muted);display:block;}

/* 홈 대시보드 */
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.tile{background:var(--surface-2);border-radius:14px;padding:14px 8px;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;}
.tile:active{transform:scale(.98);}
.tile .tk{font-size:11px;color:var(--muted);font-weight:600;text-align:center;line-height:1.2;}
.tile .tv{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;}
.tile.soft{opacity:.55;}
.tile.soft .tv{font-size:20px;color:var(--muted);}
.brd{display:flex;flex-direction:column;gap:11px;background:transparent;border-radius:0;
  padding:15px 2px;width:100%;text-align:left;color:inherit;box-shadow:none;border-bottom:1px solid var(--surface-2);}
.brd-top{display:flex;align-items:center;gap:12px;}
.brd .broute{font-size:15px;font-weight:800;color:var(--ink);margin-top:3px;letter-spacing:-.2px;}
.brd .broute .arr{color:var(--muted);font-weight:600;margin:0 3px;}
/* 날짜별 그룹(배차 요청) */
.dgrp{margin-bottom:2px;}
.dgrp + .dgrp{border-top:1px solid var(--surface-3);margin-top:8px;}
.dghd{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:800;color:var(--muted);padding:16px 2px 4px;}
.dghd .rel{font-size:12px;font-weight:700;color:var(--muted);}
.dghd .td-big{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.dghd .td-date{font-size:13px;font-weight:700;color:var(--muted);}
/* 출고 메뉴 카테고리 리스트 */
.catlist{display:flex;flex-direction:column;margin-top:4px;}
.catrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:18px 4px;background:none;border:0;border-bottom:1px solid var(--surface-2);color:inherit;text-align:left;}
.catrow:last-child{border-bottom:0;}
.catrow:active{background:var(--surface-2);}
.catrow .cl{font-size:16px;font-weight:700;color:var(--ink);}
.catrow .cc{font-size:16px;font-weight:800;color:var(--ink);min-width:26px;text-align:right;font-variant-numeric:tabular-nums;}
.catrow .cc.zero{color:var(--faint);font-weight:600;}
.backlink{background:none;border:0;color:var(--muted);font-size:14px;font-weight:700;padding:8px 2px;}
.backlink:active{opacity:.5;}
/* 스마트 입력 챗봇 */
.chatlog{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding:6px 2px 4px;margin-bottom:10px;}
.cbub{max-width:84%;padding:11px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;word-break:break-word;}
.cbub.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:5px;}
.cbub.bot{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-bottom-left-radius:5px;}
.cbub .cbtn{display:block;margin-top:10px;width:100%;padding:10px;border-radius:11px;background:var(--ink);color:var(--bg);border:0;font-size:14px;font-weight:700;}
.cbub .cbtn:active{opacity:.7;}
.chatbar{display:flex;align-items:flex-end;gap:8px;}
.chatbar textarea{flex:1;resize:none;padding:12px 14px;border-radius:16px;background:var(--surface-2);color:var(--ink);border:0;font-size:15px;font-family:inherit;line-height:1.4;max-height:120px;}
.csend{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:0;font-size:19px;font-weight:800;display:grid;place-items:center;}
.csend:active{opacity:.7;}
.callrow{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:12px;
  background:#e6f4ea;color:#137333;font-size:15px;font-weight:700;text-decoration:none;}
.callrow svg{width:19px;height:19px;}
.rows > .brd:last-child{border-bottom:0;}
.brd:active{background:var(--surface-2);}
.brd .bmid b{font-size:15px;}
.brd .bt{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);flex:none;min-width:52px;white-space:nowrap;}
.brd .bmid{flex:1;min-width:0;}
.brd .bmid b{font-size:14px;font-weight:600;}
.brd .bsub{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.psec{background:transparent;border-radius:0;padding:0 2px 6px;box-shadow:none;margin-bottom:14px;}
.pttl{display:block;font-size:13px;font-weight:800;color:var(--ink);padding:6px 0 4px;}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  background:transparent;color:inherit;padding:8px 2px;font-size:13px;text-align:left;}
.prow+.prow{box-shadow:inset 0 1px 0 var(--surface-2);}
.prow span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 창고 카드 · 드릴인 */
.whcard{display:flex;align-items:center;gap:13px;background:var(--surface);border-radius:14px;
  padding:14px 15px;width:100%;text-align:left;color:inherit;box-shadow:var(--shadow);}
.whcard:active{transform:scale(.99);}
.whic{width:42px;height:42px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--ink);}
.whic svg{width:24px;height:24px;}
.whic.sm{width:34px;height:34px;border-radius:9px;}
.whic.sm svg{width:20px;height:20px;}
.whcard .nm{flex:1;min-width:0;}
.whcard .nm b{font-size:16px;font-weight:700;display:block;}
.whcard .nm span{font-size:12px;color:var(--muted);}
.whcard .qty{text-align:right;}
.whcard .qty b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;}
.whcard .qty span{font-size:11px;color:var(--muted);display:block;}
.whcard .chev{color:var(--faint);font-size:20px;font-weight:800;margin-left:2px;}
.backbar{background:transparent;color:var(--muted);font-size:14px;font-weight:600;padding:2px 4px 6px;}
.whtitle{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 2px 6px;}
.whaddr{font-size:12.5px;color:var(--muted);margin:-2px 2px 12px;line-height:1.45;}
.whtag{display:inline-flex;align-items:center;gap:3px;background:var(--surface-2);color:var(--ink);
  font-size:11px;font-weight:700;padding:2px 8px 2px 6px;border-radius:20px;vertical-align:middle;}
.whtag svg{width:12px;height:12px;}
.iconpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.iconpick button{aspect-ratio:1;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);}
.iconpick button svg{width:22px;height:22px;}
.iconpick button.on{background:var(--accent);color:var(--accent-ink);}
.seg.wrap{flex-wrap:wrap;}
.seg.wrap button{flex:1 1 28%;}
.nav button svg{width:24px;height:24px;}

/* 실리콘 색상 탭 — 창고별 쪼개기 칩 */
.split{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.wtag{font-size:11px;font-weight:700;background:var(--surface-2);color:var(--muted);
  padding:1px 8px;border-radius:20px;font-variant-numeric:tabular-nums;}

/* 상태 pill — 무채색(밝기로 구분) */
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink);}
.pill.low{background:var(--low-bg);color:var(--low-ink);}
.pill.out{background:var(--out-bg);color:var(--out-ink);}
.pill.plan{background:var(--ok-bg);color:var(--muted);}
.pill.mid{background:var(--low-bg);color:var(--low-ink);}
.pill.done{background:var(--out-bg);color:var(--out-ink);}
.pill.call{background:var(--accent);color:var(--accent-ink);text-decoration:none;padding:5px 12px;}
.pill.chk{background:transparent;color:#e05a52;box-shadow:inset 0 0 0 1.5px #e05a52;}
.qopen{display:flex;flex:1;gap:12px;align-items:center;background:transparent;text-align:left;min-width:0;color:inherit;padding:0;}

/* 필터/토글 탭 */
.tabs{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:12px;margin-bottom:4px;}
.tabs button{flex:1;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:8px;border-radius:9px;}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}

/* 상태 필터 탭 (건수) */
.filtabs{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:12px;margin-bottom:12px;}
.filtabs button{flex:1;background:transparent;border-radius:9px;padding:6px 2px;color:var(--muted);
  font-size:11px;font-weight:600;}
.filtabs button b{display:block;font-size:15px;font-weight:800;margin-top:1px;font-variant-numeric:tabular-nums;}
.filtabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}

/* 단계 스테퍼 (상세) */
.stepper{display:flex;justify-content:space-between;margin:2px 6px 18px;}
.stepper .sc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;background:transparent;border:0;padding:6px 0;cursor:pointer;}
.stepper .sc:active{opacity:.6;}
.stepper .sc::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--surface-2);}
.stepper .sc:first-child::before{display:none;}
.stepper .sc.done::before,.stepper .sc.now::before{background:var(--accent);}
.stepper .ci{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--faint);}
.stepper .ci svg{width:14px;height:14px;}
.stepper .sc.done .ci{background:var(--accent);color:var(--accent-ink);}
.stepper .sc.now .ci{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);}
.stepper .tl{font-size:12px;font-weight:600;color:var(--muted);}
.stepper .sc.done .tl,.stepper .sc.now .tl{color:var(--ink);}

/* 배차 정보 블록 · 전화 링크 */
.docblock{margin-top:12px;padding-top:12px;box-shadow:inset 0 1px 0 var(--surface-3);}
a.tel{color:var(--ink);font-weight:800;text-decoration:none;background:var(--surface-3);
  padding:3px 12px;border-radius:20px;}

/* 출고 목록 */
.ship{display:flex;align-items:center;gap:13px;background:transparent;border-radius:0;box-shadow:none;
  padding:15px 2px;width:100%;text-align:left;color:inherit;border-bottom:1px solid var(--surface-2);}
.rows > .ship:last-child{border-bottom:0;}
.ship:active{background:var(--surface-2);}
.ship .body{flex:1;min-width:0;}
.ship .body b{font-size:15px;font-weight:600;}
.ship .body .meta{font-size:12px;color:var(--muted);margin-top:2px;}
.ship .right{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.ship .right .q{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}

/* 빈 상태 */
.empty{text-align:center;color:var(--faint);padding:44px 20px;font-size:14px;}
.empty .ico{margin:0 auto 10px;color:var(--faint);}
.empty .ico svg{width:34px;height:34px;}

/* ── 하단 탭바 ── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:var(--surface);box-shadow:var(--shadow-lg);
  display:flex;max-width:var(--max);margin:0 auto;}
.nav button{flex:1;background:transparent;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;}
.nav button .ic{width:24px;height:24px;}
.nav button.on{color:var(--ink);}

/* ── FAB ── */
/* 스피드다이얼 퀵 FAB */
.fab-wrap{position:fixed;z-index:29;right:calc(50% - var(--max)/2 + 18px);
  bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
@media(max-width:520px){.fab-wrap{right:18px;}}
.fab-main{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .18s ease;}
.fab-main svg{width:26px;height:26px;}
.fab-main.open{transform:rotate(45deg);}
.fab-item{display:flex;align-items:center;gap:9px;background:var(--surface);color:var(--ink);
  border-radius:14px;height:48px;padding:0 16px 0 14px;font-size:14px;font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.18);animation:fabup .16s ease;}
.fab-item svg{width:19px;height:19px;flex:none;}
@keyframes fabup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ── 빠른 출고 ── */
.quickbar{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:14px;
  background:var(--surface-2);border-radius:13px;padding:13px 14px;color:var(--ink);text-align:left;}
.quickbar .ic{width:18px;height:18px;flex:none;color:var(--ink);}
.quickbar span.tx{font-size:14px;font-weight:600;}
.quickbar b{font-weight:800;}
.quickbar .go{margin-left:auto;font-size:18px;font-weight:800;color:var(--muted);}
.quickbar:active{transform:scale(.99);}
.parsed{background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:600;
  padding:10px 12px;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;gap:7px;}
.parsed svg{width:15px;height:15px;flex:none;}

/* ── 출고 달력 ── */
.cal{background:var(--surface);border-radius:16px;padding:12px 10px 14px;box-shadow:var(--shadow);}
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px;}
.cal-nav b{font-size:16px;font-weight:700;letter-spacing:-.01em;}
.cal-nav button{background:transparent;color:var(--ink);font-size:22px;line-height:1;padding:4px 14px;border-radius:9px;}
.cal-nav button:active{background:var(--surface-2);}
.dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;
  font-weight:600;color:var(--muted);margin-bottom:6px;}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cell{aspect-ratio:1/1;background:transparent;border-radius:11px;padding:0;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.cell.empty{visibility:hidden;}
.cell:active{background:var(--surface-2);}
.cell .dnum{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.cell.today .dnum{font-weight:800;text-decoration:underline;text-underline-offset:3px;}
.cell.sel{background:var(--accent);}
.cell.sel .dnum{color:var(--accent-ink);font-weight:800;text-decoration:none;}
.cdot{min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--accent);
  color:var(--accent-ink);font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;}
.cdot.plan{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted);color:var(--muted);}
.cdot.ghost{background:transparent;visibility:hidden;}
.cell.sel .cdot{background:var(--accent-ink);color:var(--accent);}
.cell.sel .cdot.plan{box-shadow:inset 0 0 0 1.5px var(--accent-ink);color:var(--accent-ink);}
.dayhdr{display:flex;align-items:center;justify-content:space-between;margin:20px 4px 10px;}
.dayhdr b{font-size:15px;font-weight:700;}
.dayhdr .cnt{font-size:12px;color:var(--muted);font-weight:600;}

/* ── 모달/시트 ── */
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--surface);width:100%;max-width:var(--max);border-radius:20px 20px 0 0;
  padding:8px 18px calc(20px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto;animation:up .22s ease;}
@keyframes up{from{transform:translateY(30px);opacity:.6;}to{transform:none;opacity:1;}}
.grab{width:40px;height:4px;border-radius:4px;background:var(--surface-3);margin:8px auto 14px;}
/* 항상 뜨는 닫기 X (스크롤해도 우상단 고정) — 모든 시트 공통 */
.sheet-x{position:sticky;top:4px;z-index:6;margin-left:auto;margin-bottom:-32px;
  width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--muted);
  font-size:16px;line-height:1;display:grid;place-items:center;}
.sheet-x:active{background:var(--surface-3);}
.dochdr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:44px;}
.iconbtn{width:36px;height:36px;border-radius:50%;background:var(--surface-2);color:var(--ink);display:grid;place-items:center;border:0;flex:none;}
.iconbtn:active{background:var(--surface-3);}
.iconbtn svg{width:19px;height:19px;}
.issuer{flex:none;font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.02em;padding-left:10px;white-space:nowrap;}
.alertbar{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:11px 14px;border-radius:11px;background:#fbeceb;color:#c0392b;font-weight:700;font-size:14px;border:0;margin-bottom:14px;}
.alertbar b{font-weight:800;}
.alertbar .ab-ic{position:relative;flex:none;width:20px;height:20px;display:grid;place-items:center;}
.alertbar .ab-ic svg{width:19px;height:19px;}
.alertbar .ab-ic .dot{position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:#c0392b;box-shadow:0 0 0 2px #fbeceb;animation:abpulse 1.5s ease-in-out infinite;}
.alertbar .ab-tx{flex:1;}
.alertbar .go{flex:none;font-size:18px;color:#c0392b;}
.alertbar:active{background:#f6dcd9;}
@keyframes abpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.3);}}
.outfilter{display:flex;gap:8px;margin:6px 0 4px;}
.minisel{flex:1;min-width:0;padding:10px 12px;border-radius:10px;background:var(--surface-2);color:var(--ink);border:0;font-size:14px;font-weight:600;}
.holdseg{display:flex;flex-wrap:wrap;gap:8px;}
.holdseg button{padding:9px 13px;border-radius:10px;background:var(--surface-2);color:var(--ink);border:0;font-size:14px;font-weight:600;}
.holdseg button:active{background:var(--surface-3);}
.pfill-blk{margin-bottom:16px;}
.pfill-hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 2px 8px;border-bottom:1px solid var(--surface-2);margin-bottom:4px;}
.pfill-hd b{font-size:15px;font-weight:700;}
.pfill-hd span{font-size:12px;color:var(--muted);white-space:nowrap;}
.pfill-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px;}
.pfill-nm{font-size:14.5px;font-weight:600;min-width:0;}
.pfill-nm .q2{color:var(--muted);font-weight:500;font-size:13px;margin-left:6px;}
.pfill-in{width:118px;flex:none;padding:11px 12px;border-radius:10px;background:#fbeceb;border:1px solid #e0a19b;color:var(--ink);font-size:15px;font-weight:700;text-align:right;}
.pfill-in:focus{background:var(--surface);outline:2px solid var(--ink);border-color:var(--ink);}
/* 출고 상세 품목 라인 */
.ilines{display:flex;flex-direction:column;}
.iline{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--surface-2);}
.iline:last-child{border-bottom:0;}
.il-l{min-width:0;}
.il-nm{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.il-sub{margin-top:5px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);}
.il-r{text-align:right;flex:none;}
.il-qty{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;}
.il-qty .il-pcs{font-size:12px;font-weight:600;color:var(--muted);}
.il-price{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap;}
.il-price.nop{color:#c0392b;font-weight:700;}
.il-amt{font-size:14px;font-weight:800;color:var(--ink);margin-top:3px;white-space:nowrap;}
.sheet h2{font-size:19px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.sheet h2 svg{width:18px;height:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.field input,.field select,textarea{width:100%;padding:12px 13px;border-radius:11px;
  background:var(--surface-2);color:var(--ink);outline:none;}
.field input:focus,.field select:focus,textarea:focus{box-shadow:0 0 0 2.5px var(--accent);}
.field .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
textarea{resize:vertical;line-height:1.5;}
.seg{display:flex;gap:8px;}
.seg button{flex:1;padding:11px;border-radius:11px;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:14px;}
.seg button.on{background:var(--accent);color:var(--accent-ink);}
.btn{width:100%;padding:15px;border-radius:13px;background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:700;margin-top:4px;}
.btn.ghost{background:var(--surface-2);color:var(--ink);}
.btn.danger{background:transparent;color:var(--muted);}
.tgl{width:100%;padding:12px;border-radius:11px;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:14px;}
.tgl.on{background:var(--accent);color:var(--accent-ink);}
.need{box-shadow:inset 0 0 0 2px #e05a52 !important;}
.seg.need{box-shadow:inset 0 0 0 2px #e05a52;border-radius:11px;}
.qlhead{display:grid;grid-template-columns:1fr 62px 82px 28px;gap:6px;font-size:11px;color:var(--muted);font-weight:600;padding:0 2px 6px;}
.qlrow{display:grid;grid-template-columns:1fr 62px 82px 28px;gap:6px;margin-bottom:6px;align-items:center;}
.qlrow select,.qlrow input{padding:10px 8px;border-radius:9px;background:var(--surface-2);color:var(--ink);min-width:0;}
.qlrow .ql-del{background:transparent;color:var(--muted);font-size:20px;padding:0;}
.addr-row{display:flex;gap:8px;margin-top:8px;}
.addr-row input{flex:1;}
.addr-row button{flex:none;padding:0 14px;border-radius:11px;background:var(--surface-2);color:var(--ink);font-weight:600;font-size:13px;}
.okmark{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;margin:8px auto 6px;}
.okmark svg{width:24px;height:24px;}
.btn:disabled{opacity:.5;}
.hint{font-size:12px;color:var(--muted);margin-top:-6px;margin-bottom:12px;}

/* 명세서 */
.doc{background:var(--surface-2);border-radius:14px;padding:18px;}
.doc h3{margin:0 0 2px;font-size:17px;}
.doc .docsub{color:var(--muted);font-size:12px;margin-bottom:14px;}
.doc table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;}
.doc th,.doc td{text-align:left;padding:8px 6px;box-shadow:inset 0 -1px 0 var(--surface-3);vertical-align:top;}
.doc td.n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc th{color:var(--muted);font-weight:600;font-size:12px;}
.doc td.n{text-align:right;font-variant-numeric:tabular-nums;}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;}
.kv span{color:var(--muted);}

/* ── 데스크톱(PC) 레이아웃 — 좌측 사이드바 + 넓은 콘텐츠 + 가운데 모달 (모바일 <900px는 그대로) ── */
@keyframes pop{from{transform:scale(.97);opacity:.5;}to{transform:none;opacity:1;}}
@media (min-width:900px){
  body{background:var(--surface-2);}
  #app:has(.nav){max-width:1060px;min-height:100vh;background:var(--bg);
    box-shadow:0 0 48px rgba(0,0,0,.10);
    display:grid;grid-template-columns:212px 1fr;grid-template-rows:auto 1fr;}
  .appbar{grid-column:2;grid-row:1;}
  .screen{grid-column:2;grid-row:2;padding:26px 30px 44px;}
  #app:has(.fab-wrap) .screen{padding-bottom:44px;}

  /* 좌측 세로 사이드바 네비 */
  .nav{grid-column:1;grid-row:1 / 3;position:static;height:auto;width:auto;max-width:none;margin:0;
    flex-direction:column;justify-content:flex-start;gap:4px;padding:18px 12px;
    background:var(--surface);box-shadow:2px 0 14px rgba(0,0,0,.04);}
  .nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;
    padding:12px 15px;border-radius:12px;font-size:14px;font-weight:600;}
  .nav button svg,.nav button .ic{width:22px;height:22px;}
  .nav button.on{background:var(--surface-2);color:var(--ink);}

  /* FAB — 콘텐츠 우하단(카드 기준) */
  .fab-wrap{right:max(32px, calc(50vw - 498px));bottom:32px;}

  /* 시트 → 화면 가운데 모달 */
  .sheet-bg{align-items:center;}
  .sheet{max-width:580px;border-radius:18px;max-height:86vh;
    padding:22px 26px 26px;animation:pop .18s ease;}
  .grab{display:none;}
}

/* 리스트 행 안의 열기 버튼 + 기사 전화 걸기 버튼 */
.ship-open,.brd-open{flex:1;min-width:0;display:flex;align-items:center;gap:13px;background:none;border:0;text-align:left;color:inherit;padding:0;font:inherit;}
.brd-open{gap:12px;}
.ship-open:active,.brd-open:active{opacity:.55;}
.callbtn{flex:none;width:42px;height:42px;border-radius:50%;background:#e6f4ea;color:#137333;display:grid;place-items:center;margin-left:8px;}
.callbtn svg{width:20px;height:20px;}

/* 홈/단가 탭 (진행중·완료 스타일 — 언더라인) */
.homtabs{display:flex;gap:17px;border-bottom:1px solid var(--surface-2);margin:2px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.homtabs::-webkit-scrollbar{display:none;}
.homtabs button{flex:none;white-space:nowrap;background:none;border:0;padding:11px 0;font-size:16px;font-weight:700;color:var(--faint);display:flex;align-items:center;gap:5px;margin-bottom:-1px;}
.homtabs button b{font-size:13px;font-weight:800;}
.homtabs button.on{color:var(--ink);box-shadow:inset 0 -2.5px 0 var(--ink);}

/* A4 출고 전표 (인쇄/PDF) */
.printarea{background:#fff;color:#000;border:2px solid #000;border-radius:8px;padding:18px 20px;}
.pr-title{text-align:center;font-size:30px;font-weight:900;letter-spacing:10px;margin-bottom:2px;}
.pr-date{text-align:center;font-size:18px;font-weight:700;margin-bottom:14px;}
.pr-tbl{width:100%;border-collapse:collapse;}
.pr-tbl th{width:84px;text-align:left;vertical-align:top;font-size:18px;font-weight:800;padding:12px 8px;border-top:1.5px solid #000;background:#f0f0f0;white-space:nowrap;}
.pr-tbl td{font-size:22px;font-weight:700;padding:12px 10px;border-top:1.5px solid #000;line-height:1.35;word-break:break-all;}
.pr-tbl td big{font-size:30px;font-weight:900;}
.pr-tbl td b{font-weight:900;}
.pr-sub{font-size:15px;font-weight:500;color:#333;}
@media print{
  html,body{background:#fff !important;}
  body *{visibility:hidden;}
  .printarea,.printarea *{visibility:visible;}
  .printarea{position:absolute;left:0;top:0;width:100%;border:none;padding:8mm 6mm;}
  .pr-tbl th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ── 첫 화면(에이스/홈트) · 홈트 배차 요청 (hdisp.js, 2026-10-22) ── */
.hd-start { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg, #fff); }
@media (min-width: 768px) { .hd-start { flex-direction: row; } }
.hd-half { flex: 1; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-family: inherit; transition: filter .15s; }
.hd-half:hover { filter: brightness(.97); }
.hd-half.ace { background: #1f3a5f; color: #fff; }
.hd-half.homt { background: #fff; color: #1f2937; }
.hd-half.homt img { height: 64px; }   /* 홈트 쪽은 로고만 (10/22 대표) */
.hd-half img { height: 34px; }
.hd-big { font-size: 44px; font-weight: 800; letter-spacing: .08em; }
.hd-sub { font-size: 15px; opacity: .75; }
.hd-page { max-width: 640px; margin: 0 auto; padding: 12px 16px 40px; }
.hd-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 14px; font-size: 18px; }
.hd-back { border: 0; background: none; font: inherit; font-size: 15px; color: var(--muted, #667085); cursor: pointer; padding: 6px 0; }
.hd-field { margin-bottom: 16px; position: relative; }
.hd-field > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.hd-opt-lab { font-weight: 400; color: var(--faint, #98a2b3); }
.hd-in { width: 100%; box-sizing: border-box; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--line, #e4e7ec); background: var(--surface-2, #f8f9fb); color: var(--ink, #1f2937); font: inherit; font-size: 15px; margin-top: 6px; }
.hd-search { margin-top: 0; }
.hd-list { position: absolute; z-index: 20; left: 0; right: 0; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line, #e4e7ec); border-radius: 11px; box-shadow: 0 8px 24px rgba(16,24,40,.12); margin-top: 4px; }
.hd-opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f2f4f7; background: #fff; padding: 10px 12px; font: inherit; cursor: pointer; }
.hd-opt:hover { background: #f5f8ff; }
.hd-opt.new { background: #fffaeb; }
.hd-opt-nm { font-weight: 700; font-size: 15px; }
.hd-opt-ad { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted, #667085); }
.hd-kind { font-size: 11.5px; color: #3e6ae1; background: #eef3ff; border-radius: 6px; padding: 2px 6px; align-self: center; white-space: nowrap; }
.hd-empty { padding: 14px; color: var(--muted, #667085); font-size: 14px; }
.hd-picked { border: 1px solid var(--line, #e4e7ec); border-radius: 11px; padding: 10px 12px; }
.hd-picked-top { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.hd-x { margin-left: auto; border: 0; background: none; color: #3e6ae1; font: inherit; font-size: 13px; cursor: pointer; }
.hd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-chip { border: 1px solid var(--line, #d0d5dd); background: #fff; border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink, #1f2937); }
.hd-chip.on { background: #1f3a5f; border-color: #1f3a5f; color: #fff; }
.hd-field > label.hd-check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.hd-check input { width: 18px; height: 18px; accent-color: #1f3a5f; }
.hd-fixed { margin-top: 6px; padding: 10px 13px; border-radius: 11px; background: #f2f4f7; font-size: 15px; }
.hd-fixed span { color: var(--muted, #667085); font-size: 12.5px; }
.hd-direct { margin-top: 8px; border: 1px dashed #c4ccd8; background: #fff; border-radius: 11px; padding: 10px 13px; width: 100%; text-align: left; font: inherit; font-size: 14px; color: #3e6ae1; cursor: pointer; }
.hd-pre { white-space: pre-wrap; background: var(--surface-2, #f8f9fb); border-radius: 11px; padding: 12px 13px; font-family: inherit; font-size: 14px; line-height: 1.55; margin: 0; }
.hd-go { width: 100%; border: 0; border-radius: 12px; padding: 15px; font: inherit; font-size: 16px; font-weight: 700; background: #e8740c; color: #fff; cursor: pointer; }
.appbar .logo[data-hd] { cursor: pointer; }

/* 공간제작소 BMS · 로그인 — 화면 전체 너비 (10/23) */
#app:has(.gb), #app:has(.gb-login){max-width:none;margin:0;background:#F7F7F5}
#app:has(.gb-login){background:#FFFFFF}

/* ── 홈트 새 첫 화면 (10/23, js/home.js) ── */
#app:has(.hm) { max-width: none; margin: 0; padding: 0; }
.hm { min-height: 100vh; background: #F7F7F5; color: #1F2328; font-family: Pretendard, system-ui, sans-serif; }
.hm-top { background: #fff; border-bottom: 1px solid #E6E4DF; }
.hm-in { max-width: 1180px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.hm-in .sp { flex: 1; }
.hm-logo { height: 36px; cursor: pointer; }
.hm-back { border: 0; background: none; font-size: 28px; line-height: 1; padding: 0 6px; cursor: pointer; color: #1F2328; }
.hm-me { font-size: 13px; }
.hm-link { border: 0; background: none; font: inherit; font-size: 13px; color: #5C5C5C; cursor: pointer; }
.hm-main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 56px; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.hm-h1 { margin: 0; font-size: 24px; }
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hm-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 200px; padding: 18px; box-sizing: border-box;
  border-radius: 20px; background: #fff; border: 1px solid #E6E4DF; color: #1F2328; font: inherit; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s; }
.hm-tile:hover { border-color: #E8732C; box-shadow: 0 6px 18px rgba(232,115,44,.14); }
.hm-tile b { font-size: 21px; }
.hm-tile.wide { grid-column: span 2; }
.hm-tile.big { min-height: 300px; }
.hm-tile.big b { font-size: 24px; }
.hm-tile.drop { border: 2px dashed #9DB7DD; background: #F6F9FE; }
.hm-tile.drop.over { border-color: #1D4F91; background: #EAF1FB; }
.hm-ic { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hm-sub { font-size: 13px; color: #5C6B80; }
.hm-badge { position: absolute; top: 14px; right: 14px; min-width: 30px; height: 30px; padding: 0 10px; box-sizing: border-box; border-radius: 15px; background: #E8732C; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hm-toast { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: #1F2328; color: #fff; font-size: 13px; padding: 6px 12px; border-radius: 14px; white-space: nowrap; }
/* 운송비 미송금 — 빨간 칸 (긴급, 10/23 대표) */
.hm-fare { border: 2px solid #D92D20; border-radius: 16px; background: #FEF3F2; overflow: hidden; }
.hm-fh { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #D92D20; color: #fff; }
.hm-fh b { font-size: 17px; }
.hm-fh span { font-size: 15px; font-weight: 700; }
.hm-fh .hm-fat { font-size: 13px; font-weight: 500; opacity: .85; }
.hm-fh .sp { flex: 1; }
.hm-more { border: 1px solid rgba(255,255,255,.7); background: none; color: #fff; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 12px; cursor: pointer; }
.hm-fl { display: flex; flex-direction: column; }
.hm-fr { display: grid; grid-template-columns: 34px 170px 1fr 100px 260px 64px; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid #FBD5D1; font-size: 14px; background: #fff; }
.hm-fr:first-child { border-top: 0; }
.hm-urg { font-size: 16px; text-align: center; }
.hm-who { display: flex; flex-direction: column; }
.hm-who a { color: #6B6B6B; font-size: 12px; text-decoration: none; }
.hm-amt { font-weight: 800; color: #B42318; text-align: right; }
.hm-acc { font-size: 13px; color: #3F3F46; }
.hm-acc i { color: #B42318; font-style: normal; font-weight: 600; }
.hm-sent { height: 32px; border: 1px solid #D92D20; background: #fff; color: #D92D20; font: inherit; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.hm-sent:hover { background: #D92D20; color: #fff; }
/* 자재승인원 창 */
.hm-ov { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.hm-modal { width: 100%; max-width: 460px; background: #fff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.hm-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #3F3F46; }
.hm-modal input, .hm-modal select { height: 40px; border: 1px solid #D0D0D0; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; }
.hm-modal input[type=file] { height: auto; padding: 8px; }
.hm-mh { display: flex; align-items: center; justify-content: space-between; }
.hm-mh b { font-size: 18px; }
.hm-x { border: 0; background: none; font-size: 18px; cursor: pointer; }
.hm-ok { font-size: 13px; color: #1E6B34; }
.hm-err { font-size: 13px; color: #B42318; }
.hm-go { height: 44px; border: 0; border-radius: 10px; background: #E8732C; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.hm-go:disabled { opacity: .6; }
@media (max-width: 900px) {
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-grid2, .hm-grid3 { grid-template-columns: 1fr; }
  .hm-tile { min-height: 150px; }
  .hm-fr { grid-template-columns: 26px 1fr auto; grid-template-areas: "u w a" "u j j" "u c s"; }
  .hm-urg { grid-area: u; } .hm-who { grid-area: w; } .hm-amt { grid-area: a; } .hm-job { grid-area: j; font-size: 13px; color: #5C5C5C; } .hm-acc { grid-area: c; } .hm-sent { grid-area: s; padding: 0 12px; }
}

/* ── 간단 서류 화면 (js/forms.js, 10/23) — 거래명세표 3종 · 납품확인서 ── */
.fm .sp { flex: 1; }
.fm-in, .fm-out { background: #fff; border: 1px solid #E6E4DF; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fm-row, .fm-oh, .fm-dh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: #E8732C; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
.fm-btn.ghost { background: #fff; color: #3F3F46; border: 1px solid #D0D0D0; font-weight: 600; }
.fm-btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.fm-btn:disabled { opacity: .6; }
.fm-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #F3F4F6; border-radius: 14px; font-size: 13px; }
.fm-file button { border: 0; background: none; cursor: pointer; color: #6B6B6B; }
.fm-oh b { font-size: 17px; }
.fm-empty { padding: 24px; text-align: center; color: #6B6B6B; background: #fff; border: 1px solid #E6E4DF; border-radius: 16px; }
.fm-doc { border-top: 1px solid #EFEDE8; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.fm-date { font-weight: 800; }
.fm-slip { color: #6B6B6B; font-size: 13px; }
.fm-site { height: 32px; min-width: 180px; border: 1px solid #D0D0D0; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; }
.fm-amt { font-size: 15px; }
.fm-it { display: grid; grid-template-columns: 1fr 70px 90px 110px; gap: 8px; align-items: center; font-size: 13px; }
.fm-it span { text-align: right; color: #3F3F46; }
.fm-it input, .fm-tr input, .fm-grid input { height: 32px; border: 1px solid #E0DED8; border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; min-width: 0; box-sizing: border-box; }
.fm-grid { display: grid; grid-template-columns: 160px 1fr 1fr auto; gap: 10px; align-items: end; }
.fm-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5C5C5C; }
.fm-tab { display: flex; flex-direction: column; gap: 4px; }
.fm-th, .fm-tr { display: grid; grid-template-columns: 90px 80px 1fr 70px 70px 70px 180px 28px; gap: 6px; align-items: center; }
.fm-th span { font-size: 12px; color: #6B6B6B; padding-left: 4px; }
.fm-x { border: 0; background: none; color: #9A9A9A; cursor: pointer; font-size: 14px; }
.fm-add { align-self: flex-start; border: 1px dashed #C9C6BF; background: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #3F3F46; }
@media (max-width: 900px) {
  .fm-grid { grid-template-columns: 1fr; }
  .fm-th { display: none; }
  .fm-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-it { grid-template-columns: 1fr 60px 90px; }
  .fm-it span:last-child { display: none; }
}
.fm-ta { width: 100%; box-sizing: border-box; background: #fff; color: #1F2328; border: 1px solid #D0D0D0; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
#fm-drop.over { border-color: #E8732C; background: #FFF8F2; }
.fm-warn { padding: 10px 14px; border-radius: 10px; background: #FEF3F2; color: #B42318; font-size: 14px; font-weight: 600; }
.fm-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #5C5C5C; }
.fm-form .w2 { grid-column: span 2; }
.fm-form input, .fm-form select { height: 40px; border: 1px solid #D0D0D0; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; color: #1F2328; background: #fff; min-width: 0; }
.fm-form .fm-btn { justify-content: center; }
.fm-th.q, .fm-tr.q { grid-template-columns: 1fr 140px 70px 80px 110px 28px; }
.fm-frame { width: 100%; height: 760px; border: 0; background: transparent; }
a.fm-btn { text-decoration: none; }
@media (max-width: 900px) {
  .fm-form { grid-template-columns: 1fr; }
  .fm-form .w2 { grid-column: auto; }
  .fm-tr.q { grid-template-columns: 1fr 1fr; }
  .fm-frame { height: 1200px; }
}
.hm .sp { flex: 1; }
/* 배차 요청도 서류 화면과 같은 색·칸 (10/23) */
.hm .hd-page { max-width: 760px; padding: 16px 16px 48px; }
.hm .hd-in { background: #fff; border-color: #D0D0D0; border-radius: 10px; }
.hm .hd-chip.on { background: #E8732C; border-color: #E8732C; }
.hm .hd-check input { accent-color: #E8732C; }
.hm .hd-x, .hm .hd-direct { color: #C2410C; }
.hm .hd-kind { color: #C2410C; background: #FDF0E6; }
.hm .hd-go { background: #E8732C; border-radius: 10px; }
.hm .hd-pre { background: #fff; border: 1px solid #E6E4DF; }
.fm-grid input { height: 40px; border: 1px solid #D0D0D0; border-radius: 10px; padding: 0 12px; font-size: 14px; }
.fm-it input, .fm-tr input { height: 36px; border-color: #D0D0D0; border-radius: 8px; }
.fm-grid label { font-size: 13px; }
/* 납품확인서 팝업 (첫 화면, 10/23) */
.fm-modal { width: 100%; max-width: 820px; max-height: 92vh; overflow: auto; background: #F7F7F5; border-radius: 18px; padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.fm-modal .hm-mh { position: sticky; top: -18px; margin: -18px -18px 0; padding: 14px 18px; background: #F7F7F5; z-index: 1; }
.fm-pop .fm-in, .fm-pop .fm-out { padding: 12px; gap: 10px; }
.fm-pop .fm-in textarea { min-height: 0; }
.fm-pop .fm-grid { grid-template-columns: 140px 1fr 1fr auto; gap: 8px; }
.fm-pop .fm-th, .fm-pop .fm-tr { grid-template-columns: 76px 64px 1fr 56px 56px 56px 120px 24px; gap: 4px; }
/* 팝업 공통 (첫 화면·거래명세표 화면, 10/23) — 서류는 fm-modal, 배차 요청은 hm-frame(iframe) */
.fm-modal.wide { max-width: 980px; }
.fm-pop .fm-frame { height: 70vh; }
.hm-frame { width: 100%; max-width: 820px; height: 90vh; background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.hm-frame .hm-mh { padding: 14px 18px; border-bottom: 1px solid #E6E4DF; }
.hm-frame iframe { flex: 1; width: 100%; border: 0; }
/* 견적서 (10/23 다시 그림) */
.fm-qh { display: grid; grid-template-columns: 1.3fr 1.3fr 160px; gap: 10px; }
.fm-qh label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5C5C5C; }
.fm-qh input { height: 40px; border: 1px solid #D0D0D0; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; font-weight: 600; min-width: 0; }
.fm-th.q, .fm-tr.q { grid-template-columns: 1fr 120px 60px 70px 100px 100px 24px; align-items: start; }
.fm-th .r, .fm-tr .r { text-align: right; }
.fm-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fm-cell input { width: 100%; }
.fm-cell input.n { text-align: right; }
.fm-cell small { font-size: 11px; color: #8A8A8A; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-tr.q .fm-amt { line-height: 32px; font-size: 14px; font-weight: 700; padding-right: 4px; }
.fm-qf { position: sticky; bottom: -18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; margin: 4px -12px -12px; background: #FFF7F0; border-top: 1px solid #F3D9C6; border-radius: 0 0 14px 14px; font-size: 14px; color: #5C5C5C; }
.fm-qf b { color: #1F2328; }
.fm-qf .tot { font-size: 16px; }
.fm-qf .tot b { font-size: 20px; color: #C2410C; }
.fm-qf .sp { flex: 1; }
.fm-again summary { cursor: pointer; font-size: 13px; color: #5C5C5C; padding: 4px 2px; }
.fm-again[open] summary { margin-bottom: 8px; }
@media (max-width: 900px) {
  .fm-qh { grid-template-columns: 1fr; }
  .fm-th.q { display: none; }
  .fm-tr.q { grid-template-columns: 1fr 1fr 1fr; }
}
/* 출고일보 바로가기 (첫 화면 머리, 10/23) */
.hm-sheet { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; background: #E8F5EC; color: #1E6B34; border: 1px solid #BFE0C9; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hm-sheet:hover { background: #D7EEDF; color: #1E6B34; }
.hm-sheet.fare { background: #FEF3F2; color: #B42318; border-color: #F5C2C0; }
.hm-sheet.fare:hover { background: #FDE4E1; color: #B42318; }
/* 전자 송장 (10/26) */
.fm-th.es, .fm-tr.es { grid-template-columns: 1fr 90px 80px 28px; }
.fm-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: #FDF0E6; }
.fm-link input { flex: 1 1 220px; height: 40px; border: 1px solid #F3D9C6; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; min-width: 0; }
/* ── 휴대폰 (10/26 대표 "모바일 반응형으로 직관적이고 보기 편하게") — 375~430px ── */
@media (max-width: 560px) {
  .hm-in { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .hm-logo { height: 26px; }
  .hm-me { display: none; }
  .hm-sheet { height: 32px; padding: 0 12px; font-size: 12px; }
  .hm-link { font-size: 12px; }
  .hm-main { padding: 14px 12px 40px; gap: 14px; }
  .hm-h1 { font-size: 20px; }
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm-grid3 { gap: 10px; }
  .hm-tile { min-height: 116px; padding: 12px 10px; gap: 8px; border-radius: 14px; }
  .hm-tile b { font-size: 16px; }
  .hm-tile.big { min-height: 140px; }
  .hm-tile.big b { font-size: 18px; }
  .hm-tile.wide { order: -1; grid-column: span 2; min-height: 96px; flex-direction: row; justify-content: flex-start; padding: 14px 16px; text-align: left; flex-wrap: wrap; }
  .hm-tile.wide .hm-sub { flex-basis: 100%; font-size: 11px; }
  .hm-ic { width: 48px; height: 48px; border-radius: 14px; }
  .hm-ic svg { width: 28px !important; height: 28px !important; }
  .hm-ic img { width: 44px !important; }
  .hm-badge { top: 8px; right: 8px; height: 24px; min-width: 24px; padding: 0 8px; border-radius: 12px; font-size: 12px; line-height: 24px; }
  .hm-toast { bottom: 6px; font-size: 12px; }
  /* 운송비 미송금 — 한 건을 카드처럼 세 줄로 */
  .hm-fh { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .hm-fh b { font-size: 15px; } .hm-fh span { font-size: 13px; }
  .hm-fr { grid-template-columns: 22px 1fr auto; grid-template-areas: "u w a" "u j j" "u c c" "u s s"; gap: 4px 8px; padding: 10px 12px; font-size: 13px; }
  .hm-acc { word-break: break-all; }
  .hm-sent { height: 38px; width: 100%; }
  /* 팝업은 화면 꽉 차게 */
  .hm-ov { padding: 0; align-items: stretch; }
  .hm-modal { max-width: none; border-radius: 0; min-height: 100%; padding: 16px 14px; }
  .hm-frame { max-width: none; height: 100%; border-radius: 0; }
  .fm-modal, .fm-modal.wide { max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 14px 12px; }
  .fm-modal .hm-mh { top: -14px; margin: -14px -12px 0; padding: 12px; }
  .hm-x { font-size: 22px; padding: 4px 8px; }
  .fm-btn { height: 42px; }
  .fm-btn.sm { height: 34px; }
  .fm-pop .fm-grid, .fm-grid, .fm-qh, .fm-form { grid-template-columns: 1fr; }
  .fm-pop .fm-th, .fm-th, .fm-th.q { display: none; }
  .fm-pop .fm-tr, .fm-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px 0; border-bottom: 1px solid #EFEDE8; }
  .fm-tr.q { grid-template-columns: 1fr 1fr; }
  .fm-tr.es { grid-template-columns: 1fr 1fr 32px; } .fm-tr.es input:first-child { grid-column: 1 / -1; }
  .fm-it { grid-template-columns: 1fr 52px 84px; }
  .fm-it input, .fm-tr input, .fm-grid input, .fm-form input, .fm-form select { height: 42px; font-size: 16px; }
  .fm-qf { gap: 10px; }
  .fm-frame, .fm-pop .fm-frame { height: 1400px; }
}

/* 배차 요청 — 시안 (10/27 대표: 상차·하차 이름 크게 + 아이콘) */
.hd-route { position: relative; display: flex; padding: 18px 64px 18px 16px; background: #fff; border: 1px solid #E6E4DF; border-radius: 18px; margin-bottom: 16px; }
.hd-end { position: relative; padding-left: 40px; }
.hd-ico { position: absolute; left: 0; top: 22px; width: 26px; height: 40px; display: flex; align-items: center; justify-content: center; }
.hd-sq { width: 16px; height: 16px; border-radius: 4px; background: #1F2328; }
.hd-pin { color: #E8732C; }
.hd-end-from::after { content: ''; position: absolute; left: 12px; top: 58px; bottom: -34px; width: 2px; background: #D5D3CE; }
.hd-ends { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hd-ends .hd-field { margin-bottom: 0; }
.hd-end-lab { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B6B6B; margin-bottom: 2px; }
.hd-end-nm { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: #1F2328; word-break: keep-all; }
.hd .hd-end-q, .hm .hd-end-q { font-size: 24px; font-weight: 700; border: 0; border-bottom: 1px solid #E6E4DF; border-radius: 0; padding: 6px 0 8px; background: transparent; }
.hm .hd-end-in { margin-top: 6px; border: 0; border-bottom: 1px solid #EFEDE8; border-radius: 0; padding: 6px 0; font-size: 14px; color: #5C5C5C; background: transparent; }
.hd-end-sub { margin-top: 6px; font-size: 14px; color: #5C5C5C; }
.hd-swap { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 12px; background: #F2F1EE; color: #1F2328; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hd-sheet { background: #fff; border: 1px solid #E6E4DF; border-radius: 22px; padding: 12px 18px 20px; }
.hd-handle { width: 44px; height: 4px; border-radius: 2px; background: #D5D3CE; margin: 0 auto 16px; }
.hd-sheet .hd-field > label { display: flex; align-items: center; gap: 6px; color: #3F3F46; }
.hd-sheet .hd-field > label svg { color: #8A8A8A; }
.hd-seg { display: inline-flex; background: #F2F1EE; border-radius: 12px; padding: 3px; }
.hd-seg button { border: 0; background: none; border-radius: 9px; padding: 9px 26px; font: inherit; font-size: 15px; color: #6B6B6B; cursor: pointer; }
.hd-seg button.on { background: #fff; color: #1F2328; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hd-dl { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: #FDF0E6; color: #9A3412; font-size: 15px; margin-bottom: 12px; }
.hd-dl span { display: inline-flex; align-items: center; gap: 6px; }
.hd-dl.soon { background: #FDE2D2; color: #B42318; }
.hd-dl.over { background: #F2F1EE; color: #6B6B6B; }
.hm .hd-go { padding: 17px; font-size: 17px; border-radius: 14px; }
@media (max-width: 480px) { .hd-end-nm { font-size: 26px; } .hd-route { padding-right: 58px; } }

/* 발행한 전자 송장 목록 (10/27) */
.es-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.es-hd > b { font-size: 16px; }
.es-cnt { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.es-cnt i, .es-st { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.es-box .ok { background: #EEF6EE; color: #1E6B34; } .es-box .seen { background: #FDF0E6; color: #9A3412; } .es-box .wait { background: #F2F1EE; color: #6B6B6B; }
.es-li { border-top: 1px solid #EFEDE8; }
.es-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 12px 2px; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.es-d { font-weight: 700; font-size: 14px; width: 42px; flex: none; font-variant-numeric: tabular-nums; }
.es-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.es-w b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-w small { font-size: 12px; color: #6B6B6B; }
.es-st { font-size: 12.5px; padding: 4px 10px; }
.es-det { padding: 0 2px 14px 54px; display: flex; flex-direction: column; gap: 10px; }
.es-its { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.es-its li { display: flex; gap: 8px; align-items: center; color: #6B6B6B; }
.es-its li span { width: 16px; color: #1E6B34; font-weight: 700; }
.es-its li.ck { color: #1F2328; }
.es-its li b { margin-left: auto; font-weight: 600; }
.es-sign img { max-width: 240px; max-height: 110px; border: 1px solid #E6E4DF; border-radius: 10px; background: #fff; }
.es-meta { font-size: 12px; color: #8A8A8A; }
.es-empty { padding: 16px; text-align: center; color: #8A8A8A; font-size: 14px; }
@media (max-width: 560px) { .es-row { flex-wrap: wrap; } .es-st { margin-left: 54px; } .es-det { padding-left: 0; } }

/* ── 첫 화면 출고 흐름 (10/28 대표, 목업 4boELHQ3xhPF3WmLSqFXEt) ── */
.fl { background: #fff; display: flex; flex-direction: column; gap: 8px; }
.fl-steps { display: flex; justify-content: space-between; position: relative; padding: 0 4px; margin-bottom: 10px; }
.fl-steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 21px; height: 2px; background: #EFEDE8; }
.fl-st { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1.3; padding: 0; min-width: 0; color: #9A978F; font: inherit; font-size: 12px; cursor: pointer; }
.fl-st i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #F4F3F0; color: #BDBAB3; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff; }
.fl-st svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fl-st b { font-size: 14px; color: #8A877F; font-variant-numeric: tabular-nums; }
.fl-st.hot b { color: #E03E2D; }
.fl-st.on { color: #C2410C; font-weight: 800; }
.fl-st.on i { background: #E8732C; color: #fff; }
.fl-st.on b { color: #C2410C; }
.fl-lh, .fl-row { display: grid; grid-template-columns: 84px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .9fr) 64px var(--acts, 200px); gap: 14px; align-items: center; padding: 12px 10px; }
.fl-lh { padding: 0 10px 8px; font-size: 12px; color: #A3A09A; font-weight: 700; border-bottom: 1px solid #F1EFEA; }
.fl-row { border-bottom: 1px solid #F1EFEA; border-radius: 10px; cursor: pointer; }
.fl-row:hover { background: #FCFBF9; }
.fl-row.sel { background: #FFF4EB; }
.fl-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fl-tm b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; }
.fl-tm span { font-size: 11px; color: #A3A09A; }
.fl-tm.now b { color: #E03E2D; }
.fl-nm { font-weight: 700; font-size: 14.5px; }
.fl-q { color: #E03E2D; }
.fl-ds { color: #7A7A7A; font-size: 13px; }
.fl-acts { display: flex; gap: 6px; justify-content: flex-end; }
.fl-go { border: 0; border-radius: 999px; background: #E8732C; color: #fff; font: inherit; font-weight: 800; font-size: 13px; padding: 8px 14px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.fl-gh { border: 0; border-radius: 999px; background: #F6F5F2; color: #4B4B4B; font: inherit; font-size: 13px; padding: 8px 12px; white-space: nowrap; cursor: pointer; }
.fl-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 7px; margin-right: 4px; vertical-align: 1px; }
.fl-chip.no { background: #FDECEC; color: #E03E2D; } .fl-chip.amb { background: #FCF1DC; color: #8A5300; } .fl-chip.blu { background: #EAF1FB; color: #1D4F91; }
.fl-day { font-size: 12px; font-weight: 800; color: #E8732C; margin: 16px 10px 2px; }
.fl-empty { padding: 36px; text-align: center; color: #A3A09A; }
.fl-det { background: #FBFAF8; border-radius: 12px; margin: 4px 10px 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fl-k { font-size: 11.5px; color: #A3A09A; font-weight: 800; margin-top: 6px; }
.fl-it { color: #3F3F46; }
.fl-why { font-size: 12px; color: #C2410C; }
.fl-ln { display: grid; grid-template-columns: 56px minmax(0, 1fr) 90px 72px; gap: 10px; align-items: center; padding: 4px 0 4px 12px; font-size: 13px; }
.fl-lk { color: #7A7A7A; font-weight: 700; }
.fl-lr { margin-left: 8px; color: #555; }
.fl-la { margin-left: 8px; color: #222; font-weight: 700; }
.fl-lno { margin-left: 8px; font-size: 12px; color: #8A877F; font-variant-numeric: tabular-nums; }
.fl-by { font-size: 12px; color: #8A877F; text-align: right; white-space: nowrap; }
.fl-in { justify-self: end; font: inherit; font-size: 13px; font-weight: 800; border: 0; background: none; padding: 3px 8px; border-radius: 8px; }
.fl-in.ok { background: #EEF6EE; color: #1E6B34; cursor: pointer; } .fl-in.no { color: #E03E2D; } .fl-in.na { color: #A3A09A; font-weight: 400; }
.fl-ev { padding: 10px 10px 12px; border-bottom: 1px solid #F1EFEA; }
.fl-eh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .fl-eh b { font-size: 14.5px; } .fl-eh span { font-size: 12px; color: #A3A09A; }
.fl-sub { display: flex; gap: 8px; margin: 0 0 8px; }
.fl-sb { border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 700; background: #F6F5F2; color: #7A7A7A; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.fl-sb.no.on { background: #FDECEC; color: #E03E2D; } .fl-sb.mid.on { background: #EAF1FB; color: #1D4F91; } .fl-sb.ok.on { background: #EEF6EE; color: #1E6B34; }
.fl-old { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: #FDECEC; color: #B42318; border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; margin-bottom: 4px; }
.fl-old span { margin-left: auto; font-weight: 400; font-size: 12.5px; }
.fl-day.no { color: #E03E2D; } .fl-day.ok { color: #1E6B34; }
.fl-links { display: flex; gap: 8px; padding: 18px 10px; }
.hm-grid.small .hm-tile { min-height: 96px; gap: 8px; padding: 10px; }
.hm-grid.small .hm-tile b { font-size: 15px; }
.hm-grid.small .hm-ic { width: 40px; height: 40px; border-radius: 12px; }
.hm-grid.small .hm-ic svg { width: 24px !important; height: 24px !important; }
.hm-grid.small .hm-sub { display: none; }
.hm-farebtn { border: 0; background: #FDECEC; color: #B42318; border-radius: 999px; padding: 5px 6px 5px 12px; font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hm-farebtn span { background: #D92D20; color: #fff; border-radius: 999px; min-width: 20px; padding: 1px 6px; font-size: 12px; text-align: center; }
@media (max-width: 820px) {
  .fl-lh { display: none; }
  .fl-row { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "t n a" "t d a"; }
  .fl-row .fl-tm { grid-area: t; } .fl-row .fl-nm { grid-area: n; } .fl-row .fl-ds:not(.fl-rt):not(.fl-v) { grid-area: d; } .fl-row .fl-rt, .fl-row .fl-v { display: none; } .fl-row .fl-acts { grid-area: a; flex-direction: column; }
  .fl-st { font-size: 10px; } .fl-st i { width: 34px; height: 34px; } .fl-st svg { width: 18px; height: 18px; } .fl-steps::before { top: 17px; }
  .hm-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fl-memo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0 12px; font-size: 12.5px; color: #7A7A7A; }
.fl-memo span { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-evl { font-size: 12px; color: #1D4F91; background: #EAF1FB; border-radius: 8px; padding: 3px 8px; text-decoration: none; white-space: nowrap; }
.fl-h1 { margin: 0 0 12px; font-size: 20px; } .fl-h1 span { font-size: 14px; color: #A3A09A; font-weight: 400; margin-left: 6px; }
.fl-cl { display: grid; grid-template-columns: 22px minmax(0, 1fr) 54px 90px; gap: 10px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #F1EFEA; font-size: 14px; }
.fl-cl b { text-align: right; font-size: 16px; } .fl-cl b.no { color: #E03E2D; } .fl-cl b.ok { color: #1E6B34; } .fl-cl .fl-gh { justify-self: end; }
.fl-ck { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D6D3CC; box-sizing: border-box; } .fl-ck.ok { background: #1E6B34; border-color: #1E6B34; }
.fl-close { margin-top: 16px; width: 100%; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-size: 15px; font-weight: 800; background: #E6E4DF; color: #9A978F; cursor: pointer; } .fl-close.on { background: #E8732C; color: #fff; }
.hm-body { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px; }
.hm-body .hm-main { max-width: none; margin: 0; }
.hm-side { position: sticky; top: 64px; align-self: start; display: flex; flex-direction: column; gap: 2px; padding: 22px 8px 40px; }
.hm-si { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 14px; color: #3F3F46; cursor: pointer; text-decoration: none; }
.hm-si:hover { background: #F6F5F2; } .hm-si.on { background: #FFF4EB; color: #C2410C; font-weight: 800; }
.hm-si.sub { padding-left: 22px; font-size: 13.5px; color: #5C5C5C; }
.hm-si b { font-size: 11.5px; background: #E03E2D; color: #fff; border-radius: 10px; padding: 1px 7px; }
.hm-si.off { color: #B5B2AB; cursor: default; } .hm-si i { font-style: normal; font-size: 11px; color: #B5B2AB; }
.hm-sg { font-size: 11.5px; color: #A3A09A; font-weight: 700; margin: 14px 12px 2px; }
.hm-quick { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hm-qb { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #E8732C; color: #fff; font-size: 26px; box-shadow: 0 6px 18px rgba(232,115,44,.35); cursor: pointer; }
.hm-qb.over { background: #1D4F91; }
.hm-qm { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.14); }
.hm-qm button { border: 0; background: none; text-align: left; padding: 10px 14px; border-radius: 10px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.hm-qm button:hover { background: #F6F5F2; } .hm-qm b { font-size: 11px; background: #1D4F91; color: #fff; border-radius: 9px; padding: 1px 6px; } .hm-qm b.r { background: #D92D20; }
.hm-quick .hm-toast { position: static; transform: none; }
@media (max-width: 820px) {
  .hm-body { grid-template-columns: minmax(0, 1fr); }
  .hm-side { position: static; flex-direction: row; overflow-x: auto; padding: 8px 12px 0; gap: 4px; }
  .hm-side .hm-sg { display: none; } .hm-si, .hm-si.sub { padding: 7px 10px; white-space: nowrap; font-size: 13px; }
}
.cl-hd { display: flex; align-items: baseline; gap: 10px; } .cl-hd b { margin-left: auto; font-size: 13px; color: #C2410C; }
.cl-st { --pn: 0; display: flex; justify-content: space-between; position: relative; margin: 8px 6px 22px; }
.cl-st::before { content: ""; position: absolute; left: 24px; right: 24px; top: 21px; height: 3px; border-radius: 3px; background: #EFEDE8; }
.cl-st::after { content: ""; position: absolute; left: 24px; top: 21px; height: 3px; border-radius: 3px; background: #1E6B34; width: calc((100% - 48px) * var(--pn)); }
.cl-s { position: relative; z-index: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: #9A978F; cursor: pointer; padding: 0; }
.cl-s i { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 15px; background: #F4F3F0; color: #BDBAB3; box-shadow: 0 0 0 4px #fff; }
.cl-s.ok { color: #1E6B34; } .cl-s.ok i { background: #1E6B34; color: #fff; }
.cl-s.now { color: #C2410C; font-weight: 800; } .cl-s.now i { background: #E8732C; color: #fff; }
.cl-s.left i { background: #FDECEC; color: #E03E2D; }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cl-c { background: #FBFAF8; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cl-c.done { opacity: .55; }
.cl-t { display: flex; align-items: center; font-weight: 800; font-size: 14.5px; } .cl-t b { margin-left: auto; color: #E03E2D; font-size: 18px; } .cl-t b.ok { color: #1E6B34; }
.cl-l { font-size: 12.5px; color: #5C5C5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-c .fl-go { align-self: flex-start; margin-top: 4px; }
.hm-body .fl { background: #fff; border-radius: 18px; padding: 22px 24px; margin-top: 8px; }
@media (max-width: 820px) { .cl-s { font-size: 10.5px; } .cl-s i { width: 36px; height: 36px; font-size: 13px; } .cl-st::before, .cl-st::after { top: 17px; } }
.fl-tg { justify-content: flex-end; margin-bottom: 4px; }
.fl-stm { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; } .fl-stm.na { font-size: 12px; color: #A3A09A; }
.fl-chip.ok { background: #EEF6EE; color: #1E6B34; }
.fl-gh.sm { padding: 5px 10px; font-size: 12px; }
.fl-qm { max-width: 420px; } .fl-qbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fl-qcl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5C5C5C; } .fl-qcl input { flex: 1; }
/* 버튼·칩 모양 통일 (10/28 대표 "도형들 크기가 왜 제각각") */
.fl-acts { flex-wrap: nowrap; }
.fl-acts > *, .fl-stm > * { flex: none; }
.fl-acts .fl-go, .fl-acts .fl-gh, .fl-acts .fl-in.ok, .fl-stm .fl-chip { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; white-space: nowrap; box-sizing: border-box; line-height: 1; }
.fl-stm .fl-chip { padding: 0 10px; font-size: 12px; margin: 0; }
.fl-stm.na { white-space: nowrap; height: 34px; display: inline-flex; align-items: center; }
.fl-in { white-space: nowrap; }
button.fl-evl { border: 0; cursor: pointer; font: inherit; font-size: 12px; } .fl-evl.k { background: #FFF6D6; color: #7A5A00; } .fl-evl.m { background: #F2EEFB; color: #5B3FA8; }
.fl-txm { max-width: 560px; } .fl-tx { white-space: pre-wrap; font: inherit; font-size: 14px; line-height: 1.6; max-height: 70vh; overflow: auto; margin: 8px 0 0; background: #FBFAF8; border-radius: 12px; padding: 14px 16px; }

.fl-sent { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 13px; color: #8A877F; cursor: pointer; white-space: nowrap; }
.fl-sent i { width: 18px; height: 18px; border: 1.5px solid #CFCBC3; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800; box-sizing: border-box; }
.fl-sent:hover i { border-color: #E8732C; }
.fl-sent.on { color: #2E7D4F; font-weight: 700; cursor: default; }
.fl-sent.on i { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }

.fl-nmt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-io { display: flex; gap: 4px; margin-top: 5px; font-weight: 600; }
.fl-io span { font-size: 11.5px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; line-height: 1.3; }
.fl-io .ok { background: #EAF4EC; color: #2E7D4F; } .fl-io .no { background: #FDECEA; color: #C62828; } .fl-io .na { background: #F2F1EE; color: #A3A09A; }
.fl-more { display: flex; justify-content: center; padding: 14px 0 4px; }

.fl-rq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.fl-rq input, .fl-rq select { height: 38px; border: 1px solid #E4E1DA; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; color: #222; box-sizing: border-box; }
.fl-rq .fl-rqi { flex: 1 1 220px; min-width: 160px; }
.fl-rq span { color: #A3A09A; }
.fl-rqn { margin-left: auto; font-size: 13px; color: #7A7A7A; }

.fl-pl { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: #FFF1E6; color: #B4531B; font-weight: 700; white-space: nowrap; margin-left: 6px; }
.fl-pl.no { background: #FDECEA; color: #C62828; }
.fl-eh .fl-gh.sm { margin-left: 6px; }
.fl-cmpm { max-width: min(1400px, 96vw); width: 96vw; height: 90vh; }
.fl-cmpg { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); gap: 12px; overflow-x: auto; min-height: 0; }
.fl-cmpc { display: flex; flex-direction: column; min-height: 0; border: 1px solid #EEECE7; border-radius: 12px; overflow: hidden; }
.fl-cmph { padding: 8px 12px; font-size: 13px; background: #FBFAF8; } .fl-cmph span { color: #8A877F; margin-left: 4px; }
.fl-cmpc iframe { flex: 1; width: 100%; border: 0; min-height: 0; }
.fl-eh .fl-pl { font-size: 11.5px; color: #B4531B; } .fl-eh .fl-pl.no { color: #C62828; }
.hm-mh .fl-pl { margin-left: 8px; }
.fl-cmpc.na { justify-content: center; } .fl-cmpc.na .fl-cmph { position: absolute; } .fl-cmpc { position: relative; }
.fl-ln .fl-c, .fl-ln .fl-lk, .fl-ln .fl-lr, .fl-ln .fl-lno, .fl-ln .fl-la { color: #1A1A1A; font-weight: 700; }   /* 상세 전표 줄 — 진하게 (10/28 대표) */
.fl-io button { font: inherit; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; border: 0; cursor: pointer; line-height: 1.3; white-space: nowrap; background: #EAF4EC; color: #2E7D4F; font-weight: 600; }
.fl-io button:hover { background: #D6EBDB; }
button.fl-chip { border: 0; cursor: pointer; font: inherit; }
.fl-tot { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding: 18px 10px 6px; border-top: 2px solid #EEECE7; margin-top: 8px; }
.fl-tot span { font-size: 14px; color: #555; font-weight: 700; } .fl-tot b { font-size: 22px; color: #B4531B; } .fl-tot b.no { color: #C62828; } .fl-tot em { font-style: normal; font-size: 13px; color: #8A877F; }
.fl-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.fl-imgs iframe { width: 100%; height: 460px; border: 1px solid #EEECE7; border-radius: 12px; background: #FBFAF8; }
.fl-tm b { white-space: nowrap; }
.fl-pld { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; color: #1A1A1A; font-weight: 600; }
.fl-pld i { font-style: normal; color: #A3A09A; } .fl-pld b { font-size: 17px; color: #B4531B; } .fl-pld b.no { color: #C62828; } .fl-pld em { font-style: normal; font-size: 12px; color: #8A877F; }
.fl-rqk { display: inline-flex; gap: 4px; margin: 0; }
.fl-rqk .fl-sb { height: 38px; }
.fl-rqp { position: relative; }
.fl-rqps { height: 38px; line-height: 36px; border: 1px solid #E4E1DA; border-radius: 10px; padding: 0 30px 0 12px; font-size: 14px; background: #fff; color: #222; cursor: pointer; list-style: none; min-width: 140px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.fl-rqps::-webkit-details-marker { display: none; }
.fl-rqps::after { content: '▾'; position: absolute; right: 12px; color: #A3A09A; }
.fl-rqpl { position: absolute; z-index: 30; top: 42px; left: 0; width: 260px; max-height: 360px; overflow: auto; background: #fff; border: 1px solid #E4E1DA; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 8px; }
.fl-rqpl input[type=search] { width: 100%; margin-bottom: 6px; }
.fl-rqpl label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; cursor: pointer; border-radius: 8px; }
.fl-rqpl label:hover { background: #FBF7F2; }
.fl-rqpl input[type=checkbox] { width: 16px; height: 16px; padding: 0; flex: none; accent-color: #E8732C; }

.fl-csl{display:flex;flex-direction:column;gap:4px}
.fl-cs{display:grid;grid-template-columns:48px 40px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:4px 8px;border-radius:6px;background:#fafafa}
.fl-cs.me{background:#FDF1E9}
.fl-cs b{font-weight:700}
.fl-csn{color:#E8732C;font-weight:600}
.fl-csi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-css{color:#666;font-size:12px}
.fl-ms{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;padding:6px 8px;border-radius:6px;background:#fafafa}
.fl-ms b{font-weight:700}
.fl-msd{color:#555}
.fl-ms em{font-style:normal;font-weight:700;margin-left:auto}
.fl-ms em.no{color:#D93025}
.fl-ms em.ok{color:#1E8E3E}

/* 세로형 키오스크 /kiosk (10/29) — 판 폭(cqw)에 맞춰 커짐 · 애플 느낌 (10/29 대표) */
body.kiosk { background: #F2F2F7; margin: 0; }
body.kiosk #app { max-width: none; background: #F2F2F7; }
.ki-box { container-type: inline-size; width: 100%; max-width: min(100vw, 62vh); margin: 0 auto; }
.ki { font-family: Pretendard, -apple-system, sans-serif; color: #1C1C1E; padding: 4cqw 4cqw 3cqw; box-sizing: border-box; min-height: 100vh; font-size: 3.4cqw; letter-spacing: -0.01em; }
.ki-h { margin-bottom: 3.6cqw; padding: 0 1cqw; }
.ki-clk { display: flex; flex-direction: column; justify-content: center; }
.ki-clk span { font-size: 3.6cqw; font-weight: 600; color: #8E8E93; }
.ki-clk b { font-size: 19cqw; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 0.6cqw; }
.ki-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4cqw; margin-bottom: 5cqw; }
.ki-t > div { --c: #8E8E93; --bg: #F2F2F7; background: #fff; border-radius: 5cqw; padding: 3cqw 3cqw 2.6cqw; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); display: flex; flex-direction: column; }
.ki-t i { width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; }
.ki-t i svg { width: 4.2cqw; height: 4.2cqw; }
.ki-t b { font-size: 10.5cqw; font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-top: 2.4cqw; color: #1C1C1E; }
.ki-t span { font-size: 2.8cqw; font-weight: 600; color: #8E8E93; white-space: nowrap; margin-top: 1cqw; }
.ki-t .k-need b { color: #E8732C; }
.ki-s { --c: #8E8E93; --bg: #F2F2F7; margin-bottom: 5cqw; }
.ki-s h2 { display: flex; align-items: center; gap: 2cqw; margin: 0 0 2cqw; padding: 0 1cqw; font-size: 4.8cqw; font-weight: 700; letter-spacing: -0.02em; color: #1C1C1E; }
.ki-hi { width: 6.4cqw; height: 6.4cqw; border-radius: 1.8cqw; background: var(--c); color: #fff; display: flex; align-items: center; justify-content: center; }
.ki-hi svg { width: 3.8cqw; height: 3.8cqw; }
.ki-s h2 em { margin-left: auto; font-style: normal; font-size: 3.4cqw; font-weight: 700; color: var(--c); background: var(--bg); border-radius: 999px; padding: 0.6cqw 2.6cqw; }
.ki-card { background: #fff; border-radius: 5cqw; padding: 0 2cqw 0 3.4cqw; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); overflow: hidden; }
.ki-r { display: grid; grid-template-columns: 18cqw minmax(0, 1fr) 3cqw; gap: 3cqw; align-items: center; padding: 2.6cqw 0; border-bottom: 1px solid #EFEFF4; }
.ki-card > .ki-r:last-child { border-bottom: 0; }
.ki-w { background: var(--bg); border-radius: 3cqw; padding: 1.8cqw 0; text-align: center; }
.ki-w b { display: block; font-size: 4.6cqw; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--c); }
.k-order .ki-w b { color: #3A3A3C; }
.ki-w span { display: block; font-size: 2.5cqw; font-weight: 600; color: var(--c); opacity: .8; margin-top: 0.4cqw; }
.ki-r.late .ki-w { background: #FFEBEA; } .ki-r.late .ki-w b, .ki-r.late .ki-w span { color: #FF3B30; opacity: 1; }
.ki-p { font-size: 4.3cqw; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-i { font-size: 3.1cqw; color: #8E8E93; margin-top: 0.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-c { font-size: 2.8cqw; color: #0A84FF; margin-top: 0.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-ch { font-style: normal; font-size: 6cqw; font-weight: 300; color: #C7C7CC; line-height: 1; }
.ki-z { font-size: 3.4cqw; color: #AEAEB2; padding: 4cqw 0; text-align: center; }
.ki-more { font-size: 3.2cqw; font-weight: 600; color: var(--c); padding: 2.4cqw 0; text-align: center; border-top: 1px solid #EFEFF4; }
.ki-out { display: flex; align-items: center; gap: 2.4cqw; background: #fff; border-radius: 5cqw; padding: 3.4cqw 4cqw; font-size: 4.2cqw; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
.ki-out i { width: 7cqw; height: 7cqw; border-radius: 50%; background: #34C759; color: #fff; display: flex; align-items: center; justify-content: center; }
.ki-out i svg { width: 4cqw; height: 4cqw; }
.ki-out em { margin-left: auto; font-style: normal; font-size: 6cqw; color: #34C759; }
.ki .k-need { --c: #E8732C; --bg: #FDF0E7; } .ki .k-car { --c: #0A84FF; --bg: #E8F2FF; } .ki .k-order { --c: #8E8E93; --bg: #F2F2F7; } .ki .k-out { --c: #34C759; --bg: #E9F8EE; }
.ki-at { text-align: right; font-size: 2.4cqw; color: #C7C7CC; margin-top: 1.6cqw; }
.ki-r, .ki-t > div, .ki-clk { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ki-r:active { opacity: .55; }
.ks-ov { position: fixed; inset: 0; background: rgba(0,0,0,.32); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.ks { container-type: inline-size; width: min(100vw, 62vh); max-height: 86vh; overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 28px 28px 0 0; padding: 0 5cqw calc(5cqw + env(safe-area-inset-bottom)); font-family: Pretendard, -apple-system, sans-serif; color: #1C1C1E; animation: ks-up .28s cubic-bezier(.2,.9,.3,1); }
@keyframes ks-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ks-grab { width: 10cqw; height: 1.1cqw; border-radius: 1cqw; background: #D1D1D6; margin: 2.4cqw auto 3cqw; }
.ks-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqw; margin-bottom: 3cqw; }
.ks-st { font-size: 3.2cqw; font-weight: 700; color: #E8732C; }
.ks-t { font-size: 6.4cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ks-s { font-size: 3.6cqw; color: #8E8E93; margin-top: 0.6cqw; }
.ks-x { flex: none; width: 8cqw; height: 8cqw; border: 0; border-radius: 50%; background: #F2F2F7; color: #8E8E93; font-size: 3.6cqw; cursor: pointer; }
.ks-g { background: #F2F2F7; border-radius: 4cqw; padding: 0 4cqw; margin-bottom: 3cqw; }
.ks-kv { display: flex; justify-content: space-between; gap: 4cqw; padding: 2.6cqw 0; border-bottom: 1px solid #E5E5EA; font-size: 3.6cqw; }
.ks-kv:last-child { border-bottom: 0; }
.ks-kv span { color: #8E8E93; flex: none; }
.ks-kv b { font-weight: 600; text-align: right; }
.ks-kv b.no { color: #FF3B30; } .ks-kv b.ok { color: #34C759; }
.ks-k { font-size: 3.2cqw; font-weight: 700; color: #8E8E93; margin: 3cqw 1cqw 1.4cqw; }
.ks-box { background: #F2F2F7; border-radius: 4cqw; padding: 3cqw 4cqw; font-size: 3.5cqw; line-height: 1.5; }
.ks-box div + div { margin-top: 1.2cqw; padding-top: 1.2cqw; border-top: 1px solid #E5E5EA; }
.ks-bs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.6cqw; margin-top: 4cqw; position: sticky; bottom: 0; background: #fff; padding-top: 2cqw; }
.ks-b { height: 13cqw; border: 0; border-radius: 3.6cqw; background: #F2F2F7; color: #1C1C1E; font: inherit; font-size: 4.4cqw; font-weight: 700; cursor: pointer; transition: background .15s; }
.ks-b[data-ki="disp"] { background: #E8732C; color: #fff; }
.ks-b.ask { background: #1C1C1E !important; color: #fff !important; }
.ks-b:disabled { opacity: .5; }
.ki-toast { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); background: rgba(28,28,30,.92); color: #fff; border-radius: 999px; padding: 14px 26px; font-family: Pretendard, sans-serif; font-size: 18px; font-weight: 700; z-index: 60; white-space: nowrap; }
/* 키오스크 색 줄이기 — 애플 위젯처럼 회색 + 주황 하나 (10/30 대표 "색깔이 너무 다양해") */
.ki .k-car, .ki .k-order, .ki .k-out { --c: #1C1C1E; --bg: #F2F2F7; }
.ki .k-need { --c: #E8732C; --bg: #FFF4EC; }
.ki-t > div { box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ki-t i { background: #F2F2F7; color: #3A3A3C; }
.ki-t .k-need i { background: #E8732C; color: #FFFFFF; }
.ki-t b { color: #1C1C1E; }
.ki-t .k-need b { color: #E8732C; }
.ki-hi { background: #F2F2F7; color: #3A3A3C; }
.ki-s.k-need .ki-hi { background: #E8732C; color: #FFFFFF; }
.ki-s h2 em { background: #FFFFFF; color: #8E8E93; }
.ki-s.k-need h2 em { background: #FFF4EC; color: #E8732C; }
.ki-card, .ki-out { box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ki-w { background: #F2F2F7; }
.ki-w b, .k-order .ki-w b { color: #1C1C1E; }
.ki-w span { color: #8E8E93; opacity: 1; }
.ki-s.k-need .ki-w { background: #FFF4EC; }
.ki-s.k-need .ki-w b { color: #E8732C; }
.ki-r.late .ki-w { background: #FFF4EC; } .ki-r.late .ki-w b, .ki-r.late .ki-w span { color: #E8732C; }
.ki-r.late .ki-w span { font-weight: 800; }
.ki-c { color: #8E8E93; }
.ki-more { color: #8E8E93; }
.ki-out i { background: #F2F2F7; color: #3A3A3C; }
.ki-out em { color: #1C1C1E; }
.ks-kv b.no { color: #E8732C; } .ks-kv b.ok { color: #1C1C1E; }
.ki-h { display: flex; justify-content: space-between; align-items: flex-start; }
.ki-logo { width: 24cqw; height: auto; margin-top: 1.4cqw; }
/* 키오스크 글라스모피즘 (10/30 대표) — 은은한 그라데이션 바탕 + 반투명 유리 카드 */
body.kiosk, body.kiosk #app { background: #EEF1F6; }
body.kiosk #app::before { content: none; }   /* 그라데이션 바탕 없앰 (11/02 대표 흰 바탕) */
.ki-box { position: relative; z-index: 1; }
.ki-t > div, .ki-card, .ki-out { background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 8px 32px rgba(60,70,110,.10), inset 0 1px 0 rgba(255,255,255,.6); }
.ki-t .k-need { background: rgba(255,244,236,.62); }
.ki-t i, .ki-hi, .ki-out i { background: rgba(255,255,255,.7); }
.ki-t .k-need i, .ki-s.k-need .ki-hi { background: #E8732C; }
.ki-w { background: rgba(255,255,255,.6); }
.ki-s.k-need .ki-w, .ki-r.late .ki-w { background: rgba(255,236,222,.75); }
.ki-r { border-bottom-color: rgba(255,255,255,.65); }
.ki-s h2 em { background: rgba(255,255,255,.6); }
.ki-s.k-need h2 em { background: rgba(255,236,222,.8); }
.ks-ov { background: rgba(40,45,70,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ks { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border-top: 1px solid rgba(255,255,255,.85); }
.ks-g, .ks-box { background: rgba(255,255,255,.6); }
.ks-b { background: rgba(255,255,255,.75); }
.ki-toast { background: rgba(28,28,30,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* 키오스크 황톤 빼기 (10/30 대표) — 바탕·칩 모두 차가운 무채색, 주황은 글자·아이콘에만 */
body.kiosk, body.kiosk #app { background: #EDF0F5; }
.ki-t .k-need { background: rgba(255,255,255,.52); }
.ki-s.k-need .ki-w, .ki-r.late .ki-w { background: rgba(255,255,255,.6); }
.ki-s.k-need h2 em { background: rgba(255,255,255,.6); }
.ki-s.k-out .ki-w b { color: #8E8E93; }
.ki-s.k-out .ki-p { color: #3A3A3C; }
/* 키오스크 포인트색 주황 → 검정 (10/30 대표) */
.ki .k-need { --c: #1C1C1E; }
.ki-t .k-need b, .ki-s.k-need .ki-w b, .ki-r.late .ki-w b, .ki-r.late .ki-w span { color: #1C1C1E; }
.ki-t .k-need i, .ki-s.k-need .ki-hi { background: #1C1C1E; color: #FFFFFF; }
.ki-s.k-need h2 em { color: #1C1C1E; }
.ki-r.late .ki-w { box-shadow: inset 0 0 0 1.5px #1C1C1E; }
.ks-st, .ks-kv b.no { color: #1C1C1E; }
.ks-b[data-ki="disp"] { background: #1C1C1E; color: #FFFFFF; }
.ks-b.ask { background: #3A3A3C !important; }
/* 키오스크 목록·상세 카드 흰색 + 글씨 정돈 (10/30 대표) */
.ki-card { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: 0 2px 10px rgba(30,40,70,.06); padding: 0 3cqw 0 3.6cqw; }
.ki-r { grid-template-columns: 17cqw minmax(0, 1fr) 2.6cqw; gap: 3.4cqw; padding: 3cqw 0; border-bottom: 1px solid #EEEEF0; }
.ki-w { background: #F5F5F7; border-radius: 2.6cqw; padding: 2cqw 0; box-shadow: none; }
.ki-s.k-need .ki-w, .ki-r.late .ki-w { background: #F5F5F7; }
.ki-r.late .ki-w { box-shadow: inset 0 0 0 1.5px #1C1C1E; }
.ki-w b { font-size: 4.4cqw; font-weight: 700; letter-spacing: -0.02em; color: #1C1C1E; }
.ki-w span { font-size: 2.6cqw; font-weight: 600; color: #8E8E93; margin-top: 0.6cqw; }
.ki-p { font-size: 4.6cqw; font-weight: 700; color: #111111; letter-spacing: -0.02em; line-height: 1.25; }
.ki-i { font-size: 3.3cqw; font-weight: 500; color: #6E6E73; margin-top: 0.8cqw; line-height: 1.3; }
.ki-c { font-size: 3cqw; font-weight: 500; color: #A1A1A6; margin-top: 0.6cqw; }
.ki-ch { color: #D1D1D6; font-size: 5.4cqw; }
.ki-more { color: #6E6E73; font-weight: 600; border-top-color: #EEEEF0; }
.ki-s h2 { font-size: 4.6cqw; color: #111111; margin-bottom: 2.4cqw; }
.ks { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 0; }
.ks-g, .ks-box { background: #F5F5F7; }
.ks-kv { font-size: 3.7cqw; padding: 3cqw 0; border-bottom-color: #E5E5EA; }
.ks-kv span { color: #6E6E73; font-weight: 500; }
.ks-kv b { color: #111111; font-weight: 600; }
.ks-t { color: #111111; } .ks-s { color: #6E6E73; }
.ks-k { color: #6E6E73; font-weight: 600; }
.ks-box { font-size: 3.6cqw; line-height: 1.55; color: #1C1C1E; }
.ks-b { background: #F5F5F7; }
/* 키오스크 품목 한 줄씩 · 할 일 체크리스트 · 견적 대기 (10/30 대표) */
.ki-t { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.8cqw; }
.ki-t > div { padding: 2.6cqw 2.2cqw 2.2cqw; }
.ki-t b { font-size: 9cqw; }
.ki-t span { font-size: 2.5cqw; }
.ki .k-quote { --c: #1C1C1E; --bg: #F2F2F7; }
.ki-i:empty { display: none; }
.ki-its { margin-top: 1cqw; display: flex; flex-direction: column; gap: 0.5cqw; }
.ki-it { font-size: 3.1cqw; font-weight: 500; color: #3A3A3C; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2.4cqw; position: relative; }
.ki-it::before { content: ''; position: absolute; left: 0.4cqw; top: 1.4cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #C7C7CC; }
.ki-it.more { color: #8E8E93; font-weight: 600; }
.ki-it.more::before { display: none; }
.ks-cl { display: flex; flex-direction: column; background: #F5F5F7; border-radius: 4cqw; padding: 1cqw 3cqw; }
.ks-ck { display: flex; align-items: flex-start; gap: 3cqw; width: 100%; padding: 2.6cqw 0; border: 0; border-bottom: 1px solid #E5E5EA; background: none; font: inherit; text-align: left; color: #1C1C1E; cursor: pointer; }
.ks-ck:last-child { border-bottom: 0; }
.ks-bx { flex: none; width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; border: 2px solid #C7C7CC; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 3.4cqw; font-weight: 800; color: #FFFFFF; margin-top: 0.2cqw; }
.ks-ck.on .ks-bx { background: #1C1C1E; border-color: #1C1C1E; }
.ks-ct { font-size: 3.6cqw; line-height: 1.45; }
.ks-ck.on .ks-ct { color: #A1A1A6; text-decoration: line-through; }
.ks-its div { padding-left: 3cqw; position: relative; }
.ks-its div::before { content: ''; position: absolute; left: 0.4cqw; top: 1.6cqw; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #C7C7CC; }
.ks-its div + div { border-top: 0; margin-top: 1cqw; padding-top: 0; }
/* 키오스크 목록: 거래처명 크게·굵게, 주소 작게, 품목 한 줄 (10/30 대표) */
.ki-p { font-size: 5cqw; font-weight: 800; letter-spacing: -0.02em; }
.ki-a { font-size: 2.9cqw; font-weight: 500; color: #8E8E93; margin-top: 0.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-a:empty { display: none; }
.ki-i { font-size: 3.2cqw; font-weight: 500; color: #3A3A3C; margin-top: 0.8cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 키오스크 작게·많이 보이게, 상세는 아래에서 올라오는 시트 (10/30 대표) */
.ki { padding: 3cqw 3.4cqw 2.4cqw; }
.ki-h { margin-bottom: 2.4cqw; align-items: center; }
.ki-clk span { font-size: 2.6cqw; }
.ki-clk b { font-size: 10cqw; margin-top: 0.3cqw; }
.ki-logo { width: 15cqw; margin-top: 0; }
.ki-t { gap: 1.4cqw; margin-bottom: 3.2cqw; }
.ki-t > div { padding: 1.8cqw 1.8cqw 1.6cqw; border-radius: 3.6cqw; }
.ki-t i { width: 5.4cqw; height: 5.4cqw; } .ki-t i svg { width: 3.2cqw; height: 3.2cqw; }
.ki-t b { font-size: 6.6cqw; margin-top: 1.4cqw; }
.ki-t span { font-size: 2.2cqw; margin-top: 0.6cqw; }
.ki-s { margin-bottom: 3.2cqw; }
.ki-s h2 { font-size: 3.6cqw; margin-bottom: 1.4cqw; gap: 1.4cqw; }
.ki-s h2 em { font-size: 2.6cqw; padding: 0.4cqw 2cqw; }
.ki-hi { transform: scale(.8); }
.ki-card { border-radius: 3.6cqw; padding: 0 2.4cqw 0 2.8cqw; }
.ki-r { grid-template-columns: 12.5cqw minmax(0, 1fr) 2cqw; gap: 2.6cqw; padding: 1.7cqw 0; }
.ki-w { border-radius: 2.2cqw; padding: 1.1cqw 0; }
.ki-w b { font-size: 3.4cqw; } .ki-w span { font-size: 2cqw; margin-top: 0.2cqw; }
.ki-p { font-size: 3.7cqw; }
.ki-a { font-size: 2.4cqw; margin-top: 0.2cqw; }
.ki-i { font-size: 2.6cqw; margin-top: 0.4cqw; }
.ki-c { font-size: 2.3cqw; margin-top: 0.2cqw; }
.ki-ch { font-size: 4.4cqw; }
.ki-z { font-size: 2.8cqw; padding: 2.6cqw 0; }
.ki-more { font-size: 2.6cqw; padding: 1.6cqw 0; }
.ks-ov { animation: none; transition: background .24s, backdrop-filter .24s; }
.ks-ov.in { animation: ks-fade .26s ease-out; }
.ks { width: 100vw; max-height: 88vh; border-radius: 32px 32px 0 0; animation: none; transition: transform .24s cubic-bezier(.3,.7,.4,1); touch-action: pan-y; box-shadow: 0 -8px 40px rgba(0,0,0,.12); }
.ks.in { animation: ks-rise .36s cubic-bezier(.16,1,.3,1); }
.ks-ov.out { background: rgba(0,0,0,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.ks-ov.out .ks { transform: translateY(100%) !important; }
.ks-grab { width: 12cqw; height: 1.2cqw; margin: 2.2cqw auto 3cqw; cursor: grab; }
@keyframes ks-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ks-fade { from { background: rgba(0,0,0,0); } }
.ki-w b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.8cqw; }
.ki-w span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-p { font-size: 3.5cqw; }
.ki-r { padding: 1.5cqw 0; }
/* 키오스크 왼쪽 칸 = 출고 요청일 크게, 요일·시간 작게, 오늘 건은 검정 (10/30 대표) */
.ki-r { grid-template-columns: 15cqw minmax(0, 1fr) 2cqw; }
.ki-w { padding: 1.2cqw 0; }
.ki-w b { font-size: 4cqw; font-weight: 800; letter-spacing: -0.03em; }
.ki-w span { font-size: 2.1cqw; font-weight: 600; color: #6E6E73; opacity: 1; margin-top: 0.3cqw; }
.ki-r.today .ki-w { background: #1C1C1E !important; }
.ki-r.today .ki-w b, .ki-r.today .ki-w span { color: #FFFFFF !important; }
/* 키오스크 카톡 넣기 · 자료 넣기 (10/30 대표) */
.ki-act { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.4cqw; margin: -1cqw 0 3.2cqw; }
.ki-act button { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; height: 9cqw; border: 0; border-radius: 3.6cqw; background: #1C1C1E; color: #FFFFFF; font: inherit; font-size: 3.2cqw; font-weight: 700; cursor: pointer; }
.ki-act button + button { background: #FFFFFF; color: #1C1C1E; box-shadow: 0 2px 10px rgba(30,40,70,.06); }
.ki-act svg { width: 4cqw; height: 4cqw; }
.kt-ta { width: 100%; box-sizing: border-box; border: 0; border-radius: 4cqw; background: #F5F5F7; padding: 3cqw 3.4cqw; font: inherit; font-size: 3.6cqw; line-height: 1.5; color: #1C1C1E; resize: none; outline: none; }
.kt-bs { position: static; margin: 2.4cqw 0 1cqw; padding: 0; }
.ks-b.go { background: #1C1C1E; color: #FFFFFF; }
.kt-note, .kt-err { font-size: 3.4cqw; font-weight: 600; color: #3A3A3C; text-align: center; padding: 2cqw 0; }
.kt-rec { margin: 3cqw 0 1cqw; background: #1C1C1E; color: #FFFFFF; border-radius: 4cqw; padding: 3.4cqw 4cqw; display: grid; grid-template-columns: 1fr auto; row-gap: 0.6cqw; }
.kt-rec span { grid-column: 1 / -1; font-size: 2.8cqw; font-weight: 600; color: #AEAEB2; }
.kt-rec b { font-size: 4.8cqw; font-weight: 800; letter-spacing: -0.02em; }
.kt-rec em { font-style: normal; font-size: 3.6cqw; font-weight: 700; align-self: end; }
.kt-vs > div + div { border-top: 1px solid #E5E5EA; margin-top: 0; padding-top: 0; }
.kt-v { display: grid; grid-template-columns: 1fr auto auto; column-gap: 3cqw; padding: 2cqw 0; align-items: baseline; }
.kt-v b { font-size: 3.6cqw; font-weight: 700; }
.kt-v span { font-size: 3cqw; font-weight: 700; color: #8E8E93; }
.kt-v.all span { color: #1C1C1E; }
.kt-v em { font-style: normal; font-size: 3.4cqw; font-weight: 600; min-width: 20cqw; text-align: right; }
.kt-v i { grid-column: 1 / -1; font-style: normal; font-size: 2.7cqw; color: #8E8E93; margin-top: 0.4cqw; }
.kt-ls { display: flex; flex-direction: column; gap: 1.6cqw; }
.kt-l { background: #F5F5F7; border-radius: 4cqw; padding: 2.6cqw 3.4cqw; }
.kt-lh { display: flex; align-items: baseline; gap: 2cqw; }
.kt-lh b { font-size: 3.9cqw; font-weight: 800; }
.kt-lh span { font-size: 3.2cqw; font-weight: 600; color: #6E6E73; }
.kt-sold { margin-left: auto; font-size: 2.7cqw !important; color: #8E8E93 !important; }
.kt-it { font-size: 2.7cqw; color: #6E6E73; margin: 0.6cqw 0 1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-it.no { color: #AEAEB2; }
.kt-o { display: grid; grid-template-columns: 1fr auto 17cqw; column-gap: 2.4cqw; align-items: baseline; padding: 1.2cqw 0; border-top: 1px solid #E5E5EA; font-size: 3.2cqw; }
.ks-box .kt-o:first-child { border-top: 0; }
.kt-o b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-o em { font-style: normal; font-weight: 700; }
.kt-o span { font-size: 2.6cqw; color: #8E8E93; text-align: right; white-space: nowrap; }
.kt-o.low b, .kt-o.low em { font-weight: 800; color: #1C1C1E; }
.kt-o.low em::before { content: '최저 '; font-size: 2.4cqw; font-weight: 700; color: #8E8E93; }
.kt-p b { display: block; font-size: 3.2cqw; font-weight: 700; }
.kt-p span { display: block; font-size: 2.9cqw; color: #3A3A3C; line-height: 1.45; margin-top: 0.4cqw; }
.kt-o small { grid-column: 1 / -1; font-size: 2.4cqw; color: #AEAEB2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.2cqw; }
.kt-lh b + span { margin-right: auto; }
.ki-r.flash { animation: ki-flash 1.2s ease-in-out 3; border-radius: 3cqw; }
@keyframes ki-flash { 50% { background: #E5E5EA; } }

/* 키오스크 물범이 (10/30) */
.ki-act button:nth-child(3) { background: #0A84FF; color: #FFFFFF; }
.mb-q { margin: 2.4cqw 0; }
.mb-qt { font-size: 3.6cqw; font-weight: 800; margin-bottom: 1.4cqw; }
.mb-os { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.mb-o { border: 0; border-radius: 3cqw; background: #F2F2F7; color: #1C1C1E; font: inherit; font-size: 3.3cqw; font-weight: 700; padding: 2.2cqw 3.4cqw; cursor: pointer; }
.mb-o.on { background: #1C1C1E; color: #FFFFFF; }
.mb-in { flex: 1 1 40cqw; min-width: 0; border: 0; border-radius: 3cqw; background: #F5F5F7; padding: 2.2cqw 3cqw; font: inherit; font-size: 3.4cqw; outline: none; }
.mb-ls { display: flex; flex-direction: column; }
.mb-l { display: grid; grid-template-columns: 1fr auto 22cqw; column-gap: 2.4cqw; align-items: baseline; padding: 1.4cqw 0; border-top: 1px solid #E5E5EA; font-size: 3.2cqw; }
.mb-l:first-child { border-top: 0; }
.mb-l b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-l span { color: #6E6E73; font-weight: 600; }
.mb-l em { font-style: normal; font-weight: 700; text-align: right; }
.mb-l.no b { color: #FF3B30; }
.mb-done { margin: 3cqw 0 1cqw; background: #34C759; color: #FFFFFF; border-radius: 4cqw; padding: 3cqw; text-align: center; font-size: 3.8cqw; font-weight: 800; }

/* 키오스크 물범이 — 명세서 전달 (10/30 대표) */
.ki-mbf { position: fixed; right: 2.4cqw; bottom: 2.4cqw; z-index: 40; display: flex; align-items: flex-end; gap: 1cqw; border: 0; background: none; cursor: pointer; font-family: Pretendard, sans-serif; }
.ki-mbf img { width: 15cqw; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.ki-mbb { margin-bottom: 9cqw; padding: 1.6cqw 2.4cqw; border-radius: 3cqw 3cqw .8cqw 3cqw; background: #fff; color: #2B2522; font-size: 3cqw; font-weight: 800; box-shadow: 0 6px 18px rgba(30,40,60,.16); white-space: nowrap; }
.ki-mbb b { display: inline-block; min-width: 3.6cqw; margin-left: .8cqw; padding: .2cqw 1.2cqw; border-radius: 999px; background: #FF453A; color: #fff; font-size: 2.6cqw; text-align: center; }
.ki-st { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.2cqw 2.4cqw; border-radius: 2.6cqw; background: #F6F3EF; margin-bottom: 1.6cqw; }
.ki-stn b { display: block; font-size: 3.2cqw; font-weight: 800; } .ki-stn span { font-size: 2.5cqw; color: #8A7E77; }
.ki-stb { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 1.2cqw; }
.ki-frm { position: fixed; inset: 4cqw; z-index: 70; background: #fff; border-radius: 3cqw; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ki-frmh { display: flex; align-items: center; padding: 2cqw 2.6cqw; border-bottom: 1px solid #EEE; font-size: 3cqw; } .ki-frmh b { flex: 1; }
.ki-frm iframe { flex: 1; border: 0; width: 100%; }
.ki-mbx { position: fixed; right: 20cqw; bottom: 2.4cqw; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: .6cqw; border: 0; background: none; cursor: pointer; font-family: Pretendard, sans-serif; }
.ki-mbx svg { width: 9cqw; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.16)); }
.ki-mbx span { padding: .8cqw 1.8cqw; border-radius: 999px; background: #E8732C; color: #fff; font-size: 2.4cqw; font-weight: 800; }
.ki-act.one { grid-template-columns: 1fr; }
#ki-frm.ki-frm { z-index: 90; }
#ki-land { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; background: #F6F5F2; }
body.ki-wide .ki { display: none !important; }
body.ki-wide #app, body.ki-wide .ki-box { background: transparent !important; pointer-events: none; position: relative; z-index: 1; }
body.ki-wide .ki-mbf, body.ki-wide .ki-mbx, body.ki-wide .ks-ov, body.ki-wide .ki-toast { pointer-events: auto; }
body.ki-wide .ki-mbf { position: fixed; right: 24px; bottom: 24px; } body.ki-wide .ki-mbf img { width: 110px; } body.ki-wide .ki-mbb { margin-bottom: 64px; font-size: 16px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; } body.ki-wide .ki-mbb b { font-size: 13px; min-width: 22px; padding: 1px 7px; }
body.ki-wide .ki-mbx { position: fixed; right: 160px; bottom: 24px; } body.ki-wide .ki-mbx svg { width: 64px; } body.ki-wide .ki-mbx span { font-size: 13px; padding: 4px 10px; }
body.ki-wide .ks-ov, body.ki-wide .ki-toast { z-index: 60; }

/* 가로 키오스크 /main?wall=1 — 오늘 흐름만 크게, 사이드바 · 위쪽 · 퀵메뉴 빼기 (10/30 대표) */
body.hm-wall .hm-top, body.hm-wall .hm-side, body.hm-wall .hm-quick, body.hm-wall .fl-tg { display: none !important; }
body.hm-wall .hm-body { display: block !important; }
body.hm-wall .hm-body { max-width: 96vw !important; margin: 0 auto !important; }   /* 큰 화면에서 1280 에 갇혀 버튼이 칸 밖으로 나가던 것 (10/30) */
body.hm-wall .hm-main { max-width: none !important; margin: 0 !important; padding: 18px 22px 120px !important; }
body.hm-wall .fl-lh, body.hm-wall .fl-row { grid-template-columns: 96px minmax(150px, 1.5fr) minmax(140px, 1.4fr) minmax(130px, 1.2fr) 64px 470px !important; }   /* 버튼 칸은 버튼만큼, 나머지는 글 칸 (10/30 — 글이 세로로 쪼개지던 것) */
body.hm-wall .fl-row *, body.hm-wall .fl-lh * { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; word-break: keep-all; }
body.hm-wall .fl-row { font-size: 16px; } body.hm-wall .fl-nmt { font-size: 17px; }
body.hm-wall .fl-row .fl-ds { color: #3A3A3C !important; font-size: 15px !important; font-weight: 600; }   /* 품목 · 상차→하차 · 차량 글씨 진하게 (10/30 대표 "잘 안 보여") */
body.hm-wall .fl-lh span { color: #6B6B70; font-weight: 700; }
body.ki-wide { overflow: hidden; }
@media (min-width: 1700px) { body.hm-wall .hm-main { zoom: 1.2; } }
@media (min-width: 2200px) { body.hm-wall .hm-main { zoom: 1.35; } }
@media (min-width: 2800px) { body.hm-wall .hm-main { zoom: 1.6; } }
body.hm-wall .hm-main > :not(.fl) { display: none !important; }

/* 가로 키오스크 — 물범이·우체통 창은 가운데 알맞은 폭 (cqw 가 화면 전체로 커지던 것) */
body.ki-wide .ks { width: min(640px, 92vw) !important; max-height: 86vh; border-radius: 28px 28px 0 0; }

/* 가로 키오스크 시계 (10/30 대표 "시계도 사라졌잖아") */
.ki-wclk { display: none; }
body.ki-wide .ki-wclk { display: flex; align-items: baseline; gap: 14px; position: fixed; left: 28px; top: 14px; z-index: 40; pointer-events: none; font-family: Pretendard, sans-serif; color: #1C1C1E; }
body.ki-wide .ki-wclk span { font-size: 18px; font-weight: 700; color: #6B6B70; } body.ki-wide .ki-wclk b { font-size: 44px; font-weight: 800; letter-spacing: -.02em; } body.ki-wide .ki-wclk img { height: 30px; margin-left: 10px; align-self: center; }
body.hm-wall .hm-main { padding-top: 84px !important; }

/* 가로 키오스크 흑백 (10/30 대표 "뒤에 배경 하얗게 · 블랙앤 화이트로, 버튼도") — 키오스크 배경 무늬가 리스트 위에 덮여 흐려 보이던 것도 */
body.ki-wide, #ki-land { background: #fff !important; } body.ki-wide #app { background: transparent !important; }   /* #app 은 iframe 위라 투명 */
body.ki-wide #app::before, body.ki-wide #app::after { display: none !important; }
html:has(body.hm-wall), body.hm-wall, body.hm-wall #app, body.hm-wall .hm, body.hm-wall .hm-body .fl { background: #fff !important; }
body.hm-wall #app::before, body.hm-wall #app::after, body.hm-wall::before { display: none !important; }
body.hm-wall .hm-body .fl { box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
body.hm-wall .fl-steps .fl-st:not([data-k="배차 요청"]), body.hm-wall .fl-day, body.hm-wall .fl-row > :not(.fl-tm) { filter: grayscale(1); }   /* 흑백 — 배차 요청만 빨강 (10/30 대표) */
body.hm-wall .fl-st[data-k="배차 요청"] i { background: #E03E2D !important; color: #fff !important; }
body.hm-wall .fl-st[data-k="배차 요청"], body.hm-wall .fl-st[data-k="배차 요청"] b { color: #E03E2D !important; }
body.hm-wall .fl-tm b, body.hm-wall .fl-tm.now b { color: #111 !important; }
body.hm-wall .fl:has(.fl-st.on[data-k="배차 요청"]) .fl-tm b, body.hm-wall .fl:has(.fl-st.on[data-k="배차 요청"]) .fl-tm span { color: #E03E2D !important; }
body.hm-wall .fl-row { color: #000; }
body.hm-wall .fl-acts .fl-go { background: #111 !important; color: #fff !important; border: 1px solid #111 !important; opacity: 1 !important; }
body.hm-wall .fl-acts .fl-gh, body.hm-wall .fl-acts .fl-in.ok { background: #fff !important; color: #111 !important; border: 1px solid #111 !important; opacity: 1 !important; }
body.ki-wide .ki-mbb, body.ki-wide .ki-mbx span { filter: grayscale(1); }

/* 가로 키오스크 — 상세보기 넓게 (10/30 대표 "너무 좁게 올라와"). 글 크기는 그대로: cqw 를 시트 폭 대신 키오스크 폭에 맞춤 */
body.ki-wide .ks { container-type: normal !important; width: min(1720px, 96vw) !important; max-height: 92vh; padding: 0 28px 28px !important; }
/* 가로 키오스크 도착 칸 — 배차 요청은 시간, 배차 완료 · 출고 완료는 날짜를 크게 · 줄 가운데 맞춤 (10/30 대표) */
body.hm-wall .fl-row { align-items: center !important; }
body.hm-wall .fl-row > .fl-c, body.hm-wall .fl-row > .fl-acts { align-self: center !important; }
body.hm-wall .fl-tm b { font-size: 22px !important; line-height: 1.15; }
body.hm-wall .fl-tm span { font-size: 13px !important; color: #555 !important; }
body.hm-wall .fl-lh > span, body.hm-wall .fl-row > .fl-c { text-align: left; }
body.hm-wall .fl-acts { flex-wrap: nowrap !important; align-items: center; }   /* 명세표·변환·거래처 전달도 버튼과 한 줄 (10/30 대표 "왜 이렇게 떠" — 두 줄로 쌓이던 것) */
body.hm-wall .fl-acts .fl-stm { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
body.hm-wall .fl-acts button.arm { background: #FF3B30 !important; color: #fff !important; border-color: #FF3B30 !important; }   /* 한 번 더 누르면 실행 */
body.hm-wall .fl-io .ok, body.hm-wall .fl-io button { background: #111 !important; color: #fff !important; }   /* 입력된 라벨은 검정 (10/30 대표) */
body.hm-wall .fl-io .no { background: #fff !important; color: #111 !important; box-shadow: inset 0 0 0 1px #BDBDBD; }
body.ki-wide .ks-ov, body.ki-wide .ks-ov.in, body.ki-wide .ks-ov.out { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; }   /* 상세보기 뒤 흐림 없이 (10/30 대표) */
body.ki-wide .ks { box-shadow: 0 -10px 40px rgba(0,0,0,.18); border: 1px solid #E5E5EA; border-bottom: 0; }
body.ki-wide .ks.in { animation: ks-rise .42s cubic-bezier(.16,1,.3,1) !important; }
.ks-memo .ks-mm { padding: 2.4cqw 0; border-bottom: 1px solid #E5E5EA; } .ks-memo .ks-mm:last-child { border-bottom: 0; }   /* 참고 메모 (체크 칸 없이) */
.ks-memo .ks-mh { font-size: 2.6cqw; font-weight: 700; color: #8E8E93; margin-bottom: .6cqw; }
.ks-memo .ks-mt { font-size: 3.2cqw; line-height: 1.5; color: #1C1C1E; }
.fl-memo .fl-mm { padding: 6px 0; border-bottom: 1px solid #EFEDE8; line-height: 1.55; } .fl-memo .fl-mm:last-child { border-bottom: 0; }   /* 참고 메모 */
.fl-memo .fl-mh { font-size: 12px; font-weight: 700; color: #8E8E93; margin-bottom: 2px; }
.fl-memo s, .ks-memo s { color: #B4B2A9; }

/* 바로 반영 (10/30) */
.ki-sync { margin-left: auto; margin-right: 2.4cqw; border: 0; border-radius: 999px; background: #1C1C1E; color: #FFFFFF; font: inherit; font-size: 2.9cqw; font-weight: 700; padding: 1.6cqw 3.2cqw; cursor: pointer; align-self: center; }
.ki-sync.on { background: #E5E5EA; color: #6E6E73; }
.fl-sync { margin-left: 8px; }

/* ── /main 위 2단 메뉴 + 시원한 본문 (10/31 대표 "키오스크처럼 시원시원, 사이드 메뉴는 상단 투뎁스") ── */
.hm-top.tnav { position: sticky; top: 0; z-index: 20; border-bottom: 0; }
.hm-top.tnav .hm-in { max-width: 1320px; padding: 0 28px; height: 68px; gap: 18px; }
.hm-top.tnav .hm-logo { height: 34px; }
.hm-nav { display: flex; align-self: stretch; gap: 6px; margin-left: 18px; }
.hm-t1 { position: relative; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 700; color: #6B6B6B; padding: 0 16px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.hm-t1:hover { color: #111; }
.hm-t1.on { color: #111; font-weight: 800; }
.hm-t1.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #E8732C; }
.hm-t1 b, .hm-t2 b { font-size: 11.5px; background: #E03E2D; color: #fff; border-radius: 10px; padding: 1px 7px; font-weight: 800; }
.hm-subnav { position: sticky; top: 68px; z-index: 19; background: #fff; border-top: 1px solid #F1EFEA; border-bottom: 1px solid #E6E4DF; }
.hm-sin { max-width: 1320px; margin: 0 auto; padding: 10px 28px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.hm-sin::-webkit-scrollbar { display: none; }
.hm-t2 { border: 0; background: #F4F3F0; color: #4B4B4B; font: inherit; font-size: 14.5px; font-weight: 700; padding: 9px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.hm-t2:hover { background: #ECEAE5; }
.hm-t2.on { background: #111; color: #fff; }
.hm-t1.off { color: #B5B2AB; cursor: default; } .hm-t1 i { font-style: normal; font-size: 11px; color: #B5B2AB; font-weight: 500; margin-left: 4px; }   /* 창고 준비중 (11/02) */
.hm-t2.off { color: #B5B2AB; background: #F7F6F3; cursor: default; } .hm-t2 i { font-style: normal; font-size: 11.5px; color: #B5B2AB; font-weight: 400; }
.hm-body.top { display: block; max-width: 1320px; }
.hm-body.top .hm-main { padding: 28px 28px 80px; gap: 24px; }
.hm-body.top .fl { border-radius: 22px; padding: 30px 34px; margin-top: 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.hm-body.top .fl-h1 { font-size: 26px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 16px; }
.hm-body.top .fl-st { font-size: 13.5px; gap: 8px; }
.hm-body.top .fl-st i { width: 54px; height: 54px; } .hm-body.top .fl-st svg { width: 26px; height: 26px; }
.hm-body.top .fl-steps::before { top: 26px; } .hm-body.top .fl-steps { margin-bottom: 18px; }
.hm-body.top .fl-st b { font-size: 18px; font-weight: 800; }
.hm-body.top .fl-lh { font-size: 13px; padding-bottom: 10px; }
.hm-body.top .fl-row { padding: 16px 12px; gap: 18px; border-radius: 14px; }
.hm-body.top .fl-tm b { font-size: 19px; } .hm-body.top .fl-tm span { font-size: 12px; }
.hm-body.top .fl-nm { font-size: 16.5px; font-weight: 800; }
.hm-body.top .fl-ds { font-size: 14px; }
.hm-body.top .fl-day { font-size: 13.5px; margin: 22px 12px 4px; }
.hm-body.top .fl-sb { font-size: 14.5px; padding: 9px 18px; }
@media (max-width: 820px) {
  .hm-top.tnav .hm-in { height: auto; padding: 8px 12px 0; flex-wrap: wrap; gap: 8px; }
  .hm-nav { order: 9; flex: 1 1 100%; margin: 0; overflow-x: auto; gap: 0; height: 46px; }
  .hm-t1 { font-size: 15.5px; padding: 0 12px; }
  .hm-subnav { position: static; } .hm-sin { padding: 8px 12px; } .hm-t2 { font-size: 13.5px; padding: 8px 14px; }
  .hm-body.top .hm-main { padding: 14px 10px 80px; }
  .hm-body.top .fl { padding: 18px 14px; border-radius: 16px; }
  .hm-body.top .fl-h1 { font-size: 21px; }
  .hm-body.top .fl-st i { width: 40px; height: 40px; } .hm-body.top .fl-st svg { width: 20px; height: 20px; } .hm-body.top .fl-steps::before { top: 19px; }
  .hm-body.top .fl-st { font-size: 11px; } .hm-body.top .fl-st b { font-size: 15px; }
}
body.hm-wall .hm-subnav { display: none !important; }

/* /main 도 벽 화면과 같은 글씨·흑백 버튼 (10/31 대표 "이런 식으로 똑같이 글씨 크기") */
.hm:has(.hm-top.tnav), .hm:has(.hm-top.tnav) .hm-body.top .fl { background: #fff; }
.hm-body.top .fl { box-shadow: none; padding-left: 8px; padding-right: 8px; }
.hm-body.top .fl-lh, .hm-body.top .fl-row { grid-template-columns: 96px minmax(150px, 1.5fr) minmax(140px, 1.4fr) minmax(130px, 1.2fr) 64px 470px !important; }   /* 버튼 칸은 버튼만큼, 나머지는 글 칸 (10/30 — 글이 세로로 쪼개지던 것) */
.hm-body.top .fl-row *, .hm-body.top .fl-lh * { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; word-break: keep-all; }
.hm-body.top .fl-row { font-size: 16px; } .hm-body.top .fl-nmt { font-size: 17px; }
.hm-body.top .fl-row .fl-ds { color: #3A3A3C !important; font-size: 15px !important; font-weight: 600; }   /* 품목 · 상차→하차 · 차량 글씨 진하게 (10/30 대표 "잘 안 보여") */
.hm-body.top .fl-lh span { color: #6B6B70; font-weight: 700; }
.hm-body.top .fl { box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.hm-body.top .fl-steps .fl-st:not([data-k="배차 요청"]), .hm-body.top .fl-day, .hm-body.top .fl-row > :not(.fl-tm) { filter: grayscale(1); }   /* 흑백 — 배차 요청만 빨강 (10/30 대표) */
.hm-body.top .fl-st[data-k="배차 요청"] i { background: #E03E2D !important; color: #fff !important; }
.hm-body.top .fl-st[data-k="배차 요청"], .hm-body.top .fl-st[data-k="배차 요청"] b { color: #E03E2D !important; }
.hm-body.top .fl-tm b, .hm-body.top .fl-tm.now b { color: #111 !important; }
.hm-body.top .fl:has(.fl-st.on[data-k="배차 요청"]) .fl-tm b, .hm-body.top .fl:has(.fl-st.on[data-k="배차 요청"]) .fl-tm span { color: #E03E2D !important; }
.hm-body.top .fl-row { color: #000; }
.hm-body.top .fl-acts .fl-go { background: #111 !important; color: #fff !important; border: 1px solid #111 !important; opacity: 1 !important; }
.hm-body.top .fl-acts .fl-gh, .hm-body.top .fl-acts .fl-in.ok { background: #fff !important; color: #111 !important; border: 1px solid #111 !important; opacity: 1 !important; }
.hm-body.top .fl-row { align-items: center !important; }
.hm-body.top .fl-row > .fl-c, .hm-body.top .fl-row > .fl-acts { align-self: center !important; }
.hm-body.top .fl-tm b { font-size: 22px !important; line-height: 1.15; }
.hm-body.top .fl-tm span { font-size: 13px !important; color: #555 !important; }
.hm-body.top .fl-lh > span, .hm-body.top .fl-row > .fl-c { text-align: left; }
.hm-body.top .fl-acts { flex-wrap: nowrap !important; align-items: center; }   /* 명세표·변환·거래처 전달도 버튼과 한 줄 (10/30 대표 "왜 이렇게 떠" — 두 줄로 쌓이던 것) */
.hm-body.top .fl-acts .fl-stm { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.hm-body.top .fl-acts button.arm { background: #FF3B30 !important; color: #fff !important; border-color: #FF3B30 !important; }   /* 한 번 더 누르면 실행 */
.hm-body.top .fl-io .ok, .hm-body.top .fl-io button { background: #111 !important; color: #fff !important; }   /* 입력된 라벨은 검정 (10/30 대표) */
.hm-body.top .fl-io .no { background: #fff !important; color: #111 !important; box-shadow: inset 0 0 0 1px #BDBDBD; }
@media (max-width: 820px) { .hm-body.top .fl-lh { display: none; } .hm-body.top .fl-row { grid-template-columns: 72px minmax(0, 1fr) auto !important; } }
.hm-body.top, .hm-top.tnav .hm-in, .hm-sin { max-width: 96vw; }   /* 벽 화면처럼 넓게 — 1320 에 갇혀 글이 두 줄로 꺾이던 것 */
.hm-body.top .hm-main { padding-left: 0; padding-right: 0; }
/* 세로 키오스크 흰 바탕 (11/02 대표) — 그라데이션 빼고, 카드는 흰 바탕에 얇은 테두리로 */
body.kiosk, body.kiosk #app { background: #FFFFFF !important; }
body.kiosk #app::before, body.kiosk #app::after { display: none !important; }
body.kiosk .ki-t > div, body.kiosk .ki-card, body.kiosk .ki-out, body.kiosk .ki-t .k-need { background: #FFFFFF; border: 1px solid #E5E5EA; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
body.kiosk .ki-w, body.kiosk .ki-s.k-need .ki-w, body.kiosk .ki-r.late .ki-w { background: #FFFFFF; border: 1px solid #E5E5EA; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.kiosk .ki-r { border-bottom-color: #EFEFF4; }
body.kiosk .ki-t i, body.kiosk .ki-hi, body.kiosk .ki-out i, body.kiosk .ki-s h2 em { background: #F2F2F7; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 출고 건 펼침 — 발주 요청 · 사진 띠 · 품목 표 (11/02) */
.fd-rq { text-align: left; background: #fff; border: 1px solid #EEECE7; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.fd-rqh { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #7A7A7A; font-weight: 700; flex-wrap: wrap; }
.fd-rqh b { color: #E8732C; }
.fd-rqx { white-space: pre-line; color: #1A1A1A; font-size: 14px; line-height: 1.5; }
.fd-rqm { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; border-top: 1px dashed #EEECE7; padding-top: 6px; }
.fd-rqm .fd-rqx { font-size: 13px; }
.fd-rqw { font-size: 12px; color: #7A7A7A; font-weight: 700; }
.fd-rqt { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 7px; }
.fd-rqt.blu { background: #EAF1FB; color: #1D4F91; } .fd-rqt.no { background: #FDECEC; color: #E03E2D; } .fd-rqt.amb { background: #FCF1DC; color: #8A5300; }
.fd-gal { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 8px 0 6px; scroll-snap-type: x mandatory; }
.fd-gf { flex: 0 0 340px; margin: 0; scroll-snap-align: start; }
.fd-gf iframe { width: 100%; height: 440px; border: 1px solid #EEECE7; border-radius: 12px; background: #fff; display: block; }
.fd-gf figcaption { font-size: 12px; color: #7A7A7A; margin-top: 4px; }
.fd-gf figcaption a { color: inherit; text-decoration: none; }
.fd-gf.na { flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed #DDD9D2; border-radius: 12px; color: #BDBAB3; font-size: 24px; font-weight: 300; align-self: flex-start; }
.fd-tw { overflow-x: auto; }
.fd-itab { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.fd-itab th { text-align: left; font-size: 12px; color: #7A7A7A; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #EEECE7; }
.fd-itab td { padding: 9px 10px; border-bottom: 1px solid #F2F0EC; color: #1A1A1A; white-space: nowrap; }
.fd-itab td { font-weight: 600; color: #111; } .fd-itab td.fd-ti { white-space: normal; font-weight: 800; }
.fd-itab tr.fd-miss td { background: #FDF3F2; } .fd-itab tr.fd-miss td.fd-ti { color: #C62828; }
.fd-src.no { border-color: #E03E2D; color: #E03E2D; background: #fff; }
.fd-st.ok { color: #2E7D4F; font-weight: 800; } .fd-st.no { color: #E03E2D; font-weight: 800; } .fd-st.na { color: #A3A09A; }
.fd-src { display: inline-block; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; border: 1.5px solid #C9C5BD; color: #555; background: #fff; }
.fd-src.hl { border-color: #2E7D4F; color: #2E7D4F; } .fd-src.kj { border-color: #6B4FA0; color: #6B4FA0; } .fd-src.kt { border-color: #1D4F91; color: #1D4F91; }
.fd-src.cs { border-color: #0E7C86; color: #0E7C86; } .fd-src.wi { border-color: #9A5B13; color: #9A5B13; } .fd-src.ns { border-color: #B4531B; color: #B4531B; } .fd-src.ca { border-color: #4B5563; color: #4B5563; background: #F3F4F6; }
@media (max-width: 600px) { .fd-gf { flex-basis: 82vw; } .fd-gf iframe { height: 380px; } }

/* 전표 전체 — 서류 변환 (11/02) */
.fl-doc { position: relative; }
.fl-doc > summary { list-style: none; cursor: pointer; }
.fl-doc > summary::-webkit-details-marker { display: none; }
.fl-docm { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 140px; padding: 6px; background: #fff; border: 1px solid #E5E5EA; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.fl-docm button { all: unset; box-sizing: border-box; padding: 9px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.fl-docm button:hover { background: #F2F2F7; }
.fl-docm button[disabled] { color: #C7C7CC; cursor: default; background: none; }

.fl-ph { visibility: hidden; pointer-events: none; }
.fl-ph .fl-in.ok, .fl-ph .fl-gh { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; white-space: nowrap; box-sizing: border-box; border: 1px solid transparent; }

/* 전표 전체 — 버튼 칸 너비 고정, 줄마다 같은 자리 (11/02 대표 "정렬이 안 맞아") */
.fl-acts.dz { gap: 6px; }
.fl-acts.dz .fl-stm { margin-right: 0; gap: 6px; }
.fl-acts.dz .fl-stm > :nth-child(1) { width: 124px; }
.fl-acts.dz .fl-stm > :nth-child(2) { width: 104px; }
.fl-acts.dz .fl-stm > :nth-child(3) { width: 108px; justify-content: flex-start; padding: 0 4px; font-weight: 400; }
.fl-acts.dz > :nth-child(2) { width: 60px; }
.fl-acts.dz > :nth-child(3), .fl-acts.dz > :nth-child(4) { width: 98px; }
.fl-acts.dz > :nth-child(5) { width: 70px; }
.fl-acts.dz > :nth-child(6) { width: 90px; }
.fl-acts.dz > *, .fl-acts.dz .fl-stm > * { padding-left: 0; padding-right: 0; justify-content: center; box-sizing: border-box; }
.fl-acts.dz .fl-stm > :nth-child(3) { justify-content: flex-start; padding: 0 4px; }
.fl-list:has(.fl-acts.dz) { --acts: 808px !important; }   /* 칸 고정 합 — 차량 글자와 안 겹치게 */
@media (min-width: 821px) { .hm-body.top .fl-list:has(.fl-acts.dz) .fl-lh, .hm-body.top .fl-list:has(.fl-acts.dz) .fl-row, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-lh, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-row { grid-template-columns: 96px minmax(150px, 1.5fr) minmax(140px, 1.4fr) minmax(130px, 1.2fr) 64px 812px !important; } }   /* 전표 전체 — 470px 고정을 이김 (11/02 "거래처 체크 겹쳐") */
.fl-it.fl-memo { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }   /* 펼침 메모 — 덩어리를 위에서 아래로 (11/02 대표 "어긋나 보여") */
.fd-more { margin-top: 8px; border-top: 1px solid #EEECE7; padding-top: 6px; }   /* 펼침 맨 아래 차량·메모 — 기본 접힘 (11/02 대표 "잘 안 읽어, 숨겨") */
.fd-more > summary { cursor: pointer; font-size: 11.5px; color: #A3A09A; font-weight: 800; list-style: none; padding: 4px 0; }
.fd-more > summary::-webkit-details-marker { display: none; }
.fd-more > summary::after { content: ' ▾'; } .fd-more[open] > summary::after { content: ' ▴'; }
.fd-sug { display: flex; flex-direction: column; gap: 2px; }   /* 견적 요청 추천 (11/02) */
.fd-sv { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #F2F0EC; font-size: 14px; }
.fd-sv b { font-weight: 800; color: #1A1A1A; min-width: 120px; } .fd-sv b.top { color: #C2410C; }
.fd-sv span { font-weight: 700; color: #333; } .fd-sv em { font-style: normal; color: #8A877F; font-size: 12.5px; } .fd-sv i { font-style: normal; color: #E03E2D; font-size: 12.5px; }
.fd-fare { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #555; font-weight: 600; }
.fd-rfqb { margin-left: 8px; padding: 4px 10px; font-size: 12px; vertical-align: 1px; }   /* 견적요청서 (11/02) */
.fd-rfq { max-width: 560px; width: calc(100vw - 32px); }
.fd-rfqv { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
textarea.fd-rfqt { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid #E5E2DC; border-radius: 8px; padding: 10px 12px; background: #fff; }
.fd-rfqt { max-height: 50vh; overflow: auto; font-family: Pretendard, sans-serif; font-size: 14px; line-height: 1.55; color: #1A1A1A; }
.fd-rfqa { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.fd-best { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; background: #fff; border: 1.5px solid #F2C9A8; border-radius: 12px; padding: 10px 14px; margin-bottom: 6px; font-size: 14px; }   /* 견적 추천 결론 (11/02) */
.fd-best.one { border-color: #A8D5B5; }
.fd-best em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; background: #E8732C; border-radius: 6px; padding: 2px 7px; } .fd-best.one em { background: #2E7D4F; }
.fd-best b { font-weight: 800; color: #1A1A1A; font-size: 15px; } .fd-best span { color: #555; font-weight: 700; } .fd-best .fd-bf { color: #B4531B; }
.fd-bestd { margin-bottom: 6px; } .fd-bestd > summary { list-style: none; cursor: pointer; margin-bottom: 0; } .fd-bestd > summary::-webkit-details-marker { display: none; }   /* 추천 줄 누르면 품목별 가장 싼 단가 (11/02) */
.fd-bestd > summary::after { content: '▾'; color: #8A877F; } .fd-bestd[open] > summary::after { content: '▴'; } .fd-bestd[open] > summary { border-radius: 12px 12px 0 0; }
.fd-bestd > .fd-lwh, .fd-bestd > .fd-lw { background: #fff; border-left: 1.5px solid #A8D5B5; border-right: 1.5px solid #A8D5B5; padding-left: 14px; padding-right: 14px; } .fd-bestd > .fd-lw:last-child { border-bottom: 1.5px solid #A8D5B5; border-radius: 0 0 12px 12px; }
.fd-bestd:not(.one) > .fd-lwh, .fd-bestd:not(.one) > .fd-lw { border-color: #F2C9A8; }
.fd-cm { display: grid; grid-template-columns: minmax(120px, 190px) 56px 110px minmax(120px, 1fr) 90px; gap: 10px; align-items: baseline; padding: 7px 14px; font-size: 13.5px; border-top: 1px solid #F2F0EC; }   /* 한 곳 vs 나눠 사기 (11/02) */
.fd-bestd > .fd-cm { background: #fff; border-left: 1.5px solid #A8D5B5; border-right: 1.5px solid #A8D5B5; } .fd-bestd > .fd-cm:last-child { border-bottom: 1.5px solid #A8D5B5; border-radius: 0 0 12px 12px; } .fd-bestd > .fd-lw:has(+ .fd-lwh) { border-bottom: 0; border-radius: 0; }
.fd-cm b { font-weight: 800; color: #111; } .fd-cm span { color: #555; font-weight: 600; } .fd-cm em { font-style: normal; font-size: 11px; color: #8A877F; margin-left: 4px; } .fd-cm strong { text-align: right; font-weight: 800; color: #111; }
.fd-cm.win { background: #F0F8F2 !important; } .fd-cm.win strong { color: #2E7D4F; } .fd-cmh { border-top: 1px solid #E5E2DC; }
@media (max-width: 600px) { .fd-cm { grid-template-columns: 1fr auto; gap: 2px 8px; } }
.fd-nr { display: grid; grid-template-columns: minmax(120px, 190px) 70px 1fr; gap: 10px; align-items: baseline; padding: 7px 14px; font-size: 13.5px; border-top: 1px solid #F2F0EC; background: #fff; border-left: 1.5px solid #A8D5B5; border-right: 1.5px solid #A8D5B5; }   /* 현장 가까운 매입처 (11/02) */
.fd-nr b { font-weight: 800; color: #111; } .fd-nr span { color: #555; font-weight: 600; } .fd-nr strong { color: #111; font-weight: 800; } .fd-bestd > .fd-nr:last-child { border-bottom: 1.5px solid #A8D5B5; border-radius: 0 0 12px 12px; }
.fd-bestd > .fd-cm:not(:last-child) { border-bottom: 0; border-radius: 0; }
@media (max-width: 600px) { .fd-nr { grid-template-columns: 1fr auto; } }
.fd-bestb { cursor: pointer; } .fd-bestb:hover { background: #F7FBF8; } .fd-bestb .fd-bgo { color: #8A877F; font-size: 18px; font-weight: 700; margin-left: 2px; }   /* 추천 팝업 (11/02) */
.hm-modal.fd-sugm { max-width: none; } .fd-sugm { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.fd-sgb { overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 10px; }
.fd-pl { flex: none; border: 1px solid #E5E2DC; border-left: 4px solid var(--pc); border-radius: 12px; background: #fff; }
.fd-plh { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; } .fd-plh::-webkit-details-marker { display: none; }
.fd-plh em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--pc); border-radius: 6px; padding: 3px 8px; }
.fd-plt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fd-plt b { font-size: 15px; font-weight: 800; color: #111; } .fd-plt span { font-size: 12.5px; color: #8A877F; font-weight: 600; }
.fd-plr { flex: none; display: flex; flex-direction: column; align-items: flex-end; } .fd-plr strong { font-size: 18px; font-weight: 800; color: var(--pc); } .fd-plr i { font-style: normal; font-size: 12px; color: #E03E2D; font-weight: 700; }
.fd-pl[open] .fd-plh { border-bottom: 1px solid #F2F0EC; }
.fd-plv { padding: 8px 14px 10px; } .fd-plv + .fd-plv { border-top: 1px dashed #ECEAE5; }
.fd-plvh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; } .fd-plvh b { font-size: 14px; font-weight: 800; color: #111; } .fd-plvh span { font-size: 12.5px; color: #8A877F; font-weight: 600; } .fd-plvh .fd-plf { margin-left: auto; color: #555; }
.fd-pli { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0 3px 10px; font-size: 13px; color: #333; } .fd-pli b { font-weight: 700; color: #111; font-variant-numeric: tabular-nums; }
.fd-map { flex: none; height: 320px; border-radius: 12px; border: 1px solid #E5E2DC; z-index: 0; }
.fd-sgk { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: #555; padding: 4px 2px 0; } .fd-sgk span + span { font-weight: 600; color: #8A877F; }
.fd-sgl { border: 1px solid #E5E2DC; border-radius: 12px; padding: 0 14px; background: #fff; } .fd-sgl .fd-lw:first-child { border-top: 0; }
.fd-sugm .fd-lwh { padding: 4px 2px 0; border: 0; } .fd-sugm .fd-nr { border: 1px solid #E5E2DC; border-radius: 10px; margin-top: 4px; }
@media (max-width: 600px) { .fd-map { height: 240px; } .fd-plvh .fd-plf { margin-left: 0; width: 100%; } }
.fd-lwh { display: flex; justify-content: space-between; padding-top: 8px; padding-bottom: 4px; font-size: 12px; font-weight: 700; color: #8A877F; }
.fd-best i { font-style: normal; color: #E03E2D; font-size: 12.5px; font-weight: 600; } .fd-best .fd-rfqb { margin-left: auto; }
.fd-prs { display: flex; flex-direction: column; }   /* 품목별 단가 (11/02) */
.fd-pr { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F2F0EC; align-items: start; }
.fd-pi { font-weight: 800; color: #111; font-size: 14px; } .fd-pi em { display: block; font-style: normal; font-weight: 500; font-size: 11.5px; color: #8A877F; margin-top: 2px; }
.fd-pv { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-pc { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px solid #EEECE7; font-size: 13px; }
.fd-pc.top { border-color: #2E7D4F; background: #F1F8F3; } .fd-pc b { font-weight: 800; color: #1A1A1A; } .fd-pc span { font-weight: 800; color: #111; } .fd-pc i { font-style: normal; font-size: 12px; color: #6B4FA0; font-weight: 700; }
.fd-pd { font-weight: 600 !important; color: #8A877F !important; font-size: 12px; }
.fd-ps { border: 0; background: #EAF4EC; color: #2E7D4F; font: inherit; font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; cursor: pointer; } .fd-ps.na { background: #F4F3F0; color: #8A877F; }
.fd-pn { font-style: normal; color: #A3A09A; font-size: 13px; }
@media (max-width: 600px) { .fd-pr { grid-template-columns: 1fr; gap: 4px; } }
.fd-low { background: #fff; border: 1.5px solid #A8D5B5; border-radius: 12px; padding: 0 14px; margin: 6px 0; }   /* 추천 — 품목별 가장 싼 단가 (11/02) */
.fd-low > summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 800; color: #1A1A1A; list-style: none; }
.fd-low > summary::-webkit-details-marker { display: none; }
.fd-low > summary::after { content: '▾'; margin-left: auto; color: #8A877F; } .fd-low[open] > summary::after { content: '▴'; }
.fd-low > summary em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; background: #2E7D4F; border-radius: 6px; padding: 2px 7px; }
.fd-low > summary span { font-size: 12px; font-weight: 600; color: #8A877F; }
.fd-lw { display: grid; grid-template-columns: 44px minmax(90px, 140px) minmax(90px, 160px) minmax(100px, 150px) 80px auto; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid #F2F0EC; font-size: 13.5px; justify-content: start; }
.fd-lw b { font-weight: 800; color: #111; } .fd-lw i { font-style: normal; color: #6B4FA0; font-weight: 700; font-size: 12.5px; } .fd-lw span:not(.fd-pd) { font-weight: 700; color: #333; } .fd-lw strong { font-weight: 800; color: #111; text-align: right; }
.fd-lw .fd-pn { grid-column: 3 / -1; }
@media (max-width: 600px) { .fd-lw { grid-template-columns: 40px 1fr auto; gap: 2px 8px; } .fd-lw i:empty { display: none; } }
.fl-ln { grid-template-columns: 56px minmax(0, 340px) auto 72px; justify-content: start; }   /* 상태가 이름 바로 옆 (11/02 대표 "너무 멀어") */
.fl-ln .fl-by:empty { display: none; } .fl-ln:has(.fl-by:empty) { grid-template-columns: 56px minmax(0, 340px) 72px; }
.fd-itab { width: auto; min-width: 0; }   /* 품목 표 — 칸을 내용만큼, 버튼·✕가 멀지 않게 (11/02 대표 "버튼이 너무 멀어") */
.fd-itab th, .fd-itab td { padding-left: 10px; padding-right: 22px; }
.fd-itab td.fd-ti { min-width: 200px; max-width: 420px; }
/* 버튼 먼 것 다 — 글 칸에 최대 너비, 남는 자리는 오른쪽으로 (11/02 대표 "버튼이 먼 것들은 다 수정") */
@media (min-width: 821px) {
  .hm-body.top .fl-list .fl-lh, .hm-body.top .fl-list .fl-row, body.hm-wall .fl-list .fl-lh, body.hm-wall .fl-list .fl-row { grid-template-columns: 96px minmax(150px, 1.5fr) minmax(140px, 1.4fr) minmax(130px, 1.2fr) 64px max(300px, var(--acts, 300px)) !important; }   /* 버튼 칸은 버튼 폭만큼 (11/03 [완료] 잘림) · 리스트는 넓게, 버튼은 차량 바로 옆 (11/02 대표 "넓직하게가 좋긴 해") */
}
.fd-best .fd-rfqb { margin-left: 8px; }
.fd-low > summary::after { margin-left: 4px; }
.fd-cm { grid-template-columns: minmax(120px, 190px) 56px 110px minmax(120px, 360px) 90px; justify-content: start; }
.fd-nr { grid-template-columns: minmax(120px, 190px) 70px minmax(0, 520px); justify-content: start; }
@media (min-width: 821px) { .hm-body.top .fl-row .fl-acts, body.hm-wall .fl-row .fl-acts { justify-content: flex-start; } }
/* 펼침 정리 — 칸마다 같은 간격·같은 제목 모양, 빨간 글은 문제만 (11/02 대표 "직관적이고 괜찮게") */
.fl-det { gap: 10px; padding: 16px 20px 12px; background: #FAF9F6; border: 1px solid #EFEDE8; }
.fl-det > .fl-k { margin: 6px 0 -4px; font-size: 12px; color: #8A877F; font-weight: 700; }
.fl-why { order: 0; align-self: flex-start; font-size: 12.5px; font-weight: 600; color: #6B6A66; background: #F1EFEA; border-radius: 999px; padding: 3px 10px; }
.fl-why::before { content: '지난번 '; display: none; }
.fd-bestd > summary::after { order: 2; font-size: 12px; margin-left: 2px; } .fd-bestd > summary .fd-rfqb { order: 3; margin-left: 10px; }
.fd-tw { background: #fff; border: 1px solid #EFEDE8; border-radius: 12px; padding: 2px 6px; align-self: flex-start; max-width: 100%; overflow-x: auto; }
.fd-itab tbody tr:last-child td { border-bottom: 0; }
.fd-fare { gap: 6px; } .fd-fare span { background: #fff; border: 1px solid #EFEDE8; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: #333; }
.fd-more { margin-top: 2px; padding-top: 4px; border-top: 1px solid #ECEAE5; }
.fd-more > summary { font-size: 12.5px; color: #6B6A66; font-weight: 700; padding: 6px 0; }
.fd-more > summary:hover { color: #1A1A1A; }
.fd-more[open] > summary { color: #1A1A1A; margin-bottom: 4px; }
.fd-tw { align-self: stretch; } .fd-itab { width: 100%; } .fd-itab td.fd-ti { max-width: none; }   /* 품목 표는 넓게 (11/02 대표 "이 부분은 넓게가 더 나아") */
/* 선 빼기 — 테두리·구분선 대신 바탕색으로만 나눔 (11/02 대표 "선 많은 게 싫어") */
.fl-det { border: 0; }
.fd-tw { border: 0; }
.fd-itab th, .fd-itab td { border-bottom: 0; }
.fd-itab thead th { padding-bottom: 4px; }
.fd-more { border-top: 0; margin-top: 0; padding-top: 0; }
.fd-best, .fd-bestd > summary { border: 0 !important; background: #FFF1E6; }
.fd-best.one, .fd-bestd.one > summary { background: #ECF6EF; }
.fd-bestd > .fd-lwh, .fd-bestd > .fd-lw, .fd-bestd > .fd-cm, .fd-bestd > .fd-nr { border: 0 !important; background: #FFF8F2; }
.fd-bestd.one > .fd-lwh, .fd-bestd.one > .fd-lw, .fd-bestd.one > .fd-cm, .fd-bestd.one > .fd-nr { background: #F5FAF6; }
.fd-bestd > :last-child { border-radius: 0 0 12px 12px; }
.fd-lw, .fd-cm, .fd-nr { border-top: 0 !important; }
.fd-low { border: 0; background: #ECF6EF; }
.fd-fare span { border: 0; }
.fl-ev, .fl-ln { border: 0; }
.fl-lh, .fl-row { border-bottom: 0; } .fl-row { margin-bottom: 2px; } .fl-row:hover { background: #F7F5F1; }   /* 리스트 줄 구분선도 뺌 (11/02) */
/* 세로 화면 정리 (11/02 대표 "세로형에도 맞게 깔끔하게") — 선 없이, 버튼은 줄 아래 가로로 */
@media (max-width: 820px) {
  .hm-top .hm-in { flex-wrap: wrap; row-gap: 6px; padding: 10px 16px 0; align-items: center; }
  .hm-top .hm-logo { height: 26px; }
  .hm-top .hm-me { display: none; }
  .hm-top .hm-link { font-size: 12px; color: #8A877F; padding: 4px 6px; order: 4; }
  .hm-top .hm-farebtn { order: 2; font-size: 12.5px; padding: 5px 10px; }
  .hm-top .sp { order: 3; flex: 1; }
  .hm-top .hm-sheet { order: 3; font-size: 12.5px; padding: 5px 10px; }
  .hm-top .hm-nav { order: 9; flex: 0 0 100%; overflow-x: auto; scrollbar-width: none; gap: 18px; border: 0; }
  .hm-top .hm-nav::-webkit-scrollbar { display: none; }
  .fl-sub.fl-tg { justify-content: flex-start; gap: 6px; margin: 4px 0 6px; }
  .fl-sub.fl-tg .fl-sb { padding: 6px 12px; font-size: 13px; }
  .fl-sub.fl-tg .fl-sync { margin-left: auto; }
  .hm-body.top .fl-row, .fl-row { grid-template-columns: 58px minmax(0, 1fr) !important; grid-template-areas: "t n" "t d" "a a" !important; row-gap: 6px; padding: 12px 8px; }
  .fl-row .fl-tm b { font-size: 15px; line-height: 1.2; } .fl-row .fl-tm span { font-size: 11.5px; }
  .fl-row .fl-nmt { font-size: 15px; line-height: 1.35; }
  .fl-row .fl-ds { font-size: 13.5px; line-height: 1.45; }
  .hm-body.top .fl-row .fl-acts, .fl-row .fl-acts { grid-area: a; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 2px; }
  .fl-row .fl-acts .fl-go, .fl-row .fl-acts .fl-gh { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .fl-det { margin: 2px 0 10px; padding: 12px; border-radius: 14px; }
  .fd-tw { padding: 0; background: transparent; overflow: visible; }
  .fd-itab, .fd-itab tbody { display: block; width: 100%; }
  .fd-itab thead { display: none; }
  .fd-itab tbody tr { display: grid; grid-template-columns: auto auto 1fr auto auto; grid-template-areas: "it it it q q" "src src due buy sale" "rd rw rw rw rw"; gap: 4px 10px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
  .fd-itab td { padding: 0 !important; border: 0 !important; white-space: normal; font-size: 13px; }
  .fd-itab td:nth-child(1) { grid-area: rd; color: #8A877F; font-weight: 600; font-size: 12px; }
  .fd-itab td:nth-child(2) { grid-area: rw; color: #8A877F; font-weight: 600; font-size: 12px; }
  .fd-itab td:nth-child(3) { grid-area: it; font-size: 14.5px; min-width: 0 !important; }
  .fd-itab td:nth-child(4) { grid-area: q; text-align: right; font-weight: 800; }
  .fd-itab td:nth-child(5) { grid-area: src; }
  .fd-itab td:nth-child(6) { grid-area: due; color: #555; } .fd-itab td:nth-child(6)::before { content: '납기 '; color: #A3A09A; font-weight: 600; }
  .fd-itab td:nth-child(7) { grid-area: buy; } .fd-itab td:nth-child(7)::before { content: '구매 '; color: #A3A09A; font-weight: 600; font-size: 12px; }
  .fd-itab td:nth-child(8) { grid-area: sale; } .fd-itab td:nth-child(8)::before { content: '판매 '; color: #A3A09A; font-weight: 600; font-size: 12px; }
  .fd-best, .fd-bestd > summary { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .fd-bestd > summary .fd-rfqb { margin-left: 0; }
  .fl-why { font-size: 12px; }
}
@media (max-width: 820px) {
  .hm-top .hm-link { display: none; }
  .hm-body.top .fl-row, .fl-row { grid-template-columns: 70px minmax(0, 1fr) !important; }
  .fl-row .fl-tm b { font-size: 14px; white-space: nowrap; }
}
@media (max-width: 820px) { .hm-body.top .fl-row .fl-tm b { font-size: 15px !important; white-space: nowrap; line-height: 1.25; } }
/* 펼친 줄 + 상세를 한 덩어리로 — 아주 연한 회색 하나로 이어 붙임 (11/02 대표 "따로 놀아 보여") */
.fl-row.sel, .hm-body.top .fl-row.sel { background: #FAFAF9 !important; border-radius: 14px 14px 0 0 !important; margin-bottom: 0 !important; box-shadow: none !important; }
.fl-row.sel + .fl-det { background: #FAFAF9 !important; margin: 0 0 14px !important; border-radius: 0 0 14px 14px !important; padding-top: 6px; border: 0 !important; box-shadow: none !important; }
.fl-row.sel + .fl-det .fd-tw, .fl-row.sel + .fl-det .fd-fare span { background: #fff; }
.fl-det .fd-tw, .fl-row.sel + .fl-det .fd-tw { background: #FFFFFF !important; border: 0 !important; box-shadow: 0 1px 2px rgba(0,0,0,.03); border-radius: 12px; padding: 4px 8px; }   /* 품목 표는 깨끗한 흰색 (11/02 대표) */
.fl-det .fd-itab, .fl-det .fd-itab tr, .fl-det .fd-itab th, .fl-det .fd-itab td { background: #FFFFFF; }
/* 전표 전체 — 머리줄을 줄과 같은 여백·간격으로, 좁은 화면은 서류 버튼을 아래 줄로 (11/02 "화면 정렬") */
@media (min-width: 821px) { .hm-body.top .fl-list:has(.fl-acts.dz) .fl-lh, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-lh { padding-left: 12px !important; padding-right: 12px !important; column-gap: 18px !important; } }
@media (min-width: 821px) and (max-width: 1559px) {
  .hm-body.top .fl-list:has(.fl-acts.dz) .fl-lh, .hm-body.top .fl-list:has(.fl-acts.dz) .fl-row, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-lh, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-row { grid-template-columns: 96px minmax(150px, 1.5fr) minmax(140px, 1.4fr) minmax(130px, 1.2fr) 64px !important; row-gap: 10px !important; }
  .fl-list:has(.fl-acts.dz) .fl-lh > :nth-child(n+6) { display: none !important; }
  .fl-list .fl-row .fl-acts.dz { grid-column: 2 / -1 !important; justify-content: flex-start !important; flex-wrap: nowrap; }
}
/* 중간 폭(821~1199) — 글 칸은 화면에 맞게 줄이고 버튼은 아래 줄로, 오른쪽 잘림 없게 (11/02 "이상하게 떠") */
@media (min-width: 821px) and (max-width: 1199px) {
  .hm-body.top .fl-list .fl-lh, .hm-body.top .fl-list .fl-row, body.hm-wall .fl-list .fl-lh, body.hm-wall .fl-list .fl-row,
  .hm-body.top .fl-list:has(.fl-acts.dz) .fl-lh, .hm-body.top .fl-list:has(.fl-acts.dz) .fl-row, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-lh, body.hm-wall .fl-list:has(.fl-acts.dz) .fl-row { grid-template-columns: 84px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) 56px !important; row-gap: 10px !important; }
  .hm-body.top .fl-list .fl-lh > :nth-child(n+6), body.hm-wall .fl-list .fl-lh > :nth-child(n+6) { display: none !important; }
  .hm-body.top .fl-list .fl-row .fl-acts, body.hm-wall .fl-list .fl-row .fl-acts { grid-column: 2 / -1 !important; justify-content: flex-start !important; flex-wrap: wrap !important; }
  .fl-list .fl-row .fl-acts:empty { display: none; }
}
@media (min-width: 821px) and (max-width: 1199px) { .hm-me, .hm-link { display: none !important; } .hm-nav a, .hm-nav button, .hm-nav > * { white-space: nowrap; } }

/* 바로가기 (11/03) — 헤더 맨 오른쪽 */
.hm-jump { position: relative; margin-left: 4px; }
.hm-jb { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: #111; color: #fff; font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.hm-jb.on { background: #3A3A3A; }
.hm-jb b, .hm-jm b { font-size: 11px; background: #E03E2D; color: #fff; border-radius: 10px; padding: 1px 6px; font-weight: 800; }
.hm-jm { position: absolute; right: 0; top: 42px; z-index: 30; background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; display: flex; flex-direction: column; min-width: 180px; }
.hm-jm a, .hm-jm span { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #222; text-decoration: none; white-space: nowrap; }
.hm-jm a:hover { background: #F4F3F0; }
.hm-jm .off { color: #B5B2AB; } .hm-jm i { font-style: normal; font-size: 11.5px; font-weight: 400; }
@media (max-width: 820px) { .hm-top .hm-jump { order: 5; } .hm-jb { height: 30px; padding: 0 11px; font-size: 12px; } }

/* 구매가·판매가 · 출고처 직접 넣기 (11/03) */
.fd-st.amb { color: #B45309; font-weight: 800; font-size: 12.5px; }
button.fd-src { font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
button.fd-src:hover { border-color: #E8732C; color: #E8732C; }
.fd-src.ok { border-color: #2E7D4F; color: #2E7D4F; }
.fd-srci { width: 150px; font: inherit; font-size: 13px; padding: 5px 10px; border: 0; border-radius: 999px; background: #F4F3F0; outline: 2px solid #E8732C; }
.fd-vat { font-style: normal; font-weight: 400; font-size: 11px; color: #A3A09A; margin-left: 2px; }
.fd-ja { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: #8A877F; }

/* 단가표 (11/03) — 엑셀처럼 촘촘, 선 대신 바탕색 */
.pr-hd { display: flex; align-items: baseline; gap: 12px; } .pr-at { font-size: 12.5px; color: #8A877F; }
.pr-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.pr-bar input, .pr-bar select { font: inherit; font-size: 14px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: #F4F3F0; color: #222; }
.pr-bar #pr-q { width: 240px; } .pr-bar #pr-p { width: 190px; }
.pr-seg { display: inline-flex; background: #F4F3F0; border-radius: 10px; padding: 3px; }
.pr-seg button { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: 8px; color: #6B6B6B; cursor: pointer; }
.pr-seg button.on { background: #111; color: #fff; }
.pr-cnt { font-size: 13px; color: #8A877F; margin-left: 4px; }
.pr-tw { overflow: auto; max-height: calc(100vh - 230px); border-radius: 12px; background: #fff; }
.pr-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pr-t th { position: sticky; top: 0; background: #F4F3F0; text-align: left; font-weight: 700; font-size: 12.5px; color: #6B6B6B; padding: 9px 10px; white-space: nowrap; cursor: pointer; z-index: 1; }
.pr-t th.on { color: #111; } .pr-t th i, .pr-t td i { font-style: normal; font-weight: 400; font-size: 11px; color: #A3A09A; }
.pr-t td { padding: 7px 10px; vertical-align: top; }
.pr-t tbody tr:nth-child(even) { background: #FAFAF8; } .pr-t tbody tr:hover { background: #FFF6EE; }
.pr-t tr.pr-g td { border-top: 0; } .pr-t tr.pr-g { box-shadow: inset 0 2px 0 #EFEDE8; }
.pr-n { font-weight: 700; min-width: 260px; } .pr-p { min-width: 140px; }
.pr-num { text-align: right; white-space: nowrap; } .pr-num i, .pr-num em { display: block; }
.pr-num em { font-style: normal; font-size: 11px; color: #A3A09A; }
.pr-pv { color: #8A877F; } .pr-pv.up::before { content: '▲ '; color: #E03E2D; font-size: 10px; } .pr-pv.dn::before { content: '▼ '; color: #1D4F91; font-size: 10px; }
.pr-d, .pr-s { white-space: nowrap; color: #6B6B6B; font-size: 12.5px; }
.pr-k { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; } .pr-k.s { background: #E8F5EC; color: #1E6B34; } .pr-k.b { background: #EEF2FA; color: #1D4F91; }
.pr-none { padding: 30px; text-align: center; color: #8A877F; }
.pr-more { margin: 12px auto; display: block; border: 0; background: #F4F3F0; font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 10px; cursor: pointer; }
@media (max-width: 820px) { .pr-bar #pr-q, .pr-bar #pr-p { width: 100%; } .pr-n { min-width: 180px; } }
/* 단가표 = 판가 피벗 — 위 칸 거래처, 첫 칸 품목 고정 (11/03) */
.pr-pv2 th.pr-pc { text-align: right; min-width: 92px; max-width: 120px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.pr-pv2 th.pr-n, .pr-pv2 td.pr-n { position: sticky; left: 0; background: inherit; z-index: 2; min-width: 300px; max-width: 360px; }
.pr-pv2 thead th.pr-n { background: #F4F3F0; z-index: 3; }
.pr-pv2 tbody tr { background: #fff; } .pr-pv2 tbody tr:nth-child(even) { background: #FAFAF8; }
.pr-pv2 td.pr-n { font-weight: 600; font-size: 13px; }
.pr-pv2 tr.pr-cat td { background: #F4F3F0; font-weight: 800; font-size: 12.5px; color: #6B6B6B; position: sticky; left: 0; }
.pr-pv2 b.up::before { content: '▲'; color: #E03E2D; font-size: 9px; margin-right: 2px; } .pr-pv2 b.dn::before { content: '▼'; color: #1D4F91; font-size: 9px; margin-right: 2px; }
.fd-jp { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: #8A877F; }
.pr-need { color: #B45309; font-size: 12.5px; }
.pr-cl { cursor: pointer; } .pr-cl:hover b { color: #E8732C; }
.pr-hm { width: min(560px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; }
.pr-hn { font-size: 13px; color: #6B6B6B; margin: 0 0 10px; }
.pr-hm b.up::before { content: '▲'; color: #E03E2D; font-size: 9px; margin-right: 2px; } .pr-hm b.dn::before { content: '▼'; color: #1D4F91; font-size: 9px; margin-right: 2px; }