/* ===== 검색 자동완성 · 담은 상품 (2차) ===== */
.ac { position: relative; }
.ac__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto;
  background: var(--color-bg); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.ac__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.ac__row:last-child { border-bottom: none; }
.ac__row:hover, .ac__row.is-on { background: var(--color-bg-soft); }
.ac__main { flex: 1; min-width: 0; }
.ac__name { font-weight: var(--font-weight-semibold); }
.ac__sub  { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.ac__none { padding: var(--space-4); color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

.cart { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.cart__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
}
.cart__row:last-child { border-bottom: none; }
.cart__name { flex: 1; min-width: 0; }
/* ★ .cart__qty · .cart__won 은 옛 한 줄짜리 장바구니 칸이었다.
     장바구니가 세 층(.cart2 · .ccell)이 되면서 안 쓴다 — sale.css 를 본다 */
.cart__x {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--color-text-tertiary); font-size: 16px; padding: 4px 6px;
}
.cart__x:hover { color: var(--color-danger, #d33); }

/* ===== POS 껍데기 전용 ===== */
.screen { display: none; }
/* ★★ 켜진 화면은 **세로 묶음(flex)** 이다 (2026-08-27).
     전에는 block 이었다. 그러면 카드끼리 그냥 맞붙는다 — 지금 카드 사이에 보이던 얇은 틈은
     간격이 아니라 카드 그림자가 번진 것이었다 (사장님 지적 「너무 붙어 있잖아」).
   ★★ display 는 **여기 .is-active 에만** 준다. .screen 에 주면 안 켜진 화면까지 다 보인다.
     (한 번 그렇게 넣었다가 여섯 화면이 한꺼번에 쏟아진 적이 있다)
   ★ gap 은 layout.css 가 아니라 여기서 정한다 — layout.css 에는 .screen 규칙이 아예 없다. */
.screen.is-active {
  display: flex; flex-direction: column;
  gap: var(--space-6);
}

/* ★★ 카드 **안쪽** 자식들을 세로로 벌리는 규칙이다. 카드 사이 간격이 아니다.
     카드 사이는 .screen.is-active 의 gap 이 맡는다 (2026-08-27).
   ★★ 격자 감싸개(.grid--2 같은 것)에는 **절대 같이 붙이지 말 것.**
     이 규칙이 display: flex 라 격자를 세로 묶음으로 덮어써 2열이 1열이 된다.
     layout.css 가 먼저 실려서 .grid--2 가 지고, 카드가 위아래로 쌓인다.
     (2026-08-27 설정 화면에서 실제로 그랬다 — 사장님이 「왜 이렇게 된 거야」 하고 잡으셨다) */
.section-gap { display: flex; flex-direction: column; gap: var(--space-4); }


/* 기간 칩 */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  height: 34px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-bg); font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); cursor: pointer;
  transition: all var(--transition-fast);
}
.chip:hover { background: var(--color-bg-hover); }
.chip.is-active {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-invert); font-weight: var(--font-weight-semibold);
}

/* 빠른 검색 강조 박스 */
.quick-box {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.quick-box__title {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-primary); margin: 0 0 var(--space-3);
}
.quick-box__row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.quick-box__row .select { width: 160px; }
.quick-box__row .input { flex: 1; min-width: 200px; }

/* 빈 상태 */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-10) var(--space-4);
  color: var(--color-text-tertiary); font-size: var(--font-size-md);
  text-align: center;
}
.empty__icon { font-size: 28px; }

/* 결제 요약 줄 */
.pay-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-bg-soft); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.pay-total__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.pay-total__value { font-size: var(--font-size-xl); }

/* 일자 선택 그리드 (매출정산)
   ★ 1~31 을 **한 줄로** 편다 (사장님 지시 2026-08-27). 두 줄로 접히면
     「17일」 이 어디쯤인지 눈이 매번 다시 센다. 넓은 화면에서는 한 칸이 50px 쯤 된다.
   ★ 좁아지면 그때만 두 줄·네 줄로 접는다 (아래 미디어쿼리). */
.day-grid { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: var(--space-1); }
.day-cell {
  height: 34px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-bg); font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.day-cell:hover { background: var(--color-bg-hover); }
.day-cell.is-active {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-invert); font-weight: var(--font-weight-bold);
}
@media (max-width: 1024px) { .day-grid { grid-template-columns: repeat(16, minmax(0, 1fr)); } }

/* 인라인 행 유틸 */
.inline-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inline-row .select, .inline-row .input { width: auto; flex: 1; min-width: 110px; }
.inline-row .input--narrow { flex: 0 0 90px; min-width: 90px; }

/* ★ 머리띠 (2026-08-24) — 카드 위쪽에 옅은 물빛 띠를 깔아 이름표처럼 보이게 한다.
   카드 안쪽 여백(space-6)만큼 밖으로 끌어내 카드 폭을 꽉 채운다.
   ★ 카드에 overflow:hidden 을 못 쓰므로(검색 목록이 잘린다) 여기서 모서리를 둥글린다 */
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary-border);
  /* ★ 카드 테두리가 1.5px 이므로 여기서도 1.5px 을 뺀다 (2026-08-27).
       안 빼면 띠 모서리가 테두리 안쪽에서 0.5px 어긋나 삐져나온 것처럼 보인다. */
  border-radius: calc(var(--radius-lg) - 1.5px) calc(var(--radius-lg) - 1.5px) 0 0;
}
.card__head .card__title { margin: 0; }

/* ===== 2단계 다듬기 ===== */

/* 일자 단추 — ★ 날짜 색은 전부 같다 (사장님 지시 2026-08-27).
   전에는 남은 날 초록·밑진 날 빨강·앞날 회색으로 칠했다. 서른한 칸이 알록달록해서
   「오늘이 어디」 를 찾는 데 오히려 시간이 걸렸고, 색을 설명하는 안내 문구까지 달려 있었다.
   표시하는 것은 둘뿐이다 — 오늘(테두리)과 고른 날(물빛).
   ★ is-plus·is-minus·is-future 규칙은 되살리지 말 것. 스크립트도 그 클래스를 더는 안 붙인다. */
.day-cell.is-today  { border-color: var(--color-primary); border-width: 2px; }
.day-cell.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--font-weight-bold);
}

/* 큰 숫자 셋 (번 돈 − 쓴 돈 = 남은 돈) — 한눈에 들어오게 */
#se-big .card { padding: var(--space-5) var(--space-6); }
#se-big .stat__label { font-size: var(--font-size-md); color: var(--color-text-secondary); }
#se-big .stat__value { font-size: 32px; letter-spacing: -0.03em; }
@media (max-width: 820px) { #se-big .stat__value { font-size: 26px; } }


/* 표 안의 작은 지우기 단추는 줄에 손을 올렸을 때만 진하게 */
.table .cart__x { opacity: .35; }
.table tr:hover .cart__x { opacity: 1; }


/* 검색 결과 목록이 위쪽 띠에 가리지 않게 */
.ac__list { z-index: var(--z-dropdown); }

/* 인쇄할 때 표가 잘리지 않게 */
@media print {
  .table-wrap { border: 1px solid #ccc; }
  .day-grid { display: none; }
  /* ★ 인쇄는 block 으로 되돌린다 — 세로 묶음(flex)이면 카드가 쪽을 넘어갈 때
       break-inside: avoid 가 잘 안 듣는다. layout.css 의 인쇄 규칙과 짝이다. */
  .screen.is-active { display: block; }
  /* ★ 인쇄가 위 띠 한 단추로 모이면서 여덟 화면을 한 번씩 뽑아 보고 걷어낸 것들 (2026-09-07):
       고르개·찾기 칸·날짜 칸은 종이에 빈 네모만 남긴다. 입고 화면의 「입고 · 타이어」 고르개(.io-top)만은
       무엇을 뽑았는지 알려 주므로 남긴다 — 단추 없이 글자만 찍히게 테두리를 뺀다 */
  .card__head:not(.io-top) .input, .card__head:not(.io-top) .select, .card__head .chips .chip:not(.chip--mon),
  .card__head .inline-row > span:empty, .chip:not(.chip--mon), [id$="-go"] { display: none !important; }
  /* 달 알약은 종이에 「2026년 9월」 글자로만 남긴다 — 무엇을 뽑았는지 알아야 한다 (2026-09-07) */
  .chip.chip--mon { display: inline-flex !important; border: 0; background: none; color: #000; padding: 0; }
  .chip--mon__ar { display: none !important; }
  .chip--mon__sel { -webkit-appearance: none; appearance: none; color: #000; font-weight: 700; padding: 0 4px 0 0; }
  .io-top { border: 0; padding: 0 0 8px; background: none; }
  .io-top .select { border: 0; padding: 0; font-weight: 700; background: none; -webkit-appearance: none; appearance: none; }
  .quick-box, .svc2, #io-wnew, #io-new { display: none !important; }
  .iot__empty { display: none !important; }
  .table-wrap { overflow: visible !important; }
  .qres__scroll { max-height: none !important; overflow: visible !important; }
  .stbox, .st-scroll { max-height: none !important; overflow: visible !important; }
}

/* ===== 둘러보기 띠 · 도움말 (4단계) ===== */
.tour {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}
.tour b { color: var(--color-text); }
@media (max-width: 820px) { .tour { padding: var(--space-3) var(--space-4); font-size: var(--font-size-xs); } }
@media print { .tour { display: none !important; } }

/* 맡기 입력 줄은 종이에 찍지 않는다 — 빈 칸만 나와서 보관 목록을 뽑을 때 지저분하다 */
@media print { #keep-form { display: none !important; } }

/* ===== 좁은 화면에서 장바구니·줄이 넘치지 않게 ===== */
@media (max-width: 640px) {
  .cart__row { flex-wrap: wrap; gap: var(--space-2); }
  .cart__name { flex: 1 0 100%; }
  .inline-row .select, .inline-row .input { min-width: 0; }
  .inline-row .input--narrow { flex: 1 1 72px; min-width: 72px; }
  .quick-box__row .input { min-width: 0; }
  .quick-box__row .select { width: 100%; }
  .card__head { align-items: flex-start; }
  .card__head .inline-row { width: 100%; }
  .card__head .inline-row .input { flex: 1; width: auto !important; }
  .day-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pay-total { flex-wrap: wrap; gap: var(--space-1); }
}

/* 아주 좁은 폰 */
@media (max-width: 400px) {
  .chips { gap: var(--space-1); }
  .chip { height: 30px; padding: 0 var(--space-3); }
  .table th, .table td { padding: var(--space-2) var(--space-3); }
}

/* ★ 「오늘 요약」 규칙(.today·__one·__label·__value)을 지웠다 (2026-09-04).
     고객·판매 맨 위 요약을 뺀 것이 2026-08-23 인데 css 만 남아 있었다 —
     여덟 화면 어디에도 이 class 가 붙은 자리가 하나도 없다(진짜 화면에서 세어 봤다).
     숫자는 매출현황·매출정산에 있다. 되살리려면 이 자리에 다시 넣는다. */

/* ===== 인쇄할 때만 보이는 머리말 ===== */
.printhead { display: none; }
@media print {
  .printhead {
    display: block;
    padding: 0 0 10px;
    border-bottom: 2px solid #333;
    margin-bottom: 14px;
  }
  .printhead b { font-size: 17px; }
  .printhead span { color: #555; font-size: 12px; }
}

/* ★ 옛 「한눈에」 화면 규칙을 통째로 지웠다 (2026-09-04).
     .home-store · .home-store__top/__bar/__num · .home-todo · .dot · .dot--danger/warning/muted.
     그 화면은 2026-08-27 에 걷어냈다 (사장님: *「관리자가 모든 걸 한눈에 보려고 만들었는데,
     생각해 보니 이걸 만들면 사용자가 복잡해 보일 수 있고 어렵다고 느낄 수 있어」*).
     지금 남은 것은 전체매장 화면의 **매출현황 하나**이고, 그것은 .rvsum__* 와 표를 쓴다.
     ★ 2026-08-25 에 막대 그래프(.bars)를 지운 것과 같은 까닭이다 —
       안 쓰는 규칙을 남겨 두면 다음 사람이 「어딘가에서 쓰겠지」 하고 못 지운다. */

/* ===== 들어오는 문 (로그인) =====
   ★ 화면 한복판에 상자 하나. 고를 것이 적어야 헤매지 않는다. */
.gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-soft);
  overflow-y: auto;
}
/* ★ 옛 문 속 규칙(.gate__box·__brand·__sub·__msg·__small·__foot)을 지웠다 (2026-09-04).
     문은 2026-08-24 에 시안 1 「카운터」 로 다시 지었고, 그 옷은 **gate.css 의 .gt-\*** 다.
     ⚠ 그런데 gate.js 의 알림칸 만 옛 이름(gate__msg)을 계속 갈아 끼우고 있어서,
       **문에 말이 한 번이라도 뜨면 시안의 옷이 벗겨졌다.** 같은 날 그것도 함께 고쳤다.
     ★ 바깥 덮개인 .gate 와 .linkish 는 지금도 쓴다 — 그것만 남긴다. */
.linkish {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--color-primary); font: inherit; font-size: var(--font-size-sm); text-decoration: underline;
}

/* 사이드바 구분선 — 여기 아래가 관리자 몫이다 */
.sidebar__line {
  height: 1px; background: var(--color-border);
  margin: var(--space-4) var(--space-5);
}
.sidebar__cap {
  padding: 0 var(--space-5) var(--space-2);
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  letter-spacing: .04em;
}

/* 사이드바 아래 — 누구로 들어와 있나 · 로그아웃
   ★★ 두 줄로 쌓는다 (사장님 지시 2026-08-31).
     전에는 한 줄에 나란히 두고 남는 자리에 밀어 넣었다. 사이드바가 240px(좁으면 200px)뿐이라
     **메일 주소는 「…」 로 잘리고 「로그아웃」 은 「로그아 / 웃」 으로 접혔다.**
     가로로 나눌 자리가 애초에 없다 — 위아래로 쌓으면 둘 다 온전히 보인다.
   ★ 말줄임(text-overflow)을 쓰지 않는다. 누구로 들어와 있는지는 **끝까지 보여야 하는 값**이라
     자르는 것보다 접는 것이 낫다. 아주 긴 메일이면 두 줄로 접힌다. */
.sidebar__me {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-1); margin-bottom: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
}
/* 메일 주소는 띄어쓰기가 없어 그냥 두면 칸을 넘는다. 어디서든 접히게 한다 */
.sidebar__me span {
  max-width: 100%; line-height: 1.45;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
/* ★ 「로그아웃」 이 두 줄로 접히던 자리다 — 줄 글씨와 같은 크기로 맞추고 안 접히게 못박는다 */
.sidebar__me .linkish { font-size: var(--font-size-xs); white-space: nowrap; }

/* ===== 설정 — 매장 하나가 카드 하나 =====
   ★ 매장·사람·정보를 따로 흩어 놓지 않는다. 매장 안에 그 매장 것이 다 들어간다. */
.shopcard {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.shopcard.is-open { border-color: var(--color-primary-border); }
.shopcard__top {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
}
.shopcard__top:hover { background: var(--color-bg-soft); }
.shopcard__top:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.shopcard.is-open .shopcard__top { background: var(--color-primary-soft); }
.shopcard__arrow { color: var(--color-text-tertiary); width: 12px; }
.shopcard__name { font-size: var(--font-size-lg); }
.shopcard__sum {
  margin-left: auto; font-size: var(--font-size-sm); color: var(--color-text-secondary);
  text-align: right;
}
.shopcard__body { padding: var(--space-5); border-top: 1px solid var(--color-border); }
.shopcard__people { margin-top: var(--space-4); }
.shopcard__h3 { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.invcode { letter-spacing: .15em; font-size: var(--font-size-lg); }

@media (max-width: 640px) {
  .shopcard__top { flex-wrap: wrap; }
  .shopcard__sum { margin-left: 0; width: 100%; text-align: left; }
}

/* 재고 0 — 「없음」 이라 쓰지 않고 0개로 쓰되, 눈에는 띄게 */
.table .is-zero { color: var(--color-danger); font-weight: var(--font-weight-semibold); }

/* ═══ 입고 이력 — 칸으로 갈라 한 건을 한 줄로 ═══
   ★ 카드 세 줄이던 것을 2026-08-24 에 칸으로 바꿨다. 한 칸에 열 건 넘게 들어간다.
   ★★ **칸 수는 하나 아니면 둘이다** (2026-09-04 에 css 를 코드에 맞췄다).
     세 칸(입고·반입·반출)이던 것이 2026-08-31 4차에 **입고 한 칸**이 됐다 —
     반입·반출·반품이 각자 자기 화면에 자기 기록표를 가졌기 때문이다.
     옛 「조정」 기록이 남아 있을 때만 둘째 칸이 생긴다.
     screens.js 의 이력() 이 .iocols--1 / .iocols--2 를 갈아 끼운다.
   ⚠ 그래서 여기 기본값을 3열로 두면 안 된다 — 코드가 만들 수 없는 모양이다. */
.iocols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.iocol { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.iocol__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}
.iocol__cnt { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.iocol__none { padding: var(--space-5); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
/* ★ 옛 이력 줄 규칙(.iorow·__q·__main·__name·__sub)을 지웠다 (2026-09-04).
     지금 이력 줄은 아래 .iorow2b 다 — 품목 · 수량 · 일계 · 누계 넉 칸짜리.
     .iorow 가 붙는 자리는 여덟 화면 어디에도 없다 (진짜 화면에서 세어 봤다).
   ★ 넷째 칸 규칙(.iocols > .iocol:nth-child(4))도 함께 지웠다 — 칸은 많아야 둘이다. */
@media (max-width: 1100px) { .iocols { grid-template-columns: 1fr; } }
@media print { .iocols--2 { grid-template-columns: repeat(2, 1fr); } }

/* ===== 매출현황 요약 한 장 (2026-08-27)
   ★ 라벨 왼쪽, 값 오른쪽. 왼쪽 열은 돈, 오른쪽 열은 개수.
   ★★ 값은 전부 같은 크기·같은 검정이다 (사장님 지시).
     하나만 물빛이나 초록으로 골라 놓으면 나머지가 덜 중요해 보인다.
     딱 하나 예외가 마이너스 마진이다 — 밑진 날은 빨강으로 알려 준다. */
.rvsum { padding: 0; }
.rvsum__cap {
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary-border);
  border-radius: calc(var(--radius-lg) - 1.5px) calc(var(--radius-lg) - 1.5px) 0 0;
  font-weight: var(--font-weight-medium);
}
/* ★ 두 열을 반씩 나누지 않고 왼쪽에 나란히 모은다.
     반씩 나누면 넓은 화면에서 오른쪽 열(개수)이 화면 한가운데서 시작해,
     줄 폭을 묶어 놓은 보람이 없어진다. 남는 자리는 오른쪽에 그냥 둔다. */
.rvsum__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: start;
  gap: 0 var(--space-10);
  padding: var(--space-4) var(--space-6) var(--space-5);
}
/* ★★ 한 줄의 폭을 못박는다 (사장님 지시 2026-08-27).
     전에는 라벨을 왼쪽 끝, 값을 오른쪽 끝으로 밀어 두었다.
     매장 화면이 넓어서 26,092,390원 이 화면 한가운데까지 달아났고,
     「이 숫자가 어느 줄 것인가」 를 눈이 매번 다시 찾아야 했다.
     폭을 묶어 두면 화면이 아무리 넓어져도 이 줄은 더 안 늘어난다. */
.rvsum__row {
  display: flex; align-items: baseline;
  max-width: 320px; padding: var(--space-2) 0;
}
.rvsum__row > span { flex: 0 0 auto; color: var(--color-text-secondary); }
/* 차림표처럼 점선으로 잇는다 — 짧아도 눈이 라벨에서 값까지 미끄러진다 */
.rvsum__dot {
  flex: 1; min-width: var(--space-3);
  margin: 0 var(--space-2);
  border-bottom: 1px dotted var(--color-border-strong);
  transform: translateY(-5px);
}
/* 값 — 크기·색을 여기 한 곳에서만 정한다. 줄마다 다르게 두지 않는다 */
.rvsum__row > b {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.rvsum__row > b.is-minus { color: var(--color-danger); }
/* 구분선도 줄과 같은 폭이어야 한다 — 혼자 길면 줄이 짧아 보이는 게 아니라 선이 삐져나와 보인다 */
.rvsum__line { height: 1px; max-width: 320px; background: var(--color-border); margin: var(--space-2) 0; }
/* 좁은 화면 — 두 열이 붙으면 값이 라벨에 부딪힌다. 한 열로 편다 */
@media (max-width: 820px) {
  .rvsum__cols { grid-template-columns: 1fr; gap: 0; }
}

/* ===== 막대 줄 — 무엇이 얼마나 팔렸나
   ★ 지금은 아무 화면도 안 쓴다 (2026-08-27 에 매출현황에서 막대 두 장을 뺐다).
     되살릴 때 그대로 쓰려고 규칙만 남겨 둔다.
   ★ 숫자만 늘어놓으면 어느 것이 큰지 사람이 머리로 견뎌야 한다. 막대는 눈이 대신 본다. */
.barlist { display: flex; flex-direction: column; gap: var(--space-4); }
.barrow__top { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.barrow__name { font-weight: var(--font-weight-semibold); }
.barrow__q { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.barrow__v { margin-left: auto; font-weight: var(--font-weight-semibold); }
.barrow__bar {
  position: relative; height: 20px;
  background: var(--color-bg-soft); border-radius: var(--radius-sm); overflow: hidden;
}
.barrow__bar i {
  display: block; height: 100%;
  background: var(--color-primary); border-radius: var(--radius-sm);
}
.barrow__pct {
  position: absolute; right: var(--space-2); top: 0; line-height: 20px;
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
}

/* ===== 급여대장 — 한 달을 한 판으로
   ★ 「그날 근무자」 칩만 보여 주면 한 달을 보려고 날짜를 서른 번 눌러야 한다.
     사람이 한 줄, 1~31일이 칸. 칸을 누르면 근무 ↔ 휴무. */
.paybook { display: flex; flex-direction: column; gap: var(--space-3); }
.payrow {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.payrow__who { display: flex; gap: var(--space-2); align-items: center; }
.payrow__who .input--sm { height: 32px; font-size: var(--font-size-sm); }
.payrow__who .input--sm:nth-child(1) { flex: 0 0 120px; }
.payrow__who .input--sm:nth-child(2) { flex: 0 0 90px; }
.payrow__who .input--sm:nth-child(3) { flex: 0 0 120px; text-align: right; }
.payrow__who button { margin-left: auto; }
/* ★★ 날짜 칸은 16칸씩 두 줄이다 (사장님 지시 2026-08-27).
   전에는 칸 크기를 28px 로 못박고 flex-wrap 으로 흘려보냈다. 급여대장이 화면 절반 폭으로
   들어가자 칸이 제멋대로 접혀 1일 밑에 몇 일이 오는지 알 수 없게 됐다.
   16칸 격자로 못박으면 **1일 아래에 늘 17일** 이 온다 — 가로로도 세로로도 읽힌다.
   ★ 칸 너비를 안 정한다. 폭에 맞춰 저절로 늘고 줄어든다 (일자 선택 그리드와 같은 방식). */
.payrow__days {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 3px; margin: var(--space-3) 0;
}
.paycell {
  width: auto; height: 30px; padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs); font-family: inherit;
  cursor: pointer;
}
.paycell:hover { border-color: var(--color-primary); }
.paycell.is-on {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-text-invert); font-weight: var(--font-weight-semibold);
}
.paycell.is-future { opacity: .45; }
.paycell.is-today { box-shadow: 0 0 0 2px var(--color-primary-soft); }
.payrow__sum { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ===== 하루 정산 (2026-08-27) — 옛 「그날 셈」(.daysum) 을 걷어냈다
   ★ 왼쪽은 포스가 채우는 숫자, 오른쪽은 매장이 넣는 것. 이 한 줄이 카드의 규칙이다.
   ★ 줄 자체는 매출현황 요약과 **같은 .rvsum__row** 를 쓴다 — 두 화면이 같아 보여야 한다.
     여기서 줄 모양을 따로 만들지 말 것. 만들면 언젠가 두 화면이 다르게 늙는다.
   ★ 두 열을 반씩 나누지 않고 왼쪽에 나란히 모은다 (rvsum__cols 와 같은 까닭). */
/* ★★ 매출현황 ㅣ 지출 ㅣ 정산 — 세 열 (사장님 지시 2026-08-27)
   ★ 하루 정산(매출정산)과 매장 상세(전체매장)가 **같은 이 규칙**을 쓴다.
     두 화면이 같은 것을 다른 모양으로 보여 주면 사장님이 매번 다시 읽으셔야 한다.
   ★★ flex-wrap: nowrap — 열이 아래로 밀리면 안 된다 (사장님 지시 「열 밀리지 않게」).
     전에 grid + flex-wrap 으로 두었더니 폭이 조금만 모자라도 셋째 열이 아래로 떨어졌다.
     그러면 「매출현황 ㅣ 지출」 두 열처럼 보여서 셈이 끊긴다.
   ★ 폭을 못박는다. 화면이 넓어져도 금액이 오른쪽으로 달아나지 않게 —
     매출현황 요약(.rvsum)에서 320px 로 못박은 것과 같은 까닭이다.
   ★ 세로 금은 열과 열 **사이 한가운데** 온다. 그래서 여백을 반씩 나눠
     margin-left(바깥) + padding-left(안쪽) 둘로 준다. 한쪽에만 주면 금이 한쪽에 붙는다. */
.cols3 { display: flex; flex-wrap: nowrap; align-items: stretch; }
/* ★★ 폭을 못박지 않고 **최대 320px 까지만** 벌린다.
     못박아 두면 1400px 보다 좁은 화면에서 세 열이 카드 밖으로 삐져나온다
     (nowrap 이라 아래로 접히지도 않고 그냥 잘린다). 좁아지면 셋이 같이 줄어든다.
     넓어지면 320px 에서 멈춘다 — 금액이 오른쪽으로 달아나지 않게. */
.cols3 > * { flex: 1 1 0; min-width: 0; max-width: 320px; }
.cols3 > * + * {
  max-width: calc(320px + var(--space-6));  /* 테두리 안쪽이 320px 이 되게 */
  margin-left: var(--space-6);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border-strong);
}
.cols3__cap {
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.cols3__note {
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  margin: var(--space-3) 0 0; line-height: 1.6;
}
/* ★ 1200px 아래에서는 세로로 편다 — 여기서는 금이 가로로 눕는다.
     한 열이 270px 밑으로 내려가면 지출 줄(항목·금액·✕)이 못 들어간다.
     1200px 에서 한 열이 딱 272px 이라 여기가 경계다. */
@media (max-width: 1200px) {
  .cols3 { flex-direction: column; }
  .cols3 > *, .cols3 > * + * { max-width: 360px; }
  .cols3 > * + * {
    margin-left: 0; padding-left: 0; border-left: 0;
    margin-top: var(--space-5); padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-strong);
  }
}
/* 지출 한 줄 — 항목 · 금액 · 지우기. 창을 만들지 않으므로 이 줄이 적는 자리다 */
.expline { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.expline .input--sm { height: 32px; font-size: var(--font-size-sm); }
.expline [data-expitem] { flex: 1 1 auto; min-width: 0; }
.expline [data-expwon] { flex: 0 0 96px; text-align: right; }
/* 지우기 단추가 없는 빈 줄도 칸 너비를 맞춰 둔다 — 안 그러면 금액 칸이 혼자 오른쪽으로 튄다 */
.expline__gap { flex: 0 0 32px; }

/* ===== 급여대장 · 지출 종합 좌우 2열 (사장님 지시 2026-08-27)
   ★ 두 판 다 오른쪽에 자리를 반이나 놀리고 있었다. 나란히 세우면 화면이 절반으로 짧아진다.
   ★ align-items: start — 두 카드 길이가 다르다 (직원이 늘면 왼쪽이 길어진다).
     맞춰 늘리면 짧은 쪽 카드 안에 빈 바닥이 생겨 오히려 더 허전하다.
   ★ 1200px 아래에서는 위아래로 편다 — 반쪽이 600px 밑으로 내려가면
     급여대장 날짜 칸이 다시 못 읽게 작아진다. */
.sesplit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6); align-items: start;
}
@media (max-width: 1200px) { .sesplit { grid-template-columns: 1fr; } }
/* ★★ 3열 — 급여대장 · 지출 일계 · 지출 누계 (사장님 확정 2026-09-07 「사이즈 좋아」).
     비율 1.25 : 1.35 : 0.45. 1300px 아래에서는 급여대장이 위로 한 줄, 일계·누계가 아래 두 열 */
.sesplit3 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, .45fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1300px) { .sesplit3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sesplit3 > .card:first-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .sesplit3 { grid-template-columns: 1fr; } }
/* 직원 카드 — 줘야 할 돈 · 준 돈 · 남은 돈, 지급 기록, 「+ 지급」 줄 (2026-09-07) */
.payrow__owe { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-2); }
.payrow__owe small { display: block; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.payrow__owe b { font-size: var(--font-size-lg); }
.payrow__pays { border-top: 1px dashed var(--color-border-strong); margin-top: var(--space-2); padding-top: var(--space-2); }
.payrow__pays .table td { padding: 4px 6px; font-size: var(--font-size-sm); }
.payrow__pays .table td:first-child { width: 78px; white-space: nowrap; }
.payrow__add { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.payrow__add .input--sm, .payrow__add .select--sm { height: 32px; }
/* 지출 일계 표 — 칸마다 세로 금, 날짜 열 옅은 바탕, 합계 열 파랑 금 (사장님 지시 2026-09-07 「선 좀 잘 그어줘」) */
.se-expday-wrap { max-height: 640px; overflow: auto; border: 0; }
.table--exp th, .table--exp td { padding: 6px 8px; font-size: var(--font-size-sm); white-space: nowrap; border-right: 1px solid var(--color-border); }
.table--exp th:last-child, .table--exp td:last-child { border-right: 0; }
.table--exp thead th { position: sticky; top: 0; z-index: 1; border-bottom: 1.5px solid var(--color-border-strong); }
.table--exp td:first-child { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-bg-soft); }
.table--exp td:last-child, .table--exp th:last-child { border-left: 1.5px solid var(--color-primary-border); background: var(--color-primary-soft); }
.table--exp tbody tr:hover td { background: var(--color-bg-hover); }
.table--exp tbody tr.is-quiet td { color: var(--color-text-disabled); }
/* ★ 맨 아래 합계 줄은 파랑 바탕에 흰 글씨 — 「합계 잘 보이게 색 칠해」 (사장님 지시 2026-09-07). 누계 카드를 뺀 만큼 이 줄이 그 몫이다 */
.table--exp tfoot th { background: var(--color-primary); color: var(--color-text-invert); border-color: rgba(255,255,255,.25); padding: 10px 8px; font-size: var(--font-size-md); position: sticky; bottom: 0; }
.table--exp tfoot th:last-child { background: var(--color-primary-hover); border-left-color: rgba(255,255,255,.4); }
@media print { .table--exp tfoot th { background: #f3f3f3 !important; color: #000 !important; } }
/* ★ 옆으로 굴려도 날짜 열과 합계 열은 자리를 지킨다 (사장님 물음 2026-09-07 「항목 늘어나면 드래그해서 넘겨야 하나」) */
.table--exp th:first-child, .table--exp td:first-child { position: sticky; left: 0; z-index: 2; }
.table--exp thead th:first-child { z-index: 3; }
.table--exp th:last-child, .table--exp td:last-child { position: sticky; right: 0; z-index: 2; }
.table--exp thead th:last-child { z-index: 3; }
.table--exp td:last-child { background: var(--color-primary-soft); }
/* 항목이 여덟을 넘으면 칸을 좁힌다 */
.table--exp.is-dense th, .table--exp.is-dense td { padding: 4px 5px; font-size: var(--font-size-xs); }
.table--exp.is-dense tfoot th { padding: 7px 5px; font-size: var(--font-size-sm); }
/* 제목 줄 손잡이 — 사장만 (2026-09-07) */
.table--exp th.se-expname { cursor: text; padding-right: 18px; }
.table--exp th.se-expname:hover { background: var(--color-primary-soft); }
.se-expx { position: absolute; top: 2px; right: 3px; border: 0; background: none; font-size: 10px; color: var(--color-text-disabled); cursor: pointer; padding: 0 2px; }
.table--exp th.se-expname:hover .se-expx { color: var(--color-danger); }
.table--exp th.se-expadd { color: var(--color-primary); cursor: pointer; font-weight: var(--font-weight-medium); width: 64px; }
.table--exp th.se-expadd:hover { background: var(--color-primary-soft); }
.table--exp td.se-expadd, .table--exp tfoot th.se-expadd { background: var(--color-bg-soft); }
.table--exp .se-expedit { height: 26px; width: 110px; font-size: var(--font-size-sm); padding: 0 6px; text-align: left; }
@media print { .se-expx, .se-expadd { display: none !important; } }
@media print { .se-expday-wrap { max-height: none !important; } }

/* 그날 나온 사람 — 이름 · 일급 · 근무/휴무 고르개 (칩을 대신한다) */
.worktb { width: 100%; max-width: 320px; border-collapse: collapse; }
.worktb td { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); }
.worktb tr:last-child td { border-bottom: 0; }
.worktb td:nth-child(2) {
  text-align: right; padding-right: var(--space-3);
  color: var(--color-text-secondary); font-size: var(--font-size-xs);
}
.worktb td:nth-child(3) { width: 96px; }
.worktb .select--sm { width: 100%; }

/* 날짜별 정산 맨 아랫줄 = 한 달 합계 */
.table tr.se-total th { background: var(--color-bg-soft); border-top: 2px solid var(--color-border-strong); }
/* 아직 안 온 날 · 이 달에 안 쓴 항목 — 줄은 남기되 흐리게 (0원으로 채우면 「매출이 0」 으로 읽힌다) */
.table tr.is-quiet td { color: var(--color-text-disabled); }

/* ===== 날짜별 정산 — 한 달을 한 번에 보는 넓은 표 (2026-08-27)
   ★ 열 차례는 사장님이 직접 정하셨다:
     일 ㅣ 총매출·자산가·마진 ㅣ 카드·계좌이체 ㅣ 타이어·휠 ㅣ 지출·급여 ㅣ 합계정산
   ★★ table-layout: fixed 라 **화면 폭에 맞춰 열이 늘고 줄어든다.**
     이게 없으면 열이 제 내용만큼 벌어져 표가 화면 밖으로 나가고, 가로로 밀어야 한다.
   ★ 묶음마다 세로 금을 긋는다 — 열이 열한 개라 금이 없으면 눈이 옆줄로 미끄러진다. */
.table--settle { table-layout: fixed; width: 100%; }
.table--settle th, .table--settle td {
  padding-left: var(--space-2); padding-right: var(--space-2);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
/* ★★ 묶음 구분 (사장님 지적 2026-08-27 — 「구분이 잘 안 되네」)
   세로 금 하나로는 안 됐다. 열이 열한 개면 숫자 벌판이 되어 어디까지가 한 묶음인지
   눈이 못 잡는다. 여섯 가지를 함께 건다 — 하나만 걸면 어느 것도 충분하지 않다.
     ① 묶음 머리띠 한 줄  ② 경계선 2px  ③ 묶음마다 옅은 바탕
     ④ 한 줄 걸러 줄무늬  ⑤ 0·빈 칸은 가운뎃점으로 흐리게  ⑥ 정산 칸에 바탕 */
.table--settle .se-gp { border-left: 2px solid var(--color-border-strong); }
/* ① 묶음 머리띠 — 총매출 · 총결제 · 총판매 · 총지출 · 총정산.
   세로 금만 있으면 「왜 여기서 끊겼지」 인데, 이름이 붙으면 금이 뜻을 갖는다 */
.table--settle thead tr.se-grp th {
  text-align: center; font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--color-primary-border);
}
.table--settle thead tr.se-col th { background: var(--color-bg-soft); }
/* ③ 묶음 바탕 · ④ 줄무늬 — 아주 옅게. 진하면 숫자가 안 읽힌다 */
.table--settle .se-tint { background: #F4F8FC; }
.table--settle tbody tr:nth-child(even) td { background: #F8FBFE; }
.table--settle tbody tr:nth-child(even) td.se-tint { background: #EFF5FB; }
/* ⑥ 정산 — 이 표를 보는 까닭이 이 칸이다 */
.table--settle .se-res { background: var(--color-bg-soft); font-weight: var(--font-weight-medium); }
.table--settle tbody tr:nth-child(even) td.se-res { background: #EAF2FA; }
/* ⑤ 0 과 빈 칸 — 숫자로 찍으면 진짜 숫자가 그 속에 묻힌다 */
.table--settle .se-z { color: var(--color-text-disabled); }
/* ★ 전체매장 표도 같은 규칙을 쓴다 — 0 을 숫자로 찍으면 진짜 숫자가 묻힌다 */
.table .se-z { color: var(--color-text-disabled); }
.table--settle tr.se-total th {
  background: var(--color-primary-soft);
  border-top: 2px solid var(--color-primary-border);
}
/* ═══ 기간 정산 표 — 최근 1년 · 전체 · 기간 조회 (사장님 지시 2026-09-07) ═══
   달마다 한 줄(그달 합계)로 접혀 있고 누르면 날짜가 펴진다. 맨 아래 「기간 합계」. 달 단위 표와 같은 열이다 */
.table--settle tr.se-mon th {
  background: var(--color-bg-soft); cursor: pointer; text-align: right;
  border-top: 2px solid var(--color-border-strong); font-weight: var(--font-weight-semibold);
}
.table--settle tr.se-mon th:first-child { text-align: left; white-space: nowrap; }
.table--settle tr.se-mon:hover th { background: var(--color-primary-soft); }
.table--settle tr.se-mon.is-open th { background: var(--color-primary-soft); color: var(--color-primary); }
.se-mon__tg { display: inline-block; width: 16px; color: var(--color-text-tertiary); }
.table--settle tr.se-mon.is-open .se-mon__tg { color: var(--color-primary); }
.table--settle tr.se-day td:first-child { padding-left: var(--space-8); color: var(--color-text-secondary); }
.table--settle .se-none { text-align: center; padding: var(--space-8); color: var(--color-text-tertiary); }
@media print { .table--settle tr.se-mon th { background: #f3f3f3 !important; } }

/* ═══ 달 넘기기 알약 (2026-09-07) — 「◀ 2026년 8월 ▶」. 알약 하나 안에 단추 셋 ═══ */
.chip--mon { display: inline-flex; align-items: stretch; padding: 0; overflow: hidden; }
.chip--mon button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; height: 100%; }
.chip--mon__nm { padding: 0 var(--space-3); font-weight: var(--font-weight-medium); }
/* 연도·월 고르개 — 알약 글자처럼 보이되 누르면 브라우저 목록이 펴진다 (2026-09-07) */
.chip--mon__sel {
  border: 0; background: transparent; color: inherit; font: inherit; font-weight: var(--font-weight-medium);
  height: 100%; padding: 0 2px 0 6px; cursor: pointer; -webkit-appearance: menulist; appearance: menulist;
}
.chip--mon__sel option { color: var(--color-text); background: var(--color-bg); font-weight: 400; }
.chip--mon__sel:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; }
.chip--mon__ar { padding: 0 var(--space-2); font-size: 11px; opacity: .75; }
.chip--mon__ar:hover { opacity: 1; background: rgba(0,0,0,.08); }
.chip--mon__ar:disabled { opacity: .3; cursor: default; background: none; }
.chip--mon.is-active .chip--mon__ar:hover { background: rgba(255,255,255,.18); }
/* 기간 표의 달 이름 줄 — ▸ 는 접기·펴기, 이름은 그 달로 들어가기 */
.se-mon__nm { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.se-mon__nm:hover { color: var(--color-primary); }

/* ═══ 「이번 달」 날짜별 표만 깔끔하게 (사장님 지시 2026-09-07 「표가 산만해 보인다」) ═══
   ★ 2026-08-27 의 여섯 가지(바탕색·2px 금·줄무늬·가운뎃점·정산 바탕)가 **날짜 서른 줄**에 다 걸리니 숫자 벌판이 됐다.
     is-daily 가 붙는 달 단위 표에서만 걷어낸다. 최근 1년·전체(달마다 한 줄)는 사장님이 「이대로 가자」 하셔서 그대로다.
   ★ 아직 안 온 날은 줄을 안 늘어놓고 「n일 ~ m일 — 아직 오지 않은 날」 한 줄로 접는다 (screens.js 정산()) */
.table--settle.is-daily .se-gp { border-left: 1px solid var(--color-border); }
.table--settle.is-daily .se-tint, .table--settle.is-daily tbody tr:nth-child(even) td,
.table--settle.is-daily tbody tr:nth-child(even) td.se-tint, .table--settle.is-daily tbody tr:nth-child(even) td.se-res,
.table--settle.is-daily .se-res { background: none; }
.table--settle.is-daily thead tr.se-grp th { font-weight: var(--font-weight-regular); color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.table--settle.is-daily thead tr.se-col th { background: var(--color-bg-soft); }
.table--settle.is-daily .se-z { color: transparent; }
.table--settle.is-daily tbody td { height: 34px; padding-top: 0; padding-bottom: 0; border-bottom: 1px solid #EEF3F8; }
.table--settle.is-daily tbody tr.is-zero td:first-child { color: var(--color-text-disabled); }
.table--settle.is-daily tbody tr.se-rest td { height: 30px; text-align: left; color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.table--settle.is-daily tr.se-total th { background: var(--color-bg-soft); border-top: 1.5px solid var(--color-primary); }

/* ★ 카드 제목 줄을 뺀 카드 — 표가 카드 모서리에 딱 맞게 시작한다 (사장님 지시 2026-08-27) */
.card--flush { padding: 0; overflow: hidden; }
.card--flush .table-wrap { border: 0; }

@media (max-width: 820px) {
  .payrow__days { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .paycell { height: 26px; font-size: 11px; }
}

/* ============================================================
   고객 등록 카드 정렬 (2026-08-24)

   ★ 왼쪽을 3:9 로 좁히면서 두 가지가 드러났다.
     ① 라벨의 괄호 설명이 두 줄로 접히면 그 칸 입력만 한 줄 내려가 옆 칸과 어긋난다
        → 라벨은 한 줄로 못박고, 설명은 placeholder·도움말로 내렸다 (index.html)
     ② 격자 칸에 min-width:0 이 없으면 안쪽 최소 폭(수량 90 + 금액 110)이 칸을 밀어내
        「판매금액」 칸이 카드 밖으로 튀어나온다
   ============================================================ */
/* ★ 20px 에서 22px 로 올렸다 (2026-08-30 · 3차) — 좌우 1:1 두 카드를 줄 맞추는 눈금이다.
     라벨 한 줄 22 · 입력 칸 44 · 줄 간격 16. 나머지 눈금은 sale.css 에 모여 있다 */
#scr-sale .field__label {
  height: 22px; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#scr-sale .grid--2 { align-items: end; }
#scr-sale .grid--2 > * { min-width: 0; }
#scr-sale .field__help { margin: 0; }
#scr-sale .inline-row .input { min-width: 0; }
#scr-sale .inline-row .input--narrow { flex: 0 1 84px; min-width: 64px; }
/* ★ 「패드 줄(.pad-row)」 규칙을 지웠다 (2026-09-04) — 패드 판매 칸 자체를
     2026-08-28 5차에 없앴다 (경정비 품목으로 넣어 판다). 붙는 자리가 하나도 없다. */

/* 종이로 뽑을 때는 머리띠 배경을 뺀다 — 잉크만 먹고 읽기에는 도움이 안 된다 */
@media print {
  .card__head {
    background: none;
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid #ccc;
    border-radius: 0;
  }
}

/* ============================================================
   재고 칸 · 판매 상품 돋보기 (2026-08-24)
   ============================================================ */

/* 판매 상품 — 칸 오른쪽에 돋보기. 엔터를 모르는 분도 눌러서 찾는다 */
.ac-row { display: flex; gap: var(--space-2); }
.ac-row .input { flex: 1; min-width: 0; }
.ac-go { flex: 0 0 52px; height: 44px; padding: 0; font-size: 17px; }

/* 재고 칸 하나에 「재고 · 연식 · 자산가」 를 세로로 쌓는다 */
.st-shop { width: 190px; font-weight: var(--font-weight-semibold); }
.st-row { cursor: pointer; }
.st-row.is-open { background: var(--color-primary-soft); }
.st-cell { line-height: 1.35; padding-top: var(--space-2); padding-bottom: var(--space-2); }
/* 사이즈·공장도가 칸도 재고 칸과 같은 위아래 여백 — 세 칸의 두 줄이 같은 선에 서야 한다 */
.st-c-s, .st-c-fac { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.st-q { font-weight: var(--font-weight-bold); color: var(--color-primary); }
.st-q.is-zero { color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); }
/* 연식은 늘 보인다 — 오래된 것부터 팔아야 한다 */
.st-year { font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
/* 자산가는 줄을 눌러야 나온다. 언제나 개당 금액이다 */
.st-asset { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
            color: #C2701A; font-variant-numeric: tabular-nums; }
/* ★ 사장님은 자산가를 여기서 바로 적어 넣는다 (회사마다 다른 값이다).
     칸 티를 내지 않되, 짚으면 고칠 수 있다는 것이 보여야 한다 */
/* ★★ 두 줄 배치 (사장님 확정 2026-09-06 · 4안) — 사이즈·재고·공장도가 칸은 윗줄 22 · 아랫줄 22 로 못박는다.
     연식(사이즈 밑) · 수량 박스(재고 밑) · 자산가 박스(공장도가 밑)가 한 선에 서고, 닫힌 줄도 아랫줄을 비워 둬 줄 높이가 안 흔들린다 */
.st-two__t { height: 22px; line-height: 22px; white-space: nowrap; }
.st-two__b { height: 22px; line-height: 22px; white-space: nowrap; }
.st-two__b .st-year { font-size: 11px; line-height: 22px; }
.st-two__b .st-asset, .st-two__b .st-qty { display: inline-block; vertical-align: top; line-height: 0; }
.st-two__b .st-asset[hidden], .st-two__b .st-qty[hidden] { display: none; }
/* 박스 둘 — 높이 20 (사장님 「너무 크다」 → 줄임). 수량 36px(세 자리) · 자산가 72px. 오른쪽 끝이 위 숫자 오른쪽 끝과 같은 선 */
.st-asset__in, .st-qty__in {
  height: 20px; min-height: 0; padding: 0 4px; margin: 1px 0 0;
  text-align: right; font-size: 12px; font-weight: var(--font-weight-medium); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-primary); border-radius: 5px;
  font-variant-numeric: tabular-nums; line-height: 18px; vertical-align: top;
}
.st-asset__in { width: 72px; }
/* 자산가 박스 오른쪽 ✕ — 재고를 0 으로 비우기(품목은 남김). 평소 연한 회색, 올리면 빨강 */
.st-del { width: 20px; height: 20px; margin: 1px 0 0 3px; padding: 0; border: none; border-radius: 5px; background: transparent;
  color: var(--color-text-tertiary); font-size: 12px; line-height: 20px; cursor: pointer; vertical-align: top; }
.st-del:hover, .st-del:focus-visible { background: #FCEBEB; color: #A32D2D; outline: none; }
/* 공장도가 칸 폭 — 박스 72 + ✕ 23 이 들어가야 한다 */
.st-c-fac { width: 118px; }
.st-qty__in   { width: 36px; }
.st-asset__in:hover, .st-qty__in:hover { background: var(--color-bg); }
.st-asset__in:focus, .st-qty__in:focus { outline: none; box-shadow: 0 0 0 2px var(--color-primary-soft); }
/* 「n개」 글씨 — 누를 수 있는 것임을 점선으로 (자산가 글씨와 같은 규칙) */
.st-q--edit { cursor: pointer; border-bottom: 1px dotted currentColor; }
.st-q--edit:hover, .st-q--edit:focus-visible { border-bottom-style: solid; outline: none; }
/* 타이어 줄은 아무 데나 눌러도 안 열린다 — 손잡이(코드 밑 자산가 글씨)만 손가락 모양 */
.st-row:has(.st-asset) { cursor: default; }
/* 휠·경정비 첫 칸(브랜드·분류)도 타이어 코드 칸과 같은 모양 — 밑에 연한 자산가 글씨 (2026-09-06) */
.st-c-b .st-code, .st-svc .st-code { line-height: 1.15; }
.st-svc .st-code__num .badge { vertical-align: top; }

/* 종이로 뽑을 때는 자산가를 아예 빼고 연식만 남긴다 */
@media print {
  .st-asset, .st-qty { display: none !important; }
  .st-shop { display: none !important; }
}

/* ★ .newcat 계열(.newcat · __ic · __say)을 지웠다 (2026-09-04).
     「새 품목표가 왔어요 [받기]」 줄 자체를 없앴다 — 사장님 지시로 매장이 **저절로** 받는다.
     붙는 자리가 하나도 없다 (app.html 에서 마크업을 통째로 걷었다). */

/* ===== 옛 지출대장 자리 (2026-08-25 → 2026-08-27 에 표로 바뀜)
   ★ 한 판 격자는 급여에는 맞고 지출에는 안 맞다 — 지출은 「어디에 얼마 썼나」 가 궁금한 것이지
     날짜에 색칠하는 게 아니다. 그래서 항목별 표(지출 종합)로 바꿨다.
   ★ 아래 .expname·.expsum 은 되살릴 때 쓰려고 남겨 둔다 (급여대장 .payrow 와 같은 꼴) ===== */
/* ★ 눈이 두 번 배우지 않게 칸·격자를 그대로 쓰고, 왼쪽 이름 자리만 다르다 */
/* ★ 항목 이름은 사람이 자유로 적는다. 길면 옆 칸을 밀어내므로 잘라서 보여 준다
     (title 로 전체가 뜬다) */
.payrow__who .expname {
  flex: 0 0 150px; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.payrow__who .expsum { flex: 0 0 auto; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
/* 이 달에 한 번도 안 적은 항목은 흐리게 — 있지만 지금은 볼 것이 아니다 */
.payrow.is-quiet { opacity: .62; }
.payrow.is-quiet:hover, .payrow.is-quiet:focus-within { opacity: 1; }
/* 적는 줄 — 대장 바로 아래 */
#se-exp-form { margin-top: var(--space-4); flex-wrap: wrap; }
/* ★ 빈 입력칸은 종이에 안 찍는다 (맡기 줄과 같은 까닭) */
@media print { #se-exp-form { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   경정비 (2026-08-28)
   ★ 새 모양을 만들지 않는다. 알약은 sale.css 의 .seg, 검색 상자는 .quick-box,
     목록 줄은 .cart__row 를 그대로 쓴다. 여기 있는 것은 그것들로 안 되는 자리뿐이다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 재고 관리 ── */
/* ★ 경정비 재고 0 은 빨강이다. 타이어의 0(회색)과 일부러 다르다 —
     타이어는 안 쌓아 두는 규격이 흔하지만, 경정비 소모품이 0 이면
     손님이 와도 그 자리에서 못 하는 것이라 눈에 띄어야 한다 */
.st-q.is-out { color: var(--color-danger); font-weight: var(--font-weight-bold); }

/* 눌러서 펴지는 줄 — 매입가와 고치는 칸이 여기 들어온다.
   ★ 늘 펼쳐 두지 않는 까닭은 타이어 자산가와 같다 — 어깨너머로 다 보인다 */
.st-open > td { background: var(--color-primary-soft); padding: var(--space-3) var(--space-4); }
.svcedit { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.svcedit .select { flex: 0 0 130px; }
.svcedit .input  { flex: 1 1 130px; min-width: 110px; }
.svcedit__won { position: relative; flex: 0 0 130px; display: flex; align-items: center; gap: 4px; }
.svcedit__won .input { flex: 1; min-width: 0; }
.svcedit__won i { flex: 0 0 auto; font-style: normal; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.svcedit__del { flex: 0 0 auto; color: var(--color-danger); }
.svcedit__say {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
}
/* ★ 펴진 줄과 고치는 칸은 종이에 안 찍는다 — 매입가는 손님이 보는 값이 아니다 */
@media print { .st-open { display: none !important; } }

/* ── 입고 · 새 품목 만들기 ──
   ★ 창(모달)이 아니다. 검색 결과 바로 아래에 펴지는 한 줄이다.
     이 프로그램에 모달은 하나도 없다 (보관 타이어 #keep-form 과 같은 꼴) */
.svcnew {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.svcnew__cap {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-primary); margin-bottom: var(--space-3);
}
.svcnew__row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.svcnew__row .select { flex: 0 0 150px; }
.svcnew__row .input  { flex: 1 1 160px; min-width: 140px; }
.svcnew__row .btn    { flex: 0 0 auto; }
.svcnew .field__help { margin: var(--space-2) 0 0; }

/* 「＋ 새 품목 만들기」 줄 — 결과가 있어도 늘 맨 아래에 있다.
   ★ 찾는 물건이 없을 때 설정 화면을 헤매게 하면 아무도 안 쓴다 */
.svcmake { background: var(--color-primary-soft); }
.svcmake:hover { background: var(--color-primary-border); }
.svcmake .cart__name > div:first-child {
  font-weight: var(--font-weight-semibold); color: var(--color-primary);
}

/* ── 경정비 입고표 한 줄 : 품목 · 매입가 · 수량 · ✕ ── */
.iosvc { align-items: center; }
.iosvc__name { flex: 1; min-width: 0; }
.iosvc__name > div:first-child {
  font-weight: var(--font-weight-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iosvc__won { flex: 0 0 150px; display: flex; align-items: center; gap: 4px; }
.iosvc__won .input { flex: 1; min-width: 0; }
.iosvc__won i { flex: 0 0 auto; font-style: normal; font-size: var(--font-size-sm); color: var(--color-text-secondary); }


/* ═══════════════════════════════════════════════════════════════
   입고 줄 두 층 (2026-08-28) — 시안 확정
   ★ 칸이 넷(DOT·수량·자산가·DC)이 되면서 한 줄로는 빡빡하다.
     품목 이름을 위에, 칸을 아래에 둔다. 칸마다 작은 라벨을 이고 있다 —
     자산가와 DC 가 나란히 있으면 라벨 없이는 어느 칸인지 헷갈린다.
   ═══════════════════════════════════════════════════════════════ */
/* ★★★ 줄 높이를 절반으로 줄였다 (2026-09-04 · 사장님 지시 「박스 칸이 너무 큰 것 같아.
     지금 크기에서 반으로 줄여 봐」). 진짜 화면에서 재어 **157px → 80px 안팎**.
     입고를 열둘씩 잡는 날이 있는데, 한 줄이 157px 이면 화면 하나에 다섯 줄밖에 안 들어간다.
   ★ 어디서 줄였나 — 자리를 많이 먹던 차례대로
       ① 줄마다 되풀이하던 밑줄 안내 27px 을 없앴다 (공장도가는 위층으로, 안내는 표 밑에 한 번)
       ② 입력 칸 44 → 32 (그래도 손으로 누를 만한 크기다. 더 줄이면 태블릿에서 못 누른다)
       ③ 안쪽 여백 12 → 6 · 라벨 19 → 14 · ✕ 단추 32 → 24
   ★ 없앤 것은 **되풀이되는 말과 빈자리뿐**이다. 칸 넷(DOT·수량·자산가·DC)은 그대로다. */
.iorow2 {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 5px var(--space-3);
  margin-bottom: 6px;
  background: var(--color-bg);
}
.iorow2:last-child { margin-bottom: 0; }
/* 입고 줄 안의 칸만 작아진다 — 다른 화면 입력 칸은 그대로 44px 이다.
   ★ 30px 아래로는 내리지 않는다. 매장에서 태블릿으로도 누르는 칸이다. */
.iorow2 .input {
  height: 30px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-md);
}
.iorow2__x.btn { height: 22px; min-height: 0; padding: 0 var(--space-2); font-size: var(--font-size-sm); }
.iorow2__top { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* ★★ 브랜드·모델은 **고르개가 아니라 글씨다** (2026-09-04 · 사장님 지시).
     8,000 품목이 되면 줄마다 고르개를 그리는 것만으로 화면이 멈춘다.
     고칠 수 없는 값이니 입력 칸처럼 보이면 안 된다 — 테두리도 화살표도 없다.
   ★ 글자를 「…」 로 자르지 않는다 (화면 정리 원칙). 좁으면 다음 줄로 내려간다. */
.iorow2__fix {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  word-break: break-word;
}
.iorow2__brand { flex: 0 0 auto; color: var(--color-text-secondary); }
/* 모델 이름이 제일 길다 — 남는 자리를 여기로 몰아 준다 */
.iorow2__model { flex: 1 1 140px; }
.iorow2__size {
  flex: 0 0 auto; font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
}
.iorow2__x { flex: 0 0 auto; margin-left: auto; }
/* 공장도가 — 위층 오른쪽에 붙는 기준값. 고칠 수 없으니 글씨다 */
.iorow2__fac {
  flex: 0 0 auto;
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  white-space: nowrap;
}

.iorow2__cells { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.iocell { flex: 1 1 84px; min-width: 74px; display: block; }
.iocell__lb {
  display: block; margin-bottom: 1px; line-height: 1.1;
  font-size: 11px; color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
}
.iocell .input { width: 100%; }

/* 기준값과 안내 — 고칠 수 없는 값이라 입력 칸이 아니라 글씨다.
   ★ 이제 **꼭 필요할 때만** 만든다 (공장도가 없음 경고 · 조정의 「지금 몇 개」) */
.iorow2__say {
  margin-top: 3px;
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
}

/* 좁은 화면에서는 칸을 두 개씩 접는다 — 넷을 한 줄에 밀어 넣으면 숫자가 안 읽힌다 */
@media (max-width: 720px) {
  .iocell { flex: 1 1 calc(50% - var(--space-2)); }
}
/* 빈 입력칸은 종이에 안 찍는다 (맡기 줄·지출 줄과 같은 까닭) */
@media print { .svcnew { display: none !important; } }

/* ★ 마진 0 주황 뱃지는 없앴다 (사장님 지적 2026-08-28 갱신판) —
     「마진이라고 붙이면 손님이 볼 수 있잖아.」 마진은 자산가에서 바로 역산된다.
   막는 빨강은 sale.css 의 .cart2__won.is-need 하나만 남았다. 주황을 다시 넣지 말 것 */

/* 새 휠 품목 — 공장도가·DC·매입가 세 칸은 라벨을 이고 나란히 선다 (2026-08-28).
   ★ 휠은 매장이 만드는 품목이라 공장도가도 매장이 넣는다. 세 값이 라벨 없이 나란히 있으면
     어느 칸이 무엇인지 매번 헷갈린다 (입고 줄의 .iocell 을 그대로 가져다 쓴다) */
.svcnew__cells { gap: var(--space-2); }
.svcnew__cells .iocell { flex: 1 1 110px; min-width: 90px; }
.svcnew__cells .select { width: 100%; }

/* ★★ 「＋ 분류 직접 넣기」 를 골랐을 때 열리는 칸 (사장님 지시 2026-09-01).
     분류 고르개 **바로 옆**에 서고, 라벨과 테두리를 물빛으로 들어 올린다 —
     방금 고른 것 때문에 새로 생긴 칸이라는 것이 한눈에 보여야 한다.
   ★ 눈에 띄게 하는 것은 여기 하나뿐이다. 두 곳을 칠하면 어디를 보라는 말인지 흐려진다 */
.iocell--new .iocell__lb { color: var(--color-primary, #378ADD); font-weight: var(--font-weight-bold, 700); }
.iocell--new .input {
  border-color: var(--color-primary, #378ADD);
  background: var(--color-primary-soft, #E6F1FB);
}

/* ═══════════════════════════════════════════════════════════════
   반출 · 반입 기록 표 (2026-08-28 3차) — 내부용 카우타이어 POS 와 같은 모양
   ★ 일계·누계가 붙는다. 일계는 그 날짜 합, 누계는 기간 안에서 쌓아 온 합이다.
   ═══════════════════════════════════════════════════════════════ */
.table--move { table-layout: fixed; }
.table--move td, .table--move th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 내용(상품 이름)이 제일 길다 — 남는 자리를 그쪽으로 몰아 준다 */
.table--move td:nth-child(2) { white-space: normal; }
/* 일계는 참고값이라 흐리게. 누계가 눈에 들어와야 한다 */
.table--move td.se-z { color: var(--color-text-tertiary); }
.table--move .cart__x { opacity: .35; }
.table--move tr:hover .cart__x { opacity: 1; }
/* 되돌리기 단추는 종이에 안 찍는다 */
@media print { .table--move th:last-child, .table--move td:last-child { display: none !important; } }

/* 반입 대기 줄 — 받을 것이 눈에 띄어야 한다 */
#io-wait .cart__row { align-items: center; }
#io-recvall { margin-top: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════
   입고·반품·반입·반출 화면 좌우 폭 (2026-09-05 수정3) — 내부용 카우타이어 POS 와 같게 맞춘다
   ★★ 내부용은 본문 전체가 `.tp-wrap { max-width:1320px; margin:0 auto }` 한 겹에 싸여
     **가운데로 모인다.** 판매용은 --content-max-width 가 none 이라 카드가 사이드바 옆
     남는 자리를 끝까지 늘렸다 — 1920 창에서 재 보니 **1,601px** 이었다.
     기록표가 그만큼 벌어지면 「일자 … 누계」 사이가 한 뼘이 되어 한 줄로 안 읽힌다.
   ★ **화면을 통째로** 묶는다. 고르개 줄(입고·반품·반입·반출)까지 함께 좁아져야
     위 띠와 아래 카드가 한 세로줄에 선다. 내부용 tp-wrap 이 머리줄까지 감싸는 것과 같다.
   ★★ **네 갈래 모두**다 (사장님 지시 2026-09-05 「다 좁혀」).
     처음에는 반입일 때만 class 를 붙였다 뗐다 했는데, 갈래마다 달라질 것이 없어
     화면에 그냥 걸었다 — 자바스크립트가 손댈 일이 없어졌다.
   ★ 폭 값은 tokens.css 의 --io-narrow-width 한 곳에만 적는다.
   ★ width:100% 를 함께 준다 — 좁은 화면에서는 max-width 가 놀고 자리를 다 쓴다 */
#scr-io {
  max-width: var(--io-narrow-width);
  width: 100%;
  /* ★★ **왼쪽에 붙인다** (사장님 확정 2026-09-05 「이게 더 좋다」).
       처음(수정3)에는 내부용처럼 가운데(margin auto)였는데, 내부용은 사이드바가 없어 가운데가
       자연스럽고 여기는 사이드바가 있어 눈이 왼쪽에서 시작한다 — 좌우에 250px 씩 남는 것이 어색했다.
       이제 빈 자리는 오른쪽에만 남고, 위 고르개 줄과 카드가 한 세로줄에 선다. */
  margin-left: 0; margin-right: auto;
}

/* ★★ 반입 대기 칸은 **내용 높이만큼만** (사장님 지시 2026-09-05 수정3).
     받을 것이 없을 때 아이콘 하나에 175px 을 비워 두고 있었다 (공통 .empty 의 위아래 40px).
     내부용은 같은 자리에 두 줄짜리 짧은 문구뿐이다.
   ★ 문구는 그대로 두 줄이다 — 「반입 대기 중인 재고가 없어요. / 다른 매장에서 …」.
     글을 줄이는 것이 아니라 **빈 자리**를 줄인다.
   ★ 다른 화면의 빈 문구(재고·매출·반출)는 그대로다. 여기만 좁힌다 */
#io-wempty { padding: var(--space-4) var(--space-4); gap: var(--space-1); }
#io-wempty .empty__icon { font-size: 20px; }

/* ★ 「🔄 반입 새로고침」 은 제목 바로 옆 **왼쪽 위**다 (사장님 지시 2026-09-05 수정3).
     공통 .card__head 는 space-between 이라 단추가 저 혼자 오른쪽 끝(1,723px)에 가 있었다.
     ⚠ 아래 반입 기록 머리줄에는 걸면 안 된다 — 거기는 기간 고르개가 오른쪽에 붙어야 한다.
     그래서 대기 머리줄에만 id(#io-whead)를 달아 놓았다 */
#io-whead { justify-content: flex-start; }

/* ═══════════════════════════════════════════════════════════════
   입고 검색 결과 표 (2026-09-05 · 사장님 승인 시안) — 내부용 카우타이어 POS 와 같은 줄
   ★★ 카드 줄(.cart__row)이 아니라 **표**다. 한 줄 40px, 정해진 높이 안에서 스크롤한다.
     전에는 열둘만 나와도 화면이 통째로 밀려 내려갔다. 이제 124개가 나와도 페이지는 그대로다.
   ★ 열 : 코드 · 브랜드(물빛 굵게) · 모델 · 사이즈 · 하중·속도 · [공장도] · 「+ 선택」
   ★ 열 이름 줄은 스크롤해도 위에 붙어 있다 (sticky) — 무엇이 공장도인지 안 잃는다
   ★ 반출 검색(#io-olist)·경정비 검색(#io-slist)은 그대로 .cart__row 다. 여기만 바꿨다.
   ═══════════════════════════════════════════════════════════════ */
.qres { margin-top: var(--space-3); }
.qres__cap {
  display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin: 0 0 6px; font-size: var(--font-size-xs); color: var(--color-text-secondary);
}
.qres__cap b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.qres__more { color: var(--color-text-tertiary); }
.qres__box {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* 다섯 줄 반 — 「더 있다」 가 보이도록 반 줄을 걸쳐 둔다 (머리 34 + 40 × 5.5 = 254) */
.qres__scroll { max-height: 254px; overflow-y: auto; }
.qres__t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qres__t th {
  position: sticky; top: 0; z-index: 1;
  background: var(--color-surface-2, #F3F7FC);
  text-align: left; padding: 8px var(--space-3);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-strong);
}
.qres__t td {
  height: 40px; padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--font-size-md);
}
.qres__t tbody tr:last-child td { border-bottom: none; }
.qres__t tbody tr { cursor: pointer; }
.qres__t tbody tr:hover td { background: var(--color-primary-soft); }
/* ★★ 코드·사이즈·하중속도는 **절대 안 자른다** (사장님 2026-09-05 「사이즈가 안 보이면 심각한 문제야」).
     100px 에 245/45ZR18 을 굵게 넣으니 「245/45Z…」 로 잘렸다. 폭을 글자에 맞추고 말줄임을 끈다.
     잘려도 되는 열은 모델 하나뿐이다 (제일 길고, 마우스를 올리면 전체가 뜬다) */
.qres__code  { width: 132px; color: var(--color-text-tertiary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; overflow: visible; text-overflow: clip; }
.qres__brand { width: 110px; font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.qres__fac   { width: 120px; text-align: right; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.qres__nofac { color: var(--color-text-tertiary); }
.qres__size  { width: 118px; font-weight: var(--font-weight-semibold); overflow: visible; text-overflow: clip; }
.qres__ls    { width: 92px; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; overflow: visible; text-overflow: clip; }
.qres__pick  { width: 88px; text-align: right; }
.qres__pick .btn { height: 28px; min-height: 0; padding: 0 10px; font-size: var(--font-size-xs); }
/* 지우기 ✕ (2026-09-06) — 평소 연한 회색, 올리면 빨강. 「+ 선택」 과 색·모양이 달라야 실수가 준다 */
.qres__del { width: 32px; text-align: right; }
.qres__x { width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent;
  color: var(--color-text-tertiary); font-size: 14px; line-height: 24px; cursor: pointer; }
.qres__x:hover, .qres__x:focus-visible { background: #FCEBEB; color: #A32D2D; outline: none; }
/* 좁은 화면 — 코드·공장도는 접고 이름·사이즈·단추만 남긴다 */
@media (max-width: 720px) {
  .qres__code, .qres__fac, .qres__ls { display: none; }
}
@media print { .qres { display: none !important; } }

/* 입고 검색 입력칸 — 끝까지 늘리지 않는다 (사장님 승인 시안 2026-09-05).
   ★ 1170px 안에서도 flex:1 이면 800px 까지 늘어나 검색 단추가 저 멀리 간다.
     사이즈는 길어야 열 자다. 320 이면 넉넉하다. 좁은 화면에서는 공통 규칙대로 폭을 다 쓴다 */
#io-tw .quick-box__row .input, #io-wh .quick-box__row .input { flex: 0 1 320px; }

/* ═══ 휠 화면 (2026-09-05 · 종류 고르개를 타이어·경정비·휠 셋으로 쪼갬) ═══
   ★ 검색과 「＋ 새 휠 품목」 이 한 줄에 나란히 — 찾다가 없으면 옆에서 만든다 */
.quick-box__or { flex: 0 0 auto; align-self: center; font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin-left: var(--space-2); }
.qres__t--w .qres__brand { width: 120px; }


/* ═══════════════════════════════════════════════════════════════
   입고 담긴 줄 — 표 꼴 한 줄 (사장님 확정 2026-09-05 · B안)
   ★★ 옛 .iorow2(두 층 · 80px)를 대신한다. .iorow2 규칙은 아래에 남아 있지만 붙는 자리가 없다 —
     되살릴 일이 없으면 다음 정리 때 지운다.
   ★ 열 폭은 **들어갈 최대 글자** 기준이다 —
       브랜드 104 (브레데스타인 여섯 자) · 사이즈 92 · 하중·속도 64 (105/103Q) ·
       공장도가 100 (1,000,000) · DOT 64 (2026) · 수량 56 (10) · 자산가 104 (1,000,000) · DC 56 (50) · ✕ 30
     모델은 남는 자리를 다 쓴다. 이 폭들이 있어서 타이어·휠을 좌우 2열로 못 둔다 (1열이다).
   ★ 칸은 비어서 시작한다 — placeholder 없음 (사장님: 「왜 투명 글씨로 해 놓은 거야」)
   ═══════════════════════════════════════════════════════════════ */
.iot {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.iot__r {
  display: grid; align-items: center; gap: 8px;
  padding: 0 var(--space-3); height: 42px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-md);
}
.iot__r:last-child { border-bottom: none; }
.iot__r--t { grid-template-columns: 104px minmax(0, 1fr) 92px 64px 100px 64px 56px 104px 56px 30px; }
.iot__r--w { grid-template-columns: 104px minmax(0, 1fr) 92px 100px 56px 104px 56px 30px; }
/* 열 이름 줄 — 한 번만 */
.iot__r--h {
  height: 32px; background: var(--color-surface-2, #F1F5F9);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-strong);
}
/* ★★ 숫자 열은 **머리글·공장도가 글씨·칸 속 숫자의 오른쪽 끝이 한 선**에 선다 (사장님 2026-09-05 「정렬 안 맞는데」).
     칸 속 숫자는 테두리 안쪽 8px 에서 끝나는데 머리글과 공장도가는 0 에서 끝나 8px 어긋나 있었다.
     셋 다 오른쪽 안여백 8px 로 맞춘다 */
.iot__r--h .is-num { text-align: right; padding-right: 8px; }
.iot__r--h .is-mid { text-align: center; }
/* 한 줄 걸러 아주 옅은 바탕 — 줄이 열 개가 되어도 눈이 안 흐른다 */
.iot__r:not(.iot__r--h):nth-child(odd) { background: #F8FBFE; }
/* 브랜드 — 모델과 세로 금으로 가른다. 여섯 자 넘으면 자르지 않고 두 줄 */
.iot__b {
  font-weight: var(--font-weight-semibold); color: var(--color-text-secondary);
  border-right: 1px solid var(--color-border); padding-right: 8px;
  line-height: 1.2; word-break: keep-all;
}
.iot__m { font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.iot__s { font-weight: var(--font-weight-semibold); }
.iot__ls { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.iot__f { text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.iot__none { color: var(--color-text-tertiary); font-weight: var(--font-weight-regular, 400); }
/* 칸 — 높이 30, 오른쪽 정렬(숫자), DOT 만 가운데 */
.iot__in.input {
  width: 100%; height: 30px; padding: 0 8px;
  font-size: var(--font-size-md); text-align: right;
  font-variant-numeric: tabular-nums; background: var(--color-bg);
}
.iot__in.iot__dot { text-align: center; }
.iot__x {
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--color-text-tertiary); font-size: 15px; text-align: center;
}
.iot__x:hover { color: var(--color-danger, #d33); }
/* 그 줄에서만 참인 말(공장도가 없음 · 조정의 지금 몇 개) — 줄 아래 한 줄 전체 폭 */
.iot__say {
  grid-column: 1 / -1;
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  padding-bottom: 6px; margin-top: -4px;
}
.iot__r.has-say { height: auto; padding-top: 6px; }   /* :has 대신 class — 옛 브라우저도 같은 모양 */
/* 좁은 화면 — 코드성 열을 접고 칸은 줄바꿈 */
@media (max-width: 900px) {
  .iot__r { height: auto; padding: 6px var(--space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4px; }
  .iot__r--h { display: none; }
  .iot__m { grid-column: span 2; }
  .iot__b { border-right: none; padding-right: 0; }
}
@media print { .iot .iot__x { display: none !important; } }

/* ═══ 경정비 화면 — 좌우 2열 (사장님 확정 2026-09-05 · A안) ═══
   왼쪽 분류 목록(세로) | 오른쪽 그 분류의 품목 + 맨 아래 「＋ ○○에 새 품목 만들기」 줄 + 그 밑에 만들기 칸 */
.svc2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.svc2__cats { border-right: 1px solid var(--color-border-strong); background: #F5F9FD; padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.svccat { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 8px 10px; border: none; border-radius: 6px; background: none; font: inherit; color: var(--color-text-secondary); cursor: pointer; }
.svccat span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svccat b { font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); opacity: .7; }
.svccat:hover { background: var(--color-bg); }
.svccat.is-active { background: var(--color-primary); color: #fff; font-weight: var(--font-weight-semibold); }
.svccat.is-active b { opacity: 1; }
.svccat__x { flex: 0 0 auto; color: var(--color-text-tertiary); font-size: 12px; padding: 0 2px; border-radius: 4px; }
.svccat__x:hover { color: var(--color-danger, #d33); background: rgba(0,0,0,.05); }
.svccat.is-active .svccat__x { color: rgba(255,255,255,.8); }
/* ★ 눈에 띄게 (사장님 지시 2026-09-07) — 점선 → 물빛 실선 1.5px + 옅은 물빛 바탕 + 굵은 글씨 */
.svccat--add { color: var(--color-primary); background: var(--color-primary-soft); border: 1.5px solid var(--color-primary); justify-content: center; margin-top: 8px; font-weight: var(--font-weight-semibold); }
.svccat--add:hover { background: var(--color-primary-border); }
.svccat__new { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 2px; }
.svccat__new .input { width: 100%; height: 32px; }
.svccat__newbtns { display: flex; gap: 4px; }
.svccat__newbtns .btn { flex: 1 1 auto; }
.svc2__items { display: flex; flex-direction: column; min-width: 0; }
.svc2__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); font-weight: var(--font-weight-bold); }
.svc2__find { margin-left: auto; width: 260px; height: 32px; }
.svc2__box { border: none; border-radius: 0; }
.svc2__box .qres__scroll { max-height: 300px; }
.svc2__empty { padding: 14px 12px; margin: 0; }
/* 만들기 줄 — 목록 맨 아래, 점선 위에. 「이 분류에 하나 더」 로 읽힌다 */
/* ★ 눈에 띄게 (사장님 지시 2026-09-07) — 줄 전체 띠가 아니라 표 밑에 놓인 **단추**다 */
.svcmake { margin: 10px 12px; padding: 8px 14px; display: inline-block; align-self: flex-start; border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-weight-semibold); cursor: pointer; }
.svcmake:hover { background: var(--color-primary-border); }
.svcnew--inline { border: none; border-top: 1px dashed var(--color-primary-border, #B5D4F4); border-radius: 0; background: #F5F9FD; margin: 0; }
@media (max-width: 900px) {
  .svc2 { grid-template-columns: 1fr; }
  .svc2__cats { border-right: none; border-bottom: 1px solid var(--color-border-strong); flex-direction: row; flex-wrap: wrap; max-height: none; }
  .svccat { width: auto; }
}
/* (아래 .chips 규칙은 옛 칩 줄 것 — 붙는 자리 없음. 다음 정리 때 지운다) */
/* ═══ 경정비 화면 — 단순하게 (사장님 확정 2026-09-05) ═══
   ★ 분류 칩 한 줄 · 이름 검색 · 「＋ 새 품목」(이름 + 매입가 두 칸) · 담긴 줄 표 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-3); }
.chips .chip b { font-weight: var(--font-weight-semibold); opacity: .75; margin-left: 2px; }
.chips .chip.is-active b { opacity: 1; }
.chip--add { border-style: dashed; color: var(--color-primary); }
/* 새 분류 이름 칸 — 칩 줄 끝에 열린다. 이름만 만든다 */
.chipnew { display: inline-flex; align-items: center; gap: 4px; }
.chipnew .input { width: 200px; height: 34px; }
.chipnew .btn { height: 34px; }
.qres__t--s .qres__cat { color: var(--color-text-secondary); }
.iot__r--s { grid-template-columns: 130px minmax(0, 1fr) 56px 104px 30px; }
/* 분류는 알약으로 — 품목 글씨와 갈린다. 세로 금은 그대로 */
.iot__b--cat { font-weight: var(--font-weight-regular, 400); }
.iot__b--cat .badge, .qres__cat .badge { font-size: var(--font-size-xs); white-space: nowrap; }
.qres__t--s .qres__cat { width: 130px; }
/* 새 품목 — 한 줄에 이름·매입가·단추. 분류 고르개는 「전체」 에서 만들 때만 앞에 선다 */
.svcnew__one { align-items: flex-end; }
.svcnew__one .iocell--cat  { flex: 0 0 150px; }
.svcnew__one .iocell--new  { flex: 0 0 180px; }
.svcnew__one .iocell--name { flex: 1 1 320px; min-width: 240px; }
.svcnew__one .iocell--won  { flex: 0 0 140px; }
.svcnew__one .iocell .input, .svcnew__one .iocell .select { width: 100%; }

/* ═══ 재고 관리 표 열 폭 (사장님 확정 2026-09-05) — 코드 · 속도하중 · PR · 브랜드 · 모델 · 사이즈 · 재고 · 공장도가 · 할인가 · DC
   ★ 들어갈 값 기준으로 못박고 모델이 남는 자리를 다 쓴다 */
#scr-stock .table { table-layout: fixed; }
.st-c-code { width: 110px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-c-ls   { width: 84px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.st-c-pr   { width: 96px; white-space: nowrap; }
.st-c-b    { width: 96px; white-space: nowrap; }
.st-c-s    { width: 112px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.st-c-q    { width: 84px; }
.st-c-fac  { width: 118px; white-space: nowrap; }
.st-c-v    { width: 124px; }
.st-c-dc   { width: 92px; white-space: nowrap; }
/* ★ 「%」 가 표 오른쪽 끝에 딱 붙어 잘린 듯 보인다는 지적 (사장님 2026-09-06) — 칸 오른쪽에 숨 쉴 자리 16px */
.table td.st-c-dc, .table th.st-c-dc { padding-right: 16px; }
.st-dcwrap { display: inline-flex; align-items: center; gap: 3px; }
/* 할인가 글씨와 DC 칸 속 숫자의 오른쪽 끝을 한 선에 — 칸은 안쪽 6px 에서 끝나고 뒤에 「%」(14px)가 붙으므로 글씨도 그만큼 들여 세운다 */
.st-c-v .st-disc { display: inline-block; padding-right: 23px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.st-c-v .st-disc.is-on { color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); }
/* DC 칸 — 작게, 물빛 테두리 (사장님 2026-09-05 「테두리 색 입히고, 박스가 너무 크다」). 내부용의 주황 테두리 작은 칸과 같은 크기 */
.st-c-dc .st-dc__in { width: 50px; height: 28px; min-height: 0; padding: 0 6px 0 4px; text-align: right;
  border: 1.5px solid var(--color-primary); border-radius: 6px; background: var(--color-bg); font-size: var(--font-size-md); }
.st-c-dc .st-dc__in:focus { box-shadow: 0 0 0 2px var(--color-primary-soft); }
.st-pct { display: inline-block; width: 14px; color: var(--color-text-tertiary); margin-left: 0; font-size: var(--font-size-sm); }
#st-head .st-c-v, #st-head-w .st-c-v, #st-head-s .st-c-v { padding-right: 20px; }
.table th.st-c-dc { padding-right: 36px; }
/* 코드 밑 자산가 — 작은 연한 글씨 (A안 2026-09-05). 보기만, 고치는 칸은 따로 */
.st-code { line-height: 1.15; }
.st-code__num { display: block; }
/* ★ 색은 물빛 (사장님 2026-09-06 · 시안 C) — 옛 #B7C3C8 은 너무 연해 안 보였다. 재고 개수와 같은 색이라 누를 수 있는 것임이 바로 보인다 */
.st-code__asset { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--color-primary); font-variant-numeric: tabular-nums;
  border-bottom: 1px dotted var(--color-primary); cursor: pointer; }
.st-code__asset:hover, .st-code__asset:focus-visible { border-bottom-style: solid; outline: none; }
.st-row.is-open .st-code__asset { font-weight: var(--font-weight-bold); border-bottom-style: solid; }
@media print { .st-code__asset { display: none !important; } }
/* 펴지는 줄의 매입가 칸 — 노란 테두리로 「원가」 임을 알린다. 여기서만 보인다 */
.svcedit__won--buy .input { border-color: #E8B45A; background: #FFFBF2; }
.svcedit__name { flex: 1 1 260px; min-width: 200px; }
/* 알약 글씨 진하게 (사장님 2026-09-05) */
#st-seg .st-seg__b { font-weight: var(--font-weight-bold); }
#st-th-store { width: 110px; }
@media (max-width: 1100px) { .st-c-pr, .st-c-code { display: none; } }

/* ═══ 입고 화면 다듬기 (사장님 지시 2026-09-07) ═══
   ① 위 고르개 띠 — 카드와 같은 폭·같은 테두리로 한 세로줄에 선다. .card__head 의 바깥 음수 여백·아래 여백을 걷어낸다.
      띠와 카드 사이는 .screen.is-active 의 gap(space-6) 하나뿐이다 — 전에는 20+24 가 겹쳐 44px 이었다.
   ② 검색 상자 ↓ 24px ↓ 담긴 줄 표 ↓ 20px ↓ 확정 단추. 안내글·노란 경고는 다 뺐다 (.io-zero 규칙도 지웠다).
   ③ 「＋ 새 분류」 「＋ 새 품목 만들기」 「＋ 새 휠 품목」 은 물빛 테두리 단추 — 눈에 띄게.
   ④ 담긴 줄이 없을 때는 점선 빈 칸 한 줄(.iot__empty) */
#scr-io > .io-top {
  margin: 0;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
#io-in > .card { gap: var(--space-5); }
#io-tw, #io-wh, #io-svc { display: flex; flex-direction: column; gap: var(--space-6); }
#io-tw > .section-gap, #io-wh > .section-gap, #io-svc > .section-gap { gap: 0; }
.iot__empty {
  margin: 0; padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: center; font-size: var(--font-size-sm); color: var(--color-text-tertiary);
}
.btn--new {
  border: 1.5px solid var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-semibold);
}
.btn--new:hover { background: var(--color-primary-border) !important; }

/* ═══════════════════════════════════════════════════════════════
   입고 화면 이력 — 입고(+) · 반품(−) 2열 (2026-08-28 4차)
   ★ 반입·반출은 각자 화면에 자기 기록표를 갖는다. 여기 또 두면 같은 기록이 두 군데에 뜬다.
   ★ 칸이 셋에서 둘로 줄어 넓어졌다 — 긴 품목명이 덜 잘린다.
   ═══════════════════════════════════════════════════════════════ */
.iocols--2 { grid-template-columns: repeat(2, 1fr); }
/* 칸이 하나뿐일 때 — 반 폭짜리 카드가 덩그러니 남지 않게 폭을 다 쓴다 (2026-08-31 4차).
   반품이 자기 화면으로 옮겨 가면서 이 이력은 「입고」 한 칸이 됐다 */
.iocols--1 { grid-template-columns: 1fr; }
/* 반품 칸은 재고가 빠지는 쪽이라 테두리부터 다르게 보인다 */
.iocol--minus { border-color: var(--color-danger-soft); }
.iocol--minus .iocol__head { background: var(--color-danger-soft); }

/* 한 줄 : 품목 / 수량 / 일계 / 누계 / ✕
   ★ 격자로 못박는다. 자동 폭으로 두면 숫자 자리가 줄마다 흔들려 세로로 안 읽힌다 */
.iorow2b {
  display: grid;
  grid-template-columns: 1fr 52px 44px 60px;   /* ✕ 칸은 뺐다 (2026-09-06 — 입고 기록에 되돌리기 없음) */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.iorow2b:last-child { border-bottom: none; }
.iorow2b__main { min-width: 0; }
/* ★ 말줄임으로 자른다. 줄바꿈하면 줄 높이가 들쭉날쭉해져 표가 안 읽힌다 */
.iorow2b__name {
  font-weight: var(--font-weight-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 사유 자리에 날짜를 작게 넣었다 (사장님 지시 — 사유는 안 적는다) */
.iorow2b__day { margin-top: 1px; font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.iorow2b__q {
  text-align: right; font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.iorow2b__q.is-plus  { color: var(--color-primary); }
.iorow2b__q.is-minus { color: var(--color-danger); }
.iorow2b__n {
  text-align: right; font-size: var(--font-size-sm);
  color: var(--color-text-tertiary); font-variant-numeric: tabular-nums;
}
.iorow2b__n.is-sum { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.iorow2b .cart__x { opacity: .35; }
.iorow2b:hover .cart__x { opacity: 1; }

/* 열 이름 줄 — 숫자 칸이 셋이라 머리가 없으면 어느 것이 일계인지 모른다 */
/* ★ 변경 기록 줄 (2026-09-06) — 품목 · 무엇 · 전 → 후. 「전 → 후」 열은 오른쪽 끝을 맞춰 한 선에 선다 */
.iorow2b--chg { grid-template-columns: 1fr 56px 168px; }
.iochg__what { justify-self: center; font-size: var(--font-size-xs); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.iochg__what.is-qty { background: var(--color-primary-soft); color: var(--color-primary); }
.iochg__what.is-won { background: #FAEEDA; color: #854F0B; }
.iorow2b--head .iochg__what { background: none; color: inherit; font-weight: var(--font-weight-medium); }
.iochg__val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iochg__old { color: var(--color-text-tertiary); text-decoration: line-through; }
.iochg__arr { color: var(--color-text-tertiary); margin: 0 5px; }
.iochg__new { font-weight: var(--font-weight-semibold); }
.iochg__d { font-size: var(--font-size-xs); }
.iochg__d.is-plus { color: var(--color-primary); }
.iochg__d.is-minus { color: var(--color-danger); }
.iorow2b--head {
  padding-top: var(--space-1); padding-bottom: var(--space-1);
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  background: var(--color-surface-2, #F5F8FC);
}
.iorow2b--head .iorow2b__main { font-weight: var(--font-weight-medium); }
.iorow2b--head .iorow2b__q { font-weight: var(--font-weight-medium); color: inherit; }

/* 기간 합계 — 누계 맨 윗줄만 봐도 알지만, 줄이 많아지면 위로 올라가 확인해야 한다 */
.iocol__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.iocol__foot b { font-variant-numeric: tabular-nums; }
.iocol__foot .is-plus  { color: var(--color-primary); }
.iocol__foot .is-minus { color: var(--color-danger); }

/* 폰에서는 2열을 위아래로 접는다 — 반쪽 폭에 다섯 칸을 밀어 넣으면 숫자가 안 읽힌다 */
@media (max-width: 760px) {
  .iocols--2 { grid-template-columns: 1fr; }
}
/* 되돌리기 단추는 종이에 안 찍는다 */
@media print { .iorow2b .cart__x { display: none !important; } }

/* ============================================================
   ⑧ 본사 품목표 (2026-08-30 · 5안) — 옛 master.css 에서 옮겨 온 것

   ★★ 옮기면서 **다시 적혀 있던 것 여섯을 버렸다.**
     master.css 는 screens.css 를 안 쓰는 대신 필요한 몇 개
     (inline-row · empty · quick-box · card__head · cart__x · input--sm) 를
     **자기 안에 다시 적어** 두었다. 한 화면에 두 파일이 같이 안 붙어서 지금까지
     부딪힐 일이 없었던 것뿐이다. 이제는 같이 붙으므로 **여기 있는 것을 그대로 쓴다.**
     (.inline-row · .card__head 는 이 파일 위쪽, .cart__x 는 맨 위, .quick-box 와 .empty 는
      글자 하나까지 같아서 그냥 지웠다.)

   ⚠ **`.input--sm` 만은 옮겨 오면 안 된다.** master.css 는 그것을 맨바닥에
     `height:32px` 로 박아 두었는데, 매장 앱에서는 그 클래스를 장바구니·재고·급여대장·
     지출대장·초대 등 **스무 곳 넘게** 쓰면서 지금은 44px 로 그리고 있다.
     맨바닥에 옮겨 오면 일곱 화면의 칸이 한꺼번에 작아진다.
     그래서 **품목표 표 안으로만** 좁혀 건다 (아래 #scr-master .mt-tablewrap).

   ★ 옛 화면의 머리띠(.mt-top) · 들어오는 문(.mt-gate/.mt-card/.mt-h/.mt-sub/.mt-msg) ·
     .mt-body · .mt-work 은 안 옮겼다. 여기는 이미 로그인해 들어온 안쪽이고,
     세로로 벌리는 일은 .screen.is-active 가 이미 한다.
   ============================================================ */

.mt-ver { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.mt-paste {
  width: 100%; height: auto; min-height: 120px;
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm);
}
/* ★ 품목이 수천 줄이다. 표가 길어도 화면이 밀리지 않게 표 안에서만 구른다 */
.mt-tablewrap { max-height: 62vh; overflow: auto; }
.mt-tablewrap thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg); }
.mt-send {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
/* 옛 master.css 의 맨바닥 .input--sm 을 대신한다 — 품목표 표 안에서만 작아진다 */
#scr-master .mt-tablewrap .input,
#scr-master .mt-tablewrap .select,
#scr-master .mk-읽은__wrap .input {
  height: 32px;
  font-size: var(--font-size-sm);
  padding: 0 var(--space-2);
}
/* ★ 「종」 칸 고르개는 제 글자만큼만 넓힌다. .select 는 맨바닥이 width:100% 라
     90px 짜리 칸에 갇히면 「타이어」 가 화살표에 잘려 「타이」 로 보인다
     (옛 master.css 는 .select--sm 의 width:auto 로 이 일을 하고 있었다) */
#scr-master .mt-tablewrap .select { width: auto; }

/* ── 품목표 표를 재고 관리 줄에 맞춘다 (사장님 시안 2026-08-30) ──
   ★ **칸마다 세로 선.** 열이 아홉이라 가로선만으로는 눈이 흐트러진다 */
.table--mk td { border-right: 1px solid var(--color-border); }
.table--mk td:last-child { border-right: none; }
.table--mk th { border-right: 1px solid var(--color-border-strong); }
.table--mk th:last-child { border-right: none; }
/* ★ **글씨는 전부 같은 진한 색.** 흐린 글씨를 안 쓴다 — 값이 없어 뜨는 「—」 도 같은 색이다.
     (안내글 placeholder 만 흐리다. 그것은 「안 적힌 것」 이라 흐린 게 맞다) */
.table--mk td, .table--mk .input { color: var(--color-text); }
.table--mk .mk-code { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.table--mk .is-num .input { font-weight: var(--font-weight-semibold); }

/* ★★ 한 칸에 값 둘 — **열을 늘리지 않고** 곁값을 붙인다.
     모델 칸 「VENTUS S1 evo3 ( 벤투스 S1 에보3 )」 · PR 칸 「4PR / KR」
   ★ 한 품목은 한 줄이다. 둘째 층을 만들지 말 것 */
.mk-two { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mk-two .input { min-width: 0; flex: 1 1 0; }
/* 모델 칸 — 영문이 넓고 한글이 좁다. 눈에 먼저 들어와야 하는 것은 영문 모델명이다 */
.mk-two .input:first-child { flex: 2 1 0; }
.mk-two__sep { flex: 0 0 auto; color: var(--color-text-secondary); }
/* ★ 찾기 줄의 종 고르개는 늘어나지 않는다. .inline-row .select 의 flex:1 이
     130px 을 무시하고 찾기 칸만큼 부풀려 놓는다 — 무엇을 고르는 칸인지 안 보인다 */
#scr-master .inline-row .select { flex: 0 0 130px; width: 130px; }

/* 좁은 화면 — 본사는 주로 컴퓨터로 보지만 폰으로 볼 수도 있다 */
@media (max-width: 700px) {
  .mt-send { flex-direction: column; align-items: stretch; }
  .mt-tablewrap { max-height: none; }
}
/* ── 제조사 카드 격자 (2026-08-30 · 품목표 1안) ──
   가격표는 제조사마다 따로 온다. **카드가 곧 브랜드**이고, 카드를 열면 그 제조사 전용
   붙여넣기 칸과 품목 목록이 나온다.
   ★ 카드에 건수와 마지막 올린 날짜를 적는다 — 「금호는 지난달 것이네」 가 한눈에 보여야 한다 */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.mk-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.mk-card:hover { border-color: var(--color-primary-border); background: var(--color-bg-soft); }
.mk-card__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.mk-card__n { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.mk-card__d { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* 아직 하나도 안 올린 제조사 — 없는 것이 아니라 「아직」 이다. 흐리게만 둔다 */
.mk-card--none .mk-card__n { color: var(--color-text-tertiary); }
/* 열어 둔 제조사 — 아래 카드가 그 제조사 것임을 여기서 알아본다 */
.mk-card.is-on {
  border-color: var(--color-primary);
  border-width: 2px;
  padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
  background: var(--color-primary-soft);
}
.mk-card.is-on .mk-card__name { color: var(--color-primary); }
/* ＋ 제조사 추가 — 점선으로 「빈 자리」 임을 알린다 */
.mk-card--add {
  align-items: center; justify-content: center;
  border-style: dashed; color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* 제조사 넣는 한 줄 — ★ 창(모달)이 아니다. 이 프로그램에 뜨는 창은 하나도 없다 */
.mk-new {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-md);
}
.mk-new .input { flex: 1; min-width: 180px; width: auto; }

/* ── 미리보기 칸 (2026-08-30 · 품목표 2차 1안) ──
   붙여넣기와 뿌리기 두 자리에 같은 옷을 입힌다.
   ★★ **창(모달)이 아니다.** 누르면 그 자리에서 아래로 펼쳐지는 칸이다 —
     이 프로그램에 뜨는 창은 하나도 없다. 취소를 누르면 접히고 아무 일도 안 일어난다.
   ★ 노란 띠다. 「아직 안 한 일이고, 한 번 더 눌러야 한다」 를 색으로 알린다 */
.mk-pre {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
}
.mk-pre__head { font-size: var(--font-size-lg); color: var(--color-text); }
.mk-pre__head b { color: var(--color-warning); }
.mk-pre__sub {
  display: block; margin-top: var(--space-1);
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.mk-pre__sub--bad { color: var(--color-danger); font-weight: var(--font-weight-semibold); }
.mk-pre__go { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* 숫자 셋 — 값 바뀜 · 새로 들어옴 · (그대로 둠 / 없어짐) */
.mk-nums {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.mk-num {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.mk-num__lb { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.mk-num__v {
  font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold);
  line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--color-text);
}
/* 「그대로 둠」 은 아무 일도 안 일어나는 쪽이다 — 눈이 거기 먼저 가면 안 된다 */
.mk-num__v--quiet { color: var(--color-text-secondary); }
.mk-num__say { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }

/* 문제 있는 줄 — ★ 몇째 줄인지 번호와 함께 적는다 */
.mk-bad {
  padding: var(--space-3);
  background: var(--color-danger-soft);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  max-height: 220px; overflow-y: auto;
}
.mk-bad__cap { font-weight: var(--font-weight-semibold); color: var(--color-danger); margin-bottom: var(--space-2); }
.mk-bad__row { color: var(--color-text); line-height: 1.7; }
.mk-bad__row b { font-variant-numeric: tabular-nums; }
.mk-bad__row--ok { color: var(--color-text-secondary); }

/* 「무엇이 바뀌나 보기」 로 펼치는 실제 줄 */
.mk-more { align-self: flex-start; }
.mk-detail {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  max-height: 320px; overflow-y: auto;
  font-size: var(--font-size-sm);
}
.mk-detail__cap {
  font-weight: var(--font-weight-semibold); color: var(--color-text-secondary);
  margin: var(--space-2) 0 var(--space-1);
}
.mk-detail__cap:first-child { margin-top: 0; }
.mk-detail__row {
  display: flex; gap: var(--space-3); justify-content: space-between;
  padding: 3px 0; border-bottom: 1px solid var(--color-border);
}
.mk-detail__row:last-child { border-bottom: none; }
.mk-detail__nm { flex: 1; min-width: 0; color: var(--color-text); }
.mk-detail__v { flex: 0 0 auto; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.mk-detail__v b { color: var(--color-text); }
.mk-detail__more { color: var(--color-text-tertiary); padding-top: var(--space-2); }

@media (max-width: 700px) {
  .mk-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* 품목표는 종이로 뽑을 것이 아니다 */
@media print { #scr-master { display: none !important; } }

/* ★★ 열이 열이라 좁히면 글자가 잘린다 — 우겨넣지 말고 표 안에서 옆으로 민다
     (.mt-tablewrap 이 overflow:auto 다). 「한 품목은 한 줄」 이 그래야 지켜진다 */
#scr-master .mt-tablewrap .table--mk { min-width: 1200px; }
/* 해석표는 열이 여덟(코드·재고가 없다)이라 좀 좁아도 된다 */
#scr-master .mk-읽은__wrap .table--mk { min-width: 980px; }
/* 코드는 프로그램이 지은 한 덩어리다 — 「2354519-95V-한」 / 「국」 으로 접히면 안 된다 */
.table--mk .mk-code { white-space: nowrap; }
.table--mk .mk-two .input[data-f='하중'], .table--mk .mk-two .input[data-f='속도'], .table--mk .mk-two .input[data-f='하중'] + .input { min-width: 0; }
/* 모델 칸은 남는 자리를 다 쓰되, 한글 이름이 잘릴 만큼 좁아지지는 않는다 */
#scr-master .mt-tablewrap .table--mk td:nth-child(6),
#scr-master .mt-tablewrap .table--mk th:nth-child(6) { min-width: 330px; }
#scr-master .mk-읽은__wrap .table--mk td:nth-child(4),
#scr-master .mk-읽은__wrap .table--mk th:nth-child(4) { min-width: 320px; }

/* ★ 재고 관리 — 본사가 내려보낸 한글 이름은 열을 따로 두지 않고 모델 칸 안에 붙인다
     (품목표 표와 같은 수법). 손님은 「벤투스 에보3」 라고 부른다 */
.st-ko { color: var(--color-text-secondary); }
.st-ko::before { content: " ("; }
.st-ko::after { content: ")"; }

/* ── 해석표 (2026-08-30 · 2차 2안) ──
   제조사 가격표를 알아서 푼 결과를 미리보기 안에 표로 올린다.
   ★★ **바로 넣지 않는다.** 눈으로 보고 고친 뒤 「넣기」 다 —
     알아서 푸는 이상 틀리게 읽는 줄이 반드시 나오고, 그것을 넣기 전에 잡는 자리다 */
.mk-읽은 {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.mk-읽은__head {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
}
.mk-읽은__bad {
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-danger-soft); color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}
.mk-읽은__only { display: flex; align-items: center; gap: 4px; cursor: pointer; }
/* 표가 길어도 화면이 밀리지 않게 — 표 안에서만 구른다 */
.mk-읽은__wrap { max-height: 46vh; overflow: auto; }
.mk-읽은__wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg); }

/* ★ 못 읽은 조각은 **빨갛게 비워 둔다** — 어디를 채워야 하는지 한눈에 보인다 */
.mk-빔 {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.mk-빔::placeholder { color: var(--color-danger); }
/* 덜 읽은 줄은 줄 전체를 옅게 물들인다 — 200줄 가운데서도 눈에 걸린다 */
.mk-덜 > td { background: #FFF7F7; }

/* 건너뛴 줄·붙인 괄호말은 「탈」 이 아니다 — 알려만 주는 것이라 조용한 색으로 */
.mk-bad__cap--quiet { color: var(--color-text-secondary); margin-top: var(--space-2); }

/* ══════════ 품목표 — 엑셀 파일 올리기 (2026-09-03) ══════════
   사장님 지시 「파일올리기로 가야지」. 붙여넣기 칸 바로 위에 둔다 —
   ★ 이쪽이 먼저 눈에 들어와야 한다. 붙여넣기는 「또는」 이다. */
.mt-drop {
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--color-primary-soft);
  transition: background .12s, border-color .12s;
}
/* 파일을 끌고 들어오면 받을 자리라는 것이 보여야 한다 */
.mt-drop.is-over {
  border-style: solid;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.mt-drop .quick-box__title { margin-top: 0; }
/* 파일 고르개는 글자만 있어 키가 작다 — 다른 칸과 키를 맞춘다 */
.mt-file { padding: 6px 10px; cursor: pointer; }