/* CAR design system */
:root {
  --red: #c3002f;
  --red-dark: #9d0026;
  --ink: #1a1d21;
  --ink-2: #44494f;
  --ink-3: #6d737c; /* 4.8:1 on white — 12px 라벨/디스클레이머도 WCAG AA 충족 */
  --line: #e4e7ec;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ok: #0f8a4c;
  --warn: #b45309;
  --bad: #b91c1c;
  --blue: #1d4ed8;
  --sidebar: #16181d;
  --radius: 12px;

  /* ── 디자인 토큰 (2026-10-08) ──
     기존 이름은 전부 값 그대로. 새 토큰은 옛 값을 별칭으로 가리키므로 템플릿이 옮겨 가기 전에도
     아무것도 깨지지 않는다. 대비 수치는 WCAG 계산값. */
  /* 브랜드: base.html 이 설정 brand_color 를 <body style="--brand:…"> 로 넣는다 (없으면 DRIVE 빨강) */
  --brand: var(--red);
  --brand-dark: var(--red-dark);
  --brand-tint: #fbe9ec;  --brand-tint: color-mix(in srgb, var(--brand) 8%, #fff);
  --brand-track: #f3c9cf; --brand-track: color-mix(in srgb, var(--brand) 18%, #fff);
  /* 어두운 면 (사이드바 · 손님 상단바 · 어두운 vtog) */
  --canvas: #16181d; --canvas-2: #22252c; --canvas-3: #3a3f48;
  --ink-on-dark: #cfd3da;     /* 11.8:1 */
  --ink-on-dark-2: #9ba1aa;   /* 6.8:1 — 11~13px 보조 글자 (옛 #7d838d/#8a9099 는 4.7:1) */
  /* 밝은 면 · 선 */
  --surface: var(--card); --surface-2: #f8f9fa; --surface-3: #eff1f4;
  --line-2: #cfd4dc;          /* 컨트롤 테두리 — 카드 가장자리(--line)보다 진하게 */
  --placeholder: var(--ink-3); /* 플레이스홀더 전용 (4.8:1 — 더 연하게 하지 않는다), 본문 글자에 쓰지 않는다 */
  /* 글자 크기 (바닥 11.5px — 그보다 작은 글자는 어디에도 없다) */
  --fs-caption: 11.5px; --lh-tight: 1.3;
  --fs-small: 12.5px;
  --fs-dense: 13.5px;
  --fs-body: 14.5px; --lh-body: 1.55;
  --fs-h3: 16px;
  --fs-h2: 18px;
  --fs-h1: 22px;
  --fs-display: 28px;
  --fs-hero: 56px;            /* 성적표 .sc-hero .n 만 (문서화된 예외) */
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-title: 750; --fw-heavy: 800;
  /* 간격 (4pt) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* 모서리 */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;
  /* 높이(그림자) — 카드는 쉬는 동안 테두리만, 그림자 없음 */
  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 8px 24px rgba(16,24,40,.10);
  --shadow-3: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  /* 포커스 링. ★ color-mix 폴백은 변수에 못 담는다 — 쓰는 자리마다 두 줄(rgba → color-mix)을 쓴다 */
  --ring: 0 0 0 3px rgba(195,0,47,.22);
  --ring-bad: 0 0 0 3px rgba(185,28,28,.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* 안드로이드 크롬 자동 글자 확대 방지 (갤럭시에서 표가 깨지는 원인) */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard", BlinkMacSystemFont, "Segoe UI",
               "Noto Sans KR", "Roboto", sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* 한국어는 낱말 중간에서 줄을 바꾸지 않는다 (유진 2026-10-30 "컴에서 스케줄 시간이나 이런 거 깨지잖아": '부 / 터' 로 쪼개졌다).
   한 칸에 다 안 들어가는 긴 낱말(주소·영문 이름)만 넘치지 않게 그 자리에서 끊는다 */
:root:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, a, .chip, summary { -webkit-tap-highlight-color: rgba(0,0,0,.06); touch-action: manipulation; }

/* ---------- 선형 SVG 아이콘 (스프라이트는 base.html 상단) ---------- */
.ico {
  width: 22px; height: 22px; flex: 0 0 auto; display: block;
  stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.ico.sm { width: 18px; height: 18px; }

.layout { display: flex; min-height: 100vh; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 216px; flex-shrink: 0; background: var(--sidebar); color: #cfd3da;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  height: 100dvh;
}
.brand { padding: 20px 18px 16px; border-bottom: 1px solid #23262d; min-width: 0; }
/* 딜러 표시: 설정 dealer_logo_url 이 있으면 로고(높이 28px), 없거나 못 읽으면 딜러 이름 글자(.txt) */
.brand-dealer { display: block; min-width: 0; margin-bottom: 10px; line-height: 1.25; }
.brand-dealer img { display: block; max-height: 28px; max-width: 100%; width: auto; }
/* 어두운 배경용 딜러 로고: 사이드바 폭 가득 (216px 사이드바면 높이 ~45px), DRIVE 는 그 아래 같은 왼쪽 선에 */
.brand-dealer.wide { margin-bottom: 12px; }
.brand-dealer.wide img { width: 100%; max-height: 52px; height: auto; object-fit: contain; object-position: left center; }
.brand-dealer.txt {
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-logo, a.brand-logo {
  font-size: var(--fs-h1); font-weight: 800; color: #fff; letter-spacing: 2px; display: block;
  text-decoration: none !important; line-height: 1.2;
}
.brand-logo::after { content: "."; color: var(--brand); }
/* 딜러 표시가 앞에 오면 DRIVE 는 제품 마크로 한 단계 내려간다 */
.brand-dealer + .brand-logo { font-size: 18px; letter-spacing: 1.6px; margin-top: 2px; }
.brand-sub {
  display: block; font-size: 12px; color: var(--ink-on-dark-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
/* 섹션 캡션 (Workspace / Account) */
.nav-h {
  padding: 10px 12px 4px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-on-dark-2);
}
.sidebar nav a, .sidebar-foot a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin: 2px 0; border-radius: var(--r-md);
  color: var(--ink-on-dark); font-weight: 500; text-decoration: none;
}
.sidebar nav a:hover, .sidebar-foot a:hover { background: var(--canvas-2); text-decoration: none; color: #fff; }
/* 현재 화면: 브랜드 틴트 바탕 + 왼쪽 바. 회색 바탕(.side-score 휴식 상태)과 한눈에 구분된다 */
.sidebar nav a.active, .sidebar-foot a.active {
  background: rgba(255,255,255,.08); background: color-mix(in srgb, var(--brand) 20%, var(--sidebar)); color: #fff;
  box-shadow: inset 3px 0 0 var(--brand);
}
.sidebar nav a .ico, .sidebar-foot a .ico { opacity: .92; }
.sidebar nav a.active .ico, .sidebar-foot a.active .ico { opacity: 1; color: var(--brand); }
.sidebar .nav-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar a:focus-visible, .sidebar button:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-radius: var(--r-md);
}
/* 배지는 메뉴 오른쪽 끝에 같은 크기로 — 숫자 자릿수가 달라도 세로줄이 맞는다.
   유진 2026-08-07: "데스크탑에서 정렬 제대로 안됨, 대시보드 노티랑 정렬" */
.sidebar nav .badge {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: #3a3f48; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sidebar nav .badge.warn { background: var(--red); }
.sidebar-foot { padding: 10px 8px; border-top: 1px solid #23262d; }
.sidebar-foot a.logout-link:hover { background: var(--brand); color: #fff; }
.sidebar-foot a.logout-link:hover .ico { color: #fff; }
.sidebar-foot .badge {   /* 알림 배지도 위 메뉴 배지와 같은 크기·같은 세로줄 */
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- 내 성적표 칩 (마스터 전용) ----------
   유진 2026-08-08: "스코어보드 탭으로 넣지말고 노티옆이나 나한테만 보이게".
   그래서 내비 항목이 아니라 사용자 영역에 사는 '내 숫자' 칩이다. 메뉴 링크와
   같은 모양이면 다시 탭처럼 읽히므로, 테두리를 두르고 오른쪽에 이번 달 인도
   대수를 숫자로 박았다 (열어 보지 않아도 정보가 되게).
   ★ 폰 쪽 짝은 아래 반응형의 .m-score — 한쪽만 고치지 말 것. */
.side-score {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin: 2px 0 6px; border-radius: var(--r-md);
  border: 1px solid #2c3038; background: #1b1e24;
  color: var(--ink-on-dark); font-weight: 500; text-decoration: none;
  min-height: 44px;
}
.side-score:hover { background: var(--canvas-2); border-color: var(--canvas-3); text-decoration: none; }
.side-score.active {
  background: rgba(255,255,255,.08); background: color-mix(in srgb, var(--brand) 20%, var(--sidebar));
  border-color: transparent; color: #fff;
  box-shadow: inset 3px 0 0 var(--brand);
}
.side-score.active > .ico { color: var(--brand); }
.side-score .ss-t { min-width: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.25; }
.side-score .ss-t i { display: block; font-style: normal; font-size: var(--fs-caption); color: var(--ink-on-dark-2);
                      font-variant-numeric: tabular-nums; }
.side-score.active .ss-t i { color: rgba(255,255,255,.8); }
.side-score .ss-n { flex: 0 0 auto; font-size: var(--fs-h2); font-weight: 800; color: #fff;
                    font-variant-numeric: tabular-nums; }
.side-score .ss-n i { font-style: normal; font-size: var(--fs-caption); font-weight: 600;
                      color: var(--ink-on-dark-2); margin-left: 1px; }
.side-score .ss-n.warn::after {   /* 막혀 있는 거래가 있을 때만 뜨는 점 */
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 5px;
  border-radius: 99px; background: var(--brand); vertical-align: middle;
}
.side-score.active .ss-n i { color: rgba(255,255,255,.8); }
.side-score.active .ss-n.warn::after { background: #fff; }

/* 사용자 칩 + 메시지/알림 아이콘 버튼 */
.user-row { display: flex; align-items: center; gap: 6px; padding: 8px 8px 2px 12px; flex-wrap: nowrap; }
.user-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-on-dark);
             font-size: var(--fs-small); font-weight: 600; min-width: 0; flex: 1 1 auto;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .user-dot { width: 20px; height: 20px; border-radius: 99px; color: #fff; font-size: 11.5px;
                       font-weight: 800; display: inline-flex; align-items: center;
                       justify-content: center; flex: 0 0 auto; }
/* 메시지·알림: 사용자 칩 옆 36px 아이콘 버튼 (누르는 면적은 ::before 로 44px) */
.user-row .user-ico {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0; padding: 0; border-radius: var(--r-md);
  color: var(--ink-on-dark); text-decoration: none;
}
.user-row .user-ico::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.user-row .user-ico .ico { width: 20px; height: 20px; }
.user-row .user-ico:hover { background: var(--canvas-2); color: #fff; }
.user-row .user-ico.active { color: var(--brand); }
.user-row .user-ico .badge {
  position: absolute; top: 2px; right: 2px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--canvas);
  font-variant-numeric: tabular-nums;
}
.lang-form { margin-left: auto; }
/* .lang-btn 은 이제 폰 '더보기' 시트에서만 쓴다 (시트 전용 크기는 아래 반응형에 있음).
   데스크톱 사이드바의 영업↔손님 · 한/EN 토글은 .vtog 로 통일됐다. */
.lang-btn { background: var(--canvas-2); border: none; color: var(--ink-on-dark-2); border-radius: var(--r-sm);
            padding: 4px 9px; font-size: var(--fs-caption); font-weight: 700; cursor: pointer;
            display: inline-block; text-decoration: none !important; }
.lang-btn.on { background: var(--canvas-3); color: #fff; }
.lang-btn:hover { color: #fff; }

/* ---------- 세그먼트 토글 (.vtog) — 영업↔손님 전환 · 언어 ----------
   유진 2026-08-07: "세일즈/게스트뷰 바꾸는 버튼 사이즈 안맞아.. 통일시켜 전문성"
   예전: 사이드바 쪽은 11.5px 짜리 작은 알약 두 개(.lang-btn), 손님 화면
   상단바 쪽은 44px 세그먼트(.vtog) — 같은 버튼인데 화면을 옮길 때마다
   크기가 튀었다. 이제 양쪽이 같은 컴포넌트다.
   ★ guest/_layout.html 의 .vtog 와 값이 같아야 한다. 한쪽만 고치지 말 것.
   기준: 높이 44px · 13.5px/700 · 라운드 8px · 바탕 #22252c · 선택 #3a3f48 */
.vtog { display: inline-flex; border-radius: 8px; overflow: hidden; background: var(--canvas-2); }
.vtog a, .vtog b, .vtog button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 15px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1;
  color: var(--ink-on-dark-2); background: none; border: 0; cursor: pointer;
  white-space: nowrap; text-decoration: none !important;
  -webkit-appearance: none; appearance: none;
}
.vtog b, .vtog .on { background: var(--canvas-3); color: #fff; }
.vtog a:hover, .vtog button:hover { color: #fff; }
/* 폰(≤480px)에서는 좌우 여백 15→10px — guest/_layout.html 의 같은 규칙과 값 동일 (유진 2026-09-23) */
@media (max-width: 480px) { .vtog a, .vtog b, .vtog button { padding: 0 10px; } }
/* 사이드바(216px)에는 토글 두 개가 나란히 안 들어간다 — 같은 폭으로 위아래로 쌓는다 */
.side-tog { display: grid; gap: 6px; padding: 6px 12px 4px; }
.side-tog .vtog { width: 100%; }
.side-tog .vtog > * { flex: 1 1 0; min-width: 0; padding: 0 8px; }

/* ---------- main ---------- */
.main { flex: 1; padding: 26px 30px 60px; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 12px 16px; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-h1); margin: 0; font-weight: var(--fw-title); letter-spacing: -.01em; line-height: 1.25; }
.page-head h1 .h1-sub { font-size: 15px; font-weight: 500; }
.spacer { flex: 1; }
/* 제목 바로 밑 부제: 예전 음수 마진 대신 :has 로 제목 행 간격만 줄인다 */
.page-sub { color: var(--ink-3); font-size: 13px; margin: 0 0 var(--sp-5); }
.page-head:has(+ .page-sub) { margin-bottom: var(--sp-1); }
/* page-head 우측 액션 버튼 그룹: 우측 정렬, gap 8px. 내용 규칙: .btn.primary ≤1, .btn ≤2, 나머지는 '더보기' */
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
/* 상태 필은 22px 제목과 한 줄에 섞지 않고 제목 밑 한 줄로 */
.title-pills { flex-basis: 100%; display: flex; gap: 4px; flex-wrap: wrap; margin-top: -4px; }
/* 보조 도구(표시 토글·수수료·카탈로그·동기화 등): 제목 밑 한 줄 */
.toolbar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 var(--sp-4); }
/* 뒤로: 데스크톱은 조용한 버튼, 폰은 앱바 셰브론이 담당 (아래 반응형에서 숨김) */
.page-back { padding-left: 8px; }
.page-back .ico { width: 18px; height: 18px; }
/* 더보기 메뉴 (표시용 details) */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > .menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 6px;
}
details.menu > .menu-list > a, details.menu > .menu-list > button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px;
  border: 0; background: none; border-radius: 8px; font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: none !important; cursor: pointer; text-align: left; white-space: nowrap;
}
details.menu > .menu-list > a:hover, details.menu > .menu-list > button:hover { background: var(--surface-3); }

/* ---------- cards / grid ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
}
.card h2 { font-size: var(--fs-h3); margin: 0 0 12px; font-weight: 700; line-height: 1.35; }
.card h2 .count, .card-head .count { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.card h3 { font-size: 13px; color: var(--ink-2); margin: 14px 0 10px; font-weight: 700; }
a.card { color: inherit; text-decoration: none !important; display: block; }

/* 카드 내부 헤더 행: 제목 + (수/상태 필) + 우측 액션 한 개(.btn.ghost.small) */
.card-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.card-head h2 { margin: 0; }
.card-head .pill { margin-left: 2px; }
.card-head .act { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.card-head .act .btn.small { white-space: nowrap; }

/* 접히는 카드: <details class="card"><summary>…<svg class="card-caret">…</summary> */
details.card > summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin: -4px 0; padding: 0; cursor: pointer;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { margin: 0; }
details.card[open] > summary { margin-bottom: var(--sp-2); }
.card-caret {
  margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-3);
  transition: transform .15s ease;
}
details[open] > summary .card-caret { transform: rotate(180deg); }

/* 콜아웃(강조 카드): 좌측 색 막대 = 주의 유도 (inset 그림자라 둥근 모서리에서 깨끗하게 잘린다), alert = 틴트 배경 경고 */
.card.callout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card.callout h2 { margin: 0; }
.card.callout-red { border-left: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--brand); }
.card.callout-amber { border-left: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--warn); }
.card.alert-red { border-color: #f0b4b4; background: #fdf0f0; }
.card.alert-red > h2 { color: var(--bad); }
.card.alert-amber { border-color: #f2d5a0; background: #fdf6ea; }
.grid { display: grid; gap: 16px; }
/* 칸 안의 넓은 표/코드가 칸 폭을 밀어내지 않게 (폰에서 카드가 화면 밖으로 나가는 원인) */
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* 스탯 타일: 숫자 위, 라벨 아래, 둘째 줄(보조)은 바닥에 — 템플릿은 둘째 줄을 항상 낸다(비면 nbsp) */
.stat { text-align: left; }
.card.stat { display: flex; flex-direction: column; min-height: 104px; padding: 14px 16px; }
.stat .n { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.3px; line-height: 1.1;
           font-variant-numeric: tabular-nums; }
.stat .l { color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; margin-top: 4px; line-height: 1.4; }
.stat .l + .l { margin-top: auto; padding-top: 6px; font-weight: 500; color: var(--ink-3); }
.stat.red .n { color: var(--brand); }
.stat.ok .n { color: var(--ok); }
.stat.warn .n { color: var(--warn); }

/* ---------- tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: var(--fs-small); color: var(--ink-3); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--card); text-transform: none; line-height: 1.3;
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid #f0f1f4; vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .muted { color: var(--ink-3); }
.tbl a.rowlink { color: var(--ink); font-weight: 600; }
/* 변형: 밀집 / 줄무늬 / 고정 머리줄 (카드가 overflow 컨테이너라 sticky 가 동작한다) */
.tbl.dense td { padding: 7px 10px; }
.tbl.zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
@media (min-width: 841px) {
  .tbl.sticky thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 1px 0 var(--line); border-bottom: 0; }
}
/* 결과 전체에서 비어 있는 칸(열)은 템플릿이 .col-empty 로 표시 → 숨긴다 */
.tbl .col-empty { display: none; }
/* 표 썸네일 (56x42, 딜러 광고 프레임을 잘라내는 확대 크롭) */
.tbl .thumb, .tbl .vthumb { display: block; width: 56px; height: 42px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line); flex: 0 0 auto; }
.tbl .thumb img, .tbl .vthumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.28); object-position: center 52%; }

/* ---------- badges / pills ----------
   유진 2026-08-07 "가독성이나 조잡해보여" — 영업 화면 필도 같은 정리를 받았다.

   기하는 전부 동일: 높이 22px, 안쪽 여백 9px, radius 7px, 11.5px/700.
   높이가 제각각이면 표 한 줄 안에서 필들이 미세하게 어긋나 보인다.
   색은 남기되 채도를 낮췄다 — 영업 화면에서 색은 여전히 '뜻'이 있다
   (red = 지금 손봐야 할 것). 대신 기본값은 무채색(gray)이고,
   한 줄에 색 필이 여러 개 겹치지 않게 톤을 죽였다. */
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2);
  font-size: var(--fs-caption); font-weight: 700; line-height: 1; white-space: nowrap;
  vertical-align: middle; font-variant-numeric: tabular-nums;
  /* 일부러 말줄임(text-overflow)을 걸지 않는다 — 재고 목록의 메모 필
     ('Rental return (신차급, reg. Jan 2025)')이 '…'로 잘려서 정보가 사라졌다.
     긴 필은 그대로 두고, 카드가 가로 스크롤(.card{overflow-x:auto})로 받아준다. */
}
.pill.green { background: #e9f5ee; color: #10794a; }
.pill.red { background: #fbeded; color: var(--bad); }
.pill.amber { background: #fbf1e3; color: var(--warn); }
.pill.gray { background: #eff1f4; color: var(--ink-2); }
.pill.blue { background: #eaeffb; color: var(--blue); }
.pill.dark { background: var(--ink); color: #fff; }
/* 나란히 붙는 필 사이 최소 간격 — 템플릿의 공백 유무와 무관하게 항상 같은 리듬 */
.pill + .pill { margin-left: 4px; }

/* ---------- 버튼 ----------
   유진 2026-08-09: "모든 화면 버튼들 가독성, 미니멀, 폰 / 데스크탑 최적화"

   ★ 앱 전체에서 버튼은 이 파일에서만 정의한다. 페이지 <style> 안에 버튼 모양을
     새로 만들지 말 것 — 같은 동작(복사·올리기·저장·삭제)이 화면마다 다르게
     보이던 원인이 전부 그 일회용 규칙들이었다.

   톤은 넷뿐이고, 시끄러운 건 딱 하나(.primary)다:
     .btn.primary  그 화면이 존재하는 이유인 동작 하나. 빨강 채움.
                   ※ 표/목록의 '행마다' 반복되는 동작에는 절대 쓰지 않는다.
     .btn          그 밖의 실제 동작(폼 제출, 행 동작). 흰 바탕 + 얇은 테두리.
     .btn.ghost    가장 조용한 동작(복사·열기·되돌리기·뒤로). 테두리 없음.
     .btn.danger   되돌릴 수 없는 동작. 빨간 글자. 주 동작 줄에서 빼서 둔다.

   크기는 둘뿐이다:
     기본   40px · 13.5px   (데스크톱 표준)
     .small 36px · 13px     (표 안 등 밀집 구간 — 12.5px 이하로 내리지 말 것)
     폰(<=840px)에서는 둘 다 44px · 14px 로 커진다 (아래 반응형). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 8px 14px; min-height: 40px;
  font-family: inherit; font-size: var(--fs-dense); font-weight: 600; line-height: 1.25;
  cursor: pointer; text-decoration: none !important;
  -webkit-appearance: none; appearance: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn .ico { width: 18px; height: 18px; }
.btn:hover { background: var(--bg); border-color: #c2c8d0; }
.btn:active { background: var(--surface-3); box-shadow: none; }
.btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 -1px 0 rgba(0,0,0,.10);
}
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--ink); }
.btn.danger { background: #fff; color: var(--bad); border-color: #f0cfcf; }
.btn.danger:hover { background: #fdf3f3; border-color: #e0a9a9; }
.btn.small { padding: 5px 11px; min-height: 36px; font-size: 13px; border-radius: var(--r-md); }
/* 아이콘만 있는 정사각 버튼 */
.btn.icon { width: 40px; padding: 0; }
.btn.small.icon { width: 36px; }
/* 폭을 꽉 채우는 버튼 (폼 하단 CTA·폰 스택). 페이지마다 style="width:100%" 를
   쓰던 것을 이 클래스 하나로 모았다. */
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* 제출 중 */
form[aria-busy="true"] .btn.primary, .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(195, 0, 47, .22);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
@media (forced-colors: active) {
  .btn { border: 1px solid; }
  .btn:focus-visible { outline: 2px solid; outline-offset: 1px; }
}

/* 버튼 그룹 행. .btn-row 와 .actions 는 같은 것 (.btn-row 가 예전 이름).
   폰에서는 좁은 폭에 억지로 우겨넣지 않고 전체폭으로 세로로 쌓는다 (아래 반응형).
   표 행 안처럼 항상 가로로 있어야 하는 줄은 .tight 를 붙인다. */
.btn-row, .actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px;
}
.actions.mt0, .btn-row.mt0 { margin-top: 0; }
/* 폼 맨 아래 제출 줄. 주 동작이 왼쪽, 취소는 그 옆에서 조용히.
   폰에서는 위 반응형 규칙이 전체폭 세로 스택으로 바꾼다. */
.form-cta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: var(--sp-4); }

form.inline { display: inline; }
label.fld, div.fld { display: block; margin-bottom: var(--sp-4); }   /* div 칸(버튼·도움말)도 같은 간격 (QA 2026-10-30) */
/* 라벨은 도움말보다 한 단계 진하게 (12.5/650/ink-2) — 라벨 > 도움말 서열 */
label.fld .lbl, .lbl {
  display: block; font-size: var(--fs-small); color: var(--ink-2); font-weight: 650; margin-bottom: 6px;
  line-height: 1.35;
}
/* ★ type 없는 input(로그인 아이디, 180 사용자명)과 검색칸도 같은 컨트롤 — 화면별 CSS 없이 표준 모양 */
input:not([type]), input[type=search],
input[type=text], input[type=date], input[type=datetime-local], input[type=number],
input[type=email], input[type=tel], input[type=url], input[type=password], input[type=time],
select, textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
  font: inherit; background: #fff; color: var(--ink); min-height: 40px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { display: none; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input:not([type]):hover, input[type=search]:hover, input[type=text]:hover, input[type=date]:hover,
input[type=datetime-local]:hover, input[type=number]:hover, input[type=email]:hover, input[type=tel]:hover,
input[type=url]:hover, input[type=password]:hover, input[type=time]:hover, textarea:hover { border-color: #c2c8d0; }
/* 포커스 링: 테두리 밖으로 3px 소프트 링 (예전 outline 2px 는 각져서 필드가 커 보였다).
   :focus-visible 이 없는 구형 브라우저는 :focus 로 폴백. */
/* 포커스는 브랜드색이 아니라 중립 파랑 (토요타 빨강 #EB0A1E 이면 커서가 든 칸이 오류처럼 보였다, QA 2026-10-30) */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}
/* 고대비 모드에서는 box-shadow가 사라지므로 실선 outline 을 되살린다 */
@media (forced-colors: active) {
  input:focus, select:focus, textarea:focus { outline: 2px solid; outline-offset: 1px; }
}
textarea { resize: vertical; min-height: 70px; }
/* 잘못된 값: 필드 + 메시지 (.fld-err 는 14px alert-circle 아이콘 + 12.5/600 빨강) */
.fld.is-invalid :is(input, select, textarea) { border-color: var(--bad); box-shadow: var(--ring-bad); }
.fld-err {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 6px;
  font-size: var(--fs-small); font-weight: 600; color: var(--bad); line-height: 1.4;
}
.fld-err[hidden] { display: none; }
.fld-err .ico { width: 14px; height: 14px; margin-top: 2px; }
/* 도움말: 컨트롤 밑 6px, 12.5 ink-3 (.hint 와 같다) */
.hint, .fld-help { display: block; font-size: var(--fs-small); color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
/* 비활성 · 읽기 전용 */
input:disabled, textarea:disabled, input[readonly], textarea[readonly] {
  background: var(--bg); color: var(--ink-2); box-shadow: none;
}
/* 브라우저 자동완성 노란 배경 제거 */
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink); transition: background-color 9999s;
}
/* 체크박스 · 라디오 줄 (44px 터치) */
label.chk { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.chk input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--brand); }
/* 비밀번호 보기 버튼 */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: none; border-radius: 8px;
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer; padding: 0;
}
.pw-eye .ico { width: 20px; height: 20px; }
.pw-eye:hover { color: var(--ink); background: var(--surface-3); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; box-shadow: none; }
/* 표 안 등 컴팩트 컨트롤 */
/* 표 안 컴팩트 컨트롤 — 옆에 서는 .btn.small(36px) 과 높이·글자를 맞춘다.
   28px/12.5px 이던 시절에는 한 줄 안에서 입력칸만 낮아 보여 줄이 흔들렸다. */
input.sm, select.sm { min-height: 36px; padding: 6px 10px; font-size: 13px; width: auto; }

/* ---------- 드롭다운 (select) ----------
   유진 2026-08-07: "More 누르고 드랍다운 아직도 안 매끄럽"

   OS 기본 모양을 끄고 앱 전체에서 같은 높이/테두리/셰브론을 쓴다.
   셰브론은 인라인 SVG (외부 파일/CDN 없음).
   한글 라벨이 절대 잘리지 않게: 우측 여백은 셰브론 폭(12) + 좌우 여백(11+11)
   보다 큰 36px, 그리고 max-width:100% 로 부모 밖으로 나가지 않게 한다. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 36px; line-height: 1.35; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 6 6.2l4.6-4.6' fill='none' stroke='%236d737c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
select::-ms-expand { display: none; }
select:hover { border-color: #c9ced6; background-color: #fcfcfd; }
select:active { background-color: #f7f8fa; }
/* 열려 있는 동안(포커스)에는 셰브론도 잉크색으로 — 어디를 누른 건지 분명하게 */
select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 1.6 6 6.2l4.6-4.6' fill='none' stroke='%231a1d21' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select:disabled { background-color: #f4f5f7; color: var(--ink-3); cursor: default; opacity: 1; }
select option { color: var(--ink); background: #fff; }
/* 표 안 컴팩트 드롭다운 */
select.sm { padding-right: 28px; background-position: right 9px center; background-size: 10px 7px; }

/* ---------- 파일 선택 (네이티브 "파일 선택 / 선택된 파일 없음" 대체) ----------
   실제 input[type=file]은 라벨 위에 투명하게 깔려 있어 클릭·키보드 포커스가 그대로 살아있다. */
.filebtn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 6px 12px; max-width: 100%;
  border: 1px dashed var(--line-2); border-radius: var(--r-md); background: #fff; cursor: pointer;
}
.filebtn:hover { border-color: var(--ink-3); background: var(--surface-2); }
.filebtn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); box-shadow: none; }
.filebtn input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.filebtn .fb-face { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.filebtn .fb-name {
  font-size: 12.5px; color: var(--ink-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filebtn.on { border-style: solid; border-color: var(--ink); }
.filebtn.on .fb-name { color: var(--ink-2); font-weight: 600; }
/* 한 줄 안에서 남는 폭을 먹는 파일 버튼/입력칸 (동기화 화면 등) */
.filebtn.grow, .actions > input.grow { flex: 1 1 220px; min-width: 220px; }

/* ---------- 번호 단계 카드 (1-2-3 작업 순서) ---------- */
.step-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.stepnum {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-size: 14px; font-weight: 800; line-height: 26px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.step-head .step-t { min-width: 0; flex: 1 1 auto; }
.step-head h2 { margin: 0 0 2px; }
.step-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.step-head .pill { flex: 0 0 auto; }
/* 아직 할 수 없는 단계: 번호를 죽이고 무엇을 먼저 해야 하는지 안내만 */
.card.step.todo .stepnum { background: #c9ccd2; }
.step-hint {
  display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
  background: #f8f9fa; border: 1px dashed var(--line); border-radius: 10px; padding: 11px 13px;
}
.step-sub { margin: 16px 0 8px; }
.step-sub h3 { margin: 0 0 3px; }
.step-sub .note { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.filters input[type=text] { width: 220px; }
.filters input[type=search] { width: 260px; }
.filters select { width: auto; }

/* 필터 탭 칩 — 버튼과 같은 글자 크기(13px)로. 12.5px 였을 때 한 줄에 칩이
   여러 개 놓이면 읽히기 전에 '색 덩어리'로 보였다.
   문법: .chip.active = 필터 선택(잉크 채움) · .chip.on = 켜짐/꺼짐 토글(잉크 테두리 + 체크) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips.tabs { margin: 16px 0 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; text-decoration: none !important; font-family: inherit; line-height: 1.25;
  -webkit-appearance: none; appearance: none;
}
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:hover { border-color: var(--ink-3); background: var(--surface-2); }
.chip.active:hover { background: var(--ink); }
.chip.on { border-color: var(--ink); color: var(--ink); }
.chip.on::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 6.6 11.8 12.8 4.6' fill='none' stroke='%231a1d21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
/* 키보드 포커스는 실선 (연한 링은 흰 바탕에서 1.5:1 밖에 안 나와 안 보였다) */
.chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; }

/* ---------- 구분 탭 (.seg) — 밝은 세그먼트, 서로 배타적 (중고/신차/전체 등) ----------
   inventory/list.html 에서 그대로 옮겨 왔다. 마케팅(.mseg)·고객·화면 전환기(.drive-view-switch)도 같은 값. */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  background: #e8eaee; border-radius: 10px; padding: 3px; margin: 2px 0 14px;
  max-width: 100%;
}
.seg a, .seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  padding: 6px 14px; border-radius: 8px; white-space: nowrap; border: 0; background: none;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.2;
  text-decoration: none !important; cursor: pointer;
}
.seg a.active, .seg button.active, .seg .on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.seg .seg-n {
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-2); /* ink-3 는 회색 트랙 위에서 3.97:1 */
  font-variant-numeric: tabular-nums;
}
.seg a.active .seg-n, .seg .on .seg-n { color: var(--brand); }
.seg .seg-full { display: inline; } .seg .seg-short { display: none; }
/* 마우스 상태 — 폰 작업 중에 빠졌던 것 (터치에서는 :hover 가 눌린 채로 남는다) */
@media (hover: hover) and (pointer: fine) {
  .seg a, .seg button { transition: background-color .12s ease, color .12s ease; }
  .seg a:not(.active):hover, .seg button:not(.active):hover { background: rgba(255,255,255,.6); color: var(--ink); }
}
@media (max-width: 840px) {
  .seg a, .seg button { min-height: 44px; }
  .seg .seg-full { display: none; } .seg .seg-short { display: inline; }
}

/* ---------- 세그먼트 컨트롤 (숫자/모드 고르기) ----------
   예전에는 마케팅 보드와 스튜디오가 .seg-count/.seg-btn 을 각자 똑같이
   복사해 두고 있었다. 한 곳에서만 정의한다. */
.seg-count {
  display: inline-flex; max-width: 100%;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.seg-btn {
  background: #fff; color: var(--ink);
  border: none; border-left: 1px solid var(--line);
  padding: 8px 18px; min-height: 40px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.25;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.seg-btn:first-child { border-left: none; }
.seg-btn.on { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .seg-btn:not(.on):hover { background: #f4f5f7; }
}

/* ---------- 사진 타일 위 액션 줄 (마케팅 보드 공용) ---------- */
.ph-actions { display: flex; gap: 4px; margin-top: 4px; justify-content: flex-end; flex-wrap: wrap; }
.ph-actions .btn { min-width: 0; padding-left: 9px; padding-right: 9px; }

/* ---------- misc ---------- */
.flashes { margin-bottom: var(--sp-4); }
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-md); margin-bottom: 8px; font-weight: 600;
  border: 1px solid transparent; line-height: 1.45;
}
.flash::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  background: currentColor;
  -webkit-mask: var(--flash-ico) center / 18px no-repeat; mask: var(--flash-ico) center / 18px no-repeat;
}
.flash { --flash-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4.5M12 16h.01'/%3E%3C/svg%3E");
}
.flash.success { background: #e7f6ee; color: var(--ok); border-color: #cdebd9;
  --flash-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.8-5'/%3E%3C/svg%3E"); }
.flash.error { background: #fdecec; color: var(--bad); border-color: #f5cfcf;
  --flash-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13M12 16.5h.01'/%3E%3C/svg%3E"); }
.flash.info { background: #e8eefc; color: var(--blue); border-color: #cfdbf7; }
.flash.warning { background: #fdf6ea; color: var(--warn); border-color: #f2dfbd; }

/* 빈 상태: 아이콘(선택) + 한 줄 설명 + 조용한 동작 하나 */
.empty {
  display: grid; justify-items: center; gap: 8px;
  text-align: center; color: var(--ink-3); padding: 36px 20px; font-size: var(--fs-body); line-height: 1.5;
}
.empty .ico { width: 28px; height: 28px; color: #b4b9c2; stroke-width: 1.5; }
.empty b, .empty strong { color: var(--ink-2); font-weight: 600; }
.empty .btn { margin-top: 4px; }
.empty.sm { padding: 24px 16px; gap: 6px; font-size: var(--fs-dense); }
.empty.sm .ico { width: 22px; height: 22px; }

.kv { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 6px 12px; font-size: var(--fs-dense); line-height: 1.45; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* 상태 블록 (연결 화면): 점 + 상태 제목 + 설명 */
.status-block { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.status-block .dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border-radius: 99px; background: var(--ink-3); }
.status-block.ok .dot { background: var(--ok); }
.status-block.warn .dot { background: var(--warn); }
.status-block.bad .dot { background: var(--bad); }
.status-block.busy .dot { background: var(--blue); }
.status-block .st-t { min-width: 0; flex: 1 1 auto; }
.status-block .st-t b { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.status-block .st-t span { display: block; color: var(--ink-2); font-size: var(--fs-dense); margin-top: 2px; }

pre.caption {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; white-space: pre-wrap; font-family: inherit; font-size: 13.5px;
  max-height: 420px; overflow-y: auto;
}
.copy-ok { color: var(--ok); font-weight: 700; font-size: 12px; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--line); position: relative; margin-left: 6px; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 14px;
  width: 10px; height: 10px; border-radius: 99px; background: var(--ink-3);
}
.timeline li.red::before { background: var(--red); }
.timeline .t { font-size: var(--fs-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-grid img { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.photo-grid .ph { position: relative; }
.photo-grid .tag {
  position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff;
  font-size: var(--fs-caption); padding: 2px 7px; border-radius: 99px; font-weight: 700;
}

.veh-title { font-weight: 700; }
.veh-sub { font-size: var(--fs-small); color: var(--ink-3); }

/* ---------- 차량 행 (.vrow) — 재고 목록 폰 리스트 · 마케팅 보드 공용 ----------
   inventory/list.html 에서 옮겨 왔다. 행 전체가 탭 타깃, 제목은 항상 한 줄(트림은 말줄임 —
   유진 2026-08-08 "인벤토리에서 트림레벨때문에 한줄밀리는 현상없애"). */
.vrow {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  min-height: 68px; color: var(--ink); text-decoration: none !important;
  border-top: 1px solid #f0f1f4;
}
.vrow:active { background: var(--surface-2); }
.vrow-thumb {
  width: 72px; height: 54px; border-radius: 8px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line); flex: 0 0 auto;
  display: block; margin-top: 2px;
}
.vrow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.28); object-position: center 52%; }
/* 공홈 대표 사진의 딜러 띠(위 배너 17.4% · 아래 주소·대표번호 11.8%, 4:3 원본) — 작은 썸네일은 둘 다 가린다.
   보이는 세로 = 1/1.42 = 70.5%, 시작점 = 0.597×(1−0.705) = 17.6% → 끝 88.1% (유진 2026-10-17 "사진 하단 딜러쉽 번호") */
.vrow-thumb img.hf, .vthumb img.hf, .head-thumb img.hf, img.tthumb.hf { transform: scale(1.42); transform-origin: 50% 59.7%; object-position: 50% 50%; }
.vrow-thumb .ph, .vthumb .ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 17px; color: var(--ink-3); line-height: 1;
}
.vrow-main { flex: 1 1 auto; min-width: 0; display: block; }
.vrow-title {
  display: flex; align-items: baseline; gap: 5px;
  font-weight: 700; font-size: var(--fs-body); line-height: 1.3;
  white-space: nowrap; overflow: hidden;
}
/* 이름은 다 보이고 트림이 먼저 줄어든다 ('2022 Hyundai Tucs… Ulti…' 방지, 2026-10-17 QA) — ads/board.html .qnm .nm 과 같이 */
.vrow-title .nm { flex: 0 0 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vrow-title .trim {
  flex: 0 1 auto; min-width: 0;
  font-weight: 500; color: var(--ink-2); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis;
}
/* 트림이 0 으로 사라지지 않게: 3.5em 도 안 남으면 이름 아래 줄로 (QA 2차: 폰에서 'Ultimate'·'XLE' 가 0px 였다) */
.vrow-title { flex-wrap: wrap; row-gap: 0; }
.vrow-title .trim { flex: 1 1 3.5em; max-width: max-content; }
.vrow-sub {
  display: block; font-size: var(--fs-small); color: var(--ink-3); margin-top: 2px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vrow-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vrow-pills .pill { font-size: var(--fs-caption); height: 22px; padding: 0 8px; margin: 0;
                    max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vrow-act { display: block; color: var(--bad); font-size: var(--fs-small); font-weight: 600; margin-top: 4px; }
.vrow-right {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; padding-top: 2px;
}
.vrow-price { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.vrow-right .pill { font-variant-numeric: tabular-nums; }
/* 도착 전 신차 필("Incoming · ETA 10/28 ~ 11/12")은 길어서 한 줄이면 폰에서 차 이름을 눌러 버린다 — 줄을 바꿔 쌓는다 */
.vrow-right .lot-pill { white-space: normal; height: auto; min-height: 22px; max-width: 104px; text-align: right; line-height: 1.25; padding: 3px 8px; }
/* ---------- 재고 줄 가독성 (2026-10-28, 유진 "인벤토리에서 UI랑 가독성 살리고") ----------
   서열: 제목(연식 모델 트림) > 가격 > 스탁·km > 칩. 칩은 두 단: 급한 것(문제·딜·키시트·매니저·가격 경고)은 색 칩 그대로,
   참고(인증·1오너·비교가·정비·등급·종류·악세서리·트레이드인·사진·광고)는 .pills-sec 안에서 작고 옅은 테두리 칩.
   숫자는 어디서든 같은 폭(tabular). 폰 줄은 72px 이상 (탭 타깃). */
.pills-sec { display: contents; }
.veh-tags .pills-sec .pill, .vrow-pills .pills-sec .pill {
  background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); font-weight: 600;
}
.veh-tags .pills-sec .pill.amber, .vrow-pills .pills-sec .pill.amber { color: var(--warn); border-color: #efd6ad; }
.vrow-pills .pills-sec .pill { height: 20px; font-size: 11px; padding: 0 7px; }
.veh-tags .pills-sec .pill { font-size: 11.5px; }
.vrow-pills .pill.mgr-issue-pill, .veh-tags .pill.mgr-issue-pill { font-weight: 800; }
.vrow-sub .stock-no { color: var(--ink-2); letter-spacing: .25px; }
.vrow-right { min-width: 84px; }
.vrow-right .pill { margin: 0; }
.vrow-pills { row-gap: 5px; }
.tbl td.veh-cell .veh-title { font-size: 14.5px; letter-spacing: -.1px; }
.tbl td.veh-cell > .muted { font-size: 13px; }
.tbl td.veh-cell .veh-sub { margin-top: 1px; }
.tbl td.num { font-variant-numeric: tabular-nums; }
@media (max-width: 840px) {
  .vrow { min-height: 72px; padding: 12px 14px; }
  .vrow-title .nm { font-weight: 750; }
  .vrow-sub { margin-top: 3px; }
  .vrow-pills { margin-top: 7px; }
  .vrow-price { font-size: 16px; }
}
@media (max-width: 840px) {
  .vrow-title { font-size: 15px; }
  /* 폰: 제목은 잘리지 않고 줄을 바꾼다 — 'TRD…' '2027 Prius Plug-In Hy…' 처럼 트림·이름이 말줄임으로 사라졌다 (QA 2026-10-20 D2).
     긴 트림은 이름 아래 줄로 내려가고, 둘째 줄(스탁·km·색)은 두 줄까지 — 재고 목록·추천 화면 같은 규칙 */
  .vrow-title { white-space: normal; overflow: visible; }
  .vrow-title .nm { overflow: visible; text-overflow: clip; white-space: normal; }
  .vrow-title .trim { flex: 1 1 max-content; overflow: visible; text-overflow: clip; white-space: normal; }
  .vrow-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
}

/* ---------- 데스크톱 전용 보정 (>=841px) ----------
   폰 셸(상단 앱바·하단 탭바·더보기 시트)은 <=840px 에서만 살아 있다.
   여기 있는 규칙은 전부 841px 이상에서만 걸리므로 폰 렌더링은 그대로다. */
@media (min-width: 841px) {
  /* 좁은 칸(.grid.cols-2 등)에 들어간 표가 카드 밖으로 새서 페이지 전체를
     가로로 밀던 문제. 폰은 예전부터 카드 안에서만 스크롤했는데(아래 840px 블록)
     데스크톱에는 그 보호막이 없었다 → 영어 화면 1280px 대시보드에서 '우선 할 일'
     표가 카드를 15px 넘겨 페이지에 가로 스크롤바가 생겼다. 이제 양쪽이 같다. */
  .card { overflow-x: auto; overscroll-behavior-x: contain; }
}

/* 마우스가 있는 기기에서만 — 터치에서는 :hover 가 탭 후에 눌린 채로 남는다.
   폰 작업이 이어지면서 데스크톱에서 '아무 반응 없는' 요소들이 생겼다. */
@media (hover: hover) and (pointer: fine) {
  a.card { transition: border-color .12s ease, box-shadow .12s ease; }
  a.card:hover {
    border-color: var(--ink-3); box-shadow: var(--shadow-2);
    text-decoration: none;
  }
  a.pill:hover { box-shadow: 0 0 0 1.5px rgba(26, 29, 33, .2); }
  label.att-item:hover { border-color: var(--ink-3); }
  .photo-grid a:hover img { border-color: var(--ink-3); }
  .timeline li a:hover { text-decoration: underline; }
}

.right { text-align: right; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt10 { margin-top: 10px; }
.mt16 { margin-top: 16px; }
.mb12 { margin-bottom: 12px; }
.grid.top { align-items: start; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); }
.text-2 { color: var(--ink-2); }
.strong { font-weight: 700; color: var(--ink); }
.caption { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.3; }
/* 숫자 열 맞춤 — 가격·대수·날짜는 어디서든 같은 폭의 숫자로 */
.tnum, .num, .stat .n, .kv dd, .count, .badge, .seg-n, .price-big, .price-sm, .vrow-price, .tm-stat b,
.inv-stats b, .kpi .v { font-variant-numeric: tabular-nums; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }
/* 가격·지표 그리드 (차량 상세 등): 라벨 12.5 ink-3, 값 20 tabular, 대표값은 28 */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: var(--sp-4); }
.kpi { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.kpi .l { display: block; font-size: var(--fs-small); color: var(--ink-3); font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; color: var(--ink); }
.kpi.lead .v { font-size: var(--fs-display); }
.kpi.lead { background: var(--card); }
.kpi .v.muted { color: var(--ink-3); font-weight: 600; }
@media (max-width: 840px) { .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .kpi.lead .v { font-size: 24px; } .kpi .l { white-space: normal; } }

/* ---------- 담당자 아바타 도트 (팀 공용) ---------- */
.owner-dot {
  width: 18px; height: 18px; border-radius: 99px; color: #fff; font-size: 10px;
  font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-right: 4px;
}
.owner-dot.lg { width: 26px; height: 26px; font-size: 12px; }

/* ---------- 첨부 파일 그리드 (메시지·설정 공용) ---------- */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.att-item {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
label.att-item { cursor: pointer; }
.att-item.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.att-item img {
  width: 100%; height: 88px; object-fit: contain; background: #f4f5f7;
  border-radius: 6px; display: block;
}
.att-doc {
  width: 100%; height: 88px; background: #f4f5f7; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--ink-3);
}
.att-chk { display: flex; align-items: center; gap: 5px; width: 100%; font-size: 12.5px; }
.att-chk input { width: auto; flex: none; min-height: 0; }
.att-nm {
  font-size: 12.5px; font-weight: 600; width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- mobile app shell (폰: 상단 앱바 + 하단 탭바 + 더보기 시트) ----------
   대상: 갤럭시 S25 등 안드로이드 크롬(360~412px, 하단 제스처 바) + 아이폰(노치/홈 인디케이터).
   안드로이드는 env(safe-area-inset-*)가 0으로 오므로 max()로 최소값을 항상 확보한다.
   데스크톱(>840px)은 사이드바 그대로 — 모바일 셸 요소는 기본 display:none. */
.m-appbar, .m-tabbar, .m-scrim, .m-sheet { display: none; }

@media (max-width: 840px) {
  :root {
    /* 제스처 네비바/홈 인디케이터 여유: 아이폰=실제 inset, 안드로이드=최소 10px */
    --tab-safe: max(env(safe-area-inset-bottom, 0px), 10px);
    --tabbar-h: 56px;                 /* 탭 아이콘+라벨 영역 (safe 영역 제외) */
    --side-l: max(15px, env(safe-area-inset-left, 0px));
    --side-r: max(15px, env(safe-area-inset-right, 0px));
  }
  .layout { display: block; }
  .sidebar { display: none; }        /* 폰에서는 사이드바 완전 숨김 */

  /* ── 상단 앱바: 워드마크 + 현재 화면 제목 + 알림 벨 + 사용자 이니셜 ── */
  .m-appbar {
    position: sticky; top: 0; z-index: 55;
    display: flex; align-items: center; gap: 6px;
    min-height: 52px;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--side-r) 6px var(--side-l);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-1);
  }
  /* 뒤로: 앱바 맨 왼쪽 44x44 (base.html 의 brand_color 블록에서 옮겨 옴 — 색이 없는 딜러도 같은 버튼) */
  .m-back {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -4px 0 -4px -10px; border-radius: 12px;
    color: var(--ink-2); text-decoration: none !important;
  }
  .m-back .ico { width: 24px; height: 24px; stroke-width: 2; }
  .m-back:active { background: var(--surface-3); }
  .m-brand { flex: 0 0 auto; font-size: 15px; font-weight: 800; letter-spacing: 1.6px; color: var(--ink);
             text-decoration: none !important; display: inline-flex; align-items: center; min-height: 44px; }  /* 홈 링크 탭 타깃 (QA 2026-10-29) */
  .m-brand::after { content: "."; color: var(--brand); }
  /* 워드마크는 대시보드에서만 — 다른 화면은 뒤로 + 제목이 자리를 다 쓴다 */
  body:not([data-nav="dashboard"]) .m-brand { display: none; }
  .m-brand .brand-dealer { display: inline-flex; align-items: center; margin: 0; }
  .m-brand .brand-dealer img { max-height: 22px; width: auto; display: block; }
  .m-brand .brand-dealer.txt { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); max-width: 46vw; }
  .m-brand.has-dealer::after { content: none; }
  .m-title {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    /* 긴 제목은 15px 두 줄까지 — 한 줄 말줄임이 'V70112 · 2027 Toy…' 로 차 이름을 지웠다 (QA 2026-10-20 D5). 앱바 52px 안에 든다 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere;
    font-size: 15px; font-weight: 700; line-height: 1.25;
    border-left: 0; padding-left: 0;
  }
  body[data-nav="dashboard"] .m-brand + .m-title { border-left: 1px solid var(--line); padding-left: 10px; margin-left: 4px; }
  /* 내 성적표 칩 — 벨 왼쪽. 벨(아이콘만)과 헷갈리지 않게 숫자를 단 알약이다.
     ★ 데스크톱 쪽 짝은 위의 .side-score. */
  .m-score {
    position: relative;
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    min-height: 34px; padding: 0 9px 0 7px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff;
    color: var(--ink-2); font-weight: 700; line-height: 1;
  }
  /* 보이는 알약은 34px 그대로 두고 누르는 면적만 44px 로 넓힌다 (옆의 벨과 같은
     크기). 알약을 진짜 44px 로 키우면 앱바에서 제목보다 무거워 보인다. */
  .m-score::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 100%; min-width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  .m-score:hover { text-decoration: none; }
  .m-score .ico { width: 18px; height: 18px; }
  .m-score .n { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
  .m-score.warn { border-color: var(--brand-track); }
  .m-score.warn .n { color: var(--brand); }
  .m-score.active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .m-score.active .n { color: #fff; }

  /* 메시지 칩 — 벨과 같은 크기·같은 언어. 유진 2026-08-08: "메세지도 상단
     노티 옆쪽에". 벨은 받는 것, 메시지는 보내는 것이라 나란히 둔다. 숫자 배지는
     없다 (읽지 않은 개수 개념이 없는 화면이라 붙이면 거짓 신호가 된다). */
  .m-msg {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -4px 0; border-radius: 12px; color: var(--ink-2);
  }
  .m-msg:hover { text-decoration: none; }
  .m-msg.active { color: var(--brand); }

  .m-bell {
    position: relative; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -4px -8px -4px 0;
    border-radius: 12px; color: var(--ink-2);
  }
  .m-bell:hover { text-decoration: none; }
  .m-bell.active { color: var(--brand); }
  .m-bell .badge {
    position: absolute; top: 4px; right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--brand); color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums;
  }
  /* 사용자 이니셜: 44x44 링크(설정으로), 안의 원은 30px */
  .m-avatar {
    flex: 0 0 auto; width: 44px; height: 44px; margin: -4px -8px -4px 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important;
  }
  .m-avatar i {
    width: 30px; height: 30px; border-radius: 99px; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 800; background: var(--blue);
  }
  .m-avatar:active { background: var(--surface-3); }

  /* ── 하단 탭바: M3 bottom nav — 5슬롯, 48px+ 터치, 아이콘 22px + 라벨 10.5px ── */
  .m-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding: 0 env(safe-area-inset-right, 0px) var(--tab-safe) env(safe-area-inset-left, 0px);
  }
  .m-tab {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: var(--tabbar-h); padding: 6px 2px 5px; margin: 0;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: var(--fs-caption); line-height: 1.2; font-weight: 600;
    color: var(--ink-3); text-align: center; text-decoration: none !important;
  }
  .m-tab .ico { width: 22px; height: 22px; position: relative; }
  .m-tab .nav-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-tab.active { color: var(--ink); font-weight: 700; }
  /* 선택 표시: 아이콘 뒤 브랜드 틴트 알약 + 브랜드색 아이콘 */
  .m-tab::before {
    content: ""; position: absolute; left: 50%; top: 7px; width: 44px; height: 28px;
    transform: translateX(-50%); border-radius: 999px; background: transparent;
  }
  .m-tab.active::before { background: var(--brand-tint); }
  .m-tab.active .ico { color: var(--brand); stroke-width: 2.1; }
  .m-tab .badge {
    position: absolute; top: 3px; left: 50%; margin-left: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--canvas-3); color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums;
  }
  .m-tab .badge.warn { background: var(--brand); }

  /* ── 더보기 시트: 나머지 메뉴 전부 — HIG 56px 행 + 스크림 ──
     유진 2026-08-07: "More 누르고 드랍다운 아직도 안 매끄럽"
     고친 것: iOS 시트 이징(감속 곡선), 스크림 블러, 잡이바 드래그로 닫기,
     좌우 세이프에어리어, 배경 스크롤 완전 잠금(JS에서 position:fixed). */
  .m-scrim {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(12, 14, 18, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .26s cubic-bezier(.32, .72, 0, 1);
  }
  body.m-sheet-open .m-scrim { opacity: 1; pointer-events: auto; }
  .m-sheet {
    display: block; position: fixed; z-index: 71;
    left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); bottom: 0;
    background: var(--card); border-radius: 20px 20px 0 0;
    box-shadow: 0 -1px 0 rgba(16, 20, 30, .06), 0 -14px 40px rgba(0, 0, 0, .22);
    padding: 0 10px calc(var(--tab-safe) + 10px);
    max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(101%); visibility: hidden; will-change: transform;
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s;
  }
  body.m-sheet-open .m-sheet {
    transform: none; visibility: visible;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
  }
  /* 손가락으로 끌고 있는 동안은 트랜지션 없이 손가락을 그대로 따라간다 */
  .m-sheet.m-drag { transition: none; }
  body.m-sheet-open { overflow: hidden; }
  /* 잡이바: 보이는 선은 얇게, 누르는 영역은 넉넉히 (아래로 밀면 닫힌다) */
  .m-sheet-grab {
    position: sticky; top: 0; z-index: 1; background: var(--card);
    padding: 10px 0 8px; cursor: grab; touch-action: none;
    border-radius: 20px 20px 0 0;
  }
  .m-sheet-grab::before {
    content: ""; display: block; width: 40px; height: 4px;
    border-radius: 99px; background: #d5d9e0; margin: 0 auto;
  }
  .m-sheet-sep { border: none; border-top: 1px solid var(--line); margin: 6px; }
  /* 시트 머리: 딜러 로고/이름 · '더보기' · 닫기 */
  .m-sheet-top { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 6px 10px; }
  .m-sheet-top .brand-dealer { display: inline-flex; align-items: center; margin: 0; min-width: 0; }
  .m-sheet-top .brand-dealer img { max-height: 24px; width: auto; display: block; }
  .m-sheet-top .brand-dealer.txt { color: var(--ink); font-size: 14px; font-weight: 700; max-width: 50vw; }
  .m-sheet-top b { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); margin-left: auto; }
  .m-sheet-top .brand-dealer + b { margin-left: 0; }
  .m-sheet-close {
    margin-left: auto; flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: none;
    border-radius: 12px; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
  }
  .m-sheet-close:active { background: var(--surface-3); }
  .m-sheet-h {
    padding: 10px 10px 2px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .m-row {
    display: flex; align-items: center; gap: 14px;
    min-height: 56px; padding: 6px 10px; border-radius: 12px;
    color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: none !important;
    transition: background-color .12s ease;
  }
  .m-row:active { background: var(--surface-3); }
  .m-row .ico { width: 22px; height: 22px; color: var(--ink-2); }
  .m-row .nav-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-row.active { color: var(--brand); }
  .m-row.active .ico { color: var(--brand); }
  .m-row .badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
    background: var(--surface-3); color: var(--ink-2); border-radius: var(--r-sm);
    font-size: var(--fs-caption); font-weight: 700; line-height: 1;
  }
  .m-row .badge.warn { background: var(--brand); color: #fff; }
  .m-row.m-logout { color: var(--bad); }
  .m-row.m-logout .ico { color: var(--bad); }
  /* 언어 토글 행은 링크가 아니므로 눌리는 느낌을 주지 않는다 */
  .m-row.m-row-static:active { background: none; }
  .m-lang { display: flex; gap: 4px; flex: 1 1 auto; max-width: 240px; }
  .m-sheet .lang-btn { background: var(--surface-3); color: var(--ink-2); min-height: 44px; min-width: 44px;
                       flex: 1 1 0; border-radius: 8px; font-size: 14px; }
  .m-sheet .lang-btn.on { background: var(--ink); color: #fff; }
  /* 키보드 포커스 (폰 셸 요소) */
  .m-back:focus-visible, .m-score:focus-visible, .m-msg:focus-visible, .m-bell:focus-visible, .m-avatar:focus-visible,
  .m-tab:focus-visible, .m-row:focus-visible, .chip:focus-visible, .seg a:focus-visible, .vrow:focus-visible,
  a.card:focus-visible, .m-sheet-close:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; box-shadow: none;
  }

  /* 움직임 최소화 설정을 켠 사용자: 시트는 페이드로만 */
  @media (prefers-reduced-motion: reduce) {
    .m-sheet, body.m-sheet-open .m-sheet, .m-scrim { transition-duration: .01ms; }
  }

  /* 카드 밀도: 스탯은 2개씩, 여백 축소 */
  .grid { gap: 12px; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .stat .n { font-size: var(--fs-h1); }
  .card.stat { min-height: 92px; padding: 12px 14px; }
  .card { margin-bottom: 12px; }
  .card h2, .card-head h2 { font-size: 15px; }
  .page-back { display: none; }
  .toolbar-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 28px 2px 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .toolbar-row::-webkit-scrollbar { display: none; }
  .toolbar-row > * { flex: 0 0 auto; }
  /* 제목 밑 액션은 원래 폭대로 흐른다 — 링크 하나가 전체폭 주 버튼처럼 커지지 않게.
     .stack 을 붙인 묶음만 같은 폭 격자로 쌓인다. */
  .page-actions { display: flex; flex-wrap: wrap; gap: 8px; order: 2; }
  .page-head .title-pills { margin-top: -2px; }
  .page-actions.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .page-actions.stack > .btn, .page-actions.stack > form, .page-actions.stack > form > .btn { width: 100%; }
  .page-actions details.menu > .menu-list { position: static; margin-top: 6px; }

  /* 본문: 전체 폭 + 하단 탭바 높이만큼 확보 (앱바가 상단을 담당) */
  .main {
    padding: 16px var(--side-r)
             calc(var(--tabbar-h) + var(--tab-safe) + 16px) var(--side-l);
  }
  /* 가로로 넘치는 요소 방지 */
  /* clip: hidden과 달리 body를 스크롤 컨테이너로 만들지 않아 position:sticky가 살아있음 */
  html, body { overflow-x: clip; max-width: 100%; }
  /* 스크롤 바운스(고무줄)에 하단 탭바가 딸려 올라오는 것 방지 —
     문서 자체를 당기는 오버스크롤을 끄면 fixed 바가 바닥에 붙어 있는다
     (유진 2026-09-03). iOS Safari 기본엔 당겨서 새로고침이 없어 부작용 없음. */
  html, body { overscroll-behavior-y: none; }
  body { min-height: 100dvh; }
  /* 폰 앱 셸: 문서 대신 body 가 스크롤한다. iOS 26 사파리(그리고 iOS 크롬)는 문서를 스크롤할 때 하단 툴바가
     줄었다 늘며 뷰포트 바닥이 움직여 position:fixed 탭바가 따라다닌다 (유진 2026-09-26 "하단 탭바 고정이 안 되고
     따라오는 현상"). 문서가 스크롤하지 않으면 툴바가 그대로라 탭바가 바닥에 붙어 있다. 앱바(sticky top)·재고
     도구줄(sticky 52px)은 body 스크롤 컨테이너 기준으로 그대로 동작한다. 손님 화면·공유 화면은 app-shell 이 아니다. */
  html:has(> body.app-shell) { height: 100%; overflow: hidden; }
  body.app-shell {
    height: 100%; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  body.app-shell.m-locked { overflow-y: hidden; }   /* 더보기 시트가 열린 동안 */
  /* 앵커(#inventory-truth 등)로 이동한 카드가 sticky 앱바 뒤에 숨지 않게 */
  body.app-shell .card[id], body.app-shell section[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 60px); }
  .card, .vcard, table.tbl { max-width: 100%; }
  pre.caption { white-space: pre-wrap; word-break: break-word; }
  .page-head { gap: 8px 10px; margin-bottom: var(--sp-4); }
  .page-head h1 { word-break: keep-all; font-size: var(--fs-h2); }
  .page-sub { margin-bottom: var(--sp-4); }
  /* 액션 버튼은 제목 밑 한 줄로 — 제목/버튼이 서로 짜부되지 않게 */
  .page-head .page-actions { width: 100%; margin-left: 0; }
  /* 넓은 테이블은 카드 안에서만 가로 스크롤 (페이지 전체는 안 밀림) */
  .card { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
          overscroll-behavior-x: contain; }
  .tbl { min-width: 600px; }
  /* 좁은 표(설정 스케줄/단가표 등)는 600px 강제에서 제외 — 내용이 폰 폭에 다 들어감 */
  .tbl.narrow { min-width: 0; }
  .tbl th, .tbl td { padding: 9px 7px; }
  .filters { gap: 6px; }
  .filters input[type=text], .filters input[type=search] { width: 100%; }
  .kv { grid-template-columns: 110px minmax(0,1fr); }
  .kv dt { overflow-wrap: anywhere; }  /* 영어 라벨('Drivetrain / Transmission')은 두 줄로 — 잘라내지 않는다 */
  .form-grid { grid-template-columns: 1fr; }
  input, select, textarea { font-size: 16px; }  /* iOS/안드로이드 포커스 시 자동 확대 방지 */
  input:not([type]), input[type=search],
  input[type=text], input[type=date], input[type=datetime-local], input[type=number],
  input[type=email], input[type=tel], input[type=url], input[type=password], input[type=time],
  select { min-height: 44px; }
  .pw-eye { width: 44px; height: 44px; }
  .btn.icon { width: 44px; }
  /* 표 안 컴팩트 컨트롤도 폰에서는 44px 터치 타깃 */
  input.sm, select.sm { min-height: 44px; padding: 8px 10px; font-size: 16px; }
  select.sm { padding-right: 32px; background-position: right 10px center; background-size: 12px 8px; }
  select { background-position: right 13px center; }
  .filebtn { display: flex; width: 100%; min-height: 44px; }
  /* 터치 타깃 44px + 글자도 한 단계 크게 (팔 뻗은 거리에서 읽히게) */
  .btn { padding: 10px 14px; min-height: 44px; font-size: 14px; }
  .btn.small { padding: 8px 13px; min-height: 44px; font-size: 13.5px; }
  .chip { padding: 10px 14px; min-height: 44px; font-size: 13.5px; }
  .seg-btn { min-height: 44px; font-size: 14px; }

  /* 액션 줄은 폰에서 옆으로 짜부되는 대신 전체폭으로 세로로 쌓는다.
     (버튼 두 개가 375px 폭을 나눠 가지면 한글 라벨이 두 줄로 접혔다.)
     .tight 는 표 행 안 등 항상 가로로 있어야 하는 줄. */
  .btn-row:not(.tight), .actions:not(.tight) {
    display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch;
  }
  .btn-row:not(.tight) > .btn, .actions:not(.tight) > .btn,
  .btn-row:not(.tight) > form.inline, .actions:not(.tight) > form.inline {
    width: 100%;
  }
  .btn-row:not(.tight) > form.inline > .btn, .actions:not(.tight) > form.inline > .btn {
    width: 100%;
  }
  /* 세로로 쌓으면 '가운데 밀기'용 빈 칸은 빈 줄만 만든다 */
  .btn-row > .spacer, .actions > .spacer { display: none; }
  /* 폼 하단 제출 줄: 폰에서는 무조건 전체폭 (누를 곳이 한눈에) */
  .form-cta { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .form-cta > .btn { width: 100%; }
  /* 접기/펼치기 헤더도 손가락 크기로 (기본 22px 였다) */
  summary { padding-top: 11px; padding-bottom: 11px; }
  /* 링크로 쓰이는 필(광고 보드의 '게시 4' 등)만 손가락 크기로.
     보이는 높이를 30px 로 키워 줄 간격을 벌리고(히트 영역이 위아래 줄과
     겹치지 않게 됨), 실제 탭 영역은 ::after 로 44px 를 채운다.
     정보 표시용 span.pill 은 22px 그대로 — 표 밀도를 지킨다. */
  a.pill { position: relative; height: 30px; padding: 0 11px; }
  a.pill::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  /* 본문 텍스트 링크: 인라인 요소의 세로 패딩은 줄 높이를 바꾸지 않으므로
     레이아웃은 그대로 두고 탭 영역만 넓어진다 (카드형 블록 링크는 제외) */
  .main :is(p, li, dd, td, .veh-sub, .timeline, .right, .small, .kv) a:not(.btn):not(.chip):not(.pill) {
    padding-top: 10px; padding-bottom: 10px;
  }
}

/* 좁은 폰(갤럭시 S25 기본 360dp 등): 탭 라벨이 잘리지 않게 한 단계 더 압축 */
@media (max-width: 400px) {
  /* 여백 변수 자체를 줄인다 — .main 만 12px 로 두면 전폭 줄(.inv-bar·.chips.tabs)이 3px 넘쳐 가로로 흔들렸다 */
  :root { --side-l: max(12px, env(safe-area-inset-left, 0px)); --side-r: max(12px, env(safe-area-inset-right, 0px)); }
  .card { padding: 12px; }
  .page-head h1 { font-size: 17px; }
  .m-tab { padding: 6px 1px 5px; }
  .m-appbar { gap: 8px; }
  /* 앱바에 칩이 하나 더 붙었다 — 360dp에서 제목이 눌리지 않게 칩만 줄인다 */
  .m-score { padding: 0 7px 0 6px; gap: 3px; }
  .m-score .n { font-size: 14px; }
}

/* 가로 모드 / 접이식 펼침 등 낮은 높이에서 앱바/탭바가 화면을 잡아먹지 않게 */
@media (max-width: 840px) and (max-height: 480px) {
  :root { --tabbar-h: 46px; }
  .m-appbar { min-height: 44px; }
  .m-tab { gap: 2px; padding: 4px 2px 3px; }
  .m-tab .ico { width: 20px; height: 20px; }
  .m-sheet { max-height: calc(100dvh - 40px); }
}


/* 표 머리 클릭 정렬 — 재고 목록은 서버 정렬 링크(data-sort="server"), 그 밖의 .tbl 은 app.js 가 제자리에서 정렬 (2026-10-13) */
.tbl th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.sortable a { color: inherit; text-decoration: none; }
.tbl th .sort-arr { margin-left: 4px; font-size: 10px; opacity: .35; }
.tbl th.on .sort-arr, .tbl th.sortable:hover .sort-arr { opacity: .9; }

/* 마케팅: 먼저 보여줄 점수 (재고 목록 .sc-sfx 와 같은 모양) — 처음 정렬이 점수순인 게 보이게 (2026-10-21) */
.ad-score { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font-size: 11.5px; font-weight: 700;
  color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-score .ico { width: 11px; height: 11px; color: var(--warn); }

/* ---------- 사이드바: 계정 묶음 + 키가 낮은 화면 (유진 2026-10-21 폴드 가로 616px) ----------
   예전엔 아래 계정 영역이 늘 제 키를 다 차지해서 위의 업무 메뉴(nav)가 작은 스크롤 상자로 눌려 '대시보드' 하나만 보였다.
   키가 넉넉하면 요약 줄(.acct-s)은 숨고 묶음은 늘 펼쳐져 예전과 같다. 860px 이하에서는: 사이드바 전체가 한 번에 스크롤(업무 메뉴는
   안 눌린다), 로고·메뉴 간격을 줄이고, 계정 링크는 '계정 · 설정' 한 줄로 접힌다 (base.html 스크립트). */
.acct > summary.acct-s { display: none; }
.acct > summary::-webkit-details-marker { display: none; }
@media (min-width: 841px) and (max-height: 960px) {     /* 서피스 1368×912: 로고가 큰 딜러(토요타)에서 '할 일' 이 잘렸다 (QA 2026-10-30) */
  .sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .sidebar nav { flex: 0 0 auto; overflow: visible; padding: 6px 8px; }
  .sidebar-foot { margin-top: auto; padding: 6px 8px; }
  .brand { padding: 12px 16px 10px; }
  .brand-dealer { margin-bottom: 6px; }
  .brand-dealer.wide { margin-bottom: 8px; }
  .brand-dealer.wide img { max-height: 44px; }
  .brand-sub { display: none; }
  .sidebar nav a, .sidebar-foot a { padding: 8px 12px; margin: 1px 0; }
  .nav-h { padding: 6px 12px 2px; }
  .sidebar-foot > .nav-h { display: none; }
  .side-score { min-height: 40px; padding: 6px 11px; margin: 0 0 4px; }
  .acct > summary.acct-s {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 1px 0; min-height: 40px;
    border-radius: var(--r-md); color: var(--ink-on-dark); font-weight: 500; cursor: pointer; list-style: none;
  }
  .acct > summary.acct-s:hover { background: var(--canvas-2); color: #fff; }
  .acct > summary.acct-s .acct-caret { margin-left: auto; width: 16px; height: 16px; opacity: .7; transition: transform .15s ease; }
  .acct[open] > summary.acct-s .acct-caret { transform: rotate(180deg); }
  .user-row { padding-top: 4px; }
}
.acct > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: var(--r-md); }