/* ============================================================================
 * portal-v3.css — My SSANCAR 셸 v3 (Codex 디자인 이식 · 2026-10-02)
 *
 * 출처: _design/pages/_prototype.css (Codex 시안 공통 CSS) 를 그대로 옮기고
 *       ① 미리보기 전용(.state-switch / .state-panel) 을 뺐다
 *       ② 두 번 정의된 선택자(.row .stat-strip .tiles .mobile-nav .top-actions …)를
 *          한 곳으로 합쳤다 — PORTAL_UI §0 「같은 클래스 두 번 정의 금지」
 *       ③ 641~1050px 에서 네비가 통째로 사라지던 구멍을 메웠다
 *          (시안: .nav 숨김 1050 ↓ · .mobile-nav 표시 640 ↓) → 상단 네비는 가로 스크롤로 남긴다
 *       ④ 640px ↓ 에서 .top-actions 가 통째로 숨어 ★Sign out 이 없어지던 것★ 을
 *          ssancar.com 링크만 숨기고 이름표(프로필)는 남기는 것으로 바꿨다 (JIN 2026-09-09)
 *       ⑤ 입금율 눈금 글자(Sailing 60% · Release 100%)는 CSS content 가 아니라
 *          마크업의 data-l 로 — 사전은 PHP 한 곳(shipments.php)만
 *
 * 🔴 이 파일은 ★바이어 화면(셸 v3)★ 전용이다. 관리자 화면은 portal-v2.css(셸 v2)를 그대로 쓴다.
 * 🔴 ssancar.com 본체 CSS 를 타지 않는다 — 셸이 이 파일 하나만 로드한다.
 * 🔴 같은 선택자를 아래쪽에 다시 쓰지 말 것. 고칠 때는 ★원래 자리★ 를 고친다.
 * ========================================================================== */

:root {
  --ink: #17202a;
  --muted: #66717c;
  --line: #d9d8d2;
  --paper: #f4f1ea;
  --card: #fffdfa;
  --soft: #ebe7de;
  --bronze: #8b6744;
  --bronze2: #d8c1a5;
  --navy: #263849;
  --ok: #456a5b;
  --warn: #8a6537;
  --danger: #8a4d49;
  --shadow: 0 18px 45px rgba(23, 32, 42, .08);
  --r: 20px;
}

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

/* ── 셸: 관리자 띠 · 상단바 · 네비 · 이름표 ───────────────────────────── */
.admin-viewer {
  background: #0c0d0f;
  color: #fff;
  padding: 7px 24px;
  font-size: 12px;
  letter-spacing: .02em;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-viewer a { color: #fff; margin-left: auto; font-weight: 800; }

.shell { min-height: 100vh; max-width: 100%; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 241, 234, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: 1440px;
  margin: auto;
  min-height: 74px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; white-space: nowrap; }
.brand b { font-size: 20px; letter-spacing: -.04em; }
.brand span { font-size: 9px; font-weight: 800; letter-spacing: .18em; color: var(--bronze); }

.nav { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #58636e;
  font-size: 12px;
  font-weight: 700;
}
.nav a:hover, .nav a.active { background: var(--ink); color: #fff; }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.external { font-size: 12px; font-weight: 750; text-decoration: none; }

.profile { position: relative; }
.profile summary {
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--card);
  font-size: 12px;
  font-weight: 750;
  max-width: 200px;              /* 「회사 · 이름」이 길면 네비 9개가 밀려 Requests·Account 가 잘린다(1280px 실측) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile summary::-webkit-details-marker { display: none; }
.profile__menu {
  position: absolute;
  right: 0;
  top: 42px;
  width: 210px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow);
  z-index: 25;
}
.profile__menu span, .profile__menu a { display: block; padding: 8px 10px; font-size: 12px; text-decoration: none; }
.profile__menu span { color: var(--muted); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* ── 본문 틀 ───────────────────────────────────────────────────────────── */
.main { max-width: 1240px; width: 100%; margin: 0 auto; padding: 42px 24px 100px; }

.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-weight: 850; font-size: 10px; color: var(--bronze); }
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.03;
  margin-bottom: 12px;
}
.page-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 26px; }
.page-head__copy { max-width: 760px; }
.page-head p { margin: 0; color: var(--muted); font-size: 15px; }
.page-meta { text-align: right; color: var(--muted); font-size: 12px; }
.page-head > *, .grid > *, .row > *, .toolbar > * { min-width: 0; }

/* ── 도구줄 · 탭 ──────────────────────────────────────────────────────── */
.toolbar, .tabs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar { justify-content: space-between; margin: 20px 0; }
.tabs { border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.tabs.bare { border-bottom: 0; margin: 0; }
.tabs a, .tabs button {
  appearance: none;
  border: 0;
  background: none;
  padding: 11px 2px;
  margin-right: 20px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.tabs a.active, .tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabs b { font-weight: 800; color: var(--bronze); margin-left: 4px; }

/* ── 격자 · 카드 ──────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.card.dark { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow); }
.card.soft { background: var(--soft); }
.card h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 26px; letter-spacing: -.025em; }
.card h3 { font-size: 15px; margin-bottom: 5px; }

.muted { color: var(--muted); }
.dark .muted { color: #bdc6ce; }
.kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 850; color: var(--muted); }
.value { font-family: Georgia, "Times New Roman", serif; font-size: 28px; line-height: 1.1; }
.money { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }

/* ── 버튼 · 링크 · 칩 ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ink);
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.bronze { background: var(--bronze); border-color: var(--bronze); }
.btn.danger { background: transparent; color: var(--danger); border-color: #d9b9b5; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: not-allowed; }
.link { font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  background: var(--card);
  white-space: nowrap;
}
.chip.trade { color: var(--bronze); }
.chip.logistics { color: var(--navy); }
.chip.ok { color: var(--ok); }
.chip.warn { color: var(--warn); }
.chip.danger { color: var(--danger); }
.chip.stub { color: var(--warn); border-style: dashed; }   /* 미연결 회원이 보는 견본 데이터 표시 */
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ── 지표 띠 ───────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.metric { padding: 18px; border-left: 1px solid var(--line); }
.metric:first-child { border-left: 0; }
.metric .kicker { margin-bottom: 8px; }
.metric .value { font-size: 21px; }

/* ── 목록 행 (5열: 이름 · 거래칩 · 물류칩 · 날짜/금액 · 열기) ───────────
   🔴 열이 다섯이다. 칩이 없을 때도 ★빈 자식을 넣어★ 자리를 지킨다 — 안 넣으면 왼쪽으로 밀린다. */
.list { display: grid; gap: 10px; }
.row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(120px, .7fr) minmax(120px, .7fr) minmax(150px, .7fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 15px;
  text-decoration: none;
}
.row:hover { border-color: #aaa69f; }
.row-title { font-weight: 850; }

/* ── 입금율 막대 (묶음 단위 · 60/100 눈금) ────────────────────────────── */
.bar { height: 8px; background: #dedbd4; border-radius: 99px; overflow: visible; position: relative; margin: 13px 0 26px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--bronze); }
.bar .tick { position: absolute; top: -5px; width: 1px; height: 18px; background: var(--ink); }
.bar .tick:after {
  content: attr(data-l);
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  color: var(--muted);
}
.bar .t60 { left: 60%; }
.bar .t100 { right: 0; }
.bar .t100:after { left: auto; right: 0; transform: none; }

/* ── 거래 10칸 스텝퍼 · 물류 3칸 ───────────────────────────────────────── */
.stepper { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 20px 0; }
.step { position: relative; padding-top: 18px; font-size: 10px; color: var(--muted); }
.step:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #dedbd4; }
.step.done:before { background: var(--bronze); }
.step.now { color: var(--ink); font-weight: 850; }
.step.now:after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 13px;
  height: 13px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--ink);
}
.logistics-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.logistics-track > div { padding: 15px; border-top: 4px solid #d8d6d0; background: #f1eee7; }
.logistics-track .done { border-color: var(--bronze); }
.logistics-track .now { border-color: var(--ink); background: var(--card); }

/* ── 빈 상태 ───────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 62px 24px;
  border: 1px dashed #bbb7ae;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .35);
}
.empty .symbol { font-family: Georgia, serif; font-size: 42px; color: var(--bronze); }
.empty h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 26px; letter-spacing: -.025em; }

/* ── 표 ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }

/* ── 폼 ────────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 7px; }
.field label { font-size: 11px; font-weight: 850; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 11px;
  padding: 11px 12px;
}
.field textarea { min-height: 110px; resize: vertical; }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); }
.choice.locked { opacity: .48; }

/* ── 타일 · 알림 · 사진 ───────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); position: relative; }
.tile .icon { font-family: Georgia, serif; color: var(--bronze); font-size: 24px; }
/* 고르는 타일(Requests) — 체크박스는 ★숨기되 살려 둔다★(폼·키보드·스크린리더). 그림(sc_pic)이 있으면 그림이 곧 선택지다. */
label.tile { cursor: pointer; display: block; }
label.tile > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.tile > img { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 8px; }
label.tile:has(> input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
/* :has 가 없는 브라우저(구형 Android WebView 등)용 — 형제 체크 표시는 항상 동작한다 */
label.tile > .tick { display: none; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; line-height: 22px; text-align: center; }
label.tile > input:checked ~ .tick { display: block; }
label.tile:has(> input:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 2px; }
.notice { border-left: 3px solid var(--bronze); padding: 12px 14px; background: #eee8df; border-radius: 0 12px 12px 0; }
.photo {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: linear-gradient(140deg, #d4d0c7, #ede9e1);
  display: grid;
  place-items: center;
  color: #73716d;
  font: italic 16px Georgia, serif;
  overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 모바일 하단 탭 (5개 고정 · portal_nav.php $__pt_tabs) ─────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: 100%;
  max-width: 100%;
  background: rgba(255, 253, 250, .97);
  border-top: 1px solid var(--line);
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
}
.mobile-nav a {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.mobile-nav a b { display: block; color: var(--ink); font-size: 16px; line-height: 1.1; }
.mobile-nav a.active { color: var(--ink); }
/* More 탭 — 하단 탭 4개에 없는 메뉴(portal_nav.php $__pt_nav − $__pt_tabs)를 ★위로 펼친다★ (2026-10-14)
   JIN: 「모바일에서 메뉴가 전부 안 나타나고 More 는 Account 로 간다」. 시안은 More 를 account.php 단순 링크로 그렸고
   .nav 는 640px ↓ 에서 숨기므로 Saved cars·Shipments·Success Partner·Requests 로 갈 길이 없었다.
   .profile 과 같은 <details> 라 JS 없이 열리고 닫힌다. 목록은 tail_v3 가 두 배열의 차집합으로 만든다 — 사전을 또 두지 않는다. */
.mobile-more { flex: 1 1 0; min-width: 0; position: static; }
.mobile-more summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.mobile-more summary::-webkit-details-marker { display: none; }
.mobile-more summary b { display: block; color: var(--ink); font-size: 16px; line-height: 1.1; }
.mobile-more.active summary, .mobile-more[open] summary { color: var(--ink); }
.mobile-more__menu {
  position: absolute;             /* 기준은 position:fixed 인 .mobile-nav — 탭 바로 위에 뜬다 */
  left: 12px;
  right: 12px;
  bottom: calc(100% + 8px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--shadow);
}
.mobile-more__menu a { display: block; padding: 12px 14px; font-size: 14px; font-weight: 800; text-decoration: none; border-radius: 10px; text-align: left; color: var(--ink); }   /* .mobile-nav a 의 center·muted 를 되돌린다 */
.mobile-more__menu a.active { background: var(--ink); color: #fff; }
.mobile-more__menu a.out { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }

/* ── 약관 · 로그인 ─────────────────────────────────────────────────────── */
.legal { max-width: 820px; margin: auto; }
.legal h2 { font-family: Georgia, serif; font-size: 25px; margin-top: 34px; }
.legal p { color: #3f4850; }
.legal table { min-width: 0; }

.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; width: 100%; max-width: 100%; }
.auth-brand { background: var(--ink); color: #fff; padding: clamp(34px, 7vw, 90px); display: flex; flex-direction: column; justify-content: space-between; }
.auth-brand h1 { font-size: clamp(42px, 6vw, 76px); }
.auth-panel { display: grid; place-items: center; padding: 32px; }
.auth-form { width: min(430px, 100%); }
.auth-logo { font-size: 24px; font-weight: 900; }
.auth-logo small { display: block; color: var(--bronze2); font-size: 10px; letter-spacing: .2em; }

.hr { height: 1px; background: var(--line); margin: 18px 0; }
.spacer { height: 12px; }

/* ── 반응형 ────────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  /* 1280px 실측: 네비 9개 + 이름표가 한 줄에 안 들어가 Requests·Account 가 잘렸다 → 키커를 숨기고 간격을 줄인다 */
  .brand span { display: none; }
  .nav a { padding: 9px 8px; font-size: 11.5px; }
  .topbar__inner { gap: 14px; }
  .profile summary { max-width: 170px; }
}

@media (max-width: 1050px) {
  /* 시안은 여기서 .nav 를 숨겼다 — 그러면 641~1050px 에 네비가 없다. 가로 스크롤로 남긴다. */
  .top-actions .external { display: none; }
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 13px; }
  .topbar__inner { min-height: 62px; padding: 0 16px; gap: 12px; }
  .brand b { font-size: 18px; }
  .brand span { display: none; }
  .nav { display: none; }                      /* 하단 탭이 대신한다 */
  .top-actions { gap: 5px; }                  /* 이름표(Sign out)는 ★남긴다★ */
  .profile summary { max-width: 128px; overflow: hidden; text-overflow: ellipsis; }
  .admin-viewer { padding: 7px 16px; }
  .main { padding: 28px 14px 98px; }
  .page-head { display: block; }
  .page-meta { text-align: left; margin-top: 12px; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .metric:nth-child(4) { border-top: 1px solid var(--line); }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .row > *:not(:first-child):not(:last-child) { grid-column: 1 / -1; }
  .row > *:last-child { grid-column: 2; grid-row: 1; }
  .row, .row *, .card, .card * { overflow-wrap: anywhere; }
  .stepper { overflow-x: auto; grid-template-columns: repeat(10, 85px); padding-bottom: 8px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .tabs a, .tabs button { white-space: nowrap; }
  .toolbar > .tabs, .toolbar > .field { width: 100%; }
  .mobile-nav { display: flex; }
  .auth { display: block; }
  .auth-brand { min-height: 245px; padding: 32px 22px; }
  .auth-brand h1 { font-size: 37px; }
  .auth-panel { padding: 36px 18px; }
  .card { padding: 18px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── 홈(Overview) 전용 — Codex 홈 시안(my-ssancar-refined-final-en.html)의 블록을 v3 토큰으로 ─────────
   hm- 접두사. 다른 화면은 쓰지 않는다. */
.hm-hero { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; }
.hm-route { position: relative; overflow: hidden; }
.hm-route h2 { font-size: clamp(26px, 3vw, 40px); margin: 6px 0 8px; }
.hm-route svg { width: 100%; height: auto; display: block; margin: 18px 0 4px; }
.hm-route .r-base { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.hm-route .r-done { fill: none; stroke: var(--bronze2); stroke-width: 2.5; }
.hm-route .r-node { fill: #fff; }
.hm-route .r-label { fill: #bdc6ce; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.hm-route .r-vessel { fill: var(--bronze2); }
.hm-arrival { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.hm-arrival strong { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 34px; line-height: 1; }
.hm-arrival span { display: block; color: #bdc6ce; font-size: 12px; margin-top: 4px; }
.hm-arrival .right { text-align: right; }
.hm-arrival .right b { display: block; font-size: 15px; }
.hm-arrival .right a { color: var(--bronze2); }
.hm-signal { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.hm-signal:first-of-type { border-top: 0; }
.hm-signal .no { font-family: Georgia, serif; color: var(--bronze); font-size: 15px; }
.hm-signal strong { display: block; font-size: 13px; }
.hm-signal p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.hm-signal .val { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1; }
.hm-signal .val.warn { color: var(--danger); }
.hm-signal .val.ok { color: var(--ok); }
.hm-sec { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 34px 0 16px; }
.hm-sec h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 26px; letter-spacing: -.025em; margin: 4px 0 2px; }
.hm-sec p { margin: 0; color: var(--muted); }
.hm-axis .metric { text-decoration: none; display: block; }
.hm-axis .metric .value { font-size: 30px; }
.hm-axis .metric small { color: var(--muted); display: block; margin-top: 4px; }
.hm-axis .metric.now { background: var(--soft); }
.hm-vcard { display: block; text-decoration: none; }
.hm-vcard h3 { font-size: 17px; margin: 6px 0 2px; }
.hm-vcard .dual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.hm-vcard .dual span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 850; }
.hm-vcard .dual strong { display: block; font-size: 13px; margin-top: 2px; }
.hm-vcard footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; color: var(--muted); }
.hm-vcard footer b { color: var(--ink); }
.hm-hist { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 16px; }
.hm-hist h4 { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--bronze); }
.hm-hist h4 + p { margin: 3px 0 14px; color: var(--muted); font-size: 12px; }
.hm-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; }
.hm-bars > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; color: var(--muted); }
.hm-bars b { font-size: 11px; color: var(--ink); margin-bottom: 4px; min-height: 13px; }
.hm-bars i { display: block; width: 100%; max-width: 34px; background: var(--bronze); border-radius: 4px 4px 0 0; }
.hm-bars.month i { background: var(--navy); max-width: 22px; }
.hm-bars.month i.zero { opacity: .18; }
.hm-bars span { margin-top: 6px; white-space: nowrap; }   /* 640px ↓ 의 .card * { overflow-wrap:anywhere } 가 "May" 를 "Ma/y" 로 꺾어 그 칸만 막대가 올라갔다(360px 실측 2026-10-14) */
.hm-brand { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 8px; }
.hm-brand .track { height: 8px; background: #dedbd4; border-radius: 99px; overflow: hidden; }
.hm-brand .fill { height: 100%; background: var(--bronze); }
.hm-brand b { text-align: right; }
.hm-kpi { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.hm-kpi b { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 28px; display: block; line-height: 1.1; }
.hm-kpi span { color: var(--muted); font-size: 12px; }
.hm-mgr { display: flex; gap: 12px; align-items: center; }
.hm-mgr img, .hm-mgr .av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.hm-mgr .av { display: grid; place-items: center; background: var(--soft); font-weight: 800; }
@media (max-width: 1050px) { .hm-hist { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hm-bars { gap: 4px; } .hm-bars span { font-size: 9px; } }   /* 12칸 × 3글자가 320px 에도 한 줄에 들어가게 */
@media (max-width: 780px) { .hm-hero { grid-template-columns: 1fr; } .hm-sec { display: block; } .hm-sec > a { display: inline-block; margin-top: 8px; } }

/* ── Shipments 탑승권 카드 · 묶음 상세 (2026-10-16 distill · 기획 _design/track/SHIPMENTS_BRIEF.md) ─────
   새 선택자만 더한다(.lot-*). 기존 선택자 재정의 없음 — 되돌리려면 이 구역을 지우면 끝.
   [2026-10-16 3초 테스트] 사진 띠(.lot-photo/.lot-hero/.lot-method) 규칙은 뺐다 — 카드와 상세 모두 큰 날짜(.lot-big)가 초점. */
.card.lot { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lot-ico { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
.lot-ico.roro { background: var(--bronze); }           /* 방식이 색으로도 갈린다 — 컨테이너 잉크 · 배 브론즈 */
.lot-ico svg { width: 22px; height: 22px; }
.lot-body { padding: 16px 18px 6px; display: flex; flex-direction: column; gap: 10px; }
.card.lot h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.lot-route { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.lot-route .arr { color: var(--muted); font-weight: 400; }
.lot-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lot-brands { display: flex; gap: 6px; align-items: center; }
.lot-brands i { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 11px; line-height: 1; color: var(--ink); font-style: normal; flex: none; }
.lot-brands img { width: 22px; height: 22px; display: block; }   /* 16px 은 실물 엠블럼으로 안 읽혔다(JIN 2026-10-16) */
.card.lot .bar { margin: 6px 0 22px; }
.lot-money { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.lot-money b { font-size: 14px; }
.lot-money span { color: var(--muted); }
.lot-open { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 0 18px; border-top: 1px solid var(--line); font-weight: 800; font-size: 13px; color: var(--ink); text-decoration: none; }
.lot-open:hover { color: var(--bronze); }
.lot-bal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 18px; font-size: 13px; }
.lot-bal b { font-size: 15px; }
.lot-bal span { color: var(--muted); }
.lot-sec { margin: 30px 0 12px; font-size: 20px; }
/* 묶음 상세 */
.lot-title { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.lot-title + .lot-route { margin-top: 8px; }
.lot-rail { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: stretch; }
.lot-rail .leg { padding: 14px 12px; border-top: 4px solid #d8d6d0; background: #f1eee7; }
.lot-rail .leg.done { border-color: var(--bronze); }
.lot-rail .leg.now { border-color: var(--ink); background: var(--card); }
.lot-rail .leg b { display: block; }
.lot-rail .leg span { color: var(--muted); font-size: 12px; }
.lot-rail .mark { align-self: center; text-align: center; font-size: 11px; color: var(--muted); padding: 0 2px; min-width: 54px; }
.lot-rail .mark b { display: block; color: var(--ink); font-size: 12px; }
.lot-rail .mark.none b { color: var(--muted); }
.lot-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.lot-paid { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-top: 22px; color: var(--muted); }
.row.lot-veh { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.row.lot-veh .chips { display: flex; gap: 6px; }
.lot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; }
.lot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 14px; color: var(--ink); }
@media (max-width: 640px) {
  .lot-head-eta span { display: block; margin: 4px 0 0; }
  .lot-rail { grid-template-columns: 1fr; }
  .lot-rail .mark { text-align: left; padding: 2px 12px; }
  .lot-rail .mark b { display: inline; margin-left: 6px; }
  .row.lot-veh { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .row.lot-veh > span:nth-child(2) { grid-column: 2; grid-row: 1; }   /* 로고 · 이름 · 잔금이 한 줄 */
  .row.lot-veh .chips { grid-column: 2 / -1; grid-row: 2; justify-self: start; flex-wrap: wrap; }
  .row.lot-veh > .money, .row.lot-veh > .lot-vr { grid-column: 3; grid-row: 1; }
}

/* ── 홈 distill (2026-10-16) — 새 선택자만. 「Next arrival」은 Shipments 의 .lot 카드를 그대로 쓴다. */
.hm-att { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.hm-att:first-of-type { border-top: 0; }
.hm-att strong { display: block; font-size: 13px; }
.hm-att p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.hm-att .val { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1; }
.hm-att .val.warn { color: var(--danger); }
.hm-att .val.ok { color: var(--ok); }
.hm-stock { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.hm-stock .chip b { margin-left: 4px; }
.hm-hero > .card { align-self: start; }   /* 두 카드는 각자 내용만큼만 — 오른쪽을 사진 카드 높이까지 늘리면 빈 공간이 생긴다(JIN 2026-10-16) */
.hm-hero > aside .hm-mgr { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hm-mgr__t { flex: 1 1 auto; min-width: 0; }
/* 홈 distill 2차 — 담당자·SP 행 · 구매이력 접힘 */
.hm-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--soft); font-weight: 800; font-size: 12px; }
.hm-fold { margin-top: 28px; border-top: 1px solid var(--line); }
.hm-fold summary, .hm-fold__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 16px 0; cursor: pointer; list-style: none; }
.hm-fold summary::-webkit-details-marker { display: none; }
.hm-fold summary .hm-kpi, .hm-fold__h .hm-kpi { margin: 0; gap: 18px; font-size: 13px; color: var(--muted); }
.hm-fold summary .hm-kpi b, .hm-fold__h .hm-kpi b { font-size: 15px; display: inline; font-family: inherit; font-weight: 800; color: var(--ink); }
.hm-fold[open] summary, .hm-fold__h { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.hm-fold .hm-hist { margin-bottom: 8px; }
.hm-fold__h { cursor: default; }
.hm-sp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; font-size: 14px; }
.hm-sp-line b { font-size: 16px; }
/* My vehicles distill — 행 오른쪽 칸(잔금 + ETA) */
.lot-vr { text-align: right; white-space: nowrap; }
.lot-vr small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.row.lot-veh .lot-brands i { width: 44px; height: 44px; font-size: 13px; }   /* 행의 엠블럼은 크게(JIN 2026-10-16) */
.row.lot-veh .lot-brands img { width: 28px; height: 28px; }
/* My vehicles 표 (.vt) — 머리줄 + 행이 같은 열 폭 · 폰은 머리줄 숨기고 세 줄로 접음 (2026-10-16) */
.vt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vt-h, .vt .row.vt-r { display: grid; grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.3fr) auto minmax(0, 1fr) 90px; gap: 14px; align-items: center; }
.vt-h { padding: 12px 18px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 850; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--soft); }
.vt .row.vt-r { border: 0; border-radius: 0; border-top: 1px solid var(--line); background: transparent; padding: 12px 18px; }
.vt .row.vt-r:first-of-type { border-top: 0; }
.vt .row.vt-r:hover { background: var(--paper); }
.vt .r { text-align: right; }
.vt .lot-brands i { width: 42px; height: 42px; }
.vt .lot-brands img { width: 26px; height: 26px; }
.vt-h a { color: var(--muted); text-decoration: none; }
.vt-h a:hover, .vt-h a.on { color: var(--ink); }
@media (max-width: 640px) {
  /* 폰 — 머리줄을 숨기지 않고 ★정렬 칩 줄★ 로 보인다(같은 링크 · 같은 동작). 가로로 굴러간다. */
  .vt-h { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; letter-spacing: 0; text-transform: none; }
  .vt-h::-webkit-scrollbar { display: none; }
  .vt-h::before { content: "Sort"; flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; }
  .vt-h a { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 800; background: var(--card); color: var(--muted); text-align: left; }
  .vt-h a.on { border-color: var(--ink); color: var(--ink); }
  .vt .row.vt-r { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
  .vt .row.vt-r > :nth-child(1) { grid-column: 1; grid-row: 1 / 4; align-self: start; }
  .vt .row.vt-r > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .vt .row.vt-r > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .vt .row.vt-r > :nth-child(4) { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
  .vt .row.vt-r > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .vt .row.vt-r > :nth-child(6) { grid-column: 3; grid-row: 2; font-size: 11px; }
}
/* 차량 상세 distill (2026-10-16) — 머리 엠블럼 · 스텝퍼 현재 칸 줄 · 제원 격자 */
.veh-head { margin-top: 14px; align-items: flex-start; }
.veh-head__t { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.veh-head__t h1 { margin: 0 0 4px; }
.veh-head__t p { margin: 0; }
.veh-head__logo i { width: 56px; height: 56px; font-size: 15px; margin-top: 6px; }
.veh-head__logo img { width: 34px; height: 34px; }
.veh-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.veh-head__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.card h3 { font-size: 15px; margin: 0 0 6px; }
.step-now { display: none; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.veh-lot { margin: 16px 0 0; font-size: 14px; }
.veh-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 10px; }
.veh-facts p { margin: 0; }
.veh-facts .kicker { display: block; margin-bottom: 2px; }
@media (max-width: 640px) {
  .veh-head__side { align-items: flex-start; margin-top: 10px; }
  .stepper { overflow: visible; grid-template-columns: repeat(10, 1fr); gap: 3px; padding-bottom: 0; }   /* 10칸을 다 보인다 — 글자는 아래 한 줄로 */
  .step { font-size: 0; padding-top: 10px; }
  .step-now { display: block; }
}
/* Documents distill (2026-10-16) — 한 줄 검색 · 격자 표 .vt.dt (7열) */
.dt-find { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.dt-find input[type=search] { flex: 1 1 260px; min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font: inherit; background: var(--card); }
.dt-only { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.vt.dt .vt-h, .vt.dt .row.vt-r { grid-template-columns: 56px minmax(0, 1.8fr) minmax(0, 1fr) repeat(4, minmax(0, .9fr)); }
.vt.dt .vt-h span { text-decoration: none; }
.vt.dt .dt-c .link { font-size: 13px; }
@media (max-width: 640px) {
  .vt.dt .vt-h { display: none; }
  .vt.dt .row.vt-r { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .vt.dt .row.vt-r > :nth-child(1) { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .vt.dt .row.vt-r > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .vt.dt .row.vt-r > .dt-vessel { grid-column: 2; grid-row: 2; font-size: 12px; }
  .vt.dt .row.vt-r > .dt-c { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 0; border-top: 1px dashed var(--line); font-size: 13px; }
  .vt.dt .row.vt-r > .dt-c:nth-child(4) { margin-top: 8px; }
  .vt.dt .row.vt-r > .dt-c::before { content: attr(data-k); color: var(--muted); font-weight: 700; }
  .dt-find .btn { flex: 1 1 auto; }
}
/* Payments distill (2026-10-16) — 잔금 축 띠 */
.pay-ax .metric { text-decoration: none; display: block; }
.pay-ax .metric .value { font-size: 24px; }
.pay-ax .metric small { color: var(--muted); display: block; margin-top: 4px; }
@media (max-width: 640px) { .pay-ax { grid-template-columns: 1fr 1fr !important; } }
/* ── Dashboard 3초 테스트 (2026-10-16 · _design/track/GPT_CONCEPT_COMPARE.md §8) — 새 선택자만 ─────────
   ① 초점 자리에 날짜(.lot-big) ② 제목 = 선박명, 번호는 보조줄(.lot-sub) ③ 물류 칩을 단계색으로 채움(.chip.logistics.l1~3) */
.card.lot.focus .lot-body { padding-top: 18px; gap: 8px; }
.lot-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; }
.lot-head .kicker, .lot-ico { white-space: nowrap; }
.lot-big { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.lot-big b { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(44px, 5vw, 60px); line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.lot-big span { font-size: 17px; font-weight: 850; color: var(--bronze); }
.lot-big.passed b { color: var(--muted); }
.lot-big.passed span { color: var(--muted); font-weight: 700; }
.card.lot.focus h2 { font-size: 22px; margin: 0; }
.lot-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 850; letter-spacing: .06em; color: var(--muted); }
.lot-sub .mono { font-weight: 600; letter-spacing: 0; }
.card.lot.focus .lot-route { font-size: 14px; }
.chip.logistics.l1 { color: var(--muted); background: var(--soft); border-color: transparent; }        /* In Korea */
.chip.logistics.l2 { color: var(--navy); background: #e3e9f0; border-color: transparent; }            /* At sea */
.chip.logistics.l3 { color: var(--bronze); background: #f0e4d6; border-color: transparent; }          /* Arriving */
.card.lot.focus .chip.logistics { font-size: 12px; padding: 6px 12px; color: #fff; border-color: transparent; background: var(--navy); }
.card.lot.focus .chip.logistics.l1 { background: var(--muted); }
.card.lot.focus .chip.logistics.l3 { background: var(--bronze); }
@media (max-width: 640px) { .lot-big b { font-size: 46px; } .lot-big span { font-size: 15px; } }
/* 카드 안 축소 레일 — 3칸만(마크 없음) · 상세 .lot-rail 과 같은 색 규칙 */
.lot-rail.mini { grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin: 2px 0; }
.lot-rail.mini .leg { padding: 8px 10px; border-top-width: 4px; font-size: 13px; }
.lot-rail.mini .leg span { font-size: 11px; }
.lot-head .chip { margin-left: auto; }                 /* 칩은 항상 오른쪽 — 왼쪽은 [kicker] 방식 배지 */
.lot-head .kicker + .lot-ico { margin-left: 4px; }
.lot-head--page { margin-top: 18px; }
.lot-head--page + .lot-big b { font-size: clamp(48px, 6vw, 72px); }
.lot-title { margin-top: 2px; }
.lot-title + .lot-sub { margin-top: 6px; }
.lot-sub + .lot-route { margin-top: 10px; }
/* ── My vehicles · 차량 상세 3초 테스트 (2026-10-16) — 현재 상태를 크게 ─────
   머리 칩은 카드와 같이 단계색으로 채우고 한 단계 크게 · 10칸 레일의 지금 칸은 막대를 잉크로, 글자 12px. 칸 수는 그대로(두 축 유지). */
.veh-head__chips .chip { font-size: 12px; padding: 6px 12px; }
.veh-head__chips .chip.logistics { color: #fff; border-color: transparent; background: var(--navy); }
.veh-head__chips .chip.logistics.l1 { background: var(--muted); }
.veh-head__chips .chip.logistics.l3 { background: var(--bronze); }
.veh-head__chips .chip.logistics.ok { background: var(--ok); }
.step.now:before { background: var(--ink); }
.step.now { font-size: 12px; }
.step.now:after { width: 15px; height: 15px; top: -5px; }
.step-now { color: var(--ink); font-size: 15px; }
@media (max-width: 640px) { .step.now { font-size: 0; } }   /* 폰은 칸 글자 전부 숨김 — 지금 칸도(아래 .step-now 한 줄이 말한다) */
/* Saved cars distill (2026-10-16) — 카드 바닥 링크 둘 */
.fav-acts { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin-top: 6px; }
.fav-acts .link { font-size: 13px; }
.fav-x { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; font: inherit; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; }
.fav-x:hover { color: var(--danger); }
/* Requests distill (2026-10-16) — 보내기 줄: 왼쪽 「Goes to …」 각주 · 오른쪽 버튼 */
.rq-send { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.rq-send small { font-size: 12px; }
/* Success Partner distill (2026-10-16) — 크레딧 제목 */
.sp-avail { margin: 0; font-size: 28px; }
/* Benefits 격자 표 .vt.bt (2026-10-16) — 4열 · 폰은 접힘 + data-k 라벨 */
.vt.bt .vt-h, .vt.bt .row.vt-r { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr); }
.vt.bt .vt-h span { text-decoration: none; }
.vt.bt .bt-name .muted { font-size: 12px; }
@media (max-width: 640px) {
  .vt.bt .vt-h { display: none; }
  .vt.bt .row.vt-r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vt.bt .row.vt-r > .bt-name { grid-column: 1 / -1; grid-row: auto; align-self: auto; }   /* My vehicles 폰 nth-child 규칙(grid-row 1/4)을 되돌린다 */
  .vt.bt .row.vt-r > .bt-c { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 0; border-top: 1px dashed var(--line); font-size: 13px; text-align: right; }
  .vt.bt .row.vt-r > .bt-c:first-of-type { margin-top: 6px; }
  .vt.bt .row.vt-r > .bt-c::before { content: attr(data-k); color: var(--muted); font-weight: 700; text-align: left; }
}
/* 매입취소 (2026-10-16 · JIN 「추천대로」) — 진행 칩 옆 취소 칩 · 행은 눌러서 · 상세 한 줄 */
.chip.cancel { color: var(--danger); border-color: var(--danger); }
.row.cancelled > b, .row.cancelled > span:not(.chips) { color: var(--muted); }
.row.cancelled .lot-brands i { opacity: .55; }
.veh-cancel { margin: 12px 0 0; font-size: 14px; font-weight: 800; color: var(--danger); }