/* 슈넬코리아 워크 (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 안팎으로 사실상 안 보이는 값이었다.
       ③ 카드 그림자를 한 단계 또렷하게 — 배경과 카드가 확실히 분리되어 보이게(고도화). */
@import url('tokens.css');   /* 토큰 한 벌 — 색·반경·그림자·글꼴은 tokens.css 에서만 바꾼다(2026-10-09) */
* { 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(--control-line); 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: 12px; 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; }   /* 숫자칸: 좌우 여백 최소화 → 제목 칸에 폭 확보 */
table.money { table-layout: auto; width: max-content; min-width: 100%; }   /* 금액 표(E13 합계표 등): 숫자를 자르지 않는다 — 가로 스크롤 */
table.money th, table.money td { overflow: visible; text-overflow: clip; }
th { background: #eaeff4; font-size: 12px; 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; }

/* 운영 현황(Struktur·WMS 파이프라인 칩) — 제품 목록 상단 (예전 app.css 에서 옮김, 2026-10-09) */
#pipeline .chip { border: 1px solid transparent; transition: border-color .1s, transform .04s; }
#pipeline .chip:hover { border-color: var(--line-strong); }
#pipeline .chip:active { transform: translateY(1px); }

/* 칩 */
.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: 12px; 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: 12px; 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: 12px; 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: 12px; }
.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: 12px; 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: 12px; 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: 12px; line-height: 1.5; }
.tax-note > b { display: block; margin-bottom: 3px; font-size: 12px; 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: 20px; height: 20px; margin-left: 4px; border: 1px solid var(--control-line); border-radius: 50%;
  background: var(--card, #fff); color: var(--sub); font-size: 12px; 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: 26px; 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: 12px; font-weight: 400; line-height: 1.55;
  text-align: left; white-space: normal; }
.help-pop > b { display: block; margin-bottom: 3px; font-size: 12px; 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; }

/* ── 주문 화면(2026-09-18) ── 개인정보 마스킹·미매칭 표시에 쓰는 최소 유틸 */
.btn.tiny { padding: 2px 8px; font-size: 12px; line-height: 1.6; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.bad { color: var(--danger); font-weight: 700; }
.warn { color: #7a4e04; font-weight: 700; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.row-pick { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
dialog.dlg { width: auto; padding: 0; border: none; background: transparent; box-shadow: none; }
dialog.dlg .panel { margin: 0; }

/* ── P6: 화면 한 줄 설명 · 빈 상태 · 로그인 입력 크기(경쟁사 공통 패턴) ── */
.pagehelp { margin: -6px 0 14px; color: var(--sub); font-size: 13px; line-height: 1.5; }
.pagehelp a { margin-left: 6px; font-weight: 600; }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--sub); font-size: 13px; line-height: 1.8; background: #fbfaf8; }
.empty b { display: block; color: var(--ink); font-size: 14px; }
.login-card input { height: 48px; font-size: 15px; }
.login-card button { height: 48px; font-size: 15px; border-radius: 10px; }
@media (max-width: 720px) { .pagehelp { display: none; } }

/* ═════════════════════════════════════════════════════════════════════
 * v6 (2026-10-08) — 밝고 단순한 모바일 우선 디자인 층
 *   흰 표면 + 아주 연한 청회색 배경 · 강조색은 로열 블루 하나 · 가장 무거운 버튼만 짙은 남색 · 둥근 카드 + 부드러운 그림자
 *   입력칸은 큰 터치 영역(모바일 ≥48px) · 라벨은 칸 위 · 단위 칩은 칸 오른쪽 안 · 단계 표시 1 › 2 › 3 · 하단 고정 «다음 단계» 바
 *   이 블록은 파일 맨 끝에 있어 위의 모든 규칙을 토큰 수준에서 덮는다(페이지별 인라인 스타일 신설 금지 원칙 유지).
 *   주의: --input(노란 칸 = 사람이 입력)·--auto(파란 칸 = 계산)는 «뜻이 있는 색»이라 바꾸지 않았다.
 * ═════════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body { background: linear-gradient(180deg, #f6f9fd 0, #eaf1fa 100%) fixed; font-size: 15px; line-height: 1.55; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn { border-color: var(--line-strong); border-radius: var(--radius-sm); }
.btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.navy:hover { background: var(--navy-dark); }
.btn.lg { height: 52px; padding: 0 22px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.panel { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.selbar { background: var(--brand-soft); border-color: #cfe0ff; }
.selbar b { color: var(--brand-dark); }
.seg button.on { background: var(--brand-soft); color: var(--brand-dark); }
header.top nav a.on { background: var(--brand-soft); color: var(--brand-dark); }
.calc-sec { color: var(--brand-dark); }

/* ── 앱 셸: 메뉴 ── */
header.top h1 a { color: var(--ink); text-decoration: none; }
header.top h1 .en { display: block; font-size: 12px; font-weight: 600; color: var(--sub); letter-spacing: 0; }
.navsearch { margin: 0 0 8px; }
.navsearch input { width: 100%; height: 40px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 14px; }
.navsearch input::placeholder { color: #5d6d83; }
header.top nav a { color: var(--ink); font-weight: 600; }
header.top nav a:hover { background: var(--brand-soft); color: var(--brand-dark); }
header.top nav a svg { opacity: .8; }
.navpin, .navall { display: flex; flex-direction: column; gap: 1px; }
.navgroup { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--sub); padding: 12px 10px 4px; }
.navgrp-h { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font-weight: 700; font-size: 13.5px; color: var(--ink); text-align: left; }
.navgrp-h:hover { background: var(--chip); }
.navgrp-h svg { transition: transform .15s; color: var(--sub); }
.navgrp.shut .navgrp-h svg { transform: rotate(-90deg); }
.navgrp.shut .navgrp-b { display: none; }
.navgrp-b { display: flex; flex-direction: column; gap: 1px; padding: 0 0 4px 6px; }
.navgrp-b a { font-weight: 500; }
.navgrp-b a.on, .navpin a.on { font-weight: 700; }
nav a[hidden], .navgrp[hidden], .navpin[hidden], .navgroup[hidden] { display: none !important; }
.gscard { display: block; position: relative; overflow: hidden; margin: 0 0 10px; padding: 11px 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid #cfe0ff; text-decoration: none; color: var(--ink); }
.gscard b { display: block; font-size: 14px; color: var(--brand-dark); }
.gscard span { display: block; font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.gscard i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--brand); border-radius: 0 4px 4px 0; }
.gscard.done { background: #eef8f2; border-color: #c4e6d2; } .gscard.done b { color: #14683c; }
.gscard:hover { border-color: var(--brand); }
header.top nav a.gscard { display: block; white-space: normal; padding: 11px 12px 14px; border-radius: 12px; }
header.top nav a.gscard:hover { background: var(--brand-soft); }
.avatar { display: none; width: 38px; height: 38px; border-radius: 50%; background: #ffd23f; color: #3b2f00; font-weight: 800; font-size: 13px; align-items: center; justify-content: center; text-decoration: none; flex: 0 0 auto; }
.navtoggle { display: none; position: relative; width: 44px; height: 44px; border: 0; background: none; color: var(--brand); border-radius: 10px; align-items: center; justify-content: center; flex: 0 0 auto; }
.navtoggle .badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d93025; color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.navscrim { display: none; }
.navclose { display: none; }
.navout { margin: 10px 0 0; align-self: flex-start; }
.tenant-banner { background: #7f1d1d; color: #fff; padding: 8px 16px; font-size: 14px; text-align: center; }

/* 단계 표시 1 › 2 › 3 — 지금 단계는 파랑, 나머지는 회색(끝낸 단계는 초록 번호) */
.stepper { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; font-size: 14px; }
.stepper a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 6px; border-radius: 999px; text-decoration: none; color: var(--faint); font-weight: 600; }
.stepper a b { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: #e3eaf3; color: #44546a; font-size: 13px; }
.stepper a.done b { background: #d7e9dd; color: #14683c; }
.stepper a.cur { color: var(--brand-dark); background: var(--brand-soft); }
.stepper a.cur b { background: var(--brand); color: #fff; }
.stepper .sep { color: var(--faint); font-size: 18px; line-height: 1; }
@media (max-width: 760px) { .stepper a span { display: none; } .stepper a.cur span { display: inline; } }

/* 하단 고정 «다음 단계» 바 — 모바일에서만 */
.ctabar { display: none; }

/* ── 폼 부품: 라벨은 칸 위 · 큰 터치 영역 · 단위 칩 ── */
.field { display: block; margin: 0 0 16px; }
.field > .lbl { display: block; margin: 0 0 6px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.field > .hlp { display: block; margin: 6px 0 0; font-size: 13px; color: var(--sub); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; min-height: 48px; height: 48px; background: var(--field); border: 1px solid var(--control-line); border-radius: 12px; padding: 0 14px; font-size: 16px; color: var(--ink); }
.field textarea { height: auto; padding: 12px 14px; }
.field input::placeholder, .field textarea::placeholder { color: #5d6d83; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--brand); box-shadow: var(--focus); }
.field .inwrap { display: flex; align-items: stretch; width: 100%; }
.field .inwrap input { border-radius: 12px 0 0 12px; border-right: 0; text-align: right; }
.field .inwrap .unit { display: inline-flex; align-items: center; padding: 0 14px; background: var(--unit); border: 1px solid var(--line-strong); border-radius: 0 12px 12px 0; font-weight: 700; color: #2c3b50; }
.field .icon-in { position: relative; }
.field .icon-in svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #7b8ba1; pointer-events: none; }
.field .icon-in input:not([type=checkbox]):not([type=radio]) { padding-left: 46px; }
.callout { display: block; background: var(--brand-soft); border: 1.5px solid var(--brand-line); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.callout.bad { background: var(--danger-bg); border-color: var(--danger-line); }
.callout.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.addbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 2px dashed var(--line-strong); border-radius: 12px; background: transparent; color: var(--sub); font-weight: 700; }
.addbtn:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.pillcard { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-size: 14.5px; }
.pillcard svg { flex: 0 0 auto; color: var(--navy); }
.sheet-back { position: fixed; inset: 0; background: rgba(15, 27, 45, .5); display: flex; align-items: flex-end; justify-content: center; z-index: 80; }
.sheet { width: min(480px, 100%); background: #fff; border-radius: 22px 22px 0 0; padding: 26px 22px 28px; box-shadow: var(--shadow-pop); }
@media (min-width: 761px) { .sheet-back { align-items: center; } .sheet { border-radius: 22px; } }

/* 로그인 화면 */
.login-body { background: linear-gradient(180deg, #f6f9fd, #e6eef9); padding: 20px 16px; }
.login-card { border: 0; border-radius: 22px; box-shadow: var(--shadow-pop); padding: 32px 24px 26px; width: min(440px, 100%); }
.login-card h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.5px; }
.login-card h1 .en { display: block; font-size: 13px; font-weight: 600; color: var(--sub); letter-spacing: 0; margin-top: 4px; }
.login-card .sub { font-size: 15px; }
.login-card label { color: var(--ink); font-weight: 700; font-size: 14.5px; }
.login-card input { height: 52px; font-size: 16px; background: var(--field); border-radius: 12px; }
.login-card button { height: 52px; border-radius: 12px; background: var(--brand); font-size: 16px; }
.login-card button:hover { background: var(--brand-dark); }
.login-card button:disabled { background: #9ec3ff; cursor: default; }

/* ── 데스크톱: 왼쪽 레일 ── */
@media (min-width: 1101px) {
  header.top { width: 252px; background: #fff; border-right: 1px solid var(--line); }
  header.top h1 { padding-bottom: 12px; margin-bottom: 10px; }
  main.wrap { margin-left: 252px; }
  main.wrap.wide { margin-left: 252px; }
  .pagehead h2 { font-size: 26px; font-weight: 800; }
  .navtoggle, .avatar, .navout { display: none !important; }
  header.top { overflow-x: hidden; }
  header.top nav { min-width: 0; width: 100%; }
}

/* ── 모바일·태블릿: 얇은 고정 헤더 + 서랍 메뉴 ── */
@media (max-width: 1100px) {
  :root { --ctl-h: 44px; }
  header.top { position: sticky; top: 0; z-index: 60; min-height: 58px; padding: 6px 12px 6px 16px; gap: 8px; background: #fff; border-bottom: 1px solid var(--line); }
  header.top h1 { border-right: 0; padding-right: 0; font-size: 15px; line-height: 1.2; }
  header.top h1 .en { display: none; }
  header.top .who, header.top #outBtn { display: none; }
  .avatar, .navtoggle { display: inline-flex; }
  header.top nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: 5; display: none; flex-wrap: nowrap; overflow-x: hidden; overflow-y: auto; background: #fff; padding: 16px 14px 28px; box-shadow: var(--shadow-pop); overscroll-behavior: contain; }
  body.nav-open header.top nav { display: block; animation: navin .18s ease-out; }
  @keyframes navin { from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  header.top nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; }
  header.top .navgroup { display: block; }
  .navgrp-h { min-height: 44px; font-size: 15px; }
  .navclose { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 6px 0 10px; border: 0; background: none; font-weight: 800; font-size: 17px; color: var(--ink); }
  .navclose svg { color: var(--sub); }
  .navscrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 27, 45, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .navscrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .ctabar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 20px rgba(15, 40, 80, .1); }
  .ctabar .cta { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; font-size: 16.5px; text-decoration: none; }
  .ctabar .cta:hover { background: var(--brand-dark); }
  body.has-ctabar { padding-bottom: 84px; }
  main.wrap, main.wrap.wide { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .btn { min-height: 44px; }
  input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
  .panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { header.top nav, .navscrim, .navgrp-h svg { transition: none !important; animation: none !important; } }

/* ── 내 오픈마켓(업체 정보 화면) ── */
.ptitle { margin: 4px 0 6px; font-size: 28px; line-height: 1.25; font-weight: 800; letter-spacing: -.5px; }
.psub { margin: 0 0 18px; color: var(--sub); font-size: 15.5px; max-width: 46em; }
h3.mkgrp { margin: 22px 0 10px; font-size: 16px; }
.mksum { margin: 0 0 12px; font-size: 15px; }
.mk { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; overflow: hidden; }
.mk.sel { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11, 107, 255, .1); }
.mk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px; padding: 10px 16px; cursor: pointer; }
.mk-head input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--brand); flex: 0 0 auto; margin: 0; }
.mk-name { font-weight: 800; font-size: 16px; }
.mk .chip { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef1f6; color: #4f5f75; }
.mk .chip.api { background: var(--brand-soft); color: var(--brand-dark); }
.mk .chip.ok { background: #d7e9dd; color: #14683c; } .mk .chip.warn { background: #fff0d1; color: #7a4e04; }
.mk-body { padding: 4px 16px 14px 52px; border-top: 1px dashed var(--line); background: #fbfdff; }
.mk-body .mkway { margin: 12px 0; font-size: 14.5px; color: var(--sub); }
.keyrow { display: flex; gap: 8px; align-items: stretch; margin: 0 0 6px; }
.keyrow input { flex: 1 1 auto; min-width: 0; }
.keyrow .btn { height: 48px; flex: 0 0 auto; }
.keystate { display: inline-block; font-size: 12.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #fdeceb; color: #8e1f15; }
.keystate.on { background: #d7e9dd; color: #14683c; }
@media (max-width: 760px) { .mk-body { padding-left: 16px; } .keyrow { flex-wrap: wrap; } .keyrow .btn { flex: 1 1 100%; } }

@media (min-width: 1101px) { main.wrap > .pagehead ~ .ptitle { display: none; } }

/* 공용: 고급 접기 · 화면 안 구역 바로가기 */
details.adv { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; margin: 18px 0 24px; box-shadow: var(--shadow); }
details.adv > summary { min-height: 48px; display: flex; align-items: center; font-weight: 800; cursor: pointer; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: "▾"; margin-left: auto; color: var(--sub); }
details.adv[open] > summary::after { content: "▴"; }
details.adv .panel { box-shadow: none; }
nav.jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
nav.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
nav.jump a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }


/* ═════════════════════════════════════════════════════════════════════
 * v7 (2026-10-09) — 디자인 통일 점검 층: 로고·링크 대비·터치 크기·모바일 표 카드·글자 크기
 *   토큰은 tokens.css 한 벌(이 파일과 flow.css 가 같이 쓴다). 아래는 «같은 제품처럼 보이게» 하는 공용 규칙만 둔다.
 * ═════════════════════════════════════════════════════════════════════ */
/* 로고 — 간편 모드·결과 확인(flow.css .fh .logo)과 같은 S 표식 */
header.top h1 a.logo { display: flex; align-items: center; gap: 10px; }
header.top h1 a.logo i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: #fff; display: inline-grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 800; }
header.top h1 .logo-t { display: block; line-height: 1.2; }
header.top h1 .logo-t .en { display: block; }
@media (max-width: 1100px) { header.top h1 a.logo i { width: 28px; height: 28px; } }
/* 데스크톱에서도 누르는 것은 작지 않게 */
header.top #outBtn, .navout { min-height: 36px; }
#dash .chip { padding: 5px 11px; min-height: 30px; display: inline-flex; align-items: center; }
.btn.tiny { min-height: 28px; }
/* 같은 줄에 붙은 글자 링크(«가이드» «업체 설정에서 고르기 →»)도 누르기 쉽게 — 위아래로만 영역을 넓히고 글자 모양은 그대로 */
.pagehelp a, .psub a, .legend a, .muted a { display: inline-block; padding: 8px 2px; margin: -8px 0; }
/* 화면 읽기 도우미 */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
/* 넓은 표 한복판의 «비었음/불러오는 중» 안내 — 표가 화면보다 넓어도 보이는 폭 안에 머문다 */
.tbl-note { position: sticky; left: 0; width: min(720px, calc(100vw - 72px)); margin: 0; text-align: center; white-space: normal; }
/* 모바일 표 → 카드(shell.js 가 열 제목을 각 칸의 data-l 로 달아 준다) */
.cardrow-note { display: table-row; }
@media (max-width: 760px) {
  main table.cardable, main table.cardable tbody, main table.cardable tr, main table.cardable td { display: block; width: 100%; max-width: none; }
  main table.cardable { table-layout: auto; font-size: 14px; }
  main table.cardable thead, main table.cardable tr.cardhead { display: none; }
  main table.cardable tbody tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 10px; background: #fff; box-shadow: var(--shadow); }
  main table.cardable tbody tr:nth-child(even) td, main table.cardable tbody tr:hover td { background: transparent; }
  main table.cardable td { border: 0; padding: 5px 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-align: left; }
  main table.cardable td.num { font-family: var(--font); text-align: left; }
  main table.cardable td[data-l]:not(:empty)::before { content: attr(data-l); display: block; color: var(--sub); font-size: 12.5px; font-weight: 700; line-height: 1.4; }
  main table.cardable tbody tr.cardrow-note { padding: 12px; box-shadow: none; border-style: dashed; text-align: center; color: var(--sub); }
  main table.cardable tbody tr.cardrow-note td { text-align: center; }
  main table.cardable td .btn { margin: 2px 6px 2px 0; white-space: normal; height: auto; min-height: 44px; padding: 8px 12px; text-align: left; line-height: 1.35; }
  .tablebox:has(table.cardable) { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
  /* 카드로 못 바꾼 표(열이 아주 많음)는 칸을 찌그러뜨리지 말고 가로로 민다 */
  main :where(div, section):has(> table:not(.cardable)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main table:not(.cardable) { table-layout: auto; min-width: 100%; width: max-content; }
  /* 글자 크기 — 12px 안팎의 보조 글자를 모바일에서 읽을 수 있게 */
  .muted, .legend, .pagehelp, .sheet-note, .hint { font-size: 13.5px; }
  .chip { font-size: 12.5px; }
  .panel > h2, .panel > h3 { font-size: 16px; }
  th { font-size: 12.5px; }
}

[tabindex="-1"]:focus { outline: none; }
.help:focus-visible { box-shadow: var(--focus); border-color: var(--brand); }

/* 모바일 터치 크기 — 누르는 것은 44px 이상 */
@media (max-width: 1100px) {
  header.top h1 a.logo { min-height: 44px; }
  .avatar { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  #dash .chip { min-height: 44px; padding: 0 14px; }
  .seg { height: auto; min-height: 44px; }
  .seg button { min-height: 44px; padding: 0 14px; }
  .menu-item { min-height: 44px; }
  .pager .pg-num, .pager .pg-nav { min-width: 44px; height: 44px; }
  .pager .pg-per select { height: 44px; }
  .btn.sm, .selbar .btn { height: auto; min-height: 44px; }
}

/* 연결 끊김 알림(shell.js) */
.nettoast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; max-width: min(92vw, 520px); padding: 12px 16px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-pop); }
.nettoast[hidden] { display: none; }