/* ============================================================
   sale.css — 「내가 지금 어디에 있나」 를 눈에 보이게 한다
   사장님 지적 (2026-08-25)
     1. 신규 고객 / 기존 고객 — 어느 쪽인지 표가 안 난다
     3. 칸을 눌렀을 때 여기를 적고 있다는 표가 없다

   ★ 맨 끝에 물린다. 앞의 css 를 이겨야 해서 자리로 이긴다.
     (!important 는 마지막 수단으로만 쓴다)
   ============================================================ */

/* ── 1. 신규 / 기존 고르개 ──────────────────────────────────
   겉옷 .seg 만 새로 붙였다. 안의 단추 id·class 는 그대로다.
   screens.js 가 btn--soft ↔ btn--ghost 를 갈아 끼워 고르기를 나타낸다.
   혹시 is-active 를 쓰는 자리가 있어도 같이 잡아 둔다. */
.seg{
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  background: var(--color-surface-2, #F3F7FC);
  border: 1px solid var(--color-border, #DCE5EE);
  border-radius: 999px;
}
.seg .btn{
  border: 0;
  border-radius: 999px;
  padding: 5px 15px;
  box-shadow: none;
  font-weight: 500;
}
/* 안 고른 쪽 — 바탕 없이 흐리게 */
.seg .btn--ghost{
  background: transparent;
  color: var(--color-text-tertiary, #7A8A90);
}
.seg .btn--ghost:hover{
  background: rgba(55,138,221,.08);
  color: var(--color-text-secondary, #4A5B61);
}
/* 고른 쪽 — 물빛으로 꽉 채운다 */
.seg .btn--soft,
.seg .btn.is-active{
  background: var(--color-primary, #378ADD);
  border: 0;
  color: #fff;
}
.seg .btn--soft:hover,
.seg .btn.is-active:hover{
  background: var(--color-primary-strong, #2E7AC8);
  color: #fff;
}

/* ── 3. 지금 적고 있는 칸 ───────────────────────────────────
   테두리만 굵게 하면 잘 안 보인다. 바탕까지 옅은 물빛으로 깐다. */
.input:focus,
.select:focus,
textarea.input:focus{
  border-color: var(--color-primary, #378ADD);
  background: #E9F2FB;
  box-shadow: 0 0 0 3px rgba(55,138,221,.18);
  outline: none;
}
/* 칸을 감싼 묶음도 같이 살짝 든다 — 라벨까지 눈에 들어온다 */
.field:focus-within .field__label{
  color: var(--color-primary, #378ADD);
}

/* 눌러서 고르는 자리(줄·칸)도 같은 물빛으로 */
.ac__list [aria-selected="true"],
.ac__list .is-on,
tr.is-on > td,
.iocol .is-on{
  background: #E9F2FB;
  box-shadow: inset 3px 0 0 var(--color-primary, #378ADD);
}

/* ── 아무것도 안 나오는 첫 화면 ─────────────────────────────
   4·5·6 번은 screens.js 가 있어야 한다. 여기는 그 자리의 옷만 미리 지어 둔다. */
/* ★ .hint-today 규칙을 지웠다 (2026-09-04) — 「오늘 것만 보이고 있어요」 안내를
     2026-08-28 갱신판에서 없애기로 하셨다. 규칙만 남아 붙을 자리가 없었다.
     (규칙은 그대로다 — 찾기 전에는 오늘 것만 보여 준다. 안내만 안 붙인다) */

/* ═══════════════════════════════════════════════════════════════
   고객·판매 화면 손질 (2026-08-28 5차)
   ★ sale.css 는 맨 끝에 물려 자리로 이긴다. !important 는 마지막 수단이다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 판매 상품 두 블록 ──
   타이어·휠은 숫자로 찾고, 경정비는 이름을 몰라도 고르게 한다.
   ★ 좌우로 나누면 왼쪽이 400px 남짓이라 「킥스 파오1 5W30 4L」 이 잘린다. 위아래로 쌓는다 */
/* ★★ 두 블록을 **같은 모양**으로 통일했다 (사장님 지시 2026-08-30 · 3차).
     앞서 「경정비 쪽만 물빛으로 칠해 두 블록을 확실히 갈라 둔다」 고 정했던 것을 뒤집는다.
     타이어·휠 머리가 밋밋한 회색이라 한 화면에 서로 다른 옷 두 벌이 서 있었다.
     이제 둘 다 카드와 같은 차림이다 — **물빛 머리띠 + 물빛 테두리 + 흰 바닥.**
   ⚠ .sblock 에 overflow:hidden 을 넣지 말 것. 타이어·휠 블록 안에 상품 검색 목록
     (.ac__list) 이 들어 있는데, 그것은 블록 밖으로 내려와 뜬다 — 잘려서 안 보이게 된다.
     그래서 머리띠가 자기 위쪽 모서리를 스스로 둥글린다 (카드 머리띠와 같은 수법) */
.sblock{
  border: 1px solid var(--color-primary-border, #B5D4F4);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-2, 8px);
  background: var(--color-bg, #fff);
}
.sblock:last-child{ margin-bottom: 0; }
.sblock__cap{
  margin: calc(-1 * var(--space-3, 12px)) calc(-1 * var(--space-3, 12px)) var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-primary-soft, #E6F1FB);
  border-bottom: 1px solid var(--color-primary-border, #B5D4F4);
  /* 테두리 1px 만큼 안으로 들여 깎는다 — 안 그러면 띠 모서리가 테두리 밖으로 삐져나온다 */
  border-radius: calc(var(--radius-md, 10px) - 1px) calc(var(--radius-md, 10px) - 1px) 0 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #378ADD);
}
/* ★ .sblock--svc 는 이제 .sblock 과 똑같다. 클래스는 남겨 둔다 —
     app.html 과 screens.js 가 그 이름으로 경정비 블록을 짚는다 */
.sblock .field__help{ margin: var(--space-2, 8px) 0 0; }

/* ── 이 번호로 등록된 차 목록 ──
   ★ 연관검색어가 아니다. 끝까지 다 치고 엔터를 쳤을 때 정확히 맞은 것들만 나온다 */
.carlist{
  border: 1px solid var(--color-primary-border, #B5D4F4);
  border-radius: var(--radius-md, 10px);
  background: var(--color-primary-soft, #E6F1FB);
  margin-bottom: var(--space-3, 12px);
  overflow: hidden;
}
.carlist__cap{
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #378ADD);
  border-bottom: 1px solid var(--color-primary-border, #B5D4F4);
}
.carlist__row{
  display: flex; align-items: center; gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid rgba(181,212,244,.5);
  background: var(--color-bg, #fff);
  cursor: pointer;
}
.carlist__row:last-child{ border-bottom: none; }
.carlist__row:hover{ background: var(--color-primary-soft, #E6F1FB); }
.carlist__no{ flex: 0 0 auto; font-weight: var(--font-weight-semibold, 600); }
.carlist__sub{ flex: 1; min-width: 0; font-size: var(--font-size-xs, 11px); color: var(--color-text-tertiary, #7A8A90); }
/* 「＋ 다른 차 새로 넣기」 — 목록 맨 아래 */
.carlist__new .carlist__no{ color: var(--color-primary, #378ADD); }

/* ── 고객 조회 칸 네 개를 같은 폭 2열로 ──
   「기간」 라벨이 왼쪽에 붙어 아래 줄만 밀려 있던 것을 고쳤다 (라벨을 칸 위로)
   ★ 줄 사이 여백은 격자(gap)가 맡는다. 여기서 margin-bottom 을 또 주면 8px 이 덧붙어
     왼쪽 카드와 줄이 어긋난다 (2026-08-30 · 3차에 걷어냈다) */


/* ═══════════════════════════════════════════════════════════════
   고객·판매 화면 2차 손질 (2026-08-28 6차)
   ★ 5차의 「배경 띠 세 종류」 규칙은 걷어냈다 — 줄무늬처럼 보여 정신 사나웠다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 종류 알약 : 한 글자 ──
   ★ 이모지(⚫ ⚪ 🔧)와 별(★)은 쓰지 않는다 —
     이모지는 기기마다 모양이 제각각이고, 별은 「즐겨찾기·별점」으로 오해를 산다 */
.kbadge{
  display: inline-block; flex: 0 0 auto;
  min-width: 22px; padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.6; text-align: center;
  margin-right: 6px; vertical-align: 1px;
}
.kbadge--t{ background: var(--color-primary-soft, #E6F1FB); color: var(--color-primary, #378ADD); }
.kbadge--w{ background: var(--color-surface-2, #F3F7FC); color: var(--color-text-secondary, #4A5B61); }
.kbadge--s{ background: var(--color-warning-soft, #FDF3E4); color: var(--color-warning, #D97706); }
/* ★ 공임 「공」 (사장님 지시 2026-09-01) — 「타」 와 같은 물빛이다.
     칸을 따로 둔 것은 나중에 이 색만 바꿔도 타이어가 안 흔들리게 하려는 것이다 */
.kbadge--g{ background: var(--color-primary-soft, #E6F1FB); color: var(--color-primary, #378ADD); }

/* ── 결제가 안 맞을 때만 뜨는 빨간 한 줄 ── */
.pay-bad{ color: var(--color-danger, #E5484D); font-weight: var(--font-weight-semibold, 600); }

/* ══════════ 판매 내역 — 표가 아니라 **진짜 상자(div)** 다 ══════════
   ★★★ 2026-08-31. 표 칸(td)에 테두리·둥근 모서리를 걸어 상자를 흉내 냈다가 세 번 지적받았다 —
     ① 아래 모서리가 칸 경계에서 끊긴다 ② 맨 아래 상자는 바닥이 지워진다
     ③ **브라우저를 125%·150% 로 키우면 바닥 선이 통째로 사라진다**
     셋 다 「칸에 그린 테두리」 라서 나는 일이다. div 에 border 를 두르면 배율이 얼마든 온전하다.
     **표로 되돌리지 말 것.**
   ★ 칸 맞춤은 격자로 한다 — 품목은 남는 만큼, 수량·금액은 고정 폭이라 세로로 줄이 맞는다. */
.salelist{ display: block; }

/* 손님 띠 — 상자와 **색을 반대로** 간다. 상자는 흰 바탕에 물빛 선, 띠는 물빛 바탕에 흰 글씨.
   같은 방향으로 세게 하면 둘이 다투기만 하고 층이 안 갈린다 */
.sgrp2{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  background: var(--color-primary, #378ADD); color: #fff;
  font-weight: var(--font-weight-semibold, 600);
  padding: 10px var(--space-4, 16px);
  border-radius: var(--radius-md, 13px);
  margin-bottom: var(--space-3, 12px);
}
/* 손님이 바뀌는 자리는 더 크게 벌린다 — 건 사이 틈과 같으면 띠가 앞 상자 머리처럼 읽힌다 */
.sgrp2--next{ margin-top: 26px; }

/* ★ 한 건 = 상자 하나. div 라서 네 면이 늘 온전하다 */
.sbox{
  border: 2px solid var(--color-primary, #378ADD);
  border-radius: var(--radius-md, 13px);
  background: #F3F7FC;
  overflow: hidden;                 /* 안쪽 줄이 둥근 모서리를 넘지 않게 */
  margin-bottom: var(--space-3, 12px);
}
.sbox:last-child{ margin-bottom: 0; }

/* 상자 머리 — 일자·차량번호. 상자 안에서 가장 먼저 읽히는 줄이라 진하게 */
.sbox__head{
  padding: var(--space-2, 8px) var(--space-4, 16px);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text, #132832);
}

/* 한 줄 — 품목 / 수량 / 금액. 수량·금액은 고정 폭이라 상자마다 세로로 줄이 맞는다 */
.sbox__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 110px;
  align-items: center; gap: var(--space-3, 12px);
  padding: 3px var(--space-4, 16px);
  font-size: var(--font-size-md, 14px);
}
.sbox__row .nm{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbox__row .q,
.sbox__row .w{ text-align: right; font-variant-numeric: tabular-nums; }
.sbox__row .w{ font-weight: var(--font-weight-semibold, 600); }

/* 합계 줄 — 상자 안에서 품목과 가르는 얇은 윗선 + 굵은 숫자. 왼쪽에 결제 글 */
.sbox__sum{
  border-top: 1px solid #CFDEEE;
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px); padding-bottom: var(--space-2, 8px);
}
.sbox__sum .q{ font-weight: var(--font-weight-semibold, 600); }

/* 폰에서는 금액 칸을 조금 줄인다 — 좁은 폭에서 품목명이 너무 잘리지 않게 */
@media (max-width: 760px){
  .sbox__row{ grid-template-columns: minmax(0, 1fr) 52px 92px; padding-left: var(--space-3, 12px); padding-right: var(--space-3, 12px); }
  .sbox__head{ padding-left: var(--space-3, 12px); padding-right: var(--space-3, 12px); }
}

/* ── 장바구니 줄 : 세 층 (2026-08-28 갱신판 시안) ──
     1층 알약 + 브랜드·모델 (검정)
     2층 사이즈 / 재고 (회색, 작게)
     3층 수량 · 개당가격 · 합계금액 (칸마다 작은 라벨)
   ★ 눈에 먼저 들어와야 하는 것은 모델이다. 사이즈·재고는 확인용이라 한 단 내려간다.
     이름 뒤에 이어 붙이지 않는다 */
.cart2{
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border, #DCE5EE);
}
.cart2:last-child{ border-bottom: none; }
.cart2__top{ display: flex; align-items: flex-start; gap: 2px; }
/* ★ 자르지 않는다. 길면 두 줄로 접히기만 한다 (사장님: 「사이즈가 잘리면 안 돼」) */
.cart2__name{
  flex: 1; min-width: 0;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.45; word-break: break-word;
}
.cart2__top .cart__x{ flex: 0 0 auto; margin-left: var(--space-2, 8px); }
.cart2__say{ margin-top: 1px; }
.cart2__bot{ display: flex; align-items: flex-end; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }

/* 칸 셋 — 수량은 좁게, 금액 둘은 넓게 */
.ccell{ display: block; min-width: 0; }
.ccell:nth-child(1){ flex: 0 0 78px; }
.ccell:nth-child(2){ flex: 1 1 100px; }
.ccell:nth-child(3){ flex: 1 1 110px; }
.ccell__lb{
  display: block; margin-bottom: 2px;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-tertiary, #7A8A90);
  font-weight: var(--font-weight-medium, 500);
}
.ccell__in{ width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
/* ★ 개당가격은 본사가 정한 공장도가라 매장이 고칠 자리가 아니다 — 읽기 전용 회색 */
.ccell__ro{
  background: var(--color-surface-2, #F3F7FC);
  color: var(--color-text-secondary, #4A5B61);
  border-color: transparent; cursor: default;
}
.ccell__ro:focus{ outline: none; }
/* 합계금액을 안 적었을 때만 빨간 테두리 (판매 완료가 막히는 자리다) */
.cart2__won.is-need{ border-color: var(--color-danger, #E5484D); background: var(--color-danger-soft, #FDEBEC); }


/* ═══════════════════════════════════════════════════════════════
   고객·판매 화면 3차 손질 (2026-08-30)
     1안 좌우 1 : 1 2열 — 두 카드가 같은 눈금을 쓰게 한다
     4안 ① 실제로 들어간 값은 작고 흐리게 두지 않는다
          ② 켜진 탭이 한눈에 보이게 한다
   ★ sale.css 는 맨 끝에 물려 자리로 이긴다. !important 는 마지막 수단이다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 두 카드 줄 맞추기 (1안 곁들이) ──
   좌우를 반씩 나누면서 두 카드가 **같은 눈금**을 쓰도록 못박았다. 그래야 왼쪽
   「연락처 / 차량 번호」 줄과 오른쪽 「차량번호 / 연락처」 줄이 같은 높이에 선다.
     카드 머리띠 56 · 안쪽 여백 20 · 라벨 한 줄 22 · 입력 칸 44 · 줄 간격 16 · 칸 사이 14
   ★ 반드시 #scr-sale 안으로만 건다. .card 와 .card__head 는 다섯 화면이 함께 쓰는 부품이라
     맨바닥에 걸면 재고·입고·매출·정산 화면까지 한꺼번에 딸려 간다.
   ★ height 가 아니라 min-height 다. 1100px 아래에서는 카드가 위아래로 서므로 줄 맞출 일이
     없고, 좁은 폰에서 머리띠 안의 것들이 접힐 자리는 남겨 두어야 한다. */
#scr-sale .card{ padding: 20px; }
#scr-sale .card__head{
  min-height: 56px;
  /* 안쪽 여백이 20px 이 되었으니 밖으로 끌어내는 값도 20px 이다 (24px 이면 띠가 삐져나온다) */
  margin: -20px -20px 0;
  /* 위아래 8 + 안에 든 것 40(알약 묶음·탭 묶음) = 딱 56 이다.
     0 으로 두면 좁은 화면에서 머리띠 안이 접혔을 때 글자가 띠 가장자리에 붙는다 */
  padding: var(--space-2, 8px) 20px;
  /* 아래 여백은 .section-gap 의 16px 이 맡는다 — 여기서 또 주면 두 번 벌어진다 */
}
/* 줄 간격 16 · 칸 사이 14 */
#scr-sale .grid--2{ column-gap: 14px; row-gap: 16px; }
/* 라벨 한 줄 22px 과 입력 칸 44px 은 이미 자리를 잡고 있다 —
   라벨은 screens.css 의 #scr-sale .field__label, 칸은 components.css 의 .input 이다.
   여기서 또 적으면 눈금이 두 곳에 나뉘어 한쪽만 고치는 일이 생긴다 */

/* ── 4안 ② 켜진 탭 ──
   오른쪽 카드 탭 셋(고객 조회 · 거래명세서 · 보관 타이어)은 밑줄 2px 하나로만 켜짐을 알렸다.
   그 카드 머리띠가 이미 물빛이라 물빛 밑줄이 바탕에 묻혀 **어느 것이 켜졌는지 안 보였다.**
   왼쪽 「신규 고객」 알약 고르개만큼 확실해야 한다는 것이 사장님 말씀이다 (2026-08-30 · 3차).
   ★ .seg 를 그대로 베끼지 않는다 — 저쪽은 단추 묶음이고 이쪽은 탭이다.
     쓰는 것은 같은 수법(고른 쪽을 물빛으로 꽉 채우고 흰 글씨)뿐이다.
   ★ class 와 id 는 손대지 않는다. screens.js 가 is-active 를 갈아 끼운다 */
#scr-sale .card__head .tabs{
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-primary-border, #B5D4F4);
  border-radius: 999px;
}
#scr-sale .card__head .tab{
  height: 32px;
  margin: 0;
  padding: 0 var(--space-4, 16px);
  border: 0;                       /* 옛 밑줄 2px 을 지운다 */
  border-radius: 999px;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-tertiary, #8AA2AC);
}
#scr-sale .card__head .tab:hover{
  background: rgba(55,138,221,.08);
  color: var(--color-primary, #378ADD);
}
#scr-sale .card__head .tab.is-active{
  background: var(--color-primary, #378ADD);
  color: var(--color-text-invert, #fff);
  font-weight: var(--font-weight-semibold, 600);
}

/* ── 4안 ① 실제로 들어간 값은 작고 흐리게 두지 않는다 ──
   원칙은 둘로 갈린다.
     · **안 적힌 것** — 안내글(placeholder) · 「품목을 고르세요」 같은 첫 항목 · 칸 이름표.
       이것들은 흐린 게 맞다. 그대로 둔다
     · **실제로 들어갔거나 골라진 값** — 크기를 올리고 색을 진하게 한다
   본보기로 지적하신 곳은 장바구니 둘째 층(245/45R18 / 재고 8) 이었지만,
   판매 화면 전체에서 같은 사례를 찾아 함께 고쳤다 (사장님 지시 2026-08-30 · 3차). */

/* 장바구니 둘째 층 · 상품 검색 목록의 둘째 줄 · 보관 「3일째」 —
   모두 고른 상품이나 맡은 물건의 **실제 값**이다.
   ★ .ac__none (찾는 상품이 없습니다) 은 안내라 손대지 않는다 — 클래스가 다르다 */
#scr-sale .ac__sub,
#scr-sale .cart2__say{
  font-size: var(--font-size-md, 14px);
  color: var(--color-text-secondary, #4A6470);
  font-weight: var(--font-weight-medium, 500);
}

/* ── 장바구니 개당가격 칸 ──
   ★ 회색으로 흐리게 두었던 것을 진하게 바꿨다 (사장님 결정 2026-08-30 · 3차).
     「손으로 못 고치는 읽기 전용 칸」 이라는 것이 흐리게 둘 까닭은 되지 않는다 —
     104,000 은 실제로 들어간 값이고, 손님 앞에서 읽는 숫자다.
   ★ 읽기 전용이라는 표시는 **바탕색과 테두리**가 한다. 글자 색으로 알리지 않는다 */
.ccell__ro{
  background: var(--color-bg-soft, #F3F7FC);
  color: var(--color-text, #132832);
  font-weight: var(--font-weight-semibold, 600);
  border-color: var(--color-border, #E0E9F2);
  cursor: default;
}
/* 짚어도 「지금 여기를 적고 있다」 는 물빛 표시를 내지 않는다 — 못 적는 칸이다 */
.ccell__ro:focus{
  background: var(--color-bg-soft, #F3F7FC);
  border-color: var(--color-border, #E0E9F2);
  box-shadow: none;
  outline: none;
}

/* 이 번호로 등록된 차 목록 — 마지막 방문일과 주행거리도 실제 값이다 */
.carlist__sub{
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary, #4A6470);
}

/* ⚠ 표 시절(.table--sale .sday/.ssum) 규칙은 걷어냈다 —
     판매 내역은 이제 표가 아니라 상자(.sbox)다. 위쪽 .sbox__* 규칙이 그 일을 한다 */

/* 「남은 금액」 옆 총액 — 이름표(.pay-total__label)의 13px 을 그대로 물려받아 작았다.
   실제로 셈해 나온 금액이므로 한 단 키우고 진하게 간다.
   ★ 오른쪽 큰 숫자(남은 금액)보다는 작게 둔다 — 눈이 먼저 갈 곳은 그쪽이다 */
#c-sum{
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-secondary, #4A6470);
}

/* ── 종이로 뽑을 때 ──
   screens.css 의 인쇄 규칙(@media print .card__head)은 클래스 하나짜리라
   위의 #scr-sale 규칙에 진다. 여기서 같은 무게로 한 번 더 눌러 준다 —
   안 그러면 종이에서도 머리띠가 카드 밖으로 20px 끌려 나간다 */
@media print{
  #scr-sale .card__head{
    min-height: 0;
    margin: 0 0 var(--space-4);
    padding: 0 0 var(--space-3);
  }
}

/* ── 보관 타이어 표 : 좁으면 우겨넣지 말고 옆으로 민다 ──
   좌우를 반씩 나누면서 조회 카드가 좁아졌다. 열이 여섯인 보관 표가 그 폭에 억지로 들어가느라
   「2026-08-」 / 「28」 처럼 **날짜와 차량번호가 중간에서 쪼개졌다.**
   그 표는 제 상자(.table-wrap) 가 이미 overflow-x:auto 다 — 우겨넣을 까닭이 없다.
     width:auto + min-width:100% → 좁으면 제 상자 안에서 옆으로 밀고, 넓으면 꽉 채운다
   ★ 품목만 접히게 남긴다. 손으로 적는 자유 글이라 길어질 수 있고, 그것까지 못 접게 하면
     긴 글 하나가 표를 통째로 밀어낸다.
   ★ 여기 남은 표는 **보관 타이어** 하나뿐이다 (판매 내역은 상자로 바뀌었다) */
#q-result .table{ width: auto; min-width: 100%; white-space: nowrap; }
#q-result .table td:nth-child(2){ white-space: normal; min-width: 120px; }