/* 운송관리 모듈 전용. 공용 CSS 로 올리지 않는다. 색은 전부 테마 토큰(--jsini-*)에서 얻는다 — 값을 박으면 어두운 테마에서 카드만 하얗게 남는다. */
/* 휴대폰 폭(≤767px)에서는 카드·타일이 한 줄로 쌓이고 사실 목록이 한 칸으로 접힌다. 가로 스크롤은 표에서만 생긴다. */

/* 조각이 여럿 쌓이는 화면의 뿌리. CommCont 를 본문에 바로 두면 셸이 남은 높이를 다 먹여 대시보드 화면이 잘리므로 한 겹 감싼다. */
.ct-page {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-lg);
  min-width: 0;
}

.ct-page > .commcont + .commcont {
  margin-top: 0;
}

/* ── 홈 검색 ─────────────────────────────────────────────── */

.ct-hero {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-sm);
  padding: var(--jsini-sp-xl) var(--jsini-sp-lg);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-lg);
  background: var(--jsini-surface-raised, var(--jsini-surface));
}

.ct-hero__title {
  font-size: var(--jsini-fs-xl);
  font-weight: 700;
}

.ct-hero__search {
  display: flex;
  gap: var(--jsini-sp-sm);
  align-items: center;
}

.ct-hero__search > .ct-hero__input,
.ct-hero__search > .dxbl-text-edit {
  flex: 1;
  min-width: 0;
}

.ct-home-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-md);
  align-items: stretch;
}

/* 미수금 타일은 통째로 링크다 — 누르면 미수금 화면. 글자색이 링크색이 되지 않게 한다. */
.ct-home-stat {
  flex: 1 1 260px;
  color: inherit;
  text-decoration: none;
}

.ct-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
}

/* ── 카드 (검색 결과 · 최근 본 거래처 · 미수금 거래별) ────── */

.ct-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--jsini-sp-md);
}

.ct-card {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-sm);
  min-width: 0;
  padding: var(--jsini-sp-md) var(--jsini-sp-lg);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-lg);
  background: var(--jsini-surface-raised, var(--jsini-surface));
  box-shadow: var(--jsini-shadow-card, none);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

a.ct-card:hover,
a.ct-card:focus-visible {
  border-color: color-mix(in srgb, var(--jsini-accent) 45%, var(--jsini-border));
  box-shadow: 0 6px 18px rgb(0 0 0 / 10%);
}

.ct-card__head {
  display: flex;
  gap: var(--jsini-sp-sm);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

/* 긴 회사명이 배지를 밀어내지 않게 이름만 줄인다. */
.ct-card__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--jsini-fs-lg);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-card__sub {
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-muted);
}

.ct-card__amount {
  font-size: var(--jsini-fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ct-card__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem var(--jsini-sp-md);
  margin: 0;
}

.ct-card__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--jsini-sp-sm);
  min-width: 0;
}

.ct-card__rows dt {
  color: var(--jsini-text-muted);
  font-size: var(--jsini-fs-sm);
  font-weight: 400;
}

.ct-card__rows dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ct-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--jsini-sp-xs);
  border-top: 1px solid var(--jsini-border);
}

.ct-confidence {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-xs);
  align-items: center;
}

.ct-num--err {
  color: var(--jsini-danger, #d32f2f);
  font-weight: 700;
}

.ct-result-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: baseline;
  font-weight: 600;
}

/* ── 상세 판 (거래처 · 거래 · 내 정보) ────────────────────── */

.ct-panel {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-md);
  padding: var(--jsini-sp-lg);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-lg);
  background: var(--jsini-surface-raised, var(--jsini-surface));
}

.ct-panel--form {
  max-width: 960px;
}

.ct-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-md);
  align-items: center;
  justify-content: space-between;
}

.ct-panel__name {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
  font-size: var(--jsini-fs-xl);
  font-weight: 700;
}

.ct-panel__actions {
  gap: var(--jsini-sp-sm);
}

/* 사실 목록. 넓으면 세 칸, 좁으면 한 칸. 주소·메모처럼 긴 값은 한 줄을 다 쓴다. */
.ct-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--jsini-sp-sm) var(--jsini-sp-lg);
  margin: 0;
}

.ct-facts > div {
  min-width: 0;
}

.ct-facts__wide {
  grid-column: 1 / -1;
}

.ct-facts dt {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-muted);
  font-weight: 600;
}

.ct-facts dd {
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
}

.ct-pre {
  white-space: pre-wrap;
}

/* 기간 고르개. 단추 다섯을 한 덩어리로 붙인다 — 떨어져 있으면 무엇끼리 한 묶음인지 흐리다. */
.ct-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* ── 통계 타일 ───────────────────────────────────────────── */

.ct-tiles {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-sm);
}

.ct-tiles__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: baseline;
}

.ct-tiles__title {
  font-size: var(--jsini-fs-lg);
  font-weight: 700;
}

/* 금액은 자리를 많이 먹어 기본 150px 칸에서 넘친다. 조금 넓히고 글자를 한 단 내린다. */
.ct-stats {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin-bottom: 0;
}

.ct-stats .jsini-stat__value {
  font-size: var(--jsini-fs-2xl, var(--jsini-fs-xl));
  overflow-wrap: anywhere;
}

.ct-stat--total {
  border-color: color-mix(in srgb, var(--jsini-accent) 40%, var(--jsini-border));
}

/* ── 후기 ────────────────────────────────────────────────── */

.ct-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-review {
  padding: var(--jsini-sp-sm) var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
}

.ct-review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
  font-size: var(--jsini-fs-sm);
}

.ct-review__report {
  margin-left: auto;
}

.ct-review__body {
  margin-top: var(--jsini-sp-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── 폼 · 고르개 ─────────────────────────────────────────── */

.ct-inline-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
}

.ct-inline-field > .dxbl-text-edit {
  flex: 1 1 200px;
  min-width: 0;
}

.ct-picked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
}

.ct-picked__name {
  font-weight: 700;
}

.ct-picklist {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  margin: var(--jsini-sp-xs) 0 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
  list-style: none;
}

.ct-picklist__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  padding: var(--jsini-sp-xs) var(--jsini-sp-md);
  border: 0;
  border-bottom: 1px solid var(--jsini-border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ct-picklist li:last-child .ct-picklist__item {
  border-bottom: 0;
}

.ct-picklist__item:hover,
.ct-picklist__item:focus-visible {
  background: color-mix(in srgb, var(--jsini-text) 6%, transparent);
}

/* 폼 단추 줄. jsini-actions 를 쓰지 않으니 배치를 여기서 쥔다 — 표 칸 여백이 따라오면 단추 높이가 눌린다. */
.ct-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
}

/* 손가락 크기(44px)를 양쪽 폭에서 지킨다. 여백은 건드리지 않는다 — Tabler 의 40px 기본값은 tabler.css 가 뒤에 실려 여기서 못 덮으니 높이만 채운다. */
.ct-form-actions > .dxbl-btn {
  min-height: 44px;
}

@media (max-width: 767px) {
  /* 「등록」은 남는 폭을 다 가진다. 「다시 쓰기」는 제 글자만큼만 — 같은 크기면 지우는 단추를 잘못 누른다. */
  .ct-form-actions__go {
    flex: 1 1 auto;
  }
}

.ct-popup-lead {
  margin-bottom: var(--jsini-sp-sm);
}

.ct-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
  margin-top: var(--jsini-sp-sm);
}

/* ── 내 미처리 거래 (거래처 상세) ────────────────────────── */

/* 줄 목록이다. 칸 일곱 중 다섯이 짧아 표로 두면 휴대폰에서 가로로 굴러야 하므로, 좁아지면 아래로 접히게 줄로 둔다. */
.ct-open {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-open__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  align-items: center;
  min-width: 0;
  padding: var(--jsini-sp-sm) 0;
  border-top: 1px solid var(--jsini-border);
}

.ct-open__row:first-child {
  border-top: none;
}

.ct-open__day {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* 긴 구간 이름이 금액을 밀어내지 않게 이것만 줄어든다. */
.ct-open__route {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 남은 금액이 이 줄에서 가장 중요한 값이다 — 고를지 말지를 그것으로 정한다. */
.ct-open__amount {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ct-open__due {
  flex: 0 0 auto;
  color: var(--jsini-text-muted, inherit);
  font-size: var(--jsini-fs-sm);
}

/* 단추는 늘 오른쪽 끝이다. 줄마다 다른 자리에 있으면 연달아 누를 수 없다. */
.ct-open__row > .jsini-actions {
  margin-left: auto;
}

/* 고른 것의 합계. 「몇 건 · 얼마」가 단추 바로 위에 있어야 누르기 전에 읽는다. */
.ct-open__sum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-md);
  align-items: baseline;
  margin-bottom: var(--jsini-sp-sm);
}

.ct-open__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-md);
  align-items: center;
  margin-bottom: var(--jsini-sp-sm);
  padding-bottom: var(--jsini-sp-sm);
  border-bottom: 1px solid var(--jsini-border);
}

.ct-open__date {
  display: flex;
  gap: var(--jsini-sp-xs, 0.25rem);
  align-items: center;
}

/* ── 휴대폰 ──────────────────────────────────────────────── */

@media (max-width: 767px) {
  .ct-hero {
    padding: var(--jsini-sp-md);
  }

  .ct-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 타일은 두 칸으로 — 한 칸이면 여섯 타일이 화면 셋을 먹는다. */
  .ct-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ct-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-panel {
    padding: var(--jsini-sp-md);
  }

  .ct-panel__actions {
    width: 100%;
  }

  .ct-card__rows {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 구간은 한 줄을 통째로 쓴다 — 8rem 으로 좁히면 「경기 → 부산」이 잘린다. */
  .ct-open__route {
    flex: 1 1 100%;
  }

  /* 한 번에 처리하는 단추는 폭을 채운다. 좁은 화면에서 이 화면의 주된 동작이다. */
  .ct-open__bar > .dxbl-btn {
    flex: 1 1 100%;
  }
}

/* ── 심야할인 계산 ────────────────────────────────────────── */

/* 넓으면 고르는 곳과 결과가 나란히 서고, 좁으면 쌓인다. */
@media (min-width: 900px) {
  .ct-toll {
    display: grid;
    grid-template-columns: minmax(340px, 420px) 1fr;
    align-items: start;
    gap: var(--jsini-sp-lg);
  }

  /* 고르는 판은 왼쪽 줄에 붙박이고, 결과들이 오른쪽에 차례로 쌓인다. */
  .ct-toll-form {
    grid-row: 1 / span 99;
  }
}

.ct-toll-form {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-md);
}

/* 차량이 한 대일 때. 고르는 것이 아니라 알려 주는 자리라 오른쪽 끝에 설명 물음표만 선다. */
.ct-toll-vehicle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jsini-sp-sm);
  padding-bottom: var(--jsini-sp-sm);
  border-bottom: 1px solid var(--jsini-border);
}

.ct-toll-vehicle-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 차량이 여럿이라 칩이 설 때는 라벨 줄 오른쪽에 붙인다. */
.ct-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jsini-sp-sm);
}

/* 설명을 여는 단추. 손가락 크기를 지키되 동그라미라 자리를 적게 먹는다. */
.ct-help-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--jsini-border);
  border-radius: 999px;
  background: var(--jsini-surface);
  color: var(--jsini-text-dim);
  font-size: var(--jsini-fs-sm);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

.ct-help-btn:hover {
  border-color: var(--jsini-accent);
  color: var(--jsini-text);
}

/* 펴 둔 동안은 눌린 모양으로 둔다 — 다시 누르면 접힌다는 것이 보여야 한다. */
.ct-help-btn--on {
  border-color: var(--jsini-accent);
  background: var(--jsini-accent);
  color: #fff;
}

/* 펼친 설명. 고르는 판 안에 들어가므로 둘레를 지우고 왼쪽 선만 남긴다. */
.ct-toll-help-body {
  padding-bottom: var(--jsini-sp-sm);
  border-bottom: 1px solid var(--jsini-border);
}

.ct-toll-vehicle-name {
  font-weight: 600;
}

.ct-toll-vehicle-sub {
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-dim);
}

.ct-field-row {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-xs);
}

.ct-label {
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-dim);
}

/* 날짜와 시각을 나란히. 좁아지면 줄을 바꾼다. */
.ct-when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
}

/* OS 달력·시계를 쓰는 맨 input 이라 테마 토큰으로 옷만 입힌다. color-scheme 이 있어야 어두운 테마에서 바퀴·아이콘도 어두워진다. */
.ct-input {
  flex: 1 1 10rem;
  min-height: 44px;
  padding: 0 var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
  background: var(--jsini-surface);
  color: var(--jsini-text);
  color-scheme: light dark;
  font-size: inherit;
  font-family: inherit;
}

/* ── 맨 고르개(NativeSelect) ──────────────────────────────── */

/* 고르개 한 칸. 「직접 입력」을 고르면 글자 칸이 아래에 붙는다. */
.ct-select {
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-xs);
}

/* 폼 칸 안에서는 줄 폭을 다 쓴다. ct-input 의 flex 1 1 10rem 은 시·분처럼 가로로 늘어선 자리에서만 듣는다. */
.ct-input--select,
.ct-input--free {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* OS 화살표 자리를 비운다. 기본 여백이면 긴 유형 이름이 화살표 밑으로 들어간다. */
.ct-input--select {
  padding-right: 2rem;
}

/* ── 칩(라디오) ───────────────────────────────────────────── */

.ct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
}

/* 손가락 크기(44px)를 양쪽 폭에서 지킨다. 데스크톱에서 굳이 줄일 이유가 없다. */
.ct-chip {
  min-height: 44px;
  padding: 0 var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-radius: 999px;
  background: var(--jsini-surface);
  color: var(--jsini-text);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}

.ct-chip:hover:not(:disabled) {
  border-color: var(--jsini-accent);
}

/* 고른 것은 테두리와 글자 두께로도 표시한다 — 색만으로 가르면 색을 못 보는 사람에게 고르지 않은 것으로 보인다. */
.ct-chip--on {
  border-color: var(--jsini-accent);
  border-width: 2px;
  background: var(--jsini-accent);
  color: #fff;
  font-weight: 600;
}

.ct-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 결과 안 사실 목록은 좁아도 두 칸을 지킨다 — 한 줄씩 번갈아 쌓이면 훑어볼 수 없다. */
.ct-facts--tight > div {
  padding: var(--jsini-sp-xs) 0;
}

/* 결과의 머리. 할인율이 이 화면에서 가장 큰 글자다 — 사람이 보러 온 값이고 나머지는 그 값을 믿게 하는 근거다. */
.ct-toll-headline {
  display: flex;
  align-items: baseline;
  gap: var(--jsini-sp-sm);
}

.ct-toll-rate {
  /* 글자 크기 단계(--jsini-fs-*)를 따른다. rem 으로 박으면 사용자가 글자를 키워도 이 숫자만 따라오지 않는다. */
  font-size: calc(var(--jsini-fs-2xl) * 1.5);
  font-weight: 700;
  line-height: 1.1;
  color: var(--jsini-accent);
}

.ct-toll-sub {
  color: var(--jsini-text-dim);
}

.ct-toll-summary {
  margin: var(--jsini-sp-sm) 0 0;
  line-height: 1.6;
}

/* ── 타임라인 막대 ────────────────────────────────────────── */

.ct-timeline {
  margin: var(--jsini-sp-md) 0;
}

/* 운행 전체가 이 막대 하나다. 음영 조각이 absolute 로 겹치므로 여기가 기준점이다. */
.ct-timeline-bar {
  position: relative;
  height: 28px;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface-2);
  overflow: hidden;
}

.ct-timeline-night {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--jsini-accent);
  opacity: 0.35;
}

.ct-timeline-ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--jsini-sp-xs);
  font-size: 0.85em;
  color: var(--jsini-text-dim);
}

/* ── 추천 결과 ────────────────────────────────────────────── */

.ct-toll-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--jsini-sp-md);
  margin: var(--jsini-sp-md) 0 0;
  padding: 0;
  list-style: none;
}

.ct-toll-option {
  padding: var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
  background: var(--jsini-surface-2);
}

.ct-toll-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jsini-sp-sm);
  margin-bottom: var(--jsini-sp-sm);
}

.ct-toll-option-head strong {
  font-size: 1.15em;
}

.ct-toll-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9em;
  color: var(--jsini-text-dim);
}

/* ── 대상 조건 목록 ───────────────────────────────────────── */

/* 구간 유형의 뜻(물음표 안). 「폐쇄식·개방식」은 운영 방식을 부르는 말이라, 알아보는 법(통행권을 뽑았나 · 요금소를 몇 번 지나나)을 함께 적는다. */

.ct-kinds {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-xs);
}

.ct-kind {
  padding: var(--jsini-sp-sm) var(--jsini-sp-md);
  border-left: 3px solid var(--jsini-accent);
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface-2);
}

.ct-kind dt {
  font-weight: 600;
}

.ct-kind dd {
  margin: 0;
  color: var(--jsini-text-dim);
}

/* 규칙은 제 줄로 내린다. 뜻풀이에 이어 붙이면 「무엇인가」와 「얼마인가」가 한 덩어리로 읽힌다. */
.ct-kind-rule {
  display: block;
  margin-top: var(--jsini-sp-2xs);
  font-size: var(--jsini-fs-sm);
}

.ct-checks {
  margin: var(--jsini-sp-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--jsini-sp-xs);
}

.ct-check {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-sm);
  padding: var(--jsini-sp-sm) var(--jsini-sp-md);
  border-left: 3px solid var(--jsini-border);
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface-2);
}

/* 판정은 셋이다. 「알 수 없음」을 「아님」과 같은 색으로 칠하면 「서약서가 필요」가 「대상이 아님」으로 읽힌다. */
.ct-check--ok { border-left-color: var(--jsini-success); }
.ct-check--no { border-left-color: var(--jsini-danger); }
.ct-check--unknown { border-left-color: var(--jsini-warning); }

.ct-check-label {
  min-width: 7em;
  font-weight: 600;
}

.ct-check-note {
  flex: 1 1 14em;
  color: var(--jsini-text-dim);
}

@media (max-width: 767px) {
  .ct-toll-rate {
    font-size: calc(var(--jsini-fs-2xl) * 1.25);
  }

  .ct-toll-range {
    flex-wrap: wrap;
  }
}

/* ── 번호판이 말한 것 ─────────────────────────────────────── */

/* 차량번호 칸 바로 아래 한 줄. 입력 칸과 떨어지면 무엇에 대한 말인지 알 수 없다. */
.ct-plate {
  padding: var(--jsini-sp-sm) var(--jsini-sp-md);
  border-left: 3px solid var(--jsini-border);
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface-2);
  font-size: var(--jsini-fs-sm);
}

.ct-plate--ok { border-left-color: var(--jsini-success); }

/* 읽기는 했는데 사업용이 아니거나 화물차가 아닐 때. 막지는 않는다 — 실제 감면은 도로공사가 정하고 예외가 있다. */
.ct-plate--warn { border-left-color: var(--jsini-warning); }

.ct-plate--idle { color: var(--jsini-text-dim); }

/* 목록에서는 번호 아래 작게 붙인다. */
.ct-veh-plate {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ct-veh-plate-read {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-dim);
}

/* ── 나의 차량등록 ───────────────────────────────────────── */

/* 차 한 대가 카드 한 장이다. 폭에 따라 다른 물건이 되지 않게 표를 쓰지 않고, 좁으면 한 줄에 하나로 쌓는다. */
/* minmax 아래끝의 min() — 280px 로 적으면 320px 화면에서 패딩과 합쳐 넘쳐 옆으로 굴러야 한다. */
.ct-veh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--jsini-sp-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-veh-card {
  display: flex;
  flex-direction: column;
  padding: var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
  background: var(--jsini-surface);
  box-shadow: var(--jsini-shadow-card);
}

.ct-veh-card-head {
  display: flex;
  align-items: center;
  gap: var(--jsini-sp-sm);
}

.ct-veh-card-head strong {
  font-size: var(--jsini-fs-lg);
}

.ct-veh-card-nick {
  margin-top: 2px;
  color: var(--jsini-text-dim);
}

/* 표 칸으로 흩어져 있던 값을 여기로 접어 넣는다. 좁아지면 줄을 바꿔 담고 옆으로 흐르지 않는다. */
.ct-veh-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jsini-sp-xs) var(--jsini-sp-md);
  margin-top: var(--jsini-sp-sm);
  font-size: var(--jsini-fs-sm);
}

.ct-veh-card-plate {
  margin-top: var(--jsini-sp-xs);
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-dim);
}

.ct-veh-card-memo {
  margin-top: var(--jsini-sp-xs);
  font-size: var(--jsini-fs-sm);
  color: var(--jsini-text-dim);
}

/* 단추는 카드 맨 아래에 붙는다 — 줄 수가 달라도 단추 줄은 나란히 선다(margin-top: auto). */
.ct-veh-card-actions {
  display: flex;
  gap: var(--jsini-sp-sm);
  margin-top: auto;
  padding-top: var(--jsini-sp-md);
}

/* 손가락으로 눌러도 되는 높이를 데스크톱에서 굳이 줄이지 않는다. */
.ct-veh-card-actions > * {
  flex: 1 1 0;
  min-height: 44px;
}

/* 머리줄 — 왼쪽에 대수, 오른쪽에 등록. 좁아지면 단추가 폭을 꽉 채운다. */
.ct-myveh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jsini-sp-md);
  flex-wrap: wrap;
}

.ct-myveh-count {
  color: var(--jsini-text-dim);
}

.ct-myveh-add {
  min-height: 44px;
}

@media (max-width: 767px) {
  .ct-myveh-top {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ct-myveh-add {
    width: 100%;
  }
}

/* 칩 아래 한 줄짜리 설명. 칩 이름을 짧게 하고 내려 보낸 자리다. */
.ct-note {
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-dim);
}

/* 시·분 고르개. input type=time 은 브라우저 말로 표시가 정해져 24시로 못 박을 수 없어 대신 쓴다. */
.ct-hm {
  display: flex;
  gap: var(--jsini-sp-sm);
  flex: 1 1 10rem;
}

.ct-input--hm {
  flex: 1 1 0;
  min-width: 0;
}

/* 날짜 칸과 앞뒤 화살표. 달력을 열지 않고 하루씩 옮긴다. */
.ct-date {
  display: flex;
  gap: var(--jsini-sp-xs);
  flex: 1 1 14rem;
  min-width: 0;
}

.ct-input--date {
  flex: 1 1 0;
  min-width: 0;
}

/* 화살표는 손가락 크기를 지키되 폭은 좁게 — 가운데 날짜 칸이 가장 넓어야 한다. */
.ct-step {
  flex: 0 0 auto;
  width: 36px;
  min-height: 44px;
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
  background: var(--jsini-surface);
  color: var(--jsini-text);
  font-size: var(--jsini-fs-lg);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

.ct-step:hover {
  border-color: var(--jsini-accent);
}

/* ── 이 차가 받을 수 있나 ─────────────────────────────────── */

/* 할인율 바로 아래 한 줄. 누르면 대상 조건 목록이 펴진다. 할인율과 다른 물음이다 — 할인율은 야간 이용비율로만 정해진다. */
.ct-verdict {
  display: flex;
  align-items: center;
  gap: var(--jsini-sp-sm);
  width: 100%;
  margin-top: var(--jsini-sp-sm);
  padding: var(--jsini-sp-sm) var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-left-width: 3px;
  border-radius: var(--jsini-radius-sm);
  background: var(--jsini-surface-2);
  color: var(--jsini-text);
  font-size: var(--jsini-fs-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* 색만으로 가르지 않는다 — 표시(O·!·X)가 색을 못 가리는 사람에게 같은 말을 한다. */
.ct-verdict-mark {
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
}

.ct-verdict--ok { border-left-color: var(--jsini-success); }
.ct-verdict--ok .ct-verdict-mark { background: var(--jsini-success); color: #fff; }

.ct-verdict--check { border-left-color: var(--jsini-warning); }
.ct-verdict--check .ct-verdict-mark { background: var(--jsini-warning); color: #fff; }

.ct-verdict--no { border-left-color: var(--jsini-danger); }
.ct-verdict--no .ct-verdict-mark { background: var(--jsini-danger); color: #fff; }

/* ── 구간 통행료 ──────────────────────────────────────────── */

.ct-plaza {
  flex: 1 1 10rem;
  min-width: 0;
}

/* 할인율 아래 한 칸. 비율만 보면 그 운행에서 실제로 얼마가 남는지 셈을 또 해야 하므로 「얼마에서 얼마로」를 한 줄에 둔다. */
.ct-fare {
  margin-top: var(--jsini-sp-sm);
  padding: var(--jsini-sp-md);
  border: 1px solid var(--jsini-border);
  border-radius: var(--jsini-radius-md);
  background: var(--jsini-surface-2);
}

.ct-fare-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--jsini-sp-xs) var(--jsini-sp-md);
  font-size: var(--jsini-fs-sm);
}

.ct-fare-route { font-weight: 600; }
.ct-fare-dist { color: var(--jsini-text-dim); }

.ct-fare-money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--jsini-sp-sm);
  margin-top: var(--jsini-sp-xs);
}

/* 깎이기 전 값은 **지우지 않고 줄만 긋는다** — 지우면 얼마에서 깎였는지가 사라진다. */
.ct-fare-before {
  color: var(--jsini-text-dim);
  text-decoration: line-through;
}

.ct-fare-arrow { color: var(--jsini-text-dim); }

.ct-fare-after {
  font-size: var(--jsini-fs-xl);
  font-weight: 700;
  color: var(--jsini-accent);
}

.ct-fare-saved {
  padding: 2px var(--jsini-sp-sm);
  border-radius: 999px;
  background: var(--jsini-success);
  color: #fff;
  font-size: var(--jsini-fs-xs);
  font-weight: 600;
}

.ct-fare-note {
  margin-top: var(--jsini-sp-xs);
  font-size: var(--jsini-fs-xs);
  color: var(--jsini-text-dim);
}