/* 슈넬코리아 워크 (SchnellKorea WORK) — 디자인 시스템 v5 (2026-09-10)
   원칙: 모든 화면은 이 파일의 토큰·컴포넌트만 쓴다. 페이지별 인라인 스타일 신설 금지.
   v4: 버튼 규격 통일(높이·포커스·비활성) · 드롭다운 메뉴(details.menu) · 세그먼트(.seg)
       · 검색필드(.search) · 선택 작업바(.selbar) · 반응형(내비 스크롤·툴바 적층·표 밀도)
   v5: 가독성 고도화(2026-09-10 지시 — "글자도 흐리고 테두리도 흐리다") —
       ① Pretendard를 웹폰트로 자가 호스팅한다. 이전엔 이름만 적어 두고 실제 파일이 없어,
          이 서체가 설치돼 있지 않은 PC(사실상 전부)에서는 매번 말군 고딕으로 대체되고 있었다 —
          화면마다 보던 흐릿한 인상의 원인이 바로 이것이었다(폰트가 "적용 안 됨").
       ② 카드·표·입력의 테두리(--line, --line-strong)를 눈에 보이는 진하기로 올렸다.
          기존 --line(#e7e5e1)은 흰 카드 위에서 대비 1.3:1 안팎으로 사실상 안 보이는 값이었다.
       ③ 카드 그림자를 한 단계 또렷하게 — 배경과 카드가 확실히 분리되어 보이게(고도화). */
:root {
  --bg: #f4f2ef; --card: #ffffff; --ink: #0c0c0b; --sub: #4a4a4a;
  --line: #d8d3c9; --line-strong: #949494;
  --brand: #326916; --brand-dark: #1d4b00; --brand-soft: #eef8c6;
  --danger: #c0392b; --warn: #b07a1e; --ok: #326916; --chip: #eef2f6;
  --input: #fff7d6; --auto: #eaf2fb; --accent: #2563a8;
  --radius: 10px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,32,.05), 0 6px 16px rgba(16,24,32,.09);
  --shadow-pop: 0 10px 34px rgba(16,32,48,.16), 0 2px 8px rgba(16,32,48,.08);
  --sp: 16px;
  --ctl-h: 36px;               /* 컨트롤 공통 높이 — 버튼·입력·셀렉트 줄맞춤의 단일 기준 */
  --focus: 0 0 0 3px var(--brand-soft);
  --font: 'Pretendard Variable', Pretendard, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;
}
/* 자가 호스팅 Pretendard(가변 폰트, 2026-09-10) — CDN·시스템 설치 여부에 기대지 않는다.
   font-weight 범위는 배포판이 실제로 담고 있는 축(45~920)을 그대로 선언한다. */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('fonts/PretendardVariable.woff2') format('woff2-variations'), url('fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { letter-spacing: -0.2px; }
a { color: var(--brand); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
input:not([type=checkbox]):not([type=radio]), select { height: var(--ctl-h); }   /* 툴바 줄맞춤 */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
input.inp { background: var(--input); }
input.auto, .auto-cell { background: var(--auto); }

/* 로그인 */
.login-body { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(160deg, #f8f7f4, var(--bg)); }
.login-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px; padding: 34px; width: min(370px, 92vw); box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card .sub { margin: 0 0 22px; color: var(--sub); }
.login-card label { display: block; margin-bottom: 13px; color: var(--sub); font-size: 13px; }
.login-card input { width: 100%; margin-top: 5px; }
.login-card button { width: 100%; padding: 11px; border: 0; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 700; margin-top: 8px; }
.login-card button:hover { background: var(--brand-dark); }

/* 상단바 + 내비 */
header.top { display: flex; align-items: center; gap: 14px; background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 22px; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(16,32,48,.03); }
header.top h1 { font-size: 16px; margin: 0; white-space: nowrap; padding-right: 8px; border-right: 1px solid var(--line); }
header.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
header.top nav a { color: var(--sub); text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
header.top nav a:hover { background: var(--chip); color: var(--ink); }
header.top nav a.on { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
header.top .grow { flex: 1; }
header.top .who { color: var(--sub); white-space: nowrap; font-size: 13px; }
main.wrap { max-width: 1400px; margin: 22px auto; padding: 0 18px; }
main.wrap.wide { max-width: none; margin: 22px 0; padding: 0 22px; }   /* 제품 목록: 화면 가로 100% 활용 → 표 여유폭 확보(가로 스크롤 최소화) */

/* 툴바 */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.toolbar .sep { width: 1px; height: 22px; background: var(--line); flex: 0 0 auto; }

/* 버튼 위계 — 전 화면 공통 규격: 높이 var(--ctl-h)·포커스 링·비활성. <a class="btn">도 동일하게 선다. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; white-space: nowrap;
  font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none;
  transition: background .12s, border-color .12s, transform .04s; }
.btn:hover { background: #f7f9fb; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--sub); }
.btn.ghost:hover { background: var(--chip); color: var(--ink); }
.btn.danger { color: var(--danger); border-color: #e6cdc9; }
.btn.danger:hover { background: #faf0ee; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
/* 표 안의 행 동작(저장·삭제 등)은 맨글자가 아니라 버튼으로 보여야 한다(2026-09-04 지시) —
 * ghost는 툴바용 최소 버튼이라 표 안에서는 테두리 있는 소형 버튼으로 승격 */
table .btn.ghost { border-color: var(--line); background: var(--card); color: var(--ink); height: 30px; padding: 0 10px; font-size: 12.5px; }
table .btn.ghost:hover { background: #f7f9fb; }
/* 취급유형 세그먼트(3PL 화면) — 전 유형을 노출해 클릭 한 번으로 지정(2026-09-04 지시). 표 안에서는 소형 규격 */
.seg.htseg { height: 26px; }
.seg.htseg button { padding: 0 9px; font-size: 12px; cursor: pointer; }
.btn svg { flex: 0 0 auto; }

/* 검색필드 — 아이콘 내장 */
.search { position: relative; display: inline-flex; align-items: center; }
.search svg { position: absolute; left: 10px; pointer-events: none; color: var(--sub); }
.search input { padding-left: 32px; width: 100%; }

/* 세그먼트 컨트롤 — 표/칸반 등 배타 전환 */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; height: var(--ctl-h); flex: 0 0 auto; }
.seg button { border: 0; background: #fff; padding: 0 13px; font-weight: 600; font-size: 13px; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--brand-soft); color: var(--brand-dark); }
.seg button:focus-visible { outline: none; box-shadow: inset var(--focus); }

/* 드롭다운 메뉴 — <details class="menu"><summary class="btn">…</summary><div class="menu-list">…</div></details>
   JS는 바깥클릭·항목클릭 닫기만 담당(assets/list.js initMenus). */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: "▾"; font-size: 10px; margin-left: 5px; opacity: .6; }
details.menu[open] > summary { background: var(--chip); }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 40; }
.menu-list.left { right: auto; left: 0; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 12px;
  border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 600; font-size: 13.5px;
  color: var(--ink); text-decoration: none; cursor: pointer; }
.menu-item:hover { background: var(--chip); }
.menu-item .hint { margin-left: auto; font-size: 11.5px; color: var(--sub); font-weight: 500; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 6px; }
.menu-title { font-size: 11px; color: var(--sub); font-weight: 800; letter-spacing: .3px; padding: 6px 12px 3px; }
.menu-row { display: flex; gap: 6px; padding: 4px 8px 6px; align-items: center; }
.menu-row select { flex: 1; min-width: 0; }

/* 선택 작업바 — 행 체크 시에만 나타나는 컨텍스트 바(버튼 나열 대신 선택 맥락에 작업을 모음) */
.selbar[hidden] { display: none; }   /* display:flex가 hidden 속성을 이기지 않도록 */
/* 같은 함정이 버튼에도 있다(2026-09-16 클린와인 «조건 해제»에서 발견) — .btn의 display:inline-flex가
   hidden 속성을 이겨 «숨겼다고 쓴 버튼»이 그대로 보였다. 요소마다 고치지 말고 한 줄로 못 박는다. */
[hidden] { display: none !important; }
.selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--brand-soft);
  border: 1px solid #d8e9b0; border-radius: var(--radius-sm); padding: 7px 12px; margin-bottom: 12px; }
.selbar b { color: var(--brand-dark); font-size: 13.5px; }
.selbar .btn { height: 30px; padding: 0 11px; font-size: 12.5px; background: #fff; }

/* 대시보드 요약칩 줄 — 칩이 곧 필터 버튼(클릭 = 해당 상태로 걸러 보기) */
#dash { gap: 6px; }
#dash .chip { border: 1px solid transparent; cursor: pointer; transition: border-color .1s, transform .04s; }
#dash .chip:hover { border-color: var(--line-strong); }
#dash .chip:active { transform: translateY(1px); }
#dash .chip.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* 테이블 — 엑셀식: 상하 가로 스크롤바 둘 다 노출, 컬럼폭 고정+드래그 조정 */
.tablebox { overflow-x: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
/* 긴 이력·상수 표는 패널 안에서만 스크롤(페이지 세로 폭주 방지) — thead는 고정 */
.tablebox.capped { max-height: 420px; overflow-y: auto; }
.tablebox.capped thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.topscroll { overflow-x: auto; overflow-y: hidden; height: 16px; margin-bottom: -1px; }
.topscroll > div { height: 1px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
th, td { padding: 7px 7px; border-bottom: 1px solid var(--line-strong); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
td.num, th.num { padding-left: 4px; padding-right: 8px; }   /* 숫자칸: 좌우 여백 최소화 → 제목 칸에 폭 확보 */
th { background: #eaeff4; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; color: #24303d; position: sticky; top: 0; z-index: 1; position: relative; cursor: pointer; }
.colresize { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.colresize:hover, .colresize:active { background: var(--brand); opacity: .35; }
tbody tr:nth-child(even) td { background: #fbfcfd; }
tbody tr:hover td { background: var(--brand-soft); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.editcell { cursor: cell; border-bottom: 1px dashed var(--line-strong); }
.editcell:hover { background: var(--input); }

/* 제품 대표사진: 호버 시 확대 미리보기(레이아웃 밀림 없이 겹쳐서 확대) */
td:has(.thumbwrap) { overflow: visible; }
.thumbwrap { display: block; width: 44px; height: 44px; position: relative; }
img.pthumb { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; display: block; border: 1px solid var(--line); background: var(--chip); transition: transform .14s ease, box-shadow .14s ease; position: relative; z-index: 1; }
.thumbwrap:hover img.pthumb { transform: scale(5.4); transform-origin: top left; box-shadow: 0 12px 32px rgba(16,32,48,.35); border-color: var(--line-strong); z-index: 30; position: relative; }
img.pthumb-lg { width: 100%; max-width: 260px; border-radius: var(--radius); border: 1px solid var(--line-strong); display: block; transition: transform .15s ease, box-shadow .15s ease; }
img.pthumb-lg:hover { transform: scale(1.9); transform-origin: top left; box-shadow: 0 16px 40px rgba(16,32,48,.35); position: relative; z-index: 30; }

/* 칩 */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 700; color: var(--ink); }
.chip.warn { background: #fbf1dc; color: #7a4e04; }
.chip.ok { background: var(--brand-soft); color: var(--brand-dark); }
.chip.miss { background: #f8e7e4; color: var(--danger); }

/* 컬럼 노출/순서 패널 — 엑셀식 순서 보정(▲▼) + 노출 체크 */
.colpanel { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; display: none; flex-wrap: wrap; gap: 6px 18px; box-shadow: var(--shadow); }
.colpanel.show { display: flex; }
.colpanel-hint { flex-basis: 100%; margin: 0 0 4px; }
.colrow { display: flex; align-items: center; gap: 6px; }
.colrow label { font-size: 13px; color: var(--ink); user-select: none; font-weight: 600; }
.colarrows { display: inline-flex; gap: 1px; }
.colarrows button { border: 1px solid var(--line-strong); background: #fff; border-radius: 4px; font-size: 10px; line-height: 1; padding: 3px 4px; cursor: pointer; color: var(--ink); }
.colarrows button:disabled { opacity: .3; cursor: default; }
.colarrows button:not(:disabled):hover { background: var(--chip); }

/* 레이아웃 그리드 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp); }
@media (max-width: 980px) { .grid2 { grid-template-columns: 1fr; } }

/* 카드(패널) — 섹션 제목에 좌측 강조 바, 번호 뱃지 */
.panel { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px; margin-bottom: var(--sp); box-shadow: var(--shadow); }
.panel > h2, .panel > h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; padding-left: 11px; border-left: 3px solid var(--brand); line-height: 1.3; }
.panel > h3 { font-size: 14px; border-left-color: var(--line-strong); }

/* 그룹 헤더(여러 카드를 묶는 섹션 밴드) */
.grouphead { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.grouphead:first-of-type { margin-top: 6px; }
.grouphead .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; }
.grouphead h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.grouphead .desc { color: var(--sub); font-size: 12.5px; }
.grouphead .rule { flex: 1; height: 1px; background: var(--line); }

/* 폼 행 — 라벨 정렬·간격 통일 */
.frow { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: center; margin-bottom: 9px; }
.frow label { color: var(--sub); font-size: 13px; }
.frow input, .frow select, .frow textarea { width: 100%; }
.frow .ro { padding: 7px 10px; border-radius: var(--radius-sm); background: var(--auto); min-height: 22px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; gap: 3px; } }

.legend { font-size: 12px; color: var(--sub); margin-bottom: 12px; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 10px; border: 1px solid var(--line-strong); }
.err { color: var(--danger); }
.muted { color: var(--sub); font-size: 12px; font-weight: 500; }   /* 가변 폰트의 기본(400)이 작은 크기에서 흐려 보여 살짝 올림(2026-09-10) */

/* 페이지네이션 — 상·하단 공용(assets/pager.js) */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.pager .pg-info { font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.pager .pg-nums { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.pager .pg-num, .pager .pg-nav { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; font-weight: 600; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pager .pg-num:hover, .pager .pg-nav:hover:not(:disabled) { background: var(--chip); }
.pager .pg-num.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .pg-nav:disabled { opacity: .4; cursor: default; }
.pager .pg-ellipsis { color: var(--sub); padding: 0 2px; }
.pager .pg-per { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sub); margin-left: auto; }
.pager .pg-per select { height: 30px; padding: 0 8px; }
.pager .pg-nums + .pg-per { margin-left: 12px; }

/* 전폭(wide) 페이지 가독성 — 표는 화면 가로를 다 쓰되, 설명 문단은 읽기 좋은 폭으로 제한 */
main.wrap.wide > .legend, main.wrap.wide .panel > p.muted, main.wrap.wide > p.legend { max-width: 92ch; }
main.wrap.wide .panel { padding: 16px 20px 18px; }

/* 한줄 고정 표(table.oneline) — 셀 줄바꿈 금지 + 넘치는 텍스트는 말줄임(.clip, 전체는 툴팁) */
table.oneline { table-layout: fixed; }
table.oneline td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.oneline .clip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
table.oneline .chip { vertical-align: middle; }

/* 로고(h1) — 홈 링크 + 두 줄(한글/영문) 표기. shell.js가 a 태그로 감싼다 */
header.top h1 a { color: inherit; text-decoration: none; display: block; }
header.top h1 a:hover { color: var(--brand-dark); }
header.top h1 .en { display: block; font-size: 11.5px; font-weight: 600; color: var(--sub); letter-spacing: .02em; margin-top: 2px; }

/* 마켓 등록 시트 — 담당자 질문(배송비?·판매가?·이익?·규격?·마켓 입력?)에 답하는 카드 묶음(제품 상세 최상단) */
/* 마켓 등록 시트 — 윗줄은 «가로를 3등분»한 3칸 고정(2026-09-09 지시).
 * 이전에는 auto-fit이라 화면이 넓으면 4칸까지 늘어나 카드 폭이 그때그때 달라졌다.
 * 가로 100%를 쓰는 카드(.wide)는 그 아래 한 줄을 통째로 차지한다. */
/* 시트 첫 줄은 네 칸 — 판매가 → 세금 → 배송비 → 규격 순으로 읽힌다(2026-09-09 지시).
   세금 항목이 배송 카드 안에 얹혀 있어 그 칸만 길었는데, 따로 떼어 내니 네 칸의 길이가 비슷해졌다. */
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1500px) { .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sheet-grid { grid-template-columns: 1fr; } }
/* 가로 전체를 쓰는 카드(오픈마켓 항목·경쟁사가) — 값이 길어 3칸 그리드 안에서 줄바꿈이 심했다.
   한 줄을 통으로 쓰고 내부는 2열로 나눠 «한 항목 = 한 줄»이 되게 한다(2026-09-08). */
.sheet-card.wide { grid-column: 1 / -1; }
/* 오픈마켓 줄 — 왼쪽 «뭘 넣지?» 70% · 오른쪽 «마켓별 수수료» 30%(2026-09-09 지시).
   시트는 3칸 격자라, 이 줄만 전체 폭을 차지하고 그 안에서 7:3으로 다시 나눈다. */
.sheet-row-7030 { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 3fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .sheet-row-7030 { grid-template-columns: 1fr; } }
.sheet-card.wide .sheet-kv .k { flex-basis: 140px; }   /* 한 줄에 한 항목 — 값이 길어도 접히지 않게 폭을 다 쓴다 */
.sheet-card { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 13px 15px; background: #fff; }
.sheet-card > .q { font-size: 13px; font-weight: 800; color: var(--brand-dark); margin-bottom: 9px; }
.sheet-card .big { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sheet-kv { display: flex; align-items: baseline; gap: 6px; padding: 3.5px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.sheet-kv:last-child { border-bottom: 0; }
.sheet-kv .k { flex: 0 0 104px; color: var(--sub); font-weight: 500; }
.sheet-card.wide .sheet-kv .v { word-break: keep-all; overflow-wrap: anywhere; }
.sheet-kv .v { flex: 1; font-variant-numeric: tabular-nums; word-break: break-all; }
.sheet-kv .cp { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 13px; opacity: .45; padding: 0 2px; }
.sheet-kv .cp:hover { opacity: 1; }
/* «세금 합»·«배송비 총합» — 카드 안 최종 합계 행을 진한 파란색으로 강조(2026-09-10 지시) */
.sheet-total { color: var(--accent); }
.sheet-miss { color: var(--danger); background: #f8e7e4; border-radius: 5px; padding: 0 7px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sheet-note { font-size: 11px; color: var(--sub); margin-top: 8px; line-height: 1.55; white-space: normal; }
/* 가상 계산 한 줄 바 — 시트 제목 아래에 판매가·매입가·수수료 세 가지를 나란히 둔다(2026-09-09).
 * 화면이 좁으면 항목 단위로 접힌다(항목 안에서는 줄이 끊기지 않게 nowrap). */
.simbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13px;
  padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.simbar #simReset { margin-left: auto; }   /* 시뮬레이션 중에만 나타나는 «원래대로» — 오른쪽 끝으로 */
.simbar .sim-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.simbar .sim-item > b { font-variant-numeric: tabular-nums; }
.simbar input, .simbar select { padding: 4px 6px; font-size: 12px; text-align: right; }
.simbar select { text-align: left; }
.sheet-sim { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.sheet-sim + .sheet-sim { border-top: 0; padding-top: 0; margin-top: 6px; }   /* 판매가·매입가 두 줄은 한 묶음으로 보이게 */
.sheet-sim select { padding: 4px 6px; font-size: 12px; }
.sheet-sim input { width: 110px; text-align: right; }

/* 자동계산 패널 구역 헤더 — 제품값/배송비/세금/최종을 단락으로 구분(제품 상세) */
.calc-sec { margin: 14px 0 6px; padding: 4px 0 4px 9px; border-left: 3px solid var(--brand);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--brand-dark);
  background: color-mix(in srgb, var(--brand-soft) 45%, transparent); border-radius: 0 6px 6px 0; }
.calc-sec:first-child { margin-top: 0; }

/* 접이식 섹션 —<details class="fold"><summary><h2>제목</h2></summary><div class="fold-body">…</div></details>
   긴 부가 정보(변경 이력 등)를 기본 접힘으로. 패널 제목 스타일을 summary 안에서도 유지한다. */
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2, details.fold > summary h3 { margin: 0; font-size: 15px; font-weight: 700; padding-left: 11px; border-left: 3px solid var(--brand); line-height: 1.3; }
details.fold > summary::after { content: "펼치기 ▾"; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sub); }
details.fold[open] > summary::after { content: "접기 ▴"; }
details.fold > summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
details.fold > .fold-body { margin-top: 12px; }

/* 다이얼로그 */
dialog { border: 1px solid var(--line-strong); border-radius: 14px; padding: 24px; width: min(480px, 94vw); box-shadow: 0 20px 60px rgba(16,32,48,.25); }
dialog::backdrop { background: rgba(12,22,34,.4); backdrop-filter: blur(2px); }
dialog h2 { margin: 0 0 16px; font-size: 16px; }
dialog label { display: block; margin-bottom: 11px; color: var(--sub); font-size: 13px; }
dialog input, dialog select { width: 100%; margin-top: 5px; }
dialog .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* 칸반 — 컬럼 카드화(배경 밴드·헤더 고정 느낌) */
#kanban { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding-bottom: 8px; }
#kanban .kcol { min-width: 230px; flex: 1 0 230px; background: #ece9e4; border-radius: var(--radius); padding: 8px; }
#kanban .kcol > .khead { display: flex; align-items: center; gap: 7px; padding: 4px 6px 8px; font-weight: 800; font-size: 13px; }
#kanban .kcard { border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 10px; margin-top: 7px; background: #fff; box-shadow: var(--shadow); }
#kanban .kcard a { text-decoration: none; }

/* ── 관리프로그램 앱 셸(2026-08-31) — 데스크톱: 좌측 사이드바 + 페이지 헤더. 모바일: 기존 상단바 유지.
   HTML은 그대로 두고 header.top을 CSS로 세로 전환 + assets/shell.js가 그룹 라벨·아이콘·페이지 헤더를 주입한다. */
@media (min-width: 1101px) {
  header.top { position: fixed; top: 0; left: 0; bottom: 0; width: 226px; flex-direction: column; align-items: stretch;
    gap: 0; padding: 18px 12px 14px; border-right: 1px solid var(--line); border-bottom: 0; box-shadow: none; overflow-y: auto; }
  header.top h1 { font-size: 15px; line-height: 1.35; white-space: normal; border-right: 0; padding: 0 10px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  header.top nav { flex-direction: column; gap: 1px; }
  header.top nav a { display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 7.5px 10px; font-size: 13px; }
  header.top nav a svg { flex: 0 0 auto; opacity: .75; }
  header.top nav a.on { font-weight: 700; }
  header.top nav a.on svg { opacity: 1; }
  header.top .navgroup { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--sub);
    padding: 14px 10px 4px; text-transform: uppercase; }
  header.top .grow { flex: 1; }
  header.top .who { padding: 8px 10px 4px; border-top: 1px solid var(--line); }
  header.top #outBtn { justify-content: flex-start; margin: 4px 2px 0; }
  main.wrap { margin: 0 auto; padding: 22px 26px 40px; margin-left: 226px; max-width: none; }
  main.wrap > :first-child { margin-top: 0; }
  main.wrap:not(.wide) > * { max-width: 1180px; }
  main.wrap.wide { margin: 0 0 0 226px; padding: 22px 26px 40px; }
  /* 페이지 헤더(shell.js 주입) */
  /* 페이지 헤더 한 줄에 제목·경로와 함께 요약 칩을 세우고, 검색·필터는 바로 아래 줄로 접는다
     (2026-09-11 지시 — 본문에 두 줄로 떠 있던 것을 이 줄로 올린 것). */
  .pagehead { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px;
    margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .pagehead > .headbar { margin: 0; }
  .pagehead > .headbar.chips { flex: 1 1 auto; min-width: 0; }   /* 제목과 같은 줄 — 남는 가로를 쓴다 */
  .pagehead > .headbar:not(.chips) { flex: 1 1 100%; }           /* 검색·필터는 아래 한 줄을 통으로 */
  .pagehead .crumb { font-size: 12px; color: var(--sub); }
  .pagehead h2 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
  /* 목록 sticky 툴바는 이제 사이드바 옆 본문 기준 */
  .cw-wines-toolbar { top: 0; }
}
/* 좁은 화면: 제목·경로만 감춘다. 헤더째 감추면 그 안으로 옮긴 검색·필터까지 사라진다(2026-09-11) */
@media (max-width: 1100px) {
  .pagehead { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 0; padding: 0; margin: 0; }
  .pagehead > h2, .pagehead > .crumb { display: none; }
  .pagehead > .headbar { flex: 1 1 100%; margin: 0 0 8px; }
  header.top .navgroup { display: none; }
}

/* ── 반응형 — 내비 가로 스크롤, 툴바 적층, 표 밀도, 다이얼로그 폭 ── */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) {
  header.top { gap: 10px; padding: 8px 14px; }
  header.top nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  header.top nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  header.top h1 { font-size: 14px; border-right: 0; padding-right: 0; }
  header.top .who { display: none; }
  main.wrap, main.wrap.wide { margin: 14px 0; padding: 0 12px; }
  .toolbar { gap: 6px; }
  .toolbar .search, .toolbar .search input { width: 100% !important; }
  .toolbar > select { flex: 1 1 40%; min-width: 0; }
  table { font-size: 12.5px; }
  th, td { padding: 6px 6px; }
  .panel { padding: 14px 14px; }
  dialog { padding: 18px; }
  .menu-list { min-width: 200px; max-width: 86vw; }
}

/* 3PL 카테고리 요율 — 4칸 그리드(세로로만 길어지지 않게). 칸에 숫자를 넣으면 바로 저장된다. */
.rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 1400px) { .rate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .rate-grid { grid-template-columns: 1fr; } }
.rate-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); }
.rate-item.pending { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, transparent); }
.rate-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-state { flex: 0 0 auto; font-size: 11px; }
.rate-x { flex: 0 0 auto; width: 24px; padding: 2px 0; text-align: center; line-height: 1; }
.rate-in { width: 82px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.rate-in:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* EAN 입력칸 아래 판정 한 줄 (2026-09-09) — 값이 있는지가 아니라 «진짜 바코드인지»를 그 자리에서 알려 준다. */
.ean-note { grid-column: 2; margin-top: 3px; font-size: 11px; line-height: 1.35; }
.ean-note.ok { color: var(--ok, #1a7f4b); }
.ean-note.bad { color: var(--danger); }

/* 오픈마켓 수수료 비교(2026-09-09) — 같은 판매가에서 마켓별로 얼마가 남는지 한 줄씩 */
.mk-head, .mk-row { display: grid; grid-template-columns: 1fr auto auto 44px; gap: 8px; align-items: center; padding: 4px 0; }
.mk-head { border-bottom: 1px solid var(--line); color: var(--sub); font-size: 11px; font-weight: 700; margin-top: 8px; }
.mk-row { border-bottom: 1px dashed var(--line); font-size: 12px; }
.mk-row.on { background: var(--brand-soft); border-radius: 6px; padding-left: 4px; padding-right: 4px; }
/* 이 제품에 실제 저장된(b2c_fee_rate) 수수료 행 — 가상 계산과 구분되는 진한 파란색 강조(2026-09-10 지시) */
.mk-row.saved { background: #e7eefb; border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.mk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-fee { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 3px; }
.mk-fee-inp { width: 58px; padding: 2px 4px; height: 24px; }
.mk-fee-inp.saved { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.mk-profit { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.chip.acc { background: #e7eefb; color: var(--accent); }

/* 세금 카드의 «어떤 운임이 들어가고 빠졌는지» 설명(2026-09-09) — 넣은 것은 초록, 뺀 것은 회색 취소선 */
.tax-note { grid-column: 1 / -1; margin: 6px 0 2px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font-size: 11.5px; line-height: 1.5; }
.tax-note > b { display: block; margin-bottom: 3px; font-size: 11px; color: var(--sub); }
.tax-note .in, .tax-note .out { display: block; font-variant-numeric: tabular-nums; }
.tax-note .in { color: var(--ok, #1a7f4b); }
.tax-note .out { color: var(--sub); text-decoration: line-through; text-decoration-color: var(--line); }
.tax-note .muted { margin-top: 4px; }

/* «?» 풍선도움말(2026-09-09) — 긴 설명은 평소엔 감춰 두고 마우스를 올리거나 키보드 초점이 갈 때만 띄운다.
   자바스크립트 없이 CSS만으로 동작한다. 카드가 잘라 내지 않도록 카드 위(z-index)로 띄운다. */
.help { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--card, #fff); color: var(--sub); font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle; }
.help:hover, .help:focus { border-color: var(--brand); color: var(--brand); outline: none; }
.help-pop { display: none; position: absolute; left: 0; top: 20px; z-index: 40; width: 320px; max-width: 78vw;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card, #fff);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); color: var(--fg, #222); font-size: 11.5px; font-weight: 400; line-height: 1.55;
  text-align: left; white-space: normal; }
.help-pop > b { display: block; margin-bottom: 3px; font-size: 11px; color: var(--sub); }
.help:hover .help-pop, .help:focus .help-pop, .help:focus-within .help-pop { display: block; }
/* 오른쪽 끝 칸에서는 말풍선이 화면 밖으로 나가지 않게 왼쪽으로 붙인다 */
.sheet-card:last-child .help-pop, .tax-note .help-pop { left: auto; right: 0; }