/* ==========================================================================
   Toshin-BUS Customer Portal — Design Tokens + Components
   Reference: docs/design_handoff_customer_portal/README.md
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color — Primary */
  --c-primary: #DA5A47;
  --c-primary-dark: #C2452F;
  --c-primary-shadow: rgba(218, 90, 71, 0.5);

  /* Color — Success */
  --c-success: #1DAB39;
  --c-success-dark: #1F8A36;
  --c-success-light: #F0FAEF;
  --c-success-badge: #E4F4E2;
  --c-success-shadow: rgba(29, 171, 57, 0.55);
  /* 注意（入力中の座席不足）とエラー（送信不可）。ブランド色の赤橙と区別する */
  --c-warn: #B45309;
  --c-error: #B42318;
  --c-error-bg: #FEF3F2;

  /* Color — Neutral */
  --c-ink: #2A2320;
  --c-sub: #8A7E76;
  --c-sub-light: #9E938B;
  --c-muted: #B8ABA1;
  --c-bg: #FCF7F3;
  --c-card: #FFFFFF;

  /* Color — Accent / Decorative */
  --c-accent-bg: #FBEDE7;
  --c-toggle-bg: #F4E9E3;
  --c-border: #EFE4DD;
  --c-border-dark: #E2D6CC;
  --c-border-cb: #D8C8BD;
  --c-timeline: #EBDFD6;
  --c-hero-sub: #FBE6E0;

  /* Typography */
  --font-heading: 'Zen Maru Gothic', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;

  /* Radius */
  --r-card: 16px;
  --r-card-lg: 18px;
  --r-input: 11px;
  --r-btn: 13px;
  --r-badge: 20px;
  --r-cb: 5px;
  --r-price: 18px;

  /* Shadow */
  --shadow-cta: 0 8px 18px -8px var(--c-primary-shadow);
  --shadow-success: 0 10px 22px -8px var(--c-success-shadow);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  min-height: 100dvh;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); }

img { display: block; max-width: 100%; height: auto; }

/* ---------- Page Layout ---------- */
.page {
  max-width: 400px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-body {
  flex: 1;
  padding: 0 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.page-body--wide {
  padding: 0 16px 8px;
}

/* ---------- Header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px 14px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo {
  height: 26px;
  flex-shrink: 0;
}

.header-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-ink);
  letter-spacing: 1px;
}

.header-action {
  font-size: 12px;
  color: var(--c-sub);
}

/* 右上のリンクが2つ以上ある時（Issue #238） */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 右上の移動リンクをボタンとして目立たせる */
.header-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  background: var(--c-card);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.header-action-btn:hover {
  background: var(--c-primary);
  color: #fff;
}

.header-back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 12px;
}

.header-back-arrow {
  font-size: 20px;
  color: var(--c-sub-light);
  cursor: pointer;
  text-decoration: none;
}

.header-back-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-ink);
}

.header-quote {
  padding: 10px 22px 14px;
}

.header-quote-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-quote-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-ink);
}

.header-quote-sub {
  font-size: 12px;
  color: var(--c-sub-light);
  margin-top: 6px;
}

/* ---------- Badge ---------- */
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: var(--r-badge);
}

.badge--success {
  background: var(--c-success-badge);
  color: var(--c-success-dark);
}

/* ---------- Hero (Top Page) ---------- */
.hero {
  position: relative;
  height: 240px;
  background: repeating-linear-gradient(135deg, #F2E8E2, #F2E8E2 12px, #E8DAD2 12px, #E8DAD2 24px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero-placeholder {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--c-muted);
  white-space: nowrap;
}

.hero-overlay {
  position: relative;
  width: 100%;
  padding: 22px 22px 24px;
  background: linear-gradient(to top, rgba(43, 38, 34, 0.72), rgba(43, 38, 34, 0));
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.5;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.hero-sub {
  font-size: 12px;
  color: var(--c-hero-sub);
  margin-top: 8px;
  line-height: 1.7;
}

/* ---------- Progress Bar ---------- */
.progress {
  padding: 0 22px 16px;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-segment {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--c-timeline);
}

.progress-segment--active {
  background: var(--c-primary);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
}

.progress-label {
  color: var(--c-muted);
}

.progress-label--active {
  color: var(--c-primary);
  font-weight: 700;
}

/* ---------- Form ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-field {}

.form-label {
  font-weight: 500;
  font-size: 12px;
  color: var(--c-sub);
  margin-bottom: 6px;
}

.form-required {
  color: var(--c-primary);
}

.form-optional {
  color: var(--c-muted);
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-ink);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-input);
  padding: 12px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--c-primary);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--c-sub-light);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23B8ABA1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-textarea {
  min-height: 64px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.7;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row > * {
  flex: 1;
}

.form-section-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--c-ink);
  margin-bottom: 10px;
}

.form-divider {
  border-top: 1px solid var(--c-border);
  padding-top: 16px;
}

/* ---------- Toggle (往復/片道) ---------- */
.toggle {
  display: flex;
  background: var(--c-toggle-bg);
  border-radius: var(--r-input);
  padding: 4px;
}

.toggle-option {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--c-sub-light);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.toggle-option.is-active,
.toggle input:checked + .toggle-option {
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
}

.toggle input {
  display: none;
}

/* ---------- 再見積りフォーム: 変更項目 ---------- */
/* チェックした項目は見出しと入力欄を1枚のカードにまとめ、次の項目と区別する */
.requote-item {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-input);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.requote-item.is-open {
  border: 1.5px solid var(--c-primary);
}

.requote-item .requote-item-head {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.requote-item.is-open .requote-item-head {
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}

.requote-fields {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 14px 14px 4px 18px;
  background: var(--c-accent-bg);
}

/* ---------- Checkbox ---------- */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-input);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.checkbox.is-checked,
.checkbox:has(input:checked) {
  border-color: var(--c-primary);
}

.checkbox input {
  display: none;
}

.checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: var(--r-cb);
  border: 1.5px solid var(--c-border-cb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.checkbox.is-checked .checkbox-box,
.checkbox:has(input:checked) .checkbox-box {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.checkbox-check {
  display: none;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.checkbox.is-checked .checkbox-check,
.checkbox:has(input:checked) .checkbox-check {
  display: inline;
}

.checkbox-label {
  font-size: 14px;
  color: var(--c-ink);
}

.checkbox.is-checked .checkbox-label,
.checkbox:has(input:checked) .checkbox-label {
  font-weight: 600;
}

/* Inline checkbox (not in a card) */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-inline input { display: none; }

.checkbox-inline-box {
  width: 18px;
  height: 18px;
  border-radius: var(--r-cb);
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.checkbox-inline:has(input:checked) .checkbox-inline-box {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.checkbox-inline-label {
  font-size: 13px;
  color: var(--c-ink);
}

/* ---------- Radio ---------- */
.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-input);
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.radio.is-selected,
.radio:has(input:checked) {
  border: 1.5px solid var(--c-primary);
}

.radio input {
  display: none;
}

.radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border-cb);
  flex-shrink: 0;
  transition: border-color 0.15s, border-width 0.15s;
}

.radio.is-selected .radio-dot,
.radio:has(input:checked) .radio-dot {
  border: 5px solid var(--c-primary);
}

.radio-label {
  font-size: 14px;
  color: #79706A;
}

.radio.is-selected .radio-label,
.radio:has(input:checked) .radio-label {
  color: var(--c-ink);
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--r-btn);
  padding: 16px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn--primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover {
  background: var(--c-primary-dark);
  color: #fff;
}

.btn--primary-lg {
  padding: 17px;
}

.btn--secondary {
  background: var(--c-card);
  color: var(--c-sub);
  border: 1px solid var(--c-border-dark);
  font-weight: 600;
  font-size: 14px;
}

.btn--outline-primary {
  background: var(--c-card);
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
}

.btn + .btn {
  margin-top: 10px;
}

.btn-back {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--c-sub-light);
  cursor: pointer;
}

.btn-back a {
  color: var(--c-sub-light);
}

/* ---------- Cards ---------- */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 18px;
}

.card--lg {
  border-radius: var(--r-card-lg);
}

.card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-ink);
  margin-bottom: 12px;
}

/* Receipt number card */
.card--receipt {
  padding: 22px;
  text-align: center;
  margin: 8px 22px 0;
}

.receipt-label {
  font-size: 12px;
  color: var(--c-sub-light);
  margin-bottom: 6px;
}

.receipt-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--c-primary);
  letter-spacing: 2px;
}

.receipt-number--sm {
  font-size: 22px;
  letter-spacing: 1.5px;
}

/* Price card */
.card--price {
  background: var(--c-primary);
  border-radius: var(--r-price);
  padding: 22px;
  color: #fff;
  margin: 0 16px 14px;
  border: none;
}

.card--price .price-label {
  font-size: 12px;
  color: #F3E7DF;
  margin-bottom: 6px;
}

.card--price .price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.5px;
}

.card--price .price-breakdown {
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.card--price .price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--c-accent-bg);
}

.card--price .price-expiry {
  margin-top: 14px;
  font-size: 11px;
  color: #E8DAD0;
}

/* Dark card (当日のご案内) */
.card--dark {
  background: var(--c-ink);
  border-radius: var(--r-card);
  padding: 20px;
  color: #fff;
  border: none;
}

.card--dark .card-title {
  color: #fff;
  margin-bottom: 14px;
}

.card--dark .info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.card--dark .info-row + .info-row {
  margin-top: 10px;
}

.card--dark .info-label {
  color: #E8DAD0;
}

/* Vehicle card */
.card--vehicle {
  margin: 0 16px 14px;
}

.vehicle-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vehicle-badge {
  min-width: 46px;
  height: 46px;
  padding: 0 8px;
  border-radius: var(--r-input);
  background: var(--c-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--c-primary-dark);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.vehicle-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--c-ink);
}

.vehicle-detail {
  font-size: 12px;
  color: var(--c-sub);
}
.vehicle-detail--changed {
  color: #e67e22;
  margin-top: 2px;
}
.vehicle-row + .vehicle-row { margin-top: 10px; }
.card--vehicle > .vehicle-detail { margin-top: 10px; }
.card--vehicle > .vehicle-detail--changed { margin-top: 2px; }

/* Suggestion box */
.suggestion-box {
  background: var(--c-accent-bg);
  border-radius: 12px;
  padding: 14px;
}

.suggestion-box .form-label {
  margin-bottom: 6px;
}

.suggestion-note {
  font-size: 11px;
  color: var(--c-primary-dark);
  margin-top: 8px;
  line-height: 1.6;
}

/* 車種×台数の入力欄（Issue #121） */
.vehicle-lines .vl-flexible { margin-bottom: 10px; }
.vl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.vl-row .vl-type { flex: 1; min-width: 0; font-weight: 700; }
.vl-row .vl-count { flex: 0 0 64px; width: 64px; text-align: right; padding-left: 8px; padding-right: 8px; }
.vl-times, .vl-unit { font-size: 13px; color: var(--c-sub); flex-shrink: 0; }
.vl-remove {
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid var(--c-border-dark);
  border-radius: 50%;
  background: var(--c-card);
  color: var(--c-sub);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.vl-remove:disabled, .vl-add:disabled { opacity: 0.4; cursor: default; }
.vehicle-lines :disabled.vl-type, .vehicle-lines :disabled.vl-count { opacity: 0.5; }
.vl-add {
  border: 1px dashed var(--c-primary);
  background: transparent;
  color: var(--c-primary-dark);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.vl-summary { font-size: 12px; margin-top: 8px; line-height: 1.6; }
.vl-summary.is-ok { color: var(--c-success-dark); }
/* 入力中の座席不足は注意（琥珀色）、送信しようとして止めたときはエラー（赤枠）に切り替える */
.vl-summary.is-short {
  background: #FFF4E5;
  border: 1px solid #F5B54A;
  border-left: 4px solid var(--c-warn);
  border-radius: 8px;
  padding: 10px 12px;
  color: #92400E;
  font-size: 13px;
  font-weight: 700;
}
.vl-summary.is-short::before { content: '⚠ '; }
.vl-summary.is-error {
  background: #FFF4E5;
  border: 1px solid var(--c-error);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--c-error);
  font-size: 13px;
}
.vl-summary.is-error .vl-error-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.vehicle-lines.is-error .vl-type,
.vehicle-lines.is-error .vl-count { border-color: var(--c-error); }
.vl-submit-error {
  background: var(--c-error-bg);
  color: var(--c-error);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
/* 希望車種の「おすすめ／ご指定」 */
.vl-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}
.vl-badge--suggested { background: var(--c-success-badge); color: var(--c-success-dark); }
.vl-badge--custom { background: var(--c-ink); color: #fff; }
.vl-restore {
  margin-left: 6px;
  border: 1px solid var(--c-primary);
  background: var(--c-card);
  color: var(--c-primary-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Note box */
.note-box {
  background: var(--c-accent-bg);
  border-radius: 14px;
  padding: 18px;
}

.note-box p {
  font-size: 13px;
  color: #79706A;
  line-height: 1.9;
}

/* Reservation summary */
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.summary-row + .summary-row {
  margin-top: 9px;
}

.summary-label {
  color: var(--c-sub-light);
}

.summary-value {
  color: var(--c-ink);
  font-weight: 500;
}

.summary-divider {
  border-top: 1px solid var(--c-border);
  padding-top: 9px;
  margin-top: 2px;
}

.summary-total {
  color: var(--c-primary);
  font-weight: 700;
  font-size: 16px;
}

/* ---------- Inclusions ---------- */
.inclusions {
  display: flex;
  gap: 12px;
  margin: 0 16px 14px;
}

.inclusion-card {
  flex: 1;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 15px;
}

.inclusion-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.inclusion-title--yes {
  color: var(--c-success-dark);
}

.inclusion-title--no {
  color: var(--c-primary-dark);
}

.inclusion-list {
  font-size: 11px;
  color: #79706A;
  line-height: 1.9;
}

/* ---------- Cancel Policy ---------- */
.cancel-policy {
  background: var(--c-accent-bg);
  border-radius: 14px;
  padding: 16px;
}

.cancel-policy--margin {
  margin: 0 16px 16px;
}

.cancel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 10px;
}

.cancel-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #79706A;
}

.cancel-row + .cancel-row {
  margin-top: 5px;
}

.cancel-inline {
  font-size: 11px;
  color: #79706A;
  line-height: 1.9;
}

.cancel-foot {
  font-size: 11px;
  color: var(--c-sub);
  line-height: 1.7;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-border-cb);
}

.cancel-foot-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-primary);
}

.cancel-foot-link::after {
  content: " ›";
}

/* ---------- Terms ---------- */
.terms-hero {
  padding: 8px 22px 18px;
}

.terms-heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-ink);
  margin: 0;
}

.terms-section {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  margin: 0 16px 14px;
  padding: 20px 18px;
}

.terms-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.terms-section-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}

.terms-section-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-primary-dark);
  background: var(--c-accent-bg);
  border-radius: var(--r-badge);
  padding: 3px 10px;
  white-space: nowrap;
}

.terms-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.terms-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--c-border);
}

.terms-tier:last-child {
  border-bottom: 0;
}

.terms-tier-period {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

.terms-tier-period small {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-sub);
  margin-right: 4px;
}

.terms-tier-fee {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.terms-tier-fee small {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--c-sub);
  margin-right: 4px;
}

.terms-tier-free {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-success-dark);
  background: var(--c-success-badge);
  border-radius: var(--r-badge);
  padding: 3px 12px;
}

.terms-notes {
  background: var(--c-bg);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
}

.terms-notes p {
  position: relative;
  padding-left: 1.2em;
  font-size: 12px;
  color: var(--c-sub);
  line-height: 1.75;
  margin: 0;
}

.terms-notes p + p {
  margin-top: 4px;
}

.terms-notes p::before {
  content: "※";
  position: absolute;
  left: 0;
}

.terms-pending {
  font-size: 13px;
  color: var(--c-sub);
  margin: 0;
}

/* ---------- Timeline ---------- */
.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  gap: 12px;
}

.timeline-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.timeline-dot--start,
.timeline-dot--major {
  background: var(--c-primary);
}

.timeline-dot--mid {
  border: 2px solid var(--c-border-cb);
  background: var(--c-card);
}

.timeline-dot--end {
  background: var(--c-ink);
}

.timeline-line {
  width: 2px;
  flex: 1;
  background: var(--c-timeline);
}

.timeline-content {
  padding-bottom: 16px;
}

.timeline-item:last-child .timeline-content {
  padding-bottom: 0;
}

.timeline-text {
  font-weight: 700;
  font-size: 13px;
  color: var(--c-ink);
}

.timeline-text--light {
  font-weight: 500;
  color: #79706A;
}

.timeline-sub {
  font-size: 11px;
  color: var(--c-sub-light);
  margin-top: 2px;
}

/* ---------- Features (Top Page) ---------- */
.features {
  padding: 18px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feature-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--c-primary);
  line-height: 1.4;
  min-width: 24px;
}

.feature-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
}

.feature-desc {
  font-size: 12px;
  color: var(--c-sub);
  line-height: 1.7;
  margin-top: 2px;
}

/* ---------- Flow (ご利用の流れ) ---------- */
.flow-card {
  margin: 20px 16px;
  padding: 18px;
  background: var(--c-accent-bg);
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
}

.flow-card-logo {
  position: absolute;
  right: -14px;
  bottom: -12px;
  height: 88px;
  opacity: 0.14;
}

.flow-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-ink);
  margin-bottom: 14px;
}

.flow-steps {
  display: flex;
  justify-content: space-between;
}

.flow-step {
  text-align: center;
  flex: 1;
}

.flow-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-card);
  border: 1.5px solid var(--c-border-cb);
  color: var(--c-sub-light);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
}

.flow-circle--active {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.flow-label {
  font-size: 10px;
  color: #79706A;
}

/* ---------- CTA Area ---------- */
.cta-area {
  padding: 20px 22px 8px;
}

.cta-sticky {
  padding: 18px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--c-bg) 70%, rgba(248, 244, 237, 0));
  z-index: 10;
}

.cta-sticky--tall {
  padding: 6px 18px 26px;
  background: linear-gradient(to top, var(--c-bg) 75%, rgba(248, 244, 237, 0));
}

.cta-bottom {
  padding: 6px 18px 26px;
}

.cta-pad {
  padding: 20px 22px 28px;
}

/* ---------- Footer ---------- */
.footer {
  padding: 22px 22px 28px;
  text-align: center;
  border-top: 1px solid var(--c-border);
}

.footer-logo {
  height: 30px;
  margin: 0 auto 10px;
}

.footer-text {
  font-size: 11px;
  color: var(--c-sub-light);
  line-height: 1.8;
}

/* ---------- Success Icon ---------- */
.success-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.success-icon--outline {
  background: var(--c-success-light);
  border: 2px solid var(--c-success);
}

.success-icon--outline .success-check {
  font-size: 38px;
  color: var(--c-success);
  line-height: 1;
}

.success-icon--filled {
  background: var(--c-success);
  box-shadow: var(--shadow-success);
  margin-bottom: 20px;
}

.success-icon--filled .success-check {
  font-size: 38px;
  color: #fff;
  line-height: 1;
}

.success-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  color: var(--c-ink);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.success-sub {
  font-size: 13px;
  color: var(--c-sub);
  line-height: 1.9;
}

.success-section {
  padding: 40px 26px 20px;
  text-align: center;
}

.success-section--reservation {
  padding: 36px 26px 18px;
  position: relative;
  overflow: hidden;
}

.success-watermark {
  position: absolute;
  right: -8px;
  top: 8px;
  height: 62px;
  opacity: 0.13;
}

/* ---------- Agreement ---------- */
.agreement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 16px 16px;
  cursor: pointer;
}

.agreement input { display: none; }

.agreement-box {
  width: 20px;
  height: 20px;
  border-radius: var(--r-cb);
  border: 2px solid #ccc;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.agreement input:checked + .agreement-box {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

.agreement-text {
  font-size: 12px;
  color: #79706A;
  line-height: 1.7;
}

.agreement-link {
  color: var(--c-primary);
  text-decoration: underline;
}

/* ---------- Action Link ---------- */
.action-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Grid containers (mobile default) ---------- */
.options-grid,
.payment-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.mb-6 { margin-bottom: 6px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-22 { margin-left: 22px; margin-right: 22px; }
.gap-8 { gap: 8px; }
.gap-13 { gap: 13px; }
.text-center { text-align: center; }

/* ==========================================================================
   PC Responsive (≥ 640px)
   ========================================================================== */
@media (min-width: 640px) {
  body {
    background: var(--c-toggle-bg);
  }

  .page {
    max-width: 720px;
    margin: 32px auto;
    background: var(--c-bg);
    border-radius: 28px;
    border: 1px solid var(--c-border-dark);
    box-shadow: 0 18px 50px -18px rgba(70, 50, 30, 0.25);
    min-height: auto;
    overflow: hidden;
  }

  .hero {
    height: 320px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-sub {
    font-size: 14px;
  }

  /* Header */
  .header {
    padding: 14px 32px 14px;
  }

  .header-back {
    padding: 14px 28px 14px;
  }

  .header-quote {
    padding: 14px 32px 14px;
  }

  /* Page body wider padding */
  .page-body {
    padding: 0 28px 8px;
  }

  /* CTA areas */
  .cta-area {
    padding: 20px 32px 8px;
  }

  .cta-sticky {
    padding: 18px 28px;
  }

  .cta-sticky--tall {
    padding: 6px 28px 26px;
  }

  .cta-bottom {
    padding: 6px 28px 26px;
  }

  .cta-pad {
    padding: 20px 32px 28px;
  }

  /* Progress bar wider */
  .progress {
    padding: 0 32px 16px;
  }

  /* Form: 2-column layout for short fields */
  .form-row-pc {
    display: flex;
    gap: 16px;
  }

  .form-row-pc > * {
    flex: 1;
  }

  /* Features: horizontal on PC */
  .features {
    padding: 24px 32px 12px;
    flex-direction: row;
    gap: 24px;
  }

  .feature {
    flex: 1;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .feature-num {
    font-size: 22px;
  }

  /* Flow card */
  .flow-card {
    margin: 24px 24px;
    padding: 22px 28px;
  }

  /* Cards wider margin */
  .card--price {
    margin: 0 24px 16px;
  }

  .card--vehicle {
    margin: 0 24px 16px;
  }

  .card--receipt {
    margin: 8px 32px 0;
  }

  .inclusions {
    margin: 0 24px 16px;
  }

  .cancel-policy--margin {
    margin: 0 24px 16px;
  }

  .agreement {
    margin: 0 24px 16px;
  }

  /* Cards: timeline/行程 wider */
  .card--vehicle + .card,
  .card--price + .card--vehicle + .card {
    margin: 0 24px 16px;
  }

  /* Footer */
  .footer {
    padding: 28px 32px 32px;
  }

  /* Success sections */
  .success-section {
    padding: 48px 32px 24px;
  }

  .success-heading {
    font-size: 24px;
  }

  /* Note box */
  .note-box {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }

  /* Options: 2x2 grid */
  .options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Payment methods: 2x2 */
  .payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Hover effects */
  .btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px var(--c-primary-shadow);
  }

  .btn--secondary:hover {
    background: var(--c-bg);
  }

  .btn--outline-primary:hover {
    background: var(--c-accent-bg);
  }

  .form-input:hover,
  .form-select:hover,
  .form-textarea:hover {
    border-color: var(--c-border-dark);
  }

  .checkbox:hover {
    border-color: var(--c-border-dark);
  }

  .radio:hover {
    border-color: var(--c-border-dark);
  }
}

/* Wider desktop */
@media (min-width: 1024px) {
  .page {
    margin: 48px auto;
  }
}

/* ---------- Error Page ---------- */
.error-container,
.pending-container {
  padding: 48px 20px 32px;
  text-align: center;
}

.error-icon,
.pending-icon {
  margin: 0 auto 20px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-icon {
  background: var(--c-accent-bg);
}

.pending-icon {
  background: var(--c-success-light);
}

.error-title,
.pending-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 12px;
}

.error-message,
.pending-message {
  font-size: 0.95rem;
  color: var(--c-sub);
  line-height: 1.7;
  margin-bottom: 24px;
}

.error-contact,
.pending-contact {
  margin-top: 32px;
  padding: 20px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
}

.error-contact-label,
.pending-contact-label {
  font-size: 0.8rem;
  color: var(--c-sub);
  margin-bottom: 6px;
}

.error-contact-phone,
.pending-contact-phone {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
}

.error-contact-sub,
.pending-contact-sub {
  font-size: 0.8rem;
  color: var(--c-sub-light);
}

/* ---------- Pending Page ---------- */
.pending-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: left;
}

.pending-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.pending-card-row + .pending-card-row {
  border-top: 1px solid var(--c-border);
}

.pending-card-label {
  font-size: 0.85rem;
  color: var(--c-sub);
}

.pending-card-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink);
}

.pending-badge {
  background: var(--c-success-badge);
  color: var(--c-success-dark);
  padding: 2px 12px;
  border-radius: var(--r-badge);
  font-size: 0.8rem;
  font-weight: 500;
}

.pending-note {
  font-size: 0.85rem;
  color: var(--c-sub-light);
  line-height: 1.7;
}

/* ---------- Form validation ---------- */

.form-error {
  color: var(--c-primary);
  font-size: 0.8rem;
  margin-top: 4px;
}

.form-input--error {
  border-color: var(--c-primary) !important;
}

/* ---------- Confirm screen ---------- */

.confirm-section {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 18px;
  margin-bottom: 14px;
}

.confirm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.confirm-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
}

.confirm-edit {
  font-size: 0.85rem;
  color: var(--c-primary);
  text-decoration: none;
}

.confirm-table {
  width: 100%;
  border-collapse: collapse;
}

.confirm-table tr {
  border-bottom: 1px solid var(--c-border);
}

.confirm-table tr:last-child {
  border-bottom: none;
}

.confirm-label {
  font-size: 0.85rem;
  color: var(--c-sub);
  padding: 10px 0;
  width: 120px;
  vertical-align: top;
}

.confirm-value {
  font-size: 0.9rem;
  color: var(--c-ink);
  padding: 10px 0;
  font-weight: 500;
}

/* ---------- Estimate card ---------- */

.card--estimate {
  background: var(--c-card);
  border-radius: var(--r-card);
  margin: 0 18px;
  padding: 22px;
  text-align: center;
  border: 2px solid var(--c-primary);
}

.estimate-label {
  font-size: 0.85rem;
  color: var(--c-sub);
  margin-bottom: 6px;
}

.estimate-amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 10px;
}

.estimate-note {
  font-size: 0.78rem;
  color: var(--c-sub-light);
  line-height: 1.6;
}

.estimate-terms {
  margin-top: 8px;
}

/* ---------- Pricing Reference Table ---------- */

.card--pricing-ref {
  background: var(--c-card);
  border-radius: var(--r-card);
  margin: 16px 18px 0;
  padding: 22px;
}

.pricing-ref-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 12px;
  text-align: center;
}

.pricing-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.pricing-ref-table th {
  background: var(--c-bg);
  color: var(--c-sub);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

.pricing-ref-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink);
}

.pricing-ref-table tr:last-child td {
  border-bottom: none;
}

.pricing-ref-selected {
  background: rgba(var(--c-primary-rgb, 0, 102, 204), 0.08);
  font-weight: 600;
}

.pricing-ref-selected td {
  color: var(--c-primary);
}

.pricing-ref-note {
  font-size: 0.78rem;
  color: var(--c-sub-light);
  line-height: 1.6;
  margin-top: 12px;
  text-align: center;
}

/* ---------- Flow Progress Indicator ---------- */

.flow-progress {
  padding: 20px 22px 8px;
}

.flow-progress-track {
  display: flex;
  align-items: flex-start;
}

.flow-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.flow-progress-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--c-border-cb);
  background: var(--c-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
}

.flow-progress-step--active .flow-progress-circle {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-card);
}

.flow-progress-step--done .flow-progress-circle {
  border-color: var(--c-success);
  background: var(--c-success);
  color: #fff;
}

.flow-progress-label {
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
}

.flow-progress-step--active .flow-progress-label {
  color: var(--c-primary);
  font-weight: 700;
}

.flow-progress-step--done .flow-progress-label {
  color: var(--c-sub);
}

.flow-progress-line {
  flex: 1;
  height: 2px;
  background: var(--c-timeline);
  margin-top: 16px;
  min-width: 20px;
}

.flow-progress-line--done {
  background: var(--c-success);
}

/* ---------- Status Complete Variants ---------- */

.complete-status-badge {
  display: inline-block;
  padding: 3px 14px;
  border-radius: var(--r-badge);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.complete-status-badge--confirmed {
  background: var(--c-success-badge);
  color: var(--c-success-dark);
}

.complete-status-badge--completed {
  background: var(--c-accent-bg);
  color: var(--c-primary-dark);
}

.pdf-section {
  padding: 0 22px 8px;
}

.pdf-section .btn + .btn {
  margin-top: 8px;
}

/* ---------- Inquiry Form ---------- */
.inquiry-case-info,
.inquiry-contact-info {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.inquiry-contact-info {
  margin-top: 15px;
}

.inquiry-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}

.inquiry-info-row + .inquiry-info-row {
  border-top: 1px solid var(--c-border);
}

.inquiry-info-label {
  font-size: 12px;
  color: var(--c-sub);
  flex-shrink: 0;
}

.inquiry-info-value {
  font-size: 13px;
  color: var(--c-ink);
  text-align: right;
}

.inquiry-info-value--ref {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 1px;
}

.inquiry-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inquiry-submit-area {
  padding: 16px 0 24px;
}

.form-error {
  font-size: 12px;
  color: var(--c-primary-dark);
  margin-top: 4px;
}

.form-error-banner {
  background: var(--c-accent-bg);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-input);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--c-primary-dark);
  text-align: center;
}

/* ---------- Admin Messages ---------- */
.message-block {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.message-block__list {
  max-height: 300px;
  overflow-y: auto;
}
.message-block__title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.message-item {
  padding: 10px 14px;
  background: #EEF4FF;
  border-left: 3px solid #3B82F6;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}
.message-item:last-child { margin-bottom: 0; }
.message-item__time {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}
.message-item__body {
  white-space: pre-wrap;
  line-height: 1.5;
}
.message-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.message-item__who {
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.message-item__reanswer {
  margin-top: 6px;
  color: #d32f2f;
  font-weight: 600;
  font-size: 13px;
}
.message-item--admin {
  background: #EEF4FF;
  border-left-color: #3B82F6;
}
.message-item--supplier {
  background: #F0FAEF;
  border-left-color: #1DAB39;
}

/* ---------- 協力会社に見せる行程（Issue #181） ---------- */
.supplier-itin__day {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-ink);
  padding: 4px 0;
  margin: 8px 0 6px;
  border-bottom: 1px solid var(--c-border);
}
.supplier-itin__day:first-child { margin-top: 0; }
.supplier-itin__list { list-style: none; margin: 0; padding: 0; }
.supplier-itin__item { display: flex; gap: 10px; position: relative; padding-bottom: 12px; }
.supplier-itin__item:last-child { padding-bottom: 4px; }
.supplier-itin__time {
  width: 42px; flex-shrink: 0; text-align: right;
  font-size: 12px; font-weight: 700; color: var(--c-ink); padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.supplier-itin__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: var(--c-card, #fff); border: 2px solid var(--c-sub-light);
}
.supplier-itin__item--departure .supplier-itin__dot,
.supplier-itin__item--return .supplier-itin__dot { background: var(--c-primary); border-color: var(--c-primary); }
.supplier-itin__item--arrival .supplier-itin__dot { border-color: var(--c-primary); }
.supplier-itin__item::after {
  content: ""; position: absolute; left: 57px; top: 15px; bottom: -1px;
  width: 2px; background: var(--c-border-dark);
}
.supplier-itin__item:last-child::after { display: none; }
.supplier-itin__body { flex: 1; min-width: 0; }
.supplier-itin__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.supplier-itin__type { font-size: 11px; color: var(--c-sub); }
.supplier-itin__place { color: var(--c-ink); font-weight: 600; }
.supplier-itin__sub { font-size: 11.5px; color: var(--c-sub); margin-top: 2px; }
.supplier-itin__note { white-space: pre-wrap; }
.supplier-itin__empty { font-size: 12px; color: var(--c-sub); padding: 8px 0; }

/* ---------- 予約確定後のキャンセル（Issue #186） ---------- */
.cancel-entry {
  margin: 56px 22px 28px;
}

.btn--cancel {
  background: #ECE9E6;
  color: var(--c-ink);
  border: 1px solid #DDD7D1;
  font-size: 14px;
  padding: 15px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.btn--cancel:hover {
  background: #DFD9D3;
  border-color: #CDC5BD;
  color: var(--c-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(42, 35, 32, 0.35);
}

.btn--cancel:active {
  background: #D5CEC7;
  transform: translateY(0);
  box-shadow: none;
}

.cancel-entry-note {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--c-accent-bg);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-warn);
}

.agreement--cancel {
  margin: 20px 0 0;
}

/* ---------- 行程表の添付（Issue #180） ---------- */
.attachment-optional {
  margin-left: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-sub);
}

.attachment-note {
  font-size: 0.8rem;
  color: var(--c-sub);
  line-height: 1.7;
  margin: 0 0 12px;
}

.attachment-errors {
  text-align: left;
  margin-bottom: 12px;
}

.attach-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-sub);
}

/* 選んだファイルの一覧。名前を押すと中身を確認でき、× で外せる */
.attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attach-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--c-border-dark);
  border-radius: var(--r-input);
  background: var(--c-card);
}

.attach-item--error {
  border-color: var(--c-error);
  background: var(--c-error-bg);
}

.attach-kind {
  flex-shrink: 0;
  min-width: 46px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.attach-kind--pdf { background: #C2452F; }
.attach-kind--excel { background: #1F8A36; }
.attach-kind--image { background: #2F6FB0; }
.attach-kind--other { background: var(--c-muted); }

.attach-body {
  flex: 1;
  min-width: 0;
}

.attach-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-border-cb);
  text-underline-offset: 3px;
}

.attach-name:hover {
  color: var(--c-primary);
  text-decoration-color: var(--c-primary);
}

.attach-meta {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--c-sub);
}

.attach-item--error .attach-meta {
  color: var(--c-error);
  font-weight: 600;
}

.attach-remove {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--c-toggle-bg);
  color: var(--c-sub);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.attach-remove:hover {
  background: var(--c-accent-bg);
  color: var(--c-primary-dark);
}

/* 追加の入口。ドラッグ＆ドロップも受ける */
.attach-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 1.5px dashed var(--c-border-cb);
  border-radius: var(--r-input);
  background: var(--c-bg);
  text-align: center;
}

.attach-drop[hidden] {
  display: none;
}

.attach-drop--over {
  border-color: var(--c-primary);
  background: var(--c-accent-bg);
}

/* 見た目はラベルのボタンで出し、input 自体は隠す（キーボード操作は残す） */
.attach-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.attach-pick {
  display: inline-block;
  padding: 9px 18px;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-btn);
  background: var(--c-card);
  color: var(--c-primary);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.attach-pick:hover {
  background: var(--c-accent-bg);
}

.attach-input:focus-visible + .attach-pick {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.attach-drop-hint {
  font-size: 0.75rem;
  color: var(--c-sub-light);
}

.attach-limit {
  margin: 10px 0 0;
}

/* 添付に不備があるときは確定ボタンを押せない見た目にする */
#quote-submit:disabled {
  opacity: 0.45;
  background: var(--c-primary);
  box-shadow: none;
  cursor: not-allowed;
}

/* 1ステップ目の案内（行程表は最後の確認画面で添付できる） */
.attach-step1-hint {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-input);
  background: var(--c-accent-bg);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--c-ink);
}

/* 完了画面: 添付したファイルを行ごと押して開ける */
.attach-done-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--c-border-dark);
  margin-bottom: 10px;
}

.attach-done-list {
  text-align: left;
}

.attach-done-list li:last-child .attach-item {
  margin-bottom: 0;
}

.attach-done-item {
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}

.attach-done-item:hover {
  border-color: var(--c-primary);
  background: #FDF5F3;
}

.attach-done-item:hover .attach-name {
  color: var(--c-primary);
  text-decoration-color: var(--c-primary);
}

.attach-done-item .attach-meta {
  display: block;
}

.attach-done-action {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--c-border-dark);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--c-ink);
  white-space: nowrap;
}

.attach-done-item:hover .attach-done-action {
  border-color: var(--c-primary);
  color: var(--c-primary);
}