/* Approved canvas (9/28): royal navy menu, navy buttons, white cards with a thin border, Noto Sans KR.
   Text contrast is deliberate: body #161B26, secondary #2C3242 / #343A4A — never lighter. */
:root {
  --nav: #17307A; --nav-line: #2A4596; --nav-text: #E8EEFB; --nav-muted: #C7D3F0; --nav-active: #3F5FC4;
  --btn: #183A93; --btn-hover: #142F77; --link: #1D46B0;
  --bg: #F3F5F9; --card: #FFFFFF; --line: #E4E8F0; --soft: #EFF2F8; --soft-blue: #EAF0FB;
  --text: #161B26; --text-2: #2C3242; --text-3: #343A4A;
  --warn-bg: #FFF4EC; --warn: #B4471A; --warn-2: #9A4A1C; --ok: #13795B; --ok-bg: #E7F6EF;
  --r: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--btn-hover); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(24, 58, 147, .45); outline-offset: 2px; }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main { flex: 1; min-width: 0; padding: 24px 28px 40px; }

/* Top bar (대표 10/2) */
.topbar { position: sticky; top: 0; z-index: 9; height: 68px; padding: 0 28px 0 32px; display: flex; align-items: center; gap: 18px;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid #E2E7F1; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px -10px rgba(23, 48, 122, .22); }
.topbar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--nav) 0%, #3F5FC4 55%, #8FA6E6 100%); }
.tb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 14px; border-left: 3px solid var(--btn); white-space: nowrap; overflow: hidden; }
.tb-title b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.tb-group { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #5A6478; }
.tb-right { display: flex; align-items: center; gap: 10px; }
.tb-pick { display: flex; align-items: center; height: 40px; border: 1px solid #DCE2EE; border-radius: 11px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 28, 48, .05); transition: border-color .15s, box-shadow .15s; }
.tb-pick:hover { border-color: #B8C4E2; }
.tb-pick:focus-within { border-color: var(--btn); box-shadow: 0 0 0 3px rgba(24, 58, 147, .14); }
.tb-pick span { padding: 0 10px 0 12px; gap: 6px; font-size: 12px; font-weight: 700; color: var(--btn); height: 100%; display: flex; align-items: center; background: var(--soft-blue); border-right: 1px solid #DCE2EE; }
.tb-pick select { height: 100%; min-width: 128px; max-width: 200px; padding: 0 30px 0 12px; border: none; background: transparent; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; outline: none; }
.tb-user { position: relative; margin-left: 6px; padding-left: 16px; border-left: 1px solid #E2E7F1; }
/* 페이지 도움말 (대표 10/8): 상단바 버튼 + 화면 전체를 덮는 어두운 막, 노란 테두리, 번호 말풍선 (PC 화면만) */
.tb-help { height: 40px; padding: 0 14px; border: 1px solid #F2C94C; border-radius: 20px; background: #FFF8DC; color: #6B4E00; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.tb-help:hover { background: #FFEFA8; }
#help-layer { position: fixed; inset: 0; z-index: 9000; }
#help-layer .help-dim { position: absolute; inset: 0; }
#help-layer .help-frame { position: absolute; border-radius: 8px; box-shadow: 0 0 0 2px #FFD54A, 0 0 0 6px rgba(255, 213, 74, .25); pointer-events: none; }
/* 대표 10/8: 흰 패널 없이 투명 — 흰 글자 + 노란 번호 */
#help-layer .help-tip { position: absolute; max-width: 240px; padding: 2px 4px; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
#help-layer .help-tip b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 10px; background: #FFD54A; color: #1B2440; font-size: 12px; vertical-align: 1px; }
#help-layer .help-mini { padding: 0; cursor: help; }
.tb-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-title-row .tb-help { height: 34px; flex-shrink: 0; }
#help-layer .help-mini span { display: none; position: absolute; left: 0; top: 24px; width: 220px; padding: 2px 4px; z-index: 1; }
#help-layer .help-mini:hover span, #help-layer .help-mini:focus span { display: block; }
#help-layer .help-close { position: absolute; padding: 0 14px; border: 1px solid #F2C94C; border-radius: 20px; background: #FFD54A; color: #1B2440; font-size: 14px; font-weight: 700; cursor: pointer; }
#help-layer .help-frame.key { box-shadow: 0 0 0 3px #FFD54A, 0 0 0 8px rgba(255, 213, 74, .3); }
#help-layer .help-tip { max-width: 230px; }
#help-layer .help-tip.key { max-width: 260px; font-size: 15px; color: #FFE58A; }
#help-layer .help-nav { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
#help-layer .help-nav b { color: #FFD54A; }
#help-layer .help-nav button { width: 36px; height: 36px; border: 1.5px solid #FFD54A; border-radius: 18px; background: transparent; color: #FFD54A; font-size: 22px; line-height: 1; cursor: pointer; }
#help-layer .help-nav button:disabled { opacity: .3; cursor: default; }
.tb-user > button { height: 46px; padding: 0 10px 0 5px; border: 1px solid transparent; border-radius: 24px; background: transparent; display: flex; align-items: center; gap: 10px; color: var(--text-3); transition: background .15s, border-color .15s; }
.tb-user > button:hover, .tb-user > button[aria-expanded="true"] { background: #fff; border-color: #DCE2EE; box-shadow: 0 1px 3px rgba(20, 28, 48, .08); }
.tb-avatar { width: 36px; height: 36px; border-radius: 18px; background: linear-gradient(135deg, #2A4FB8, var(--nav)); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #C9D3EC; }
.tb-name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; font-size: 14px; font-weight: 700; color: var(--text); }
.tb-name small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.tb-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 28, 48, .14); display: flex; flex-direction: column; z-index: 30; }
.tb-menu a, .tb-menu button { height: 38px; padding: 0 12px; border: none; border-radius: 8px; background: none; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; }
.tb-menu a:hover, .tb-menu button:hover { background: var(--soft); color: var(--text); }
.tb-menu a[aria-current="page"] { color: var(--link); font-weight: 800; }
.tb-menu button { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; color: #B42318; }
.main.phone { padding: 0; }

/* Sidebar */
.sidebar { position: sticky; top: 0; height: 100vh; width: 220px; flex-shrink: 0; padding: 0 10px 16px; background: var(--nav); color: var(--nav-text);
  display: flex; flex-direction: column; gap: 2px; transition: width .18s ease; z-index: 10; }
.sidebar.collapsed { width: 76px; padding: 0 16px 16px; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; height: 68px; flex-shrink: 0; padding: 0 6px; margin-bottom: 6px; }
.sidebar .logo { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.sidebar .brand-name { font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .handle { position: absolute; top: 20px; right: -14px; width: 28px; height: 28px; padding: 0; border: 1px solid #D5DCEA; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 6px rgba(20, 28, 48, .18); display: flex; align-items: center; justify-content: center; }
.sidebar .nav-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sidebar .nav-more { position: absolute; left: 0; right: 0; z-index: 2; height: 34px; padding: 0; border: none; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; }
.sidebar .nav-more[hidden] { display: none; }
.sidebar .nav-more.up { top: 0; background: linear-gradient(var(--nav) 45%, transparent); }
.sidebar .nav-more.down { bottom: 0; background: linear-gradient(transparent, var(--nav) 55%); }
.sidebar .nav-more svg { width: 26px; height: 26px; padding: 5px; border-radius: 13px; background: rgba(255, 255, 255, .16); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); animation: nav-bob 1.6s ease-in-out infinite; }
.sidebar .nav-more.up svg { animation-direction: reverse; }
.sidebar .nav-more:hover svg { background: rgba(255, 255, 255, .3); }
@keyframes nav-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .sidebar .nav-more svg { animation: none; } }
.sidebar .scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.nav-top { height: 40px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--nav-text); white-space: nowrap; }
/* Sections always open (대표 10/2): label, items on one left edge, a divider between sections. */
.nav-sec { margin-top: 10px; padding: 6px 6px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .10); box-shadow: 0 2px 6px rgba(8, 18, 52, .25); display: flex; flex-direction: column; gap: 1px; }
.nav-label { height: 30px; padding: 0 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .10); display: flex; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--nav-muted); }
.nav-item { height: 34px; padding: 0 8px; border-radius: 8px; display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--nav-text); }
.nav-item.sub { height: 29px; padding-left: 37px; font-size: 13px; position: relative; }
.nav-item.sub::before { content: ''; position: absolute; left: 27px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 2px; background: currentColor; opacity: .6; }
.nav-item svg { flex-shrink: 0; opacity: .9; }
.nav-parent { position: relative; }
.nav-item.open { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .08); }
.nav-parent .nav-item { padding-right: 36px; }
.nav-fold { position: absolute; right: 4px; top: 5px; width: 26px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--nav-muted); display: flex; align-items: center; justify-content: center; }
.nav-fold:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-fold svg { transition: transform .15s; }
.nav-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.nav-item.off { color: #9FB0DA; }
.nav-item.off small { margin-left: auto; font-size: 11px; font-weight: 600; opacity: .85; }
.nav-item[aria-current="page"], .nav-top[aria-current="page"] { background: var(--nav-active); color: #fff; font-weight: 700; }
.nav-item:hover, .nav-top:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-rail-sec { margin-top: 8px; padding: 4px 0; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-rail { width: 40px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--nav-text); }
.nav-rail:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-rail.off { color: #8FA0CF; }
.nav-rail.on { background: var(--nav-active); color: #fff; }
.nav-foot { border-top: 1px solid var(--nav-line); padding-top: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-foot a, .nav-foot button { height: 34px; padding: 0 12px; border-radius: 9px; color: var(--nav-muted); display: flex; align-items: center; font-size: 13px; background: none; border: none; text-align: left; }
.nav-foot a:hover, .nav-foot button:hover { color: #fff; }
.sidebar.collapsed .brand-name, .sidebar.collapsed .nav-sec, .sidebar.collapsed .nav-top span { display: none; }
.sidebar:not(.collapsed) .nav-rail-sec { display: none; }
.sidebar.collapsed .scroll { scrollbar-width: none; align-items: center; }
.sidebar .scroll::-webkit-scrollbar { display: none; }
.sidebar.collapsed .nav-top { width: 40px; height: 40px; padding: 0; justify-content: center; }
.sidebar.collapsed .nav-top svg { width: 20px; height: 20px; }

/* Bottom nav (phone) */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff;
  border-top: 1px solid #E3E7F0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); z-index: 20; }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; color: var(--text-3); }
.bottomnav a[aria-current="page"] { color: var(--link); font-weight: 800; }

/* Which navigation shows (after both are defined, so these win) */
@media (max-width: 899px) { .main { padding: 0 0 80px; } .sidebar { display: none; } }
/* 대표 10/2: the top bar carries the page title on desktop, so the page's own h1 is not repeated there. */
@media (min-width: 900px) { .body > .main .page-head h1 { display: none; } .body > .main .page-head .sub-text { margin-top: 0; } }
@media (min-width: 900px) and (max-width: 1199px) { .tb-pick span, .tb-name { display: none; } .tb-pick select { min-width: 100px; } }
@media (min-width: 900px) { .bottomnav { display: none; } }

/* Page parts */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.sub-text { font-size: 14px; color: var(--text-2); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.card.pad { padding: 18px 20px; }
.grid { display: grid; gap: 12px; }
.btn { height: 44px; padding: 0 18px; border: none; border-radius: var(--r); background: var(--btn); color: #fff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--btn-hover); }
.btn:disabled { background: #8E9AB8; cursor: default; }
.btn.ghost { background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--soft); }
.btn.small { height: 36px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.input { height: 48px; padding: 0 14px; border: 1px solid #CDD4E2; border-radius: var(--r); background: #fff; font-size: 16px; }
.input:focus { outline: none; border: 2px solid var(--btn); padding: 0 13px; box-shadow: 0 0 0 4px rgba(24, 58, 147, .12); }
.err { color: #B42318; font-size: 14px; font-weight: 600; min-height: 20px; }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 700; background: var(--soft-blue); color: var(--link); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.none { background: var(--soft); color: var(--text-3); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
/* 품목 칸 옵션 (대표 10/6): the ticked 급식 칸 are a second line of cells under each item (적용일·품목명 merged over both) */
.grid-table th { vertical-align: middle; }
.grid-table thead tr.gsubh th { top: 38px; height: 32px; font-weight: 700; background: #EAF1FD; color: #1F3F8F; border-top: 1px solid #D5E1F6; border-bottom: 1px solid #C9D8F2; }
.grid-table tr.gsub > td { background: #F5F8FE; border-right: 1px solid #E2EAF7; border-bottom: 1px solid #DCE5F5; }
.gph { color: #B4BCCB; font-weight: 400; }
/* 세부 줄 (대표 10/6): a row's item name opens/folds a detail line under it (납품 화면) */
.gtog { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.gtog:hover { background: #EEF3FD; }
.gtog.on { background: #EAF1FD; color: #1F3F8F; }
.gtog b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcar { flex: none; font-size: 10px; color: #8A94AA; }
.grid-table tr.gdetail > td, .dn-grid .grid-table tr.gdetail > td { height: auto; padding: 7px 12px 9px; white-space: normal; overflow: visible; background: #F5F8FE; border-bottom: 1px solid #C3CCDC; }
.gdet { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13px; line-height: 1.5; }
.gdet b { margin-right: 6px; font-size: 11px; font-weight: 700; color: #4A5A80; }

/* 이력 버튼 칸 merged over both lines: a taller, softly tinted button (대표 10/6) */
.grid-table td.gact[rowspan] { vertical-align: middle; }
#ig .grid-table td.gact[rowspan] .btn { width: 100%; min-height: 66px; background: #EAF1FD; border: 1px solid #CBDAF5; color: #1F3F8F; font-weight: 800; }
#ig .grid-table td.gact[rowspan] .btn:hover { background: #DCE8FB; }
#ig .grid-table td.gact .btn { white-space: normal; line-height: 1.2; height: auto; min-height: 34px; padding: 3px 8px; } /* 「단가 / 이력」 on two lines */
/* 품목 사이 테두리 (대표 10/6): the line under each item is darker; inside a two-line item the two lines stay light */
#ig .grid-table tr.gsub > td, #ig .grid-table td[rowspan] { border-bottom: 1px solid #B7C2D6; }
#ig .grid-table tbody tr:not(.gsub):not(:has(+ tr.gsub)) > td { border-bottom: 1px solid #C3CCDC; }
#ig .grid-table tr.gsub.gnew > td { border-bottom: 2px solid #D6E0F5; }
.grid-table tr.gsub.gnew > td { background: #F5F8FF; border-bottom: 2px solid #D6E0F5; }
.grid-table tr.gsub.muted > td { color: var(--text-3); }
/* 분류·옵션 관리: 품목 칸 옵션 check list (대표 10/6) */
.opt-list { display: grid; gap: 2px; margin-top: 10px; }
.opt-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line, #e6e9f0); cursor: pointer; }
.opt-row:last-child { border-bottom: 0; }
.opt-row input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.opt-row b { display: block; font-size: 14px; }
.opt-row small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.empty { padding: 28px; text-align: center; color: var(--text-2); }
.muted { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: #161B26; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; }
#toast.bad { background: #B42318; }

/* Login */
.auth { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px 28px; background: linear-gradient(180deg, #EAF0FB 0%, #F3F5F9 38%); }
.auth-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
/* 기존 사용중 데이터 무료 이관 신청 (대표 10/8): '무료'를 강조 */
.mig-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mig-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.mig-text b { font-size: 15px; }
.mig-text small { color: #5A6478; line-height: 1.5; }
.mig-free-in { color: #D9480F; }
.mig-free { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; background: #FF6B1A; color: #fff; font-weight: 800; font-size: .92em; box-shadow: 0 0 0 2px rgba(255, 107, 26, .25); }
.mig-btn { height: 46px; padding: 0 18px; font-size: 15px; font-weight: 700; }
.mig-state { margin-top: 2px; }
.mig-slim { margin-bottom: 12px; }
.mig-need { margin: 10px 0; padding: 10px 14px; border: 1px solid #DCE2EE; border-radius: 12px; background: #F8FAFD; }
.mig-need ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.mig-need li small { display: block; color: #5A6478; line-height: 1.45; }
.mig-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed #B8C4E2; border-radius: 12px; background: #fff; cursor: pointer; text-align: center; }
.mig-drop.on { border-color: var(--btn); background: var(--soft-blue); }
.mig-drop small { color: #5A6478; }
.mig-files { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; }
/* 하이람 서비스 배너 (대표 10/8): 하알모 home-promo를 로그인 화면 아래 크기로 */
.pm-slot { width: 100%; max-width: 720px; margin-top: 30px; }
.pm-slot:empty { display: none; }
.pm-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #67758A; font-size: 12px; }
.pm-ctl { display: flex; gap: 6px; }
.pm-ctl button { min-width: 36px; height: 34px; padding: 0 10px; border: 1px solid #DAE1E9; border-radius: 17px; background: #fff; color: #52647B; font-size: 13px; cursor: pointer; }
.pm-ctl button:disabled { opacity: .6; cursor: default; }
.pm { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 230px; overflow: hidden; border-radius: 20px; color: #132555; background: linear-gradient(120deg, #F3F8FF, #D4E7FF); text-decoration: none; border: 1px solid #CEE0F7; }
.pm[hidden] { display: none; }
.pm::before { content: ''; position: absolute; inset: -70%; z-index: -1; background: conic-gradient(from 0deg, transparent 35%, #78B4FF66 45%, transparent 60%); animation: pm-aura 16s linear infinite; }
.pm::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, #FFFFFF80 48%, transparent 65%); transform: translateX(-130%); animation: pm-sweep 7s ease-in-out infinite; }
.pm-web { background: linear-gradient(120deg, #FFF7EE, #F2DFD0); border-color: #E9DDCE; color: #342D27; }
.pm-web::before { background: conic-gradient(transparent 35%, #C6A1ED70 45%, transparent 60%); }
.pm-copy { position: relative; z-index: 2; padding: 26px 8px 26px 30px; }
.pm-brand { font-size: 13px; font-weight: 750; }
.pm h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.8px; margin: 12px 0 14px; }
.pm h2 span, .pm h2 strong { display: block; }
.pm h2 strong { color: #1665E5; font-weight: 850; }
.pm-web h2 strong { color: #A04421; }
.pm-arrow { display: inline-grid; place-items: center; width: 38px; height: 38px; background: #206FED; color: #fff; border-radius: 50%; font-size: 22px; transition: transform .3s; }
.pm-web .pm-arrow { background: #49372E; }
.pm:hover .pm-arrow { transform: rotate(45deg); }
.pm-newtab { font-size: 12px; margin-left: 10px; color: #53647B; }
.pm-art { height: 100%; min-height: 230px; position: relative; pointer-events: none; perspective: 900px; }
.pm-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pm-depth 8s ease-in-out infinite; mask-image: linear-gradient(90deg, transparent, #000 12%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); }
.pm-orbit { position: absolute; inset: 15% 8%; border: 1px solid #FFFFFFAD; border-radius: 50%; transform: rotate(-22deg); animation: pm-orbit 9s ease-in-out infinite; }
.pm-spark { position: absolute; color: #fff; text-shadow: 0 0 15px #3C89E7; font-size: 28px; font-style: normal; animation: pm-spark 4s ease-in-out infinite; }
.pm-spark.s1 { top: 12%; right: 17%; } .pm-spark.s2 { bottom: 12%; left: 10%; font-size: 19px; animation-delay: -2s; }
.pm, .pm::before, .pm::after, .pm * { animation-play-state: paused !important; }
.pm-wrap.is-moving .pm, .pm-wrap.is-moving .pm::before, .pm-wrap.is-moving .pm::after, .pm-wrap.is-moving .pm * { animation-play-state: running !important; }
.pm:focus-visible, .pm-ctl button:focus-visible { outline: 3px solid #2379F5; outline-offset: 3px; }
@keyframes pm-depth { 0%, 100% { transform: scale(1.02) rotateY(-3deg); } 50% { transform: scale(1.09) rotateY(3deg) translateY(-6px); } }
@keyframes pm-orbit { 50% { transform: rotate(14deg) scale(.94); } }
@keyframes pm-spark { 0%, 100% { transform: scale(.6) rotate(0); opacity: .35; } 50% { transform: scale(1.15) rotate(90deg); opacity: .95; } }
@keyframes pm-aura { to { transform: rotate(360deg); } }
@keyframes pm-sweep { 0%, 35% { transform: translateX(-130%); } 75%, 100% { transform: translateX(130%); } }
@media (max-width: 700px) { .pm { grid-template-columns: 1fr; } .pm-copy { padding: 20px 20px 6px; } .pm h2 { font-size: 22px; } .pm-art { min-height: 160px; height: 160px; } .pm-art img { mask-image: linear-gradient(180deg, transparent, #000 16%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%); } }
@media (prefers-reduced-motion: reduce) { .pm, .pm::before, .pm::after, .pm * { animation: none !important; transition: none !important; } .pm::after { display: none; } }
.auth-logo { width: 44px; height: 44px; border-radius: 13px; background: var(--btn); display: flex; align-items: center; justify-content: center; }
.auth h1 { margin: 6px 0 0; font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; }
.tabs { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: var(--r); }
.tabs button { flex: 1; height: 40px; border: none; border-radius: 8px; background: transparent; color: var(--text-2); font-size: 14px; font-weight: 600; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--link); font-weight: 800; box-shadow: 0 1px 3px rgba(20, 28, 48, .1); }
.pin-dots { display: flex; gap: 16px; justify-content: center; padding: 6px 0; }
.pin-dots span { width: 16px; height: 16px; border-radius: 8px; background: #D6DCE8; }
.pin-dots span.on { background: var(--btn); }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.keypad button { height: 66px; border: none; border-radius: 18px; background: #fff; font-size: 26px; font-weight: 700; box-shadow: 0 1px 3px rgba(20, 28, 48, .07); }
.keypad button:active { background: var(--soft); }
.keypad .clear { background: transparent; box-shadow: none; display: flex; align-items: center; justify-content: center; }

/* Today */
.today-list { display: flex; flex-direction: column; gap: 10px; }
.today-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--text); }
.today-row:hover { border-color: #B9C4DD; color: var(--text); }
.today-row .name { flex: 1; font-size: 16px; font-weight: 800; }
.today-row .amt { font-size: 15px; font-weight: 700; }
.date-bar { display: flex; align-items: center; gap: 8px; }
.date-bar input { height: 44px; }

/* Note entry (phone first; centred column on desktop) */
.entry { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.entry header { padding: 12px 20px 14px; background: #fff; display: flex; flex-direction: column; gap: 12px; border-radius: 0 0 22px 22px; box-shadow: 0 2px 10px rgba(20, 28, 48, .05); }
.entry .top { display: flex; align-items: center; justify-content: space-between; }
.entry .back { width: 44px; height: 44px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; margin-left: -12px; }
.entry .title { font-size: 16px; font-weight: 800; }
.pickers { display: flex; gap: 8px; }
.picker { flex: 1; min-width: 0; height: 52px; border: none; border-radius: var(--r); background: var(--bg); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 14px; gap: 2px; text-align: left; }
.picker small { font-size: 12px; color: var(--text-3); }
.picker b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.picker input { border: none; background: transparent; font-size: 15px; font-weight: 800; padding: 0; width: 100%; }
.helpers { padding: 14px 20px 6px; display: flex; gap: 8px; }
.helpers button { flex: 1; height: 44px; border: none; border-radius: 12px; background: #fff; color: var(--text); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 1px var(--line); }
.search-wrap { padding: 8px 20px 4px; position: relative; }
.search { height: 50px; border-radius: var(--r); background: #fff; border: 2px solid var(--btn); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; box-shadow: 0 0 0 4px rgba(24, 58, 147, .12); }
.search input { flex: 1; min-width: 0; border: none; outline: none; font-size: 16px; background: transparent; }
.scan-btn { height: 40px; padding: 0 12px; border: none; border-radius: 8px; background: var(--btn); color: #fff; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.results { position: absolute; left: 20px; right: 20px; top: 62px; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 8px 24px rgba(20, 28, 48, .16); z-index: 5; max-height: 320px; overflow-y: auto; }
.results button { width: 100%; min-height: 50px; border: none; border-bottom: 1px solid #F0F2F7; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; text-align: left; }
.results button:hover, .results button:focus { background: var(--soft-blue); }
.results .spec { color: var(--text-3); font-size: 13px; }
.lines { flex: 1; padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 8px; }
.lines .hint { font-size: 12px; color: var(--text-3); font-weight: 600; }
.line { background: #fff; border-radius: var(--r); padding: 12px 10px 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 0 1px var(--line); }
.line.neg { background: var(--warn-bg); box-shadow: none; }
.line .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.line .nm { font-size: 15px; font-weight: 800; }
.line .nm small { font-weight: 500; color: var(--text-3); font-size: 13px; }
.line .calc { font-size: 13px; color: var(--text-2); }
.line.neg .calc { color: var(--warn-2); }
.line .tag { font-weight: 600; color: var(--warn); font-size: 12px; background: #fff; padding: 2px 7px; border-radius: 8px; }
.qty { width: 66px; height: 46px; border: none; border-radius: 12px; background: var(--soft); text-align: center; font-size: 18px; font-weight: 800; }
.line.neg .qty { background: #fff; color: var(--warn); }
.del { width: 36px; height: 36px; border: none; background: transparent; border-radius: 8px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.del:hover { background: var(--soft); color: #B42318; }
.total-bar { position: sticky; bottom: 0; margin: 0 12px 12px; padding: 12px 12px 12px 18px; background: var(--nav); border-radius: 14px; display: flex; align-items: center; gap: 12px; }
@media (max-width: 899px) { .total-bar { bottom: calc(72px + env(safe-area-inset-bottom)); } }
.total-bar .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.total-bar small { font-size: 12px; color: #D0D6E4; }
.total-bar b { font-size: 20px; font-weight: 800; color: #fff; }
.total-bar button { height: 50px; padding: 0 22px; border: none; border-radius: var(--r); background: #fff; color: var(--nav); font-size: 16px; font-weight: 800; }
.total-bar button:disabled { opacity: .6; }
.confirmed-note { margin: 12px 20px; padding: 14px 16px; border-radius: var(--r); background: var(--ok-bg); color: var(--ok); font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Sheets (bottom sheet on phone, dialog on desktop) */
.sheet-back { position: fixed; inset: 0; background: rgba(15, 20, 35, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
@media (min-width: 900px) { .sheet-back { align-items: center; } }
.sheet { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .sheet { border-radius: 16px; } }
.sheet h2 { margin: 0; font-size: 18px; font-weight: 800; }
.sheet .list button { width: 100%; min-height: 50px; border: none; border-bottom: 1px solid #F0F2F7; background: #fff; text-align: left; padding: 0 6px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.sheet textarea { min-height: 160px; padding: 12px; border: 1px solid #CDD4E2; border-radius: var(--r); font-size: 15px; }
.sheet .row { display: flex; gap: 8px; }
.sheet .row > * { flex: 1; }

/* Scanner */
.scanner { position: fixed; inset: 0; background: #000; z-index: 60; display: flex; flex-direction: column; }
.scanner video { flex: 1; width: 100%; object-fit: cover; }
.scanner .frame { position: absolute; left: 10%; right: 10%; top: 35%; height: 22%; border: 3px solid #fff; border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); pointer-events: none; }
.scanner .bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; }
.scanner .bar p { margin: 0; font-size: 15px; text-align: center; }

/* Reports (DailyMatrix board) */
.report { display: flex; flex-direction: column; gap: 14px; }
.report-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.report-bar .grow { flex: 1; }
.report-bar .month { font-size: 15px; }
.select-pill { height: 40px; padding: 0 6px 0 14px; border-radius: 12px; border: 1.5px solid var(--btn); background: #fff; display: flex; align-items: center; gap: 8px; }
.select-pill small { color: var(--text-3); font-size: 12px; }
.select-pill select { border: none; background: transparent; font-weight: 800; font-size: 14px; height: 36px; max-width: 220px; }
.page-head .actions { display: flex; gap: 8px; }
.report-tabs { max-width: 480px; }
.report-tabs a { flex: 1; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 14px; font-weight: 600; }
.report-tabs a[aria-selected="true"] { background: #fff; color: var(--link); font-weight: 800; box-shadow: 0 1px 3px rgba(20, 28, 48, .1); }
.chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip { height: 34px; padding: 0 14px; border-radius: 17px; background: #fff; color: #262C3B; font-size: 13px; display: inline-flex; align-items: center; box-shadow: 0 1px 2px rgba(20, 28, 48, .08); }
.chip.on { background: #161B26; color: #fff; font-weight: 700; }
.chip:hover { color: var(--text); background: var(--soft); }
.chip.on:hover { background: #161B26; color: #fff; }
.chip-sep { width: 1px; height: 20px; background: #DCE1EB; margin: 0 6px; }
.check { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.check input { width: 18px; height: 18px; }
.table-wrap { overflow: auto; max-height: calc(100vh - 290px); }
.rtable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.rtable th, .rtable td { padding: 0 10px; height: 44px; border-bottom: 1px solid #F0F2F7; white-space: nowrap; text-align: left; }
.rtable thead th { position: sticky; top: 0; background: #fff; z-index: 2; color: var(--text-3); font-weight: 700; font-size: 12px; border-bottom: 1px solid #E4E8F0; }
.rtable .stick { position: sticky; left: 0; background: #fff; z-index: 1; font-weight: 700; color: var(--text); min-width: 150px; }
.rtable thead .stick { z-index: 3; color: var(--text-3); }
.rtable .stick small { font-weight: 500; color: var(--text-3); }
.rtable .r { text-align: right; }
.rtable .c { text-align: center; min-width: 38px; }
.rtable .b { font-weight: 800; }
.rtable td.now, .rtable th.now { background: var(--soft-blue); color: var(--link); font-weight: 800; }
.rtable td.neg { color: var(--warn); font-weight: 800; }
.rtable tfoot td, .rtable tfoot th { position: sticky; bottom: 0; background: #F7F8FC; font-weight: 800; height: 50px; border-top: 1px solid #E4E8F0; }
.rtable.daily td.c { padding: 0 4px; }
@media (max-width: 899px) { .report { padding: 16px 12px 96px; } .table-wrap { max-height: none; } .rtable .stick { min-width: 110px; } }
@media print {
  .sidebar, .bottomnav, .report-bar .btn, .page-head .actions, .report-tabs, .chips, #toast { display: none !important; }
  body { background: #fff; } .main { padding: 0; } .table-wrap { max-height: none; overflow: visible; border: none; }
  .rtable thead th, .rtable tfoot td, .rtable tfoot th, .rtable .stick { position: static; }
}
.rtable tr.muted th, .rtable tr.muted td { color: var(--text-3); }
select.input { padding-right: 8px; }
@media (max-width: 899px) { .main > .page-head, .main > .report-bar, .main > .chips, .main > section { margin-left: 12px; margin-right: 12px; } .main > .page-head { padding-top: 16px; } }
button.chip { border: none; cursor: pointer; font-family: inherit; }
.sheet > * { flex-shrink: 0; }
.sheet .row > * { min-width: 0; }
.field .input, .sheet .input { width: 100%; min-width: 0; }
.sheet { overflow-x: hidden; }
.perm { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #F0F2F7; }
.perm > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm small { color: var(--text-3); font-size: 13px; }
.perm .input { width: 160px; flex-shrink: 0; height: 42px; }
.settings { max-width: 760px; }
.nav-foot a[aria-current="page"] { background: var(--nav-active); color: #fff; font-weight: 700; }

/* Customer contact (ContactView board) and printable note */
.contact { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.contact-head { padding: 26px 22px 22px; background: var(--btn); color: #fff; display: flex; flex-direction: column; gap: 6px; border-radius: 0 0 26px 26px; }
.contact-head .from { font-size: 13px; color: #DCE4F7; }
.contact-head .who { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.contact-select { font-size: 22px; font-weight: 800; color: #fff; background: transparent; border: none; padding: 0; }
.contact-select option { color: var(--text); }
.contact-tabs { margin-top: 10px; display: flex; gap: 4px; background: rgba(255, 255, 255, .16); padding: 4px; border-radius: 10px; }
.contact-tabs a { flex: 1; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; }
.contact-tabs a[aria-selected="true"] { background: #fff; color: var(--link); font-weight: 800; }
.contact-month { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 4px; }
.contact-list { flex: 1; padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.contact-card { background: #fff; border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 1px var(--line); }
.contact-card .t { display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 800; }
.contact-card .s { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text-2); }
.contact-card .s b { color: var(--text); }
.contact-foot { padding: 10px 20px 22px; font-size: 13px; color: var(--text-2); text-align: center; }
.linkish { border: none; background: none; color: var(--link); font-weight: 700; padding: 0 0 0 6px; }
.contact-top { display: flex; justify-content: space-between; padding: 12px; }
.print-page { max-width: 960px; margin: 0 auto; padding: 24px 20px 48px; background: #fff; min-height: 100vh; }
.print-actions { display: flex; justify-content: space-between; margin-bottom: 18px; }
.print-title { text-align: center; font-size: 26px; letter-spacing: .3em; margin: 0 0 18px; }
.print-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.print-meta div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.print-meta small { color: var(--text-3); font-size: 12px; }
.print-group { font-size: 15px; margin: 18px 0 8px; }
.print-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; }
.print-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.print-box > small { color: var(--text-3); font-size: 12px; font-weight: 700; }
.print-box div { display: flex; gap: 10px; align-items: center; }
.print-box span { color: var(--text-3); min-width: 64px; }
.print-stamp { width: 44px; height: 44px; object-fit: contain; margin-left: 6px; vertical-align: middle; opacity: .9; }
.print-foot { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.print-table th, .print-table td { height: 38px; }
.print-table tbody th { font-weight: 700; }
.print-total { display: flex; justify-content: flex-end; gap: 24px; margin-top: 16px; font-size: 15px; }
.print-total b { font-size: 18px; }
@media (max-width: 700px) { .print-page { padding: 12px; overflow-x: auto; } }
@media print { .print-actions { display: none; } .print-page { padding: 0; } }/* Links styled as buttons keep their own colours (the generic a:hover must not win). */
a.btn, a.btn:hover { color: #fff; }
a.btn.ghost, a.btn.ghost:hover { color: var(--text); }
a.today-row:hover, a.chip:hover { color: var(--text); }

/* Sign-up wizard */
.setup { min-height: 100vh; display: flex; justify-content: center; padding: 40px 16px 60px; background: linear-gradient(180deg, #EAF0FB 0%, #F3F5F9 30%); }
.setup-box { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.setup h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.setup h2 { margin: 0; font-size: 16px; font-weight: 800; }
.pick { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #CDD4E2; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.pick:has(input:checked) { border-color: var(--btn); background: var(--soft-blue); color: var(--link); }
.pick input { width: 18px; height: 18px; margin: 0; }
.field .label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.field small.muted { font-size: 12px; }

/* Excel-style entry grid (대표 9/28): type in the table, Enter moves on, last cell saves the row. */
.grid-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.grid-table th { position: sticky; top: 0; z-index: 2; background: #F7F8FC; color: var(--text-2); font-size: 12px; font-weight: 700; text-align: left; padding: 0 10px; height: 38px; border-bottom: 1px solid #DCE1EB; white-space: nowrap; }
.grid-table td { border-bottom: 1px solid #EDF0F6; border-right: 1px solid #F3F5F9; padding: 0 10px; height: 42px; white-space: nowrap; color: var(--text); }
.grid-table td:has(.gcell) { padding: 0; }
.grid-table .r { text-align: right; }
.grid-table .c { text-align: center; }
.gcell { width: 100%; height: 42px; border: none; background: transparent; padding: 0 10px; font-size: 15px; font-weight: 600; color: var(--text); border-radius: 0; }
.gcell.r { text-align: right; }
select.gcell { cursor: pointer; }
.gcell:focus { outline: 2px solid var(--btn); outline-offset: -2px; background: #fff; }
.grid-table tr.gnew td { background: #FBFCFF; }
.grid-table tr.gnew .gcell::placeholder { color: #6B7385; font-weight: 500; }
.grid-table tr.saving td { background: #F4F7FD; }
.grid-table tr.gerr td { background: #FFF1F0; }
.grid-table tr.neg td { color: var(--warn); }
.grid-table .gact { width: 1%; text-align: right; padding: 0 6px; }
.gdel { width: 30px; height: 30px; border: none; background: transparent; border-radius: 6px; font-size: 20px; color: var(--text-3); }
.gdel:hover { background: #FFF1F0; color: #B42318; }
.gpop { position: absolute; z-index: 80; background: #fff; border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 28, 48, .2); max-height: 360px; overflow-y: auto; padding: 4px 0; }
.gpop button { display: flex; width: 100%; justify-content: space-between; gap: 16px; align-items: center; min-height: 40px; padding: 0 14px; border: none; background: #fff; text-align: left; font-size: 14px; color: var(--text); }
.gpop button.on, .gpop button:hover { background: var(--soft-blue); }
.gpop-none { padding: 10px 14px; font-size: 14px; color: var(--text-2); }
.entry.wide { max-width: 1100px; }
.entry-grid { margin: 8px 20px; border: 1px solid var(--line); border-radius: 10px; overflow: visible; }
@media (max-width: 899px) { .entry-grid { margin: 8px 8px; overflow-x: auto; } }
.grid-hint { padding: 4px 20px 0; font-size: 13px; color: var(--text-2); }
.helpers button svg { vertical-align: -3px; }
/* 대표 9/28: no scroll boxes inside pages — tables grow and the page scrolls; headers stick. */
.table-wrap { max-height: none !important; overflow: visible; }
.table-wrap.wide-x { overflow-x: auto; }
.rtable thead th { top: 0; }.sec-title { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.grid-table tr.muted td { color: var(--text-3); }
@media (max-width: 899px) {
  .entry-grid .grid-table { min-width: 560px; }
  .grid-table td:first-child { min-width: 130px; }
  .helpers { flex-wrap: wrap; }
  .helpers button { flex: 1 1 calc(50% - 4px); white-space: nowrap; }
  .main > section.card { overflow-x: auto; }
}

/* Tag input (첫 설정 · 업체 설정) */
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 48px; padding: 6px 8px; border: 1px solid #CDD4E2; border-radius: var(--r); background: #fff; cursor: text; }
.tags:focus-within { border: 2px solid var(--btn); padding: 5px 7px; box-shadow: 0 0 0 4px rgba(24, 58, 147, .12); }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 12px; border-radius: 16px; background: var(--soft-blue); color: var(--link); font-size: 14px; font-weight: 700; }
.tag small { color: var(--text-2); font-weight: 600; font-size: 12px; margin-left: 2px; }
.tag button { width: 26px; height: 26px; border: none; background: transparent; border-radius: 13px; color: var(--link); font-size: 18px; line-height: 1; }
.tag button:hover { background: #D6E0F7; }
.tag-in { flex: 1; min-width: 140px; border: none; outline: none; height: 34px; font-size: 15px; background: transparent; }
.note-box { padding: 12px 14px; border-radius: 10px; background: #FFF4EC; color: var(--warn-2); font-size: 14px; font-weight: 700; }
.settings { max-width: 760px; }
.settings h2 { margin: 0; font-size: 17px; font-weight: 800; }

/* 손익 KPI */
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
@media (max-width: 899px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi small { color: var(--text-2); font-size: 13px; font-weight: 700; }
.kpi b { font-size: 22px; font-weight: 800; }
.kpi.pos b { color: var(--ok); }
.kpi.neg b, .rtable td.neg { color: #B42318; }

/* 미납 안내 (대표 9/29) */
.bill-banner { padding: 10px 16px; font-size: 14px; font-weight: 700; text-align: center; }
.bill-banner.soon { background: #FFF4EC; color: var(--warn-2); }
.bill-banner.over { background: #B42318; color: #fff; }
.bill-banner.over a { color: #fff; text-decoration: underline; }
.bill-banner a { margin-left: 6px; }
.bill-banner.demo { background: #EAF0FB; color: var(--link); display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.bill-banner.demo .btn { height: 32px; }

/* 영업소·납품처 관리 (대표 10/2): 영업소 list on the left, its 납품처 on the right. */
.cv { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.cv.one { grid-template-columns: minmax(0, 1fr); }
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cv-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.cv-head h2 small { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.cv-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cv-list li { display: flex; align-items: center; gap: 4px; border-radius: 10px; border: 1px solid transparent; }
.cv-list li:hover { background: var(--soft); }
.cv-list li.on { background: var(--soft-blue); border-color: #C9D5F2; }
.cv-site { flex: 1; min-width: 0; height: 44px; padding: 0 10px 0 12px; border: none; background: none; display: flex; align-items: center; gap: 8px; text-align: left; }
.cv-site .nm { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-list li.on .cv-site .nm { color: var(--btn); font-weight: 800; }
.cv-site .cnt { font-size: 12px; font-weight: 700; color: var(--text-3); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.cv-acts { display: flex; gap: 2px; padding-right: 6px; }
.cv-list li.editing { padding: 8px; background: #fff; border-color: var(--btn); }
.cv-edit { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.cv-edit .input { height: 38px; }
.cv-edit .err { grid-column: 1 / -1; }
.icon-btn { width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: #fff; color: var(--btn); box-shadow: 0 0 0 1px var(--line); }
.icon-btn.danger:hover { color: #B42318; }
.cv-table th[scope="row"] { font-weight: 800; text-align: left; }
.cv-row-acts { white-space: nowrap; text-align: right; }
.cv-row-acts > * { margin-left: 4px; vertical-align: middle; }
.btn.danger { background: #B42318; color: #fff; }
.btn.danger:hover { background: #912018; color: #fff; }
.warn-box { padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-2); font-size: 14px; font-weight: 600; line-height: 1.6; }
@media (max-width: 899px) { .cv { grid-template-columns: minmax(0, 1fr); margin: 0 12px; } }/* Tree table (대표 10/2): a tinted 영업소 row, its 납품처 rows indented under it with └. */
.cv-table { width: 100%; }
.cv-table thead th { text-align: left; }
.cv-site-row td { padding: 0; background: #EEF2FA; border-top: 1px solid #D9E1F2; }
.cv-site-line { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 16px; }
.cv-site-line .cv-sname { font-size: 16px; font-weight: 800; color: var(--btn); }
.cv-site-line .cnt { font-size: 12px; font-weight: 700; color: var(--text-3); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; }
.cv-site-line .grow { flex: 1; }
.cv-site-line.editing { background: #fff; }
.cv-site-line .cv-edit { max-width: 520px; }
.cv-add-sub { height: 32px; }
.cv-cust-row th[scope="row"] { padding-left: 28px; font-weight: 700; white-space: nowrap; }
.cv-branch { display: inline-block; width: 18px; margin-right: 6px; color: #8A93A8; font-weight: 600; }
.cv-cname { color: var(--text); }
.cv-cust-row.empty-row td { padding-left: 28px; color: var(--text-3); font-size: 14px; }.cf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .cf-2 { grid-template-columns: 1fr; } }
.cv-table td .muted { color: var(--text-3); font-size: 13px; }
.sec-mini { margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 800; color: var(--text); }
.sec-mini small { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
/* 대표 10/2: Korean IME on by default for text fields where the browser honours it (Firefox/Edge legacy); numbers, e-mail and phone stay Latin. */
input:not([type]), input[type="text"], input[type="search"], textarea { ime-mode: active; }
input[inputmode="numeric"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"] { ime-mode: disabled; }

/* 권한 설정 (대표 10/2) */
.lv-table th.stick { min-width: 220px; text-align: left; }
.lv-head { min-width: 140px; vertical-align: top; text-align: center; }
.lv-name { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lv-name b { font-size: 14px; font-weight: 800; color: var(--text); }
.lv-name small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.lv-acts { display: flex; gap: 2px; margin-top: 2px; }
.lv-cell { text-align: center; }
.lv-check { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }
.lv-check:hover { background: var(--soft); }
.lv-check input { width: 18px; height: 18px; accent-color: var(--btn); cursor: pointer; }
.lv-edit { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.lv-edit .input { height: 36px; }
.lv-edit .row { display: flex; gap: 4px; justify-content: center; }
.seg-tabs { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: #E6EBF5; border-radius: 12px; }
.seg-tabs a { height: 38px; padding: 0 18px; border-radius: 9px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--text-2); }
.seg-tabs a[aria-selected="true"] { background: #fff; color: var(--btn); font-weight: 800; box-shadow: 0 1px 3px rgba(20, 28, 48, .12); }
.seg-tabs a:hover { color: var(--btn); }
.lv-pick { height: 36px; min-width: 150px; padding: 0 28px 0 10px; font-size: 14px; }
tr.muted th, tr.muted td { opacity: .6; }

/* 계정 관리: 납품처 rows and their 담당자 under each 영업소 */
.cv-cust-head th { padding-left: 28px; font-weight: 700; background: #FAFBFD; }
.cv-cust-head td { background: #FAFBFD; }
.cv-ctag { margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: var(--soft-blue); color: var(--btn); font-size: 11px; font-weight: 800; }
.cv-cust-head .cnt { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--text-3); }
.cv-branch.deep { margin-left: 26px; }

/* 권한 설정 v2 (대표 10/2): levels on the left, the chosen level's menu table on the right */
.pv { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.pv-matrix .cv-head h2 small { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.pv-quick { display: flex; gap: 6px; }
.pv-group th { padding: 10px 14px 6px; background: #F4F6FB; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--text-3); text-align: left; }
.lv-cell.na { color: #B7BDCB; text-align: center; }
.lv-check.dim { opacity: .35; }
.pv-levels .cv-edit { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 899px) { .pv { grid-template-columns: minmax(0, 1fr); margin: 0 12px; } }
.pv-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.pv-save .muted { margin-right: auto; font-size: 13px; color: var(--text-3); }
/* 권한 표 정렬 (대표 10/2): fixed columns, everything centred in its cell. */
.lv-table { table-layout: fixed; width: 100%; }
.lv-table thead th.stick, .lv-table tbody th.stick { width: 34%; text-align: left; }
.lv-table th.lv-cell, .lv-table td.lv-cell { width: 11%; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; vertical-align: middle; }
.lv-table td.lv-cell .lv-check { margin: 0 auto; display: flex; }
.lv-table td.lv-cell.na { font-size: 0; }
.lv-table td.lv-cell.na::after { content: ''; display: block; width: 14px; height: 2px; margin: 0 auto; border-radius: 1px; background: #CBD1DD; }
.lv-table tr.pv-group th { text-align: left; }
.input.ro { display: flex; align-items: center; background: var(--soft); color: var(--text-2); font-weight: 700; }
.tb-pick.fixed select { cursor: default; opacity: 1; color: var(--text); background: transparent; -webkit-appearance: none; appearance: none; padding-right: 12px; }
.pick-first { max-width: 420px; display: flex; flex-direction: column; gap: 8px; }

/* 엑셀로 품목 넣기 (대표 10/2): a wide, desktop-only dialog. */
@media (max-width: 899px) { .desk-only { display: none !important; } }
.sheet.sheet-xl { max-width: none; width: min(1320px, 96vw); max-height: 94vh; padding: 0; gap: 0; overflow: hidden; }
.sheet-xl .xi-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 28px 18px; border-bottom: 1px solid var(--line); }
.sheet-xl .xi-head > div { flex: 1; min-width: 0; }
.sheet-xl .xi-head h2 { font-size: 20px; margin-bottom: 6px; }
.sheet-xl .xi-target { flex-shrink: 0; align-self: center; padding: 8px 14px; border-radius: 10px; background: var(--soft-blue); color: var(--link); font-size: 13px; font-weight: 700; }
.sheet-xl .xi-target b { color: var(--text); margin-left: 6px; font-size: 15px; }
.sheet-xl .xi-x { flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--soft); font-size: 22px; line-height: 1; color: var(--text-3); cursor: pointer; }
.sheet-xl .xi-x:hover { background: var(--line); color: var(--text); }
.sheet-xl .xi-body { flex: 1; overflow-y: auto; padding: 8px 28px 20px; }
.sheet-xl .xi-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.sheet-xl .xi-sec:last-child { border-bottom: 0; }
.sheet-xl .xi-sec h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 800; }
.sheet-xl .xi-sec h3 i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--btn); color: #fff; font-size: 12px; transform: translateY(-1px); }
.sheet-xl .xi-sec h3 small { font-size: 13px; font-weight: 500; color: var(--text-3); }
.sheet-xl .xi-src { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sheet-xl .xi-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 140px; padding: 18px; border: 2px dashed #CDD4E2; border-radius: 14px; background: #FAFBFD; text-align: center; transition: background .15s, border-color .15s; }
.sheet-xl .xi-drop:hover { border-color: var(--btn); }
.sheet-xl .xi-paste { display: flex; flex-direction: column; gap: 6px; }
.sheet-xl .xi-paste label { font-size: 13px; font-weight: 700; color: var(--text-2, var(--text)); }
.sheet-xl .xi-paste textarea { flex: 1; min-height: 112px; resize: vertical; font-size: 14px; }
.sheet-xl .xi-opts { display: flex; align-items: flex-end; gap: 24px; }
.sheet-xl .xi-opts .field { width: 220px; margin: 0; }
.sheet-xl .xi-opts .check { height: 44px; display: flex; align-items: center; gap: 8px; }
.sheet-xl .xi-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.sheet-xl .xi-map .field { margin: 0; }
.sheet-xl .xi-map label em { font-style: normal; font-size: 11px; font-weight: 700; color: #B42318; background: #FDECEC; padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.sheet-xl .xi-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.sheet-xl .xi-cat { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #FAFBFD; }
.sheet-xl .xi-cat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-xl .xi-cat span { color: var(--text-3); }
.sheet-xl .xi-pv { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.sheet-xl .xi-pv table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sheet-xl .xi-pv th { position: sticky; top: 0; z-index: 1; background: var(--soft); text-align: left; padding: 9px 12px; white-space: nowrap; font-weight: 700; }
.sheet-xl .xi-pv td { padding: 8px 12px; border-top: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.sheet-xl .xi-pv td.wrapc { white-space: normal; min-width: 260px; max-width: 420px; color: var(--text-2, var(--text)); }
.sheet-xl .xi-pv .r { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-xl .xi-pv tr.skip td { color: var(--text-3); background: #FFF7F7; text-decoration: line-through; }
.sheet-xl .xi-foot { display: flex; align-items: center; gap: 10px; padding: 14px 28px; border-top: 1px solid var(--line); background: #FAFBFD; }
.sheet-xl .xi-foot .xi-sum { flex: 1; font-size: 14px; color: var(--text-2, var(--text)); }
.sheet-xl .xi-foot .xi-sum b { color: var(--text); font-size: 16px; }
.sheet-xl .xi-foot .err:empty { display: none; }
.sheet-xl .xi-foot .btn { min-width: 120px; }
@media (max-width: 1100px) { .sheet-xl .xi-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet-xl .xi-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 품목 그리드 (대표 10/2): a long cell opens wide while typing; count beside the search; new row on top. */
.grid-table td:focus-within { position: relative; overflow: visible; }
#ig .grid-table input.gcell[data-k="spec"]:focus, #ig .grid-table input.gcell[data-k="origin"]:focus, #ig .grid-table input.gcell[data-k="name"]:focus {
  position: relative; z-index: 5; width: max(100%, 380px); background: #fff; box-shadow: 0 0 0 2px var(--btn), 0 8px 24px rgba(15, 20, 35, .18); border-radius: 6px; }
.grid-table tr.gnew td { background: #F5F8FF; border-bottom: 2px solid #D6E0F5; }
.icount { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.icount b { color: var(--text); font-size: 16px; }
/* 품목 그리드: fixed columns so a long 규격 never squeezes 분류·과세·사용 (대표 10/2). */
#ig .grid-table { table-layout: fixed; width: 100%; }
#ig .grid-table th.gact { width: 84px; }
#ig .grid-table td { overflow: hidden; }
#ig .grid-table td input.gcell, #ig .grid-table td select.gcell { width: 100%; text-overflow: ellipsis; }
#ig .grid-table td:focus-within { overflow: visible; }
#ig .grid-table td input.gcell[data-k]:focus:is([data-k="spec"],[data-k="name"],[data-k="origin"]) { position: relative; z-index: 5; width: max(100%, 420px); text-overflow: clip; background: #fff; box-shadow: 0 0 0 2px var(--btn), 0 8px 24px rgba(15, 20, 35, .18); border-radius: 6px; }
.sheet.sheet-wide { max-width: none; width: min(1000px, 96vw); }
.sheet.sheet-wide .rtable { width: 100%; }
.sheet.sheet-wide .rtable td, .sheet.sheet-wide .rtable th { white-space: nowrap; }
#ig { overflow-x: auto; }
#ig .grid-table { width: 100% !important; min-width: 1100px; }
#ig .grid-table th.gact { width: 64px; }
/* 품목 화면 (대표 10/2): one-line filter bar, light rows with 품목명·단가 bold, 규격 small in two lines. */
.ibar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: nowrap; min-width: 0; }
.ibar-date { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; flex-shrink: 0; }
.ibar-date small { font-size: 12px; color: var(--text-3); font-weight: 700; }
.ibar-date input { border: 0; background: transparent; font: inherit; font-size: 14px; width: 128px; }
.ibar-chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 4px; }
.ibar-chips .chip { flex-shrink: 0; height: 32px; padding: 0 12px; }
.ibar-chips .check { flex-shrink: 0; white-space: nowrap; margin-left: 4px; font-size: 13px; }
.ibar .icount { flex-shrink: 0; font-size: 13px; }
.ibar .icount b { font-size: 15px; }
.ibar #inew { flex-shrink: 0; }
.ibar .ibar-q { flex: 0 0 170px; height: 40px; }
#ig .gcell { font-weight: 400; font-size: 14px; }
#ig .gcell[data-k="name"], #ig .gcell[data-k="sell"] { font-weight: 700; }
#ig .grid-table td { font-weight: 400; }
#ig textarea.garea { display: block; height: 32px; margin: 5px 0; padding: 0 10px; font-size: 11px; line-height: 1.45; resize: none; overflow: hidden; white-space: normal; font-family: inherit; color: var(--text-2, var(--text)); }
#ig .grid-table td textarea.garea:focus { position: relative; z-index: 5; width: max(100%, 420px); height: 96px; overflow: auto; font-size: 13px; background: #fff; box-shadow: 0 0 0 2px var(--btn), 0 8px 24px rgba(15, 20, 35, .18); border-radius: 6px; }
.ibar .ibar-dbtn { flex-shrink: 0; height: 40px; }
.ibanner { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; background: #FFF6E5; color: #7A4B00; font-size: 14px; }
.ibanner b { color: #4A2E00; }
.ibanner .linkbtn { margin-left: auto; background: none; border: 0; color: var(--link); font-weight: 700; text-decoration: underline; cursor: pointer; font: inherit; }
/* 품목 조회 줄 두 줄 (대표 10/2): 기준일 + 분류 / 검색 + 버튼(오른쪽). */
.ibar2 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ibar-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ibar-row .ibar-chips { flex: 1; flex-wrap: wrap; overflow: visible; padding: 0; }
.ibar-row .ibar-q { flex: 0 0 260px; height: 40px; }
.ibar-row .icount { flex-shrink: 0; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.ibar-row .icount b { font-size: 15px; color: var(--text); }
.ibar-acts { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.ibar-acts .btn { height: 40px; }
/* 새 단가 적용 (대표 10/2) */
.sheet-xl .np-bar { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--line); }
.sheet-xl .np-bar .chips { flex: 1; }
.sheet-xl .np-body { padding: 0; }
.np-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.np-table th { position: sticky; top: 0; z-index: 1; background: var(--soft); padding: 10px 12px; text-align: left; font-weight: 700; white-space: nowrap; }
.np-table td { padding: 6px 12px; border-top: 1px solid var(--line); font-weight: 400; vertical-align: middle; }
.np-table td.b { font-weight: 700; white-space: nowrap; }
.np-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.np-table .c { text-align: center; width: 60px; }
.np-table td.np-spec { font-size: 11px; line-height: 1.45; color: var(--text-2, var(--text)); max-width: 420px; }
.np-table .np-in { width: 110px; height: 34px; padding: 0 10px; border: 1px solid #CDD4E2; border-radius: 8px; text-align: right; font: inherit; font-size: 14px; font-weight: 700; background: #F6FBF3; }
.np-table .np-in:focus { outline: 2px solid var(--btn); outline-offset: -1px; background: #fff; }
.np-table tr.np-ch td { background: #FFF8E6; }
.np-table tr.np-ch .np-in { border-color: #E0A100; background: #fff; color: #9A5B00; }
.np-table tr.np-off td { color: var(--text-3); text-decoration: line-through; }
.np-table tr.np-off .np-in { opacity: .4; }
#ig { margin-bottom: 14px; overflow: auto; } /* 대표 10/6: a box that fits the screen (height set in master.js), so the title row stays while rows scroll */
#ig::after { content: ''; display: block; height: 220px; } /* 대표 10/2 room under the new-item line (kept inside the scroll box) */
/* 새단가 일괄적용: sky-blue emphasis (대표 10/2) */
#inp.btn { background: #E0F2FE; color: #0369A1; box-shadow: 0 0 0 1px #7DD3FC; font-weight: 700; }
#inp.btn:hover { background: #BAE6FD; }
/* 일별 납품 관리 (대표 10/2) */
.dn { padding: 20px 28px 140px; }
@media (max-width: 899px) { .dn { padding: 14px 12px 140px; } }
.dn-bar { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.dn-f small { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; font-weight: 700; }
.dn-date { display: flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.dn-date button { width: 36px; height: 100%; border: 0; background: var(--btn); color: #fff; font-size: 20px; cursor: pointer; }
.dn-date input { border: 0; height: 100%; padding: 0 8px; font: inherit; font-size: 15px; font-weight: 700; color: #C0267A; width: 140px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.seg button { height: 38px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--btn); color: #fff; font-weight: 700; }
.dn-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dn-grid { overflow-x: auto; }
.dn-grid .grid-table { table-layout: fixed; min-width: 1000px; }
.dn-grid .grid-table th.gact { width: 48px; }
.dn-grid .grid-table td { font-weight: 400; }
.dn-grid .gcell[data-k="name"] { font-weight: 700; }
.dn-spec { font-size: 11px; line-height: 1.45; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2, var(--text)); }
.dn-cat { font-size: 12px; font-weight: 700; color: #1F7A3A; }
.dn-grid tr.dn-sum td { background: #3B3F6B; color: #fff; font-weight: 800; height: 44px; text-align: center; }
.dn-grid tr.dn-sum td.r { text-align: right; padding-right: 12px; font-size: 16px; }
.dn-hint { margin: 8px 2px 0; font-size: 13px; color: var(--text-3); }
.dn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; }
.dn-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dn-card b { font-size: 15px; color: var(--text-3); }
.dn-card div { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.dn-card span { font-size: 18px; font-weight: 800; color: #1F7A3A; }
.dn-card strong { font-size: 18px; color: #8A3FA8; }
.gpop button { display: grid !important; grid-template-columns: 1fr auto 70px; gap: 14px; align-items: center; }
.gpop .dn-pop-c { font-size: 12px; color: var(--text-3); text-align: right; }
/* 일별 납품: 분류 합계 한 줄 + 총합계, 화면 맨 아래 고정 (대표 10/2) */
.dn-foot { position: sticky; bottom: 0; z-index: 20; margin-top: 16px; padding: 10px 0 12px; background: var(--bg); box-shadow: 0 -8px 16px -12px rgba(15, 20, 35, .25); }
.dn-foot .dn-cards { display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; grid-template-columns: none; }
.dn-foot .dn-card { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 10px; }
.dn-foot .dn-card b { font-size: 13px; }
.dn-foot .dn-card span { font-size: 14px; }
.dn-foot .dn-card strong { font-size: 15px; }
.dn-foot .dn-card.zero { opacity: .55; }
.dn-foot .total-bar { position: static; margin: 0; }
.dn { padding-bottom: 24px !important; }
.dn-grid td .dn-spec { margin-top: 2px; }
.dn { display: flex; flex-direction: column; min-height: calc(100vh - 96px); }
.dn > .dn-foot { margin-top: auto; }
.gpop .dn-pop-n { min-width: 0; }
.gpop .dn-pop-s { display: block; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.dn-grid .grid-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpop { min-width: 420px !important; }
/* 분류별 합계 글자 키움 (대표 10/2) */
.dn-foot .dn-card { padding: 10px 18px; gap: 14px; }
.dn-foot .dn-card b { font-size: 16px; }
.dn-foot .dn-card span { font-size: 18px; }
.dn-foot .dn-card strong { font-size: 20px; }
/* 분류 색 (대표 10/2) */
#ichips .chip[style*="--cc"] { color: var(--cc); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 35%, transparent), 0 1px 2px rgba(20, 28, 48, .08); }
#ichips .chip.on[style*="--cc"] { background: var(--cc); color: #fff; }
.seg button[style*="--cc"] { color: var(--cc); font-weight: 700; }
.seg button.on[style*="--cc"] { background: var(--cc); color: #fff; }
.dn-foot .dn-card[style*="--cc"] { border-left: 5px solid var(--cc); }
.dn-foot .dn-card[style*="--cc"] b { color: var(--cc); }
.dn-cat { font-weight: 800; }
.gpop .dn-pop-c { font-weight: 700; }
/* 거래명세표 출력: 긴 규격은 줄바꿈해서 표가 종이 폭을 넘지 않게 (대표 10/2) */
.print-table { width: 100%; table-layout: fixed; }
.print-table th, .print-table td { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.print-table thead th:nth-child(1) { width: 15%; }
.print-table thead th:nth-child(3) { width: 8%; }
.print-table thead th:nth-child(4) { width: 6%; }
.print-table thead th:nth-child(5) { width: 7%; }
.print-table tbody td:nth-child(2) { font-size: 11px; line-height: 1.4; color: #444; }.print-table thead th:nth-child(2) { width: 32%; }
.print-table thead th:nth-child(n+6) { width: 8%; }
.print-table thead th:nth-child(1) { width: 14%; }
.ps-req { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--soft-blue); }
.ps-req > div { flex: 1; }

/* 거래명세표 엑셀 출력양식 모달 (대표 10/3) */
.dn-print { display: flex; gap: 8px; align-items: center; }
.total-bar .dn-print button.ghosty { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
/* 납품 대기 → 납품 완료 (대표 10/7): the state and its button sit in the always-visible total bar */
.dn-state { display: flex; align-items: center; gap: 8px; margin-right: 6px; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.35); }
.dn-state:empty { display: none; }
.total-bar .dn-state .badge { background: rgba(255,255,255,.18); color: #fff; font-weight: 800; }
.total-bar .dn-state .badge.ok { background: #1FA971; color: #fff; }
.total-bar .dn-state button { min-height: 50px; padding: 0 18px; font-size: inherit; }
.total-bar .dn-state #confirm { background: #FF9F1A; color: #1B2540; font-weight: 800; box-shadow: none; }
.total-bar .dn-state #reopen { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.nf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; padding: 8px 0 4px; }
.nf-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 14px 18px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.nf-card:hover { border-color: #93B4F0; }
.nf-card.on { border-color: var(--btn); box-shadow: 0 0 0 3px rgba(30, 64, 175, .15); }
.nf-name { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.nf-card.on .nf-name { background: var(--btn); color: #fff; border-color: var(--btn); }
.nf-check { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; color: var(--btn); }
.nf-sheet { position: relative; width: 100%; font-family: '굴림', Gulim, sans-serif; font-size: 7px; color: #222; }
.nf-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nf-sheet td { border: 1px solid #888; padding: 1px 2px; height: 11px; text-align: center; white-space: nowrap; overflow: hidden; }
.nf-sheet .nf-title { font-size: 13px; height: 20px; letter-spacing: 2px; }
.nf-sheet tr.g td, .nf-sheet td.g { background: #D9D9D9; font-weight: 700; }
.nf-sheet td.v { writing-mode: vertical-rl; letter-spacing: 1px; }
.nf-sheet .nf-body { margin-top: -1px; }
.nf-sheet .nf-body tr.h td { background: #F2F2F2; }
.nf-sheet .nf-body td:first-child { width: 7%; }
.nf-sheet .nf-body td.nf-wide { width: 30%; }
.nf-sheet td.nf-mark { box-shadow: inset 2px 0 0 #E11D1D, inset -2px 0 0 #E11D1D; }
.nf-page { position: absolute; left: 0; right: 0; top: 62%; text-align: center; font-size: 22px; color: rgba(0,0,0,.18); pointer-events: none; }
/* 명세표 출력 설정: 규칙 상자 (대표 10/3) */
.nf-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.nf-rule { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fff; }
.nf-rule h3 { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 16px; color: #0B1F8F; }
.nf-rule small { display: block; color: var(--muted, #667085); margin-bottom: 6px; }
.nf-seg { display: inline-flex; border: 1px solid #C9CED6; border-radius: 4px; overflow: hidden; }
.nf-seg button { border: 0; border-left: 1px solid #C9CED6; background: #fff; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.nf-seg button:first-child { border-left: 0; }
.nf-seg button.on { background: #2270B5; color: #fff; }
.nf-rule.nf-wide-rule { grid-column: 1 / -1; }
.nf-rule .tags { margin-top: 4px; }
/* 월별 명세 — 일일 합계표 (대표 10/3, 상이군경회 화면) */
.rp { padding: 20px 28px 0; display: block; }
@media (max-width: 899px) { .rp { padding: 14px 12px 0; } }
/* 대표 10/3: same navy family as the sidebar and 합계 bar; numbers quiet, totals strong. */
.rp-xl { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px; border: 0; border-radius: 10px; background: var(--btn); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(24, 58, 147, .22); }
.rp-xl svg { color: #6EE7B7; }
.rp-xl:hover { background: var(--btn-hover); }
.rp-xl:disabled { opacity: .6; cursor: default; }
/* One scroll box: header row frozen on top, 품목명·단위·단가 frozen on the left, its scrollbars at its own bottom. */
.rp-scroll { overflow: auto; padding: 0; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(20, 28, 48, .06); }
.rp-daily { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.rp-daily th, .rp-daily td { height: 38px; padding: 0 8px; border-right: 1px solid #EDF0F5; border-bottom: 1px solid #EDF0F5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
.rp-daily tbody tr:nth-child(even) > * { background: #FAFBFD; }
.rp-daily tbody tr:hover > * { background: var(--soft-blue); }
.rp-daily thead th { position: sticky; top: 0; z-index: 2; height: 42px; background: var(--nav); color: #E6ECF8; font-size: 12.5px; font-weight: 700; text-align: center; letter-spacing: .02em; border-right-color: rgba(255, 255, 255, .08); border-bottom: 0; }
.rp-daily thead th.sat { color: #9EC5FF; }
.rp-daily thead th.sun { color: #FFADB5; }
.rp-daily .s1, .rp-daily .s2, .rp-daily .s3 { position: sticky; z-index: 1; }
.rp-daily .s1 { left: 0; }
.rp-daily .s2 { left: 150px; }
.rp-daily .s3 { left: 206px; box-shadow: 6px 0 8px -6px rgba(20, 28, 48, .18); }
.rp-daily thead .s1, .rp-daily thead .s2, .rp-daily thead .s3 { z-index: 4; }
.rp-daily tfoot > tr > * { height: 42px; background: #EEF2FA; color: var(--text); font-weight: 700; border-top: 1px solid #D5DCEA; }
.rp-daily tfoot .s1, .rp-daily tfoot .s2, .rp-daily tfoot .s3 { z-index: 2; }
.rp-daily th.nm { text-align: left; font-weight: 700; color: var(--text); padding-left: 14px; }
.rp-daily thead th.nm { text-align: center; padding-left: 8px; color: #E6ECF8; }
.rp-daily td.d { text-align: right; color: var(--text); }
.rp-daily td.c { text-align: center; }
.rp-daily td.r { text-align: right; }
.rp-daily td.neg { color: #B42318; }
.rp-daily .rp-q { color: var(--btn); font-weight: 700; }
.rp-daily .rp-a { color: var(--text); font-weight: 800; }
.rp-daily tfoot .rp-a { color: var(--btn); }
.rp-daily .rp-cat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, transparent); }
/* 월말 합계표 (대표 10/3) */
.rp-sum { width: 100%; min-width: 640px; font-size: 14px; }
.rp-sum th, .rp-sum td { height: 46px; padding: 0 18px; }
.rp-sum thead th { text-align: right; }
.rp-sum thead th:first-child { text-align: left; padding-left: 20px; }
.rp-sum th.nm { padding-left: 20px; }
.rp-sum th.nm small { color: var(--text-3); font-weight: 600; margin-left: 2px; }
.rp-sum th.nm.sat, .rp-sum th.nm.sat small { color: #1D5FD1; }
.rp-sum th.nm.sun, .rp-sum th.nm.sun small { color: #C8323F; }
.rp-sum .rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cc); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.rp-sum thead th.rp-tot { background: var(--btn); color: #fff; }
.rp-sum tbody td.rp-tot { background: #F2F5FC; }
.rp-sum tbody tr:nth-child(even) td.rp-tot { background: #ECF0FA; }
.rp-sum tbody tr:hover > * { background: var(--soft-blue); }
.rp-sum .rp-nil { color: #C3C9D5; }
.rp-sum tfoot > tr > * { height: 50px; background: #E8EDF8; font-size: 15px; border-top: 2px solid var(--btn); }
.rp-sum tfoot td.rp-tot { background: var(--btn); color: #fff; }
.rp-link { color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; cursor: pointer; }
.rp-link:hover { color: var(--btn); border-bottom-color: currentColor; }
.rp-sum tfoot .rp-link:hover, .rp-sum thead .rp-link:hover { color: #fff; }
.rp-items thead th.c { text-align: center; }
.rp-items tfoot th.nm small { font-weight: 600; color: var(--text-3); margin-left: 6px; }

/* 납품처 매출 통계 (대표 10/3) */
.st-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 12px; }
.st-range .input { width: 170px; height: 38px; }
.st-box { max-height: 62vh; }
.st-chart { margin-top: 16px; padding: 16px 18px 10px; border-radius: 14px; }
.st-chart-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.st-chart-head b { font-size: 15px; color: var(--text); }
.st-chart-scroll { overflow-x: auto; }
.st-chart svg { display: block; min-width: 100%; font-size: 11px; font-variant-numeric: tabular-nums; }
.st-chart svg text { fill: #6B7385; }
.st-chart svg .g { stroke: #EDF0F5; }
.st-chart svg .b rect { fill: var(--btn); opacity: .85; }
.st-chart svg .b rect:hover { opacity: 1; }
.st-chart svg .l { fill: none; stroke: #F08A24; stroke-width: 2.2; }
.st-chart svg .p { fill: #fff; stroke: #F08A24; stroke-width: 2; }/* 매입처 관리 (대표 10/3) */
.sp-grid { overflow-x: visible; }
.sp-grid .grid-table { min-width: 0; width: 100%; table-layout: fixed; } /* 대표 10/3: fits the screen, no side scroll */
.sp-grid .grid-table td, .sp-grid .grid-table th { overflow: hidden; text-overflow: ellipsis; }
.sp-grid .gcell { padding: 0 8px; font-size: 14px; text-overflow: ellipsis; }
.sp-grid .gcell[data-k="name"] { font-weight: 700; color: var(--btn); }
.sp-grid .gcell[data-k="bank_account"] { font-weight: 600; }
.sp-grid tr.pt-daily select.gcell { color: #1D5FD1; font-weight: 700; }
.sp-grid tr.pt-weekly select.gcell { color: #0E8A6A; font-weight: 700; }
.sp-grid tr.pt-month_end select.gcell { color: #C8323F; font-weight: 700; }
.sp-grid tr.pt-mixed select.gcell { color: #8A3FC2; font-weight: 700; }
/* 일단위 결제 매입 (대표 10/3) */
.pb-page .dn-f { position: relative; }
.pb-week .pb-range { border: 0; background: #fff; height: 100%; padding: 0 14px; font: inherit; font-size: 15px; font-weight: 700; color: #C0267A; cursor: pointer; white-space: nowrap; }
.pb-week .pb-range:hover { background: var(--soft-blue); }
.pb-cal { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 6px; width: 300px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 28, 48, .18); }
.pb-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pb-cal-h button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--soft); font-size: 18px; cursor: pointer; }
.pb-cal-g, .pb-cal-w { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.pb-cal-g span { font-size: 12px; font-weight: 700; color: var(--text-3); padding: 4px 0; }
.pb-cal-w { width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 7px 0; font: inherit; font-size: 13.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
.pb-cal-w:hover { background: var(--soft-blue); }
.pb-cal-w.on { background: var(--btn); color: #fff; }
.pb-cal-w span.out { opacity: .4; }
.pb-cal .sat { color: #1D5FD1; } .pb-cal .sun { color: #C8323F; }
.pb-cal-w.on span { color: #fff; }
.pb-cal-f { text-align: right; margin-top: 6px; }
.pb-cal-f button { border: 0; background: none; color: var(--link); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pb-wrap { overflow-x: auto; padding: 0; border-radius: 14px; }
table.pb { width: 100%; min-width: 1100px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); }
table.pb th, table.pb td { height: 42px; padding: 0 8px; border-right: 1px solid #EDF0F5; border-bottom: 1px solid #EDF0F5; white-space: nowrap; background: #fff; }
table.pb thead th { height: 44px; background: var(--nav); color: #E6ECF8; font-weight: 700; text-align: center; border-right-color: rgba(255, 255, 255, .08); border-bottom: 0; position: sticky; top: 0; z-index: 2; }
table.pb thead th small { font-weight: 600; opacity: .85; }
table.pb thead th.sat { color: #9EC5FF; } table.pb thead th.sun { color: #FFADB5; }
table.pb thead th.pb-sub { background: var(--btn); }
table.pb thead th.pb-week-t { background: #3F5FC4; }
table.pb tbody tr:nth-child(even) > * { background: #FAFBFD; }
table.pb tbody tr:hover > * { background: var(--soft-blue); }
table.pb .pb-no { width: 44px; text-align: center; color: var(--text-3); }
table.pb .pb-name { width: 120px; text-align: left; font-weight: 700; }
table.pb thead .pb-name { text-align: center; }
table.pb td.pb-c { text-align: right; padding: 0; }
table.pb td.pb-c.lock { padding: 0 10px; color: var(--text-2); }
table.pb td.pb-c.neg, table.pb td.pb-c.neg .pb-in { color: #B42318; }
.pb-in { width: 100%; height: 40px; border: 0; background: transparent; padding: 0 10px; text-align: right; font: inherit; color: inherit; }
.pb-in:focus { outline: 2px solid var(--btn); outline-offset: -2px; background: #fff; border-radius: 4px; }
table.pb td.pb-s { text-align: right; background: #F4F6FB; white-space: nowrap; }
table.pb tbody tr:nth-child(even) td.pb-s { background: #EFF2F9; }
table.pb td.pb-s b { color: var(--btn); margin-right: 6px; }
.pb-st { height: 26px; padding: 0 9px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid transparent; vertical-align: middle; }
.pb-st.unpaid { color: #C8323F; background: #FFF4F5; border-color: #F5B7BE; }
.pb-st.unpaid:hover { background: #C8323F; color: #fff; }
.pb-st.cash { color: #0E7A55; background: #E4F6EE; border-color: #A9DFC6; }
.pb-st.card { color: var(--btn); background: #E8EEFC; border-color: #B7C6F2; }
.pb-st.cash:hover, .pb-st.card:hover { filter: brightness(.95); }
.pb-st:disabled { cursor: default; }
table.pb td.pb-week-t { text-align: right; font-weight: 800; background: #F2F5FC; }
table.pb .pb-del { width: 56px; text-align: center; }
.pb-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #8A93A6; font-size: 18px; cursor: pointer; }
.pb-x:hover { background: #FFF0F1; color: #C8323F; }
table.pb tfoot tr:first-child > * { background: var(--nav); color: #fff; font-weight: 800; height: 46px; }
table.pb tfoot tr:first-child td.pb-s, table.pb tfoot tr:first-child td.pb-week-t { background: var(--btn); }
table.pb tfoot tr:first-child td.pb-s b { color: #FFE08A; margin: 0; }
table.pb tfoot tr:first-child td.pb-week-t { color: #FFE08A; }
table.pb tr.pb-addrow > * { background: #F7F9FD; }
table.pb .pb-add { height: 36px; max-width: 420px; }
.pb-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-pay .btn { height: 52px; font-size: 16px; }
.pb-pay [data-m="cash"] { background: #0E7A55; }
/* 일단위 결제 매입 — 미납 누적·자유 결제 (대표 10/3) */
.pb-page .dn-bar { align-items: center; }
.pb-sum { display: flex; gap: 10px; align-self: flex-end; }
.pb-sum span { padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.pb-sum b { margin-left: 4px; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.pb-sum .due { border-color: #F5B7BE; background: #FFF6F7; } .pb-sum .due b { color: #C8323F; }
.pb-sum .ok b { color: #0E7A55; }
table.pb .pb-c.paid { padding: 0 6px 0 8px; }
table.pb .pb-c.paid.cash { background: #EEF9F3 !important; }
table.pb .pb-c.paid.card { background: #EEF2FD !important; }
table.pb .pb-c.paid .pb-v { color: var(--text-2); }
.pb-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 800; border: 0; cursor: pointer; vertical-align: 1px; }
.pb-tag.cash { background: #CDEEDD; color: #0E6B4B; } .pb-tag.card { background: #D6E0FA; color: #1E3E9C; }
.pb-tag:hover { box-shadow: 0 0 0 2px currentColor; }
.pb-tag:disabled { cursor: default; box-shadow: none; }
table.pb th.pb-due, table.pb td.pb-due { width: 130px; text-align: center; }
table.pb thead th.pb-due { background: #8A2433; }
table.pb td.pb-due b { color: #C8323F; font-weight: 800; }
table.pb td.pb-due small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.1; }
table.pb .pb-done { color: #0E7A55; font-weight: 700; font-size: 12px; }
table.pb th.pb-act, table.pb td.pb-act { width: 112px; text-align: center; }
table.pb thead th.pb-act { background: #8A2433; }
.pb-pay-b { height: 28px; padding: 0 10px; margin: 0 2px; border-radius: 8px; border: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: #fff; cursor: pointer; }
.pb-pay-b.cash { background: #0E7A55; } .pb-pay-b.card { background: var(--btn); }
.pb-pay-b:hover { filter: brightness(1.1); }
table.pb tr.has-due th.pb-name { box-shadow: inset 3px 0 0 #E35D6A; }
table.pb tfoot tr:first-child td.pb-due { background: #8A2433; color: #fff; } table.pb tfoot td.pb-due b { color: #fff; }
.pb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.pb-legend .pb-tag { cursor: default; margin: 0 4px 0 0; }
.pb-confirm { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--soft); margin: 6px 0 10px; }
.pb-confirm div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pb-confirm small { color: var(--text-3); }
.pb-confirm .amt { font-size: 20px; color: #C8323F; }
.pb-go.cash { background: #0E7A55; } .pb-go.card { background: var(--btn); }
/* 주 선택: the range text never squeezes (대표 10/3) */
.pb-page .dn-f { flex: 0 0 auto; }
.pb-week { width: auto; }
.pb-week .pb-range { flex: 0 0 auto; min-width: 236px; text-align: center; }
.pb-week > button:not(.pb-range) { flex: 0 0 36px; }
/* 미납 누적·결제 next to 거래처: a line before the days (대표 10/3) */
table.pb td.pb-act, table.pb th.pb-act { border-right: 2px solid #D5DCEA; }
table.pb thead th.pb-act { border-right-color: rgba(255, 255, 255, .35); }
/* 미납 누적 line inside the latest unpaid day (대표 10/3) */
table.pb td.pb-c.has-dl { vertical-align: top; background: #FFF7F8 !important; box-shadow: inset 0 0 0 1px #F5C3C9; }
table.pb td.pb-c.has-dl .pb-in, table.pb td.pb-c.has-dl .pb-v0 { height: 34px; }
table.pb td.pb-c.has-dl .pb-v0 { line-height: 34px; padding: 0 10px; }
.pb-dl { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 0 8px 7px; }
.pb-dl-a { font-size: 12px; color: #8A2433; white-space: nowrap; }
.pb-dl-a b { font-size: 13px; color: #C8323F; font-weight: 800; margin-left: 2px; }
.pb-dl-b { display: flex; gap: 4px; }
.pb-dl .pb-pay-b { height: 24px; padding: 0 9px; margin: 0; font-size: 12px; border-radius: 6px; }
table.pb td.pb-c { min-width: 108px; }
/* 결제한 날 line (대표 10/3) */
table.pb td.pb-c.has-pl { vertical-align: top; }
table.pb td.pb-c.has-pl .pb-in, table.pb td.pb-c.has-pl .pb-v0 { height: 34px; }
table.pb td.pb-c.has-pl .pb-v0 { line-height: 34px; padding: 0 10px; text-align: right; }
.pb-pl { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border: 0; border-radius: 6px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pb-pl b { font-size: 12.5px; }
.pb-pl.cash { background: #0E7A55; color: #fff; } .pb-pl.card { background: var(--btn); color: #fff; }
.pb-pl:hover { filter: brightness(1.12); }
.pb-pl:disabled { cursor: default; filter: none; }
.pb-dl { padding-bottom: 7px; }
/* 매입 화면 설정 (대표 10/3) */
.pb-set { display: inline-flex; align-items: center; gap: 6px; }
.pb-ws { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.pb-ws button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
.pb-ws button b { font-size: 16px; }
.pb-ws button small { color: var(--text-3); }
.pb-ws button.on { border-color: var(--btn); background: var(--soft-blue); }
.pb-ws button.on b { color: var(--btn); }
table.pb thead th.pb-no { color: #E6ECF8; }
/* [미납] / [현금] / [카드] badges — two lines per cell (대표 10/3) */
.pb-dl { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 8px 7px; }
.pb-badge { height: 24px; padding: 0 9px; border-radius: 6px; border: 0; font: inherit; font-size: 12px; font-weight: 800; color: #fff; cursor: pointer; white-space: nowrap; }
.pb-badge.due { background: #D23B49; }
.pb-badge.cash { background: #0E7A55; }
.pb-badge.card { background: var(--btn); }
.pb-badge:hover { filter: brightness(1.12); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.pb-badge:disabled { cursor: default; filter: none; box-shadow: none; }
.pb-dl-n { font-size: 13px; font-weight: 800; white-space: nowrap; }
.pb-dl-n.due { color: #C8323F; } .pb-dl-n.cash { color: #0E7A55; } .pb-dl-n.card { color: var(--btn); }
/* every amount on the first line; the second line only for 미납/결제 (대표 10/3) */
table.pb tbody td, table.pb tbody th { vertical-align: top; }
table.pb tbody .pb-no, table.pb tbody .pb-name, table.pb tbody .pb-week-t, table.pb tbody .pb-del { line-height: 40px; }
table.pb tbody .pb-del .pb-x { margin-top: 5px; }
table.pb td.pb-c .pb-in, table.pb td.pb-c .pb-v0 { height: 40px; }
table.pb td.pb-c .pb-v0 { line-height: 40px; padding: 0 10px; text-align: right; }
table.pb td.pb-c.lock { padding: 0; }
table.pb td.pb-c.paid { padding: 0; }
table.pb td.pb-c.has-dl .pb-in, table.pb td.pb-c.has-dl .pb-v0, table.pb td.pb-c.has-pl .pb-in, table.pb td.pb-c.has-pl .pb-v0 { height: 40px; line-height: 40px; }
.pb-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 3px; vertical-align: -2px; }
.pb-sw.cash { background: #DDF3E8; border: 1px solid #A9DFC6; } .pb-sw.card { background: #E3E9FB; border: 1px solid #B7C6F2; }
.pb-bank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 12px; border-radius: 12px; border: 1px dashed #B7C6F2; background: #F6F8FE; }
.pb-bank small { color: var(--text-3); }
.pb-bank b { font-size: 15px; color: var(--text); user-select: all; }
.pb-bank .btn { margin-left: auto; }
/* 월단위 결제 매입 (대표 10/3): calendar, board, 월 정산 cards */
.pm-sec { margin: 22px 0 8px; font-size: 16px; }
.pm-sec small { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 8px; }
.mc-wrap { padding: 0; overflow: hidden; border-radius: 14px; margin-bottom: 4px; }
.mc-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mc-h { padding: 9px 0; text-align: center; font-size: 13px; font-weight: 700; background: var(--nav); color: #E6ECF8; }
.mc-h.sat { color: #9EC5FF; } .mc-h.sun { color: #FFADB5; }
.mc-d { display: flex; flex-direction: column; gap: 3px; min-height: 96px; padding: 6px 7px 8px; border: 0; border-right: 1px solid #EDF0F5; border-bottom: 1px solid #EDF0F5; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.mc-d.off { background: #F7F8FB; cursor: default; }
.mc-d:hover:not(.off) { background: var(--soft-blue); }
.mc-d.wk { background: #F4F7FF; box-shadow: inset 0 3px 0 var(--btn); }
.mc-d.td .mc-n { background: var(--btn); color: #fff; border-radius: 999px; padding: 0 7px; }
.mc-n { align-self: flex-start; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.mc-n.sat { color: #1D5FD1; } .mc-n.sun { color: #C8323F; }
.mc-e { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; line-height: 1.35; padding: 2px 5px; border-radius: 5px; background: #EEF2FA; }
.mc-e i { font-style: normal; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-e b { color: var(--btn); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-s { align-self: flex-end; font-size: 11.5px; font-weight: 800; color: var(--text); margin-top: 1px; }
.mk-wrap { margin-top: 22px; }
.mk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mk-head b { font-size: 16px; margin-right: 12px; }
.mk-head span { font-size: 13.5px; color: var(--text-3); }
.mk-head em { font-style: normal; font-weight: 800; color: #0E7A55; } .mk-head em.due { color: #C8323F; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mk-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(20, 28, 48, .05); }
.mk-card.due { border-color: #F5C3C9; }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-top b { font-size: 16px; color: var(--btn); }
.mk-amt { display: flex; align-items: baseline; gap: 6px; }
.mk-amt span { font-size: 12px; color: var(--text-3); }
.mk-amt b { font-size: 19px; font-variant-numeric: tabular-nums; }
.mk-amt small { color: var(--text-3); }
.mk-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
button.mk-row { border: 0; background: #F1F8F4; border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 13px; cursor: pointer; }
button.mk-row:hover { background: #E2F2E9; }
.mk-row.pay b { color: #0E7A55; }
.mk-row.due { padding-top: 6px; border-top: 1px dashed var(--line); font-weight: 700; }
.mk-row.due b { color: #C8323F; font-size: 15px; }
.mk-card:not(.due) .mk-row.due b { color: #0E7A55; }
.mk-acc { font-size: 12px; color: var(--text-3); background: var(--soft); border-radius: 6px; padding: 4px 8px; }
.mk-undo { display: grid; gap: 8px; margin: 10px 0; }
.mk-undo > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft); }
@media (max-width: 899px) { .mc-d { min-height: 70px; padding: 4px; } .mc-e i { display: none; } }
/* range text centered vertically (span or button) */
.pb-week .pb-range { display: inline-flex; align-items: center; justify-content: center; height: 100%; }
/* 매입처별 통계 (대표 10/3) */
.ps-box { overflow: visible; }
table.ps { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
table.ps th, table.ps td { height: 38px; padding: 0 8px; border-right: 1px solid #EDF0F5; border-bottom: 1px solid #EDF0F5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; text-align: right; }
table.ps thead th { position: sticky; z-index: 2; background: var(--nav); color: #E6ECF8; text-align: center; font-weight: 700; border-right-color: rgba(255, 255, 255, .08); }
table.ps thead tr:first-child th { top: 0; height: 34px; }
table.ps thead tr:nth-child(2) th { top: 34px; font-size: 12.5px; }
table.ps thead th.ps-g.cash { background: #1E4FA8; } table.ps thead th.ps-g.month_end { background: #7A3B8F; }
table.ps thead th.ps-n.month_end { background: #5E2E6F; }
table.ps .ps-s { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 700; box-shadow: 4px 0 6px -4px rgba(20, 28, 48, .18); }
table.ps thead .ps-s, table.ps thead .ps-t { z-index: 3; top: 0; }
table.ps thead th.ps-s { text-align: center; }
table.ps .ps-s small { font-weight: 500; color: var(--text-3); }
table.ps .ps-s .sat, table.ps .ps-s .sat small { color: #1D5FD1; } table.ps .ps-s .sun, table.ps .ps-s .sun small { color: #C8323F; }
table.ps td.ps-t { font-weight: 800; background: #F2F5FC; color: var(--btn); }
table.ps thead th.ps-t { background: var(--btn); }
table.ps tbody tr:nth-child(even) > * { background: #FAFBFD; }
table.ps tbody tr:nth-child(even) td.ps-t { background: #ECF0FA; }
table.ps tbody tr:hover > * { background: var(--soft-blue); }
table.ps tfoot > tr > * { background: #EEF2FA; font-weight: 800; border-top: 2px solid var(--btn); }
table.ps tfoot td.ps-t { background: var(--btn); color: #fff; }
.ps-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.ps-card { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--btn); }
.ps-card.month_end { border-left-color: #7A3B8F; } .ps-card.all { border-left-color: #0E7A55; background: #F4FBF7; }
.ps-card small { color: var(--text-3); font-weight: 700; }
.ps-card div { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ps-card span { color: var(--text-3); font-size: 13px; }
.ps-card b { font-size: 18px; font-variant-numeric: tabular-nums; }
/* 칸은 글자로, 누르면 입력칸 (대표 10/3) */
.gtext { display: block; height: 42px; line-height: 42px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; border-radius: 4px; }
.gtext.r { text-align: right; }
.gtext:hover { background: #F2F6FF; box-shadow: inset 0 0 0 1px #D5DEF3; }
.gtext:focus { outline: 2px solid var(--btn); outline-offset: -2px; }
.gtext.gtext2 { white-space: normal; line-height: 1.3; font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-top: 6px; height: 42px; }
.grid-table td.glz { padding: 0; }
/* 지출 내역 (대표 10/3) */
.ex-cat { height: 40px; min-width: 160px; }
.ex-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .ex-wrap { grid-template-columns: 1fr; } }
.ex-grid .grid-table { min-width: 760px; }
.ex-cum { color: var(--btn); }
.ex-side { display: grid; gap: 16px; position: sticky; top: 12px; }
.ex-box { padding: 14px 16px; border-radius: 14px; }
.ex-box h3 { margin: 0 0 10px; font-size: 15px; color: var(--text); }
.ex-box h3 small { color: var(--text-3); font-weight: 600; margin-left: 4px; }
table.ex-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.ex-t th, table.ex-t td { padding: 7px 6px; border-bottom: 1px solid #EDF0F5; text-align: left; font-weight: 600; }
table.ex-t thead th { font-size: 12px; color: var(--text-3); background: var(--soft); }
table.ex-t td.r, table.ex-t th.r { text-align: right; }
table.ex-t td.no { color: var(--text-3); width: 28px; }
table.ex-t td.b { font-weight: 800; }
table.ex-t th.sat { color: #1D5FD1; } table.ex-t th.sun { color: #C8323F; }
table.ex-t tfoot > tr > * { background: #EEF2FA; font-weight: 800; border-top: 2px solid var(--btn); }
table.ex-t .ex-box-max { max-height: 50vh; }
#ex-days { max-height: 52vh; overflow: auto; }
/* 종합 손익 통계 (대표 10/4) */
table.pf td.pf-sum { font-weight: 800; background: #FFFBEA; }
table.pf tbody tr:nth-child(even) td.pf-sum { background: #FBF5DC; }
table.pf td.ps-t.pf-neg { color: #C8323F; }
table.pf thead th.ps-n:not(.month_end):not(.buy) { background: #234A93; }
table.pf thead th.ps-g.buy { background: #13906A; } table.pf thead th.ps-n.buy { background: #0E6E51; }
.pf-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: middle; }
.pf-key.line { height: 3px; border-radius: 2px; background: #E0662A; }
/* 미수금 관리 (대표 10/4) */
.rc-cards { margin: 0 0 12px; }
.ps-card.bad { border-left-color: #C8323F; background: #FFF5F5; } .ps-card.bad b { color: #C8323F; }
.rc-box { padding: 14px 16px; margin-bottom: 14px; }
.rc-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.rc-h small { color: var(--text-3); font-weight: 600; }
.rc-h .btn { margin-left: auto; }
table.rc-t { font-size: 14px; }
table.rc-t td.due { color: #C8323F; }
.rc-name { padding: 0; border: none; background: none; font: inherit; font-weight: 800; color: var(--btn); cursor: pointer; text-align: left; }
.rc-name:hover { text-decoration: underline; }
.rc-age { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; font-size: 12px; font-weight: 700; background: #EEF2FA; color: var(--text-2); }
.rc-age.warn { background: #FFF1DE; color: #B4650C; } .rc-age.bad { background: #FDE7E9; color: #C8323F; }
.rc-led { max-height: 60vh; overflow: auto; margin: 10px 0 14px; }
.rc-led tr.rc-in td, .rc-led tr.rc-in th { background: #F2FAF6; }
.rc-led small { color: var(--text-3); }
/* footer (대표 10/4) */
.site-foot { padding: 14px 28px 18px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; text-align: right; }
.site-foot a { color: var(--btn); font-weight: 700; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.auth .site-foot { border-top: none; margin-top: 24px; padding: 0; text-align: center; }
.auth { flex-direction: column; align-items: center; justify-content: flex-start; }
@media (max-width: 899px) { .layout .site-foot { padding-bottom: 88px; } }
@media print { .site-foot { display: none; } }
/* 발주·피킹 관리 (대표 10/4) */
.pk-day { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pk-day input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pk-prog { display: flex; align-items: center; gap: 18px; padding: 12px 16px; margin-bottom: 12px; }
.pk-prog > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.pk-bar { flex: 1; height: 10px; border-radius: 5px; background: #E7ECF5; overflow: hidden; }
.pk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2F6FD8, #13906A); border-radius: 5px; transition: width .2s; }
table.pk td, table.pk th { text-align: right; }
table.pk th.pk-name { text-align: left; } table.pk th.pk-name small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
table.pk td.c { text-align: center; } table.pk td.pk-tot { font-weight: 800; color: var(--btn); background: #F2F5FC; }
table.pk td.pk-memo { text-align: left; color: var(--text-3); font-size: 12px; }
table.pk tr.pk-cat th { position: static; text-align: left; background: #EEF2FA; color: var(--text-2); font-size: 12px; font-weight: 800; height: 28px; }
table.pk tr.pk-done > * { color: var(--text-3); background: #F6F8FB; } table.pk tr.pk-done th.pk-name { text-decoration: line-through; }
.pk-chk { min-width: 64px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1.5px solid #B9C4D8; background: #fff; color: var(--text-2); font-weight: 700; cursor: pointer; }
.pk-chk.on { border-color: #13906A; background: #13906A; color: #fff; }
.pk-chk:disabled { cursor: default; opacity: .7; }
.pk-ords { display: grid; gap: 14px; }
.pk-ord { padding: 14px 16px; border-left: 5px solid var(--btn); } .pk-ord.none { border-left-color: #E0662A; background: #FFF9F4; }
.pk-oh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .pk-oh h3 { margin: 0; font-size: 16px; } .pk-oh h3 small { margin-left: 6px; color: var(--text-3); font-weight: 600; font-size: 13px; }
.pk-oh > :last-child { margin-left: auto; }
table.pk-ot th small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.pk-in { height: 34px; width: 100%; } .pk-in.r { text-align: right; max-width: 110px; } .pk-sel { height: 34px; min-width: 140px; }
@media print { .pk-page .dn-bar, .pk-page .dn-hint, .pk-chk:not(.on), .pk-oh button, .pk-sel { display: none !important; } .pk-in { border: none; } }
.pk-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 4px; scrollbar-width: thin; }
.pk-days button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.pk-days button b { font-size: 14px; } .pk-days button small { color: var(--text-3); font-weight: 600; font-size: 12px; }
.pk-days button.on { border-color: var(--btn); background: var(--soft-blue); }
.pk-days button.done small { color: #13906A; }
/* 재고 탭 (대표 10/4) */
.pk-tabs button { min-width: 64px; font-weight: 800; }
.pk-find { height: 40px; min-width: 180px; }
.pk-kpis { display: flex; gap: 14px; margin-left: auto; } .pk-kpis span { padding: 6px 12px; border-radius: 10px; background: #EEF2FA; color: var(--text-2); font-size: 13px; font-weight: 600; }
.pk-kpis span.bad { background: #FDE7E9; color: #C8323F; } .pk-kpis span.warn { background: #FFF1DE; color: #B4650C; }
table.pk td.pk-stock { font-weight: 800; } table.pk td.pk-stock.low { color: #C8323F; background: #FFF5F5; } table.pk td.pk-stock small { font-size: 11px; }
.pk-unk { color: var(--text-3); font-weight: 600; font-size: 12px; }
table.pk td.pk-last { color: var(--text-2); font-size: 12.5px; }
table.pk td.pk-btns { white-space: nowrap; } table.pk td.pk-btns .btn { margin: 0 2px; height: 28px; padding: 0 10px; }
table.pk tr.pk-off > * { color: var(--text-3); }
.pk-tg { min-width: 54px; height: 26px; padding: 0 8px; border-radius: 13px; border: 1.5px solid #B9C4D8; background: #fff; color: var(--text-3); font-weight: 700; font-size: 12px; cursor: pointer; }
.pk-tg.on { border-color: var(--btn); background: var(--btn); color: #fff; }
.pk-bad { color: #C8323F; }
table.pk-ot tr.pk-enough > * { color: var(--text-3); } table.pk-ot td.pk-rcv { white-space: nowrap; } table.pk-ot td.pk-rcv b { color: #13906A; }
.pk-mv { display: grid; gap: 10px; margin-top: 10px; } .pk-mv-acts { display: flex; gap: 8px; }
tr.pk-h-count > * { background: #F2F5FC; } tr.pk-h-in td.b { color: #13906A; } tr.pk-h-out td.b, tr.pk-h-deliver td.b { color: #C8323F; }
/* 분류 colour in grids (대표 10/4) */
td.gcc .gcell { color: var(--cc); font-weight: 800; }
td.gcc .gtext::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--cc); vertical-align: middle; }
td.gcc select.gcell { border-left: 4px solid var(--cc); }
.sidebar [data-nav] { cursor: pointer; }
.tb-menu [data-nav] { cursor: pointer; }
table.pk tr.pk-part > * { background: #FFF8EE; } table.pk tr.pk-part td.pk-tot { color: #B4650C; }
.pk-took { max-width: 90px; }
.pk-guide { padding: 12px 16px; margin-bottom: 12px; display: grid; gap: 6px; }
.pk-guide ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: 13.5px; color: var(--text-2); }
.pk-guide .pk-kpis { margin-left: 0; }
.pk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 주간 재고판 (대표 10/4) */
.sw-legend { margin-bottom: 10px; } .sw-legend .sw-kpi { margin-left: auto; }
table.sw td.sw-d { padding: 4px 4px 3px; vertical-align: top; height: auto; } table.sw td.sw-d.today { background: #F2F7FF; } table.sw td.sw-d.future { background: #FAFBFD; }
table.sw .sw-in { height: 30px; width: 100%; padding: 0 6px; font-weight: 700; } table.sw .sw-in::placeholder { color: #C3CAD8; font-weight: 500; }
table.sw .sw-sub { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-height: 0; font-size: 11px; line-height: 1.35; margin-top: 2px; white-space: nowrap; }
table.sw .sw-sub .o { color: #C8323F; } table.sw .sw-sub .c { color: var(--btn); font-weight: 700; } table.sw .sw-sub .s { color: var(--text-3); }
table.sw thead th.sw-today { background: #2F6FD8; }
table.sw td.sw-start { color: var(--text-3); }
table.sw td.pk-stock { line-height: 1.3; } table.sw .sw-plan { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); }
table.sw td.pk-stock.low .sw-plan { color: #C8323F; }
table.sw .sw-cnt { height: 30px; width: 100%; }
.ps-box.sw-box { overflow-x: auto; } table.ps.sw { width: max-content; min-width: 100%; }
/* 납품처 발주 (대표 10/4) */
.contact-top .contact-from { font-size: 14px; color: var(--text-2); } .contact-top .grow { flex: 1; }
.od-st { padding: 4px 10px; border-radius: 12px; background: #EEF2FA; color: var(--text-3); font-size: 12.5px; font-weight: 700; }
.od-st.on { background: #E7F6EF; color: #0E7A55; }
.od-foot { display: flex; align-items: flex-end; gap: 16px; padding: 12px 16px; margin-top: 12px; }
.od-foot .field { flex: 1; margin: 0; } .od-sum { white-space: nowrap; color: var(--text-2); } .od-sum b { color: var(--text); }
.od-memo { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #FFF9EC; color: #8A5A00; font-size: 13.5px; }
.od-ok { color: #0E7A55; font-weight: 700; }
.contact-tabs a.contact-order { background: var(--btn); color: #fff; border-color: var(--btn); }
.od-st.warn { background: #FFF1DE; color: #B4650C; }
.od-issue { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 800; }
.od-bar { padding: 10px 0 12px; }
/* 발주 조회·발주서 인쇄 (대표 10/4: 규격 없이) — short columns never wrap letter by letter */
.or-t { table-layout: auto; } .or-t thead th, .or-t td { white-space: nowrap; }
.or-t tbody th { width: 26%; white-space: normal; } .or-t td.or-memo { white-space: normal; width: 24%; }
.or-t td.r, .or-t th.r { padding-left: 18px; }
.or-t tfoot th, .or-t tfoot td { border-top: 2px solid var(--line); background: #F7F9FC; font-weight: 800; }
.od-issue-bar { width: 100%; height: 60px; border: none; border-radius: 14px; background: var(--nav); color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.od-issue-bar small { font-size: 14px; font-weight: 600; color: #D0D6E4; }
.od-issue-bar:hover:not(:disabled) { filter: brightness(1.15); }
.od-issue-bar:disabled { background: #E4E8F1; color: var(--text-3); cursor: default; }
.or-st { padding: 4px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: #FFF1DE; color: #B4650C; }
.or-st.approved { background: #E7F6EF; color: #0E7A55; } .or-st.draft { background: #FDE7E9; color: #C8323F; }
@media print { body.or-printing .pk-ord:not(.or-print), body.or-printing .dn-bar, body.or-printing .pk-days, body.or-printing .pk-oh button, body.or-printing .pk-oh a { display: none !important; }
  body.or-printing .or-print { border: none; box-shadow: none; } body.or-printing .or-print::before { content: '발 주 서'; display: block; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .3em; margin-bottom: 12px; } }
/* 엑셀로 붙이기 — 칸 맞추기·품목 맞춤 (대표 10/4) */
.sheet.wide { max-width: 860px; }
.ps-map { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border-radius: 12px; background: #F4F6FB; }
.ps-map > b { width: 100%; font-size: 14px; }
.ps-map label { display: grid; gap: 4px; } .ps-map small { color: var(--text-3); font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-map select { height: 38px; min-width: 110px; } .ps-map .ps-head { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin-left: auto; }
.ps-tb { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-tb th { text-align: left; padding: 6px 8px; color: var(--text-3); font-size: 12.5px; border-bottom: 1px solid var(--line); }
.ps-tb td { padding: 4px 8px; border-bottom: 1px solid #F0F2F7; } .ps-tb .r { text-align: right; }
.ps-tb select { height: 34px; width: 100%; } .ps-tb tr.bad td { background: #FFF6F6; }
.ps-tag { margin-left: 4px; padding: 1px 6px; border-radius: 8px; background: #EEF2FA; color: var(--text-3); font-size: 11.5px; font-weight: 700; }
.ps-tag.warn { background: #FDE7E9; color: #C8323F; }

/* 1:1 문의 (대표 10/5) — a board with every past question and 하이람's answers */
.iq-list tbody tr { cursor: pointer; } .iq-list tbody tr:hover { background: #F7F9FC; }
.iq-list .iq-title { font-weight: 700; white-space: normal; } .iq-cnt { margin-left: 6px; font-size: 12px; color: var(--btn); font-weight: 700; }
.iq-st { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: #FFF1DE; color: #B4650C; white-space: nowrap; }
.iq-st.ok { background: #E7F6EF; color: #0E7A55; } .iq-st.done { background: #EEF2FA; color: var(--text-3); }
.iq-form form { display: grid; gap: 14px; max-width: 760px; } .iq-form textarea { height: auto; padding: 12px; line-height: 1.6; }
.iq-one { display: grid; gap: 16px; } .iq-head { display: flex; align-items: center; gap: 12px; } .iq-head h2 { margin: 0; font-size: 19px; }
.iq-thread { display: grid; gap: 12px; }
.iq-msg { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.iq-msg.hiram { background: #F3F7FF; border-color: #CFE0FF; margin-left: 32px; }
.iq-who { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .iq-who small { color: var(--text-3); }
.iq-tag { margin-right: 6px; padding: 2px 8px; border-radius: 8px; background: var(--btn); color: #fff; font-size: 12px; }
.iq-body { white-space: pre-wrap; line-height: 1.7; font-size: 15px; }
.iq-file { margin-top: 10px; } .iq-hint { color: var(--text-2); font-size: 14px; }
.iq-reply { display: grid; gap: 10px; } .iq-reply textarea { height: auto; padding: 12px; } .iq-reply .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
@media (max-width: 899px) { .iq-msg.hiram { margin-left: 12px; } }

/* 스크롤 버튼 (대표 10/5): page arrows at the bottom right, ‹ › on tables that scroll sideways. */
.pg-scroll { position: fixed; right: 2px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(20, 28, 48, .14); overflow: hidden; }
.pg-scroll[hidden] { display: none; }
.pg-btn { width: 28px; height: 40px; display: grid; place-items: center; border: 0; background: #fff; color: var(--btn); cursor: pointer; }
.pg-btn + .pg-btn { border-top: 1px solid var(--line); }
.pg-btn:hover:not(:disabled) { background: #EEF2FA; }
.pg-btn:disabled { color: #C5CCDA; cursor: default; }
.hx-btn { position: fixed; z-index: 40; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--btn); box-shadow: 0 4px 14px rgba(20, 28, 48, .18); cursor: pointer; }
.hx-btn.in-sheet { z-index: 55; }
.hx-btn[hidden] { display: none; }
.hx-btn:hover { background: #EEF2FA; }
@media print { .pg-scroll, .hx-btn { display: none !important; } }

/* 휴대폰 공통 틀 (대표 10/5): a short top bar with the title, one 영업소·납품처 chip and the account button;
   the 더보기 page lists the left menu's groups. */
.tb-chip { display: none; }
@media (max-width: 899px) {
  .topbar { height: 54px; padding: 0 10px 0 14px; gap: 8px; }
  .topbar .tb-title { flex: 1 1 auto; min-width: 84px; }
  .topbar .tb-title b { font-size: 17px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .tb-right { flex: 0 1 auto; min-width: 0; }
  .topbar .tb-name { display: none; }
  .topbar .tb-user { margin-left: 0; padding-left: 0; border-left: none; }
  .topbar .tb-user > button { height: 40px; padding: 0 4px; gap: 4px; }
  .tb-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 40vw; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #DCE2EE; border-radius: 17px; background: var(--soft-blue); color: var(--btn); font-size: 13px; font-weight: 700; }
  .tb-chip[hidden] { display: none; }
  .tb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-sheet .tb-pick { display: flex; height: 48px; }
  .tb-sheet .tb-pick select { flex: 1; max-width: none; font-size: 16px; }
  /* the top bar already shows the title; phones scroll by touch */
  .main .page-head h1 { display: none; }
  .pg-scroll { display: none !important; }
}
.more { display: grid; gap: 14px; max-width: 640px; }
.more-sec { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 28, 48, .06); }
.more-sec h2 { margin: 0; padding: 12px 16px 6px; font-size: 12px; font-weight: 800; color: var(--text-3); }
.more-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; font-weight: 700; text-decoration: none; }
.more-row svg:first-child { color: var(--btn); flex: none; }
.more-row span:first-of-type { flex: 1; }
.more-row .go { color: #A9B2C4; flex: none; }

/* 휴대폰 메뉴 (대표 10/5): hamburger at the top left; the left menu slides in over a shade. */
.tb-burger, .nav-back, .nav-note { display: none; }
@media (max-width: 899px) {
  .sidebar .nav-note { display: block; margin: 2px 14px 10px; padding: 8px 11px; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -.2px; } /* 대표 10/6: say what this menu is */
  .tb-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); flex: none; }
  .tb-burger:active { background: var(--soft-blue); }
  .sidebar { display: flex !important; position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: min(84vw, 300px); z-index: 46; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 8px 0 28px rgba(15, 20, 35, .28); }
  .sidebar.open { transform: translateX(0); }
  .sidebar .handle { display: none; }
  .nav-back { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(15, 20, 35, .45); }
  .nav-back[hidden] { display: none; }
  body.drawer-open { overflow: hidden; }
  .bottomnav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bottomnav:has(a:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottomnav:has(a:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 휴대폰 (대표 10/5): 영업소·납품처 selects stay on top (대표와 영업소가 함께 써요), under the title. */
@media (max-width: 899px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 54px; padding: 7px 10px 8px 14px; row-gap: 7px; }
  .topbar .tb-title { order: 1; }
  .topbar .tb-right { display: contents; }
  .topbar .tb-user { order: 2; margin-left: auto; }
  .tb-chip, .tb-chip:not([hidden]) { display: none !important; }
  .topbar .tb-pick { order: 3; display: flex; flex: 1 1 calc(50% - 4px); min-width: 0; height: 40px; }
  .topbar .tb-pick[hidden] { display: none; }
  .topbar .tb-pick span { padding: 0 7px; font-size: 11px; white-space: nowrap; }
  .topbar .tb-pick span svg { display: none; }
  .topbar .tb-pick select { min-width: 0; width: 100%; max-width: none; padding: 0 22px 0 8px; font-size: 14px; }
}
/* 휴대폰 품목 */
.pi { padding: 12px 12px 24px; display: grid; gap: 10px; }
.pi-q { display: flex; gap: 8px; }
.pi-q .input { flex: 1; height: 44px; font-size: 16px; }
.pi-q .btn { height: 44px; padding: 0 18px; flex: none; }
.pi-sub { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-3); padding: 0 2px; }
.pi-table { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 28, 48, .06); }
.pi-head, .pi-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 60px 84px; gap: 6px; align-items: center; padding: 0 12px; }
.pi-head { height: 38px; background: var(--soft-blue); font-size: 12px; font-weight: 800; color: var(--btn); }
.pi-row { width: 100%; min-height: 50px; border: 0; border-top: 1px solid var(--line); background: #fff; text-align: left; font-size: 15px; color: var(--text); }
.pi-row .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-row .c { font-size: 13px; font-weight: 700; }
.pi-row .p { font-weight: 800; }
.pi-row.open { background: #F4F7FD; }
.pi-head .r, .pi-row .r { text-align: right; }
.pi-more { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 12px; background: #F4F7FD; border-top: 1px dashed #D5DCEA; }
.pi-more dl { flex: 1; margin: 0; display: grid; grid-template-columns: 52px 1fr; gap: 4px 8px; font-size: 13px; }
.pi-more dt { color: var(--text-3); font-weight: 700; }
.pi-more dd { margin: 0; color: var(--text); }
.pi-more .btn { flex: none; }
@media (max-width: 899px) { .sheet .rtable { font-size: 13px; } .sheet-wide .rtable { display: block; overflow-x: auto; } }

.ph-list { display: grid; gap: 8px; max-height: 56vh; overflow-y: auto; }
.ph-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ph-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.ph-p { font-weight: 800; color: var(--btn); }
.ph-sub { margin-top: 3px; font-size: 12px; color: var(--text-3); }


/* 휴대폰 발주 (대표 10/5): the date picker above is enough — no day cards. */
@media (max-width: 899px) { .or-days { display: none; } }

/* 휴대폰 발주 표 (대표 10/6): 품목·수량 large, 단가·금액 small under them. */
.po { background: #fff; }
.po-row { padding: 10px 12px; border-top: 1px solid var(--line); }
.po-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.po-n { font-size: 17px; font-weight: 800; color: var(--text); }
.po-q { flex: none; font-size: 22px; font-weight: 900; color: #C0267A; letter-spacing: -.3px; }
.po-q small { margin-left: 3px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.po-sub { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.po-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-top: 2px solid var(--btn); font-size: 14px; }
.po-sum b { font-size: 16px; }
@media (max-width: 899px) { .pk-oh { flex-wrap: wrap; gap: 8px; } .pk-oh h3 { flex: 1 1 100%; } }

/* 휴대폰 발주 (대표 10/6): no 승인 상태 badge on the card. */
@media (max-width: 899px) { .pk-oh .or-st { display: none; } }

/* 휴대폰 여백 (대표 10/6): panels run to the screen edges (0 outside, little inside); the date bar and
   search keep a small gutter. */
@media (max-width: 899px) {
  .or-page { padding: 10px 0 0; }
  .or-page > .dn-bar { padding: 0 12px; }
  .or-page .pk-ords { gap: 8px; }
  .or-page .pk-ord { padding: 10px 0 0; border-radius: 0; border-left-width: 0; border-top: 3px solid var(--btn); box-shadow: none; }
  .or-page .pk-oh { padding: 0 12px; }
  .or-page .od-memo { margin: 6px 12px; }
  .or-page .po { border-radius: 0; box-shadow: none; margin-top: 8px; }
  .pi { padding: 10px 0 24px; }
  .pi-q, .pi-sub { padding-left: 12px; padding-right: 12px; }
  .pi-table { border-radius: 0; }
}
/* 휴대폰 발주 (대표 10/6): a little more room inside the panel so 품목 and 수량 sit closer. */
@media (max-width: 899px) { .po-row { padding: 10px 24px; } .po-sum { padding: 12px 24px; } .or-page .pk-oh { padding: 0 24px; } .or-page .od-memo { margin: 6px 24px; } }

/* 휴대폰 (대표 10/6): no copyright line under the screens. */
@media (max-width: 899px) { .layout .site-foot { display: none; } .main { padding-bottom: 84px; } }

/* 전체 장보기 (대표 10/6) */
.or-shop { padding: 0; overflow: hidden; }
.or-shop-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 24px 8px; }
.or-shop-h b { font-size: 16px; }
.or-shop-h small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.or-shop-cat { padding: 10px 24px 4px; font-size: 13px; font-weight: 800; background: #F7F9FC; border-top: 1px solid var(--line); }
.or-shop .po-row { padding: 10px 24px; }
@media (max-width: 899px) { .or-page .or-shop { border-radius: 0; box-shadow: none; } .or-view button { padding: 0 12px; } }

/* 발주 총계 줄, and room above the bottom menu on phones (대표 10/6) */
.or-grand { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 14px 24px; background: var(--nav); color: #fff; border-radius: 12px; font-size: 14px; font-weight: 700; }
.or-grand b { font-size: 18px; }
.or-shop .or-grand { margin: 0; border-radius: 0; }
@media (max-width: 899px) {
  .layout .main, .layout .main.phone { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  .or-page .or-grand { border-radius: 0; margin-top: 8px; }
}

/* 발주 조회 납품처 선택 (대표 10/6) */
.or-cf select { height: 44px; min-width: 240px; font-size: 15px; font-weight: 700; }
@media (max-width: 899px) { .or-cf { width: 100%; } .or-cf select { width: 100%; min-width: 0; } }

/* 장보기 체크 (대표 10/6) */
.po-row.shop { display: flex; align-items: center; gap: 12px; }
.po-row.shop .po-main { flex: 1; min-width: 0; }
.shop-tick { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #C5CCDA; background: #fff; color: transparent; display: grid; place-items: center; cursor: pointer; }
.shop-tick[aria-pressed="true"] { background: #1F8A3B; border-color: #1F8A3B; color: #fff; }
.po-row.done .po-n, .po-row.done .po-q { color: #A9B2C4; text-decoration: line-through; }
.po-row.done .po-sub { color: #C0C7D4; }
.or-shop-n { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--btn); }
.or-shop-done { margin: 0 24px 8px; padding: 10px 14px; border-radius: 10px; background: #E8F6EC; color: #1F8A3B; font-weight: 800; text-align: center; }
.or-shop-done[hidden] { display: none; }

.or-shop-h b, .or-shop-n { white-space: nowrap; }

/* 휴대폰 납품: 배달 확인 서명 (대표 10/6) */
.dv .or-shop { margin-top: 8px; }
.dv-done { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 12px 14px; border-radius: 12px; background: #E8F6EC; color: #1F8A3B; }
.dv-done div { flex: 1; display: grid; gap: 2px; } .dv-done b { font-size: 16px; } .dv-done small { font-size: 12px; color: #2E6B3F; }
.btn.dv-sign { display: block; margin: 12px 12px 0; width: calc(100% - 24px); height: 54px; font-size: 17px; }
.sg-pad { position: relative; border: 2px dashed #C5CCDA; border-radius: 12px; background: #fff; overflow: hidden; }
.sg-pad canvas { display: block; }
.sg-clear { position: absolute; top: 6px; right: 8px; border: 0; background: #F1F3F8; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--text-3); }
.sg-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #C5CCDA; font-size: 18px; font-weight: 800; pointer-events: none; }
.sg-hint[hidden] { display: none; }
.dv-sub { display: flex; justify-content: space-between; align-items: center; padding: 9px 24px; background: #F7F9FC; border-top: 1px solid var(--line); font-size: 13px; font-weight: 800; }
.dv-sub b { font-size: 15px; color: var(--text); }
.dv-img { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* 휴대폰에서 PC 화면 보기 (대표 10/6): back to the phone screens */
.to-mobile { position: fixed; left: 16px; bottom: 16px; z-index: 47; height: 46px; padding: 0 18px; border: 0; border-radius: 23px; background: var(--nav); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 6px 18px rgba(15, 20, 35, .3); }
/* 휴대폰 납품 (m-notes.js): the 명세표 the way it prints */
.dv-paper { margin: 8px 0 0; padding: 18px 16px; border-radius: 0; box-shadow: none; }
.dv-title { margin: 0 0 6px; text-align: center; font-size: 22px; letter-spacing: 6px; }
.dv-to { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 2px solid #111; font-size: 14px; }
.dv-to b { font-size: 17px; } .dv-to span { color: var(--text-3); font-size: 13px; }
.dv-t { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.dv-t th, .dv-t td { padding: 7px 4px; border-bottom: 1px solid #DCE2EE; text-align: left; }
.dv-t thead th { border-bottom: 1.5px solid #111; font-size: 12px; color: var(--text-3); }
.dv-t .r { text-align: right; }
.dv-t tbody th { font-weight: 700; }
.dv-t .q { font-weight: 800; color: #C0267A; white-space: nowrap; } .dv-t .q small { margin-left: 2px; font-size: 11px; color: var(--text-3); font-weight: 600; }
.dv-t tr.dv-subt th, .dv-t tr.dv-subt td { background: color-mix(in srgb, var(--cc, #5A6478) 11%, #fff); padding: 11px 6px; font-size: 15px; font-weight: 900; border-top: 1.5px solid var(--cc, #5A6478); border-bottom: 1.5px solid var(--cc, #5A6478); }
.dv-t tr.dv-subt th { color: var(--cc, #5A6478); border-left: 5px solid var(--cc, #5A6478); } .dv-t tr.dv-subt td { color: #111; font-size: 16px; }
.dv-t tfoot th, .dv-t tfoot td { border-top: 2px solid #111; border-bottom: 0; padding-top: 10px; font-size: 16px; font-weight: 900; }

.dv-t { table-layout: fixed; font-size: 13px; } .dv-t thead th:nth-child(2) { width: 64px; } .dv-t thead th:nth-child(3) { width: 62px; } .dv-t thead th:nth-child(4) { width: 78px; } .dv-t tbody th { word-break: keep-all; overflow-wrap: anywhere; }
.dv-t tr.dv-subt th { width: auto; }

/* 휴대폰 매입 (대표 10/6) */
.mp-tabs { display: flex; gap: 6px; margin-top: 10px; }
.mp-tabs button { flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 700; color: var(--text-3); }
.mp-tabs button[aria-selected="true"] { background: var(--nav); border-color: var(--nav); color: #fff; }
.mp-list { padding: 0 !important; overflow: hidden; }
.mp-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 14px 24px; border: 0; border-top: 1px solid var(--line); background: #fff; text-align: left; font: inherit; }
.mp-row:first-child { border-top: 0; }
.mp-n { font-size: 17px; font-weight: 800; color: #111; word-break: keep-all; }
.mp-a { font-size: 19px; font-weight: 900; color: #C0267A; white-space: nowrap; text-align: right; }
.mp-a small { margin-left: 2px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.mp-a.neg { color: #D23B3B; }
.mp-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-st { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EEF1F6; color: var(--text-3); }
.mp-st.cash { background: #E6F4EA; color: #1F8A3B; } .mp-st.card { background: #E7F0FC; color: #1F6FD1; } .mp-st.due { background: #FDECEC; color: #D23B3B; }
.mp-list .or-grand { margin: 0; border-radius: 0; }
.mp-due { padding: 10px 24px; font-size: 13px; color: #D23B3B; background: #FFF6F6; text-align: right; } .mp-due b { font-size: 15px; }
.btn.mp-add { display: block; margin: 12px 12px 0; width: calc(100% - 24px); height: 54px; font-size: 17px; }
.mp-in { font-size: 22px; font-weight: 800; text-align: right; height: 52px; }
.mp-pay-h { margin: 14px 0 8px; font-size: 14px; } .mp-pay-h b { color: #D23B3B; font-size: 17px; }.mp .dn-f, .mp .mp-tabs { flex: 1 1 100%; width: 100%; } .mp .dn-date { width: 100%; } .mp .dn-date .pk-day { flex: 1; }.mp-scan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 12px 0; }
.btn.mp-scan-b { height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: 16px; }
.btn.mp-scan-b small { font-size: 12px; font-weight: 600; opacity: .85; }
.btn.mp-scan-b.receipt { background: #1F8A3B; border-color: #1F8A3B; } .btn.mp-scan-b.invoice { background: #E07B00; border-color: #E07B00; }
.mp-scan-off { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); text-align: center; padding: 4px 0; }
.mp-shot { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #F2F4F8; border-radius: 10px; margin: 8px 0; }
.mp-warn { background: #FFF6E5; color: #8A5300; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin: 6px 0; }
.mp-row.flash { animation: mp-flash 2.4s ease-out; } @keyframes mp-flash { 0%, 40% { background: #FFF1B8; } 100% { background: #fff; } }

table.pb tbody td.pb-due { vertical-align: bottom; padding-bottom: 6px; } /* 대표 10/6: on the second line, level with 카드납·현금납·[결제] */

/* 대표 10/6: totals and second lines share the cells' 10px right edge; the global .card box must not reach the 카드납 amount */
table.pb tfoot td.pb-c { padding: 0 10px; }
.pb-dl { padding: 0 10px 7px; }
.pb-dl-n.card, .pb-badge.card { border: 0; border-radius: 0; } .pb-dl-n.card { background: none; } .pb-badge.card { border-radius: 6px; }
table.pb tbody th.pb-name, table.pb tbody td.pb-no { vertical-align: middle; } /* 대표 10/6 */

/* 휴대폰 지출 (대표 10/6) */
.mp-scan.one { grid-template-columns: 1fr; }
.mp-n .mp-c { margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.mp-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.mp-cats .btn { height: 48px; font-size: 15px; }
.mp-shot.big { max-height: 70vh; }.mp-row .mp-n { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 대표 10/6: two lines at most */
.mp-newcat { display: flex; gap: 8px; margin: 4px 0 8px; } .mp-newcat .input { flex: 1; min-width: 0; } .mp-newcat .btn { white-space: nowrap; }
.tb-burger[hidden] { display: none !important; } /* 대표 10/6: the PC menu is for the 대표 account only */
.mp-warn.ok { background: #E6F4EA; color: #1F6B3A; } .mp-newsup .mp-tabs { margin: 6px 0; } .mp-newsup .btn.block { margin-bottom: 6px; }
.st-prev { min-height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 10px; background: #FAFBFD; } .st-prev img { max-height: 110px; max-width: 90%; }

/* 환경설정 (대표 10/6) */
.nav-foot { display: flex; align-items: center; gap: 10px; margin: 8px 12px 14px; padding: 10px 14px; border-radius: 10px; color: #DCE3F5; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.06); cursor: pointer; text-decoration: none; }
.nav-foot:hover, .nav-foot[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
.sidebar.collapsed .nav-foot span { display: none; } .sidebar.collapsed .nav-foot { justify-content: center; margin: 8px 6px 14px; padding: 10px 0; }
.set-page { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; max-width: 1100px; }
.set-card { display: grid; gap: 4px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.set-card .sec-title + .set-row { border-top: 0; }
.set-row b { display: block; font-size: 15px; } .set-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.set-tog { flex: none; width: 50px; height: 28px; border-radius: 999px; border: 0; background: #C9D0DD; position: relative; cursor: pointer; }
.set-tog span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.set-tog[aria-checked="true"] { background: var(--btn); } .set-tog[aria-checked="true"] span { left: 25px; }
.set-seg { display: flex; flex: none; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.set-seg button { border: 0; border-left: 1px solid var(--line); background: #fff; padding: 7px 12px; font-weight: 700; color: var(--text-3); cursor: pointer; }
.set-seg button:first-child { border-left: 0; } .set-seg button[aria-pressed="true"] { background: var(--btn); color: #fff; }
.set-in { display: flex; gap: 6px; flex: none; } .set-in .input { width: 150px; }
.sidebar .nav-foot { flex-direction: row; flex: none; height: 44px; padding: 0 14px; } .sidebar .nav-wrap { min-height: 0; }
@media (min-width: 900px) { .bill-banner + .layout .sidebar { height: calc(100vh - 52px); } } /* the banner above pushes the menu down; keep 환경설정 at the bottom in view */

/* 전자세금계산서 (대표 10/7): 미수금 관리와 같은 구조 */
.ti-t th { vertical-align: top; }
.ti-t td { vertical-align: top; }
.ti-t td.r, .ti-t td.num, .ti-t tfoot td { white-space: nowrap; }
.ti-miss { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #B45309; }
.ti-miss.soft { color: var(--text-3); font-weight: 500; }
.ti-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.ti-cell small { white-space: nowrap; }
.ti-note { display: grid; gap: 4px; margin-bottom: 12px; }
.ti-note a { margin-left: 6px; }
.ti-sum-t { margin: 10px 0; width: 100%; }
.ti-sum-t th { width: 110px; text-align: left; font-weight: 600; color: var(--text-3); }

/* 현금영수증 질문창 (대표 10/7) */
.rc-cb { display: grid; gap: 10px; margin: 12px 0; }
.rc-cb label { display: flex; align-items: center; gap: 8px; }
.rc-cb .rc-cb-f { display: grid; gap: 4px; }
.rc-cb .rc-cb-f input { width: 100%; }

/* 전자세금계산서 발급 조건 안내 (대표 10/7) */
.ti-guide { margin-top: 12px; }
.ti-guide summary { cursor: pointer; font-weight: 600; }
.ti-guide ul { margin: 8px 0 0 18px; padding: 0; display: grid; gap: 6px; }
.ti-need { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.ti-need li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line, #d9deea); border-radius: 8px; }
.ti-need li > div { flex: 1; }

/* 발행 화면: 계산서 양식 (대표 10/7) */
.ti-issue .ti-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.ti-party { width: 100%; }
.ti-party caption { text-align: left; font-weight: 700; padding: 6px 0; }
.ti-party th { width: 74px; text-align: left; white-space: nowrap; font-weight: 600; color: var(--text-3); }
.ti-party input, .ti-lines input, .ti-meta input { width: 100%; box-sizing: border-box; }
.ti-lines input.r { text-align: right; }
.ti-lines { width: 100%; }
.ti-meta { margin: 8px 0; }
.ti-meta input { width: auto; }
@media (max-width: 760px) { .ti-issue .ti-parties { grid-template-columns: 1fr; } .ti-lines-wrap { overflow-x: auto; } }

/* 미수금 관리·전자세금계산서·세무 자료: 큰 버튼 (대표 10/7) */
.rc-page .btn { height: 48px; padding: 0 22px; font-size: 16px; }
.rc-page .btn.small { height: 44px; padding: 0 18px; font-size: 15px; }
.rc-page .dn-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.bigbtn .sheet .btn { height: 48px; padding: 0 22px; font-size: 16px; }
body.bigbtn .sheet .btn.small { height: 44px; padding: 0 18px; font-size: 15px; }
.ti-steps { margin: 12px 0 16px 20px; padding: 0; display: grid; gap: 8px; }

/* 바로빌 연결 화면 (대표 10/7) */
.bb-page { display: grid; gap: 14px; }
.bb-step { display: flex; gap: 16px; align-items: center; }
.bb-n { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--btn); color: #fff; font-weight: 800; display: grid; place-items: center; }
.bb-main { flex: 1; min-width: 0; }
.bb-main h3 { margin: 0 0 6px; font-size: 17px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bb-body { line-height: 1.55; }
.bb-act { display: grid; gap: 6px; justify-items: end; }
.ti-offrow { margin-top: 10px; text-align: center; }
@media (max-width: 760px) { .bb-step { flex-wrap: wrap; } .bb-act { width: 100%; justify-items: stretch; } }

/* 눈에 띄는 버튼 (대표 10/7): 주요 버튼은 진하게 채우고, 보조 버튼도 굵은 색 테두리 */
.rc-page .btn, body.bigbtn .sheet .btn { font-weight: 800; letter-spacing: -0.2px; }
.rc-page .btn.ghost, body.bigbtn .sheet .btn.ghost, .rc-page a.btn.ghost { background: #fff; color: var(--btn); box-shadow: inset 0 0 0 2px var(--btn); }
.rc-page .btn.ghost:hover, body.bigbtn .sheet .btn.ghost:hover { background: var(--soft); color: var(--btn-hover); }
.rc-page .btn:disabled, body.bigbtn .sheet .btn:disabled { background: #D5DAE6; color: #6B7488; box-shadow: none; }
.rc-bank-acts { margin-left: auto; }
.rc-bank-acts .btn { height: 56px; min-width: 170px; font-size: 17px; }
.rc-page .btn:not(.ghost):not(:disabled) { box-shadow: 0 2px 6px rgba(23, 48, 122, 0.28); }

/* 통장 입금 조회 창: 한 줄에 다 보이게 (대표 10/7) */
.sheet.sheet-wide .rc-t th, .sheet.sheet-wide .rc-t td { white-space: nowrap; vertical-align: middle; }
.sheet.sheet-wide .bk-act { display: flex; gap: 8px; justify-content: flex-end; }
.sheet.sheet-wide .rc-t select { min-width: 220px; height: 44px; font-size: 15px; }

.note-box.ti-bad { background: #FDECEC; color: #B42318; font-weight: 600; }

/* 전자세금계산서 목록 표 정렬 (대표 10/7): 칸 폭 고정, 줄 가운데 맞춤, 발행 버튼 폭 통일 */
.ti-t { table-layout: fixed; width: 100%; }
.ti-t th, .ti-t td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.ti-t thead th:nth-child(1), .ti-t tbody th { width: 26%; text-align: left; }
.ti-t thead th:nth-child(2), .ti-t tbody td:nth-child(2) { width: 14%; }
.ti-t thead th:nth-child(3), .ti-t tbody td:nth-child(3) { width: 17%; text-align: right; }
.ti-t thead th:nth-child(4), .ti-t tbody td:nth-child(4) { width: 22%; text-align: right; }
.ti-t thead th:nth-child(5), .ti-t tbody td:nth-child(5) { width: 21%; text-align: center; }
.ti-t tfoot td:last-child, .ti-t tfoot th { text-align: center; }
.ti-t tfoot th { text-align: left; }
.ti-t td:nth-child(5) .ti-cell { display: grid; gap: 6px; justify-items: stretch; margin: 6px auto; max-width: 200px; }
.ti-t td:nth-child(5) .ti-cell .btn { width: 100%; }
.ti-t td:nth-child(5) .ti-cell .badge { justify-self: center; }
.ti-t .ti-miss { display: block; margin-top: 4px; }
.ti-hist-t { table-layout: auto; }

/* 큰 글자 (대표 10/7): 미수금 관리·전자세금계산서·세무 자료·바로빌 연결과 그 창은 글자를 크게 */
.rc-page, body.bigbtn .sheet { font-size: 16px; line-height: 1.55; }
.rc-page .ex-t, .rc-page .ex-t td, .rc-page .ex-t th, body.bigbtn .sheet .ex-t, body.bigbtn .sheet .ex-t td, body.bigbtn .sheet .ex-t th { font-size: 16px; }
.rc-page .ex-t thead th, body.bigbtn .sheet .ex-t thead th { font-size: 15px; font-weight: 700; }
.rc-page .ex-t td.num, .rc-page .ex-t td.r, .rc-page .ex-t th.r { font-size: 17px; }
.rc-page small, body.bigbtn .sheet small { font-size: 14px; }
.rc-page .ex-t thead small { font-size: 13px; }
.rc-page .rc-h { font-size: 20px; }
.rc-page .rc-h small { font-size: 15px; }
.rc-page .ps-card small { font-size: 15px; }
.rc-page .ps-card b { font-size: 25px; }
.rc-page .dn-hint, .rc-page .sub-text { font-size: 15px; }
.rc-page .ti-miss { font-size: 14px; }
.rc-page .badge { font-size: 14px; padding: 4px 10px; }
.rc-page .note-box, body.bigbtn .sheet .note-box { font-size: 15px; }
.rc-page input, .rc-page select, body.bigbtn .sheet input, body.bigbtn .sheet select { font-size: 16px; }
body.bigbtn .sheet h2 { font-size: 22px; }
.rc-page .pb-range { font-size: 18px; }

/* 통장 등록 입력창 (대표 10/7) */
.bk-form { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.bk-form .rc-cb-f[hidden] { display: none; }
.bk-radio { display: flex; gap: 20px; height: 48px; align-items: center; }
@media (max-width: 760px) { .bk-form { grid-template-columns: 1fr; } }
.bb-acct { display: inline-flex; gap: 10px; align-items: center; margin: 4px 14px 4px 0; font-weight: 700; }

/* 큰 제목 (대표 10/7) */
.rc-page .rc-h { font-size: 22px; }
.rc-page .rc-h small { font-size: 16px; }
.rc-page .sec-title, .bb-page .sec-title { font-size: 21px; }
.bb-main h3 { font-size: 20px; }
body.bigbtn .sheet h2 { font-size: 24px; }
.rc-page .dn-bar b { font-size: 20px; }

/* 발급 화면: 계산서 양식 (대표 10/7) — 공급자는 붉은 칸, 공급받는자는 푸른 칸 */
.tv { display: grid; gap: 0; }
.tv-parties { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #C9CEDA; }
.tv-side { display: flex; min-width: 0; }
.tv-side.sup { background: #FDEEEE; border-right: 1px solid #C9CEDA; box-shadow: inset 3px 0 0 #E86D6D; }
.tv-side.buy { background: #EDF1FF; box-shadow: inset 3px 0 0 #6F8CF0; }
.tv-vert { flex: 0 0 44px; display: grid; place-items: center; writing-mode: vertical-rl; letter-spacing: 6px; font-weight: 800; font-size: 17px; text-orientation: upright; }
.tv-side.sup .tv-vert { background: #FBCACA; color: #8A2C2C; }
.tv-side.buy .tv-vert { background: #C9D5FF; color: #26408F; }
.tv-grid { flex: 1; min-width: 0; display: grid; }
.tv-r { display: grid; grid-template-columns: 96px 1fr 96px 1fr; border-bottom: 1px solid #D8DCE6; align-items: stretch; }
.tv-r:last-child { border-bottom: 0; }
.tv-l { display: flex; align-items: center; padding: 10px 12px; font-weight: 700; font-size: 15px; background: rgba(255, 255, 255, .45); }
.tv-l.req::before { content: '*'; color: #D64545; margin-right: 4px; }
.tv-l.sm { font-size: 13px; line-height: 1.25; }
.tv-v { padding: 8px 10px; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 17px; }
.tv-v.w3 { grid-column: span 3; }
.tv-v input, .tv-v select { width: 100%; min-width: 0; box-sizing: border-box; height: 44px; }
.tv-mail { display: grid; grid-template-columns: 1fr auto 1fr 120px; gap: 8px; align-items: center; width: 100%; }
.tv-meta, .tv-sum { display: grid; border: 1px solid #C9CEDA; border-top: 0; background: #F4F8F7; }
.tv-meta { grid-template-columns: 110px 1.2fr 80px 1fr; }
.tv-sum { grid-template-columns: 110px 1fr 110px 1fr 90px 1fr; }
.tv-sum .tv-v { font-weight: 800; font-size: 19px; justify-content: flex-end; }
.tv-meta .tv-v { flex-wrap: wrap; }
.tv-note { margin: 14px 0 8px; color: var(--text-2, #555); font-size: 15px; line-height: 1.6; }
.tv-tools { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
.tv-itemswrap { overflow-x: auto; }
.tv-items { width: 100%; border-collapse: collapse; min-width: 1100px; border: 1px solid #C9CEDA; }
.tv-items th { background: #EAF4F3; padding: 12px 6px; font-size: 16px; border: 1px solid #D4DAE3; }
.tv-items td { padding: 8px 5px; border: 1px solid #E0E4EC; }
.tv-items input { width: 100%; box-sizing: border-box; height: 42px; font-size: 16px; padding: 0 8px; }
.tv-items input.r { text-align: right; }
.tv-items input.c { text-align: center; }
.tv-items td.tv-mo { text-align: center; background: #F0F2F6; font-weight: 800; font-size: 18px; width: 48px; }
.tv-items td.tv-tot { display: flex; gap: 6px; align-items: center; border: 0; padding: 8px 5px; }
.tv-items td.tv-tot .btn { height: 42px; padding: 0 10px; font-size: 14px; flex: 0 0 auto; }
.tv-items td.tv-tot input { min-width: 90px; }
.tv-items .btn.small { height: 42px; }
.tv-pay { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #C9CEDA; margin-top: 16px; }
.tv-pay > div { padding: 0; border-right: 1px solid #D8DCE6; }
.tv-pay > div:last-child { border-right: 0; }
.tv-pay .tv-l { justify-content: center; background: #EAF4F3; }
.tv-pay input { width: calc(100% - 20px); margin: 10px; box-sizing: border-box; height: 44px; }
.tv-purpose { text-align: right; margin: 14px 0; font-size: 17px; }
.tv-purpose label { margin: 0 6px; font-weight: 700; }
.tv-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.tv-actions .grow { flex: 1; }
.tv-actions .btn { min-width: 130px; }
@media (max-width: 1100px) { .tv-parties { grid-template-columns: 1fr; } .tv-side.sup { border-right: 0; border-bottom: 1px solid #C9CEDA; } .tv-meta, .tv-sum { grid-template-columns: 1fr 1fr; } }

/* 이월·직접 발급·카드 (대표 10/7) */
.rc-cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rc-page .ps-card b { white-space: nowrap; }
.ti-t .ti-carry, .ti-hist-t .ti-carry, .ti-cell .ti-carry { display: block; margin-top: 4px; color: #B54708; font-weight: 700; font-size: 14px; }
.ti-t .ti-vat { display: block; margin-top: 3px; color: var(--text-3); font-size: 14px; }
.ti-new { margin-left: auto; display: flex; gap: 10px; }
.ti-new .btn { height: 52px; font-size: 16px; }
.tv-pick { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; }
.tv-pick select { min-width: 240px; height: 46px; }
.ti-carrybox { margin-bottom: 12px; }
.tv-carry { margin: 10px 0; padding: 12px 16px; border-radius: 10px; background: #FFF4E5; color: #93370D; font-size: 16px; }
.tv-carry.over { background: #FDECEC; color: #B42318; }
.ti-hist-t { width: 100%; }
.ti-hist-t th, .ti-hist-t td { vertical-align: middle; padding: 12px 10px; }
.ti-hist-t th:first-child { text-align: left; }

/* 발급 화면: 합계 줄, 품목 표시 방식, 삭제 버튼 (대표 10/7) */
.tv-sum { grid-template-columns: repeat(3, 1fr); }
.tv-pair { display: grid; grid-template-columns: 110px 1fr; border-right: 1px solid #D8DCE6; align-items: stretch; }
.tv-pair:last-child { border-right: 0; }
.tv-sum .tv-pair .tv-v { justify-content: flex-start; padding-left: 14px; font-size: 21px; }
.tv-tools { align-items: center; flex-wrap: wrap; }
.tv-tools .grow { flex: 1; }
.tv-modes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tv-modes > span { font-weight: 700; margin-right: 4px; }
.tv-modes .btn[aria-pressed="true"] { background: var(--btn); color: #fff; box-shadow: none; }
.tv-items .btn.small { white-space: nowrap; min-width: 62px; padding: 0 10px; }
.tv-items th:last-child { width: 78px; }
#pst { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 220px; }
@media (max-width: 1100px) { .tv-sum { grid-template-columns: 1fr; } .tv-pair { border-right: 0; border-bottom: 1px solid #D8DCE6; } }

/* payment screen after sign-up (pay.js) */
.pay-card { margin-top: 12px; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line, #E3E7F0); }
.pay-row:first-child { border-top: 0; }
.pay-name { font-size: 17px; line-height: 1.4; }
.pay-name b { font-weight: 800; }
.pay-name small { display: block; color: #4A5368; font-size: 14px; margin-top: 3px; }
.pay-sel { min-width: 230px; height: 48px; font-size: 16px; }
.pay-step { display: flex; align-items: center; gap: 12px; }
.pay-step .btn { width: 48px; height: 48px; padding: 0; font-size: 22px; }
.pay-step b { min-width: 28px; text-align: center; font-size: 20px; }
.pay-sum { margin-top: 12px; background: #F4F7FD; }
.pay-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 16px; }
.pay-line.neg { color: #0F7A4D; }
.pay-line.tot { border-top: 1px solid #C9D2E6; margin-top: 6px; padding-top: 10px; font-size: 19px; font-weight: 800; }
.pay-methods { display: flex; gap: 10px; margin-top: 8px; }
.pay-methods .btn { flex: 1; height: 52px; font-size: 17px; }
.hq-wrap { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
.hq { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #3B5BDB; background: #fff; color: #3B5BDB; font-size: 14px; font-weight: 800; line-height: 1; padding: 0; cursor: pointer; }
.hq:hover, .hq:focus-visible { background: #3B5BDB; color: #fff; }
.hq-bubble { display: none; position: absolute; z-index: 20; left: 0; top: 32px; width: 340px; max-width: 80vw; padding: 12px 14px; border-radius: 10px; background: #1F2A44; color: #fff; font-size: 15px; line-height: 1.6; font-weight: 500; box-shadow: 0 6px 20px rgba(20, 30, 60, .25); }
.hq-wrap:hover .hq-bubble, .hq-wrap.open .hq-bubble, .hq:focus-visible + .hq-bubble { display: block; }

/* 이용요금 및 결제 (billing.js): two columns on a wide screen, option cards, usage bars */
.bl-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 28px; align-items: start; }
.bl-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bl-opt { background: #fff; border: 1.5px solid #E3E7F0; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 148px; }
.bl-opt.on { border-color: #B9C7F2; box-shadow: 0 1px 0 #DDE5FA; }
.bl-opt-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bl-opt-name { font-size: 18px; font-weight: 800; color: #1F2A44; }
.bl-opt:not(.on) .bl-opt-name { color: #5A6478; }
.bl-badge { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #EEF0F5; color: #4A5368; white-space: nowrap; }
.bl-badge.on { background: #E3F5EC; color: #0F7A4D; }
.bl-opt-d { font-size: 15px; line-height: 1.5; color: #3A4358; flex: 1; }
.bl-opt:not(.on) .bl-opt-d { color: #6B7488; }
.bl-opt-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.bl-opt-f b { font-size: 20px; font-weight: 800; color: #1F2A44; }
.bl-opt-f b small { font-size: 14px; font-weight: 600; color: #5A6478; }
.bl-opt:not(.on) .bl-opt-f b { color: #9AA3B5; }
.bl-uses { display: grid; gap: 18px; }
.bl-use-h { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 6px; }
.bl-use-h b { font-weight: 800; }
.bl-use-h b small { font-size: 14px; font-weight: 600; color: #5A6478; }
.bl-bar { height: 12px; border-radius: 999px; background: #E9EDF5; overflow: hidden; }
.bl-bar span { display: block; height: 100%; border-radius: 999px; background: #3B5BDB; }
.bl-bar span.over { background: #D9480F; }
.bl-use-n { font-size: 14px; color: #5A6478; margin-top: 5px; }
.bl-hero { background: #1F3C99; color: #fff; border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.bl-hero span { font-size: 16px; font-weight: 700; opacity: .92; }
.bl-hero b { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; }
.bl-hero small { font-size: 14px; opacity: .9; }
.bl-lines { margin-top: 12px; }
.bl-line { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 16px; border-top: 1px solid #EDF0F6; }
.bl-line:first-child { border-top: 0; }
.bl-line b { font-weight: 700; white-space: nowrap; }
.bl-line.neg { color: #0F7A4D; }
.bl-line.tot { border-top: 2px solid #C9D2E6; margin-top: 4px; padding-top: 12px; font-size: 18px; font-weight: 800; }
.bl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bl-stat { background: #fff; border: 1px solid #E3E7F0; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.bl-stat span { font-size: 14px; color: #5A6478; }
.bl-stat b { font-size: 22px; font-weight: 800; }
@media (max-width: 1100px) { .bl-grid { grid-template-columns: minmax(0, 1fr); } }

/* final total including VAT (pay.js, billing.js) */
.pay-line.grand, .bl-line.grand { border-top: 2px solid #1F3C99; margin-top: 6px; padding-top: 12px; font-size: 20px; font-weight: 800; color: #1F3C99; }
.bl-line.grand b { font-weight: 800; }

/* option change (billing.js) */
.bl-opt-next { font-size: 14px; font-weight: 700; color: #9A4A00; background: #FFF4EC; border-radius: 8px; padding: 4px 8px; align-self: flex-start; }

/* 입찰 정보 (대표 10/8) */
.bd-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.bd-metric{background:#F4F6FB;border-radius:12px;padding:12px 16px}.bd-metric small{display:block;color:#5B6478;font-size:13px}.bd-metric b{font-size:24px}.bd-metric b.red{color:#B42318}
.bd-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}.bd-f small{display:block;font-size:12px;color:#5B6478}.bd-f select{height:36px;min-width:170px}
.bd-chips{display:flex;gap:6px;flex-wrap:wrap}.bd-chip{border:1px solid #CDD5E3;background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}.bd-chip.on{background:#EEF2FF;border-color:#5B74D6;color:#1F3C99;font-weight:700}
.bd-list{padding:4px 18px}.bd-row{display:grid;grid-template-columns:72px minmax(0,1fr) 170px;gap:14px;padding:14px 0;border-top:1px solid #EEF1F6;align-items:start}.bd-row:first-child{border-top:0}
.bd-dd{text-align:center;font-weight:800;border-radius:10px;padding:6px 0;font-size:15px}.bd-dd small{display:block;font-weight:500;font-size:12px}.bd-dd.urg{background:#FDECEA;color:#B42318}.bd-dd.mid{background:#FFF4E5;color:#9A4A00}.bd-dd.far{background:#F4F6FB;color:#5B6478}
.bd-t{font-weight:700;line-height:1.45}.bd-t.sm{font-size:14px}.bd-s{color:#5B6478;font-size:13px;margin-top:3px}
.bd-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.bd-tags span{font-size:12px;background:#F4F6FB;color:#45506A;border-radius:6px;padding:2px 8px}
.bd-foods{margin-top:8px;background:#F8FAFD;border-radius:8px;padding:8px 10px;font-size:13px;color:#45506A}.bd-link{background:none;border:0;color:#1F4FD1;font-weight:700;cursor:pointer;padding:0 0 0 6px}
.bd-side{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.bd-side b{font-size:16px}.bd-side small{color:#5B6478;font-size:12px}
.bd-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:16px}
.bd-aw{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #EEF1F6}.bd-aw:first-of-type{border-top:0}
.bd-lock{margin-top:4px}.bd-chips.wrap{margin-top:4px}
@media (max-width:900px){.bd-row{grid-template-columns:60px minmax(0,1fr)}.bd-side{grid-column:2;align-items:flex-start;text-align:left}.bd-grid,.bd-metrics{grid-template-columns:1fr}}
/* 추가할 수 있는 옵션 (대표 10/8): the whole box opens the 추가 창 */
.bl-opt.add { border-style: dashed; border-color: #C9D2E6; background: #FAFBFE; cursor: pointer; transition: border-color .15s, background .15s; }
.bl-opt.add:hover, .bl-opt.add:focus-visible { border-style: solid; border-color: #5B74D6; background: #F3F6FF; outline: none; }
.bl-opt.add .bl-opt-name { color: #1F2A44; }
.bl-opt.add .bl-opt-d { color: #45506A; font-size: 14px; }
.bl-opt.add .bl-opt-f b { color: #1F3C99; font-size: 18px; }
.bl-badge.add { background: #EEF2FF; color: #1F3C99; }.bl-opt.add .bl-opt-f b { white-space: nowrap; min-width: 0; }
.bl-opt.add .bl-opt-f b small { font-size: 13px; }
.bl-opt.add .bl-opt-f .btn { white-space: nowrap; flex-shrink: 0; }
/* 입찰 정보 위쪽 (대표 10/8 「휑하고」「버튼 작게 하지 말라」): one card, big controls */
.bd-page .bd-top { padding: 20px 22px; display: grid; gap: 16px; margin-bottom: 16px; }
.bd-top-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.bd-top-row .bd-f { display: grid; gap: 6px; }
.bd-top-row .bd-f > span, .bd-fl { font-size: 15px; font-weight: 800; color: #1F2A44; }
.bd-top-row .bd-f.grow { flex: 1; min-width: 220px; }
.bd-top-row .input { height: 48px; font-size: 16px; min-width: 200px; }
.bd-top-row .btn { height: 48px; padding: 0 22px; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.bd-page .bd-metrics { margin: 0; gap: 14px; }
.bd-page .bd-metric { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: #F4F6FB; }
.bd-page .bd-metric small { font-size: 15px; font-weight: 700; color: #45506A; }
.bd-page .bd-metric b { font-size: 30px; font-weight: 800; color: #1F2A44; line-height: 1.2; }
.bd-page .bd-metric b em { font-style: normal; font-size: 16px; margin-left: 2px; color: #5B6478; }
.bd-mi { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.bd-metric.blue { background: #EEF3FF; } .bd-metric.blue .bd-mi { background: #DCE6FF; color: #1F3C99; }
.bd-metric.green { background: #EAF7F0; } .bd-metric.green .bd-mi { background: #CFEFDD; color: #0F7A4D; }
.bd-metric.red { background: #FDEFEC; } .bd-metric.red .bd-mi { background: #F9D5CF; color: #B42318; } .bd-metric.red b { color: #B42318; }
.bd-metric.gray .bd-mi { background: #E3E7F0; color: #5B6478; }
.bd-filter { display: flex; gap: 14px; align-items: center; }
.bd-fl { width: 40px; flex-shrink: 0; }
.bd-page .bd-chip { height: 42px; padding: 0 16px; font-size: 15px; font-weight: 700; border-width: 1.5px; }
.bd-page .bd-chip.on { background: #1F3C99; border-color: #1F3C99; color: #fff; }
.bd-src { font-size: 14px; color: #5B6478; border-top: 1px solid #EEF1F6; padding-top: 12px; }
.bd-src .red { color: #B42318; }
.bd-page .bd-t { font-size: 17px; }
.bd-tl { color: #1F2A44; text-decoration: none; display: inline; }
.bd-tl:hover, .bd-tl:focus-visible { color: #1F3C99; text-decoration: underline; text-underline-offset: 3px; }
.bd-tl span { color: #1F3C99; font-size: 15px; }
.bd-page .bd-row { grid-template-columns: 80px minmax(0, 1fr) 210px; padding: 18px 0; }
.bd-page .bd-dd { font-size: 17px; padding: 8px 0; }
.bd-page .bd-s { font-size: 14px; }
.bd-page .bd-tags span { font-size: 13px; padding: 3px 9px; }
.bd-page .bd-side b { font-size: 18px; }
.bd-page .bd-side .btn { height: 44px; padding: 0 18px; font-size: 15px; margin-top: 6px; }
.bd-page .bd-foods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.bd-page .bd-foods .btn { height: 40px; font-size: 15px; }
@media (max-width: 900px) { .bd-page .bd-row { grid-template-columns: 64px minmax(0, 1fr); } }
/* 입찰 상세 (대표 10/8 「유료 정보인데 제목만」「진행 방법도」「양식에 맞춰 작성」) */
.bd-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14px; color: #1F2A44; background: #F4F7FF; border-radius: 10px; padding: 8px 12px; }
.bd-key b { color: #1F3C99; margin-right: 4px; }
.bd-page .bd-side { gap: 6px; }
.bd-dhead { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.bd-dhead .btn { height: 48px; padding: 0 22px; font-size: 16px; display: inline-flex; align-items: center; }
.bd-hero { display: grid; grid-template-columns: 120px minmax(0, 1fr) 230px; gap: 20px; padding: 22px; align-items: center; margin-bottom: 16px; }
.bd-dd.big { font-size: 24px; padding: 14px 0; border-radius: 14px; }
.bd-dd.big small { font-size: 13px; margin-top: 4px; }
.bd-h1 { font-size: 22px; font-weight: 800; line-height: 1.45; margin: 0 0 6px; color: #1F2A44; }
.bd-s.big { font-size: 15px; color: #45506A; }
.bd-hero-p { text-align: right; display: grid; gap: 2px; }
.bd-hero-p small { font-size: 14px; color: #5B6478; }
.bd-hero-p b { font-size: 26px; font-weight: 800; color: #1F2A44; }
.bd-dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.bd-page > section.card { margin-bottom: 16px; }
.bd-tl { display: grid; gap: 0; }
.bd-tl-i { display: grid; grid-template-columns: 18px 90px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-left: 2px solid #DCE2EE; margin-left: 8px; padding-left: 0; font-size: 16px; }
.bd-tl-i i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #9AA6C0; margin-left: -9px; }
.bd-tl-i.done i { background: #9AA6C0; }
.bd-tl-i.key i { border-color: #B42318; } .bd-tl-i.key b, .bd-tl-i.key span { color: #B42318; font-weight: 800; }
.bd-tl-i span { font-weight: 700; color: #45506A; }
.bd-rule { font-size: 16px; line-height: 1.65; color: #1F2A44; }
.bd-line { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px; }
.bd-line > div { background: #EEF3FF; border-radius: 12px; padding: 12px 14px; }
.bd-line small { display: block; font-size: 13px; color: #45506A; font-weight: 700; }
.bd-line b { font-size: 19px; font-weight: 800; color: #1F3C99; }
.bd-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.bd-kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF1F6; font-size: 15px; }
.bd-kv span { color: #5B6478; font-weight: 700; } .bd-kv b { color: #1F2A44; font-weight: 700; word-break: keep-all; }
.bd-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.bd-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.bd-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid #EEF1F6; }
.bd-no { width: 36px; height: 36px; border-radius: 50%; background: #1F3C99; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.bd-steps b { font-size: 17px; color: #1F2A44; } .bd-steps p { margin: 4px 0 0; font-size: 15px; line-height: 1.7; color: #3A4358; }
.bd-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-bottom: 10px; }
.bd-doc { display: flex; gap: 10px; align-items: center; font-size: 15px; padding: 8px 10px; border-radius: 10px; background: #F8FAFD; cursor: pointer; }
.bd-doc input { width: 20px; height: 20px; }
.bd-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bd-forms .btn { height: 48px; font-size: 15px; }
@media (max-width: 900px) { .bd-hero, .bd-dgrid, .bd-docs, .bd-forms { grid-template-columns: 1fr; } .bd-hero-p { text-align: left; } }
/* 양식 작성 (대표 10/8) */
.bd-ffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.bd-ff { display: grid; gap: 6px; } .bd-ff span { font-size: 15px; font-weight: 800; color: #1F2A44; } .bd-ff .input { height: 46px; font-size: 16px; }
.bd-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .bd-tools .btn { height: 46px; font-size: 15px; display: inline-flex; align-items: center; cursor: pointer; }
.bd-ed td { padding: 4px 6px; vertical-align: middle; } .bd-ed .input { height: 42px; font-size: 15px; width: 100%; min-width: 90px; } .bd-ed .input.sm { min-width: 64px; } .bd-ed .input.r { text-align: right; }
.bd-ed td:nth-child(2) .input { min-width: 180px; } .bd-ed .btn { height: 40px; font-size: 14px; padding: 0 12px; }
.bd-sumg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bd-sumg > div { background: #F4F6FB; border-radius: 12px; padding: 12px 16px; } .bd-sumg small { display: block; font-size: 14px; font-weight: 700; color: #45506A; } .bd-sumg b { font-size: 22px; font-weight: 800; color: #1F2A44; }
.bd-sumg .ok { background: #EAF7F0; } .bd-sumg .ok b { color: #0F7A4D; font-size: 17px; } .bd-sumg .mid { background: #FFF4E5; } .bd-sumg .mid b { color: #9A4A00; font-size: 17px; } .bd-sumg .low { background: #FDEFEC; } .bd-sumg .low b { color: #B42318; font-size: 17px; }
/* 우리 품목에서 고르기 (대표 10/8) */
.bd-pick-f { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; } .bd-pick-f .input { height: 46px; font-size: 15px; }
.bd-pick-a { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .bd-pick-a .btn { height: 42px; }
.bd-pick { max-height: 52vh; overflow: auto; border: 1px solid #E3E7F0; border-radius: 10px; }
.bd-pk { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #EEF1F6; font-size: 15px; cursor: pointer; }
.bd-pk input { width: 20px; height: 20px; } .bd-pk span { color: #5B6478; } .bd-pk em { font-style: normal; text-align: right; font-weight: 700; }
/* 식자재 도매가격 (대표 10/8) */
.pr-mine { display: inline-flex; gap: 10px; align-items: center; height: 48px; font-size: 16px; font-weight: 700; padding: 0 16px; border: 1.5px solid #CDD5E3; border-radius: 10px; cursor: pointer; }
.pr-mine input { width: 20px; height: 20px; }
.pr-t td { vertical-align: top; padding: 12px 10px; } .pr-row { cursor: pointer; } .pr-row:hover { background: #F4F7FF; }
.pr-name { font-size: 16px; } .pr-price { font-size: 18px; color: #1F2A44; }
.pr-chg { font-weight: 800; } .pr-chg.up { color: #B42318; } .pr-chg.down { color: #1F4FD1; }
.pr-ours { min-width: 240px; } .pr-our { font-size: 14px; line-height: 1.6; } .pr-kg { display: inline-block; color: #1F3C99; font-weight: 700; }
.pr-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0; } .pr-head > div { background: #F4F6FB; border-radius: 12px; padding: 10px 14px; }
.pr-head small { display: block; font-size: 13px; font-weight: 700; color: #45506A; } .pr-head b { font-size: 20px; font-weight: 800; } .pr-head em { font-style: normal; font-size: 14px; color: #5B6478; }
.pr-chart { width: 100%; height: auto; background: #FAFBFE; border-radius: 12px; }
/* 대표 10/9 「우리 품목 필드를 약간 더 늘려」: 우리 품목 넓게, 주산지 좁게 */
.pr-t .pr-ours { min-width: 360px; width: 32%; }
.pr-t td:nth-child(5) { max-width: 200px; font-size: 14px; color: #45506A; }
.pr-our { font-size: 15px; } .pr-our .pr-kg { display: block; font-size: 14px; }/* 대표 10/9 「우리 품목 옆에 여백이 너무 많아」: 한 품목 한 줄 */
.pr-t .pr-ours { min-width: 0; width: auto; white-space: nowrap; } .pr-our .pr-kg { display: inline; }
.pr-t td:nth-child(5) { max-width: 240px; }
/* 시세 품목 창 넓게 (대표 10/9) */
.sheet.pr-sheet { width: min(1180px, 96vw); max-height: 92vh; }
.pr-sheet .ex-t td, .pr-sheet .ex-t th { white-space: nowrap; }
.pr-sheet .table-wrap { max-height: none !important; overflow-x: auto; overflow-y: visible; } /* 대표 10/9 캡처: 높이 제한이 표를 겹치게 해서 창 전체 스크롤로 */.pr-hint { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 14px 18px; border-radius: 12px; background: #EEF3FF; color: #1F2A44; font-size: 16px; line-height: 1.5; }
.pr-hint svg { color: #1F3C99; flex-shrink: 0; } .pr-hint b { color: #1F3C99; }
/* 내 자료와 해지 (대표 10/9) */
.bl-close { display: grid; gap: 0; }
.bl-close-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid #EEF1F6; }
.bl-close-row:first-child { border-top: 0; }
.bl-close-row b { font-size: 16px; } .bl-close-row .btn { height: 48px; padding: 0 22px; font-size: 16px; flex-shrink: 0; }
.btn.danger-line { color: #B42318; box-shadow: inset 0 0 0 2px #E8B4AE; background: #fff; }

/* 결제 매입 사진 입력 안내 (대표 10/9) */
.pb-scan-tip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--soft-blue); border: 1px solid #C9D6F2; color: var(--btn); font-size: 16px; }
.pb-scan-tip svg { flex: 0 0 auto; }
.pb-scan-tip b { font-weight: 800; }

/* 「오늘」 대시보드 (대표 10/9, 시안 scm-today-dash-01) — PC only */
.td .card { border-radius: 14px; box-shadow: 0 2px 10px -4px rgba(23, 48, 122, .12); }
.td-kpis { display: grid; gap: 16px; margin-bottom: 16px; }
.td-kpi { display: flex; align-items: center; gap: 14px; padding: 18px 18px; position: relative; min-width: 0; }
.td-ico { flex: 0 0 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.td-ico.navy { background: var(--nav); } .td-ico.green { background: #13795B; } .td-ico.red { background: #C8323F; } .td-ico.purple { background: #6D3FC4; }
.td-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-kv small { font-size: 14px; font-weight: 700; color: var(--text-2); }
.td-kv b.num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.td-sub { font-size: 13px; color: var(--text-3); line-height: 1.4; }
.td-sub b { font-weight: 800; color: var(--text); }
.td-bad, .td-sub b.td-bad { color: #B42318; }
.td-chip { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 10px; font-size: 13px; font-weight: 800; }
.td-chip.up { background: var(--ok-bg); color: var(--ok); } .td-chip.down { background: #FDE7E9; color: #C8323F; }
.td-mid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.td-box { padding: 18px 20px; }
.td-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.td-h small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.td-opt .td-h { flex-wrap: wrap; row-gap: 2px; }
.td-list { max-height: 520px; overflow: auto; }
.td-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line); color: var(--text); }
.td-row:first-child { border-top: 0; }
.td-row:hover { background: var(--soft); color: var(--text); }
.td-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-row .badge { font-size: 13px; height: 26px; min-width: 76px; justify-content: center; }
.td-amt { width: 130px; text-align: right; font-size: 16px; font-weight: 700; }
.td-total { display: flex; justify-content: space-between; padding: 12px 6px 2px; border-top: 2px solid #CBD3E3; font-size: 16px; font-weight: 800; }
.td-todo { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--line); color: var(--text); }
.td-todo:first-of-type { border-top: 0; }
.td-todo:hover { background: var(--soft); color: var(--text); }
.td-todo.urgent { background: #FFF4EC; border-radius: 10px; padding: 14px 10px; }
.td-dot { flex: 0 0 12px; height: 12px; border-radius: 50%; }
.td-tl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-tl b { font-size: 16px; font-weight: 800; } .td-tl small { font-size: 13px; color: var(--text-3); }
.td-cnt { min-width: 40px; padding: 4px 10px; border-radius: 10px; background: var(--soft-blue); color: var(--btn); text-align: center; font-size: 16px; font-weight: 800; }
.td-go { font-size: 22px; color: #8892A6; }
.td-clear { padding: 26px 0; text-align: center; color: var(--text-3); font-size: 15px; }
.td-bot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.td-bot.one { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.td-bot.two { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr) minmax(240px, 1fr); }
.td-bars { display: flex; align-items: stretch; gap: 8px; height: 220px; padding-top: 6px; }
.td-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.td-bar i { width: 100%; max-width: 38px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: #A9BBE0; }
.td-bar.on i { background: var(--nav); }
.td-bar em { font-style: normal; font-size: 12px; color: var(--text-3); }
.td-bar.on em { font-weight: 800; color: var(--nav); }
.td-bv { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.td-orow { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--line); color: var(--text); }
.td-orow:first-of-type { border-top: 0; }
.td-orow:hover { background: var(--soft); color: var(--text); }
.td-otitle { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; font-weight: 800; overflow: hidden; }
.td-otitle, .td-otitle small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-otitle small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.td-due { flex: 0 0 auto; padding: 3px 9px; border-radius: 10px; background: #FDE7E9; color: #C8323F; font-size: 13px; font-weight: 800; }
.td-rise { flex: 0 0 auto; color: #C8323F; font-size: 14px; font-weight: 800; }
@media (max-width: 1400px) { .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 1100px) { .td-mid, .td-bot.one { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .td-kpis { grid-template-columns: minmax(0, 1fr) !important; }
  .td-bot.two { grid-template-columns: minmax(0, 1fr) !important; }
  .td-ico { flex-basis: 44px; height: 44px; }
  .td-amt { width: auto; }
}
@media (max-width: 1280px) { .td-bot.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .td-bot.two .td-chart { grid-column: 1 / -1; } }