:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --line: #d6e6df;
  --text: #10342b;
  --muted: #4f6f64;
  --primary: #0da57b;
  --primary-strong: #0b8d69;
  --danger: #b91c1c;
  --ok: #047857;
}

/* ==========================================================================
   Tactical Industrialism Refresh (2026-04-05)
   ========================================================================== */

:root {
  --tactical-paper: #feffd6;
  --tactical-paper-soft: #fffdf2;
  --tactical-paper-strong: #fff6d8;
  --tactical-ink: #383832;
  --tactical-muted: #6a6657;
  --tactical-yellow: #fec700;
  --tactical-yellow-deep: #7d6100;
  --tactical-dark: #3f4036;
  --tactical-dark-2: #2e2f28;
  --tactical-line: 2px solid var(--tactical-ink);
  --tactical-radius: 4px;
  --tactical-shadow: 4px 4px 0 rgba(56, 56, 50, 0.92);
  --tactical-shadow-soft: 3px 3px 0 rgba(56, 56, 50, 0.84);
  --zenith-bg: var(--tactical-paper);
  --zenith-paper: var(--tactical-paper-soft);
  --zenith-paper-2: var(--tactical-paper-strong);
  --zenith-ink: var(--tactical-ink);
  --zenith-ink-soft: var(--tactical-muted);
  --zenith-yellow: var(--tactical-yellow);
  --zenith-yellow-deep: var(--tactical-yellow-deep);
  --zenith-radius: var(--tactical-radius);
  --zenith-shadow: var(--tactical-shadow);
  --zenith-shadow-soft: var(--tactical-shadow-soft);
}

html {
  background: var(--tactical-paper);
}

body {
  background:
    linear-gradient(180deg, rgba(254, 199, 0, 0.08) 0%, rgba(254, 255, 214, 1) 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 32%),
    var(--tactical-paper);
  color: var(--tactical-ink);
}

body,
input,
textarea,
select,
button {
  color: var(--tactical-ink);
}

button,
.button-link {
  border-radius: var(--tactical-radius) !important;
  box-shadow: var(--tactical-shadow), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

button.secondary,
.button-link.secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  color: var(--tactical-ink) !important;
}

button.danger,
.button-link.danger {
  background: linear-gradient(180deg, #ffd8bf 0%, #f3ae83 100%) !important;
  color: var(--tactical-ink) !important;
}

input,
textarea,
select {
  border-radius: var(--tactical-radius);
}

label {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.45;
}

body:not(.liff-body) .card,
.liff-body .card {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, var(--tactical-paper-soft) 0%, var(--tactical-paper-strong) 100%);
  box-shadow: var(--tactical-shadow-soft);
}

.section-head {
  align-items: center;
  gap: 12px;
}

.section-head h2,
.section-head h3,
.mypage-route-title,
.booking-step-title,
.booking-step-copy h4,
.admin-brand h1,
.admin-auth-card h2,
.dashboard-panel h3,
.dashboard-panel h4,
.home-stat-value,
.home-primary-action-title,
.coupon-title,
.digital-member-card-head strong,
.point-balance-card .point-card-content strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.mypage-route-title,
.booking-step-title,
.booking-step-copy h4,
.point-balance-card .point-card-content strong,
.coupon-title {
  line-height: 1;
}

.status {
  border-radius: var(--tactical-radius);
  box-shadow: var(--tactical-shadow-soft);
}

.table-action-btn,
.mypage-back-btn,
.booking-history-refresh-btn,
.booking-history-filter-btn,
#refreshCouponsBtn,
#refreshServiceHistoryBtn,
#refreshMemberCardBtn {
  min-height: 42px;
  padding: 0 14px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.liff-body .liff-container {
  max-width: min(460px, calc(100vw - 12px));
  padding-inline: 0;
}

#myPageView {
  --mypage-surface: var(--tactical-paper-soft);
  --mypage-surface-soft: #fffef7;
  --mypage-surface-soft-2: var(--tactical-paper-strong);
  --mypage-line: var(--tactical-ink);
  --mypage-line-strong: var(--tactical-ink);
  --mypage-text: var(--tactical-ink);
  --mypage-muted: var(--tactical-muted);
  --mypage-shadow: var(--tactical-shadow);
  --mypage-shadow-soft: var(--tactical-shadow-soft);
  border-radius: 0 !important;
  border-left: 0;
  border-right: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 84px;
}

#myPageView #tab-profile.active,
#myPageView .mypage-route-page,
#myPageView .mypage-module,
#myPageView .profile-form-paged {
  gap: 14px;
}

#myPageView .mypage-route-page {
  padding: 2px 0 0;
}

#myPageView .mypage-route-head {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .mypage-route-meta {
  gap: 4px;
}

#myPageView .mypage-route-title {
  font-size: clamp(1.64rem, 7vw, 2.16rem);
}

#myPageView .mypage-route-subtitle {
  max-width: 34ch;
  color: var(--tactical-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

#myPageView .mypage-module,
#myPageView .profile-block,
#myPageView .booking-route-panel .calendar-module,
#myPageView .booking-submit-preview,
#myPageView .booking-choice-field,
#myPageView .booking-vehicle-preset,
#myPageView .point-history-details,
#myPageView .point-rank-progress-panel,
#myPageView .checkin-action-panel,
#myPageView .coupon-active-panel,
#myPageView .coupon-item,
#myPageView .service-history-summary,
#myPageView .service-history-item,
#myPageView .digital-member-card,
#myPageView .profile-danger-zone,
#myPageView .profile-form-paged .vehicle-editor-card,
#myPageView .profile-form-paged .vehicle-editor-panel,
#myPageView .profile-form-paged .vehicle-editor-grid,
#myPageView .perk-roadmap-panel,
#myPageView .perk-item,
#myPageView .registration-preview-block,
#myPageView .registration-help-banner,
#myPageView .plate-editor,
#myPageView .registration-detail-card,
#myPageView .registration-review-card {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, var(--tactical-paper-soft) 0%, var(--tactical-paper-strong) 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .mypage-route-footer {
  padding-top: 4px;
}

#myPageView .mypage-back-btn {
  width: 100%;
  min-height: 52px;
}

#myPageView:not(.route-detail-mode) .mypage-home-shell {
  gap: 16px;
  margin-bottom: 12px;
}

#myPageView:not(.route-detail-mode) .mypage-home-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 0 0;
}

#myPageView:not(.route-detail-mode) .mypage-home-brand {
  gap: 2px;
}

#myPageView:not(.route-detail-mode) .mypage-home-brand-title {
  font-size: clamp(1.1rem, 5vw, 1.36rem);
  letter-spacing: -0.02em;
}

#myPageView:not(.route-detail-mode) .mypage-home-brand-sub {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--tactical-muted);
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-btn {
  min-height: 48px;
  padding: 10px 12px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e7 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-inline {
  gap: 0.12em;
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-salute,
#myPageView:not(.route-detail-mode) .mypage-home-greeting-honorific {
  font-size: 0.6rem;
  color: var(--tactical-muted);
  letter-spacing: 0.06em;
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-name {
  font-size: 0.98rem;
  color: var(--tactical-ink);
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded {
  gap: 12px;
  padding: 14px !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff7df 100%) !important;
  box-shadow: var(--tactical-shadow) !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .home-member-card-kicker,
#myPageView .digital-member-card-kicker,
#myPageView .point-card-content .meta-label,
#myPageView .point-reward-meter-kicker,
#myPageView .booking-step-kicker,
#myPageView .booking-selected-context-kicker,
#myPageView .booking-time-selector-kicker,
#myPageView .coupon-active-panel-kicker,
#myPageView .service-history-stat-label,
#myPageView .home-stat-label {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--tactical-yellow-deep);
  text-transform: uppercase;
}

#myPageView:not(.route-detail-mode) .home-member-card-copy {
  gap: 6px;
}

#myPageView:not(.route-detail-mode) .home-member-card-copy strong {
  max-width: none;
  font-size: clamp(1rem, 4.6vw, 1.18rem);
  line-height: 1.22;
}

#myPageView:not(.route-detail-mode) .home-member-card-tier-badge,
#myPageView .digital-member-card-tier-badge,
#myPageView .member-card-tier-badge {
  min-height: 38px;
  padding: 0 12px;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
  color: var(--tactical-ink) !important;
  font-size: 0.74rem;
  font-weight: 900;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap,
#myPageView .digital-member-card-body {
  position: relative;
  min-height: 232px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: #ffffff;
  padding: 14px;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap::before,
#myPageView .digital-member-card-body::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(56, 56, 50, 0.18);
  pointer-events: none;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap img,
#myPageView .digital-member-card-body img {
  position: relative;
  width: min(210px, 100%);
  z-index: 1;
}

#myPageView:not(.route-detail-mode) .member-card-code-strip,
#myPageView .digital-member-card-code-strip {
  gap: 2px;
  padding-top: 8px;
  border-top: 2px dashed rgba(56, 56, 50, 0.18);
  justify-items: center;
}

#myPageView:not(.route-detail-mode) .member-card-code-strip strong,
#myPageView .digital-member-card-code-strip strong {
  font-size: 1rem;
  letter-spacing: 0.05em;
}

#myPageView .digital-member-card {
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #fffef8 0%, #fff9e7 100%);
}

#myPageView .digital-member-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

#myPageView .digital-member-card-head strong {
  font-size: clamp(1.12rem, 4.6vw, 1.4rem);
}

#myPageView .digital-member-card-note {
  margin: 0;
  color: var(--tactical-muted);
  font-size: 0.72rem;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#myPageView:not(.route-detail-mode) .mypage-home-stats {
  gap: 8px;
}

#myPageView:not(.route-detail-mode) .home-stat-card {
  min-height: 108px;
  padding: 12px 12px 10px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d1 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
  align-content: start;
  gap: 6px;
}

#myPageView:not(.route-detail-mode) .home-stat-card::before {
  height: 0;
}

#myPageView:not(.route-detail-mode) .home-stat-value {
  font-size: clamp(1.5rem, 7vw, 2rem);
}

#myPageView:not(.route-detail-mode) .home-stat-note {
  color: var(--tactical-muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

#myPageView:not(.route-detail-mode) .mypage-home-section-label,
#myPageView:not(.route-detail-mode) .mypage-menu-caption {
  margin: 2px 0 0;
  color: var(--tactical-ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#myPageView:not(.route-detail-mode) .mypage-primary-actions,
#myPageView:not(.route-detail-mode) .mypage-menu-grid {
  gap: 10px;
}

#myPageView:not(.route-detail-mode) .home-primary-action {
  min-height: 112px;
  padding: 16px 16px 14px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  box-shadow: var(--tactical-shadow) !important;
  justify-items: start !important;
  align-content: center !important;
  text-align: left;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .home-primary-action.booking {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.coupon {
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon {
  width: 52px;
  height: 52px;
  padding: 10px;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: var(--tactical-dark) !important;
  box-shadow: none !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon img {
  filter: brightness(0) saturate(100%) invert(83%) sepia(61%) saturate(1001%) hue-rotate(356deg) brightness(102%) contrast(103%);
}

#myPageView:not(.route-detail-mode) .home-primary-action-copy {
  gap: 4px;
}

#myPageView:not(.route-detail-mode) .home-primary-action-title {
  font-size: 1.24rem;
  line-height: 1.06;
}

#myPageView:not(.route-detail-mode) .home-primary-action-lead {
  color: var(--tactical-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

#myPageView:not(.route-detail-mode) .home-primary-action-meta {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}

#myPageView:not(.route-detail-mode) .home-primary-action-meta-label,
#myPageView:not(.route-detail-mode) .home-primary-action-meta-sub {
  color: var(--tactical-muted);
  font-size: 0.66rem;
}

#myPageView:not(.route-detail-mode) .home-primary-action-meta-value {
  font-size: 0.84rem;
  font-weight: 900;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link {
  min-height: 74px;
  padding: 12px 14px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link .menu-illustration {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fff3b3 0%, #ffd96a 100%) !important;
  box-shadow: none !important;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link strong {
  font-size: 0.94rem;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link small {
  font-size: 0.68rem;
  color: var(--tactical-muted);
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link-arrow {
  color: var(--tactical-ink);
  font-size: 1.08rem;
}

#myPageView .mypage-route-page[data-page='point'] .mypage-route-subtitle,
#myPageView .mypage-route-page[data-page='coupon'] .mypage-route-subtitle,
#myPageView .mypage-route-page[data-page='history'] .mypage-route-subtitle,
#myPageView .mypage-route-page[data-page='card'] .mypage-route-subtitle,
#myPageView .mypage-route-page[data-page='profile'] .mypage-route-subtitle {
  display: block;
}

#myPageView .point-module {
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .point-visual-summary {
  gap: 12px;
}

#myPageView .point-balance-card {
  position: relative;
  min-height: 132px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

#myPageView .point-balance-card .point-balance-illustration {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 54px;
  height: 54px;
  opacity: 0.14;
  border: 0;
  background: none;
}

#myPageView .point-balance-card .point-card-content strong {
  font-size: clamp(3rem, 14vw, 4.6rem);
  color: var(--tactical-ink);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
  -webkit-text-stroke: 0.5px var(--tactical-ink);
}

#myPageView .point-balance-card .point-card-note {
  color: var(--tactical-muted);
  font-size: 0.78rem;
}

#myPageView .checkin-action-panel {
  padding: 16px;
  background: linear-gradient(180deg, #fffef8 0%, #fff7e1 100%);
}

#myPageView .checkin-action-title {
  font-size: 1rem;
}

#myPageView .checkin-action-lead {
  color: var(--tactical-muted);
  font-size: 0.72rem;
}

#myPageView .checkin-help-trigger,
#myPageView .point-rank-summary-trigger {
  width: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .checkin-action-btn {
  min-height: 62px;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffdb55 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView .checkin-action-btn-main {
  font-size: 1.02rem;
}

#myPageView .checkin-action-btn-sub {
  color: var(--tactical-ink);
  font-size: 0.68rem;
  opacity: 0.88;
}

#myPageView .point-rank-progress-panel {
  padding: 16px;
  color: #fff9dd;
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%) !important;
}

#myPageView .point-rank-progress-panel .meta-label,
#myPageView .point-rank-progress-panel #memberTierValue,
#myPageView .point-rank-progress-panel #rankProgressText {
  color: #fff8d3;
}

#myPageView .point-rank-progress-panel .point-rank-progress-summary {
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

#myPageView .point-rank-progress-panel .point-rank-progress-summary-copy strong {
  font-size: clamp(1.08rem, 4.4vw, 1.34rem);
}

#myPageView .point-rank-progress-panel .point-rank-progress-copy {
  color: #f9f0b8;
}

#myPageView .point-rank-progress-panel .point-progress-track,
#myPageView .point-rank-progress-panel .point-progress-rail,
#myPageView .point-rank-progress-panel .point-progress-bar,
#myPageView .point-rank-progress-panel .point-reward-meter-track {
  background-color: rgba(255, 255, 255, 0.12);
}

#myPageView .point-rank-progress-panel .point-progress-fill,
#myPageView .point-rank-progress-panel .point-reward-meter-fill {
  background: linear-gradient(90deg, #ffda54 0%, var(--tactical-yellow) 100%);
}

#myPageView .point-history-details {
  background: linear-gradient(180deg, #fffef8 0%, #fff8e7 100%);
}

#myPageView .point-history-summary {
  align-items: center;
  padding: 12px 14px;
}

#myPageView .point-history-summary::after {
  min-width: 0;
  padding: 7px 12px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #ffffff 0%, #fff6da 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .point-history-head h4 {
  display: inline-flex;
  width: fit-content;
  min-height: 2rem;
  align-items: center;
  padding: 0 12px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%);
  color: #fff8d4;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#myPageView .point-history-head p {
  margin-top: 6px;
  color: var(--tactical-muted);
  font-size: 0.68rem;
}

#myPageView .point-history-list {
  gap: 10px;
  padding: 0 14px 14px;
}

#myPageView .point-history-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .point-history-list li > div {
  display: grid;
  gap: 3px;
}

#myPageView .point-history-list li span {
  color: var(--tactical-muted);
  font-size: 0.68rem;
}

#myPageView .perk-roadmap-panel {
  padding: 16px;
}

#myPageView .perk-list {
  gap: 12px;
}

#myPageView .perk-item {
  padding: 14px;
  border-radius: var(--tactical-radius);
}

#myPageView .perk-badge,
#myPageView .perk-point-chip {
  border-radius: var(--tactical-radius);
}

#myPageView .perk-inline-roadmap {
  border-radius: var(--tactical-radius);
}

#myPageView .coupon-module {
  gap: 14px;
}

#myPageView .coupon-module .section-head {
  justify-content: flex-end;
}

#myPageView .coupon-active-panel {
  position: relative;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

#myPageView .coupon-active-panel-kicker,
#myPageView .coupon-corner-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 1.9rem;
  align-items: center;
  padding: 0 10px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%);
  color: var(--tactical-ink);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .coupon-active-panel h4,
#myPageView .coupon-title {
  font-size: clamp(1.4rem, 7vw, 2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

#myPageView .coupon-active-panel-code,
#myPageView .coupon-code {
  color: var(--tactical-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#myPageView .coupon-active-panel-message,
#myPageView .coupon-desc {
  color: var(--tactical-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

#myPageView .coupon-active-panel-timer {
  justify-self: start;
  padding: 6px 10px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff6db 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .coupon-list {
  gap: 14px;
}

#myPageView .coupon-item {
  position: relative;
  gap: 12px;
  padding: 14px;
}

#myPageView .coupon-top-meta {
  align-items: start;
}

#myPageView .coupon-title-block {
  gap: 8px;
}

#myPageView .coupon-subtitle {
  color: var(--tactical-muted);
  font-size: 0.74rem;
}

#myPageView .coupon-divider {
  border-color: rgba(56, 56, 50, 0.18);
}

#myPageView .coupon-visual-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#myPageView .coupon-visual-card {
  border-radius: var(--tactical-radius);
  border: var(--tactical-line);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .coupon-actions {
  margin-top: 4px;
}

#myPageView .coupon-activate-btn {
  min-height: 56px;
  width: 100%;
  border-radius: var(--tactical-radius) !important;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#myPageView .service-history-summary {
  padding: 14px;
  color: #fff8d4;
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%);
}

#myPageView .service-history-summary .service-history-stat-card {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#myPageView .service-history-summary .service-history-stat-card strong {
  color: #fff9e1;
  font-size: 1.1rem;
}

#myPageView .service-history-summary .service-history-stat-card small {
  color: rgba(255, 248, 212, 0.78);
}

#myPageView .service-history-filter-row {
  gap: 10px;
}

#myPageView .service-history-filter {
  gap: 6px;
}

#myPageView .service-history-list {
  gap: 12px;
}

#myPageView .service-history-item {
  gap: 12px;
  padding: 14px;
}

#myPageView .service-history-item-head {
  align-items: start;
  gap: 12px;
}

#myPageView .service-history-item-head strong {
  font-size: 1rem;
}

#myPageView .service-history-item-head span {
  color: var(--tactical-yellow-deep);
  font-size: 0.74rem;
  font-weight: 900;
}

#myPageView .service-history-source {
  min-height: 1.8rem;
  padding: 0 10px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff6db 100%);
  color: var(--tactical-ink);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .service-history-item-body {
  gap: 4px;
  color: var(--tactical-muted);
}

#myPageView .booking-view-switch {
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .booking-view-btn {
  min-height: 46px;
  border-radius: var(--tactical-radius) !important;
}

#myPageView .booking-view-btn.active {
  background: linear-gradient(180deg, #ffdb55 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView .booking-wizard-module {
  gap: 14px;
  padding: 16px;
}

#myPageView .booking-wizard-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

#myPageView .bookingWizardCancelBtn,
#myPageView .booking-wizard-cancel-btn {
  order: 2;
  min-height: 40px;
  padding-inline: 12px;
}

#myPageView .bookingWizardCancelBtn {
  justify-self: end;
}

#myPageView .booking-step-counter {
  display: inline-flex;
  width: fit-content;
  min-height: 1.9rem;
  align-items: center;
  padding: 0 10px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .booking-step-title {
  margin-top: 10px;
  font-size: clamp(1.6rem, 7vw, 2.04rem);
}

#myPageView .booking-step-lead,
#myPageView .booking-step-description {
  color: var(--tactical-muted);
  font-size: 0.74rem;
  line-height: 1.6;
}

#myPageView .booking-step-progress-shell {
  height: 12px;
  margin-top: 10px;
  border: var(--tactical-line);
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
}

#myPageView .booking-step-progress-fill {
  background: linear-gradient(90deg, var(--tactical-yellow-deep) 0%, #9b7b09 100%);
}

#bookingStepIndicators {
  gap: 6px;
  padding: 0;
}

#bookingStepIndicators .booking-step-indicator {
  min-height: 76px;
  gap: 6px;
  padding: 8px 4px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#bookingStepIndicators .booking-step-indicator.active {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%);
  box-shadow: var(--tactical-shadow);
}

#bookingStepIndicators .booking-step-indicator.completed {
  background: linear-gradient(180deg, #fff3b8 0%, #ffe078 100%);
}

#bookingStepIndicators .booking-step-indicator-icon {
  border-radius: var(--tactical-radius);
  background: #ffffff;
}

#bookingStepIndicators .booking-step-indicator-dot {
  display: none;
}

#bookingStepIndicators .booking-step-indicator-text {
  font-size: 0.64rem;
}

#myPageView .booking-selected-context {
  padding: 12px 14px;
  border-radius: var(--tactical-radius);
  border: var(--tactical-line);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .booking-step-panel {
  gap: 12px;
}

#myPageView .booking-service-grid,
#myPageView .booking-option-visual-fields,
#myPageView .booking-time-list {
  gap: 12px;
}

#myPageView .booking-service-card,
#myPageView .booking-option-visual-card,
#myPageView .booking-time-slot,
#myPageView .booking-history > li,
#myPageView .booking-slot-picker,
#myPageView .booking-option-fields,
#myPageView .booking-option-toggle-btn,
#myPageView .booking-history-toolbar {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .booking-service-card {
  border-radius: var(--tactical-radius) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .booking-service-card.active {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
  box-shadow: var(--tactical-shadow) !important;
}

#myPageView .booking-service-card .service-illustration {
  border-radius: var(--tactical-radius);
}

#myPageView .booking-service-card strong {
  font-size: 1.02rem;
}

#myPageView .booking-option-toggle-btn {
  min-height: 54px;
  width: 100%;
}

#myPageView .booking-option-fields {
  padding: 14px;
}

#myPageView .booking-slot-picker {
  gap: 14px;
  padding: 14px;
}

#myPageView .booking-slot-picker-head {
  align-items: center;
}

#myPageView .booking-slot-nav-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

#myPageView .booking-calendar-board {
  padding: 14px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: #ffffff;
}

#myPageView .booking-time-selector {
  gap: 12px;
}

#myPageView .booking-time-selector-head {
  gap: 4px;
}

#myPageView .booking-time-slot {
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px;
}

#myPageView .booking-time-slot-time {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.22rem;
  font-style: italic;
}

#myPageView .booking-time-slot-badge {
  min-height: 1.8rem;
  padding: 0 10px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

#myPageView .booking-time-slot.is-available .booking-time-slot-badge {
  color: #0a8d9c;
}

#myPageView .booking-time-slot.is-limited .booking-time-slot-badge {
  color: var(--tactical-yellow-deep);
}

#myPageView .booking-time-slot.is-full {
  opacity: 0.48;
}

#myPageView .booking-submit-preview,
#myPageView .booking-choice-field {
  padding: 14px;
}

#myPageView .booking-submit-preview-item {
  padding: 10px 0;
  border-bottom: 2px dashed rgba(56, 56, 50, 0.16);
}

#myPageView .booking-submit-preview-item:last-child {
  border-bottom: 0;
}

#myPageView .booking-optional-details {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: var(--tactical-shadow-soft);
}

#myPageView .booking-optional-details summary {
  padding: 14px;
}

#myPageView .booking-field-warning,
#myPageView .booking-confirmation-note {
  color: var(--tactical-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

#myPageView .booking-form-footer {
  gap: 12px;
}

#myPageView .booking-submit-btn,
#myPageView .booking-step-next-btn,
#myPageView #profileSubmitBtn {
  min-height: 56px;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView .profile-form-paged .profile-block {
  padding: 14px;
}

#myPageView .profile-block-head {
  gap: 4px;
}

#myPageView .profile-block-head strong {
  font-size: 1rem;
}

#myPageView .profile-block-head p,
#myPageView .vehicle-editor-section-head p,
#myPageView .vehicle-editor-card-note {
  color: var(--tactical-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

#myPageView .profile-form-paged .vehicle-editor-card {
  padding: 14px;
}

#myPageView .profile-form-paged .vehicle-editor-grid,
#myPageView .profile-form-paged .vehicle-editor-plate-grid {
  gap: 14px 12px;
}

#myPageView .profile-form-paged .vehicle-editor-plate-preview .jp-plate-card {
  box-shadow: none;
}

#myPageView .profile-danger-zone {
  background: linear-gradient(180deg, #fff6f2 0%, #ffeae2 100%) !important;
}

#myPageView .profile-delete-btn {
  min-height: 50px;
  border-radius: var(--tactical-radius) !important;
}

#myPageView .registration-step-panel,
#myPageView .liff-entry-guide {
  border-radius: var(--tactical-radius);
}

#myPageView .registration-help-banner {
  padding: 12px 14px;
}

#myPageView .plate-preview-card,
#myPageView .registration-ocr-preview-wrap {
  border-radius: var(--tactical-radius);
}

.guide-overlay {
  background: rgba(47, 48, 40, 0.72);
  backdrop-filter: blur(10px);
}

#checkinGuideModal .guide-card,
#rankGuideModal .guide-card,
.coupon-activate-card,
.modal-card,
.booking-submit-modal-card,
.booking-cancel-modal-card {
  border-radius: var(--tactical-radius) !important;
}

.bottom-tabbar.bottom-actionbar {
  width: min(430px, calc(100vw - 10px));
  padding: 8px;
  gap: 8px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, rgba(63, 64, 54, 0.96) 0%, rgba(46, 47, 40, 0.98) 100%);
  box-shadow: var(--tactical-shadow);
}

.bottom-action-btn {
  min-height: 52px;
  border-radius: var(--tactical-radius) !important;
  border-color: var(--tactical-ink) !important;
}

.bottom-action-btn.secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff6dc 100%) !important;
}

.bottom-action-btn:not(.secondary) {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

.bottom-action-label {
  font-size: 0.9rem;
  font-weight: 900;
}

body:not(.liff-body) .admin-auth-gate {
  min-height: 100vh;
  padding: 20px 14px;
  background:
    linear-gradient(180deg, rgba(254, 199, 0, 0.08) 0%, rgba(254, 255, 214, 1) 18%),
    var(--tactical-paper);
}

body:not(.liff-body) .admin-auth-card {
  max-width: 420px;
  padding: 20px 18px 18px;
}

body:not(.liff-body) .container.admin-shell {
  max-width: min(1440px, calc(100vw - 22px));
  padding: 14px 0 28px;
  gap: 14px;
}

body:not(.liff-body) .admin-global-header {
  padding: 16px 18px;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%);
}

body:not(.liff-body) .admin-brand h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
}

body:not(.liff-body) .admin-brand small {
  color: var(--tactical-muted);
  font-weight: 700;
}

body:not(.liff-body) .admin-layout {
  gap: 14px;
}

body:not(.liff-body) .admin-sidebar {
  position: sticky;
  top: 12px;
  padding: 14px;
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%);
  color: #fff8d5;
  box-shadow: var(--tactical-shadow);
}

body:not(.liff-body) .admin-mobile-menu-toggle,
body:not(.liff-body) .admin-sidebar-tools,
body:not(.liff-body) .notification-dock,
body:not(.liff-body) .admin-kpi-mini {
  border-radius: var(--tactical-radius);
}

body:not(.liff-body) .admin-mobile-menu-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  color: #fff8d5;
}

body:not(.liff-body) .admin-nav-group {
  padding: 10px;
  border: 2px solid rgba(255, 248, 213, 0.16);
  border-radius: var(--tactical-radius);
  background: rgba(255, 255, 255, 0.04);
}

body:not(.liff-body) .admin-nav-group-label,
body:not(.liff-body) .admin-sidebar-tools h2,
body:not(.liff-body) .admin-kpi-mini h2 {
  color: #f5d357;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body:not(.liff-body) .admin-nav a {
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid rgba(255, 248, 213, 0.18);
  border-radius: var(--tactical-radius);
  background: rgba(255, 255, 255, 0.04);
  color: #fff8dd;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}

body:not(.liff-body) .admin-nav a:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

body:not(.liff-body) .admin-nav a.active {
  border-color: var(--tactical-ink);
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%);
  color: var(--tactical-ink);
  box-shadow: var(--tactical-shadow-soft);
}

body:not(.liff-body) .nav-badge {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff6da 100%);
  color: var(--tactical-ink);
  box-shadow: var(--tactical-shadow-soft);
}

body:not(.liff-body) .admin-sidebar .actions button,
body:not(.liff-body) .admin-sidebar .actions .button-link {
  width: 100%;
}

body:not(.liff-body) .admin-sidebar-tools,
body:not(.liff-body) .notification-dock,
body:not(.liff-body) .admin-kpi-mini {
  padding: 12px;
  border: 2px solid rgba(255, 248, 213, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: #fff8dd;
  box-shadow: none;
}

body:not(.liff-body) .admin-kpi-mini strong,
body:not(.liff-body) .notification-dock .status,
body:not(.liff-body) .notification-list li {
  color: inherit;
}

body:not(.liff-body) .admin-main.page-mode {
  gap: 14px;
}

body:not(.liff-body) .admin-main .card {
  padding: 16px;
}

body:not(.liff-body) .admin-main .card h2 {
  font-size: clamp(1.28rem, 3vw, 1.72rem);
  line-height: 1.06;
}

body:not(.liff-body) .admin-section-lead,
body:not(.liff-body) .coupon-admin-lead,
body:not(.liff-body) .service-record-admin-lead,
body:not(.liff-body) .qr-admin-lead {
  color: var(--tactical-muted);
  font-size: 0.78rem;
  line-height: 1.62;
}

body:not(.liff-body) .dashboard-kpis,
body:not(.liff-body) .dashboard-insights,
body:not(.liff-body) .admin-grid,
body:not(.liff-body) .coupon-admin-flow,
body:not(.liff-body) .coupon-admin-block,
body:not(.liff-body) .service-record-admin-layout,
body:not(.liff-body) .qr-admin-layout {
  gap: 12px;
}

body:not(.liff-body) .kpi-card,
body:not(.liff-body) .mini-kpi-card,
body:not(.liff-body) .dashboard-panel,
body:not(.liff-body) .admin-notification-summary-card,
body:not(.liff-body) .coupon-admin-block,
body:not(.liff-body) .action-card,
body:not(.liff-body) .elapsed-card,
body:not(.liff-body) .service-record-summary-card,
body:not(.liff-body) .qr-scanner-result-card {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: none;
}

/* Shadow ONLY on clickable elements */
body:not(.liff-body) .kpi-card-clickable,
body:not(.liff-body) .action-card[onclick],
body:not(.liff-body) .action-card[role="button"] {
  box-shadow: var(--tactical-shadow-soft);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
body:not(.liff-body) .kpi-card-clickable:hover,
body:not(.liff-body) .action-card[onclick]:hover,
body:not(.liff-body) .action-card[role="button"]:hover {
  box-shadow: var(--tactical-shadow);
  transform: translateY(-1px);
}
body:not(.liff-body) .kpi-card-clickable:active,
body:not(.liff-body) .action-card[onclick]:active,
body:not(.liff-body) .action-card[role="button"]:active {
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84);
  transform: translateY(1px);
}

/* KPI card click hint */
body:not(.liff-body) .kpi-card-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--tactical-yellow-deep);
  opacity: 0.7;
  letter-spacing: 0.08em;
  transition: opacity 0.15s;
}
body:not(.liff-body) .kpi-card-clickable:hover .kpi-card-hint {
  opacity: 1;
}

body:not(.liff-body) .kpi-card,
body:not(.liff-body) .mini-kpi-card {
  min-height: 112px;
  padding: 14px;
}

body:not(.liff-body) .kpi-label,
body:not(.liff-body) .mini-kpi-card span,
body:not(.liff-body) .dashboard-kpi-support span {
  color: var(--tactical-yellow-deep);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body:not(.liff-body) .kpi-card strong,
body:not(.liff-body) .mini-kpi-card strong {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
}

body:not(.liff-body) .dashboard-kpi-support {
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: none;
}

body:not(.liff-body) .notification-list li,
body:not(.liff-body) .dashboard-list li,
body:not(.liff-body) .table-wrap tbody tr,
body:not(.liff-body) .appointment-table tbody tr {
  border-radius: var(--tactical-radius);
}

body:not(.liff-body) .table-wrap table,
body:not(.liff-body) .appointment-table {
  border: var(--tactical-line);
}

body:not(.liff-body) .table-wrap th,
body:not(.liff-body) .appointment-table th {
  background: linear-gradient(180deg, #fff4b1 0%, #ffe078 100%);
  color: var(--tactical-ink);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.liff-body) .table-wrap td,
body:not(.liff-body) .appointment-table td {
  background: rgba(255, 255, 255, 0.78);
}

body:not(.liff-body) .admin-notification-switch,
body:not(.liff-body) .admin-notification-recipient-preview,
body:not(.liff-body) .coupon-customer-picker,
body:not(.liff-body) .booking-slot-picker-admin,
body:not(.liff-body) .point-grant-quick-presets {
  border-radius: var(--tactical-radius);
}

@media (max-width: 900px) {
  body:not(.liff-body) .container.admin-shell {
    max-width: calc(100vw - 14px);
  }
}

@media (max-width: 640px) {
  #myPageView {
    padding-bottom: 82px;
  }

  #myPageView .mypage-route-title {
    font-size: clamp(1.42rem, 6.8vw, 1.86rem);
  }

  #myPageView .mypage-route-subtitle {
    font-size: 0.7rem;
  }

  #myPageView:not(.route-detail-mode) .mypage-home-shell {
    gap: 14px;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-expanded,
  #myPageView .digital-member-card,
  #myPageView .checkin-action-panel,
  #myPageView .point-rank-progress-panel,
  #myPageView .coupon-active-panel,
  #myPageView .coupon-item,
  #myPageView .service-history-item,
  #myPageView .profile-block,
  #myPageView .profile-form-paged .vehicle-editor-card,
  #myPageView .booking-wizard-module,
  #myPageView .booking-slot-picker,
  #myPageView .booking-submit-preview,
  #myPageView .booking-choice-field {
    padding: 12px !important;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap,
  #myPageView .digital-member-card-body {
    min-height: 208px;
    padding: 12px;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap::before,
  #myPageView .digital-member-card-body::before {
    inset: 8px;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap img,
  #myPageView .digital-member-card-body img {
    width: min(184px, 100%);
  }

  #myPageView:not(.route-detail-mode) .home-stat-card {
    min-height: 100px;
  }

  #myPageView:not(.route-detail-mode) .home-stat-value {
    font-size: clamp(1.26rem, 6vw, 1.58rem);
  }

  #myPageView:not(.route-detail-mode) .home-primary-action {
    min-height: 104px;
    padding: 14px 12px !important;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-title {
    font-size: 1.08rem;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-icon {
    width: 46px;
    height: 46px;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link {
    min-height: 70px;
    padding: 11px 12px !important;
  }

  #myPageView .point-balance-card {
    min-height: 116px;
  }

  #myPageView .point-balance-card .point-card-content strong {
    font-size: clamp(2.6rem, 13vw, 3.7rem);
  }

  #myPageView .coupon-active-panel h4,
  #myPageView .coupon-title {
    font-size: clamp(1.2rem, 6vw, 1.58rem);
  }

  #myPageView .booking-step-title {
    font-size: clamp(1.36rem, 6vw, 1.68rem);
  }

  #myPageView .booking-time-slot {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 11px 12px;
  }

  #myPageView .booking-time-slot-badge {
    justify-self: start;
  }

  #myPageView .booking-time-slot-arrow {
    display: none;
  }

  .bottom-tabbar.bottom-actionbar {
    width: calc(100vw - 8px);
    padding: 7px;
    gap: 7px;
  }

  .bottom-action-btn {
    min-height: 50px;
  }

  body:not(.liff-body) .admin-sidebar {
    position: static;
  }

  body:not(.liff-body) .admin-main .card,
  body:not(.liff-body) .admin-sidebar,
  body:not(.liff-body) .admin-auth-card {
    padding: 14px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0%, rgba(13, 165, 123, 0.18), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(15, 118, 110, 0.18), transparent 38%),
    var(--bg);
}

.container {
  width: min(1200px, 94vw);
  margin: 0 auto;
  padding: 24px 0 48px;
}

.admin-shell {
  width: min(1880px, calc(100vw - 16px));
  padding: 6px 6px 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 247, 220, 0.28) 0%, rgba(255, 238, 184, 0.14) 100%);
}

.admin-auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px 12px;
}

.admin-auth-gate[hidden] {
  display: none !important;
}

.admin-auth-card {
  width: min(420px, 94vw);
  padding: 20px 18px 18px;
  display: grid;
  gap: 12px;
}

.admin-auth-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #7a5200;
}

.admin-auth-card h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.25;
}

.admin-auth-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

#adminAppShell[hidden] {
  display: none !important;
}

.admin-global-header {
  position: sticky;
  top: 8px;
  z-index: 70;
  margin-bottom: 8px;
  display: block;
}

.admin-global-header .admin-brand {
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.admin-main-header {
  position: sticky;
  top: 8px;
  z-index: 40;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.admin-main-header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.admin-main-header-top h2 {
  margin: 0;
  font-size: 1.08rem;
}

.admin-main-header-top small {
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-page-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.admin-page-tab {
  width: 100%;
}

.admin-page-tab.active {
  background: #111 !important;
  color: #f5b500 !important;
  border-color: #111 !important;
}

.admin-grid {
  margin-top: 0;
}

.admin-main.page-mode .admin-grid {
  display: block;
}

.admin-main.page-mode .admin-grid > [id^='section-'] + [id^='section-'] {
  margin-top: 14px;
}

.admin-main [id^='section-'] {
  scroll-margin-top: 16px;
}

.admin-notification-settings-card {
  display: grid;
  gap: 14px;
}

.admin-notification-summary-card {
  border: 2px dashed #c99c17;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8df 0%, #fffdf3 100%);
  padding: 12px 14px;
  color: #6c5610;
  line-height: 1.6;
  font-weight: 700;
}

.line-customer-notification-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px solid #ead9a0;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff9e9 100%);
}

.line-customer-notification-group h3 {
  margin: 0;
  font-size: 0.96rem;
  color: #6c5610;
}

.booking-availability-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid #ead9a0;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff9e9 100%);
}

.booking-availability-group-head {
  display: grid;
  gap: 4px;
}

.booking-availability-group-head-inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.booking-availability-group h3 {
  margin: 0;
  font-size: 0.96rem;
  color: #6c5610;
}

.booking-availability-group small {
  color: #7a6a38;
}

.booking-weekday-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.booking-slot-rows {
  display: grid;
  gap: 10px;
}

.booking-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 140px) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #eadfb8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.booking-closed-date-adder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.booking-closed-dates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-closed-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e7cf86;
  background: #fff6d9;
  color: #6c5610;
}

.booking-closed-date-chip strong {
  font-size: 1rem;
  line-height: 1;
}

.booking-closed-date-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.booking-slot-picker-admin {
  gap: 12px;
  background: linear-gradient(180deg, #fffdf7 0%, #fff7e3 100%);
}

.booking-availability-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-availability-legend-item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(85, 51, 0, 0.12);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.booking-availability-legend-item.is-open {
  background: #fff6d8;
  color: #6f5200;
}

.booking-availability-legend-item.is-full {
  background: #ffe0c8;
  color: #9c4316;
}

.booking-availability-legend-item.is-unsupported {
  background: #f1ede4;
  color: #827861;
}

.booking-slot-grid-cell-preview-open {
  background: #fff8df;
  color: #755600;
  font-size: 0.82rem;
  font-weight: 900;
}

.booking-slot-grid-cell-preview-open.is-partial {
  background: #ffe8ab;
}

.booking-slot-grid-cell-preview-full {
  background: #ffd7bd;
  color: #a14218;
  font-size: 0.82rem;
  font-weight: 900;
}

.booking-slot-grid-cell-preview-unsupported {
  background: #f3efe7;
  color: #9a917e;
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-sidebar {
  position: sticky;
  top: 8px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 16px);
  overflow: auto;
}

.admin-brand {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.admin-brand h1 {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.8rem);
}

.admin-top-actions {
  display: grid;
  gap: 8px;
}

.admin-top-actions > * {
  width: 100%;
}

.admin-mobile-menu-toggle {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  background: #111;
  color: #f5b500;
  text-align: left;
}

.admin-mobile-menu-toggle:hover {
  background: #1b1b1b;
}

.admin-mobile-menu-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
  flex: 0 0 2rem;
}

.admin-mobile-menu-toggle-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.admin-mobile-menu-toggle-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
}

.admin-mobile-menu-toggle-copy strong {
  min-width: 0;
  font-size: 0.88rem;
  color: #fff5cf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-mobile-menu-toggle-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff1b9;
  color: #111;
  font-size: 0.74rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.admin-menu-toggle button {
  width: 100%;
}

.admin-sidebar-menu-body {
  display: grid;
  gap: 10px;
}

.admin-sidebar-menu-body[hidden],
.admin-mobile-menu-toggle[hidden] {
  display: none !important;
}

#toggleSidebarMenuBtn.is-collapsed {
  background: #111;
  color: #f5b500;
  border-color: #111;
}

.admin-scope-switch h2 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.admin-scope-switch .actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-scope-switch .scope-active {
  background: #111 !important;
  color: #f5b500 !important;
  border-color: #111 !important;
}

.admin-nav {
  display: grid;
  gap: 6px;
}

.admin-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--surface);
}

.nav-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nav-icon {
  width: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.nav-label {
  min-width: 0;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 6px;
}

.notification-dock {
  position: static;
  width: 100%;
  max-height: 290px;
  overflow: auto;
  z-index: auto;
  margin: 0;
  border-width: 2px;
  box-shadow: none;
}

.notification-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.notification-empty {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  color: var(--muted);
  font-size: 0.83rem;
}

.notification-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.notification-item p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.notification-item.is-read {
  opacity: 0.72;
}

.notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notification-state,
.notification-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border: 1px solid #3c3c3c;
  background: #f4f4f4;
}

.notification-item.kind-cancel-request {
  border-left: 4px solid #b91c1c;
}

.notification-item.kind-reserve-request {
  border-left: 4px solid #d97706;
}

.notification-item.kind-inspection-due {
  border-left: 4px solid #0f766e;
}

.notification-item.kind-customer-unlinked {
  border-left: 4px solid #1d4ed8;
}

.admin-action-center {
  display: grid;
  gap: 12px;
}

.admin-action-center-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.action-center-list {
  display: grid;
  gap: 14px;
}

.action-center-group {
  display: grid;
  gap: 10px;
}

.action-center-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.action-center-group-head h3 {
  margin: 0;
  font-size: 1rem;
}

.action-center-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.action-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 248, 223, 0.8) 0%, rgba(255, 255, 255, 0.98) 54%),
    #fff;
  box-shadow: 0 10px 24px rgba(16, 52, 43, 0.06);
}

.action-card.kind-cancel-request {
  border-left: 6px solid #b91c1c;
}

.action-card.kind-reserve-request {
  border-left: 6px solid #d97706;
}

.action-card.kind-inspection-due {
  border-left: 6px solid #0f766e;
}

.action-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.action-card-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.action-card-time {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
}

.action-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #3c3c3c;
  background: #f4f4f4;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.action-card strong {
  font-size: 1rem;
  line-height: 1.4;
}

.action-card-detail,
.action-card-next {
  margin: 0;
  line-height: 1.55;
}

.action-card-detail {
  color: var(--muted);
  font-size: 0.86rem;
}

.action-card-next {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.action-card-actions {
  display: grid;
  gap: 8px;
}

.action-card .table-actions {
  width: 100%;
}

.action-card .table-action-btn {
  min-height: 40px;
}

.action-center-empty {
  display: grid;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px dashed #a7c4bb;
  background: #f8fbfa;
}

.action-center-empty strong,
.action-center-empty p {
  margin: 0;
}

.action-center-empty p {
  color: var(--muted);
  line-height: 1.55;
}

.hidden-by-scope {
  display: none !important;
}

.hidden-by-page {
  display: none !important;
}

.admin-nav a.active {
  background: #111;
  color: #f5b500;
  border-color: #111;
}

.admin-sidebar-tools h2,
.admin-kpi-mini h2 {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.admin-kpi-mini ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}

.admin-kpi-mini li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
}

.customer-unified-list {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed #9a9a9a;
}

.customer-unified-list h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.customer-list-filters {
  margin-top: 8px;
  margin-bottom: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #f8fbfa;
}

.customer-list-filters .row {
  margin: 0;
}

.customer-list-filter-actions {
  display: flex;
  align-items: end;
}

.customer-list-filter-actions button {
  width: 100%;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.kpi-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  display: grid;
  gap: 4px;
}

.kpi-label {
  font-size: 0.76rem;
  color: var(--muted);
}

.kpi-card strong {
  font-size: 1.35rem;
  line-height: 1;
}

.dashboard-tools {
  margin-top: 10px;
}

.dashboard-insight-summary {
  margin-top: 10px;
}

.dashboard-insights {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  display: grid;
  gap: 8px;
  align-content: start;
}

.dashboard-panel h3 {
  margin: 0;
  font-size: 0.9rem;
}

.dashboard-panel h4 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.dashboard-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-kpi-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 4px;
}

.mini-kpi-card span {
  font-size: 0.75rem;
  color: var(--muted);
}

.mini-kpi-card strong {
  font-size: 1.2rem;
  line-height: 1;
}

.dashboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.dashboard-list li {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
}

.dashboard-list li > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard-empty {
  color: var(--muted);
}

.dashboard-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}

h1 {
  margin: 0;
  font-size: clamp(1.2rem, 2.1vw, 2rem);
}

small {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 14px;
}

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

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(16, 52, 43, 0.06);
}

.card h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

button {
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: var(--primary-strong);
}

button.secondary {
  background: #344b42;
}

button.danger {
  background: var(--danger);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 12px;
  background: #12523f;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.appointment-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px 8px;
  align-items: end;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}

.appointment-filters label {
  min-width: 0;
}

.appointment-filters .actions {
  align-self: end;
  display: flex;
}

.appointment-filters .actions button {
  width: 100%;
  min-height: 42px;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}

.customer-name-text {
  font-weight: 700;
}

.customer-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #111;
  object-fit: cover;
  background: #fff;
  flex: 0 0 28px;
}

.customer-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 800;
  color: #111;
  background: #ffe08a;
}

.table-action-btn {
  padding: 6px 9px;
  border-radius: 10px;
  font-size: 0.74rem;
  line-height: 1.2;
}

.table-action-note {
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--muted);
}

.customer-memo-cell {
  max-width: 280px;
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.customer-benefit-cell {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.customer-benefit-cell strong {
  font-size: 0.84rem;
  line-height: 1.3;
}

.customer-benefit-cell small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.customer-memo-empty {
  color: #8a8a8a;
}

.text-danger {
  color: var(--danger);
}

.text-warning {
  color: #b45309;
}

/* === 顧客詳細パネル === */
#customersBody tr {
  cursor: pointer;
  transition: background 0.1s;
}
#customersBody tr:hover {
  background: rgba(13, 165, 123, 0.06);
}

.customer-detail-panel {
  margin-top: 16px;
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface);
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.customer-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.customer-detail-header h3 {
  margin: 0;
  font-size: 1.2em;
}
.customer-detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 16px;
}
.customer-detail-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  transition: all 0.15s;
}
.customer-detail-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.customer-detail-tab:hover {
  color: var(--text);
}
.customer-detail-content {
  display: none;
}
.customer-detail-content.active {
  display: block;
}

/* 経過日数グリッド */
.elapsed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.elapsed-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.elapsed-card-icon {
  font-size: 1.5em;
  margin-bottom: 4px;
}
.elapsed-card-label {
  font-size: 0.8em;
  color: var(--muted);
  margin-bottom: 4px;
}
.elapsed-card-days {
  font-size: 1.4em;
  font-weight: 700;
}
.elapsed-card-date {
  font-size: 0.75em;
  color: var(--muted);
  margin-top: 2px;
}
.elapsed-ok { border-color: var(--ok); }
.elapsed-warn { border-color: #b45309; background: #fffbeb; }
.elapsed-danger { border-color: var(--danger); background: #fef2f2; }

/* 施工履歴リスト */
.customer-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9em;
}
.history-item-icon {
  font-size: 1.2em;
  flex-shrink: 0;
}
.history-item-main {
  flex: 1;
}
.history-item-service {
  font-weight: 600;
}
.history-item-date {
  font-size: 0.8em;
  color: var(--muted);
}
.history-item-amount {
  font-weight: 700;
  white-space: nowrap;
}

/* 基本情報グリッド */
.customer-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.info-item {
  padding: 8px 0;
}
.info-item-label {
  font-size: 0.75em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-item-value {
  font-size: 0.95em;
  margin-top: 2px;
}

/* === 売上分析 === */
.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .analytics-grid { grid-template-columns: 1fr; }
}
.analytics-grid h3 {
  margin: 0 0 8px;
  font-size: 1em;
}

/* === テンプレート一覧 有効/無効の視覚化 === */
tr.template-row-enabled {
  background: #f0fdf8;
}
tr.template-row-disabled {
  opacity: 0.6;
  background: var(--surface);
}
tr.template-row-editing {
  box-shadow: inset 4px 0 0 var(--accent);
}
.template-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.template-status-dot.dot-on {
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(4,120,87,0.2);
}
.template-status-dot.dot-off {
  background: #ccc;
}

/* === 小さいボタン === */
.btn-sm {
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sm:hover { background: var(--bg); }
.btn-sm.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-sm.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}
.btn-sm.btn-ok {
  color: var(--ok);
  border-color: var(--ok);
}
.btn-sm.btn-ok:hover {
  background: var(--ok);
  color: #fff;
}
.btn-sm.btn-muted {
  color: var(--muted);
  border-color: var(--muted);
}

/* === ステップ配信プリセット === */
.step-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.step-presets-label {
  font-size: 0.82em;
  color: var(--muted);
  font-weight: 600;
  margin-right: 4px;
}
.preset-btn {
  font-size: 0.78em;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--primary);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.preset-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* === 変数チップ === */
.variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.var-chip {
  font-size: 0.72em;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8f5f0;
  color: var(--primary-strong);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  user-select: none;
}
.var-chip:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-strong);
}

/* === タイミングプレビュー === */
.timing-preview {
  font-size: 0.82em;
  padding: 8px 12px;
  background: #f0faf6;
  border-radius: 6px;
  border-left: 3px solid var(--primary);
  color: var(--text);
  min-height: 20px;
}
.timing-preview:empty {
  display: none;
}

.delivery-history-panel {
  margin-top: 4px;
  border-top: 2px dashed #9a9a9a;
  padding-top: 10px;
}

.delivery-history-panel h3 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
}

.coupon-history-panel {
  margin-top: 6px;
  border-top: 2px dashed #9a9a9a;
  padding-top: 10px;
}

.coupon-history-panel h3 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 800;
}

.assist-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

.customer-picker-inline {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}

.customer-picker-inline .actions {
  margin-top: 0;
}

.service-record-admin-card {
  display: grid;
  gap: 14px;
}

.service-record-admin-lead {
  margin: -4px 0 0;
  color: #4e4e4e;
  font-size: 0.92rem;
  line-height: 1.55;
}

.service-record-admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.service-record-entry-panel,
.service-record-list-panel {
  border: 2px solid #111;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffef8 0%, #fff9ea 100%);
  padding: 14px;
}

.service-record-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.service-record-panel-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.service-record-panel-head p {
  margin: 4px 0 0;
  color: #5c5c5c;
  font-size: 0.84rem;
  line-height: 1.45;
}

.service-record-form,
.service-record-filter-form {
  gap: 10px;
}

.service-record-form .row,
.service-record-filter-form .row {
  align-items: end;
}

.service-record-visibility-field {
  border: 2px solid #e7dcb8;
  border-radius: 14px;
  background: #fffef8;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.service-record-visibility-toggle {
  font-size: 0.9rem;
  font-weight: 900;
}

.service-record-visibility-toggle input {
  width: 18px;
  height: 18px;
}

.service-record-visibility-help {
  line-height: 1.5;
}

.service-record-customer-meta {
  border: 2px dashed #b38a16;
  border-radius: 14px;
  background: #fff7d1;
  padding: 10px 12px;
  color: #5e4c12;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.5;
}

.service-record-recent-panel {
  border-top: 2px dashed #c9b56e;
  padding-top: 12px;
}

.service-record-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.service-record-recent-list li {
  border: 2px solid #111;
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.service-record-recent-list li > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.service-record-recent-list li strong {
  font-size: 0.94rem;
}

.service-record-recent-meta {
  display: grid;
  gap: 2px;
  color: #5c5c5c;
  font-size: 0.8rem;
}

.service-record-recent-actions {
  margin-top: 2px;
}

.service-record-empty {
  border: 2px dashed #c5c5c5;
  border-radius: 14px;
  background: #fafafa;
  padding: 14px;
  color: #6a6a6a;
  font-size: 0.84rem;
}

.service-record-table-wrap {
  margin-top: 4px;
}

.service-record-customer-cell {
  display: grid;
  gap: 3px;
}

.service-record-customer-cell span {
  color: var(--muted);
  font-size: 0.76rem;
}

.service-record-note {
  display: inline-block;
  max-width: 280px;
}

.service-record-visibility-cell {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 112px;
}

.service-record-visibility-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 2px solid #1e6f39;
  border-radius: 999px;
  background: #e8fff1;
  color: #1e6f39;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 9px;
}

.service-record-visibility-badge.is-hidden {
  border-color: #8b4c10;
  background: #fff3e2;
  color: #8b4c10;
}

button.service-record-visibility-btn {
  padding: 6px 8px;
  border: 2px solid #111;
  border-radius: 10px;
  background: #fff;
  color: #111;
  box-shadow: none;
}

button.service-record-visibility-btn:hover {
  background: #fff0b7;
}

.service-record-filter-form .actions {
  margin-top: 0;
}

.qr-admin-card {
  display: grid;
  gap: 14px;
}

.qr-admin-lead {
  margin: -4px 0 0;
  color: #4e4e4e;
  font-size: 0.92rem;
  line-height: 1.55;
}

.qr-admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.qr-scanner-stage,
.qr-scanner-result-panel {
  border: 2px solid #111;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffef8 0%, #fff9ea 100%);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.qr-scanner-actions {
  gap: 8px;
}

.qr-scanner-stage-frame {
  border: 2px dashed #bba14e;
  border-radius: 18px;
  background: #fffdf5;
  min-height: 280px;
  padding: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.qr-scanner-stage-frame video {
  width: 100%;
  max-height: 360px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.qr-scanner-stage-frame canvas {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

.qr-scanner-placeholder {
  width: 100%;
  min-height: 220px;
  border: 2px solid #111;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 215, 100, 0.34) 0%, rgba(255, 255, 255, 0.9) 100%);
  padding: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 900;
  color: #3f3300;
}

.qr-scanner-placeholder small {
  display: block;
  max-width: 30ch;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: #685624;
}

.qr-scanner-result-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.qr-scanner-result-head p {
  margin: 4px 0 0;
  color: #5c5c5c;
  font-size: 0.84rem;
  line-height: 1.45;
}

.qr-scanner-result-card {
  border: 2px solid #111;
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.qr-scanner-result-card.is-empty {
  border-style: dashed;
  color: #6a6a6a;
  place-items: center;
  min-height: 220px;
  text-align: center;
}

.qr-scanner-result-card.is-unmatched {
  background: #fff7f0;
  border-color: #8b4c10;
}

/* ── QR Result Hero (顧客名・バッジ) ── */
.qr-result-hero {
  text-align: center;
  padding: 16px 12px 12px;
  background: linear-gradient(135deg, #e8fff1 0%, #f0fff5 100%);
  border: 2px solid #1e6f39;
  border-radius: 14px;
}

.qr-result-hero .qr-result-badge {
  margin-bottom: 8px;
}

.qr-result-customer-name {
  font-size: 1.5rem;
  font-weight: 900;
  color: #111;
  line-height: 1.3;
  margin-bottom: 4px;
}

.qr-result-phone {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 2px;
}

.qr-result-member-code {
  font-size: 0.78rem;
  color: #888;
}

/* ── QR Result KPI Row (車両・車検・特典) ── */
.qr-result-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.qr-result-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 2px solid #e8e0d0;
  border-radius: 12px;
  background: #fffdf6;
  text-align: center;
}

.qr-result-kpi-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.qr-result-kpi-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #715d2b;
  text-transform: uppercase;
}

.qr-result-kpi-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  word-break: break-all;
}

.qr-result-kpi-sub {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f0f0;
  color: #555;
}

.qr-result-kpi-sub.soon {
  background: #fff3cd;
  color: #856404;
}

.qr-result-kpi-sub.overdue {
  background: #f8d7da;
  color: #842029;
}

.qr-kpi-soon {
  border-color: #ffc107;
  background: #fffbe6;
}

.qr-kpi-overdue {
  border-color: #dc3545;
  background: #fff0f0;
}

/* ── QR Result Last Visit ── */
.qr-result-last-visit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8f5ec;
  border-radius: 10px;
  border-left: 4px solid #d4a017;
}

.qr-result-last-visit-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #715d2b;
  white-space: nowrap;
}

.qr-result-last-visit-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: #222;
}

/* ── Legacy head / badge / meta (keep for unmatched state) ── */
.qr-result-head {
  display: grid;
  justify-items: start;
  align-items: start;
  gap: 8px;
}

.qr-result-title-group {
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
}

.qr-result-title-group strong {
  font-size: 1.14rem;
}

.qr-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  border-radius: 999px;
  border: 2px solid #7d5d00;
  background: #fff4c3;
  color: #6a4d00;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 4px 10px;
}

.qr-result-badge.ok {
  border-color: #1e6f39;
  background: #e8fff1;
  color: #1e6f39;
}

.qr-result-lead {
  margin: 0;
  color: #4e4e4e;
  font-size: 0.84rem;
  line-height: 1.5;
}

.qr-result-meta {
  margin: 0;
  display: grid;
  gap: 8px;
}

.qr-result-meta div {
  display: grid;
  gap: 2px;
}

.qr-result-meta dt {
  font-size: 0.72rem;
  font-weight: 800;
  color: #715d2b;
}

.qr-result-meta dd {
  margin: 0;
  font-size: 0.9rem;
  color: #222;
  line-height: 1.45;
}

.qr-result-raw {
  word-break: break-all;
  font-size: 0.78rem !important;
}

/* ── QR Action Buttons (大きく目立つ) ── */
.qr-result-actions {
  margin-top: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.qr-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  background: #fffdf6;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1a1a1a;
  cursor: pointer;
  transition: background .15s, transform .1s;
  touch-action: manipulation;
}

.qr-action-btn:hover,
.qr-action-btn:active {
  background: #fef6d8;
  transform: scale(1.02);
}

.qr-action-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.qr-result-actions .table-action-btn {
  position: relative;
  z-index: 1;
  touch-action: manipulation;
}

.qr-result-recent {
  border-top: 2px dashed #d4c07a;
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.qr-result-section-head {
  display: grid;
  gap: 2px;
}

.qr-result-section-head strong {
  font-size: 0.92rem;
}

.qr-result-section-head span {
  color: #6a6a6a;
  font-size: 0.78rem;
  line-height: 1.5;
}

.qr-result-recent-list li {
  background: #fffdf6;
}

@media (max-width: 480px) {
  .qr-result-kpi-row {
    grid-template-columns: 1fr;
  }
  .qr-result-actions {
    grid-template-columns: 1fr;
  }
  .qr-result-customer-name {
    font-size: 1.3rem;
  }
}

.coupon-customer-picker {
  margin-top: 8px;
  border-width: 2px;
  box-shadow: none;
  background: #f7f7f7;
}

.coupon-customer-picker h3 {
  margin: 0;
  font-size: 0.92rem;
}

.coupon-customer-filters {
  margin-top: 6px;
}

.coupon-customer-selected-row {
  background: #fff7cc;
}

.coupon-customer-picker tbody tr[data-coupon-customer-row-key] {
  cursor: pointer;
}

.coupon-customer-name {
  font-weight: 700;
}

.coupon-customer-meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.coupon-customer-select-btn.active {
  background: #111 !important;
  color: #f5b500 !important;
  border-color: #111 !important;
}

.coupon-master-name {
  font-weight: 800;
}

.coupon-master-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coupon-master-actions .table-action-btn {
  min-width: 60px;
}

.coupon-editing-row {
  background: #fff7cc;
}

.coupon-admin-layout {
  display: grid;
  gap: 12px;
}

.coupon-admin-lead {
  margin: -2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.coupon-admin-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.coupon-admin-flow li {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbf9;
  padding: 7px 8px;
  display: grid;
  gap: 2px;
}

.coupon-admin-flow strong {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #6d7f78;
}

.coupon-admin-flow span {
  font-size: 0.78rem;
  font-weight: 800;
  color: #173f35;
}

.coupon-admin-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.coupon-admin-block-head {
  display: grid;
  gap: 4px;
}

.coupon-admin-block-head-inline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.coupon-admin-block-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.coupon-admin-block-head p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.coupon-quick-presets {
  margin-top: 4px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px;
  background: #f8fbfa;
}

.coupon-quick-presets .section-head {
  margin-bottom: 0;
}

.coupon-quick-presets-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.coupon-quick-presets-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--zenith-ink-soft, #666);
  white-space: nowrap;
}

.coupon-admin-block .table-wrap {
  margin-top: -2px;
}

.point-perk-list-head {
  margin-top: 12px;
}

.point-award-card {
  align-content: start;
}

.point-grant-quick-presets {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #f8fbfa;
}

.point-grant-quick-presets .section-head {
  margin-bottom: 0;
}

.point-grant-quick-actions {
  flex-wrap: wrap;
}

.point-grant-meta {
  padding: 10px 12px;
}

.point-grant-meta-ready {
  background: #f8fbf0;
  border: 1px solid #dbe7c1;
}

.point-grant-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.point-grant-meta-grid div {
  display: grid;
  gap: 2px;
}

.point-grant-meta-grid span {
  font-size: 0.74rem;
  color: var(--muted);
}

.point-grant-meta-grid strong {
  font-size: 0.88rem;
  line-height: 1.45;
}

.point-transaction-copy {
  display: grid;
  gap: 4px;
}

.point-transaction-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.point-transaction-lock {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--muted);
}

@media (max-width: 1200px) {
  .coupon-admin-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .coupon-admin-flow {
    grid-template-columns: 1fr;
  }

  .point-grant-meta-grid {
    grid-template-columns: 1fr;
  }

  .coupon-admin-block-head-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .vehicle-editor-section-head,
  .vehicle-editor-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .vehicle-editor-card-tools {
    justify-content: flex-start;
  }

  .vehicle-editor-grid {
    grid-template-columns: 1fr;
  }

  .vehicle-editor-grid label:first-child,
  .vehicle-editor-grid label:nth-child(3) {
    grid-column: auto;
  }
}

.status {
  font-size: 0.82rem;
  color: var(--muted);
}

.status.ok {
  color: var(--ok);
}

.status.error {
  color: var(--danger);
}

.table-wrap {
  overflow: auto;
}

.appointment-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.appointment-table {
  width: 100%;
  table-layout: fixed;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  white-space: nowrap;
}

th {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.appointment-table .appointment-col-reserved {
  width: 10.5rem;
}

.appointment-table .appointment-col-customer {
  width: 12rem;
}

.appointment-table .appointment-col-line {
  width: 10.5rem;
}

.appointment-table .appointment-col-service {
  width: 8.5rem;
}

.appointment-table .appointment-col-status {
  width: 7.5rem;
}

.appointment-table .appointment-col-note {
  width: auto;
}

.appointment-table .appointment-col-created {
  width: 10.5rem;
}

.appointment-table .appointment-col-actions {
  width: 10rem;
}

.appointment-table th,
.appointment-table td {
  vertical-align: top;
}

.appointment-table td {
  white-space: normal;
}

.appointment-datetime {
  display: grid;
  gap: 2px;
}

.appointment-datetime strong {
  font-size: 0.83rem;
  line-height: 1.18;
  word-break: break-word;
}

.appointment-datetime span {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.2;
}

.appointment-customer {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.appointment-customer strong {
  font-size: 0.84rem;
  line-height: 1.25;
  word-break: break-word;
}

.appointment-customer span {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
  word-break: break-word;
}

.appointment-line-id {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-note {
  display: -webkit-box;
  max-width: 100%;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

.appointment-note-empty {
  display: inline-block;
  max-width: 100%;
  line-height: 1.35;
  color: #7a7a7a;
}

.appointment-cell-service,
.appointment-cell-status,
.appointment-cell-note {
  word-break: break-word;
}

.appointment-cell-actions {
  min-width: 0;
}

.appointment-table .table-actions {
  display: grid;
  gap: 6px;
}

.appointment-table .table-action-btn,
.appointment-table .button-link {
  width: 100%;
  min-height: 2.35rem;
  padding: 7px 8px;
  text-align: center;
  white-space: normal;
}

.appointment-table .table-action-note {
  margin-top: 6px;
  white-space: normal;
  line-height: 1.28;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ebf8f3;
  color: #0b7f5f;
}

.badge.fail {
  background: #fde8e8;
  color: #a11212;
}

.badge.status-requested {
  background: #ebf8f3;
  color: #0b7f5f;
}

.badge.status-confirmed {
  background: #dcfce7;
  color: #166534;
}

.badge.status-cancel_requested {
  background: #fff7ed;
  color: #9a3412;
}

.badge.status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.wide {
  grid-column: 1 / -1;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.calendar-view-switch {
  margin-bottom: 8px;
}

.calendar-view-btn.active {
  background: #111;
  color: #f5b500;
  border-color: #111;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-head,
.calendar-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 78px;
  padding: 6px;
  background: #fff;
}

.calendar-head {
  min-height: auto;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  background: #f8fcfa;
}

.calendar-cell {
  text-align: left;
  cursor: pointer;
}

.calendar-cell .day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  font-size: 0.84rem;
  margin-bottom: 6px;
}

.calendar-cell .count {
  display: inline-block;
  font-size: 0.72rem;
  color: #0f766e;
  background: #e6fffa;
  padding: 1px 6px;
  border-radius: 999px;
}

.calendar-cell.muted {
  opacity: 0.45;
}

.calendar-cell.today {
  border-color: #0d9488;
}

.calendar-cell.today .day {
  background: #0d9488;
  color: #fff;
}

.calendar-cell.selected {
  border-color: #0b8d69;
  box-shadow: inset 0 0 0 2px rgba(11, 141, 105, 0.2);
}

.calendar-day-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.calendar-day-list li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  font-size: 0.85rem;
}

/* ── Inspection Calendar ── */
.inspection-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inspection-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 700;
}
.inspection-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}
.inspection-legend-item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.inspection-legend-overdue { background: #dc2626; }
.inspection-legend-overdue::before { background: #fff; }
.inspection-legend-urgent { background: #ea580c; }
.inspection-legend-urgent::before { background: #fff; }
.inspection-legend-soon { background: #d97706; }
.inspection-legend-soon::before { background: #fff; }
.inspection-legend-normal { background: #65a30d; }
.inspection-legend-normal::before { background: #fff; }

.inspection-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.inspection-cal-head,
.inspection-cal-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 78px;
  padding: 6px;
  background: #fff;
}

.inspection-cal-head {
  min-height: auto;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  background: #f8fcfa;
}

.inspection-cal-cell {
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.inspection-cal-cell .day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  font-size: 0.84rem;
  margin-bottom: 4px;
}

.inspection-cal-cell.muted {
  opacity: 0.45;
}

.inspection-cal-cell.today {
  border-color: #0d9488;
}

.inspection-cal-cell.today .day {
  background: #0d9488;
  color: #fff;
}

.inspection-cal-cell.selected {
  border-color: #d97706;
  box-shadow: inset 0 0 0 2px rgba(217, 119, 6, 0.25);
}

.inspection-cal-cell .inspection-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.inspection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.inspection-dot.overdue { background: #dc2626; }
.inspection-dot.urgent { background: #ea580c; }
.inspection-dot.soon { background: #d97706; }
.inspection-dot.normal { background: #65a30d; }

.inspection-cal-count {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  margin-top: 2px;
}
.inspection-cal-count.overdue { background: #fecaca; color: #991b1b; }
.inspection-cal-count.urgent { background: #fed7aa; color: #9a3412; }
.inspection-cal-count.soon { background: #fef3c7; color: #92400e; }
.inspection-cal-count.normal { background: #ecfccb; color: #3f6212; }

.inspection-cal-day-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.inspection-cal-day-list li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.inspection-cal-day-list li .insp-urgency {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inspection-cal-day-list li .insp-urgency.overdue { background: #dc2626; }
.inspection-cal-day-list li .insp-urgency.urgent { background: #ea580c; }
.inspection-cal-day-list li .insp-urgency.soon { background: #d97706; }
.inspection-cal-day-list li .insp-urgency.normal { background: #65a30d; }

.inspection-cal-day-list li .insp-info {
  flex: 1;
  min-width: 0;
}

.inspection-cal-day-list li .insp-customer {
  font-weight: 700;
}

.inspection-cal-day-list li .insp-vehicle {
  font-size: 0.78rem;
  color: var(--muted);
}

.inspection-cal-day-list li .insp-date-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.insp-date-badge.overdue { background: #fecaca; color: #991b1b; }
.insp-date-badge.urgent { background: #fed7aa; color: #9a3412; }
.insp-date-badge.soon { background: #fef3c7; color: #92400e; }
.insp-date-badge.normal { background: #ecfccb; color: #3f6212; }

.inspection-cal-day-list li .insp-action-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  border: var(--tactical-line);
  border-radius: var(--tactical-radius);
  background: var(--tactical-yellow);
  color: var(--tactical-ink);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--tactical-shadow-soft);
  transition: box-shadow 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.inspection-cal-day-list li .insp-action-btn:hover {
  box-shadow: var(--tactical-shadow);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .inspection-cal-grid {
    gap: 3px;
  }
  .inspection-cal-head,
  .inspection-cal-cell {
    min-height: 56px;
    padding: 4px;
    font-size: 0.72rem;
  }
  .inspection-cal-cell .day {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.72rem;
  }
  .inspection-cal-day-list li {
    flex-wrap: wrap;
  }
}

.timeline-date-label {
  min-width: 160px;
}

.timeline-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.timeline-hour-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.timeline-hour-axis {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.timeline-hour-content {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.timeline-hour-content.empty {
  display: flex;
  align-items: center;
}

.timeline-slot-empty,
.timeline-empty {
  color: var(--muted);
  font-size: 0.84rem;
}

.timeline-empty {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.timeline-appointment {
  border: 1px dashed #7a7a7a;
  border-radius: 10px;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.timeline-appointment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.timeline-appointment-body {
  display: grid;
  gap: 3px;
  font-size: 0.84rem;
}

.timeline-note {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Admin theme (orange) */
body:not(.liff-body) {
  --bg: #f5b500;
  --surface: #ececec;
  --line: #1f1f1f;
  --text: #111111;
  --muted: #3f3f3f;
  --primary: #f5b500;
  --primary-strong: #ffd24a;
  --ok: #0f6b50;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.26), transparent 42%),
    #f5b500;
}

body:not(.liff-body) .container {
  padding: 14px 0 34px;
}

body:not(.liff-body) header {
  margin-bottom: 10px;
}

body:not(.liff-body) h1 {
  font-weight: 900;
  letter-spacing: 0.01em;
}

body:not(.liff-body) .card {
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
}

body:not(.liff-body) .admin-shell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body:not(.liff-body) .admin-sidebar {
  background: #efefef;
  border-width: 2px;
  box-shadow: none;
}

body:not(.liff-body) .admin-main-header {
  background: #efefef;
  border-width: 2px;
  box-shadow: none;
}

body:not(.liff-body) .admin-page-tab {
  border: 2px solid #111;
  background: #fff8de;
  color: #1c1c1c;
}

body:not(.liff-body) .admin-page-tab:hover {
  background: #fff0b8;
}

body:not(.liff-body) .admin-brand {
  border-bottom: 2px solid #b8b8b8;
}

body:not(.liff-body) .admin-nav a {
  border: 2px solid #111;
  background: #fff8de;
  color: #1c1c1c;
}

body:not(.liff-body) .admin-nav a:hover {
  background: #fff0b8;
}

body:not(.liff-body) .admin-nav a.active {
  background: #111;
  color: #f5b500;
}

body:not(.liff-body) .nav-badge {
  border: 2px solid #111;
  background: #a11818;
  color: #fff4d6;
}

body:not(.liff-body) .kpi-card {
  border: 2px solid #181818;
  background: #fffdf6;
}

body:not(.liff-body) .dashboard-panel,
body:not(.liff-body) .mini-kpi-card,
body:not(.liff-body) .dashboard-list li {
  border: 2px solid #1f1f1f;
  background: #fffdf6;
}

body:not(.liff-body) .notification-dock {
  background: #ececec;
}

body:not(.liff-body) .notification-item {
  border: 2px solid #1f1f1f;
  background: #fffdf7;
}

body:not(.liff-body) .notification-empty {
  border: 2px solid #1f1f1f;
}

body:not(.liff-body) .card h2 {
  font-size: 1.05rem;
  font-weight: 800;
}

body:not(.liff-body) input,
body:not(.liff-body) textarea,
body:not(.liff-body) select {
  border: 2px solid #232323;
  border-radius: 12px;
  background: #fffef8;
}

body:not(.liff-body) button {
  border: 2px solid #111;
  border-radius: 12px;
  color: #111;
  background: var(--primary);
  font-weight: 800;
}

body:not(.liff-body) button:hover {
  background: var(--primary-strong);
}

body:not(.liff-body) button.secondary {
  background: #ffffff;
  color: #111;
}

body:not(.liff-body) button:disabled {
  background: #d6d6d6;
  color: #4a4a4a;
  border-color: #7b7b7b;
}

body:not(.liff-body) .button-link {
  border: 2px solid #111;
  border-radius: 12px;
  background: var(--primary);
  color: #111;
  font-weight: 800;
}

body:not(.liff-body) .button-link:hover {
  background: var(--primary-strong);
}

body:not(.liff-body) .badge {
  background: #111;
  color: #f5b500;
}

body:not(.liff-body) .badge.fail {
  background: #8a1111;
  color: #ffffff;
}

body:not(.liff-body) .badge.status-requested {
  background: #111;
  color: #f5b500;
}

body:not(.liff-body) .badge.status-confirmed {
  background: #115e3f;
  color: #ffffff;
}

body:not(.liff-body) .badge.status-cancel_requested {
  background: #7c2d12;
  color: #fff7e6;
}

body:not(.liff-body) .badge.status-cancelled {
  background: #8f1d1d;
  color: #ffffff;
}

body:not(.liff-body) .coupon-admin-lead {
  color: #3f3f3f;
}

body:not(.liff-body) .coupon-admin-flow li {
  border: 2px solid #1f1f1f;
  background: #fff8d8;
}

body:not(.liff-body) .coupon-admin-flow strong {
  color: #8a6a00;
}

body:not(.liff-body) .coupon-admin-flow span {
  color: #111;
}

body:not(.liff-body) .coupon-admin-block {
  border: 2px solid #1f1f1f;
  background: #fdfdfd;
}

body:not(.liff-body) .coupon-quick-presets {
  border: 2px dashed #949494;
  background: #f5f5f5;
}

body:not(.liff-body) .customer-list-filters {
  border: 2px solid #1f1f1f;
  background: #f3f3f3;
}

body:not(.liff-body) th,
body:not(.liff-body) td {
  border-bottom: 1px solid #333;
}

body:not(.liff-body) .calendar-head,
body:not(.liff-body) .calendar-cell {
  border: 2px solid #1f1f1f;
  background: #fffdf6;
}

body:not(.liff-body) .calendar-head {
  background: #fff7da;
  color: #353535;
}

body:not(.liff-body) .calendar-cell.today {
  border-color: #111;
}

body:not(.liff-body) .calendar-cell.today .day {
  background: #111;
  color: #f5b500;
}

body:not(.liff-body) .timeline-hour-axis,
body:not(.liff-body) .timeline-hour-content,
body:not(.liff-body) .timeline-empty {
  border: 2px solid #1f1f1f;
  background: #fffdf7;
}

body:not(.liff-body) .timeline-appointment {
  border: 2px dashed #3a3a3a;
  background: #fff;
}

.liff-body {
  min-height: 100vh;
  margin: 0;
  overflow-anchor: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.26), transparent 42%),
    #f5b500;
}

#myPageView,
.mypage-route-page,
.mypage-hero,
.mypage-route-head {
  overflow-anchor: none;
}

.liff-body.liff-loading-active {
  overflow: hidden;
}

.liff-body.booking-selection-lock {
  overflow-x: hidden;
  overflow-y: auto;
}

.liff-initial-loading {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.2), transparent 35%),
    radial-gradient(circle at 80% 100%, rgba(0, 0, 0, 0.08), transparent 45%),
    #f5b500;
}

.liff-initial-loading[hidden] {
  display: none;
}

.liff-initial-loading-card {
  width: min(340px, 92vw);
  border: 3px solid #111;
  border-radius: 20px;
  background: #fffdf3;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
  padding: 24px 16px 20px;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.liff-initial-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 5px solid #2b2b2b;
  border-right-color: transparent;
  border-bottom-color: #f5b500;
  animation: liff-spin 0.85s linear infinite;
}

.liff-initial-loading-text {
  margin: 0;
  color: #111;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

@keyframes liff-spin {
  to {
    transform: rotate(360deg);
  }
}

.liff-container {
  width: min(760px, 94vw);
  margin: 0 auto;
  padding: 16px 0 calc(148px + env(safe-area-inset-bottom));
}

.liff-body .card {
  background: #ebebeb;
  border: 3px solid #111;
  border-radius: 20px;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.16);
}

.liff-body button {
  border: 2px solid #111;
  border-radius: 14px;
  color: #111;
  background: #f5b500;
  font-weight: 700;
}

.liff-body button.secondary {
  background: #ffffff;
}

.liff-body button:hover {
  background: #ffd24a;
}

.liff-close-dock {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(420px, 78vw);
  z-index: 9000;
  pointer-events: none;
}

.liff-close-btn-wide {
  width: 100%;
  min-height: 50px;
  border-radius: 16px !important;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: #ffffff !important;
  pointer-events: auto;
}

.profile-quick-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 14px !important;
  background: #fffdf5 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 10px !important;
  text-align: left;
}

#liffMainStatusCard {
  padding: 8px 10px;
}

.profile-quick-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  border: 2px solid #111;
  border-radius: 999px;
  background: #f5b500;
  color: #111;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 3px 8px;
}

.profile-quick-name {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 900;
  color: #10342b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-quick-badge {
  margin: 0 !important;
  min-width: auto !important;
  width: auto !important;
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  white-space: nowrap;
}

.profile-quick-btn .link-state.profile-quick-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 999px;
  line-height: 1;
  background: #ffffff;
}

.profile-quick-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  color: #111;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.liff-body.liff-compact-header #liffMainStatusCard {
  padding: 8px 10px;
}

.identity-strip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed #2d2d2d;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.identity-strip.identity-simple {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
  grid-template-columns: 1fr;
}

.identity-status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mypage-poster-head {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mypage-poster-head h3 {
  margin: 0;
  font-size: clamp(1.28rem, 4.2vw, 1.95rem);
  line-height: 1.1;
  color: #b01010;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.mypage-poster-head p {
  margin: 0;
  color: #5b5b5b;
  font-size: 0.92rem;
  font-weight: 700;
}

.mypage-orbit-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 10px 8px 6px;
  margin-bottom: 4px;
  background:
    radial-gradient(circle at 50% 38%, rgba(111, 187, 154, 0.18), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 80%);
}

.mypage-orbit-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.56;
  background:
    radial-gradient(circle at 50% 31%, transparent 0 20%, rgba(119, 186, 160, 0.36) 20.5% 21%, transparent 21.4% 33%, rgba(119, 186, 160, 0.3) 33.4% 33.9%, transparent 34.2% 45%, rgba(119, 186, 160, 0.24) 45.5% 46%, transparent 46.5% 100%);
}

.mypage-hero {
  position: relative;
  z-index: 0;
  width: min(520px, 100%);
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mypage-home-shell {
  display: grid;
  gap: 9px;
}

.mypage-home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 3px 0;
}

.mypage-home-brand {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.mypage-home-brand-title {
  color: #223a60;
  font-size: clamp(1.28rem, 4.5vw, 1.54rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.mypage-home-brand-sub {
  color: #75859d;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mypage-home-greeting {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.mypage-hero-kicker {
  margin: 0;
  font-size: 0.72rem;
  color: #7a8798;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mypage-hero h3 {
  margin: 0;
  color: #20314c;
  font-size: clamp(1.02rem, 4vw, 1.18rem);
  line-height: 1.2;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-member-card {
  display: grid;
  gap: 0;
}

.home-member-card-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.home-member-card-collapsed,
.home-member-card-expanded {
  border: 1.5px solid #d9e5f0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 16px 30px rgba(27, 49, 82, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.home-member-card-collapsed {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 22px 18px 20px;
  text-align: center;
}

.home-member-card-visual {
  display: grid;
  place-items: center;
}

.home-member-card-visual-frame {
  width: min(52vw, 172px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid #e3ebf3;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 252, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(22, 44, 73, 0.08);
  padding: 20px;
}

.home-member-card-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-member-card-copy {
  display: grid;
  gap: 6px;
}

.home-member-card-copy strong {
  color: #23375a;
  font-size: clamp(1.45rem, 5.4vw, 1.9rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.home-member-card-copy small {
  color: #7b8798;
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 700;
}

.home-member-card-expanded {
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
}

.home-member-card-expanded-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-member-card-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #73819a;
}

.member-card-tier-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 2px solid #111;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2bf 0%, #ffd764 100%);
  color: #111;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.member-card-tier-badge-trigger {
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.member-card-tier-badge-trigger:hover {
  transform: translateY(-1px);
}

.member-card-tier-badge-trigger:active {
  transform: translateY(0);
}

.member-card-tier-badge-trigger:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.18);
  outline-offset: 3px;
}

.home-member-card-close-text {
  color: #73819a;
  font-size: 0.76rem;
  font-weight: 800;
}

.home-member-card-qr-wrap {
  min-height: 236px;
  display: grid;
  place-items: center;
  border: 1.5px solid #e0e8f0;
  border-radius: 24px;
  background: #ffffff;
  padding: 12px;
}

.home-member-card-qr-wrap img {
  width: min(238px, 100%);
  height: auto;
  display: block;
  border-radius: 18px;
  background: #fff;
}

.home-member-card-fallback {
  color: #8a1010;
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: center;
}

.member-card-code-strip {
  display: inline-grid;
  justify-items: center;
  justify-self: center;
  width: fit-content;
  gap: 1px;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.member-card-code-strip-label {
  font-size: 0.52rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: #6d6d6d;
}

.member-card-code-strip strong {
  color: #3f3f3f;
  font-size: 0.66rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 900;
}

.home-member-card-page-link {
  width: 100%;
  min-height: 48px;
  border-radius: 18px !important;
  font-weight: 900;
}

.mypage-home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-stat-card {
  min-width: 0;
  min-height: 116px;
  border: 1.5px solid #dae4ec !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 251, 253, 0.96) 100%) !important;
  color: #23375a !important;
  padding: 14px 12px !important;
  display: grid !important;
  align-content: start !important;
  justify-items: start !important;
  gap: 8px;
  text-align: left;
  box-shadow: 0 9px 18px rgba(25, 43, 71, 0.06);
}

.home-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(25, 43, 71, 0.10);
}

.home-stat-label {
  color: #7a8798;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.home-stat-value {
  color: #213453;
  font-size: clamp(1.04rem, 3.8vw, 1.38rem);
  line-height: 1.04;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-stat-note {
  color: #7b8799;
  font-size: 0.72rem;
  line-height: 1.35;
  font-weight: 700;
}

.mypage-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-primary-action {
  min-width: 0;
  min-height: 116px;
  border: 0 !important;
  border-radius: 22px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center !important;
  justify-items: start !important;
  gap: 12px;
  padding: 14px 14px !important;
  text-align: left;
  box-shadow: 0 18px 30px rgba(24, 42, 69, 0.12);
}

.home-primary-action.coupon {
  background: linear-gradient(180deg, #f79d73 0%, #ef7658 100%) !important;
  color: #fff !important;
}

.home-primary-action.booking {
  background: linear-gradient(180deg, #72d2be 0%, #57bda8 100%) !important;
  color: #163539 !important;
}

.home-primary-action:hover {
  transform: translateY(-1px);
}

.home-primary-action-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 10px;
}

.home-primary-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-primary-action-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.home-primary-action-title {
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.15;
}

.home-primary-action-lead {
  font-size: 0.76rem;
  line-height: 1.4;
  font-weight: 700;
  opacity: 0.92;
}

.home-primary-action-meta {
  display: grid;
  gap: 2px;
  padding-top: 4px;
}

.home-primary-action-meta-label {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

.home-primary-action-meta-value {
  font-size: 0.98rem;
  line-height: 1.08;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.home-primary-action-meta-sub {
  font-size: 0.68rem;
  line-height: 1.3;
  font-weight: 700;
  opacity: 0.84;
}

.mypage-menu-block {
  display: grid;
  gap: 8px;
}

.mypage-menu-caption {
  margin: 0;
  padding-left: 4px;
  color: #7a8798;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mypage-menu-grid {
  display: grid;
  gap: 12px;
}

.mypage-secondary-menu {
  grid-template-columns: 1fr;
}

.mypage-menu-tile {
  max-width: none;
  min-width: 0;
}

.mypage-secondary-link {
  min-height: 86px;
  border: 1.5px solid #dae4ec !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
  color: #23375a !important;
  padding: 14px 16px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  justify-items: start !important;
  gap: 12px;
  text-align: left;
  box-shadow: 0 12px 24px rgba(25, 43, 71, 0.07);
}

.mypage-secondary-link:hover,
.mypage-secondary-link.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 248, 251, 1) 100%) !important;
}

.mypage-secondary-link .menu-illustration {
  width: 3.8rem;
  height: 3.8rem;
  border: 1.5px solid #e1e7ef;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7d9 0%, #fff1bf 100%);
  box-shadow: none;
  padding: 8px;
}

.mypage-secondary-link-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mypage-secondary-link strong {
  color: #23375a;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}

.mypage-secondary-link small {
  color: #7a8798;
  font-size: 0.74rem;
  line-height: 1.4;
  font-weight: 700;
}

.mypage-secondary-link-arrow {
  color: #9aa6b7;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
}

.member-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid #d5e1ec;
  padding: 6px 12px;
  font-size: 0.86rem;
  font-weight: 800;
  background: #fff;
  color: #243a60;
}

.member-tier.starter {
  background: #f3f6f9;
}

.member-tier.silver {
  background: #eef4f8;
}

.member-tier.gold {
  background: #fff3c4;
}

.member-tier.platinum,
.member-tier.diamond {
  background: #e2f7ff;
}

.point-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid #d8e2ea;
  padding: 6px 12px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #23375a;
  background: #fff6da;
}

.menu-icon-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #dbe3ec;
  border-radius: 999px;
  background: #fff6da;
  color: #22375a;
  font-size: 0.58rem;
  font-weight: 800;
  min-width: 3rem;
  padding: 2px 8px;
}

.menu-illustration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1.5px solid #dfe7ef;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7dc 0%, #fff0c1 100%);
  padding: 8px;
}

.menu-illustration.menu-illustration-image {
  width: 4rem;
  height: 4rem;
  border: 1.5px solid #dfe7ef;
  border-radius: 18px;
  padding: 8px;
  background: linear-gradient(180deg, #fff7dc 0%, #fff0c1 100%);
  box-shadow: none;
}

.service-illustration {
  width: 3.2rem;
  min-height: 3rem;
  border: 1.5px solid #dfe7ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff7dc 0%, #fff0c1 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.02em;
}

.service-illustration.service-illustration-image {
  padding: 7px;
  background: linear-gradient(180deg, #fff7dc 0%, #fff0c1 100%);
}

.mypage-service-tile-simple {
  background: #ffffff !important;
  padding: 10px 8px 9px !important;
  gap: 8px;
  justify-items: center !important;
  align-content: center !important;
  text-align: center;
}

.mypage-service-tile-simple:hover {
  background: #fffaf0 !important;
}

.mypage-service-tile-simple .service-illustration {
  width: 6.55rem;
  min-height: 6.55rem;
  border-radius: 22px;
  padding: 9px;
  font-size: 1.08rem;
  line-height: 1.2;
  box-shadow: 0 8px 16px rgba(25, 43, 71, 0.08);
}

.mypage-service-tile-simple .service-illustration.service-illustration-image {
  padding: 8px;
}

.mypage-service-tile-simple strong {
  font-size: 1.22rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-align: center;
}

.mypage-service-tile-simple small,
.mypage-service-tile-simple .menu-icon-token {
  display: none !important;
}

.service-illustration img,
.menu-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.point-rank-progress-panel {
  border: 2px solid #111;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff8e8 0%, #fffef7 100%);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.point-rank-progress-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(17, 17, 17, 0.18);
}

.point-rank-progress-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
}

.point-rank-progress-summary-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.point-rank-progress-summary-main {
  min-width: 0;
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.point-rank-progress-summary-copy .meta-label {
  font-size: 0.68rem;
  line-height: 1.2;
}

.point-rank-progress-summary-copy strong {
  display: block;
  font-size: clamp(1rem, 4vw, 1.2rem);
  line-height: 1.15;
  color: #10342b;
}

.point-rank-progress-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
}

.point-rank-progress-copy {
  min-width: 0;
  display: grid;
  gap: 0;
}

.point-rank-summary-trigger {
  flex: 0 0 auto;
  margin-top: 1px;
  margin-left: auto;
}

.point-rank-summary-trigger.is-open {
  background: #111;
  color: #f5b500;
}

.point-rank-progress-body {
  display: grid;
  gap: 10px;
}

.point-rank-progress-body[hidden] {
  display: none !important;
}

.point-rank-progress-panel.is-collapsed {
  gap: 0;
  padding-bottom: 10px;
}

.point-reward-meter-panel {
  border: 2px solid #111;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.2), transparent 42%),
    linear-gradient(180deg, #fff8e5 0%, #fffef8 100%);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.point-reward-meter-panel.mypage-page-btn {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.point-reward-meter-panel.mypage-page-btn:hover {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.26), transparent 44%),
    linear-gradient(180deg, #fff3cf 0%, #fffdf4 100%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

.point-reward-meter-panel.mypage-page-btn:active {
  transform: translateY(1px);
}

.point-reward-meter-panel.mypage-page-btn:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.3);
  outline-offset: 2px;
}

.point-reward-meter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.point-reward-meter-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.point-reward-meter-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-width: 4.3rem;
  padding: 2px 8px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #111;
  color: #f5b500;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.point-reward-meter-head h4 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.2;
  color: #111;
}

.point-reward-meter-description {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #5a5a5a;
}

.point-reward-meter-balance {
  min-width: 5.7rem;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 7px 9px;
  border: 2px solid #111;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.point-reward-meter-balance-label {
  font-size: 0.64rem;
  color: #7a5a00;
  font-weight: 800;
}

.point-reward-meter-balance strong {
  font-size: 1.16rem;
  line-height: 1;
  color: #111;
}

.point-reward-meter-hint {
  margin: 0;
  font-size: 0.94rem;
  color: #7a5200;
  font-weight: 900;
}

.point-reward-meter-track {
  width: 100%;
  height: 18px;
  border: 2px solid #111;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.08) 0 1px, transparent 1px) 0 0 / 18% 100%,
    #fff;
  overflow: hidden;
}

.point-reward-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5b500 0%, #f07b00 55%, #d34f00 100%);
  transition: width 0.25s ease;
}

.point-reward-meter-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #5b5b5b;
  font-weight: 800;
}

#nextPerkMeterRemain {
  font-size: clamp(0.98rem, 2.7vw, 1.08rem);
  color: #7a5200;
  font-weight: 900;
}

#nextPerkMeterTarget {
  font-size: 0.8rem;
}

.point-rank-progress-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #111;
}

.point-rank-progress-head p {
  margin: 0;
  font-size: 0.8rem;
  color: #6d5200;
  font-weight: 800;
}

.rank-progress-track {
  width: 100%;
  height: 12px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.rank-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f5b500 0%, #f06d00 100%);
  transition: width 0.25s ease;
}

.rank-tier-guide {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.rank-tier-item {
  border: 2px solid #111;
  border-radius: 10px;
  background: #fff;
  padding: 7px 8px;
  display: grid;
  gap: 2px;
}

.rank-tier-item.current {
  border-color: #a66f00;
  background: #fff1c7;
}

.rank-tier-item.completed {
  border-color: #497c6e;
  background: #edfff8;
}

.rank-tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.rank-tier-name {
  font-size: 0.84rem;
  font-weight: 900;
  color: #111;
}

.rank-tier-condition {
  font-size: 0.68rem;
  color: #7b5a00;
  font-weight: 700;
}

.rank-tier-benefit {
  margin: 0;
  font-size: 0.72rem;
  color: #3e3e3e;
}

.mypage-module {
  position: relative;
  border: 2px solid #111;
  border-radius: 16px;
  background: #ffffff;
  padding: 22px 14px 14px;
  overflow: hidden;
}

.mypage-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  border-bottom: 2px solid #a96c00;
  background: linear-gradient(180deg, #ffe08a 0%, #f5b500 100%);
}

.mypage-module > * {
  position: relative;
  z-index: 1;
}

.mypage-module-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.mypage-module .section-head {
  margin-bottom: 6px;
}

.mypage-module .section-head h3 {
  margin: 0;
  color: #111;
  font-size: 0.94rem;
}

.point-module .section-head h3::before,
.perk-module .section-head h3::before,
.coupon-module .section-head h3::before,
.calendar-module .section-head h3::before {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  border: 1px solid #1f1f1f;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  background: #fff4cf;
  color: #7a4e00;
  vertical-align: middle;
}

.point-module .section-head h3::before {
  content: 'ポイント';
}

.perk-module .section-head h3::before {
  content: '特典';
}

.coupon-module .section-head h3::before {
  content: 'クーポン';
}

.calendar-module .section-head h3::before {
  content: '予約';
}

.point-module {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.2), transparent 42%),
    #fff;
}

.perk-module,
.coupon-module,
.calendar-module {
  background:
    radial-gradient(circle at 0% 100%, rgba(245, 181, 0, 0.16), transparent 48%),
    #fff;
}

.home-booking-module {
  margin-top: 12px;
  padding-top: 16px;
  background:
    linear-gradient(180deg, #fffdf5 0%, #ffffff 34%),
    radial-gradient(circle at 0% 100%, rgba(245, 181, 0, 0.14), transparent 50%),
    #fff;
}

.home-booking-module::before {
  height: 8px;
  border-bottom: 1px solid #c88c0b;
  background: linear-gradient(180deg, #ffd96e 0%, #f2b522 100%);
}

.home-booking-module .section-head {
  margin-bottom: 10px;
  align-items: flex-start;
  gap: 10px;
}

.home-booking-module .section-title-group {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.home-booking-module .section-head h3 {
  font-size: 1rem;
  line-height: 1.2;
}

.home-booking-module .section-subtitle {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #646464;
}

.home-booking-module .section-head .table-action-btn {
  margin-top: 1px;
  white-space: nowrap;
}

.home-booking-module .booking-history.compact {
  margin-top: 2px;
}

.home-booking-module #upcomingStatus {
  margin-top: 8px;
  padding-left: 2px;
}

.booking-form-module,
.booking-history-module {
  padding: 16px 14px 14px;
  padding-top: 12px;
  background:
    linear-gradient(180deg, #fffef8 0%, #ffffff 34%),
    radial-gradient(circle at 0% 100%, rgba(245, 181, 0, 0.13), transparent 49%),
    #fff;
}

.booking-form-module::before,
.booking-history-module::before {
  height: 7px;
  border-bottom: 1px solid #c88c0b;
  background: linear-gradient(180deg, #ffd968 0%, #f2b31f 100%);
}

.booking-module-head {
  margin-bottom: 14px;
  padding: 2px 2px 0;
  align-items: flex-start;
  gap: 12px;
}

.booking-module-head .section-title-group {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.booking-module-head h3 {
  font-size: 1.08rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  word-break: keep-all;
}

.booking-module-head .section-subtitle {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #666;
}

.booking-module-head h3::before {
  margin-right: 0;
  flex: 0 0 auto;
}

.booking-form-stack {
  gap: 12px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffefb 0%, #fff7e5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.booking-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(122, 88, 0, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-weight: 800;
  color: #4f4f4f;
  font-size: 0.82rem;
}

.booking-field-help {
  display: block;
  margin-top: -2px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #6a5d28;
  font-weight: 700;
}

.booking-field-warning {
  margin: -2px 2px 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #c53a1b;
  font-weight: 900;
}

.booking-field-warning::before {
  content: '※';
}

.booking-slot-picker {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(122, 88, 0, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 252, 242, 0.96) 0%, rgba(255, 247, 224, 0.92) 100%);
}

.booking-slot-picker-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.booking-slot-picker-title {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

.booking-slot-picker-title strong {
  font-size: 0.95rem;
  color: #533400;
}

.booking-slot-picker-title small {
  font-size: 0.72rem;
  color: #7a5a12;
  line-height: 1.4;
}

.booking-slot-nav-btn {
  min-width: 78px;
  min-height: 40px;
  padding-inline: 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 900;
}

.booking-slot-grid-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(122, 88, 0, 0.15);
  background: rgba(255, 255, 255, 0.9);
}

.booking-slot-grid-track {
  display: grid;
  grid-template-columns: 72px repeat(calc(var(--booking-slot-columns) - 1), minmax(56px, 1fr));
  width: max-content;
  min-width: 100%;
}

.booking-slot-grid-corner,
.booking-slot-grid-day,
.booking-slot-grid-time,
.booking-slot-grid-cell {
  min-height: 48px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(122, 88, 0, 0.14);
  border-bottom: 1px solid rgba(122, 88, 0, 0.14);
}

.booking-slot-grid-corner,
.booking-slot-grid-day {
  background: #fff7df;
  color: #6c5610;
  font-weight: 900;
}

.booking-slot-grid-day {
  gap: 1px;
  padding: 6px 4px;
}

.booking-slot-grid-day strong {
  font-size: 1rem;
  line-height: 1;
}

.booking-slot-grid-day span {
  font-size: 0.78rem;
  line-height: 1;
}

.booking-slot-grid-day.is-today {
  background: #ffe39d;
}

.booking-slot-grid-day.is-weekend {
  color: #8f4f33;
}

.booking-slot-grid-day.is-closed {
  background: #f3efe6;
  color: #a5997b;
}

.booking-slot-grid-time {
  background: #fffdfa;
  color: #4f4f4f;
  font-size: 0.82rem;
  font-weight: 900;
}

.booking-slot-grid-cell {
  padding: 0;
  background: #ffffff;
  font-size: 1.08rem;
  color: #999;
}

.booking-slot-grid-cell-open {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #da6b77;
  font-weight: 900;
}

.booking-slot-grid-cell-open.is-selected {
  background: #ffd15c;
  color: #573300;
}

.booking-slot-grid-cell-full {
  color: #c7913b;
}

.booking-slot-grid-cell-closed,
.booking-slot-grid-cell-past {
  background: #f7f4ec;
  color: #9b9587;
}

.booking-slot-grid-empty {
  padding: 18px 14px;
  text-align: center;
  color: #6c5610;
  font-size: 0.82rem;
  font-weight: 700;
}

.booking-form-stack input,
.booking-form-stack select,
.booking-form-stack textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 2px solid #ddd6bf;
  border-radius: 12px;
  padding: 11px 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
  font-size: 0.9rem;
}

.booking-form-stack input[type='datetime-local'],
.booking-form-stack select {
  min-height: 46px;
}

.booking-form-stack input[type='datetime-local'] {
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.booking-form-stack input[type='datetime-local']::-webkit-date-and-time-value {
  text-align: left;
}

.booking-form-stack input[type='datetime-local']::-webkit-datetime-edit {
  padding: 0;
}

.booking-form-stack textarea {
  min-height: 88px;
}

.booking-field-optional textarea {
  min-height: 68px;
}

.booking-option-accordion {
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px;
  border: 3px solid #111;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffe17a 0%, #ffd14f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 8px 18px rgba(197, 140, 11, 0.16);
}

.booking-option-accordion[hidden] {
  display: none !important;
}

.booking-option-accordion.is-open {
  padding-bottom: 14px;
}

.booking-option-toggle {
  display: grid;
  gap: 8px;
}

.booking-option-toggle-btn {
  width: 100%;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.92rem;
  font-weight: 900;
  text-align: left;
}

.booking-option-toggle-btn-label {
  min-width: 0;
  flex: 1 1 auto;
  padding-left: 10px;
  color: #111;
  font-size: clamp(1.24rem, 4.8vw, 1.82rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.booking-option-toggle-btn-state {
  flex: 0 0 auto;
  min-width: 6.4rem;
  padding: 13px 22px;
  border: 3px solid #111;
  border-radius: 999px;
  background: #fffdf8;
  color: #6a5200;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 2px 0 rgba(17, 17, 17, 0.08);
}

.booking-option-toggle-btn.is-open .booking-option-toggle-btn-state {
  background: #fffdf2;
}

.booking-option-toggle-summary {
  display: block;
  padding: 0 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #6f5200;
  font-weight: 700;
}

.booking-option-toggle-summary[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .booking-option-accordion {
    padding: 13px 12px 11px;
    border-radius: 22px;
  }

  .booking-option-toggle-btn {
    min-height: 72px;
    gap: 10px;
  }

  .booking-option-toggle-btn-label {
    padding-left: 4px;
    font-size: clamp(1.04rem, 5.4vw, 1.34rem);
  }

  .booking-option-toggle-btn-state {
    min-width: 5.1rem;
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

.booking-option-fields-head {
  display: grid;
  gap: 5px;
}

.booking-option-fields-head strong {
  font-size: 0.88rem;
  font-weight: 900;
  color: #533400;
}

.booking-option-fields-head small {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #7a5a12;
}

.booking-option-fields {
  display: grid;
  gap: 12px;
  padding: 14px 12px 12px;
  border: 1px dashed rgba(122, 88, 0, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 251, 238, 0.94) 0%, rgba(255, 247, 224, 0.92) 100%);
}

.booking-option-fields[hidden] {
  display: none !important;
}

.booking-option-item {
  display: grid;
  gap: 8px;
}

.booking-option-item[hidden] {
  display: none !important;
}

.booking-option-field {
  margin: 0;
}

.booking-option-custom-field {
  background: rgba(255, 253, 248, 0.96);
}

.booking-form-footer {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px dashed rgba(122, 88, 0, 0.22);
}

.booking-form-help {
  padding: 0 4px;
  line-height: 1.35;
  font-size: 0.72rem;
}

.booking-submit-btn {
  width: 100%;
  min-height: 46px;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
}

.booking-submit-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.booking-form-feedback {
  display: grid;
  gap: 8px;
  padding: 0 2px 2px;
}

.booking-calendar-link-wrap {
  display: grid;
  gap: 8px;
}

.booking-calendar-link-wrap .small-help {
  padding: 0 2px;
  line-height: 1.5;
}

.booking-history-module {
  margin-top: 12px;
}

.section-head.booking-history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.booking-history-refresh-btn {
  justify-self: end;
  width: auto;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.booking-history-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.booking-history-filter-btn {
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px !important;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.booking-route-layout {
  display: grid;
  gap: 10px;
}

.booking-route-layout.booking-selection-mode {
  gap: 8px;
}

.booking-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.booking-route-page.booking-selection-mode .booking-view-switch {
  gap: 6px;
}

.booking-view-btn {
  min-height: 42px;
  font-size: 0.9rem;
  font-weight: 900;
  background: #fff !important;
}

.booking-route-page.booking-selection-mode .booking-view-btn {
  min-height: 38px;
  font-size: 0.84rem;
}

.booking-view-btn.active {
  background: linear-gradient(180deg, #ffd965 0%, #f4ba18 100%) !important;
  color: #111 !important;
  border-color: #111 !important;
}

.booking-route-panel {
  display: none;
}

.booking-route-panel.active {
  display: block;
}

.booking-route-panel.is-entering {
  animation: mypage-route-enter 300ms cubic-bezier(0.2, 0.9, 0.24, 1);
}

.booking-route-panel .booking-history-module {
  margin-top: 0;
}

.booking-wizard-module {
  padding-top: 8px;
}

.booking-route-page.booking-selection-mode .booking-wizard-module {
  padding-top: 8px;
}

.booking-wizard-topbar {
  position: relative;
  display: grid;
  align-items: start;
  gap: 8px;
  margin-bottom: 8px;
}

.booking-route-page.booking-selection-mode .booking-wizard-topbar {
  gap: 8px;
  margin-bottom: 8px;
}

.booking-wizard-cancel-btn {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.76rem;
}

.booking-wizard-title-wrap {
  min-width: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 3px;
  padding: 0 64px 0 64px;
}

.registration-wizard-topbar .booking-wizard-title-wrap {
  padding-inline: 0;
}

.booking-step-counter {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #7a5200;
}

.booking-step-title {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.08;
  color: #111;
}

.booking-step-lead {
  display: none;
}

.booking-step-indicators {
  --booking-step-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
  align-items: start;
}

.booking-step-indicators::before,
.booking-step-indicators::after {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(100% / 8);
  height: 3px;
  border-radius: 999px;
  z-index: 0;
}

.booking-step-indicators::before {
  width: calc(100% - (100% / 4));
  background: #ddd8cb;
}

.booking-step-indicators::after {
  width: calc((100% - (100% / 4)) * var(--booking-step-progress));
  background: linear-gradient(90deg, #9ab38f 0%, #5d7754 100%);
  transition: width 0.24s ease;
}

.registration-step-indicators {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.registration-step-indicators::before,
.registration-step-indicators::after {
  left: calc(100% / 6);
}

.registration-step-indicators::before {
  width: calc(100% - (100% / 3));
}

.registration-step-indicators::after {
  width: calc((100% - (100% / 3)) * var(--booking-step-progress));
}

.booking-route-page.booking-selection-mode .booking-step-indicators {
  gap: 4px;
  margin-bottom: 6px;
}

.booking-route-page.booking-selection-mode .booking-step-indicators::before,
.booking-route-page.booking-selection-mode .booking-step-indicators::after {
  top: 15px;
}

.booking-step-indicator {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #8c8c8c;
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
  background: transparent;
  border: 0;
}

.booking-route-page.booking-selection-mode .booking-step-indicator {
  font-size: 0.66rem;
  gap: 4px;
}

.booking-step-indicator-dot {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid #d1d1d1;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.96rem;
  line-height: 1;
  color: #6f6f6f;
  transition:
    background 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease;
}

.booking-route-page.booking-selection-mode .booking-step-indicator-dot {
  width: 30px;
  height: 30px;
  font-size: 0.78rem;
}

.booking-step-indicator-text {
  display: block;
  font-size: 0.66rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.booking-step-indicator.active {
  color: #4f7244;
}

.booking-step-indicator.completed {
  color: #4f7244;
}

.booking-step-indicator.active .booking-step-indicator-dot {
  border-color: #4f7244;
  background: #4f7244;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(111, 141, 101, 0.14);
}

.booking-step-indicator.completed .booking-step-indicator-dot {
  border-color: #8aa07e;
  background: #eef5ea;
  color: #4f7244;
}

.booking-wizard-form {
  gap: 8px;
}

.booking-flow-status {
  min-height: 16px;
  font-size: 0.74rem;
}

.booking-flow-status:empty {
  display: none;
}

.booking-step-panel {
  display: none;
  gap: 8px;
}

.booking-step-panel.active {
  display: grid;
}

.booking-step-panel.is-entering {
  animation: mypage-route-enter 260ms cubic-bezier(0.2, 0.9, 0.24, 1);
}

.booking-step-panel.is-entering > * {
  animation: mypage-route-content-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.booking-step-panel.is-entering > *:nth-child(2) {
  animation-delay: 24ms;
}

.booking-step-panel.is-entering > *:nth-child(3) {
  animation-delay: 48ms;
}

.booking-route-page.booking-selection-mode .booking-step-panel.active[data-booking-step='1'] {
  align-content: start;
}

.booking-step-copy {
  display: grid;
  gap: 3px;
}

.booking-step-kicker {
  display: none;
}

.booking-step-copy h4 {
  display: none;
}

.booking-route-page.booking-selection-mode .booking-step-copy {
  gap: 2px;
}

.booking-step-copy-selection {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.booking-step-kicker {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 900;
  color: #7a5200;
  letter-spacing: 0.06em;
}

.booking-step-copy h4 {
  margin: 0;
  font-size: 0.96rem;
  color: #111;
}

.booking-route-page.booking-selection-mode .booking-step-copy h4 {
  font-size: 0.92rem;
}

.booking-step-description {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #666;
  text-align: center;
}

.booking-route-page.booking-selection-mode .booking-step-description {
  font-size: 0.68rem;
  line-height: 1.25;
}

.booking-route-page.booking-selection-mode .booking-step-panel.active[data-booking-step='1'] .booking-step-copy {
  display: none;
}

.booking-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.booking-route-page.booking-selection-mode .booking-service-grid {
  gap: 8px;
}

.booking-service-grid-empty {
  grid-column: 1 / -1;
  padding: 22px 16px;
  border: 2px dashed #d2bf86;
  border-radius: 18px;
  background: #fff9ea;
  color: #6c5610;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
}

.booking-service-grid-toggle {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 4px;
}

.booking-service-grid-toggle-btn {
  width: auto;
  min-width: min(100%, 17rem);
  min-height: 44px;
  padding: 0 18px;
}

.booking-service-grid-toggle-note {
  color: var(--zenith-ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.booking-service-card {
  --booking-service-mark: none;
  --booking-service-mark-size: 74px;
  --booking-service-mark-position: calc(100% + 10px) calc(100% + 10px);
  --booking-service-mark-opacity: 0.14;
  --booking-service-ambient:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 78% 18%, rgba(255, 216, 109, 0.36) 0%, rgba(255, 216, 109, 0) 38%);
  position: relative;
  min-height: clamp(132px, 17.4vh, 156px);
  padding: 8px !important;
  gap: 0;
  align-content: stretch !important;
  justify-items: stretch !important;
  text-align: left !important;
  background: linear-gradient(180deg, #fff9ea 0%, #fff0c7 100%) !important;
  border-width: 2px !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.booking-route-page.booking-selection-mode .booking-service-card {
  min-height: clamp(126px, 16.8vh, 148px);
}

.booking-service-card-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: 100%;
  border-radius: 14px;
  background:
    var(--booking-service-ambient),
    linear-gradient(180deg, #fff8dc 0%, #ffe99f 100%);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  padding: 12px 14px 10px;
}

.booking-service-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--booking-service-mark);
  background-repeat: no-repeat;
  background-position: var(--booking-service-mark-position);
  background-size: var(--booking-service-mark-size) var(--booking-service-mark-size);
  opacity: var(--booking-service-mark-opacity);
  filter: saturate(0.2) brightness(0.72);
  transform: rotate(-10deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}

.booking-service-card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 197, 72, 0.08) 100%);
  pointer-events: none;
  z-index: 0;
}

.booking-service-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  margin-top: 6px;
  padding-inline: 10px 18px;
}

.booking-service-card strong {
  display: block;
  width: 100%;
  padding-right: 0;
  font-size: 0.88rem;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-align: center;
  color: #4f3400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

.booking-service-card .service-illustration {
  position: relative;
  z-index: 1;
  width: min(100px, 100%);
  min-height: 48px;
  border-radius: 0;
  border: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.booking-route-page.booking-selection-mode .booking-service-card .service-illustration {
  width: min(94px, 100%);
  min-height: 44px;
}

.booking-service-card .service-illustration.service-illustration-image {
  padding: 0;
  background: transparent;
}

.booking-service-card-inspection {
  --booking-service-mark: url('/assets/menu-icons/inspection-main.svg');
  --booking-service-mark-size: 80px;
  --booking-service-mark-position: calc(100% + 8px) calc(100% + 10px);
  --booking-service-ambient:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 76% 24%, rgba(255, 204, 84, 0.34) 0%, rgba(255, 204, 84, 0) 40%);
}

.booking-service-card-oil {
  --booking-service-mark: url('/assets/menu-icons/oil-main.svg');
  --booking-service-mark-size: 70px;
  --booking-service-mark-position: calc(100% + 6px) calc(100% + 12px);
  --booking-service-ambient:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(circle at 82% 20%, rgba(245, 175, 34, 0.28) 0%, rgba(245, 175, 34, 0) 36%);
}

.booking-service-card-wash {
  --booking-service-mark: url('/assets/menu-icons/wash-main.svg');
  --booking-service-mark-size: 76px;
  --booking-service-mark-position: calc(100% + 6px) calc(100% + 12px);
  --booking-service-ambient:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 78% 18%, rgba(255, 224, 135, 0.32) 0%, rgba(255, 224, 135, 0) 38%);
}

.booking-service-card-coating {
  --booking-service-mark: url('/assets/menu-icons/coating-main.svg');
  --booking-service-mark-size: 78px;
  --booking-service-mark-position: calc(100% + 7px) calc(100% + 9px);
  --booking-service-ambient:
    radial-gradient(circle at 21% 20%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 79% 18%, rgba(255, 210, 118, 0.32) 0%, rgba(255, 210, 118, 0) 40%);
}

.booking-service-card-tire {
  --booking-service-mark: url('/assets/menu-icons/tire-main.svg');
  --booking-service-mark-size: 74px;
  --booking-service-mark-position: calc(100% + 9px) calc(100% + 11px);
  --booking-service-ambient:
    radial-gradient(circle at 21% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 79% 22%, rgba(240, 188, 54, 0.28) 0%, rgba(240, 188, 54, 0) 38%);
}

.booking-service-card-other {
  --booking-service-mark: url('/assets/menu-icons/maintenance-main.svg');
  --booking-service-mark-size: 76px;
  --booking-service-mark-position: calc(100% + 9px) calc(100% + 11px);
  --booking-service-ambient:
    radial-gradient(circle at 22% 19%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 80% 22%, rgba(235, 181, 48, 0.3) 0%, rgba(235, 181, 48, 0) 38%);
}

.booking-service-card .booking-service-card-arrow {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 900;
  color: #b23400;
  z-index: 2;
}

body.booking-selection-lock .liff-container {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

body.booking-selection-lock .bottom-actionbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(420px, calc(100vw - 16px));
  padding: 7px 8px;
}

body.booking-selection-lock .bottom-action-btn {
  min-height: 58px;
}

body.booking-route-inline-actions .liff-container {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

body.booking-route-inline-actions .bottom-actionbar {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: min(760px, calc(100vw - 14px));
  margin: 10px auto calc(12px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

body.booking-selection-lock .mypage-route-footer {
  display: none !important;
}

.booking-service-card.active {
  border-color: #3989d6 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.14),
    0 0 0 3px rgba(57, 137, 214, 0.18);
}

.booking-service-card.active .booking-service-card-visual {
  background:
    var(--booking-service-ambient),
    linear-gradient(180deg, #fff7d6 0%, #ffe58f 100%);
}

.booking-service-card.active .booking-service-card-visual::before {
  opacity: calc(var(--booking-service-mark-opacity) + 0.04);
}

.booking-service-card.active .booking-service-card-arrow {
  color: #8e2200;
}

.booking-service-token {
  padding: 0;
}

.booking-service-token span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 100%;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #8e2200;
}

.booking-choice-field {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(122, 88, 0, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.booking-choice-head {
  display: grid;
  gap: 2px;
}

.booking-choice-head strong {
  font-size: 0.9rem;
  color: #111;
}

.booking-choice-head span {
  font-size: 0.68rem;
  color: #666;
  font-weight: 700;
}

.booking-vehicle-preset {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 88, 0, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 246, 218, 0.92) 0%, rgba(255, 255, 255, 0.94) 100%);
}

.booking-vehicle-preset.is-empty {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.82);
}

.booking-vehicle-preset-kicker {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #7a5200;
}

.booking-vehicle-preset strong {
  font-size: 0.94rem;
  color: #111;
}

.booking-vehicle-preset small {
  font-size: 0.68rem;
  line-height: 1.45;
  color: #666;
  font-weight: 700;
}

.booking-choice-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.booking-choice-btn {
  min-height: 52px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 900;
  background: #fff !important;
}

.booking-choice-btn.active {
  background: linear-gradient(180deg, #7aa0ff 0%, #4f78da 100%) !important;
  border-color: #4f78da !important;
  color: #fff !important;
}

.booking-confirm-screen {
  display: grid;
  gap: 8px;
}

.booking-confirm-screen-compact {
  gap: 8px;
}

.booking-confirm-alert {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 2px solid #f0c9c9;
  border-radius: 14px;
  background: #fffafa;
}

.booking-confirm-alert strong {
  font-size: 0.9rem;
  color: #c24a4a;
}

.booking-confirm-alert p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #666;
}

.booking-confirm-mini-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.booking-confirm-mini-grid > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 2px solid #111;
  border-radius: 14px;
  background: #fff;
}

.booking-confirm-mini-grid dt {
  font-size: 0.68rem;
  font-weight: 800;
  color: #666;
}

.booking-confirm-mini-grid dd {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  font-weight: 900;
  color: #111;
  word-break: break-word;
}

.booking-confirm-mini-note {
  grid-column: 1 / -1;
}

.booking-optional-details {
  border: 2px dashed rgba(122, 88, 0, 0.28);
  border-radius: 14px;
  padding: 0;
  background: rgba(255, 255, 255, 0.6);
}

.booking-optional-details summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  color: #6a5200;
}

.booking-optional-details summary::-webkit-details-marker {
  display: none;
}

.booking-optional-details[open] summary {
  padding-bottom: 6px;
}

.booking-optional-details[open] .booking-field {
  margin: 0 10px 10px;
}

.booking-submit-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.booking-submit-preview-item {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 2px solid #111;
  border-radius: 14px;
  background: #fffef8;
}

.booking-submit-preview-item span {
  font-size: 0.66rem;
  font-weight: 900;
  color: #6a6a6a;
}

.booking-submit-preview-item strong {
  font-size: 0.8rem;
  line-height: 1.3;
  color: #111;
}

.booking-submit-preview-item small {
  font-size: 0.68rem;
  line-height: 1.3;
  color: #5c5c5c;
  font-weight: 700;
}

.booking-submit-preview-item-wide {
  grid-column: 1 / -1;
}

.booking-confirm-section {
  border: 2px solid #111;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.booking-confirm-section h5 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  background: #f6f6f6;
  font-size: 0.92rem;
  color: #111;
}

.booking-confirm-list {
  margin: 0;
}

.booking-confirm-list > div {
  display: grid;
  grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-top: 1px dashed rgba(17, 17, 17, 0.1);
}

.booking-confirm-list > div:first-child {
  border-top: 0;
}

.booking-confirm-list dt {
  font-size: 0.8rem;
  font-weight: 800;
  color: #444;
}

.booking-confirm-list dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #111;
  line-height: 1.45;
  word-break: break-word;
}

.booking-step-actions {
  display: grid;
  gap: 8px;
}

.booking-step-actions-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.registration-step-actions.booking-step-actions-split,
.registration-submit-actions.booking-step-actions-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-step-next-btn,
.booking-step-back-btn {
  min-height: 46px;
  font-size: 0.9rem;
  font-weight: 900;
}

.checkin-action-panel {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 12px;
  border: 2px solid #111;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.16), transparent 42%),
    linear-gradient(180deg, #fffdf7 0%, #fff6df 100%);
}

.checkin-action-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.checkin-action-copy {
  display: grid;
  gap: 4px;
}

.checkin-action-title {
  font-size: 0.95rem;
  line-height: 1.2;
  color: #111;
}

.checkin-action-lead {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #645431;
}

.checkin-help-trigger {
  margin-top: 1px;
}

.checkin-action-btn {
  width: 100%;
  min-height: 72px;
  border: 2px solid #111;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffd764 0%, #f5b500 100%);
  color: #111;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.checkin-action-btn-main {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.checkin-action-btn-sub {
  font-size: 0.74rem;
  line-height: 1.35;
  color: #5a3c00;
  font-weight: 700;
}

.checkin-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  box-shadow: none;
}

.checkin-action-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
}

.checkin-action-status {
  margin-top: 2px;
  line-height: 1.5;
}

.point-visual-summary {
  margin-top: 2px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.point-visual-card {
  border: 2px solid #1e1e1e;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf6 0%, #fff8eb 100%);
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.point-balance-card {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 8px;
  min-height: 148px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.14), transparent 45%),
    linear-gradient(180deg, #fffdf3 0%, #fff8e9 100%);
}

.point-balance-card .point-card-content {
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 4px;
}

.point-balance-card .point-card-content .meta-label {
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #4a4a42;
}

.point-balance-card .point-card-content strong {
  font-size: clamp(2.9rem, 12vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #1a1a18;
  -webkit-text-stroke: 0.5px #1a1a18;
}

.point-balance-card .point-card-note {
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5d4a18;
  font-weight: 800;
  max-width: none;
  text-align: center;
}

.point-balance-card .point-balance-illustration {
  width: 80px;
  height: 80px;
  flex-basis: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  align-self: center;
}

.point-rank-card {
  background:
    radial-gradient(circle at 0% 100%, rgba(245, 181, 0, 0.13), transparent 46%),
    linear-gradient(180deg, #fffef7 0%, #fff9ec 100%);
}

.point-card-illustration {
  width: 40px;
  height: 40px;
  border: 2px solid #111;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  overflow: hidden;
}

.point-card-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.point-card-content {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.point-card-content .meta-label {
  font-size: 0.64rem;
  line-height: 1.2;
}

.point-card-content strong {
  display: block;
  font-size: clamp(0.82rem, 3.6vw, 0.98rem);
  line-height: 1.18;
  color: #10342b;
}

.point-card-note {
  margin: 2px 0 0;
  font-size: 0.7rem;
  color: #6a5b3a;
  line-height: 1.4;
}

.point-history-panel {
  margin-top: 2px;
  border-top: 1px dashed #aaa;
  padding-top: 8px;
}

.point-history-details {
  border: 2px solid #111;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff7dd 100%);
  overflow: hidden;
}

.point-history-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.point-history-summary::-webkit-details-marker {
  display: none;
}

.point-history-summary::after {
  content: '開く';
  flex: 0 0 auto;
  min-width: 3.8rem;
  padding: 5px 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #6a5200;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.point-history-details[open] .point-history-summary {
  padding-bottom: 8px;
}

.point-history-details[open] .point-history-summary::after {
  content: '閉じる';
}

.point-history-head {
  margin-bottom: 0;
  display: grid;
  gap: 2px;
}

.point-history-head h4 {
  margin: 0;
  font-size: 0.93rem;
  color: #111;
}

.point-history-head p {
  margin: 0;
  font-size: 0.74rem;
  color: #636363;
}

.point-history-list {
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
  display: grid;
  gap: 6px;
}

.point-history-details:not([open]) .point-history-list {
  display: none;
}

.point-history-details[open] .point-history-list {
  border-top: 1px dashed rgba(17, 17, 17, 0.18);
  padding-top: 10px;
}

.point-history-list li {
  border: 1px solid #202020;
  border-radius: 10px;
  background: #fff;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.point-history-list li > div {
  display: grid;
  gap: 2px;
}

.point-history-list li span {
  font-size: 0.74rem;
  color: #6c6c6c;
}

.point-plus {
  color: #8a5700;
}

.point-minus {
  color: #8b1010;
}

.point-history-empty,
.perk-empty {
  border: 1px solid #202020;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  font-size: 0.82rem;
  color: #545454;
}

.perk-roadmap-panel {
  border: 2px solid #111;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.18), transparent 42%),
    linear-gradient(180deg, #fff9e8 0%, #fffef9 100%);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.perk-roadmap-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.perk-roadmap-goal-panel {
  margin: 0;
}

.perk-roadmap-visual {
  position: relative;
  min-height: 310px;
  padding: 10px;
  border: 2px solid #111;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 36%, #fff9ea 100%);
}

.perk-roadmap-visual::before,
.perk-roadmap-visual::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.perk-roadmap-visual::before {
  height: 56%;
  background: linear-gradient(180deg, rgba(134, 167, 121, 0.55) 0%, rgba(79, 114, 68, 0.82) 100%);
  clip-path: polygon(0 100%, 0 70%, 18% 48%, 34% 61%, 49% 24%, 63% 53%, 79% 14%, 100% 42%, 100% 100%);
}

.perk-roadmap-visual::after {
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 232, 166, 0.46) 0%, rgba(245, 181, 0, 0.66) 100%);
  clip-path: polygon(0 100%, 0 75%, 12% 66%, 27% 79%, 45% 58%, 58% 72%, 76% 44%, 100% 68%, 100% 100%);
  opacity: 0.72;
}

.perk-roadmap-canvas {
  position: relative;
  min-height: 286px;
  z-index: 1;
}

.perk-roadmap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.perk-roadmap-trail-base,
.perk-roadmap-trail-active {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perk-roadmap-trail-base {
  stroke: rgba(255, 255, 255, 0.76);
  stroke-width: 3.3;
}

.perk-roadmap-trail-active {
  stroke: url(#perkRoadmapTrailGradient);
  stroke-width: 3.8;
}

.perk-roadmap-current-pill {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 84px;
  padding: 6px 8px;
  border: 2px solid #111;
  border-radius: 12px;
  background: #fffdf7;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.perk-roadmap-current-pill span {
  font-size: 0.62rem;
  font-weight: 900;
  color: #7b5a00;
  letter-spacing: 0.04em;
}

.perk-roadmap-current-pill strong {
  font-size: 0.9rem;
  line-height: 1;
  color: #111;
}

.perk-roadmap-current-dot {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 14px;
  border: 2px solid #111;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #f5b500 100%);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.82),
    0 6px 12px rgba(0, 0, 0, 0.18);
}

.perk-roadmap-node {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: min(126px, 34vw);
  padding: 8px 9px;
  border: 2px solid #111;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  gap: 3px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
}

.perk-roadmap-node::before {
  content: '';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.perk-roadmap-node strong {
  font-size: 0.78rem;
  line-height: 1.28;
  color: #111;
}

.perk-roadmap-node small {
  font-size: 0.72rem;
  font-weight: 900;
  color: #5b5b5b;
}

.perk-roadmap-node-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #111;
  color: #f5b500;
  font-size: 0.62rem;
  font-weight: 900;
}

.perk-roadmap-node-status {
  font-size: 0.68rem;
  color: #7b5a00;
  font-weight: 800;
}

.perk-roadmap-node.reached {
  background: linear-gradient(180deg, #f5fff5 0%, #ffffff 100%);
  border-color: #53764b;
}

.perk-roadmap-node.reached .perk-roadmap-node-status {
  color: #3f6a38;
}

.perk-roadmap-node.next {
  background: linear-gradient(180deg, #fff4cf 0%, #ffffff 100%);
  border-color: #c98500;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 0 0 4px rgba(245, 181, 0, 0.14);
}

.perk-roadmap-node.locked {
  background: rgba(255, 255, 255, 0.9);
}

.perk-roadmap-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.86rem;
  color: #5a5a5a;
  font-weight: 800;
}

.perk-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.perk-item {
  border: 2px solid #202020;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.perk-item.available {
  background: linear-gradient(135deg, #fef8cf 0%, #ffffff 60%);
}

.perk-item.next-target {
  border-color: #a66f00;
  background: linear-gradient(135deg, #fff4cf 0%, #ffffff 72%);
}

.perk-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.perk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #111;
  color: #f5b500;
  font-size: 0.7rem;
  font-weight: 800;
}

.perk-body p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #4a4a4a;
}

.perk-body small {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  color: #8a5700;
}

.perk-point-chip {
  display: inline-flex;
  margin-top: 6px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f5f5f5;
  border: 2px solid #d1d1d1;
  color: #444;
  font-size: 0.68rem;
  font-weight: 900;
}

.perk-inline-roadmap {
  display: grid;
  gap: 8px;
}

.perk-inline-roadmap-track {
  padding: 2px 0 0;
}

.perk-inline-roadmap-lane {
  position: relative;
  min-height: 56px;
}

.perk-inline-roadmap-line,
.perk-inline-roadmap-fill {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
}

.perk-inline-roadmap-line {
  background: rgba(17, 17, 17, 0.14);
}

.perk-inline-roadmap-fill {
  background: linear-gradient(90deg, #d5a10c 0%, #f08d00 58%, #5d9d7b 100%);
}

.perk-inline-roadmap-node {
  position: absolute;
  top: 20px;
  display: grid;
  gap: 6px;
  align-items: start;
}

.perk-inline-roadmap-node-start {
  left: 0;
  justify-items: start;
  text-align: left;
}

.perk-inline-roadmap-node-target {
  right: 0;
  justify-items: end;
  text-align: right;
}

.perk-inline-roadmap-node-dot,
.perk-inline-roadmap-current-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #fff;
}

.perk-inline-roadmap-node-target .perk-inline-roadmap-node-dot {
  background: #fff3c2;
}

.perk-inline-roadmap-node small {
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 900;
  color: #6b6b6b;
}

.perk-inline-roadmap-current {
  position: absolute;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.perk-inline-roadmap-current.center {
  transform: translateX(-50%);
}

.perk-inline-roadmap-current.near-start {
  transform: translateX(0);
}

.perk-inline-roadmap-current.near-end {
  transform: translateX(-100%);
}

.perk-inline-roadmap-current-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0 9px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #fff8dc;
  color: #111;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(17, 17, 17, 0.08);
}

.perk-inline-roadmap-current-dot {
  background: #f2b31f;
}

.perk-inline-roadmap-status {
  border: 1.5px solid rgba(17, 17, 17, 0.18);
  border-radius: 999px;
  padding: 8px 10px;
  text-align: center;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 900;
  color: #6a6a6a;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
}

.perk-inline-roadmap.is-complete .perk-inline-roadmap-status {
  color: #285f46;
  border-color: rgba(73, 143, 104, 0.28);
  background: linear-gradient(180deg, #f3fff8 0%, #ffffff 100%);
}

.perk-inline-roadmap.is-next .perk-inline-roadmap-status {
  color: #8a5700;
  border-color: rgba(214, 154, 44, 0.35);
  background: linear-gradient(180deg, #fff8df 0%, #ffffff 100%);
}

.perk-action-row {
  margin-top: 2px;
}

.booking-history.compact li {
  border-style: solid;
}

.booking-actions-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.booking-calendar-link {
  border: 2px solid #111;
  background: #111 !important;
  color: #f5b500 !important;
}

.booking-apple-link {
  background: #ffffff !important;
  color: #111 !important;
}

.booking-calendar-link-wrap {
  margin-top: 6px;
}

.profile-details {
  margin-top: 2px;
  border: 2px dashed #7b7b7b;
  border-radius: 12px;
  padding: 10px;
  background: #f9f9f9;
}

.profile-details summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.86rem;
}

.profile-details[open] summary {
  margin-bottom: 10px;
}

.meta-label {
  display: block;
  font-size: 0.74rem;
  color: #515151;
}

.meta-value {
  font-size: 0.88rem;
  word-break: break-all;
}

.link-state,
.liff-body .link-status-input {
  font-weight: 700;
}

.link-state.linked,
.liff-body .link-status-input.linked {
  color: #1557b0;
}

.link-state.unlinked,
.liff-body .link-status-input.unlinked {
  color: #5f6368;
}

.link-state.error,
.liff-body .link-status-input.error {
  color: #b3261e;
}

.registration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 92px;
  border-radius: 999px;
  border: 2px solid #1f69cc;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1f69cc;
  background: #eaf3ff;
}

.registration-badge.pending {
  color: #595959;
  border-color: #7f7f7f;
  background: #f3f3f3;
}

.liff-view[hidden] {
  display: none !important;
}

#liffEntryGuide .button-link {
  border: 2px solid #111;
  border-radius: 14px;
  font-weight: 700;
  color: #111;
  background: #f5b500;
}

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

.section-head h2 {
  margin: 0;
}

.title-with-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

button.help-trigger {
  width: 1.55rem !important;
  min-width: 1.55rem !important;
  height: 1.55rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 1;
  font-size: 0.85rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button.help-trigger.is-open {
  background: #111 !important;
  color: #f5b500 !important;
  border-color: #111 !important;
}

.help-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 140;
  width: min(520px, 92vw);
  max-height: min(70vh, 680px);
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #111;
  background: #fff8de;
  color: #111;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.55;
  white-space: pre-line;
}

.tab-btn {
  font-size: 0.86rem;
  padding: 9px 8px;
}

.tab-btn.active {
  background: #111;
  color: #f5b500;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

#tab-booking.active {
  display: grid;
  gap: 10px;
}

#tab-booking .section-head .actions {
  justify-content: flex-end;
}

#tab-profile.active {
  display: grid;
  gap: 10px;
}

.mypage-route-page {
  display: none;
  gap: 14px;
}

.mypage-route-page.active,
.mypage-route-page.is-entering {
  display: grid;
}

.mypage-route-page.is-entering {
  animation: mypage-route-enter 320ms cubic-bezier(0.2, 0.9, 0.24, 1);
}

.mypage-route-page.is-entering > * {
  animation: mypage-route-content-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mypage-route-page.is-entering > *:nth-child(2) {
  animation-delay: 28ms;
}

.mypage-route-page.is-entering > *:nth-child(3) {
  animation-delay: 56ms;
}

.mypage-route-page.is-entering > *:nth-child(4) {
  animation-delay: 84ms;
}

.mypage-route-head {
  position: static;
  display: grid;
  gap: 10px;
  border: 2px solid #111;
  border-radius: 14px;
  background: #fffdf3;
  padding: 14px 14px 13px;
  margin: 4px 0;
}

.booking-route-page {
  gap: 10px;
}

.booking-route-page.booking-selection-mode {
  gap: 8px;
}

.booking-route-page .mypage-route-head {
  padding: 9px 12px;
  margin-bottom: 2px;
  border: 2px solid #111;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.booking-route-page.booking-selection-mode .mypage-route-head {
  margin-bottom: 0;
}

#myPageView.booking-route-focus .mypage-hero,
#myPageView.booking-route-focus .booking-route-page .mypage-route-head {
  display: none;
}

#myPageView.booking-route-focus #tab-profile.active {
  gap: 8px;
}

#myPageView.booking-route-focus .booking-route-page {
  gap: 8px;
}

#myPageView.booking-route-focus .booking-route-layout {
  gap: 8px;
}

.mypage-route-meta {
  display: grid;
  gap: 2px;
}

.mypage-route-title {
  margin: 0;
  font-size: 1.34rem;
  font-weight: 900;
  color: #111;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.mypage-route-subtitle {
  margin: 0;
  font-size: 0.79rem;
  color: #5a5a5a;
  line-height: 1.5;
}

.service-history-route-page {
  gap: 0;
}

.service-history-route-head {
  margin-bottom: 0;
  padding: 16px 16px 18px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e5 100%);
}

.service-history-route-head .mypage-route-meta {
  gap: 6px;
}

.service-history-module {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, #fffef8 0%, #fff9ec 100%);
}

.service-history-module::before {
  display: none;
}

.booking-route-page .mypage-route-title {
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.booking-route-page .mypage-route-subtitle {
  display: none;
}

.profile-route-head {
  align-items: stretch;
}

.profile-route-head h3 {
  margin: 0;
  font-size: 1.34rem;
  color: #111;
}

.mypage-back-btn {
  width: 100%;
  min-height: 42px;
  font-size: 0.92rem;
  font-weight: 800;
}

.mypage-route-footer {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 6px;
  padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
}

.profile-delete-btn {
  width: 100%;
  min-height: 48px;
  border: 2px solid #7e1111;
  background: linear-gradient(180deg, #ef4444 0%, #c81e1e 100%);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.profile-delete-btn:hover {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
}

#myPageView.route-detail-mode .mypage-hero-topbar,
#myPageView.route-detail-mode .mypage-next-action,
#myPageView.route-detail-mode .mypage-menu-block,
#myPageView.route-detail-mode .mypage-menu-grid,
#myPageView.route-detail-mode .mypage-quick-stats,
#myPageView.route-detail-mode .mypage-member-note,
#myPageView.route-detail-mode .mypage-point-goal {
  display: none;
}

#myPageView.route-detail-mode .mypage-hero {
  width: 100%;
  border-radius: 16px;
  padding: 9px 10px;
  margin-bottom: 8px;
}

#myPageView.route-detail-mode .mypage-hero-head {
  padding-top: 0;
  gap: 0;
}

#myPageView.route-detail-mode .mypage-member-summary {
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
}

#myPageView.route-detail-mode .mypage-member-copy {
  gap: 4px;
}

#myPageView.route-detail-mode .mypage-hero-greeting {
  gap: 6px;
}

#myPageView.route-detail-mode .mypage-hero-kicker {
  font-size: 0.66rem;
}

#myPageView.route-detail-mode .mypage-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border-width: 2px;
}

#myPageView.route-detail-mode .mypage-hero h3 {
  margin: 0;
  font-size: 0.94rem;
}

#myPageView.route-detail-mode .mypage-tier-wrap {
  gap: 6px;
}

#myPageView.route-detail-mode .member-tier,
#myPageView.route-detail-mode .point-badge {
  padding: 3px 10px;
  font-size: 0.72rem;
}

#myPageView.route-detail-mode .mypage-hero.mypage-hero-compact-action {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

#myPageView.route-detail-mode .mypage-hero.mypage-hero-compact-action:hover {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.54), transparent 36%),
    linear-gradient(180deg, #fbfbfb 0%, #f1e8cf 100%);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.16);
}

#myPageView.route-detail-mode .mypage-hero.mypage-hero-compact-action:active {
  transform: translateY(1px);
}

#myPageView.route-detail-mode .mypage-hero.mypage-hero-compact-action:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.26);
  outline-offset: 2px;
}

#myPageView .mypage-hero,
#myPageView .mypage-hero-head,
#myPageView .mypage-member-summary,
#myPageView .mypage-member-copy,
#myPageView .mypage-avatar,
#myPageView .mypage-hero h3,
#myPageView .mypage-tier-wrap,
#myPageView .member-tier,
#myPageView .point-badge {
  transition:
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

@keyframes mypage-route-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mypage-route-content-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mypage-route-page,
  .mypage-route-page.is-entering,
  .mypage-route-page.is-entering > *,
  .booking-route-panel,
  .booking-route-panel.is-entering,
  .booking-step-panel,
  .booking-step-panel.is-entering,
  .booking-step-panel.is-entering > *,
  #myPageView .mypage-hero,
  #myPageView .mypage-hero-head,
  #myPageView .mypage-member-summary,
  #myPageView .mypage-member-copy,
  #myPageView .mypage-avatar,
  #myPageView .mypage-hero h3,
  #myPageView .mypage-tier-wrap,
  #myPageView .member-tier,
  #myPageView .point-badge {
    animation: none !important;
    transition: none !important;
  }
}

.mypage-home-intro {
  border: 2px solid #111;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.mypage-home-intro h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: #111;
}

.profile-form-paged .profile-block {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.profile-form-paged,
.profile-form-paged .vehicle-editor-panel,
.profile-form-paged .vehicle-editor-list,
.profile-form-paged .vehicle-editor-card,
.profile-form-paged .vehicle-editor-grid,
.profile-form-paged label,
.profile-form-paged input,
.profile-form-paged select,
.profile-form-paged textarea {
  min-width: 0;
  max-width: 100%;
}

.profile-form-paged .vehicle-editor-panel,
.profile-form-paged .vehicle-editor-card,
.profile-form-paged .vehicle-editor-grid {
  overflow-x: clip;
}

.vehicle-editor-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdf3;
  padding: 12px;
}

.customer-benefit-panel textarea {
  min-height: 72px;
}

.vehicle-editor-panel-compact {
  padding: 10px;
}

.vehicle-editor-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vehicle-editor-section-head strong {
  display: block;
  font-size: 0.96rem;
  color: #111;
}

.vehicle-editor-section-head .small-help {
  margin-top: 4px;
}

.vehicle-editor-list {
  display: grid;
  gap: 12px;
}

.vehicle-editor-card {
  display: grid;
  gap: 10px;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08);
}

.vehicle-editor-card-single {
  gap: 0;
}

.vehicle-editor-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vehicle-editor-card-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vehicle-editor-card-index {
  font-weight: 900;
  color: #111;
}

.vehicle-editor-primary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #ffd75a;
  color: #111;
  font-size: 0.74rem;
  font-weight: 900;
}

.vehicle-editor-card-tools {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vehicle-editor-tool-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.8rem;
}

.vehicle-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vehicle-editor-grid label:first-child,
.vehicle-editor-grid label:nth-child(3) {
  grid-column: 1 / -1;
}

.vehicle-editor-plate-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.vehicle-editor-plate-preview {
  display: grid;
  justify-items: center;
}

.vehicle-editor-plate-preview .jp-plate-card {
  width: min(312px, 100%);
}

.vehicle-editor-plate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vehicle-editor-plate-grid label {
  min-width: 0;
}

.vehicle-editor-plate-grid .vehicle-editor-plate-region,
.vehicle-editor-plate-grid .vehicle-editor-plate-region-manual,
.vehicle-editor-plate-grid .vehicle-editor-plate-serial {
  grid-column: 1 / -1;
}

.vehicle-editor-plate-grid input {
  width: 100%;
}

.vehicle-editor-card-note {
  margin: 0;
  padding-top: 2px;
  font-size: 0.8rem;
  color: #6a5d28;
  line-height: 1.55;
}

.customer-vehicle-summary {
  display: grid;
  gap: 4px;
}

.customer-vehicle-cell {
  white-space: normal;
  vertical-align: top;
}

.customer-vehicle-line {
  display: block;
}

.customer-vehicle-more,
.customer-vehicle-empty {
  font-size: 0.78rem;
  color: var(--muted);
}

#bookingContent {
  display: grid;
  gap: 20px;
}

.booking-blocked-card {
  border: 2px solid #8b1010;
  background: #fff5f5;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.booking-blocked-card h3 {
  margin: 0;
  color: #8b1010;
  font-size: 1rem;
}

.booking-blocked-card button {
  width: 100%;
}

.stack {
  display: grid;
  gap: 10px;
}

.registration-ocr-view {
  overflow: hidden;
  padding: 0 14px 14px;
}

.registration-ocr-headline {
  margin: 0 -14px 10px;
  border-bottom: 2px solid #4f8841;
  background: linear-gradient(180deg, #76b05d 0%, #5f994c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 12px 10px 11px;
}

.registration-ocr-form {
  gap: 12px;
}

.registration-ocr-intro {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 2px solid #1d1d1d;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.22), transparent 34%),
    linear-gradient(180deg, #fffaf0 0%, #ffffff 72%);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.08);
}

.registration-step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.9rem;
  padding: 0 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #f5b500;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #111;
}

.registration-ocr-hero {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.registration-ocr-hero-visual {
  width: 104px;
  aspect-ratio: 1;
  border-radius: 24px;
  border: 2px solid #111;
  background: linear-gradient(180deg, #fff0a8 0%, #f5b500 100%);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.registration-ocr-hero-phone {
  position: relative;
  width: 52px;
  height: 76px;
  border: 3px solid #111;
  border-radius: 14px;
  background: #fffdf4;
}

.registration-ocr-hero-phone::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: #111;
  transform: translateX(-50%);
}

.registration-ocr-hero-camera {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 18px;
  border: 3px solid #2f6f3e;
  border-radius: 6px;
  background: #7ac36b;
  transform: translate(-50%, -24%);
}

.registration-ocr-hero-camera::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.registration-ocr-hero-camera::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 4px;
  width: 10px;
  height: 6px;
  border-radius: 4px 4px 0 0;
  background: #2f6f3e;
}

.registration-ocr-hero-copy {
  display: grid;
  gap: 6px;
}

.registration-ocr-hero-copy strong {
  font-size: 1.12rem;
  line-height: 1.35;
}

.registration-ocr-hero-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.9rem;
}

.registration-ocr-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.registration-choice-btn {
  width: 100%;
  min-height: 158px;
  padding: 14px 12px;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 10px;
  text-align: left;
  border-width: 2px !important;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

.registration-choice-btn.kind-regular {
  background: linear-gradient(180deg, #ffffff 0%, #fff4cf 100%) !important;
}

.registration-choice-btn.kind-kei {
  background: linear-gradient(180deg, #ffe58b 0%, #f5b500 100%) !important;
}

.registration-choice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0 10px;
  border-radius: 999px;
  border: 2px solid #111;
  background: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}

.registration-choice-btn strong {
  font-size: 1rem;
  line-height: 1.45;
}

.registration-choice-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.74);
}

.registration-ocr-subactions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.registration-ocr-checklist {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.plate-tools {
  display: grid;
  gap: 8px;
}

.registration-ocr-tools button {
  min-height: 44px;
}

.registration-ocr-tools .ghost-link-btn {
  background: #fff !important;
  color: #2d7f40 !important;
  border-color: #7cb468 !important;
}

.hidden-input {
  display: none;
}

.registration-ocr-preview-wrap {
  border: 2px solid #d2d2d2;
  border-radius: 10px;
  background: #ffffff;
  min-height: 180px;
  padding: 8px;
  display: grid;
  place-items: center;
}

.registration-preview-block {
  display: grid;
  gap: 8px;
}

.registration-preview-head {
  display: grid;
  gap: 2px;
}

.registration-preview-head strong {
  font-size: 0.94rem;
}

.registration-preview-head p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
}

.switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
}

.switch input {
  width: auto;
}

.small-help {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.plate-preview {
  display: none;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 0;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.plate-preview-placeholder {
  margin: 0;
  font-size: 0.82rem;
  color: #727272;
  text-align: center;
}

.registration-ocr-note {
  margin: 2px 0 0;
  text-align: center;
  color: #6a6a6a;
  font-size: 0.86rem;
  line-height: 1.55;
}

.manual-plate-toggle {
  width: 100%;
  min-height: 44px;
  background: #ffffff !important;
  color: #2e8242 !important;
  border-color: #7cb468 !important;
}

.manual-plate-toggle.is-open {
  background: #2e8242 !important;
  color: #ffffff !important;
  border-color: #2e8242 !important;
}

.plate-editor {
  border: 2px solid #2d2d2d;
  border-radius: 12px;
  padding: 10px;
  background: #f5f5f5;
}

.plate-editor input,
.plate-editor select {
  font-size: 16px;
}

.plate-editor h3 {
  margin: 0 0 8px;
  font-size: 0.88rem;
}

.plate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.plate-grid label:first-child {
  grid-column: 1 / -1;
}

.manual-region-row {
  grid-column: 1 / -1;
}

.manual-region-row[hidden] {
  display: none !important;
}

.plate-preview-text {
  margin-top: 0;
  border-radius: 10px;
  border: 2px solid #b7b7b7;
  background: #f7f7f7;
  padding: 8px;
}

.plate-preview-card {
  margin-top: 0;
}

.registration-detail-fields {
  border: 2px solid #8fbf7f;
  border-radius: 12px;
  background: #f7fdf3;
  padding: 8px 10px;
}

.registration-detail-fields summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
  color: #2f6f3e;
}

.registration-detail-fields summary::-webkit-details-marker {
  display: none;
}

.registration-detail-fields summary::before {
  content: '＋';
  margin-right: 6px;
  font-weight: 900;
}

.registration-detail-fields[open] summary::before {
  content: '−';
}

.registration-detail-grid {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.registration-submit-actions {
  display: grid;
  gap: 10px;
}

.registration-submit-btn {
  min-height: 52px;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #78b360 0%, #5f994c 100%) !important;
  color: #ffffff !important;
  border-color: #4f8841 !important;
}

.registration-back-btn {
  min-height: 48px;
  background: #ffffff !important;
  color: #4f8841 !important;
  border-color: #8cbf7f !important;
}

.jp-plate-card {
  position: relative;
  width: min(360px, 100%);
  margin: 0 auto;
  border: 2px solid #7f7f7f;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%);
  box-shadow: inset 0 0 0 1px #e6e6e6;
  padding: 10px;
  color: #3f974f;
}

.jp-plate-screw {
  position: absolute;
  top: 9px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #9b9b9b;
  border: 1px solid #757575;
}

.jp-plate-screw.left {
  left: 9px;
}

.jp-plate-screw.right {
  right: 9px;
}

.jp-plate-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: stretch;
  gap: 8px;
  margin: 0 18px 10px;
}

.jp-region {
  font-size: clamp(1.25rem, 8vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.jp-class {
  font-size: clamp(1.2rem, 7vw, 1.95rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.jp-plate-top-box,
.jp-plate-bottom-box {
  border: 2px solid #cecece;
  border-radius: 12px;
  background: #f7f7f7;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 8px;
}

.jp-plate-top-box {
  min-height: 52px;
}

.jp-plate-bottom-box {
  min-height: 96px;
}

.jp-plate-bottom {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.jp-kana {
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
}

.jp-serial {
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  word-break: keep-all;
}

.jp-plate-card .placeholder {
  opacity: 0.35;
}

.plate-preview-note {
  margin-top: 10px;
  text-align: center;
  font-size: 0.88rem;
  color: #636363;
}

#profilePlatePreview .jp-plate-card {
  width: min(320px, 100%);
}

#profilePlatePreview .jp-plate-top {
  grid-template-columns: minmax(0, 1fr) 88px;
  margin: 0 14px 8px;
}

#profilePlatePreview .jp-plate-bottom {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 8px;
}

#profilePlatePreview .jp-plate-bottom-box {
  min-height: 76px;
}

#profilePlatePreview .jp-kana {
  font-size: clamp(1.35rem, 6vw, 1.8rem);
}

#profilePlatePreview .jp-serial {
  font-size: clamp(2.3rem, 11vw, 3.4rem);
}

#profilePlatePreview .plate-preview-note {
  font-size: 0.76rem;
}

.booking-history {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.booking-history li {
  border: 2px solid #202020;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.booking-meta {
  display: grid;
  gap: 4px;
  font-size: 0.84rem;
}

.booking-meta strong {
  font-size: 0.92rem;
}

.booking-empty {
  color: var(--muted);
  font-size: 0.84rem;
}

.booking-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.booking-cancel-btn {
  flex: 1 1 220px;
  min-width: 180px;
  background: #ffffff !important;
  color: #8b1010 !important;
  border-color: #8b1010 !important;
}

.booking-cancel-btn.is-cancelled {
  color: #5c5c5c !important;
  border-color: #8c8c8c !important;
}

.service-history-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.service-history-stat-card {
  border: 2px solid #111;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.service-history-stat-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #6a5a22;
}

.service-history-stat-card strong {
  font-size: 1.12rem;
  line-height: 1.2;
}

.service-history-stat-card small {
  color: #5f5f5f;
  font-size: 0.76rem;
  line-height: 1.45;
}

.service-history-filter-row {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.service-history-filter {
  flex: 1 1 220px;
  display: grid;
  gap: 6px;
}

.service-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.service-history-item {
  border: 2px solid #1f1f1f;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.service-history-item-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.service-history-item-head > div {
  display: grid;
  gap: 4px;
}

.service-history-item-head strong {
  font-size: 1rem;
}

.service-history-item-head span {
  font-size: 0.82rem;
  color: #4f4f4f;
}

.service-history-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff4c8;
  color: #5f4700 !important;
  font-size: 0.72rem !important;
  font-weight: 800;
  padding: 4px 10px;
}

.service-history-item-body {
  display: grid;
  gap: 4px;
  color: #363636;
  font-size: 0.84rem;
}

.service-history-item-body p {
  margin: 2px 0 0;
  color: #595959;
  line-height: 1.55;
}

.service-history-empty {
  border: 2px dashed #bdbdbd;
  border-radius: 16px;
  background: #fafafa;
  padding: 16px;
  color: #6a6a6a;
  font-size: 0.86rem;
  line-height: 1.6;
}

.digital-member-card {
  border: 2px solid #111;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.38), transparent 38%),
    linear-gradient(180deg, #fff9e9 0%, #ffeab3 100%);
  padding: 16px;
  display: grid;
  gap: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
}

.digital-member-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.digital-member-card-head-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.digital-member-card-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 900;
  color: #7d5a00;
  letter-spacing: 0.08em;
}

.digital-member-card-head strong {
  font-size: 1.3rem;
  line-height: 1.2;
}

.digital-member-card-body {
  display: grid;
  place-items: center;
  border: 2px dashed #c0a85c;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  padding: 12px;
}

.digital-member-card-body canvas,
.digital-member-card-body img {
  width: min(244px, 100%);
  height: auto;
  display: block;
  background: #fff;
  border-radius: 12px;
}

.digital-member-card-fallback {
  text-align: center;
  color: #8a1010;
  font-size: 0.86rem;
  line-height: 1.5;
}

.digital-member-card-note {
  margin: 0;
  color: #5a5a5a;
  font-size: 0.82rem;
  line-height: 1.55;
}

.booking-cancel-btn:disabled {
  opacity: 0.6;
}

.booking-filter-btn {
  padding: 8px 10px !important;
  font-size: 0.76rem;
  min-width: 116px;
}

.booking-filter-btn.active {
  background: #111 !important;
  color: #f5b500 !important;
  border-color: #111 !important;
}

.profile-coupon-panel {
  margin-top: 12px;
  border-top: 2px dashed #9b9b9b;
  padding-top: 12px;
}

.coupon-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.coupon-active-panel[hidden] {
  display: none !important;
}

.coupon-active-panel {
  border: 2px solid #111;
  border-radius: 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.24), transparent 40%),
    #fff6db;
  padding: 10px;
  display: grid;
  gap: 5px;
}

.coupon-active-panel-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 900;
  color: #6b4700;
}

.coupon-active-panel h4 {
  margin: 0;
  font-size: 1.02rem;
  color: #111;
}

.coupon-active-panel-code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  color: #0b56aa;
  font-weight: 700;
}

.coupon-active-panel-message {
  margin: 0;
  font-size: 0.86rem;
  color: #2b2b2b;
  font-weight: 800;
}

.coupon-active-panel-timer {
  display: inline-flex;
  width: fit-content;
  border: 2px solid #111;
  border-radius: 999px;
  background: #111;
  color: #f5b500;
  padding: 3px 12px;
  font-size: 1rem;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.coupon-item,
.coupon-empty {
  position: relative;
  overflow: hidden;
  width: min(100%, 420px);
  border: 1.5px solid rgba(17, 17, 17, 0.12);
  border-radius: 22px;
  background: #ffffff;
  padding: 22px 18px 16px;
  box-shadow:
    0 14px 32px rgba(17, 17, 17, 0.08),
    0 2px 8px rgba(17, 17, 17, 0.04);
}

.coupon-empty {
  text-align: center;
  color: #6f6f6f;
  font-weight: 700;
}

.coupon-item.is-active-window {
  border-color: rgba(201, 125, 0, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.12), transparent 44%),
    #fffdf8;
}

.coupon-top-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  margin: -22px -18px 0;
}

.coupon-corner-badge {
  position: static;
  min-width: 104px;
  padding: 10px 16px 11px;
  border-bottom-left-radius: 20px;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(135deg, #6fc0a4 0%, #4a9a84 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.coupon-corner-badge.is-active {
  background: linear-gradient(135deg, #d78d3e 0%, #c66f2b 100%);
}

.coupon-corner-badge.is-disabled {
  background: linear-gradient(135deg, #a7a7a7 0%, #868686 100%);
}

.coupon-title-block {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  text-align: center;
}

.coupon-title {
  display: block;
  margin: 0;
  padding-right: 84px;
  padding-left: 8px;
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.coupon-subtitle {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #7a7a7a;
  font-weight: 700;
}

.coupon-divider {
  height: 1px;
  margin: 16px 0 2px;
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.04) 0%, rgba(17, 17, 17, 0.14) 20%, rgba(17, 17, 17, 0.04) 100%);
}

.coupon-code {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  width: fit-content;
  align-items: center;
  margin-top: 0;
  margin-right: 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0f0f0 0%, #f8f8f8 100%);
  padding: 6px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
  font-weight: 800;
  color: #707070;
}

.coupon-desc {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: #666;
  line-height: 1.5;
}

.coupon-visual-summary {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.coupon-visual-summary-compact {
  margin-top: 4px;
}

.coupon-visual-card {
  min-height: 112px;
  border: 1.5px solid rgba(17, 17, 17, 0.08);
  border-radius: 18px;
  padding: 14px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.coupon-visual-card-benefit {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 221, 133, 0.36), transparent 48%),
    linear-gradient(180deg, #fff8df 0%, #fffef8 100%);
}

.coupon-visual-card-deadline {
  background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}

.coupon-visual-card-remaining {
  background: linear-gradient(180deg, #fcfbff 0%, #ffffff 100%);
}

.coupon-visual-card.is-soon {
  border-color: rgba(219, 90, 41, 0.28);
  background: linear-gradient(180deg, #fff2e9 0%, #ffffff 100%);
}

.coupon-visual-card.is-unlimited {
  border-color: rgba(52, 135, 70, 0.2);
}

.coupon-visual-card.is-low {
  border-color: rgba(193, 70, 26, 0.24);
  background: linear-gradient(180deg, #fff3ea 0%, #ffffff 100%);
}

.coupon-visual-label {
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  font-weight: 900;
  color: #7e7e7e;
}

.coupon-visual-card strong {
  font-size: 1.5rem;
  line-height: 1.15;
  color: #171717;
}

.coupon-visual-card small {
  font-size: 0.76rem;
  line-height: 1.45;
  color: #5a5a5a;
}

.coupon-active-inline {
  margin-top: 2px;
  border: 1.5px solid rgba(198, 111, 43, 0.24);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff6e2 0%, #fffdf7 100%);
  padding: 12px;
  display: grid;
  gap: 6px;
  text-align: center;
}

.coupon-active-inline strong {
  font-size: 0.84rem;
  color: #7d4a11;
}

.coupon-active-inline small {
  font-size: 0.73rem;
  color: #8a6530;
  font-weight: 700;
}

.coupon-active-countdown {
  display: inline-flex;
  justify-self: center;
  width: fit-content;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.98rem;
  font-weight: 800;
  border-radius: 999px;
  border: 0;
  padding: 4px 12px;
  background: linear-gradient(180deg, #d78d3e 0%, #c66f2b 100%);
  color: #ffffff;
}

.coupon-actions {
  margin-top: 2px;
}

.coupon-activate-btn {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #d58461 0%, #c96f4f 100%);
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px rgba(201, 111, 79, 0.22);
}

.coupon-activate-btn:disabled {
  background: linear-gradient(180deg, #c8c8c8 0%, #b5b5b5 100%);
  color: #ffffff;
  box-shadow: none;
}

.coupon-activate-overlay[hidden] {
  display: none !important;
}

.coupon-activate-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(6, 22, 18, 0.72);
}

.coupon-activate-card {
  width: min(520px, 94vw);
  border: 3px solid #111;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.3), transparent 45%),
    #ffffff;
  padding: 18px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  display: grid;
  gap: 10px;
}

.coupon-activate-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: #0a6d55;
}

.coupon-activate-card h3 {
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.3;
}

.coupon-activate-description {
  margin: 0;
  font-size: 1.02rem;
  color: #2f2f2f;
  line-height: 1.5;
}

.coupon-activate-preview {
  border: 2px solid #111;
  border-radius: 12px;
  background: #fff7d1;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.coupon-activate-preview strong {
  font-size: 1.06rem;
}

.coupon-activate-preview span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.18rem;
  font-weight: 800;
  color: #1f69cc;
}

.coupon-activate-rules {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
  color: #2f2f2f;
}

.booking-submit-card {
  width: min(460px, 94vw);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.18), transparent 44%),
    linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}

.booking-submit-kicker {
  color: #8a5a00;
}

.booking-submit-description {
  font-size: 0.94rem;
  color: #4a4a4a;
}

.booking-submit-modal-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid rgba(17, 17, 17, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0 0%, #fffefb 100%);
}

.booking-submit-modal-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.booking-submit-modal-row span {
  font-size: 0.76rem;
  font-weight: 900;
  color: #7b5a12;
}

.booking-submit-modal-row strong {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #1f1f1f;
  word-break: break-word;
}

.booking-submit-actions {
  display: flex;
  gap: 8px;
}

.booking-submit-actions button {
  flex: 1 1 0;
  min-height: 48px;
  font-weight: 900;
}

.booking-cancel-card {
  width: min(430px, 92vw);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.16), transparent 44%),
    linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
}

.booking-cancel-kicker {
  color: #8a5a00;
}

.booking-cancel-description {
  font-size: 0.93rem;
  color: #4f4f4f;
}

.booking-cancel-modal-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffaf0 0%, #fffefc 100%);
}

.booking-cancel-modal-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.booking-cancel-modal-row span {
  font-size: 0.76rem;
  font-weight: 900;
  color: #7b5a12;
}

.booking-cancel-modal-row strong {
  font-size: 0.92rem;
  line-height: 1.45;
  color: #1f1f1f;
  word-break: break-word;
}

.booking-cancel-actions {
  display: flex;
  gap: 8px;
}

.booking-cancel-actions button {
  flex: 1 1 0;
  min-height: 48px;
  font-weight: 900;
}

.booking-datetime-error-card {
  width: min(400px, 92vw);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 202, 120, 0.22), transparent 46%),
    linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}

.booking-datetime-error-kicker {
  color: #a06400;
}

.booking-datetime-error-description {
  font-size: 0.94rem;
  color: #4a4a4a;
}

.booking-datetime-error-preview {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 2px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8ed 0%, #fffefc 100%);
}

.booking-datetime-error-preview span {
  font-size: 0.72rem;
  font-weight: 900;
  color: #8a5a00;
}

.booking-datetime-error-preview strong {
  font-size: 1rem;
  line-height: 1.45;
  color: #1f1f1f;
}

.booking-datetime-error-actions {
  display: flex;
}

.booking-datetime-error-actions button {
  flex: 1 1 0;
  min-height: 48px;
  font-weight: 900;
}

.booking-success-overlay {
  background: rgba(6, 22, 18, 0.6);
}

.booking-success-card {
  position: relative;
  overflow: hidden;
  width: min(430px, 92vw);
  padding: 22px 18px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 164, 0.92), rgba(255, 236, 164, 0) 38%),
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.26), transparent 42%),
    linear-gradient(180deg, #fffef8 0%, #fff7da 100%);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.32) inset;
  animation: booking-success-pop 380ms cubic-bezier(0.2, 0.9, 0.24, 1.12);
}

.booking-success-kicker {
  text-align: center;
  color: #a46b00;
  letter-spacing: 0.22em;
}

.booking-success-card h3 {
  text-align: center;
  font-size: 1.56rem;
}

.booking-success-lead {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #56431a;
}

.booking-success-badge {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  margin: 4px auto 4px;
  border-radius: 999px;
  border: 3px solid #111;
  background:
    radial-gradient(circle at 30% 25%, #fff6be 0%, #ffd964 45%, #f3b000 100%);
  display: grid;
  place-items: center;
  box-shadow:
    0 10px 24px rgba(243, 176, 0, 0.28),
    0 0 0 10px rgba(255, 214, 76, 0.14);
}

.booking-success-badge span {
  font-size: 2rem;
  font-weight: 900;
  color: #111;
  transform: translateY(-1px);
}

.booking-success-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.booking-success-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4bb 0%, #f4bb11 100%);
  border: 2px solid rgba(17, 17, 17, 0.78);
  box-shadow: 0 6px 16px rgba(243, 176, 0, 0.22);
  animation: booking-success-float 1.8s ease-in-out infinite;
}

.booking-success-spark-a {
  top: 34px;
  left: 58px;
}

.booking-success-spark-b {
  top: 70px;
  right: 56px;
  animation-delay: 120ms;
}

.booking-success-spark-c {
  top: 118px;
  left: 76px;
  animation-delay: 240ms;
}

.booking-success-spark-d {
  top: 124px;
  right: 72px;
  animation-delay: 360ms;
}

.booking-success-summary {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 2px solid rgba(17, 17, 17, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 251, 234, 0.96) 100%);
}

.booking-success-summary-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.booking-success-summary-row span {
  font-size: 0.76rem;
  font-weight: 900;
  color: #8a5a00;
}

.booking-success-summary-row strong {
  font-size: 0.94rem;
  line-height: 1.48;
  color: #1b1b1b;
  word-break: break-word;
}

.booking-success-actions {
  display: flex;
  gap: 8px;
}

.booking-success-actions button {
  flex: 1 1 0;
  min-height: 50px;
  font-weight: 900;
}

@keyframes booking-success-pop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes booking-success-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-7px) scale(1.08);
  }
}

.account-delete-card {
  border-color: #7e1111;
  background:
    radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.18), transparent 42%),
    linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
}

.account-delete-kicker {
  color: #991b1b;
}

.account-delete-rules {
  color: #541313;
}

.account-delete-actions {
  display: flex;
  flex-wrap: nowrap;
}

.account-delete-actions.reverse {
  flex-direction: row-reverse;
}

.account-delete-actions button {
  flex: 1 1 0;
  min-height: 48px;
  font-weight: 900;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.24;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.12;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.24;
  }
}

.bottom-tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 14px));
  background: #111;
  border: 2px solid #111;
  border-radius: 16px;
  padding: 8px 10px 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  z-index: 10020;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.bottom-actionbar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bottom-tabbar[hidden] {
  display: none !important;
}

.bottom-action-btn {
  min-height: 66px;
  padding: 8px 10px;
  border-radius: 12px !important;
  display: grid !important;
  gap: 0;
  justify-items: center !important;
  align-content: center !important;
  text-align: center;
}

.bottom-action-label {
  display: block;
  font-size: clamp(1rem, 4.5vw, 1.18rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.bottom-action-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.tab-label-main {
  font-size: 0.74rem;
  line-height: 1.1;
  font-weight: 900;
}

.tab-label-sub {
  font-size: 0.68rem;
  line-height: 1.1;
  font-weight: 700;
}

.tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  line-height: 1;
}

.guide-overlay[hidden] {
  display: none !important;
}

.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 10120;
  background: rgba(6, 22, 18, 0.52);
  display: grid;
  place-items: center;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
}

.guide-card {
  width: min(430px, 94vw);
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom));
  overflow: auto;
  border: 2px solid #111;
  border-radius: 14px;
  background: #f8f8f8;
  padding: 14px;
  box-shadow: 0 18px 46px rgba(16, 52, 43, 0.28);
}

.guide-card h3 {
  margin: 0 0 6px;
}

.camera-guide-card {
  width: min(430px, 94vw);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px 14px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.16), transparent 36%),
    linear-gradient(180deg, #fffdfa 0%, #f7f7f7 100%);
}

.camera-guide-kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #8a5a00;
}

.camera-guide-card h3 {
  line-height: 1.5;
}

.guide-camera-stage {
  position: relative;
  margin: 12px 0 10px;
  min-height: 320px;
  border: 2px solid #111;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.78) 0%, rgba(17, 17, 17, 0.92) 100%),
    #222;
}

.guide-camera-video {
  width: 100%;
  height: 320px;
  display: block;
  object-fit: cover;
  background: #1a1a1a;
}

.guide-camera-mask {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: 28px 18px;
}

.guide-camera-mask::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34));
}

.guide-camera-frame {
  position: relative;
  z-index: 1;
  width: min(100%, 286px);
  aspect-ratio: 2.08 / 1;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  box-shadow:
    0 0 0 999px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(17, 17, 17, 0.48) inset;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px 14px;
}

.guide-camera-frame::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 5px;
  pointer-events: none;
}

.guide-camera-frame span {
  display: block;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.52);
}

.guide-camera-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(17, 17, 17, 0.72);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(4px);
}

.guide-camera-status.is-ok {
  background: rgba(13, 126, 93, 0.8);
}

.guide-camera-status.is-error {
  background: rgba(154, 30, 30, 0.84);
}

.camera-guide-caption {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #9a2222;
  font-weight: 700;
}

.camera-guide-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.camera-guide-actions button {
  min-height: 50px;
}

.camera-guide-actions-sub {
  margin-top: 8px;
  grid-template-columns: 1fr;
}

.guide-frame {
  margin: 10px 0;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(135deg, #edf9f4 0%, #d7efe7 100%);
  text-align: center;
}

.guide-plate-frame {
  margin: 0 auto 8px;
  width: min(240px, 80%);
  aspect-ratio: 2.4 / 1;
  border: 3px dashed #0d9488;
  border-radius: 10px;
  background:
    radial-gradient(circle at 20% 20%, rgba(13, 148, 136, 0.12), transparent 48%),
    #ffffff;
}

.guide-frame span {
  display: block;
  font-size: 0.82rem;
  color: #0e5e4a;
}

.checkin-guide-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.18), transparent 40%),
    linear-gradient(180deg, #fffdf7 0%, #fff5de 100%);
}

.checkin-guide-kicker {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #8a5a00;
}

.checkin-guide-lead {
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #5e4720;
  font-weight: 700;
}

.checkin-guide-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.checkin-guide-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #111;
  border-radius: 999px;
  padding: 4px 10px;
  background: #fff8d7;
  color: #7a4e00;
  font-size: 0.72rem;
  font-weight: 800;
}

.checkin-guide-note {
  background: linear-gradient(135deg, #fff6d7 0%, #ffe7bb 100%);
}

.checkin-guide-note span {
  color: #7a4d00;
  font-weight: 800;
}

.checkin-guide-list {
  margin-bottom: 12px;
}

.rank-guide-card {
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px 14px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.16), transparent 36%),
    linear-gradient(180deg, #fffdfa 0%, #f7f7f7 100%);
}

.rank-guide-badges {
  margin-bottom: 12px;
}

.rank-guide-list {
  margin-bottom: 12px;
}

.rank-tier-guide-modal {
  margin-top: 10px;
}

.guide-list {
  margin: 0 0 10px;
  padding-left: 1.15rem;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.ocr-overlay[hidden] {
  display: none !important;
}

.ocr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6, 22, 18, 0.46);
  display: grid;
  place-items: center;
  padding: 20px;
}

.ocr-modal {
  width: min(320px, 90vw);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 18px 46px rgba(16, 52, 43, 0.28);
}

.ocr-spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid #d8f5eb;
  border-top-color: #0d9488;
  margin: 0 auto 10px;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1240px) {
  .admin-top-actions,
  .admin-page-tabs,
  .admin-scope-switch .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-dock {
    max-height: 260px;
  }
}

@media (max-width: 1460px) {
  .service-record-admin-layout {
    grid-template-columns: 1fr;
  }

  .service-record-form .row-3,
  .service-record-filter-form .row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-record-form .row-3 > label:last-child,
  .service-record-filter-form .row-3 > label:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1120px) {
  .admin-layout {
    display: block;
    width: 100%;
  }

  .admin-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
  }

  .admin-main {
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }
}

@media (max-width: 980px) {
  .grid-2,
  .row,
  .row-3 {
    grid-template-columns: 1fr;
  }

  .appointment-filters {
    grid-template-columns: 1fr;
  }

  th,
  td {
    white-space: normal;
  }

  .calendar-grid {
    gap: 4px;
  }

  .calendar-head,
  .calendar-cell {
    min-height: 66px;
    padding: 5px;
  }

  .timeline-hour-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .timeline-hour-axis {
    justify-content: flex-start;
  }

  .tabs {
    grid-template-columns: 1fr;
  }

  .identity-strip {
    grid-template-columns: 1fr;
  }

  .plate-grid {
    grid-template-columns: 1fr;
  }

  .registration-ocr-form.is-manual-plate-open .registration-preview-block {
    position: sticky;
    top: 6px;
    z-index: 4;
    background: linear-gradient(180deg, rgba(247, 253, 243, 0.98) 0%, rgba(247, 253, 243, 0.92) 100%);
    padding: 4px 0 8px;
  }

  .registration-ocr-form.is-manual-plate-open .registration-ocr-preview-wrap {
    box-shadow: 0 8px 18px rgba(33, 74, 47, 0.12);
  }

  .registration-ocr-view {
    padding: 0 10px 12px;
  }

  .registration-ocr-headline {
    margin: 0 -10px 10px;
    font-size: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .camera-guide-card {
    padding: 14px 12px 12px;
  }

  .guide-camera-stage,
  .guide-camera-video {
    min-height: 280px;
    height: 280px;
  }

  .guide-camera-mask {
    padding: 22px 14px;
  }

  .guide-camera-frame {
    width: min(100%, 280px);
  }

  .registration-ocr-intro {
    padding: 10px;
    border-radius: 16px;
  }

  .registration-ocr-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .registration-ocr-hero-copy {
    justify-items: center;
  }

  .registration-ocr-choice-grid,
  .registration-ocr-subactions {
    grid-template-columns: 1fr;
  }

  .registration-choice-btn {
    min-height: 132px;
  }

  .jp-plate-top {
    grid-template-columns: minmax(0, 1fr) 94px;
    margin: 0 12px 8px;
  }

  .jp-plate-bottom {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px;
  }

  .jp-plate-bottom-box {
    min-height: 86px;
  }

  .point-visual-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .point-visual-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
    min-height: 104px;
    padding: 6px 6px;
    border-radius: 12px;
  }

  .point-card-content {
    justify-items: center;
    gap: 1px;
  }

  .point-card-content .meta-label {
    font-size: 0.5rem;
  }

  .point-card-content strong {
    font-size: clamp(0.68rem, 3.2vw, 0.84rem);
    line-height: 1.08;
  }

  .point-card-illustration {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 8px;
  }

  .point-card-note {
    max-width: 13ch;
    font-size: 0.54rem;
    line-height: 1.2;
  }

  .point-balance-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 0;
    padding: 12px 13px;
  }

  .point-balance-card .point-card-content {
    justify-items: center;
    gap: 3px;
  }

  .point-balance-card .point-card-content .meta-label {
    font-size: 0.62rem;
  }

  .point-balance-card .point-card-content strong {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }

  .point-balance-card .point-card-note {
    max-width: none;
    font-size: 0.7rem;
    line-height: 1.35;
    text-align: center;
  }

  .point-balance-card .point-balance-illustration {
    width: 56px;
    height: 56px;
    flex-basis: auto;
    border-radius: 0;
  }

  .qr-scanner-actions {
    grid-template-columns: 1fr;
  }

  .checkin-action-panel {
    padding: 11px 10px;
    gap: 9px;
  }

  .checkin-action-title {
    font-size: 0.9rem;
  }

  .checkin-action-lead {
    font-size: 0.73rem;
  }

  .checkin-action-btn {
    min-height: 76px;
    padding: 12px 10px;
  }

  .checkin-action-btn-main {
    font-size: 0.95rem;
  }

  .checkin-action-btn-sub {
    font-size: 0.71rem;
  }

  .mypage-menu-grid .mypage-menu-tile {
    max-width: none;
  }

  .mypage-quick-stats {
    gap: 6px;
  }

  .mypage-poster-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .mypage-module-grid {
    grid-template-columns: 1fr;
  }

  .mypage-hero {
    width: 100%;
  }

  .mypage-member-summary {
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: start;
  }

  .mypage-avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }

  .mypage-route-head {
    top: calc(4px + env(safe-area-inset-top));
    padding: 15px 14px 13px;
  }

  .mypage-route-title {
    font-size: 1.28rem;
  }

  .mypage-module {
    padding: 20px 13px 14px;
  }

  .booking-route-page .mypage-route-title {
    font-size: 1.42rem;
  }

  .mypage-menu-tile {
    min-height: 130px;
  }

  .mypage-menu-grid-secondary .mypage-menu-tile {
    min-height: 130px;
  }

  .mypage-menu-grid-primary .mypage-menu-tile {
    min-height: 156px;
  }

  .mypage-service-tile-simple {
    padding: 9px 7px 8px !important;
    gap: 7px;
  }

  .mypage-service-tile-simple .service-illustration {
    width: 6.1rem;
    min-height: 6.1rem;
    border-radius: 20px;
    padding: 7px;
  }

  .mypage-service-tile-simple .service-illustration.service-illustration-image {
    padding: 7px;
  }

  .mypage-service-tile-simple strong {
    font-size: 1.14rem;
    line-height: 1.05;
  }

  .mypage-quick-stats {
    gap: 7px;
  }

  .mypage-back-btn {
    width: 100%;
    min-height: 44px;
  }

  .mypage-route-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .admin-top-actions,
  .admin-nav,
  .admin-page-tabs,
  .admin-scope-switch .actions {
    grid-template-columns: 1fr;
  }

  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-insights {
    grid-template-columns: 1fr;
  }

  .dashboard-split {
    grid-template-columns: 1fr;
  }

  .service-record-admin-layout {
    grid-template-columns: 1fr;
  }

  .qr-admin-layout {
    grid-template-columns: 1fr;
  }

  .service-history-summary {
    grid-template-columns: 1fr;
  }

  .service-history-route-head {
    padding: 14px 14px 16px;
  }

  .service-history-module {
    padding: 16px 14px 14px;
  }

  .service-history-filter-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .coupon-activate-card h3 {
    font-size: 1.2rem;
  }

  .coupon-activate-description {
    font-size: 0.94rem;
  }

  .admin-main-header-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-center-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body:not(.liff-body) .container.admin-shell {
    width: calc(100vw - 10px);
    max-width: none;
    padding: 4px 3px 18px;
    overflow-x: clip;
  }

  .admin-global-header,
  .admin-sidebar,
  .admin-main,
  .admin-main > [id^='section-'],
  .admin-main > .admin-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-sidebar {
    gap: 8px;
    padding: 10px;
    position: sticky;
    top: calc(78px + env(safe-area-inset-top));
    z-index: 68;
    max-height: min(76vh, calc(100vh - 88px - env(safe-area-inset-top)));
    overflow: auto;
  }

  .admin-sidebar-menu-body {
    width: 100%;
    min-width: 0;
  }

  .admin-mobile-menu-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .admin-sidebar.is-collapsed {
    max-height: none;
    overflow: visible;
  }

  .admin-nav a,
  .admin-top-actions > *,
  .admin-sidebar-tools,
  .notification-dock,
  .admin-kpi-mini {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-nav a {
    padding: 9px 10px;
  }

  .admin-top-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell {
    border-radius: 20px;
  }

  .admin-sidebar-tools,
  .notification-dock,
  .admin-kpi-mini {
    display: none;
  }

  .admin-action-center {
    padding: 12px;
  }

  .admin-mobile-menu-toggle-copy strong {
    font-size: 0.84rem;
  }

  .action-center-group {
    gap: 8px;
  }

  .booking-slot-row {
    grid-template-columns: 1fr;
  }

  .booking-slot-picker-head {
    grid-template-columns: 1fr;
  }

  .booking-slot-picker-title {
    text-align: left;
  }

  .action-center-group-head {
    align-items: flex-start;
  }

  .action-card {
    padding: 12px;
    gap: 7px;
  }

  .action-card-head {
    display: grid;
    gap: 6px;
  }

  .action-card-time {
    text-align: left;
  }

  .action-card .table-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .perk-roadmap-head {
    grid-template-columns: 1fr;
  }

  .perk-roadmap-visual {
    min-height: 282px;
    padding: 8px;
  }

  .perk-roadmap-canvas {
    min-height: 258px;
  }

  .perk-roadmap-node {
    width: min(108px, 32vw);
    padding: 7px 8px;
  }

  .perk-roadmap-node strong {
    font-size: 0.72rem;
  }

  .perk-roadmap-node small,
  .perk-roadmap-node-status {
    font-size: 0.62rem;
  }

  .perk-roadmap-current-pill {
    top: 8px;
    left: 8px;
    min-width: 74px;
    padding: 5px 7px;
  }

  .profile-quick-btn {
    gap: 6px;
    padding: 7px 8px !important;
  }

  .profile-quick-title {
    min-width: 4rem;
    font-size: 0.66rem;
    padding: 3px 6px;
  }

  .profile-quick-name {
    font-size: 0.82rem;
  }

  .profile-quick-badge {
    font-size: 0.64rem !important;
    padding: 2px 6px !important;
  }

  .quick-stat-line {
    min-height: 84px;
    padding: 9px 8px;
  }

  .quick-stat-kicker {
    min-width: 2.5rem;
    font-size: 0.5rem;
  }

  .quick-stat-label {
    font-size: 0.76rem;
  }

  .quick-stat-next {
    font-size: 0.82rem;
    max-width: none;
  }

  .quick-stat-sub {
    font-size: 0.62rem;
  }

  .home-booking-module {
    margin-top: 10px;
    padding-top: 14px;
  }

  .home-booking-module .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .home-booking-module .section-subtitle {
    font-size: 0.71rem;
  }

  .home-booking-module .section-head .table-action-btn {
    width: 100%;
    min-height: 40px;
  }

  .booking-module-head .section-subtitle {
    font-size: 0.71rem;
  }

  .section-head.booking-history-head {
    display: grid;
    align-items: stretch;
    gap: 8px;
  }

  .booking-form-stack {
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  body.booking-selection-lock .liff-container {
    padding-top: 10px;
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body.booking-route-inline-actions .liff-container,
  body.booking-route-inline-actions.booking-selection-lock .liff-container {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  body.booking-selection-lock .bottom-actionbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(356px, calc(100vw - 14px));
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 6px 7px;
  }

  body.booking-route-inline-actions .bottom-actionbar,
  body.booking-route-inline-actions.booking-selection-lock .bottom-actionbar {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(760px, calc(100vw - 14px));
    margin: 10px auto calc(12px + env(safe-area-inset-bottom));
  }

  body.booking-selection-lock .bottom-action-btn {
    min-height: 54px;
    padding: 7px 8px;
  }

  body.booking-selection-lock .bottom-action-label {
    font-size: 0.86rem;
    line-height: 1.1;
  }

  body.booking-selection-lock #tab-profile.active {
    gap: 6px;
  }

  body.booking-selection-lock .booking-view-switch {
    gap: 5px;
  }

  body.booking-selection-lock .booking-view-btn {
    min-height: 36px;
    font-size: 0.8rem;
  }

  .booking-choice-toggle,
  .booking-step-actions-split {
    grid-template-columns: 1fr;
  }

  .registration-step-actions.booking-step-actions-split,
  .registration-submit-actions.booking-step-actions-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-wizard-topbar {
    gap: 8px;
  }

  .booking-wizard-title-wrap {
    padding-inline: 52px;
  }

  body.booking-selection-lock .booking-form-stack {
    gap: 8px;
    padding: 8px 8px 10px;
    border-radius: 14px;
  }

  body.booking-selection-lock .booking-wizard-topbar {
    gap: 6px;
    margin-bottom: 4px;
  }

  body.booking-selection-lock .booking-wizard-cancel-btn {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.72rem;
  }

  body.booking-selection-lock .booking-step-counter {
    font-size: 0.6rem;
  }

  .booking-step-title {
    font-size: 1.08rem;
  }

  body.booking-selection-lock .booking-step-title {
    font-size: 1rem;
  }

  .booking-service-grid {
    gap: 8px;
  }

  body.booking-selection-lock .booking-step-indicators {
    gap: 2px;
    margin-bottom: 4px;
  }

  body.booking-selection-lock .booking-step-indicators::before,
  body.booking-selection-lock .booking-step-indicators::after {
    top: 14px;
  }

  body.booking-selection-lock .booking-step-indicator {
    gap: 3px;
  }

  body.booking-selection-lock .booking-step-indicator-dot {
    width: 28px;
    height: 28px;
    font-size: 0.74rem;
  }

  body.booking-selection-lock .booking-step-indicator-text {
    font-size: 0.6rem;
    line-height: 1.12;
  }

  .booking-service-card {
    min-height: 126px;
    padding: 8px !important;
  }

  body.booking-selection-lock .booking-service-grid {
    gap: 6px;
  }

  body.booking-selection-lock .booking-service-card {
    min-height: 104px;
    padding: 7px !important;
    gap: 0;
  }

  .booking-service-card-visual {
    min-height: 100%;
    border-radius: 14px;
    padding: 10px 12px 9px;
  }

  body.booking-selection-lock .booking-service-card-visual {
    min-height: 100%;
    border-radius: 12px;
    padding: 8px 10px 8px;
  }

  .booking-service-card .service-illustration {
    width: min(96px, 100%);
    min-height: 46px;
  }

  body.booking-selection-lock .booking-service-card .service-illustration {
    width: min(78px, 100%);
    min-height: 36px;
  }

  .booking-service-card strong {
    font-size: 0.82rem;
  }

  body.booking-selection-lock .booking-service-card strong {
    font-size: 0.72rem;
    line-height: 1.06;
  }

  .booking-service-card-copy {
    margin-top: 4px;
    padding-inline: 8px 16px;
  }

  .booking-service-card .booking-service-card-arrow {
    right: 10px;
    bottom: 10px;
    font-size: 1.15rem;
  }

  body.booking-selection-lock .booking-service-card .booking-service-card-arrow {
    right: 8px;
    bottom: 8px;
    font-size: 1rem;
  }

  .booking-step-indicator-text {
    font-size: 0.68rem;
  }

  .booking-step-copy-selection {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .booking-confirm-mini-grid {
    grid-template-columns: 1fr;
  }

  .booking-submit-preview {
    grid-template-columns: 1fr;
  }

  .booking-confirm-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 12px;
  }

  .booking-field {
    gap: 6px;
    padding: 9px;
    border-radius: 14px;
  }

  .booking-form-stack input,
  .booking-form-stack select,
  .booking-form-stack textarea {
    padding: 10px 11px;
    font-size: 16px;
  }

  .booking-form-stack input[type='datetime-local'] {
    min-height: 48px;
  }

  .booking-wizard-topbar {
    gap: 10px;
    margin-bottom: 8px;
  }

  .booking-wizard-title-wrap {
    gap: 3px;
    padding-top: 1px;
  }

  .booking-wizard-cancel-btn {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.72rem;
  }

  .booking-form-stack textarea {
    min-height: 78px;
  }

  .booking-form-help {
    font-size: 0.7rem;
  }

  .booking-history-refresh-btn {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 0.72rem;
  }

  .booking-history-filter-btn {
    min-height: 30px;
    padding-inline: 9px !important;
    font-size: 0.68rem;
  }

  .registration-ocr-preview-wrap {
    min-height: 160px;
  }

  .registration-ocr-tools button {
    min-height: 42px;
  }

  .dashboard-kpis {
    grid-template-columns: 1fr;
  }
}

/* My Page redesign override (2026-03-27) */
#myPageView {
  --mypage-surface: rgba(255, 255, 255, 0.98);
  --mypage-surface-soft: #fffaf0;
  --mypage-surface-soft-2: #fff6df;
  --mypage-line: #111111;
  --mypage-line-strong: #111111;
  --mypage-text: #111111;
  --mypage-muted: #545454;
  --mypage-shadow: 0 8px 0 rgba(0, 0, 0, 0.16), 0 18px 30px rgba(0, 0, 0, 0.10);
  --mypage-shadow-soft: 0 5px 0 rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.08);
}

#myPageView #tab-profile.active {
  gap: 12px;
}

#myPageView .mypage-home-shell {
  gap: 10px;
  margin-bottom: 8px;
}

#myPageView .home-member-card {
  gap: 0;
}

#myPageView .mypage-home-header {
  gap: 10px;
  padding: 1px 2px 0;
}

#myPageView .mypage-home-brand {
  gap: 0;
}

#myPageView .mypage-home-brand-title {
  font-size: clamp(1.22rem, 4.2vw, 1.46rem);
}

#myPageView .mypage-home-brand-sub {
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

#myPageView .mypage-home-greeting-btn {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border: 1.5px solid rgba(17, 17, 17, 0.72);
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.74), transparent 46%),
    linear-gradient(180deg, #fffefb 0%, #fff9eb 100%) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.09), 0 8px 14px rgba(0, 0, 0, 0.05);
  padding: 8px 11px !important;
  color: #1c2a44 !important;
  text-align: left;
  cursor: default;
}

#myPageView .mypage-home-greeting-copy {
  min-width: 0;
  display: grid;
  gap: 0;
}

#myPageView .mypage-home-greeting-inline {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  color: #1f2d46;
  line-height: 1.15;
}

#myPageView .mypage-home-greeting-salute,
#myPageView .mypage-home-greeting-honorific {
  flex: 0 0 auto;
  color: #74839b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#myPageView .mypage-home-greeting-name {
  display: block;
  min-width: 0;
  color: #1c2a44;
  font-size: clamp(0.98rem, 3.7vw, 1.08rem);
  line-height: 1.15;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#myPageView .home-member-card-collapsed,
#myPageView .home-member-card-expanded,
#myPageView .point-balance-card,
#myPageView .point-rank-progress-panel,
#myPageView .digital-member-card {
  --member-theme-panel-top: #fffef8;
  --member-theme-panel-bottom: #ffefc3;
  --member-theme-panel-soft-top: #fffaf0;
  --member-theme-panel-soft-bottom: #ffffff;
  --member-theme-radial: rgba(255, 214, 96, 0.34);
  --member-theme-frame-top: #fff7d8;
  --member-theme-frame-bottom: #ffe9a7;
  --member-theme-badge-top: #ffe48b;
  --member-theme-badge-bottom: #f5b500;
  --member-theme-pill-top: #ffffff;
  --member-theme-pill-bottom: #fff8e7;
  --member-theme-icon-top: #fff9e6;
  --member-theme-icon-bottom: #fff4cf;
  --member-theme-text: #111111;
  --member-theme-accent: #7b5c00;
  --member-theme-muted: #6c5a24;
  --member-theme-border: rgba(17, 17, 17, 0.18);
}

#myPageView .tier-theme-starter {
  --member-theme-panel-top: #fffef8;
  --member-theme-panel-bottom: #ffefc3;
  --member-theme-panel-soft-top: #fffaf0;
  --member-theme-panel-soft-bottom: #ffffff;
  --member-theme-radial: rgba(255, 214, 96, 0.34);
  --member-theme-frame-top: #fff7d8;
  --member-theme-frame-bottom: #ffe9a7;
  --member-theme-badge-top: #ffe48b;
  --member-theme-badge-bottom: #f5b500;
  --member-theme-pill-top: #ffffff;
  --member-theme-pill-bottom: #fff8e7;
  --member-theme-icon-top: #fff9e6;
  --member-theme-icon-bottom: #fff4cf;
  --member-theme-text: #111111;
  --member-theme-accent: #7b5c00;
  --member-theme-muted: #6c5a24;
  --member-theme-border: rgba(17, 17, 17, 0.18);
}

#myPageView .tier-theme-silver {
  --member-theme-panel-top: #fbfdff;
  --member-theme-panel-bottom: #deebf5;
  --member-theme-panel-soft-top: #f7fbff;
  --member-theme-panel-soft-bottom: #ffffff;
  --member-theme-radial: rgba(173, 192, 214, 0.36);
  --member-theme-frame-top: #f9fcff;
  --member-theme-frame-bottom: #dfeaf4;
  --member-theme-badge-top: #f2f7fb;
  --member-theme-badge-bottom: #c7d5e3;
  --member-theme-pill-top: #ffffff;
  --member-theme-pill-bottom: #eef4f8;
  --member-theme-icon-top: #f8fbff;
  --member-theme-icon-bottom: #e4edf7;
  --member-theme-text: #223546;
  --member-theme-accent: #58718a;
  --member-theme-muted: #4a6277;
  --member-theme-border: rgba(72, 96, 122, 0.22);
}

#myPageView .tier-theme-gold {
  --member-theme-panel-top: #fffdf4;
  --member-theme-panel-bottom: #ffe4a3;
  --member-theme-panel-soft-top: #fff8e8;
  --member-theme-panel-soft-bottom: #fffef8;
  --member-theme-radial: rgba(241, 179, 0, 0.32);
  --member-theme-frame-top: #fff3c6;
  --member-theme-frame-bottom: #ffd66f;
  --member-theme-badge-top: #ffe48b;
  --member-theme-badge-bottom: #f5b500;
  --member-theme-pill-top: #fffdf5;
  --member-theme-pill-bottom: #fff1c7;
  --member-theme-icon-top: #fff6d4;
  --member-theme-icon-bottom: #ffe28d;
  --member-theme-text: #3c3000;
  --member-theme-accent: #8b6500;
  --member-theme-muted: #78602a;
  --member-theme-border: rgba(130, 96, 0, 0.24);
}

#myPageView .tier-theme-platinum {
  --member-theme-panel-top: #f7feff;
  --member-theme-panel-bottom: #d6f3ff;
  --member-theme-panel-soft-top: #f4fcff;
  --member-theme-panel-soft-bottom: #ffffff;
  --member-theme-radial: rgba(107, 218, 247, 0.28);
  --member-theme-frame-top: #f0fdff;
  --member-theme-frame-bottom: #cdefff;
  --member-theme-badge-top: #dff8ff;
  --member-theme-badge-bottom: #8edff4;
  --member-theme-pill-top: #fbfeff;
  --member-theme-pill-bottom: #e8f8ff;
  --member-theme-icon-top: #f2fcff;
  --member-theme-icon-bottom: #d8f4ff;
  --member-theme-text: #133a48;
  --member-theme-accent: #17728a;
  --member-theme-muted: #406774;
  --member-theme-border: rgba(28, 125, 152, 0.22);
}

#myPageView .home-member-card-collapsed {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  border: 2px solid #111111;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.82), transparent 46%),
    linear-gradient(180deg, var(--member-theme-panel-top) 0%, var(--member-theme-panel-bottom) 100%);
  box-shadow: var(--mypage-shadow-soft);
}

#myPageView .home-member-card-collapsed::after {
  content: '›';
  align-self: center;
  justify-self: end;
  color: #111111;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
}

#myPageView .home-member-card-visual-frame {
  width: 84px;
  border-radius: 22px;
  padding: 14px;
  border: 2px solid #111111;
  background: linear-gradient(180deg, var(--member-theme-frame-top) 0%, var(--member-theme-frame-bottom) 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

#myPageView .home-member-card-copy {
  gap: 0;
}

#myPageView .home-member-card-copy strong {
  font-size: clamp(1.02rem, 4.2vw, 1.32rem);
  color: var(--member-theme-text);
}

#myPageView .home-member-card-copy small {
  font-size: 0.74rem;
  color: var(--member-theme-muted);
}

#myPageView .home-member-card-expanded {
  gap: 9px;
  padding: 12px 12px 10px;
  border: 2px solid #111111;
  background:
    radial-gradient(circle at 100% 0%, var(--member-theme-radial), transparent 48%),
    linear-gradient(180deg, var(--member-theme-panel-top) 0%, var(--member-theme-panel-bottom) 100%);
  box-shadow: var(--mypage-shadow-soft);
}

#myPageView .home-member-card-qr-wrap {
  min-height: 248px;
  border: 2px solid #111111;
  background: #ffffff;
  padding: 10px;
}

#myPageView .home-member-card-qr-wrap img {
  width: min(224px, 100%);
}

#myPageView .member-card-tier-badge {
  border-color: rgba(17, 17, 17, 0.68);
  background: linear-gradient(180deg, var(--member-theme-badge-top) 0%, var(--member-theme-badge-bottom) 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

#myPageView .member-card-code-strip {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .member-card-code-strip strong {
  color: #404040;
}

#myPageView .home-primary-action {
  grid-template-columns: 1fr;
  align-content: center !important;
  justify-items: center !important;
  gap: 14px;
  min-height: 136px;
  padding: 18px 14px !important;
  text-align: center;
  border: 2px solid #111111 !important;
  box-shadow: var(--mypage-shadow);
}

#myPageView .home-primary-action-icon {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .home-primary-action-copy {
  justify-items: center;
  align-content: center;
  gap: 0;
}

#myPageView .home-primary-action-title {
  font-size: 1.34rem;
  line-height: 1.08;
  color: #111111;
}

#myPageView .home-primary-action-lead,
#myPageView .home-primary-action-meta {
  display: none !important;
}

#myPageView .mypage-menu-caption {
  color: #4d3c00;
  letter-spacing: 0.08em;
}

#myPageView .mypage-route-page {
  gap: 12px;
}

#myPageView.route-detail-mode .mypage-hero {
  display: none;
}

#myPageView.route-detail-mode #tab-profile.active,
#myPageView.booking-route-focus #tab-profile.active,
#myPageView.booking-route-focus .booking-route-page,
#myPageView.booking-route-focus .booking-route-layout {
  gap: 12px;
}

#myPageView.booking-route-focus .booking-route-page .mypage-route-head {
  display: grid;
}

#myPageView .mypage-route-head {
  position: static;
  gap: 8px;
  margin: 0;
  border: 2px solid var(--mypage-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.88), transparent 44%),
    linear-gradient(180deg, #fffef9 0%, var(--mypage-surface-soft) 100%);
  padding: 18px 18px 16px;
  box-shadow: var(--mypage-shadow-soft);
}

#myPageView .mypage-route-meta {
  gap: 4px;
}

#myPageView .mypage-route-title,
#myPageView .profile-route-head h3 {
  color: var(--mypage-text);
  font-size: 1.34rem;
  line-height: 1.14;
  letter-spacing: 0.01em;
}

#myPageView .mypage-route-subtitle {
  color: var(--mypage-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

#myPageView .mypage-module {
  border: 2px solid var(--mypage-line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, var(--mypage-surface-soft) 100%);
  padding: 18px 18px 16px;
  box-shadow: var(--mypage-shadow);
}

#myPageView .perk-module {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

#myPageView .mypage-route-page[data-page='perk'] .mypage-route-head {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 2px 4px;
  box-shadow: none;
}

#myPageView .mypage-route-page[data-page='perk'] .mypage-route-subtitle {
  display: none;
}

#myPageView .mypage-module::before {
  display: none;
}

#myPageView .service-history-route-head,
#myPageView .service-history-module {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.94), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, var(--mypage-surface-soft) 100%);
  border-color: var(--mypage-line);
  border-radius: 24px;
  padding: 18px;
}

#myPageView .service-history-module {
  margin-top: 0;
}

#myPageView .checkin-action-panel,
#myPageView .point-visual-card,
#myPageView .point-rank-progress-panel,
#myPageView .point-history-details,
#myPageView .perk-roadmap-panel,
#myPageView .perk-item,
#myPageView .service-history-stat-card,
#myPageView .service-history-item,
#myPageView .digital-member-card,
#myPageView .coupon-active-panel,
#myPageView .coupon-item,
#myPageView .coupon-empty,
#myPageView .booking-history li,
#myPageView .profile-form-paged .profile-block,
#myPageView .profile-form-paged .vehicle-editor-panel,
#myPageView .profile-form-paged .vehicle-editor-card,
#myPageView .profile-form-paged .vehicle-editor-grid {
  border: 2px solid var(--mypage-line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 249, 235, 0.96) 100%);
  box-shadow: var(--mypage-shadow-soft);
}

#myPageView .checkin-action-panel,
#myPageView .point-history-details,
#myPageView .perk-roadmap-panel,
#myPageView .digital-member-card,
#myPageView .coupon-active-panel,
#myPageView .coupon-item,
#myPageView .coupon-empty,
#myPageView .booking-history li,
#myPageView .profile-form-paged .profile-block {
  padding: 16px;
}

#myPageView .point-visual-summary {
  grid-template-columns: 1fr;
  gap: 12px;
}

#myPageView .point-visual-card {
  padding: 12px 14px;
  gap: 10px;
}

#myPageView .point-balance-card {
  min-height: 0;
  padding: 12px 18px 16px;
  gap: 6px;
  align-content: start;
  background:
    radial-gradient(circle at 100% 0%, var(--member-theme-radial), transparent 46%),
    linear-gradient(180deg, var(--member-theme-panel-soft-top) 0%, var(--member-theme-panel-soft-bottom) 72%);
}

#myPageView .point-balance-card .point-card-content {
  justify-items: center;
  text-align: center;
  gap: 2px;
}

#myPageView .point-balance-card .point-card-content strong {
  font-size: clamp(3.2rem, 13vw, 4.8rem);
  color: var(--member-theme-text);
}

#myPageView .point-balance-card .point-card-note {
  max-width: none;
  text-align: center;
  color: var(--member-theme-muted);
}

#myPageView .point-balance-card .point-balance-illustration {
  width: 80px;
  height: 80px;
  flex-basis: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin-top: -2px;
}

#myPageView .point-rank-card {
  background:
    radial-gradient(circle at 0% 100%, rgba(86, 189, 168, 0.14), transparent 48%),
    linear-gradient(180deg, #f8fcff 0%, #ffffff 72%);
}

#myPageView .point-card-illustration {
  border: 1.5px solid var(--mypage-line-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7dc 0%, #fff0c1 100%);
}

#myPageView .point-rank-progress-summary {
  padding-bottom: 12px;
}

#myPageView .point-rank-progress-panel {
  background:
    radial-gradient(circle at 100% 0%, var(--member-theme-radial), transparent 42%),
    linear-gradient(180deg, var(--member-theme-panel-soft-top) 0%, var(--member-theme-panel-soft-bottom) 100%);
}

#myPageView .point-rank-progress-icon {
  background: linear-gradient(180deg, var(--member-theme-icon-top) 0%, var(--member-theme-icon-bottom) 100%);
}

#myPageView .point-rank-progress-panel,
#myPageView .point-history-details,
#myPageView .perk-roadmap-panel {
  padding: 16px;
}

#myPageView .point-history-details {
  padding: 0;
}

#myPageView .point-history-summary {
  gap: 8px;
  padding: 8px 10px;
}

#myPageView .point-history-summary::after {
  min-width: 3.2rem;
  padding: 4px 8px;
  font-size: 0.66rem;
}

#myPageView .point-history-details[open] .point-history-summary {
  padding-bottom: 6px;
}

#myPageView .point-history-head {
  min-width: 0;
  gap: 1px;
}

#myPageView .point-history-head h4 {
  font-size: 0.88rem;
  line-height: 1.14;
}

#myPageView .point-history-head p {
  font-size: 0.66rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#myPageView .point-history-list {
  padding: 0 10px 10px;
  gap: 5px;
}

#myPageView .point-history-details[open] .point-history-list {
  padding-top: 8px;
}

#myPageView .point-history-summary,
#myPageView .perk-roadmap-head,
#myPageView .booking-module-head {
  border-bottom-color: var(--mypage-line);
}

/* ── Point page: only specific buttons are interactive ── */
#myPageView .point-module {
  pointer-events: none;
}

#myPageView .point-module #checkinPointBtn,
#myPageView .point-module #openCheckinGuideBtn,
#myPageView .point-module #toggleRankProgressBtn,
#myPageView .point-module .point-history-summary {
  pointer-events: auto;
}

#myPageView .home-member-card-kicker,
#myPageView .member-card-code-strip-label,
#myPageView .point-balance-card .point-card-content .meta-label,
#myPageView .point-rank-progress-summary-copy .meta-label,
#myPageView .point-rank-progress-copy {
  color: var(--member-theme-accent);
}

#myPageView .member-card-code-strip strong,
#myPageView .point-rank-progress-summary-copy strong {
  color: var(--member-theme-text);
}

#myPageView .point-rank-progress-summary {
  border-bottom-color: var(--member-theme-border);
}

#myPageView .perk-roadmap-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 10px;
  padding: 0;
}

#myPageView .perk-roadmap-goal-panel {
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 248, 223, 0.72) 0%, rgba(255, 255, 255, 0.96) 100%);
  padding: 12px;
  box-shadow: none;
}

#myPageView .perk-roadmap-visual {
  border: 1px solid rgba(32, 32, 32, 0.24);
  border-radius: 18px;
  padding: 8px;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f8ff 34%, #fff9ee 100%);
}

#myPageView .perk-roadmap-current-pill {
  border-width: 1px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

#myPageView .perk-roadmap-node {
  border-width: 1px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

#myPageView .perk-roadmap-node::before {
  border-right-width: 1px;
  border-bottom-width: 1px;
}

#myPageView .perk-item.available {
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.12), transparent 46%),
    linear-gradient(180deg, #fffdf5 0%, #ffffff 72%);
}

#myPageView .perk-item {
  border-width: 1px;
  border-color: rgba(32, 32, 32, 0.26);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04);
}

#myPageView .perk-item.next-target {
  border-color: #e6cb86;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.14), transparent 44%),
    linear-gradient(180deg, #fff8e2 0%, #ffffff 72%);
}

#myPageView .perk-inline-roadmap-line {
  background: rgba(32, 32, 32, 0.16);
}

#myPageView .perk-inline-roadmap-status {
  border-color: rgba(32, 32, 32, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
}

#myPageView .perk-inline-roadmap-node small {
  color: #6a6a6a;
}

#myPageView .perk-inline-roadmap-current-pill {
  background: #fff8df;
}

#myPageView .service-history-summary {
  gap: 12px;
}

#myPageView .service-history-stat-card {
  padding: 14px 16px;
}

#myPageView .service-history-stat-card strong {
  color: var(--mypage-text);
}

#myPageView .service-history-stat-card small,
#myPageView .service-history-item-body p,
#myPageView .digital-member-card-note {
  color: var(--mypage-muted);
}

#myPageView .service-history-item {
  padding: 14px 16px;
}

#myPageView .digital-member-card {
  padding: 18px;
  gap: 16px;
  background:
    radial-gradient(circle at 100% 0%, var(--member-theme-radial), transparent 42%),
    linear-gradient(180deg, var(--member-theme-panel-top) 0%, var(--member-theme-panel-bottom) 100%);
}

#myPageView .digital-member-card-head strong {
  color: var(--member-theme-text);
}

#myPageView .digital-member-card-head {
  align-items: flex-start;
}

#myPageView .digital-member-card-kicker {
  color: var(--member-theme-accent);
}

#myPageView .digital-member-card-body {
  border-color: var(--member-theme-border);
  border-radius: 24px;
  background: #ffffff;
  padding: 18px;
}

#myPageView .coupon-active-panel {
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.16), transparent 42%),
    linear-gradient(180deg, #fffdf5 0%, #fff7df 100%);
}

#myPageView .coupon-item {
  padding: 22px 18px 18px;
  display: grid;
  gap: 12px;
}

#myPageView .coupon-top-meta {
  gap: 6px;
}

#myPageView .coupon-title-block {
  gap: 6px;
  padding-top: 8px;
}

#myPageView .coupon-title {
  padding-left: 0;
  padding-right: 74px;
  font-size: clamp(1.18rem, 4.9vw, 1.92rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#myPageView .coupon-desc {
  max-width: min(100%, 22ch);
  margin-inline: auto;
  font-size: 0.72rem;
  line-height: 1.42;
  color: #5d5d5d;
  line-break: strict;
  text-wrap: pretty;
}

#myPageView .coupon-visual-summary {
  margin-top: 0;
  gap: 10px;
}

#myPageView .coupon-visual-card {
  padding: 12px 12px;
}

#myPageView .coupon-item .actions {
  margin-top: 2px;
}

#myPageView .coupon-item.is-active-window {
  border-color: rgba(201, 125, 0, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.12), transparent 44%),
    linear-gradient(180deg, #fffdf8 0%, #ffffff 72%);
}

#myPageView .coupon-active-inline {
  border-color: rgba(198, 111, 43, 0.24);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7da 0%, #fffdf3 100%);
}

#myPageView .booking-view-switch {
    border: 2px solid #111;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fffbf3 100%);
    padding: 4px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  }

#myPageView .booking-view-btn {
  min-height: 42px;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #444 !important;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: 900;
}

#myPageView .booking-view-btn.active {
  background: linear-gradient(180deg, #ffd85f 0%, #f5b500 100%) !important;
  color: #111 !important;
  box-shadow: 0 4px 10px rgba(245, 181, 0, 0.2);
}

  #myPageView .booking-wizard-topbar {
    gap: 8px;
  }

#myPageView .booking-wizard-module {
  padding: 10px 11px 11px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fffbf4 100%);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.12);
}

#myPageView .booking-step-indicators {
  margin-bottom: 8px;
}

#myPageView .booking-step-panel {
  gap: 10px;
}

#myPageView .booking-step-copy-selection {
  gap: 4px;
}

#myPageView .booking-service-grid {
  gap: 8px;
}

#myPageView .booking-service-card {
  border-radius: 18px !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

#myPageView .booking-service-card-visual {
  border-radius: 12px;
}

  #myPageView .booking-history li {
    padding: 12px 13px;
  }

#myPageView .profile-form-paged {
  gap: 12px;
}

#myPageView .profile-form-paged .profile-block {
  padding: 16px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-section-head {
  padding: 0 2px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-card {
  gap: 8px;
  border-radius: 18px;
  box-shadow: none;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-grid {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .profile-form-paged .vehicle-editor-plate-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

#myPageView .profile-form-paged .vehicle-editor-plate-block {
  gap: 8px;
}

#myPageView .profile-form-paged .vehicle-editor-plate-preview .jp-plate-card {
  width: min(300px, 100%);
}

#myPageView .profile-form-paged .vehicle-editor-plate-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#myPageView .profile-form-paged .vehicle-editor-list {
  gap: 12px;
}

#myPageView .profile-form-paged input,
#myPageView .profile-form-paged select,
#myPageView .profile-form-paged textarea {
  background: #ffffff;
}

  #myPageView .mypage-route-footer {
    display: grid;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 calc(6px + env(safe-area-inset-bottom));
  }

#myPageView .mypage-route-footer .mypage-back-btn {
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--mypage-line-strong);
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e7 100%) !important;
  color: var(--mypage-text) !important;
  box-shadow: var(--mypage-shadow-soft);
}

#myPageView .home-stat-card,
#myPageView .mypage-secondary-link {
  border: 2px solid #111111 !important;
  box-shadow: var(--mypage-shadow-soft);
}

#myPageView .home-stat-card {
  background: linear-gradient(180deg, #ffffff 0%, #fffbf1 100%) !important;
  color: #111111 !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12), 0 10px 18px rgba(0, 0, 0, 0.05);
}

#myPageView .home-stat-label,
#myPageView .home-stat-note {
  color: #5a5a5a;
}

#myPageView .home-stat-label {
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

#myPageView .home-stat-value {
  color: #111111;
}

#myPageView .home-primary-action.coupon {
  background: linear-gradient(180deg, #ff9c62 0%, #ff7a3d 100%) !important;
  color: #111111 !important;
}

#myPageView .home-primary-action.booking {
  background: linear-gradient(180deg, #6fe3d0 0%, #39cbb5 100%) !important;
  color: #111111 !important;
}

#myPageView .home-primary-action:hover,
#myPageView .home-stat-card:hover,
#myPageView .mypage-secondary-link:hover,
#myPageView .mypage-secondary-link.active {
  transform: translateY(-1px);
}

#myPageView .mypage-secondary-link {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  color: #111111 !important;
}

#myPageView .mypage-secondary-link:hover,
#myPageView .mypage-secondary-link.active {
  background: linear-gradient(180deg, #fffef8 0%, #fff1cc 100%) !important;
}

#myPageView .mypage-secondary-link .menu-illustration {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#myPageView .mypage-secondary-link strong,
#myPageView .mypage-secondary-link-arrow {
  color: #111111;
}

#myPageView .mypage-secondary-link small {
  color: #5a5a5a;
}

@media (max-width: 640px) {
  #myPageView .booking-route-page {
    gap: 8px;
  }

  #myPageView .booking-route-page .mypage-route-head {
    padding: 8px 10px;
    margin-bottom: 0;
    border-radius: 18px;
  }

  #myPageView .booking-route-page .mypage-route-title {
    font-size: 1rem;
  }

  #myPageView .booking-route-page .mypage-route-subtitle,
  #myPageView .booking-module-head .section-subtitle {
    display: none;
  }

  #myPageView .booking-view-switch {
    border-radius: 18px;
    padding: 3px;
  }

  #myPageView .booking-view-btn {
    min-height: 40px;
    border-radius: 14px !important;
    font-size: 0.86rem;
  }

  #myPageView .booking-wizard-module {
    padding: 9px 9px 10px;
    border-radius: 20px;
  }

  #myPageView .mypage-home-shell {
    gap: 8px;
    margin-bottom: 8px;
  }

  #myPageView .mypage-home-header {
    gap: 8px;
    padding: 0 1px 0;
  }

  #myPageView .mypage-home-brand-title {
    font-size: clamp(1.12rem, 4.6vw, 1.34rem);
  }

  #myPageView .mypage-home-brand-sub {
    font-size: 0.53rem;
  }

  #myPageView .mypage-home-greeting-btn {
    gap: 0;
    padding: 7px 9px !important;
    border-radius: 16px !important;
  }

  #myPageView .mypage-home-greeting-inline {
    gap: 0.06em;
  }

  #myPageView .mypage-home-greeting-salute,
  #myPageView .mypage-home-greeting-honorific {
    font-size: 0.6rem;
  }

  #myPageView .mypage-home-greeting-name {
    font-size: 0.86rem;
  }

  #myPageView .home-member-card-collapsed {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  #myPageView .home-member-card-visual-frame {
    width: 64px;
    border-radius: 18px;
    padding: 10px;
  }

  #myPageView .home-member-card-copy strong {
    font-size: 1rem;
  }

  #myPageView .home-member-card-copy small {
    font-size: 0.67rem;
  }

  #myPageView .home-member-card-expanded {
    padding: 10px 10px 8px;
  }

  #myPageView .member-card-tier-badge {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.68rem;
  }

  #myPageView .home-member-card-qr-wrap {
    min-height: 212px;
    padding: 9px;
  }

  #myPageView .home-member-card-qr-wrap img {
    width: min(198px, 100%);
  }

  #myPageView .member-card-code-strip {
    gap: 2px;
    padding: 0;
  }

  #myPageView .member-card-code-strip strong {
    font-size: 0.86rem;
    letter-spacing: 0.05em;
  }

  #myPageView .mypage-home-stats {
    gap: 8px;
  }

  #myPageView .home-stat-card {
    min-height: 98px;
    padding: 12px 10px !important;
    border-radius: 18px !important;
  }

  #myPageView .home-stat-label {
    font-size: 0.75rem;
  }

  #myPageView .home-stat-value {
    font-size: clamp(0.92rem, 4vw, 1.12rem);
  }

  #myPageView .home-stat-note {
    font-size: 0.65rem;
    line-height: 1.26;
  }

  #myPageView .mypage-primary-actions {
    gap: 10px;
  }

  #myPageView .home-primary-action {
    min-height: 120px;
    gap: 10px;
    padding: 14px 10px !important;
    border-radius: 20px !important;
  }

  #myPageView .home-primary-action-icon {
    width: 50px;
    height: 50px;
  }

  #myPageView .home-primary-action-title {
    font-size: 1.08rem;
  }

  #myPageView .mypage-secondary-link {
    min-height: 76px;
    gap: 10px;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  #myPageView .mypage-secondary-link .menu-illustration {
    width: 2.95rem;
    height: 2.95rem;
  }

  #myPageView .mypage-secondary-link strong {
    font-size: 0.92rem;
  }

  #myPageView .mypage-secondary-link small {
    font-size: 0.69rem;
  }

  #myPageView .mypage-route-head,
  #myPageView .service-history-route-head {
    padding: 16px 14px 14px;
    border-radius: 20px;
  }

  #myPageView .booking-view-switch {
    padding: 4px;
    border-radius: 18px;
  }

  #myPageView .booking-view-btn {
    min-height: 38px;
    border-radius: 14px !important;
  }

  #myPageView .booking-wizard-module,
  #myPageView .booking-history-module {
    padding: 12px 10px 10px;
    border-radius: 18px;
  }

  #myPageView .booking-wizard-topbar {
    gap: 6px;
    margin-bottom: 6px;
  }

  #myPageView .booking-wizard-cancel-btn {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.68rem;
  }

  #myPageView .booking-wizard-title-wrap {
    gap: 2px;
    padding: 0 48px;
  }

  #myPageView .booking-step-counter {
    font-size: 0.56rem;
  }

  #myPageView .booking-step-title {
    font-size: 1rem;
  }

  #myPageView .booking-step-indicators {
    gap: 3px;
    margin-bottom: 4px;
  }

  #myPageView .booking-step-indicators::before,
  #myPageView .booking-step-indicators::after {
    top: 14px;
  }

  #myPageView .booking-step-indicator {
    gap: 3px;
  }

  #myPageView .booking-step-indicator-dot {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }

  #myPageView .booking-step-indicator-text {
    font-size: 0.58rem;
  }

  #myPageView .booking-wizard-form {
    gap: 8px;
  }

  #myPageView .booking-step-panel {
    gap: 8px;
  }

  #myPageView .booking-service-grid {
    gap: 6px;
  }

  #myPageView .booking-service-card {
    min-height: 116px;
    padding: 8px 8px 8px !important;
    gap: 5px;
    border-radius: 16px !important;
  }

  #myPageView .booking-service-card-visual {
    min-height: 56px;
    border-radius: 12px;
    padding: 6px;
  }

  #myPageView .booking-service-card .service-illustration {
    width: min(86px, 100%);
    min-height: 40px;
  }

  #myPageView .booking-service-card strong {
    font-size: 0.84rem;
  }

  #myPageView .booking-service-card .booking-service-card-arrow {
    right: 8px;
    bottom: 8px;
    font-size: 1rem;
  }

  #myPageView .booking-field {
    gap: 5px;
    padding: 8px;
    border-radius: 12px;
  }

  #myPageView .booking-form-stack input,
  #myPageView .booking-form-stack select,
  #myPageView .booking-form-stack textarea {
    padding: 9px 10px;
  }

  #myPageView .booking-submit-preview {
    gap: 6px;
  }

  #myPageView .booking-submit-preview-item {
    padding: 9px 10px;
  }

  #myPageView .booking-route-footer {
    gap: 6px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }

  #myPageView .booking-route-footer .mypage-back-btn {
    min-height: 42px;
    border-radius: 16px !important;
  }

  #myPageView .booking-history {
    margin-top: 6px;
    gap: 6px;
  }

  #myPageView .mypage-route-title,
  #myPageView .profile-route-head h3 {
    font-size: 1.18rem;
  }

  #myPageView .mypage-route-subtitle {
    font-size: 0.76rem;
  }

  #myPageView .mypage-module,
  #myPageView .service-history-module {
    padding: 16px 13px 14px;
    border-radius: 22px;
  }

  #myPageView .point-visual-summary {
    grid-template-columns: 1fr;
  }

  #myPageView .point-history-summary {
    padding: 7px 9px;
  }

  #myPageView .point-history-summary::after {
    min-width: 3rem;
    padding: 3px 7px;
    font-size: 0.64rem;
  }

  #myPageView .point-history-head h4 {
    font-size: 0.84rem;
  }

  #myPageView .point-history-head p {
    font-size: 0.63rem;
  }

  #myPageView .coupon-desc {
    max-width: min(100%, 20ch);
    font-size: 0.68rem;
    line-height: 1.38;
  }

  #myPageView .checkin-action-panel,
  #myPageView .point-history-details,
  #myPageView .perk-roadmap-panel,
  #myPageView .perk-item,
  #myPageView .service-history-stat-card,
  #myPageView .service-history-item,
  #myPageView .digital-member-card,
  #myPageView .coupon-active-panel,
  #myPageView .coupon-item,
  #myPageView .coupon-empty,
  #myPageView .booking-history li,
  #myPageView .profile-form-paged .profile-block {
    border-radius: 18px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car {
    border-radius: 0;
  }

  #myPageView .digital-member-card-body {
    padding: 14px;
    border-radius: 20px;
  }

}

@media (max-width: 420px) {
  #myPageView .mypage-home-greeting {
    max-width: 46%;
  }

  #myPageView .home-member-card-collapsed::after {
    font-size: 1.3rem;
  }
}

.liff-view-panel {
  margin-top: 10px;
}

.liff-entry-guide {
  display: grid;
  gap: 18px;
  padding: 22px 18px;
  background: linear-gradient(180deg, #fffdf6 0%, #fff6dd 100%);
}

.liff-entry-guide-copy {
  display: grid;
  gap: 10px;
}

.liff-entry-guide-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8a6500;
}

.liff-entry-guide h2 {
  margin: 0;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.3;
}

.liff-entry-guide-actions {
  gap: 10px;
}

.registration-choice-shell,
.registration-detail-grid-split {
  display: grid;
  gap: 14px;
}

.registration-mode-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: #fff6dd;
  border: 1px solid rgba(245, 181, 0, 0.28);
}

.registration-mode-chip {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6a5122;
  font-weight: 800;
}

.registration-mode-chip.active {
  background: #111;
  color: #f5b500;
  box-shadow: 0 8px 16px rgba(17, 17, 17, 0.16);
}

.registration-choice-btn-primary {
  min-height: 112px;
}

.registration-help-banner,
.booking-selected-context {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: linear-gradient(180deg, #fffef8 0%, #fff5d6 100%);
}

.registration-help-banner strong,
.booking-selected-context strong {
  font-size: 0.98rem;
}

.registration-help-banner span,
.booking-selected-context small {
  color: var(--muted);
  line-height: 1.55;
}

.registration-section-heading,
.profile-block-head {
  display: grid;
  gap: 4px;
}

.registration-section-heading h3,
.registration-section-heading h5,
.profile-block-head strong {
  margin: 0;
}

.registration-section-heading p,
.profile-block-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.registration-detail-grid-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.registration-detail-card,
.registration-review-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
}

.registration-review-card {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #fffdf7 0%, #fff4d0 100%);
}

.registration-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.registration-review-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.registration-review-item span,
.booking-selected-context-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.registration-review-item-wide {
  grid-column: 1 / -1;
}

#myPageView .home-member-card-copy {
  display: grid;
  gap: 4px;
}

#myPageView .home-member-card-copy strong {
  font-size: 1rem;
  line-height: 1.4;
}

#myPageView .home-member-card-copy small {
  color: #5a5a5a;
  line-height: 1.55;
}

#myPageView .mypage-home-section-label {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6d644d;
}

#myPageView .booking-selected-context {
  margin-top: 2px;
}

#myPageView .booking-service-card-copy {
  display: grid;
  gap: 4px;
}

#myPageView .booking-service-card-copy small {
  font-size: 0.72rem;
  color: #5e5e5e;
  line-height: 1.45;
}

#myPageView .booking-confirmation-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

#myPageView .profile-danger-zone {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(185, 28, 28, 0.25);
  background: linear-gradient(180deg, rgba(255, 244, 244, 0.98) 0%, rgba(255, 235, 235, 0.98) 100%);
}

#myPageView .profile-danger-zone-head {
  display: grid;
  gap: 4px;
}

#myPageView .profile-danger-zone-head strong,
#myPageView .profile-danger-zone-head p {
  margin: 0;
}

#myPageView .profile-danger-zone-head p {
  color: #7f1d1d;
  line-height: 1.55;
}

.admin-nav-group {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.06);
}

.admin-nav-group-muted {
  opacity: 0.88;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

.admin-nav-group-label {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.admin-section-lead {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.dashboard-kpi-support {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f6f6f3;
  border: 1px solid rgba(17, 17, 17, 0.06);
  color: var(--muted);
}

.dashboard-kpi-support strong {
  color: var(--text);
  font-size: 1rem;
}

.booking-menu-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.booking-menu-slot-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: linear-gradient(180deg, #fffdf8 0%, #fff9eb 100%);
}

.booking-menu-slot-card-head {
  display: grid;
  gap: 4px;
}

.booking-menu-slot-card-head strong,
.booking-menu-slot-card-head span {
  margin: 0;
}

.booking-menu-slot-card-head span {
  color: var(--muted);
  line-height: 1.5;
}

/* ==========================================================================
   Reminder Calendar & Filters
   ========================================================================== */

.reminder-calendar-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.reminder-calendar-section h3 {
  margin: 0;
  font-size: 1rem;
}

.reminder-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 0.5rem;
}

.reminder-cal-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 0;
  color: var(--tactical-muted);
}

.reminder-cal-cell {
  position: relative;
  min-height: 48px;
  padding: 4px 6px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  background: #fff;
}

.reminder-cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.reminder-cal-cell:not(.empty):hover {
  background: #f9f9f4;
}

.reminder-cal-cell.today {
  border-color: var(--tactical-yellow);
  background: #fffef0;
}

.reminder-cal-cell.selected {
  border-color: var(--tactical-ink);
  background: #fff8e2;
  box-shadow: inset 0 0 0 1px var(--tactical-ink);
}

.reminder-cal-cell.has-pending {
  background: #e8f5e9;
}

.reminder-cal-cell.has-pending.selected {
  background: #c8e6c9;
}

.reminder-cal-day {
  font-size: 0.82rem;
  font-weight: 600;
}

.reminder-cal-count {
  position: absolute;
  top: 2px;
  right: 4px;
  background: #2e7d32;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

.reminder-cal-day-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.reminder-cal-day-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  font-size: 0.88rem;
}

.reminder-cal-day-item:last-child {
  border-bottom: none;
}

.reminder-cal-day-time {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 40px;
}

.reminder-cal-day-name {
  font-weight: 700;
  min-width: 100px;
}

.reminder-cal-day-template {
  color: var(--tactical-muted);
  flex: 1;
}

/* Filter bar */
.reminder-filter-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.reminder-filter-btn {
  padding: 6px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border: 2px solid var(--tactical-ink) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--tactical-ink) !important;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.3) !important;
}

.reminder-filter-btn.active {
  background: var(--tactical-ink) !important;
  color: var(--tactical-yellow) !important;
}

.reminder-filter-btn:active {
  transform: translate(1px, 1px);
  box-shadow: none !important;
}

/* Badge styles for reminder statuses */
.badge.pending {
  background: var(--tactical-yellow);
  color: var(--tactical-ink);
}

.badge.ok {
  background: #2e7d32;
  color: #fff;
}

@media (max-width: 800px) {
  .reminder-cal-cell {
    min-height: 36px;
    padding: 2px 4px;
  }
  .reminder-cal-day {
    font-size: 0.72rem;
  }
  .reminder-cal-day-item {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
}

.slot-multi-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0;
  text-transform: none;
}

.booking-menu-sort-note {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff9eb 100%);
}

.booking-menu-sort-note strong,
.booking-menu-sort-note p {
  margin: 0;
}

.booking-menu-sort-note p {
  color: var(--muted);
  line-height: 1.5;
}

.booking-menu-sort-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: linear-gradient(180deg, #fffefb 0%, #fff8e5 100%);
}

.booking-menu-sort-panel-head strong,
.booking-menu-sort-panel-head p {
  margin: 0;
}

.booking-menu-sort-panel-head {
  display: grid;
  gap: 4px;
}

.booking-menu-sort-panel-head p {
  color: var(--muted);
  line-height: 1.5;
}

.booking-menu-sort-list {
  display: grid;
  gap: 8px;
}

.booking-menu-sort-empty {
  padding: 14px 12px;
  border: 1px dashed rgba(17, 17, 17, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  line-height: 1.5;
}

.booking-menu-sort-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid rgba(17, 17, 17, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 52, 43, 0.06);
  cursor: grab;
}

.booking-menu-sort-item.is-dragging {
  opacity: 0.6;
  border-color: #f3b300;
  background: #fff7d8;
  cursor: grabbing;
}

.booking-menu-sort-handle {
  color: #a08d56;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  user-select: none;
}

.booking-menu-sort-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.booking-menu-sort-copy strong,
.booking-menu-sort-copy small {
  margin: 0;
}

.booking-menu-sort-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.booking-menu-sort-order {
  min-width: 2rem;
  padding: 6px 8px;
  border-radius: 999px;
  background: #fff3bf;
  color: #6f5200;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.booking-menu-sort-actions {
  display: flex;
  gap: 6px;
}

.booking-menu-sort-move {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 2px solid #111;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-size: 0.9rem;
  font-weight: 900;
}

.booking-menu-sort-delete {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 2px solid var(--zenith-danger, #9c4316) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffd8bf 0%, #f3ae83 100%) !important;
  color: var(--zenith-danger, #9c4316) !important;
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.booking-menu-sort-delete:hover,
.booking-menu-sort-delete:focus-visible {
  background: var(--zenith-danger, #9c4316) !important;
  color: #fff !important;
}

body:not(.liff-body) .dashboard-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.filter-summary {
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .booking-menu-slot-grid,
  .registration-detail-grid-split {
    grid-template-columns: 1fr;
  }

  .point-grant-quick-presets {
    margin-top: 2px;
  }

  .booking-menu-sort-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .booking-menu-sort-order,
  .booking-menu-sort-actions {
    justify-self: start;
  }
}

@media (max-width: 820px) {
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td,
  .appointment-table,
  .appointment-table thead,
  .appointment-table tbody,
  .appointment-table tr,
  .appointment-table th,
  .appointment-table td {
    display: block;
    width: 100%;
  }

  .table-wrap thead,
  .appointment-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }

  .table-wrap tbody,
  .appointment-table tbody {
    display: grid;
    gap: 10px;
  }

  .table-wrap tbody tr,
  .appointment-table tbody tr {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(16, 52, 43, 0.05);
    padding: 12px;
  }

  .table-wrap td,
  .appointment-table td {
    display: grid;
    gap: 4px;
    padding: 8px 0;
    border: 0;
    text-align: left;
  }

  .table-wrap td::before,
  .appointment-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--muted);
  }

  .table-wrap td:last-child,
  .appointment-table td:last-child {
    padding-bottom: 0;
  }

  .table-wrap td:first-child,
  .appointment-table td:first-child {
    padding-top: 0;
  }

  .table-wrap .table-actions,
  .appointment-table .table-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .liff-entry-guide {
    padding: 18px 14px;
  }

  .registration-mode-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .registration-mode-chip {
    flex: 1 1 0;
  }

  .registration-choice-btn-primary {
    min-height: 104px;
  }

  .registration-detail-card,
  .registration-review-card {
    border-radius: 18px;
    padding: 12px;
  }

  .registration-review-grid {
    grid-template-columns: 1fr;
  }

  #myPageView .booking-selected-context {
    padding: 10px 12px;
    border-radius: 16px;
  }

  .admin-nav-group {
    padding: 8px;
    border-radius: 14px;
  }

  .dashboard-kpi-support {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   Zenith Industrial Full UI Override
   ========================================================================== */

:root {
  --zenith-bg: #feffd6;
  --zenith-paper: #fffdf5;
  --zenith-paper-2: #fff7df;
  --zenith-paper-3: #fff2bf;
  --zenith-ink: #383832;
  --zenith-ink-soft: #6d6348;
  --zenith-yellow: #fec700;
  --zenith-yellow-deep: #7d6100;
  --zenith-mint: #0b9ead;
  --zenith-danger: #9c4316;
  --zenith-ok: #2e7f69;
  --zenith-radius: 4px;
  --zenith-shadow: 4px 4px 0 0 var(--zenith-ink);
  --zenith-shadow-soft: 3px 3px 0 0 rgba(56, 56, 50, 0.8);
  --bg: var(--zenith-bg);
  --surface: var(--zenith-paper);
  --line: var(--zenith-ink);
  --text: var(--zenith-ink);
  --muted: var(--zenith-ink-soft);
  --primary: var(--zenith-yellow-deep);
  --primary-strong: #5f4900;
  --danger: var(--zenith-danger);
  --ok: var(--zenith-ok);
}

html {
  background: var(--zenith-bg);
}

body,
input,
textarea,
select,
button {
  font-family: "Plus Jakarta Sans", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body {
  color: var(--zenith-ink);
  background:
    linear-gradient(180deg, rgba(254, 199, 0, 0.08) 0%, rgba(254, 255, 214, 1) 16%),
    linear-gradient(90deg, rgba(56, 56, 50, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(56, 56, 50, 0.04) 1px, transparent 1px),
    var(--zenith-bg);
  background-size: auto, 18px 18px, 18px 18px, auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-head h2,
.section-head h3,
.mypage-route-title,
.booking-step-title,
.booking-step-copy h4,
.admin-brand h1,
.admin-main-header-top h2,
.home-primary-action-title,
.home-stat-value,
.coupon-activate-card h3 {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

button,
.button-link {
  border: 2px solid var(--zenith-ink);
  border-radius: var(--zenith-radius);
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%);
  color: var(--zenith-ink);
  font-weight: 900;
  box-shadow: var(--zenith-shadow), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

button:hover,
.button-link:hover {
  background: linear-gradient(180deg, #ffe278 0%, #ffd43b 100%);
}

button:active,
.button-link:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

button.secondary,
.button-link.secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%);
  color: var(--zenith-ink);
}

button.danger {
  background: linear-gradient(180deg, #ffd7bd 0%, #f3ab84 100%);
  color: var(--zenith-ink);
}

button:disabled,
.button-link[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

input,
textarea,
select {
  border: 2px solid var(--zenith-ink);
  border-radius: var(--zenith-radius);
  background: #ffffff;
  color: var(--zenith-ink);
  box-shadow: inset 0 0 0 1px rgba(56, 56, 50, 0.04);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-width: 3px;
  border-color: var(--zenith-yellow-deep);
  box-shadow: 0 0 0 2px rgba(254, 199, 0, 0.22);
}

label {
  font-weight: 700;
  color: var(--zenith-ink);
}

.status {
  border: 2px solid var(--zenith-ink);
  border-radius: var(--zenith-radius);
  background: #fffef8;
  color: var(--zenith-ink-soft);
  padding: 10px 12px;
  line-height: 1.5;
  box-shadow: var(--zenith-shadow-soft);
}
.status:empty {
  display: none;
}

.status.ok {
  background: #ebfff5;
  color: #1f6b57;
}

.status.error {
  background: #fff0e8;
  color: #8c3a16;
}

.card,
.liff-body .card,
.liff-view-panel,
.coupon-activate-card,
.guide-card,
.camera-guide-card,
.checkin-guide-card,
.rank-guide-card {
  border: 2px solid var(--zenith-ink);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--zenith-paper) 0%, #fffdf8 100%);
  box-shadow: var(--zenith-shadow);
}

.section-head {
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(56, 56, 50, 0.2);
}

.section-head h2,
.section-head h3 {
  margin: 0;
  color: var(--zenith-ink);
  text-transform: uppercase;
}

.small-help,
.admin-section-lead,
.mypage-route-subtitle,
.booking-step-description,
.booking-step-lead,
.home-stat-note,
.coupon-activate-description {
  color: var(--zenith-ink-soft);
}

.badge,
.nav-badge,
.qr-result-badge,
.point-badge,
.member-tier {
  border: 2px solid var(--zenith-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffef6 0%, #fff3cd 100%);
  color: var(--zenith-ink);
  font-weight: 900;
}

.table-action-btn {
  min-height: 42px;
  padding: 8px 12px;
}

body:not(.liff-body) .container.admin-shell {
  width: min(1880px, calc(100vw - 16px));
  padding: 10px 8px 34px;
  background:
    linear-gradient(180deg, rgba(254, 199, 0, 0.1) 0%, rgba(255, 255, 255, 0) 16%),
    var(--zenith-bg);
  border-radius: 0;
}

body:not(.liff-body) .admin-global-header,
body:not(.liff-body) .admin-sidebar,
body:not(.liff-body) .notification-dock,
body:not(.liff-body) .dashboard-panel,
body:not(.liff-body) .admin-main > [id^='section-'],
body:not(.liff-body) .admin-main > .admin-grid > [id^='section-'] {
  border: 2px solid var(--zenith-ink);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--zenith-paper) 0%, #fffdf7 100%);
  box-shadow: var(--zenith-shadow);
}

body:not(.liff-body) .admin-global-header {
  top: 8px;
  padding: 14px 18px;
}

body:not(.liff-body) .admin-brand h1 {
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.05;
}

body:not(.liff-body) .admin-brand small {
  font-weight: 800;
  color: var(--zenith-ok);
  display: inline-block;
  font-size: 0.7rem;
  padding: 3px 8px;
  margin-top: 4px;
  border-width: 1.5px;
  box-shadow: none;
  line-height: 1.3;
}

body:not(.liff-body) .admin-layout {
  gap: 14px;
  grid-template-columns: 286px minmax(0, 1fr);
}

body:not(.liff-body) .admin-sidebar {
  gap: 14px;
  padding: 14px;
  background:
    linear-gradient(180deg, var(--zenith-paper-2) 0%, var(--zenith-paper) 100%);
}

body:not(.liff-body) .admin-top-actions {
  gap: 10px;
}

body:not(.liff-body) .admin-nav-group {
  padding: 10px;
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef8 0%, #fff7dc 100%);
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.78);
}

body:not(.liff-body) .admin-nav-group-label {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--zenith-yellow-deep);
}

body:not(.liff-body) .admin-nav {
  gap: 12px;
}

body:not(.liff-body) .admin-nav a {
  min-height: 52px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--zenith-ink);
  box-shadow: none;
}

body:not(.liff-body) .admin-nav a:hover {
  border-color: var(--zenith-ink);
  background: rgba(254, 199, 0, 0.12);
}

body:not(.liff-body) .admin-nav a.active {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%);
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

body:not(.liff-body) .nav-left {
  gap: 10px;
}

body:not(.liff-body) .nav-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--zenith-ink);
  background: #fff;
  border-radius: 4px;
  font-size: 0.95rem;
}

body:not(.liff-body) .admin-sidebar-tools h2,
body:not(.liff-body) .notification-dock h2 {
  text-transform: uppercase;
}

body:not(.liff-body) .dashboard-kpis {
  gap: 12px;
}

body:not(.liff-body) .kpi-card,
body:not(.liff-body) .mini-kpi-card,
body:not(.liff-body) .action-card,
body:not(.liff-body) .admin-kpi-mini,
body:not(.liff-body) .admin-notification-summary-card,
body:not(.liff-body) .line-customer-notification-group,
body:not(.liff-body) .booking-availability-group,
body:not(.liff-body) .booking-menu-slot-card,
body:not(.liff-body) .booking-menu-sort-panel,
body:not(.liff-body) .qr-scanner-result-card,
body:not(.liff-body) .qr-scanner-stage,
body:not(.liff-body) .qr-scanner-result-panel,
body:not(.liff-body) .point-award-card,
body:not(.liff-body) .customer-picker-inline,
body:not(.liff-body) .coupon-customer-picker {
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%);
  box-shadow: var(--zenith-shadow-soft);
}

body:not(.liff-body) .kpi-card strong,
body:not(.liff-body) .mini-kpi-card strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

body:not(.liff-body) .table-wrap,
body:not(.liff-body) .appointment-table,
body:not(.liff-body) .customer-table {
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: #fffef8;
  box-shadow: var(--zenith-shadow-soft);
  overflow: hidden;
}

body:not(.liff-body) table th {
  background: linear-gradient(180deg, #fff7dc 0%, #ffe89e 100%);
  color: var(--zenith-ink);
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body:not(.liff-body) table th,
body:not(.liff-body) table td {
  border-bottom: 2px solid rgba(56, 56, 50, 0.14);
}

body:not(.liff-body) .qr-scanner-stage-frame,
body:not(.liff-body) .qr-scanner-placeholder {
  border-width: 2px;
  border-color: var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff9ea 0%, #fffef8 100%);
}

body:not(.liff-body) .qr-result-head strong,
body:not(.liff-body) .qr-result-title-group strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
}

body:not(.liff-body) .qr-result-actions {
  gap: 10px;
}

body:not(.liff-body) .qr-result-actions .table-action-btn {
  min-height: 48px;
  flex: 1 1 180px;
}

.liff-body {
  background:
    linear-gradient(180deg, rgba(254, 199, 0, 0.12) 0%, rgba(254, 255, 214, 1) 16%),
    var(--zenith-bg);
}

.liff-container {
  width: min(480px, 100%);
  padding: 0 14px 128px;
}

.liff-body .liff-view-panel {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fffef9 0%, #fff9e7 100%);
}

.liff-initial-loading-card {
  border-radius: 8px;
  border: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #fffef8 0%, #fff7dc 100%);
  box-shadow: var(--zenith-shadow);
}

#registrationView,
#myPageView {
  background: linear-gradient(180deg, #fffef9 0%, #fff9e7 100%);
}

#myPageView .mypage-home-header,
#myPageView .mypage-route-head,
.registration-wizard-topbar,
.booking-wizard-topbar {
  border-bottom: 2px solid var(--zenith-ink);
  background: #ffffff;
}

#myPageView .mypage-home-header,
.registration-wizard-topbar,
.booking-wizard-topbar {
  padding: 14px 16px;
}

.booking-step-counter,
.booking-step-kicker,
.registration-section-heading h5,
.registration-section-heading h3,
#myPageView .mypage-menu-caption,
#myPageView .home-stat-label,
#myPageView .meta-label,
#myPageView .service-history-stat-label,
.coupon-activate-kicker {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--zenith-yellow-deep);
}

#myPageView .mypage-home-brand-title {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

#myPageView .mypage-home-brand-sub {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zenith-ink-soft);
}

#myPageView .mypage-home-greeting-btn,
#myPageView .home-stat-card,
#myPageView .home-primary-action,
#myPageView .home-member-card-expanded,
#myPageView .home-member-card-collapsed,
#myPageView .mypage-secondary-link,
#myPageView .point-visual-card,
#myPageView .checkin-action-panel,
#myPageView .point-rank-progress-panel,
#myPageView .point-history-details,
#myPageView .perk-item,
#myPageView .coupon-active-panel,
#myPageView .coupon-item,
#myPageView .coupon-empty,
#myPageView .service-history-stat-card,
#myPageView .service-history-item,
#myPageView .digital-member-card,
#myPageView .booking-history li,
#myPageView .profile-form-paged .profile-block,
#myPageView .profile-form-paged .vehicle-editor-panel,
#myPageView .profile-form-paged .vehicle-editor-card,
#myPageView .profile-form-paged .vehicle-editor-grid,
#myPageView .booking-wizard-module,
#myPageView .booking-history-module,
.registration-detail-card,
.registration-review-card,
.registration-help-banner,
.registration-preview-block,
.plate-preview-card,
.registration-choice-shell,
.registration-ocr-hero,
.registration-ocr-checklist,
.registration-ocr-subactions {
  border: 2px solid var(--zenith-ink) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%) !important;
  box-shadow: var(--zenith-shadow-soft) !important;
}

#myPageView .home-stat-card,
#myPageView .home-primary-action,
#myPageView .mypage-secondary-link,
#myPageView .booking-service-card,
.registration-step-next-btn,
.registration-submit-btn,
.booking-step-next-btn,
.booking-submit-btn,
#myPageView .checkin-action-btn,
.coupon-item .coupon-main-btn,
.booking-success-actions button:last-child,
.booking-submit-actions button:last-child {
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%) !important;
  color: var(--zenith-ink) !important;
  border: 2px solid var(--zenith-ink) !important;
  box-shadow: var(--zenith-shadow) !important;
}

#myPageView .home-stat-card:active,
#myPageView .home-primary-action:active,
#myPageView .mypage-secondary-link:active,
#myPageView .booking-service-card:active,
.registration-step-next-btn:active,
.registration-submit-btn:active,
.booking-step-next-btn:active,
.booking-submit-btn:active,
#myPageView .checkin-action-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

#myPageView .member-card-tier-badge,
#myPageView .point-rank-progress-icon,
#myPageView .point-balance-illustration,
#myPageView .home-member-card-visual-frame,
#myPageView .service-illustration,
#myPageView .menu-illustration,
.registration-ocr-hero-phone,
.qr-result-badge,
.booking-slot-nav-btn {
  border: 2px solid var(--zenith-ink) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #fff8d6 0%, #ffe28d 100%) !important;
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#myPageView .home-stat-card {
  min-height: 134px;
  justify-content: flex-start;
}

#myPageView .home-stat-value {
  font-size: clamp(2rem, 8vw, 2.7rem);
  line-height: 0.95;
}

#myPageView .home-primary-action {
  min-height: 152px;
  padding: 18px 14px !important;
}

#myPageView .home-primary-action-title {
  text-transform: uppercase;
  font-style: italic;
}

#myPageView .mypage-route-head {
  border-radius: 0 !important;
  box-shadow: none !important;
}

#myPageView .mypage-route-title {
  font-style: italic;
  text-transform: uppercase;
}

#myPageView .mypage-module {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px !important;
}

#myPageView .booking-view-switch {
  padding: 0 14px;
}

#myPageView .booking-view-btn {
  min-height: 48px;
  text-transform: uppercase;
}

#myPageView .booking-view-btn.active {
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%) !important;
}

#myPageView .booking-wizard-module,
#myPageView .booking-history-module {
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}

#myPageView .booking-wizard-topbar {
  align-items: center;
  gap: 12px;
}

#myPageView .booking-wizard-cancel-btn {
  min-height: 42px;
  padding-inline: 14px;
}

#myPageView .booking-step-title {
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  font-style: italic;
}

#myPageView .booking-step-indicators {
  gap: 10px;
  padding: 14px;
  border-top: 2px solid var(--zenith-ink);
  border-bottom: 2px solid var(--zenith-ink);
  background: #ffffff;
}

#myPageView .booking-step-indicator {
  flex: 1 1 0;
  min-height: 72px;
  gap: 6px;
  padding: 8px;
  border: 2px solid transparent;
  background: transparent;
}

#myPageView .booking-step-indicator.active,
#myPageView .booking-step-indicator.completed {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%);
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#myPageView .booking-step-indicator-dot {
  width: 36px;
  height: 36px;
  border: 2px solid var(--zenith-ink);
  border-radius: 4px;
  background: #fff;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
}

#myPageView .booking-step-indicator.active .booking-step-indicator-dot,
#myPageView .booking-step-indicator.completed .booking-step-indicator-dot {
  background: var(--zenith-yellow-deep);
  color: #fff;
}

#myPageView .booking-step-indicator-text {
  color: var(--zenith-ink);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#myPageView .booking-wizard-form {
  gap: 16px;
  padding: 16px 14px 18px;
}

#myPageView .booking-selected-context {
  border-width: 2px;
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #fff6d8 0%, #fffdf2 100%);
}

#myPageView .booking-step-copy {
  gap: 8px;
}

#myPageView .booking-step-copy h4 {
  text-transform: uppercase;
  font-style: italic;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
}

#myPageView .booking-service-grid {
  gap: 14px;
}

#myPageView .booking-service-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

#myPageView .booking-service-card-visual {
  align-items: center;
  gap: 14px;
}

#myPageView .booking-service-card .service-illustration {
  width: 56px;
  height: 56px;
  padding: 10px;
  background: linear-gradient(180deg, #ffe28d 0%, #fec700 100%) !important;
}

#myPageView .booking-service-card strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.34rem;
  font-style: italic;
  text-transform: none;
  color: var(--zenith-ink);
}

#myPageView .booking-service-card-copy {
  gap: 4px;
}

#myPageView .booking-service-card-copy small,
#myPageView .booking-service-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--zenith-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#myPageView .booking-service-card.active {
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%) !important;
}

#myPageView .booking-option-accordion,
#myPageView .booking-option-item,
#myPageView .booking-choice-field,
#myPageView .booking-submit-preview,
#myPageView .booking-slot-picker,
#myPageView .booking-vehicle-preset,
#myPageView .booking-optional-details {
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e3 100%);
  box-shadow: var(--zenith-shadow-soft);
}

#myPageView .booking-option-toggle-btn,
#myPageView .booking-slot-nav-btn,
#myPageView .booking-history-refresh-btn,
#myPageView .booking-filter-btn {
  min-height: 46px;
}

#myPageView .booking-option-fields,
#myPageView .booking-choice-field,
#myPageView .booking-submit-preview,
#myPageView .booking-slot-picker {
  padding: 14px;
}

#myPageView .booking-field > span:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-slot-picker-head {
  gap: 12px;
}

#myPageView .booking-slot-picker-title strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  text-transform: uppercase;
}

#myPageView .booking-slot-grid-wrap {
  border: 2px solid var(--zenith-ink);
  border-radius: 6px;
  background: #fff;
  padding: 10px;
}

#myPageView .booking-slot-grid-track {
  gap: 6px;
}

#myPageView .booking-slot-grid-day,
#myPageView .booking-slot-grid-time,
#myPageView .booking-slot-grid-cell {
  border: 2px solid rgba(56, 56, 50, 0.12);
  border-radius: 4px;
  background: #fffef8;
}

#myPageView .booking-slot-grid-day strong,
#myPageView .booking-slot-grid-time {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
}

#myPageView .booking-slot-grid-cell-open {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #fff 0%, #fff9eb 100%);
  color: var(--zenith-mint);
  font-weight: 900;
  box-shadow: 2px 2px 0 0 rgba(56, 56, 50, 0.7);
}

#myPageView .booking-slot-grid-cell-open.is-selected {
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%);
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-slot-grid-cell-full {
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-slot-grid-cell-closed,
#myPageView .booking-slot-grid-cell-past {
  color: rgba(56, 56, 50, 0.34);
}

#myPageView .booking-submit-preview-item,
#myPageView .booking-submit-modal-row,
#myPageView .booking-cancel-modal-row,
#myPageView .booking-success-summary-row,
.coupon-activate-preview,
.booking-datetime-error-preview {
  border: 2px solid rgba(56, 56, 50, 0.16);
  border-radius: 6px;
  background: #ffffff;
}

.coupon-activate-card,
.booking-submit-card,
.booking-cancel-card,
.booking-datetime-error-card,
.booking-success-card,
.account-delete-card {
  background: linear-gradient(180deg, #fffef8 0%, #fff7dc 100%);
}

.coupon-activate-card h3,
.booking-submit-card h3,
.booking-cancel-card h3,
.booking-datetime-error-card h3,
.booking-success-card h3,
.account-delete-card h3 {
  text-transform: uppercase;
  font-style: italic;
}

.bottom-tabbar,
.bottom-actionbar {
  border-top: 2px solid var(--zenith-ink);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.bottom-action-btn {
  min-height: 48px;
}

@media (max-width: 980px) {
  body:not(.liff-body) .admin-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body:not(.liff-body) .container.admin-shell {
    width: calc(100vw - 8px);
    padding: 4px 4px 24px;
  }

  body:not(.liff-body) .admin-global-header,
  body:not(.liff-body) .admin-sidebar,
  body:not(.liff-body) .notification-dock,
  body:not(.liff-body) .dashboard-panel,
  body:not(.liff-body) .admin-main > [id^='section-'],
  body:not(.liff-body) .admin-main > .admin-grid > [id^='section-'] {
    border-radius: 8px;
    box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
  }

  .liff-container {
    padding-inline: 8px;
  }

  #myPageView .booking-service-card {
    padding: 14px 12px;
  }

  #myPageView .booking-service-card .service-illustration {
    width: 48px;
    height: 48px;
    padding: 8px;
  }

  #myPageView .booking-service-card strong {
    font-size: 1.12rem;
  }

  #myPageView .booking-step-indicator {
    min-height: 64px;
    padding: 6px;
  }

  #myPageView .booking-step-indicator-text {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }

  #myPageView .booking-step-indicator-dot {
    width: 30px;
    height: 30px;
  }
}

/* ==========================================================================
   Zenith Industrial Booking Rebuild
   ========================================================================== */

#myPageView .booking-wizard-topbar,
.registration-wizard-topbar {
  align-items: flex-start;
}

#myPageView .booking-wizard-title-wrap,
.registration-wizard-topbar .booking-wizard-title-wrap {
  display: grid;
  gap: 8px;
  width: 100%;
}

#myPageView .booking-step-counter,
.registration-wizard-topbar .booking-step-counter {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.15rem 0.55rem;
  border: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow) 100%);
  color: var(--zenith-ink);
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#myPageView .booking-step-title,
.registration-wizard-topbar .booking-step-title {
  font-size: clamp(1.6rem, 6vw, 2.05rem);
}

.booking-step-progress-shell {
  width: 100%;
  height: 18px;
  border: 2px solid var(--zenith-ink);
  background: #fffef8;
  overflow: hidden;
}

.booking-step-progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(180deg, var(--zenith-yellow-deep) 0%, #9d7c00 100%);
  border-right: 2px solid var(--zenith-ink);
  transition: width 180ms ease;
}

#bookingStepIndicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
  background: #fff;
}

#bookingStepIndicators .booking-step-indicator {
  min-height: 74px;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

#bookingStepIndicators .booking-step-indicator.active,
#bookingStepIndicators .booking-step-indicator.completed {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow) 100%);
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#bookingStepIndicators .booking-step-indicator-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border: 2px solid var(--zenith-ink);
  background: #fff;
  font-size: 1rem;
  line-height: 1;
}

#bookingStepIndicators .booking-step-indicator-dot {
  display: none;
}

#bookingStepIndicators .booking-step-indicator-text {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
}

#myPageView .booking-hidden-select-field,
#myPageView .booking-option-native-item {
  display: none !important;
}

#myPageView .booking-option-fields {
  display: grid;
  gap: 14px;
}

#myPageView .booking-option-fields-head {
  display: grid;
  gap: 4px;
}

#myPageView .booking-option-fields-head strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  font-style: italic;
  text-transform: uppercase;
}

#myPageView .booking-option-visual-summary {
  padding: 10px 12px;
  border: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #fff7dc 0%, #fffdf2 100%);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--zenith-ink-soft);
}

#myPageView .booking-option-visual-fields {
  display: grid;
  gap: 14px;
}

#myPageView .booking-option-visual-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%);
  box-shadow: var(--zenith-shadow-soft);
}

#myPageView .booking-option-visual-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#myPageView .booking-option-visual-group-head strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.04rem;
  font-weight: 900;
}

#myPageView .booking-option-visual-group-head small {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-option-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#myPageView .booking-option-choice-toggle {
  display: grid;
  justify-items: center;
  margin-top: -2px;
}

#myPageView .booking-option-choice-toggle-btn {
  width: auto;
  min-width: 10.5rem;
  min-height: 2.45rem;
  padding: 0 1rem;
}

#myPageView .booking-option-choice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 92px;
  padding: 12px;
  border: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #fff 0%, #fff8ea 100%);
  box-shadow: var(--zenith-shadow-soft);
  text-align: left;
}

#myPageView .booking-option-choice-card.is-selected {
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow) 100%);
  box-shadow: var(--zenith-shadow);
}

#myPageView .booking-option-choice-mark {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid var(--zenith-ink);
  background: #fff;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
}

#myPageView .booking-option-choice-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#myPageView .booking-option-choice-copy strong {
  font-size: 0.92rem;
  line-height: 1.25;
}

#myPageView .booking-option-choice-copy small {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zenith-ink-soft);
}

#myPageView .booking-option-choice-check {
  display: grid;
  place-items: center;
  width: 1.6rem;
  min-height: 1.6rem;
  font-size: 1rem;
  font-weight: 900;
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-option-visual-other {
  display: grid;
  gap: 6px;
}

#myPageView .booking-option-visual-other span {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-slot-picker {
  display: grid;
  gap: 16px;
}

#myPageView .booking-slot-picker-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
}

#myPageView .booking-slot-picker-title {
  display: grid;
  gap: 4px;
  text-align: center;
}

#myPageView .booking-slot-nav-btn {
  min-height: 46px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
}

#myPageView .booking-calendar-board {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--zenith-ink);
  background: #fff;
}

#myPageView .booking-calendar-weekdays,
#myPageView .booking-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#myPageView .booking-calendar-weekdays span {
  text-align: center;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zenith-ink-soft);
}

#myPageView .booking-calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid rgba(56, 56, 50, 0.14);
  background: #fffef8;
  box-shadow: none;
}

#myPageView .booking-calendar-day.is-selected {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #9b7a02 0%, var(--zenith-yellow-deep) 100%);
  color: #fff;
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#myPageView .booking-calendar-day.is-disabled,
#myPageView .booking-calendar-day.is-outside {
  border-color: transparent;
  background: transparent;
  color: rgba(56, 56, 50, 0.34);
  box-shadow: none;
}

#myPageView .booking-calendar-day.is-open .booking-calendar-day-symbol {
  color: var(--zenith-mint);
}

#myPageView .booking-calendar-day.is-limited .booking-calendar-day-symbol {
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-calendar-day.is-past .booking-calendar-day-symbol,
#myPageView .booking-calendar-day.is-closed .booking-calendar-day-symbol {
  color: rgba(56, 56, 50, 0.4);
}

#myPageView .booking-calendar-day.is-selected .booking-calendar-day-symbol {
  color: #fff;
}

#myPageView .booking-calendar-day-number {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

#myPageView .booking-calendar-day-symbol {
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

#myPageView .booking-time-selector {
  display: grid;
  gap: 12px;
}

#myPageView .booking-time-selector-head {
  display: grid;
  gap: 4px;
  padding-left: 10px;
  border-left: 4px solid var(--zenith-yellow-deep);
}

#myPageView .booking-time-selector-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-time-list {
  display: grid;
  gap: 12px;
}

#myPageView .booking-time-slot {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 0 16px;
  border: 2px solid var(--zenith-ink);
  background: #fffef8;
  text-align: left;
  box-shadow: var(--zenith-shadow-soft);
}

#myPageView .booking-time-slot.is-selected {
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow) 100%);
  box-shadow: var(--zenith-shadow);
}

#myPageView .booking-time-slot.is-disabled {
  opacity: 0.55;
  box-shadow: none;
}

#myPageView .booking-time-slot-time {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

#myPageView .booking-time-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.3rem;
  min-height: 1.9rem;
  padding: 0 0.65rem;
  border: 2px solid currentColor;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#myPageView .booking-time-slot-symbol {
  justify-self: end;
  font-size: 1.55rem;
  font-weight: 900;
}

#myPageView .booking-time-slot-arrow {
  font-size: 1.3rem;
  font-weight: 900;
}

#myPageView .booking-time-slot.is-available {
  color: var(--zenith-mint);
}

#myPageView .booking-time-slot.is-limited {
  color: var(--zenith-yellow-deep);
}

#myPageView .booking-time-slot.is-full,
#myPageView .booking-time-slot.is-closed,
#myPageView .booking-time-slot.is-past {
  color: rgba(56, 56, 50, 0.58);
}

#myPageView .booking-time-slot.is-selected {
  color: var(--zenith-ink);
}

@media (max-width: 640px) {
  #bookingStepIndicators {
    gap: 6px;
    padding: 10px 10px 12px;
  }

  #bookingStepIndicators .booking-step-indicator {
    min-height: 66px;
    padding: 6px 4px;
  }

  #bookingStepIndicators .booking-step-indicator-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }

  #bookingStepIndicators .booking-step-indicator-text {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }

  #myPageView .booking-option-choice-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #myPageView .booking-option-choice-card {
    width: min(100%, 300px);
    min-height: 78px;
    padding: 11px 12px;
  }

  #myPageView .booking-option-choice-toggle-btn {
    min-width: 9.5rem;
  }

  #myPageView .booking-calendar-board {
    padding: 10px;
  }

  #myPageView .booking-time-slot {
    grid-template-columns: auto 1fr auto auto;
    min-height: 70px;
    padding: 0 12px;
  }

  #myPageView .booking-time-slot-time {
    font-size: 1.4rem;
  }

  #myPageView .booking-time-slot-badge {
    min-width: 4.5rem;
    font-size: 0.58rem;
  }
}

body:not(.liff-body) .admin-auth-card,
body:not(.liff-body) .admin-mobile-menu-toggle,
body:not(.liff-body) .notification-item,
body:not(.liff-body) .dashboard-list li,
body:not(.liff-body) .action-center-item,
body:not(.liff-body) .line-customer-notification-group,
body:not(.liff-body) .booking-availability-group,
body:not(.liff-body) .booking-menu-slot-card,
body:not(.liff-body) .booking-menu-sort-panel,
body:not(.liff-body) .booking-slot-picker-admin,
body:not(.liff-body) .dashboard-insight-summary {
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%);
  box-shadow: var(--zenith-shadow-soft);
}

body:not(.liff-body) .admin-auth-card,
body:not(.liff-body) .booking-slot-picker-admin,
body:not(.liff-body) .line-customer-notification-group,
body:not(.liff-body) .booking-availability-group,
body:not(.liff-body) .booking-menu-slot-card,
body:not(.liff-body) .booking-menu-sort-panel {
  padding: 14px;
}

body:not(.liff-body) .admin-auth-kicker,
body:not(.liff-body) .dashboard-panel h3,
body:not(.liff-body) .dashboard-panel h4,
body:not(.liff-body) .line-customer-notification-group h3,
body:not(.liff-body) .booking-availability-group-head h3,
body:not(.liff-body) .booking-menu-slot-card-head strong,
body:not(.liff-body) .booking-menu-sort-panel-head strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--zenith-ink);
}

body:not(.liff-body) .notification-item {
  padding: 12px 14px;
}

body:not(.liff-body) .notification-item.is-read {
  opacity: 0.7;
  box-shadow: none;
}

body:not(.liff-body) .dashboard-list li {
  padding: 10px 12px;
}

/* ==========================================================================
   Zenith Industrial Admin Cleanup
   ========================================================================== */

body:not(.liff-body) #section-admin-line-notifications,
body:not(.liff-body) #section-action-center,
body:not(.liff-body) #notificationDock {
  gap: 16px;
}

body:not(.liff-body) .admin-notification-settings-form {
  gap: 16px;
}

body:not(.liff-body) .admin-notification-manager-grid {
  gap: 12px;
}

body:not(.liff-body) .admin-notification-manager-field {
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef9 0%, #fff7de 100%);
  box-shadow: var(--zenith-shadow-soft);
}

body:not(.liff-body) .admin-notification-manager-field > span {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--zenith-yellow-deep);
}

body:not(.liff-body) .admin-notification-manager-field select {
  min-height: 56px;
  padding-inline: 14px;
  font-weight: 800;
}

body:not(.liff-body) .admin-notification-manager-field small,
body:not(.liff-body) .admin-notification-preview-note {
  margin: 0;
  color: var(--zenith-ink-soft);
  line-height: 1.55;
}

body:not(.liff-body) .admin-notification-recipient-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef8 0%, #fff9ea 100%);
  box-shadow: var(--zenith-shadow-soft);
}

body:not(.liff-body) .admin-notification-recipient-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body:not(.liff-body) .admin-notification-recipient-preview-head strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-style: italic;
  text-transform: uppercase;
}

body:not(.liff-body) .admin-notification-recipient-preview-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0 10px;
  border: 2px solid var(--zenith-ink);
  background: #fff;
  font-size: 0.74rem;
  font-weight: 900;
}

body:not(.liff-body) .admin-notification-recipient-chip-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body:not(.liff-body) .admin-notification-recipient-chip {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 2px dashed rgba(56, 56, 50, 0.38);
  border-radius: 8px;
  background: #fffef8;
}

body:not(.liff-body) .admin-notification-recipient-chip.is-set {
  border-style: solid;
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #ffe28d 0%, #fff6cd 100%);
}

body:not(.liff-body) .admin-notification-recipient-chip span {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zenith-yellow-deep);
}

body:not(.liff-body) .admin-notification-recipient-chip strong {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--zenith-ink);
}

body:not(.liff-body) .admin-notification-switches {
  gap: 10px;
  align-items: stretch;
}

body:not(.liff-body) .admin-notification-switch {
  align-items: flex-start;
  gap: 10px;
  min-height: 72px;
  padding: 12px 14px;
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%);
  box-shadow: var(--zenith-shadow-soft);
}

body:not(.liff-body) .admin-notification-switch input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--zenith-yellow-deep);
}

body:not(.liff-body) .admin-notification-switch span {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--zenith-ink);
}

body:not(.liff-body) .admin-notification-summary-card {
  padding: 16px 18px;
  font-size: 0.92rem;
}

body:not(.liff-body) .notification-dock {
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #fff9e2 0%, #fffef8 100%);
}

body:not(.liff-body) .notification-list {
  gap: 12px;
}

body:not(.liff-body) .notification-item,
body:not(.liff-body) .action-card {
  position: relative;
  overflow: hidden;
}

body:not(.liff-body) .notification-item::before,
body:not(.liff-body) .action-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--zenith-yellow-deep);
}

body:not(.liff-body) .notification-item.kind-cancel-request::before,
body:not(.liff-body) .action-card.kind-cancel-request::before {
  background: var(--zenith-danger);
}

body:not(.liff-body) .notification-item.kind-reserve-request::before,
body:not(.liff-body) .action-card.kind-reserve-request::before {
  background: var(--zenith-yellow-deep);
}

body:not(.liff-body) .notification-item.kind-inspection-due::before,
body:not(.liff-body) .action-card.kind-inspection-due::before {
  background: var(--zenith-mint);
}

body:not(.liff-body) .notification-item.kind-customer-unlinked::before {
  background: #4569d6;
}

body:not(.liff-body) .notification-item {
  gap: 10px;
  padding: 16px 14px 14px;
  border-left: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #fffef9 0%, #fff7df 100%);
}

body:not(.liff-body) .notification-item strong,
body:not(.liff-body) .action-card strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--zenith-ink);
}

body:not(.liff-body) .notification-item p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--zenith-ink-soft);
}

body:not(.liff-body) .notification-state,
body:not(.liff-body) .notification-priority,
body:not(.liff-body) .action-card-chip {
  min-height: 1.8rem;
  padding: 0 10px;
  border: 2px solid var(--zenith-ink);
  background: #fff;
  font-weight: 900;
}

body:not(.liff-body) .notification-state {
  background: linear-gradient(180deg, #fffdf3 0%, #fff3c3 100%);
}

body:not(.liff-body) .notification-priority {
  background: linear-gradient(180deg, #ffffff 0%, #fff7da 100%);
}

body:not(.liff-body) .admin-action-center {
  gap: 16px;
}

body:not(.liff-body) .action-center-list {
  gap: 18px;
}

body:not(.liff-body) .action-center-group {
  gap: 12px;
}

body:not(.liff-body) .action-center-group-head {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(56, 56, 50, 0.16);
}

body:not(.liff-body) .action-center-group-head h3 {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  text-transform: uppercase;
}

body:not(.liff-body) .action-center-card-grid {
  gap: 12px;
}

body:not(.liff-body) .action-card {
  gap: 10px;
  padding: 16px 14px 14px;
  border-left: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #fffef9 0%, #fff8e1 100%);
}

body:not(.liff-body) .action-card-head {
  align-items: center;
}

body:not(.liff-body) .action-card-time {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--zenith-yellow-deep);
}

body:not(.liff-body) .action-card-detail {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--zenith-ink-soft);
}

body:not(.liff-body) .action-card-next {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--zenith-ink);
}

body:not(.liff-body) .action-center-empty {
  padding: 18px 16px;
  border: 2px dashed var(--zenith-yellow-deep);
  background: linear-gradient(180deg, #fffef8 0%, #fff7df 100%);
}

body:not(.liff-body) .action-center-empty strong {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  body:not(.liff-body) .admin-notification-manager-grid,
  body:not(.liff-body) .admin-notification-recipient-chip-list,
  body:not(.liff-body) .admin-notification-switches,
  body:not(.liff-body) .action-center-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   My Page Home Polish
   ========================================================================== */

#myPageView:not(.route-detail-mode) #tab-profile.active {
  gap: 16px;
}

#myPageView:not(.route-detail-mode) .mypage-home-shell {
  gap: 14px;
  margin-bottom: 10px;
}

#myPageView:not(.route-detail-mode) .mypage-home-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 2px 2px 0;
}

#myPageView:not(.route-detail-mode) .mypage-home-brand {
  gap: 3px;
}

#myPageView:not(.route-detail-mode) .mypage-home-brand-title {
  font-size: clamp(1.24rem, 5vw, 1.58rem);
  letter-spacing: -0.03em;
}

#myPageView:not(.route-detail-mode) .mypage-home-brand-sub {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  opacity: 0.78;
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-btn {
  min-height: 48px;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  border: 2px solid var(--zenith-ink) !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff8e7 100%) !important;
  box-shadow: var(--zenith-shadow-soft) !important;
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-salute,
#myPageView:not(.route-detail-mode) .mypage-home-greeting-honorific {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

#myPageView:not(.route-detail-mode) .mypage-home-greeting-name {
  font-size: clamp(0.92rem, 3.9vw, 1.04rem);
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded {
  gap: 14px;
  padding: 14px 14px 12px !important;
  border-radius: 16px !important;
  box-shadow: var(--zenith-shadow) !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .home-member-card-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

#myPageView:not(.route-detail-mode) .home-member-card-copy {
  gap: 4px;
}

#myPageView:not(.route-detail-mode) .home-member-card-copy strong {
  max-width: 18ch;
  font-size: clamp(1.06rem, 4.2vw, 1.18rem);
  line-height: 1.24;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap {
  min-height: 232px;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fffef8 100%);
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap img {
  width: min(212px, 100%);
}

#myPageView:not(.route-detail-mode) .member-card-code-strip {
  justify-items: center;
  gap: 3px;
  padding-top: 2px;
}

#myPageView:not(.route-detail-mode) .member-card-code-strip-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

#myPageView:not(.route-detail-mode) .member-card-code-strip strong {
  font-size: 0.94rem;
  letter-spacing: 0.06em;
}

#myPageView:not(.route-detail-mode) .mypage-home-stats {
  gap: 10px;
}

#myPageView:not(.route-detail-mode) .home-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 12px 12px 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff8e7 100%) !important;
  box-shadow: var(--zenith-shadow-soft) !important;
}

#myPageView:not(.route-detail-mode) .home-stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--zenith-yellow) 0%, #ffe28d 100%);
}

#myPageView:not(.route-detail-mode) .home-stat-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

#myPageView:not(.route-detail-mode) .home-stat-value {
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  line-height: 0.96;
}

#myPageView:not(.route-detail-mode) .home-stat-note {
  font-size: 0.66rem;
  line-height: 1.35;
}

#myPageView:not(.route-detail-mode) .mypage-home-section-label,
#myPageView:not(.route-detail-mode) .mypage-menu-caption {
  margin: 2px 0 0 2px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--zenith-yellow-deep);
}

#myPageView:not(.route-detail-mode) .mypage-primary-actions,
#myPageView:not(.route-detail-mode) .mypage-menu-grid {
  gap: 10px;
}

#myPageView:not(.route-detail-mode) .home-primary-action {
  min-height: 124px;
  padding: 16px 14px !important;
  border-radius: 16px !important;
  gap: 12px;
  box-shadow: var(--zenith-shadow) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.booking {
  background: linear-gradient(180deg, #cbf5eb 0%, #83ddca 100%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.coupon {
  background: linear-gradient(180deg, #ffe0c4 0%, #ffb47e 100%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon {
  width: 48px;
  height: 48px;
  padding: 8px;
  border: 2px solid var(--zenith-ink) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7db 100%) !important;
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#myPageView:not(.route-detail-mode) .home-primary-action-copy {
  gap: 4px;
}

#myPageView:not(.route-detail-mode) .home-primary-action-title {
  font-size: 1.16rem;
  line-height: 1.08;
}

#myPageView:not(.route-detail-mode) .mypage-menu-block {
  gap: 10px;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link {
  min-height: 76px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff8e9 100%) !important;
  box-shadow: var(--zenith-shadow-soft) !important;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link .menu-illustration {
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--zenith-ink) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fff8d6 0%, #ffe28d 100%) !important;
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link-copy {
  gap: 2px;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link strong {
  font-size: 0.94rem;
  line-height: 1.12;
  color: var(--zenith-ink);
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link small {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--zenith-ink-soft);
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link-arrow {
  color: var(--zenith-yellow-deep);
  font-size: 1.24rem;
}

.bottom-tabbar.bottom-actionbar {
  width: min(430px, calc(100vw - 12px));
  padding: 6px;
  border: 2px solid var(--zenith-ink);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 228, 0.96) 100%);
  box-shadow: var(--zenith-shadow-soft);
}

.bottom-action-btn {
  min-height: 54px;
  border-radius: 12px !important;
}

.bottom-action-label {
  font-size: clamp(0.9rem, 4vw, 1rem);
}

@media (max-width: 480px) {
  #myPageView:not(.route-detail-mode) .mypage-home-shell {
    gap: 12px;
  }

  #myPageView:not(.route-detail-mode) .mypage-home-header {
    gap: 10px;
  }

  #myPageView:not(.route-detail-mode) .mypage-home-brand-title {
    font-size: 1.18rem;
  }

  #myPageView:not(.route-detail-mode) .mypage-home-greeting-btn {
    padding: 8px 10px !important;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-expanded {
    padding: 12px 12px 10px !important;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-copy strong {
    font-size: 1rem;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap {
    min-height: 214px;
    padding: 12px;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap img {
    width: min(192px, 100%);
  }

  #myPageView:not(.route-detail-mode) .home-stat-card {
    min-height: 96px;
    padding: 11px 10px 10px !important;
  }

  #myPageView:not(.route-detail-mode) .home-stat-label {
    font-size: 0.6rem;
  }

  #myPageView:not(.route-detail-mode) .home-stat-value {
    font-size: clamp(1.28rem, 6.6vw, 1.7rem);
  }

  #myPageView:not(.route-detail-mode) .home-primary-action {
    min-height: 116px;
    gap: 10px;
    padding: 14px 12px !important;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-icon {
    width: 44px;
    height: 44px;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-title {
    font-size: 1.04rem;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link {
    min-height: 72px;
    padding: 11px 12px !important;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link .menu-illustration {
    width: 2.55rem;
    height: 2.55rem;
  }

  .bottom-tabbar.bottom-actionbar {
    width: calc(100vw - 10px);
    bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .bottom-action-btn {
    min-height: 50px;
  }
}

@media (max-width: 480px) {
  #myPageView .booking-step-copy-selection {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #myPageView .booking-step-description {
    margin-top: 2px;
  }

  #myPageView .booking-service-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #myPageView .booking-service-grid-toggle {
    gap: 6px;
    padding-top: 0;
  }

  #myPageView .booking-service-grid-toggle-btn {
    min-width: min(100%, 15rem);
  }

  #myPageView .booking-service-card {
    min-height: 104px;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #myPageView .booking-service-card-visual {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
    justify-items: stretch;
    align-items: center;
    gap: 12px;
    min-height: auto;
    padding: 12px 16px 12px 12px;
  }

  #myPageView .booking-service-card .service-illustration {
    width: 52px;
    height: 52px;
    min-height: 52px;
  }

  #myPageView .booking-service-card-copy {
    margin-top: 0;
    padding-inline: 0 24px 0 0;
    gap: 6px;
  }

  #myPageView .booking-service-card strong {
    font-size: 1.02rem;
    line-height: 1.22;
    text-align: left;
    letter-spacing: 0;
    text-wrap: balance;
  }

  #myPageView .booking-service-card-copy small,
  #myPageView .booking-service-card-meta {
    justify-content: flex-start;
    gap: 10px;
  }

  #myPageView .booking-service-card .booking-service-card-arrow {
    top: 50%;
    right: 12px;
    bottom: auto;
    transform: translateY(-50%);
    font-size: 1.22rem;
  }
}

/* ==========================================================================
   Booking Step Rail Stabilization
   ========================================================================== */

#bookingStepIndicators {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}

#bookingStepIndicators .booking-step-indicator {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 82px;
  padding: 10px 4px 8px;
  border: 2px solid rgba(56, 56, 50, 0.22);
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
  color: rgba(56, 56, 50, 0.72);
  box-shadow: none;
}

#bookingStepIndicators .booking-step-indicator.active {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow) 100%);
  color: var(--zenith-ink);
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#bookingStepIndicators .booking-step-indicator.completed {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #fff6cc 0%, #ffe28d 100%);
  color: var(--zenith-ink);
  box-shadow: 2px 2px 0 0 rgba(56, 56, 50, 0.68);
}

#bookingStepIndicators .booking-step-indicator-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 2px solid var(--zenith-ink);
  border-radius: 4px;
  background: #ffffff;
  color: currentColor;
}

#bookingStepIndicators .booking-step-indicator-icon svg {
  width: 1.02rem;
  height: 1.02rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#bookingStepIndicators .booking-step-indicator-text {
  display: block;
  width: 100%;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
  word-break: keep-all;
}

@media (max-width: 640px) {
  #bookingStepIndicators {
    gap: 5px;
    padding: 10px 10px 12px;
  }

  #bookingStepIndicators .booking-step-indicator {
    min-height: 76px;
    padding: 8px 3px 7px;
    gap: 5px;
  }

  #bookingStepIndicators .booking-step-indicator-icon {
    width: 1.85rem;
    height: 1.85rem;
  }

  #bookingStepIndicators .booking-step-indicator-icon svg {
    width: 0.94rem;
    height: 0.94rem;
  }

  #bookingStepIndicators .booking-step-indicator-text {
    font-size: 0.62rem;
    letter-spacing: 0.01em;
  }
}

/* ==========================================================================
   Booking Back Button Tuning
   ========================================================================== */

@media (max-width: 640px) {
  #myPageView .booking-step-panel .booking-step-actions-split {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #myPageView .booking-step-panel .booking-step-actions-split .booking-step-next-btn,
  #myPageView .booking-step-panel .booking-step-actions-split .booking-submit-btn {
    order: 1;
    width: 100%;
  }

  #myPageView .booking-step-panel .booking-step-actions-split .booking-step-back-btn {
    order: 2;
    justify-self: center;
    width: min(156px, 46%);
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.78rem;
    box-shadow: var(--zenith-shadow-soft) !important;
  }
}

/* ==========================================================================
   Point Page Polish
   ========================================================================== */

#myPageView .mypage-route-page[data-page='point'] {
  gap: 14px;
}

#myPageView .mypage-route-page[data-page='point'] .mypage-route-head {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 2px 2px 4px;
}

#myPageView .mypage-route-page[data-page='point'] .mypage-route-subtitle {
  display: none;
}

#myPageView .point-module {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 14px;
}

#myPageView .point-visual-summary {
  gap: 14px;
}

#myPageView .point-balance-card {
  padding: 18px 18px 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, var(--member-theme-radial), transparent 46%),
    linear-gradient(180deg, var(--member-theme-panel-top) 0%, var(--member-theme-panel-soft-bottom) 76%);
  box-shadow: var(--mypage-shadow);
}

#myPageView .point-balance-card .point-card-content {
  gap: 4px;
}

#myPageView .point-balance-card .point-card-content .meta-label {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#myPageView .point-balance-card .point-card-content strong {
  letter-spacing: -0.04em;
}

#myPageView .point-balance-card .point-card-note {
  font-size: 0.84rem;
  line-height: 1.45;
}

#myPageView .checkin-action-panel,
#myPageView .point-rank-progress-panel,
#myPageView .point-history-details {
  border-radius: 24px;
}

#myPageView .checkin-action-panel {
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 214, 96, 0.18), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, #fff8ea 100%);
}

#myPageView .checkin-action-head {
  align-items: flex-start;
}

#myPageView .checkin-action-copy {
  gap: 4px;
}

#myPageView .checkin-action-title {
  font-size: 1.06rem;
}

#myPageView .checkin-action-lead {
  font-size: 0.79rem;
  line-height: 1.5;
}

#myPageView .checkin-action-btn {
  min-height: 68px;
  border-radius: 18px !important;
}

#myPageView .checkin-action-btn-main {
  font-size: 1.02rem;
}

#myPageView .checkin-action-btn-sub {
  font-size: 0.72rem;
}

#myPageView .checkin-action-status {
  min-height: 48px;
  display: grid;
  align-items: center;
  padding: 10px 12px;
  border: 2px solid rgba(17, 17, 17, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 255, 250, 0.98) 100%);
}

#myPageView .point-rank-progress-panel {
  padding: 18px;
}

#myPageView .point-rank-progress-summary {
  gap: 12px;
  padding-bottom: 14px;
}

#myPageView .point-rank-progress-summary-copy strong {
  font-size: clamp(1.1rem, 4.5vw, 1.34rem);
}

#myPageView .point-rank-progress-head {
  gap: 6px;
}

#myPageView .point-rank-progress-copy {
  font-size: 0.94rem;
  line-height: 1.45;
}

#myPageView .point-history-panel {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

#myPageView .point-history-details {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 250, 240, 0.98) 100%);
}

#myPageView .point-history-summary {
  padding: 12px 14px;
}

#myPageView .point-history-summary::after {
  min-width: 4rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e8 100%);
  color: var(--mypage-text);
}

#myPageView .point-history-head {
  gap: 3px;
}

#myPageView .point-history-head h4 {
  font-size: 0.96rem;
}

#myPageView .point-history-head p {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 0.73rem;
  line-height: 1.45;
}

@media (max-width: 640px) {
  #myPageView .mypage-route-page[data-page='point'] {
    gap: 12px;
  }

  #myPageView .point-module {
    gap: 12px;
  }

  #myPageView .point-balance-card {
    padding: 16px 14px 18px;
    border-radius: 22px;
  }

  #myPageView .point-balance-card .point-card-content .meta-label {
    font-size: 0.68rem;
  }

  #myPageView .point-balance-card .point-card-content strong {
    font-size: clamp(3rem, 13vw, 4.1rem);
  }

  #myPageView .point-balance-card .point-card-note {
    font-size: 0.76rem;
  }

  #myPageView .checkin-action-panel,
  #myPageView .point-rank-progress-panel,
  #myPageView .point-history-details {
    border-radius: 20px;
  }

  #myPageView .checkin-action-panel,
  #myPageView .point-rank-progress-panel {
    padding: 14px;
  }

  #myPageView .checkin-action-btn {
    min-height: 62px;
    padding: 12px 10px;
  }

  #myPageView .checkin-action-btn-main {
    font-size: 0.94rem;
  }

  #myPageView .checkin-action-btn-sub {
    font-size: 0.68rem;
  }

  #myPageView .checkin-action-status {
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  #myPageView .point-rank-progress-summary-copy strong {
    font-size: 1.04rem;
  }

  #myPageView .point-history-summary {
    padding: 10px 12px;
  }

  #myPageView .point-history-head p {
    font-size: 0.69rem;
  }
}

/* ==========================================================================
   Guide Modal Refresh
   ========================================================================== */

.guide-overlay {
  z-index: 12040;
  background: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(6px);
}

#checkinGuideModal .guide-card,
#rankGuideModal .guide-card {
  width: min(430px, calc(100vw - 18px));
  max-height: calc(100dvh - 18px - env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  padding: 16px 14px 14px;
  border: 2px solid var(--zenith-ink);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 181, 0, 0.14), transparent 38%),
    linear-gradient(180deg, var(--zenith-paper) 0%, #fffdf7 100%);
  box-shadow: var(--zenith-shadow);
}

#checkinGuideModal .checkin-guide-kicker,
#rankGuideModal .checkin-guide-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 1.7rem;
  margin: 0;
  padding: 0.15rem 0.55rem;
  border: 2px solid var(--zenith-ink);
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow) 100%);
  color: var(--zenith-ink);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84);
}

#checkinGuideModal .guide-card h3,
#rankGuideModal .guide-card h3 {
  margin: 0;
  color: var(--zenith-ink);
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  font-style: italic;
  line-height: 1.1;
}

#checkinGuideModal .checkin-guide-lead,
#rankGuideModal .checkin-guide-lead {
  margin: 0;
  color: var(--zenith-ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 800;
}

#checkinGuideModal .checkin-guide-badges,
#rankGuideModal .checkin-guide-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

#checkinGuideModal .checkin-guide-badge,
#rankGuideModal .checkin-guide-badge {
  min-height: 2.6rem;
  padding: 6px 8px;
  border: 2px solid var(--zenith-ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fff8e8 100%);
  color: var(--zenith-yellow-deep);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  box-shadow: none;
}

#checkinGuideModal .guide-frame,
#rankGuideModal .guide-frame {
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--zenith-ink);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff3cc 0%, #fff9ea 100%);
  text-align: left;
  box-shadow: none;
}

#checkinGuideModal .guide-frame span,
#rankGuideModal .guide-frame span {
  color: var(--zenith-yellow-deep);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.5;
}

#checkinGuideModal .guide-list,
#rankGuideModal .guide-list {
  margin: 0;
  padding: 12px 14px 12px 1.35rem;
  border: 2px solid rgba(56, 56, 50, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  gap: 6px;
  color: var(--zenith-ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

#rankGuideModal .rank-tier-guide-modal {
  margin-top: 0;
  gap: 8px;
}

#rankGuideModal .rank-tier-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fff8ea 100%);
  box-shadow: none;
}

#rankGuideModal .rank-tier-item.current {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #effff8 0%, #dff6ee 100%);
}

#rankGuideModal .rank-tier-item.completed {
  border-color: var(--zenith-ink);
  background: linear-gradient(180deg, #fff7d1 0%, #ffefb2 100%);
}

#rankGuideModal .rank-tier-head {
  align-items: center;
  gap: 10px;
}

#rankGuideModal .rank-tier-name {
  font-size: 0.95rem;
  color: var(--zenith-ink);
}

#rankGuideModal .rank-tier-condition {
  color: var(--zenith-yellow-deep);
  font-size: 0.72rem;
  font-weight: 900;
}

#rankGuideModal .rank-tier-benefit {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--zenith-ink-soft);
}

#checkinGuideModal .actions,
#rankGuideModal .actions {
  margin-top: 2px;
}

#checkinGuideModal .actions button,
#rankGuideModal .actions button {
  min-width: 7.2rem;
  min-height: 2.9rem;
  padding: 0 1rem;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%) !important;
  color: var(--zenith-ink) !important;
  border: 2px solid var(--zenith-ink) !important;
  box-shadow: var(--zenith-shadow), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  font-weight: 900;
}

@media (max-width: 640px) {
  .guide-overlay {
    padding: 10px 8px calc(14px + env(safe-area-inset-bottom));
  }

  #checkinGuideModal .guide-card,
  #rankGuideModal .guide-card {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px - env(safe-area-inset-bottom));
    gap: 10px;
    padding: 14px 12px 12px;
  }

  #checkinGuideModal .checkin-guide-badges,
  #rankGuideModal .checkin-guide-badges {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #checkinGuideModal .checkin-guide-badge,
  #rankGuideModal .checkin-guide-badge {
    min-height: 2.25rem;
    font-size: 0.7rem;
  }

  #checkinGuideModal .guide-list,
  #rankGuideModal .guide-list {
    padding: 10px 12px 10px 1.2rem;
    font-size: 0.76rem;
  }

  #rankGuideModal .rank-tier-item {
    padding: 9px 10px;
  }

  #checkinGuideModal .actions button,
  #rankGuideModal .actions button {
    min-height: 2.7rem;
  }
}

/* ==========================================================================
   Profile Vehicle Editor Spacing
   ========================================================================== */

#myPageView .profile-form-paged {
  gap: 16px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car {
  gap: 14px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .profile-block-head {
  gap: 6px;
  padding: 0 2px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-section-head {
  padding: 6px 2px 2px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-section-head > div {
  display: grid;
  gap: 6px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-list {
  gap: 16px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-card {
  gap: 14px;
  padding: 16px 14px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(180deg, rgba(255, 254, 248, 0.98) 0%, rgba(255, 249, 235, 0.96) 100%);
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-card-head {
  gap: 10px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-grid {
  gap: 14px 12px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-grid > label,
#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-grid > label {
  display: grid;
  gap: 6px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-block {
  gap: 14px;
  padding-top: 4px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-preview {
  padding: 6px 0 2px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-preview .jp-plate-card {
  width: min(312px, 100%);
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-grid {
  gap: 12px;
}

#myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-card-note {
  padding-top: 4px;
}

@media (max-width: 640px) {
  #myPageView .profile-form-paged {
    gap: 14px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car {
    gap: 12px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-section-head {
    padding: 8px 4px 4px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-list {
    gap: 14px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-card {
    gap: 12px;
    padding: 14px 12px 16px;
    border-radius: 20px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-grid {
    gap: 12px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-block {
    gap: 12px;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-preview {
    padding: 4px 0 0;
  }

  #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-plate-grid {
    gap: 10px;
  }
}

/* ==========================================================================
   Profile Footer Polish
   ========================================================================== */

#myPageView .mypage-route-page[data-page='profile'] .profile-form-paged {
  gap: 18px;
}

#myPageView #profileSubmitBtn {
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow) 100%) !important;
  color: var(--zenith-ink) !important;
  border: 2px solid var(--zenith-ink) !important;
  box-shadow: var(--zenith-shadow) !important;
  font-weight: 900;
  letter-spacing: 0.01em;
}

#myPageView .mypage-route-page[data-page='profile'] .profile-danger-zone {
  gap: 12px;
  padding: 18px 16px;
  border: 2px solid var(--zenith-ink);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 205, 205, 0.34), transparent 44%),
    linear-gradient(180deg, #fff9f7 0%, #fff1ee 100%);
  box-shadow: var(--zenith-shadow-soft);
}

#myPageView .mypage-route-page[data-page='profile'] .profile-danger-zone-head {
  gap: 6px;
}

#myPageView .mypage-route-page[data-page='profile'] .profile-danger-zone-head strong {
  font-size: 1rem;
  color: #7b1d1d;
}

#myPageView .mypage-route-page[data-page='profile'] .profile-danger-zone-head p {
  color: #7f3a3a;
  font-size: 0.8rem;
  line-height: 1.6;
}

#myPageView .profile-delete-btn {
  min-height: 52px;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffd7c5 0%, #ffb18a 100%) !important;
  color: #6d2114 !important;
  border: 2px solid #8c3a16 !important;
  box-shadow: var(--zenith-shadow-soft) !important;
}

#myPageView .profile-delete-btn:hover {
  background: linear-gradient(180deg, #ffc8b0 0%, #ff9a6b 100%) !important;
}

#myPageView #profileStatus:empty {
  display: none;
}

#myPageView .mypage-route-page[data-page='profile'] .mypage-route-footer {
  padding-top: 2px;
}

@media (max-width: 640px) {
  #myPageView .mypage-route-page[data-page='profile'] .profile-form-paged {
    gap: 16px;
  }

  #myPageView #profileSubmitBtn {
    min-height: 52px;
    margin-top: 2px;
    border-radius: 16px !important;
  }

  #myPageView .mypage-route-page[data-page='profile'] .profile-danger-zone {
    gap: 10px;
    padding: 16px 14px;
    border-radius: 20px;
  }

  #myPageView .mypage-route-page[data-page='profile'] .profile-danger-zone-head p {
    font-size: 0.76rem;
  }

  #myPageView .profile-delete-btn {
    min-height: 48px;
    border-radius: 14px !important;
  }
}

/* ==========================================================================
   Home Ergonomic Refinement
   ========================================================================== */

#myPageView:not(.route-detail-mode) .mypage-home-shell {
  gap: 18px;
}

#myPageView:not(.route-detail-mode) .mypage-home-header {
  gap: 14px;
  padding: 4px 2px 2px;
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded {
  gap: 16px;
  padding: 16px 16px 14px !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded-head {
  gap: 14px;
}

#myPageView:not(.route-detail-mode) .home-member-card-copy {
  gap: 5px;
}

#myPageView:not(.route-detail-mode) .home-member-card-copy strong {
  max-width: 20ch;
  font-size: clamp(1.1rem, 4.4vw, 1.24rem);
  line-height: 1.28;
}

#myPageView:not(.route-detail-mode) .home-member-card-tier-badge {
  min-height: 40px;
  padding-inline: 12px;
  border-radius: 12px !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap {
  min-height: 240px;
  padding: 16px;
}

#myPageView:not(.route-detail-mode) .mypage-home-stats {
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .home-stat-card {
  min-height: 112px;
  padding: 14px 12px 12px !important;
  align-content: start;
  gap: 8px;
}

#myPageView:not(.route-detail-mode) .home-stat-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

#myPageView:not(.route-detail-mode) .home-stat-value {
  font-size: clamp(1.44rem, 6.2vw, 1.9rem);
  line-height: 1;
}

#myPageView:not(.route-detail-mode) .home-stat-note {
  font-size: 0.72rem;
  line-height: 1.42;
}

#myPageView:not(.route-detail-mode) .mypage-home-section-label,
#myPageView:not(.route-detail-mode) .mypage-menu-caption {
  margin: 4px 0 2px 2px;
}

#myPageView:not(.route-detail-mode) .mypage-primary-actions {
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .home-primary-action {
  min-height: 136px;
  padding: 18px 16px !important;
  gap: 14px;
  align-content: center !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-title {
  font-size: 1.2rem;
  line-height: 1.12;
}

#myPageView:not(.route-detail-mode) .mypage-menu-block {
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .mypage-menu-grid {
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link {
  min-height: 82px;
  padding: 14px 15px !important;
  gap: 12px;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link .menu-illustration {
  width: 3rem;
  height: 3rem;
  border-radius: 12px !important;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link-copy {
  gap: 4px;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link strong {
  font-size: 0.98rem;
  line-height: 1.14;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link small {
  font-size: 0.72rem;
  line-height: 1.45;
}

.bottom-tabbar.bottom-actionbar {
  padding: 8px;
  gap: 8px;
}

.bottom-action-btn {
  min-height: 56px;
  padding: 0 12px;
  border: 2px solid var(--zenith-ink) !important;
  box-shadow: var(--zenith-shadow-soft) !important;
}

.bottom-action-label {
  line-height: 1.15;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  #myPageView:not(.route-detail-mode) .mypage-home-shell {
    gap: 14px;
  }

  #myPageView:not(.route-detail-mode) .mypage-home-header {
    gap: 12px;
    padding: 2px 1px 1px;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-expanded {
    gap: 14px;
    padding: 14px 14px 12px !important;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-copy strong {
    font-size: 1.02rem;
    line-height: 1.26;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-tier-badge {
    min-height: 36px;
    padding-inline: 10px;
    font-size: 0.7rem;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap {
    min-height: 222px;
    padding: 14px 12px;
  }

  #myPageView:not(.route-detail-mode) .mypage-home-stats {
    gap: 10px;
  }

  #myPageView:not(.route-detail-mode) .home-stat-card {
    min-height: 106px;
    padding: 13px 10px 11px !important;
    gap: 6px;
  }

  #myPageView:not(.route-detail-mode) .home-stat-label {
    font-size: 0.62rem;
  }

  #myPageView:not(.route-detail-mode) .home-stat-value {
    font-size: clamp(1.24rem, 6vw, 1.58rem);
  }

  #myPageView:not(.route-detail-mode) .home-stat-note {
    font-size: 0.68rem;
    line-height: 1.36;
  }

  #myPageView:not(.route-detail-mode) .mypage-primary-actions,
  #myPageView:not(.route-detail-mode) .mypage-menu-grid {
    gap: 10px;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action {
    min-height: 126px;
    padding: 16px 12px !important;
    gap: 12px;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-icon {
    width: 46px;
    height: 46px;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-title {
    font-size: 1.08rem;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link {
    min-height: 76px;
    padding: 13px 12px !important;
    gap: 10px;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link .menu-illustration {
    width: 2.72rem;
    height: 2.72rem;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link strong {
    font-size: 0.92rem;
  }

  #myPageView:not(.route-detail-mode) .mypage-secondary-link small {
    font-size: 0.69rem;
  }

  .bottom-tabbar.bottom-actionbar {
    padding: 7px;
    gap: 7px;
  }

  .bottom-action-btn {
    min-height: 52px;
  }
}

/* ==========================================================================
   Tactical Industrialism Final Cascade (2026-04-05)
   ========================================================================== */

body {
  background:
    linear-gradient(180deg, rgba(254, 199, 0, 0.08) 0%, rgba(254, 255, 214, 1) 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 32%),
    var(--tactical-paper) !important;
  color: var(--tactical-ink) !important;
}

body:not(.liff-body) .card,
.liff-body .card {
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, var(--tactical-paper-soft) 0%, var(--tactical-paper-strong) 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView {
  background: transparent !important;
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

#myPageView .mypage-route-head {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#myPageView .mypage-route-title {
  font-size: clamp(1.64rem, 7vw, 2.16rem) !important;
  line-height: 1 !important;
}

#myPageView .mypage-route-subtitle {
  color: var(--tactical-muted) !important;
  font-size: 0.74rem !important;
  line-height: 1.55 !important;
}

#myPageView:not(.route-detail-mode) .mypage-home-shell {
  gap: 16px !important;
  margin-bottom: 12px !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-expanded {
  gap: 12px !important;
  padding: 14px !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff7df 100%) !important;
  box-shadow: var(--tactical-shadow) !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap,
#myPageView .digital-member-card-body {
  position: relative !important;
  min-height: 232px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: #ffffff !important;
  padding: 14px !important;
}

#myPageView:not(.route-detail-mode) .home-member-card-qr-wrap::before,
#myPageView .digital-member-card-body::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border: 2px dashed rgba(56, 56, 50, 0.18) !important;
  pointer-events: none !important;
}

#myPageView:not(.route-detail-mode) .member-card-code-strip,
#myPageView .digital-member-card-code-strip {
  padding-top: 8px !important;
  border-top: 2px dashed rgba(56, 56, 50, 0.18) !important;
}

#myPageView:not(.route-detail-mode) .home-stat-card {
  min-height: 108px !important;
  padding: 12px 12px 10px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d1 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
  gap: 6px !important;
}

#myPageView:not(.route-detail-mode) .home-stat-card::before {
  height: 0 !important;
}

#myPageView:not(.route-detail-mode) .home-stat-value {
  font-size: clamp(1.5rem, 7vw, 2rem) !important;
}

#myPageView:not(.route-detail-mode) .home-stat-note {
  color: var(--tactical-muted) !important;
  font-size: 0.68rem !important;
}

#myPageView:not(.route-detail-mode) .mypage-home-section-label,
#myPageView:not(.route-detail-mode) .mypage-menu-caption {
  color: var(--tactical-ink) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action {
  min-height: 112px !important;
  padding: 16px 16px 14px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  box-shadow: var(--tactical-shadow) !important;
  justify-items: start !important;
  align-content: center !important;
  text-align: left !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 12px !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.booking {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.coupon {
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon {
  width: 52px !important;
  height: 52px !important;
  padding: 10px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: var(--tactical-dark) !important;
  box-shadow: none !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon img {
  filter: brightness(0) saturate(100%) invert(83%) sepia(61%) saturate(1001%) hue-rotate(356deg) brightness(102%) contrast(103%) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-title {
  font-size: 1.24rem !important;
  line-height: 1.06 !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-lead {
  color: var(--tactical-muted) !important;
  font-size: 0.7rem !important;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link {
  min-height: 74px !important;
  padding: 12px 14px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView:not(.route-detail-mode) .mypage-secondary-link .menu-illustration {
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fff3b3 0%, #ffd96a 100%) !important;
  box-shadow: none !important;
}

#myPageView .point-balance-card {
  position: relative !important;
  min-height: 132px !important;
  padding: 18px 18px 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
}

#myPageView .point-balance-card .point-balance-illustration {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  opacity: 0.14 !important;
  border: 0 !important;
  background: none !important;
}

#myPageView .point-balance-card .point-card-content strong {
  font-size: clamp(3rem, 14vw, 4.6rem) !important;
}

#myPageView .checkin-action-panel {
  padding: 16px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7e1 100%) !important;
}

#myPageView .checkin-action-btn {
  min-height: 62px !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffdb55 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView .point-rank-progress-panel {
  padding: 16px !important;
  color: #fff9dd !important;
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%) !important;
}

#myPageView .point-rank-progress-panel .meta-label,
#myPageView .point-rank-progress-panel #memberTierValue,
#myPageView .point-rank-progress-panel #rankProgressText {
  color: #fff8d3 !important;
}

#myPageView .point-rank-progress-panel .point-progress-fill,
#myPageView .point-rank-progress-panel .point-reward-meter-fill {
  background: linear-gradient(90deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView .point-history-details {
  background: linear-gradient(180deg, #fffef8 0%, #fff8e7 100%) !important;
}

#myPageView .point-history-head h4 {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 2rem !important;
  align-items: center !important;
  padding: 0 12px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%) !important;
  color: #fff8d4 !important;
  font-size: 0.88rem !important;
}

#myPageView .point-history-list li {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 14px 12px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .coupon-active-panel,
#myPageView .coupon-item {
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .coupon-active-panel {
  gap: 14px !important;
  padding: 14px !important;
}

#myPageView .coupon-active-panel-kicker,
#myPageView .coupon-corner-badge {
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

#myPageView .coupon-active-panel h4,
#myPageView .coupon-title {
  font-size: clamp(1.4rem, 7vw, 2rem) !important;
  line-height: 1.02 !important;
  text-transform: uppercase !important;
}

#myPageView .coupon-activate-btn {
  min-height: 56px !important;
  border-radius: var(--tactical-radius) !important;
  text-transform: uppercase !important;
}

#myPageView .service-history-summary {
  padding: 14px !important;
  color: #fff8d4 !important;
  background: linear-gradient(180deg, var(--tactical-dark) 0%, var(--tactical-dark-2) 100%) !important;
}

#myPageView .service-history-summary .service-history-stat-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

#myPageView .service-history-item {
  padding: 14px !important;
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .service-history-source {
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff6db 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .digital-member-card {
  gap: 14px !important;
  padding: 14px !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff9e7 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .digital-member-card-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

#myPageView .digital-member-card-head strong {
  font-size: clamp(1.12rem, 4.6vw, 1.4rem) !important;
}

#myPageView .digital-member-card-note {
  color: var(--tactical-muted) !important;
  font-size: 0.72rem !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#myPageView .booking-wizard-module {
  gap: 14px !important;
  padding: 16px !important;
  border-radius: var(--tactical-radius) !important;
}

#myPageView .booking-step-counter {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 1.9rem !important;
  align-items: center !important;
  padding: 0 10px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .booking-step-title {
  font-size: clamp(1.6rem, 7vw, 2.04rem) !important;
}

#myPageView .booking-step-progress-shell {
  height: 12px !important;
  border: var(--tactical-line) !important;
  background: #ffffff !important;
}

#myPageView .booking-step-progress-fill {
  background: linear-gradient(90deg, var(--tactical-yellow-deep) 0%, #9b7b09 100%) !important;
}

#bookingStepIndicators .booking-step-indicator {
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#bookingStepIndicators .booking-step-indicator.active {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
  box-shadow: var(--tactical-shadow) !important;
}

#myPageView .booking-service-card,
#myPageView .booking-option-toggle-btn,
#myPageView .booking-option-fields,
#myPageView .booking-slot-picker,
#myPageView .booking-time-slot,
#myPageView .booking-submit-preview,
#myPageView .booking-choice-field,
#myPageView .booking-optional-details,
#myPageView .profile-block,
#myPageView .profile-form-paged .vehicle-editor-card,
#myPageView .profile-danger-zone {
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

#myPageView .booking-service-card.active {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
  box-shadow: var(--tactical-shadow) !important;
}

#myPageView .booking-time-slot {
  min-height: 68px !important;
  grid-template-columns: auto 1fr auto auto !important;
  padding: 12px 14px !important;
}

#myPageView .booking-time-slot-badge {
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: #ffffff !important;
}

#myPageView .booking-step-next-btn,
#myPageView .booking-submit-btn,
#myPageView #profileSubmitBtn {
  min-height: 56px !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

.bottom-tabbar.bottom-actionbar {
  width: min(430px, calc(100vw - 10px)) !important;
  padding: 8px !important;
  gap: 8px !important;
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, rgba(63, 64, 54, 0.96) 0%, rgba(46, 47, 40, 0.98) 100%) !important;
  box-shadow: var(--tactical-shadow) !important;
}

.bottom-action-btn {
  min-height: 52px !important;
  border-radius: var(--tactical-radius) !important;
}

.bottom-action-btn.secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff6dc 100%) !important;
}

.bottom-action-btn:not(.secondary) {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
}

body:not(.liff-body) .container.admin-shell {
  max-width: min(1440px, calc(100vw - 22px)) !important;
}

body:not(.liff-body) .admin-global-header {
  padding: 16px 18px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
}

body:not(.liff-body) .admin-sidebar {
  position: sticky !important;
  top: 12px !important;
  padding: 14px !important;
  background: linear-gradient(180deg, var(--zenith-paper-2) 0%, var(--zenith-paper) 100%) !important;
  color: var(--tactical-ink) !important;
  box-shadow: var(--tactical-shadow) !important;
}

body:not(.liff-body) .admin-nav-group {
  border: 2px solid rgba(56, 56, 50, 0.14) !important;
  border-radius: var(--tactical-radius) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

body:not(.liff-body) .admin-nav a {
  border: 2px solid rgba(56, 56, 50, 0.16) !important;
  border-radius: var(--tactical-radius) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: var(--tactical-ink) !important;
  box-shadow: none !important;
}

body:not(.liff-body) .admin-nav a.active {
  background: linear-gradient(180deg, #ffda54 0%, var(--tactical-yellow) 100%) !important;
  color: var(--tactical-ink) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

body:not(.liff-body) .kpi-card,
body:not(.liff-body) .mini-kpi-card,
body:not(.liff-body) .dashboard-panel,
body:not(.liff-body) .admin-notification-summary-card,
body:not(.liff-body) .coupon-admin-block,
body:not(.liff-body) .action-card,
body:not(.liff-body) .qr-scanner-result-card {
  border-radius: var(--tactical-radius) !important;
  border: var(--tactical-line) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
}

body:not(.liff-body) .kpi-card strong,
body:not(.liff-body) .mini-kpi-card strong {
  font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
}

body:not(.liff-body) .table-wrap th,
body:not(.liff-body) .appointment-table th {
  background: linear-gradient(180deg, #fff4b1 0%, #ffe078 100%) !important;
  color: var(--tactical-ink) !important;
}

@media (max-width: 640px) {
  #myPageView .mypage-route-title {
    font-size: clamp(1.42rem, 6.8vw, 1.86rem) !important;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action {
    min-height: 104px !important;
    padding: 14px 12px !important;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-title {
    font-size: 1.08rem !important;
  }

  #myPageView:not(.route-detail-mode) .home-primary-action-icon {
    width: 46px !important;
    height: 46px !important;
  }

  #myPageView:not(.route-detail-mode) .home-member-card-qr-wrap,
  #myPageView .digital-member-card-body {
    min-height: 208px !important;
    padding: 12px !important;
  }

  #myPageView .point-balance-card .point-card-content strong {
    font-size: clamp(2.6rem, 13vw, 3.7rem) !important;
  }

  #myPageView .coupon-active-panel h4,
  #myPageView .coupon-title {
    font-size: clamp(1.2rem, 6vw, 1.58rem) !important;
  }

  #myPageView .booking-step-title {
    font-size: clamp(1.36rem, 6vw, 1.68rem) !important;
  }

  body:not(.liff-body) .admin-sidebar {
    position: static !important;
  }
}

/* ==========================================================================
   Motion Stabilization
   ========================================================================== */

#myPageView .mypage-route-page,
#myPageView .booking-route-panel,
#myPageView .booking-step-panel,
#myPageView .mypage-hero,
#myPageView .mypage-hero-head,
#myPageView .mypage-member-summary,
#myPageView .mypage-member-copy,
#myPageView .mypage-avatar,
#myPageView .mypage-hero h3,
#myPageView .mypage-tier-wrap,
#myPageView .member-tier,
#myPageView .point-badge {
  transition: none !important;
  will-change: auto !important;
}

#myPageView .mypage-route-page.is-entering,
#myPageView .mypage-route-page.is-entering > *,
#myPageView .booking-route-panel.is-entering,
#myPageView .booking-step-panel.is-entering,
#myPageView .booking-step-panel.is-entering > * {
  animation: none !important;
}

#myPageView.route-detail-mode .mypage-hero.mypage-hero-compact-action:active,
#myPageView .booking-service-card:active,
#myPageView .booking-option-toggle-btn:active,
#myPageView .booking-time-slot:active {
  transform: none !important;
}

/* LINE Harness方式: キーワード自動返信・チャット管理 UI */
.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--tactical-ink, #383832);
  background: var(--tactical-yellow, #fec700);
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
}
.btn-small:hover { opacity: 0.85; }
.btn-small.secondary { background: #e0e0e0; }
.btn-small.danger { background: #f44336; color: #fff; border-color: #c62828; }
.btn-small.active-filter { background: var(--tactical-ink, #383832); color: #fff; }

/* ==========================================================================
   Booking Redesign v2 — Clean card-based service selection
   ========================================================================== */

/* --- Wizard Topbar (← RESERVATION ×) --- */
.booking-wizard-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px !important;
  background: var(--tactical-ink, #383832) !important;
  border-bottom: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 8px;
  min-height: auto !important;
}

.booking-wizard-heading {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  text-align: center;
  flex: 1;
  margin: 0;
}

.booking-wizard-nav-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background 0.15s;
}

.booking-wizard-nav-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

/* --- Step Header (STEP 01 / SELECT SERVICE / subtitle) --- */
.booking-wizard-step-header {
  padding: 20px 20px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.booking-wizard-step-header .booking-step-counter {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--tactical-yellow, #fec700);
  background: var(--tactical-ink, #383832);
  padding: 2px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.booking-wizard-step-header .booking-step-title {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--tactical-ink, #383832);
  margin: 0 0 6px;
  line-height: 1.2;
}

.booking-wizard-step-header .booking-step-lead {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
  font-weight: 500;
}

.booking-wizard-step-header .booking-step-progress-shell {
  margin-top: 14px;
  height: 3px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.booking-wizard-step-header .booking-step-progress-fill {
  height: 100%;
  background: var(--tactical-yellow, #fec700);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* --- Service Grid (card layout) --- */
.booking-service-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 16px 16px 24px !important;
  background: #f7f7f7;
}

.booking-service-grid-empty {
  grid-column: 1 / -1;
}

/* --- Service Cards --- */
.booking-card {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.booking-card:active {
  border-color: var(--tactical-yellow, #fec700);
  box-shadow: 0 0 0 2px rgba(254, 199, 0, 0.3);
}

.booking-card.active {
  border-color: var(--tactical-yellow, #fec700);
  box-shadow: 0 0 0 2.5px var(--tactical-yellow, #fec700);
}

/* Large cards: full width */
.booking-card-large {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
}

/* Half cards: one column each */
.booking-card-half {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}

/* Compact card (その他): full width, horizontal, slim */
.booking-card-compact {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fafafa;
}

/* --- Card Icon --- */
.booking-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--tactical-ink, #383832);
}

.booking-card-large .booking-card-icon {
  width: 52px;
  height: 52px;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 8px;
}

.booking-card-half .booking-card-icon {
  width: 40px;
  height: 40px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 6px;
}

.booking-card-compact .booking-card-icon {
  width: 36px;
  height: 36px;
  background: #eee;
  border-radius: 8px;
  padding: 6px;
}

.booking-card-icon svg {
  width: 100%;
  height: 100%;
}

/* --- Card Body --- */
.booking-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.booking-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--tactical-ink, #383832);
  line-height: 1.3;
}

.booking-card-half .booking-card-title {
  font-size: 0.92rem;
}

.booking-card-en {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #999;
  text-transform: uppercase;
}

/* --- Card Meta (duration + price) --- */
.booking-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.booking-card-half .booking-card-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 4px;
}

.booking-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #666;
}

.booking-card-meta-item svg {
  flex-shrink: 0;
  color: #999;
}

/* --- RECOMMENDED Badge --- */
.booking-card-badge {
  position: absolute;
  top: -1px;
  right: 12px;
  background: var(--tactical-yellow, #fec700);
  color: var(--tactical-ink, #383832);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 8px 4px;
  border-radius: 0 0 4px 4px;
  text-transform: uppercase;
  line-height: 1;
}

/* --- Compact Arrow --- */
.booking-card-arrow {
  display: flex;
  align-items: center;
  color: #ccc;
  flex-shrink: 0;
  margin-left: auto;
}

/* --- Toggle (残りN件) --- */
.booking-service-grid .booking-service-grid-toggle {
  grid-column: 1 / -1;
}

/* --- Hide old step indicators inside step 1 --- */
.booking-step-panel[data-booking-step="1"] .booking-step-copy {
  display: none;
}

/* --- Override legacy "Tactical" theme for new booking cards --- */
#myPageView .booking-wizard-topbar {
  display: flex !important;
  grid-template-columns: unset !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--tactical-ink, #383832) !important;
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  gap: 8px !important;
  min-height: auto !important;
  box-shadow: none !important;
}

#myPageView .booking-wizard-nav-btn {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  color: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

#myPageView .booking-wizard-close-btn {
  order: unset !important;
}

#myPageView .booking-wizard-step-header {
  padding: 20px 20px 16px !important;
  background: linear-gradient(180deg, #fffdf5 0%, #fff8e0 100%) !important;
  border-bottom: 1px solid #f0e8d0 !important;
}

#myPageView .booking-wizard-step-header .booking-step-counter {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
  background: linear-gradient(135deg, #f0a000 0%, #e89000 100%) !important;
  padding: 3px 12px !important;
  border-radius: 4px !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  width: auto !important;
  margin-bottom: 8px !important;
}

#myPageView .booking-wizard-step-header .booking-step-title {
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  color: var(--tactical-ink, #383832) !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#myPageView .booking-wizard-step-header .booking-step-lead {
  font-size: 0.82rem !important;
  color: #888 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

#myPageView .booking-wizard-step-header .booking-step-progress-shell {
  height: 4px !important;
  margin-top: 14px !important;
  border: none !important;
  border-radius: 2px !important;
  background: #f0e8d0 !important;
  box-shadow: none !important;
}

#myPageView .booking-wizard-step-header .booking-step-progress-fill {
  background: linear-gradient(90deg, #fec700, #f0a000) !important;
  border-radius: 2px !important;
}

/* ── Redesigned service list (matching home page design) ── */
#myPageView .booking-service-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Hide old booking-card system inside service grid */
#myPageView .booking-service-grid .booking-card {
  display: none !important;
}

/* ── Service list heading ── */
#myPageView .bk-list-heading {
  margin: 0;
  font-size: clamp(1.3rem, 5.5vw, 1.6rem);
  font-weight: 900;
  line-height: 1.3;
  color: var(--tactical-ink);
  letter-spacing: -0.02em;
}

#myPageView .bk-list-lead {
  margin: 0;
  font-size: 0.78rem;
  color: var(--tactical-muted);
  line-height: 1.55;
}

/* ── Service item card (zenith button style) ── */
#myPageView .bk-item {
  all: unset;
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  color: var(--zenith-ink, #383832) !important;
  font-weight: 900 !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
}

#myPageView .bk-item:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

#myPageView .bk-item.is-selected {
  border-color: var(--tactical-dark) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)), 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 3px var(--tactical-yellow, #fec700) !important;
}

/* ── Recommended badge ── */
#myPageView .bk-item-badge {
  position: absolute;
  top: -1px;
  left: 14px;
  padding: 3px 10px;
  background: var(--tactical-dark);
  color: #e8d48a;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.4;
  border-radius: 0 0 6px 6px;
}

/* ── Card body ── */
#myPageView .bk-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

#myPageView .bk-item.is-recommended {
  padding-top: 26px;
}

#myPageView .bk-item-title {
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  font-weight: 900;
  color: var(--tactical-ink);
  line-height: 1.3;
}

#myPageView .bk-item-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--tactical-muted);
  line-height: 1.55;
}

/* ── Meta row (duration + price) ── */
#myPageView .bk-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

#myPageView .bk-item-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #5a5a52;
  line-height: 1;
}

#myPageView .bk-item-meta-tag svg {
  flex-shrink: 0;
  stroke: #8a8a7e;
}

/* ── Check icon ── */
#myPageView .bk-item-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

#myPageView .bk-item-check svg circle {
  fill: var(--tactical-dark);
}

#myPageView .bk-item-check svg path {
  stroke: #fff;
}

/* ── Toggle button ── */
#myPageView .bk-list-toggle {
  text-align: center;
}

#myPageView .bk-list-toggle-btn {
  width: 100%;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ── Admin recommended checkbox style ── */
.booking-menu-recommended-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.booking-menu-recommended-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

#myPageView .booking-card:active {
  border-color: var(--tactical-yellow, #fec700) !important;
  box-shadow: 0 0 0 2px rgba(254, 199, 0, 0.3) !important;
}

#myPageView .booking-card.active {
  border-color: var(--tactical-yellow, #fec700) !important;
  box-shadow: 0 0 0 2.5px var(--tactical-yellow, #fec700) !important;
  background: #fffef5 !important;
}

#myPageView .booking-card-large {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 16px !important;
}

#myPageView .booking-card-half {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px !important;
}

#myPageView .booking-card-compact {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: #fafafa !important;
}

#myPageView .booking-card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-card-large .booking-card-icon {
  width: 52px !important;
  height: 52px !important;
  background: #f5f5f5 !important;
  border-radius: 10px !important;
  padding: 8px !important;
  border: none !important;
  box-shadow: none !important;
}

#myPageView .booking-card-half .booking-card-icon {
  width: 40px !important;
  height: 40px !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  padding: 6px !important;
  border: none !important;
  box-shadow: none !important;
}

#myPageView .booking-card-compact .booking-card-icon {
  width: 36px !important;
  height: 36px !important;
  background: #eee !important;
  border-radius: 8px !important;
  padding: 6px !important;
  border: none !important;
  box-shadow: none !important;
}

#myPageView .booking-card-icon svg {
  width: 100% !important;
  height: 100% !important;
}

#myPageView .booking-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#myPageView .booking-card-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-shadow: none !important;
  padding: 0 !important;
}

#myPageView .booking-card-half .booking-card-title {
  font-size: 0.92rem !important;
}

#myPageView .booking-card-en {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #999 !important;
  text-transform: uppercase !important;
}

#myPageView .booking-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 6px !important;
}

#myPageView .booking-card-half .booking-card-meta {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  margin-top: 4px !important;
}

#myPageView .booking-card-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  color: #666 !important;
}

#myPageView .booking-card-badge {
  position: absolute !important;
  top: -1px !important;
  right: 12px !important;
  background: var(--tactical-yellow, #fec700) !important;
  color: var(--tactical-ink, #383832) !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px 4px !important;
  border-radius: 0 0 4px 4px !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

#myPageView .booking-card-arrow {
  display: flex !important;
  align-items: center !important;
  color: #ccc !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Step indicators: hide in new design - header shows step info */
#myPageView #bookingStepIndicators {
  display: none !important;
}

/* Selected context bar cleanup */
#myPageView .booking-selected-context {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin: 0 16px !important;
}

/* Booking form background */
#myPageView .booking-wizard-module {
  background: #f7f7f7 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#myPageView .booking-form-stack {
  gap: 0 !important;
  background: #f7f7f7 !important;
}

#myPageView .booking-step-panel {
  background: #f7f7f7 !important;
  padding: 0 !important;
}

#myPageView .booking-wizard-module {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #f7f7f7 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#myPageView .booking-wizard-module .booking-form-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Hide old booking page header and tabs when wizard is active */
#myPageView .booking-route-page .mypage-route-head {
  display: none !important;
}

#myPageView .booking-view-switch {
  display: none !important;
}

/* ==========================================================================
   Unified Design v3 — Full LIFF consistency overhaul
   Applies clean modern design across ALL screens and steps.
   ========================================================================== */

/* --- Reset Tactical borders/shadows on booking elements --- */
#myPageView .booking-selected-context,
#myPageView .booking-option-visual-card,
#myPageView .booking-time-slot,
#myPageView .booking-slot-picker,
#myPageView .booking-option-fields,
#myPageView .booking-option-toggle-btn,
#myPageView .booking-history-toolbar,
#myPageView .booking-optional-details,
#myPageView .booking-submit-preview,
#myPageView .booking-choice-field,
#myPageView .booking-vehicle-preset,
#myPageView .booking-history > li {
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* --- Step 2: Selected context card --- */
#myPageView .booking-selected-context {
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #fffdf5 0%, #fff8e0 100%) !important;
  border: 1.5px solid #e8d080 !important;
  border-radius: 10px !important;
}

#myPageView .booking-selected-context-kicker {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #c08a00 !important;
  text-transform: uppercase !important;
}

#myPageView .booking-selected-context strong {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-selected-context small {
  font-size: 0.76rem !important;
  color: #999 !important;
}

/* --- Step 2: Option accordion & toggle --- */
#myPageView .booking-option-toggle-btn {
  min-height: 52px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--tactical-ink, #383832) !important;
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#myPageView .booking-option-toggle-btn:hover {
  background: #fafafa !important;
}

#myPageView .booking-option-toggle-btn-state {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #999 !important;
}

#myPageView .booking-option-fields {
  padding: 16px !important;
  background: #fafafa !important;
  border: 1.5px solid #e8e8e8 !important;
}

#myPageView .booking-option-fields-head strong {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-option-fields-head small {
  font-size: 0.76rem !important;
  color: #999 !important;
}

/* --- Step 2-4: Action buttons (Unified) --- */
#myPageView .booking-step-actions {
  padding: 0 !important;
  gap: 10px !important;
}

#myPageView .booking-step-next-btn,
#myPageView .booking-submit-btn {
  flex: 1 !important;
  min-height: 52px !important;
  border: 2px solid var(--tactical-yellow, #fec700) !important;
  border-radius: 10px !important;
  background: var(--tactical-yellow, #fec700) !important;
  color: var(--tactical-ink, #383832) !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}

#myPageView .booking-step-next-btn:hover,
#myPageView .booking-submit-btn:hover {
  background: #f0bb00 !important;
  border-color: #f0bb00 !important;
}

#myPageView .booking-step-next-btn:active,
#myPageView .booking-submit-btn:active {
  background: #e0af00 !important;
  border-color: #e0af00 !important;
  transform: none !important;
  box-shadow: none !important;
}

#myPageView .booking-step-back-btn,
#myPageView .mypage-back-btn {
  min-height: 48px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--tactical-ink, #383832) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background 0.15s !important;
}

#myPageView .booking-step-back-btn:hover,
#myPageView .mypage-back-btn:hover {
  background: #f5f5f5 !important;
}

/* --- Step 3: Calendar & Time Picker --- */
#myPageView .booking-slot-picker {
  gap: 16px !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
}

#myPageView .booking-slot-picker-head {
  align-items: center !important;
}

#myPageView .booking-slot-picker-title strong {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-slot-picker-title small {
  font-size: 0.76rem !important;
  color: #999 !important;
}

#myPageView .booking-slot-nav-btn {
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1.5px solid #e8d080 !important;
  border-radius: 8px !important;
  background: #fffdf5 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-slot-nav-btn:hover {
  background: #fff8e0 !important;
}

#myPageView .booking-calendar-board {
  padding: 12px !important;
  border: 1px solid #f0e8d0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#myPageView .booking-time-selector-kicker {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #c08a00 !important;
  text-transform: uppercase !important;
}

#myPageView .booking-time-slot {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}

#myPageView .booking-time-slot:hover {
  border-color: #ccc !important;
  background: #fafafa !important;
}

#myPageView .booking-time-slot.active,
#myPageView .booking-time-slot.is-selected {
  border-color: var(--tactical-yellow, #fec700) !important;
  background: #fffbeb !important;
  box-shadow: 0 0 0 1.5px rgba(254, 199, 0, 0.2) !important;
}

#myPageView .booking-time-slot.is-disabled,
#myPageView .booking-time-slot.is-full,
#myPageView .booking-time-slot.is-closed,
#myPageView .booking-time-slot.is-past {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

#myPageView .booking-time-slot-time {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-family: inherit !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-time-slot-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.6rem !important;
  padding: 0 8px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  background: #f7f7f7 !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  color: #666 !important;
  box-shadow: none !important;
}

#myPageView .booking-time-slot.is-selected .booking-time-slot-badge {
  border-color: #f0d880 !important;
  background: #fff8e8 !important;
  color: #e8a000 !important;
}

#myPageView .booking-time-slot-symbol {
  display: grid !important;
  place-items: center !important;
  width: 1.6rem !important;
  height: 1.6rem !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 50% !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: transparent !important;
  background: #fff !important;
  transition: all 0.15s !important;
}

#myPageView .booking-time-slot.is-selected .booking-time-slot-symbol {
  border-color: var(--tactical-yellow, #fec700) !important;
  background: var(--tactical-yellow, #fec700) !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-time-slot-arrow {
  display: none !important;
}

/* --- Step 4: Confirmation --- */
#myPageView .booking-choice-field {
  padding: 16px !important;
  background: #fff !important;
}

#myPageView .booking-choice-head strong {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-field {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #666 !important;
}

#myPageView .booking-field input,
#myPageView .booking-field select,
#myPageView .booking-field textarea {
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.92rem !important;
  padding: 10px 12px !important;
}

#myPageView .booking-field input:focus,
#myPageView .booking-field select:focus,
#myPageView .booking-field textarea:focus {
  border-color: var(--tactical-yellow, #fec700) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(254, 199, 0, 0.2) !important;
}

#myPageView .booking-vehicle-preset {
  padding: 14px 16px !important;
  background: #fafafa !important;
  border: 1.5px solid #e8e8e8 !important;
}

#myPageView .booking-vehicle-preset-kicker {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #999 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

#myPageView .booking-submit-preview {
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
}

#myPageView .booking-submit-preview-item {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0e8d0 !important;
}

#myPageView .booking-submit-preview-item:last-child {
  border-bottom: 0 !important;
}

#myPageView .booking-submit-preview-item span:first-child {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #c08a00 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#myPageView .booking-submit-preview-item strong {
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-optional-details {
  background: #fafafa !important;
  border: 1.5px solid #e8e8e8 !important;
}

#myPageView .booking-optional-details summary {
  padding: 14px 16px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-field-warning,
#myPageView .booking-confirmation-note {
  font-size: 0.74rem !important;
  color: #999 !important;
  line-height: 1.6 !important;
  padding: 0 16px !important;
}

#myPageView .booking-form-footer {
  gap: 14px !important;
  padding: 0 !important;
}

/* --- Step indicators: Clean pill style --- */
#myPageView #bookingStepIndicators {
  display: none !important;
}

/* --- "ページメニューへ戻る" button --- */
#myPageView .mypage-route-footer {
  padding: 8px 16px 0 !important;
}

#myPageView .mypage-back-btn {
  width: 100% !important;
}

/* --- Bottom Tab Bar: Clean modern --- */
.bottom-tabbar.bottom-actionbar {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid #e0e0e0 !important;
  background: #fff !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
}

.bottom-tabbar .bottom-action-btn {
  min-height: 48px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.bottom-tabbar .bottom-action-btn.secondary {
  border: 1.5px solid #e8d080 !important;
  background: #fff !important;
  color: var(--tactical-ink, #383832) !important;
}

.bottom-tabbar .bottom-action-btn:not(.secondary) {
  border: none !important;
  background: var(--tactical-yellow, #fec700) !important;
  color: var(--tactical-ink, #383832) !important;
}

/* --- Booking History items --- */
#myPageView .booking-history > li {
  padding: 14px 16px !important;
  background: #fff !important;
}

/* --- MyPage modules: Softer card style --- */
#myPageView .booking-route-panel .calendar-module:not(.booking-wizard-module) {
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* --- Step panels: Consistent padding --- */
#myPageView .booking-step-panel[data-booking-step="2"],
#myPageView .booking-step-panel[data-booking-step="3"],
#myPageView .booking-step-panel[data-booking-step="4"] {
  padding: 16px !important;
  gap: 14px !important;
  display: grid !important;
}

#myPageView .booking-step-panel[data-booking-step="2"][hidden],
#myPageView .booking-step-panel[data-booking-step="3"][hidden],
#myPageView .booking-step-panel[data-booking-step="4"][hidden] {
  display: none !important;
}

/* --- Hidden service select field in step 2 --- */
#myPageView .booking-hidden-select-field {
  display: none !important;
}

/* --- Registration wizard: Match booking wizard style --- */
#myPageView .registration-wizard-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  background: var(--tactical-ink, #383832) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#myPageView .registration-wizard-topbar .booking-step-counter {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: var(--tactical-yellow, #fec700) !important;
  background: var(--tactical-ink, #383832) !important;
  padding: 2px 10px !important;
  border-radius: 3px !important;
  border: none !important;
  box-shadow: none !important;
}

#myPageView .registration-wizard-topbar .booking-step-title {
  color: #fff !important;
  font-size: 1.1rem !important;
}

#myPageView .registration-wizard-topbar .booking-step-lead {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.78rem !important;
}

/* ==========================================================================
   MyPage Redesign v5 — Clean card-based design matching booking flow
   ========================================================================== */

/* --- MyPage Body: Warm white background --- */
body.liff-body {
  background: linear-gradient(180deg, #fffdf5 0%, #fff9e8 50%, #fffdf5 100%) !important;
}

/* --- Member Card: Clean white card --- */
#myPageView .home-member-card-expanded,
#myPageView .home-member-card-collapsed {
  background: #fff !important;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(200, 170, 80, 0.08) !important;
}

#myPageView .home-member-card-qr-wrap {
  background: #fff !important;
  border: 1px solid #f0e8d0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#myPageView .home-member-card-expanded .member-card-header {
  border-bottom: 1px solid #f0e8d0 !important;
}

/* --- Stat Cards: Clean with warm accent --- */
#myPageView .home-stat-card {
  background: #fff !important;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background 0.15s !important;
}

#myPageView .home-stat-card:active {
  background: #fffdf5 !important;
}

#myPageView .home-stat-card .home-stat-value {
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .home-stat-card .home-stat-label {
  color: #c08a00 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* --- Quick Action Buttons: Modal-matching clean style --- */
#myPageView .home-primary-action {
  border-radius: 12px !important;
  box-shadow: none !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  transition: background 0.15s, border-color 0.15s !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.booking {
  background: var(--tactical-yellow, #fec700) !important;
  border: 2px solid var(--tactical-yellow, #fec700) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.booking:active {
  background: #e0af00 !important;
  border-color: #e0af00 !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.coupon {
  background: #fff !important;
  border: 1.5px solid #e8d080 !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.coupon:active {
  background: #fffdf5 !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon {
  width: 44px !important;
  height: 44px !important;
  padding: 9px !important;
  background: rgba(0, 0, 0, 0.12) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.coupon .home-primary-action-icon {
  background: linear-gradient(135deg, #fec700, #f0a000) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-icon img {
  filter: brightness(0) invert(1) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-lead {
  font-size: 0.68rem !important;
  color: #666 !important;
  line-height: 1.4 !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action.booking .home-primary-action-lead {
  color: rgba(56, 56, 50, 0.6) !important;
}

#myPageView:not(.route-detail-mode) .home-primary-action-meta {
  display: none !important;
}

/* --- Secondary Menu Links: Clean card style --- */
#myPageView .mypage-secondary-link {
  background: #fff !important;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  min-height: 64px !important;
  transition: background 0.15s !important;
}

#myPageView .mypage-secondary-link:active {
  background: #fffdf5 !important;
}

#myPageView .mypage-secondary-link .menu-illustration {
  width: 2.4rem !important;
  height: 2.4rem !important;
  background: linear-gradient(135deg, #fec700, #f0a000) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#myPageView .mypage-secondary-link .menu-illustration img {
  filter: brightness(0) invert(1) !important;
}

/* --- Section Labels: Warm tone --- */
#myPageView .mypage-home-section-label {
  color: #8a7a50 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   Booking Option Cards v4 — Screenshot-matching clean card design
   Applies to STEP 2 option choices and all booking action buttons
   ========================================================================== */

/* --- Option Group Container --- */
#myPageView .booking-option-visual-group {
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* --- Group Header (施工メニュー / 1つ選択) --- */
#myPageView .booking-option-visual-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  margin-bottom: 2px !important;
}

#myPageView .booking-option-visual-group-head strong {
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-option-visual-group-head small {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #e8a000 !important;
  background: #fff8e8 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #f0d880 !important;
}

/* --- Option Grid: 1 column (matching screenshot) --- */
#myPageView .booking-option-choice-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

/* --- Individual Option Card --- */
#myPageView .booking-option-choice-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}

#myPageView .booking-option-choice-card:hover {
  background: #fafafa !important;
  border-color: #ccc !important;
}

#myPageView .booking-option-choice-card.is-selected {
  background: #fffbeb !important;
  border-color: var(--tactical-yellow, #fec700) !important;
  box-shadow: 0 0 0 1.5px rgba(254, 199, 0, 0.2) !important;
}

/* --- Option Mark (洗, 他, ＋, etc.) --- */
#myPageView .booking-option-choice-mark {
  display: grid !important;
  place-items: center !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: var(--tactical-ink, #383832) !important;
  flex-shrink: 0 !important;
}

#myPageView .booking-option-choice-card.is-selected .booking-option-choice-mark {
  background: var(--tactical-yellow, #fec700) !important;
  border-color: #d4a500 !important;
  color: var(--tactical-ink, #383832) !important;
}

/* --- Option Text --- */
#myPageView .booking-option-choice-copy {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#myPageView .booking-option-choice-copy strong {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--tactical-ink, #383832) !important;
}

#myPageView .booking-option-choice-copy small {
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #999 !important;
  text-transform: none !important;
}

/* --- Checkmark --- */
#myPageView .booking-option-choice-check {
  display: grid !important;
  place-items: center !important;
  width: 1.4rem !important;
  min-height: 1.4rem !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  color: var(--tactical-yellow, #fec700) !important;
}

/* --- Multi-select group styling --- */
#myPageView .booking-option-visual-group.is-multi-select-group {
  border-color: #90caf9 !important;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%) !important;
}

#myPageView .is-multi-select-group .booking-option-visual-group-head small {
  color: #1565c0 !important;
  background: #e3f2fd !important;
  border: 1px solid #90caf9 !important;
}

#myPageView .booking-option-choice-card.is-multi .booking-option-choice-check {
  font-size: 1.1rem !important;
}

#myPageView .multi-check-icon {
  font-size: 1.1rem;
  line-height: 1;
}

#myPageView .multi-check-icon.unchecked {
  color: #bbb !important;
}

#myPageView .booking-option-choice-card.is-multi.is-selected .multi-check-icon {
  color: #1565c0 !important;
}

#myPageView .booking-option-choice-card.is-multi.is-selected {
  background: #e3f2fd !important;
  border-color: #1565c0 !important;
  box-shadow: 0 0 0 1.5px rgba(21, 101, 192, 0.2) !important;
}

#myPageView .booking-option-choice-card.is-multi.is-selected .booking-option-choice-mark {
  background: #1565c0 !important;
  border-color: #0d47a1 !important;
  color: #fff !important;
}

/* --- その他 free text input --- */
#myPageView .booking-option-visual-other {
  display: grid !important;
  gap: 6px !important;
  padding: 0 2px !important;
}

#myPageView .booking-option-visual-other span {
  font-family: inherit !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #666 !important;
  text-transform: none !important;
}

#myPageView .booking-option-visual-other input {
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  font-size: 0.92rem !important;
}

#myPageView .booking-option-visual-other input:focus {
  border-color: var(--tactical-yellow, #fec700) !important;
  box-shadow: 0 0 0 2px rgba(254, 199, 0, 0.15) !important;
  outline: none !important;
}

/* --- Toggle (残りN件) --- */
#myPageView .booking-option-choice-toggle {
  display: grid !important;
  justify-items: center !important;
  margin-top: 2px !important;
}

#myPageView .booking-option-choice-toggle-btn {
  width: auto !important;
  min-width: 10rem !important;
  min-height: 2.2rem !important;
  padding: 0 14px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #666 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* --- Option Accordion Toggle (main) --- */
#myPageView .booking-option-toggle {
  padding: 0 !important;
}

#myPageView .booking-option-toggle-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 52px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: var(--tactical-ink, #383832) !important;
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.15s, background 0.15s !important;
}

#myPageView .booking-option-toggle-btn:hover {
  background: #fafafa !important;
  border-color: #ccc !important;
}

#myPageView .booking-option-toggle-btn[aria-expanded="true"] {
  border-color: var(--tactical-yellow, #fec700) !important;
  background: #fffbeb !important;
}

#myPageView .booking-option-toggle-btn-state {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 3.6rem !important;
  min-height: 1.8rem !important;
  padding: 0 10px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #666 !important;
}

/* --- Option Fields container --- */
#myPageView .booking-option-fields {
  padding: 16px !important;
  background: #f9f9f9 !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* --- Small screen override: keep 1 column at all sizes --- */
@media (max-width: 640px) {
  #myPageView .booking-option-choice-grid {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  #myPageView .booking-option-choice-card {
    width: 100% !important;
    min-height: 60px !important;
    padding: 10px 12px !important;
  }
}

/* ==========================================================================
   Modal & Overlay Redesign v5 — Unified clean design for all modals
   ========================================================================== */

/* --- Base overlay: Consistent backdrop --- */
.coupon-activate-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* --- Base card: All modals --- */
.coupon-activate-card,
.booking-submit-card,
.booking-cancel-card,
.booking-datetime-error-card,
.booking-success-card,
.account-delete-card {
  width: min(400px, 90vw) !important;
  border: none !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  padding: 24px 20px 20px !important;
  gap: 14px !important;
}

/* --- Kicker label (small top label) --- */
.coupon-activate-kicker,
.booking-submit-kicker,
.booking-cancel-kicker,
.booking-datetime-error-kicker,
.booking-success-kicker {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #c08a00 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --- Modal title --- */
.coupon-activate-card h3,
.booking-submit-card h3,
.booking-cancel-card h3,
.booking-datetime-error-card h3,
.booking-success-card h3 {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  color: var(--tactical-ink, #383832) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --- Modal description text --- */
.coupon-activate-description,
.booking-submit-description,
.booking-cancel-description,
.booking-datetime-error-description,
.booking-success-lead {
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  color: #666 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* --- Success Badge (checkmark circle) --- */
.booking-success-badge {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, #fec700 0%, #f0a000 100%) !important;
  box-shadow: 0 4px 16px rgba(240, 160, 0, 0.25) !important;
}

.booking-success-badge span {
  font-size: 1.6rem !important;
  color: #fff !important;
}

/* --- Success sparks: Hide for clean design --- */
.booking-success-burst {
  display: none !important;
}

/* --- Summary rows: All modals --- */
.booking-submit-modal-summary,
.booking-cancel-modal-summary,
.booking-success-summary,
.booking-datetime-error-preview {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.booking-submit-modal-row,
.booking-cancel-modal-row,
.booking-success-summary-row {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #f0e8d0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.booking-submit-modal-row:last-child,
.booking-cancel-modal-row:last-child,
.booking-success-summary-row:last-child {
  border-bottom: none !important;
}

.booking-submit-modal-row + .booking-submit-modal-row,
.booking-cancel-modal-row + .booking-cancel-modal-row,
.booking-success-summary-row + .booking-success-summary-row {
  border-top: 1px solid #f0e8d0 !important;
}

.booking-submit-modal-row span,
.booking-cancel-modal-row span,
.booking-success-summary-row span {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #c08a00 !important;
  padding-top: 2px !important;
}

.booking-submit-modal-row strong,
.booking-cancel-modal-row strong,
.booking-success-summary-row strong {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--tactical-ink, #383832) !important;
  word-break: break-word !important;
}

/* --- Modal action buttons: Unified --- */
.coupon-activate-card .actions,
.booking-submit-actions,
.booking-cancel-actions,
.booking-datetime-error-actions,
.booking-success-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.coupon-activate-card .actions button,
.booking-submit-actions button,
.booking-cancel-actions button,
.booking-datetime-error-actions button,
.booking-success-actions button {
  flex: 1 1 0 !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background 0.15s, border-color 0.15s !important;
}

/* Secondary (cancel/close) button in modals */
.coupon-activate-card .actions .secondary,
.booking-submit-actions .secondary,
.booking-cancel-actions .secondary,
.booking-success-actions .secondary {
  background: #fff !important;
  border: 1.5px solid #ddd !important;
  color: var(--tactical-ink, #383832) !important;
}

/* Primary button in modals */
.coupon-activate-card .actions button:not(.secondary):not(.danger),
.booking-submit-actions button:not(.secondary),
.booking-datetime-error-actions button:not(.secondary),
.booking-success-actions button:not(.secondary) {
  background: var(--tactical-yellow, #fec700) !important;
  border: 2px solid var(--tactical-yellow, #fec700) !important;
  color: var(--tactical-ink, #383832) !important;
}

/* Danger button (cancel booking) */
.booking-cancel-actions .danger {
  background: #e53e3e !important;
  border: 2px solid #e53e3e !important;
  color: #fff !important;
}

/* --- Booking history cancel button --- */
#myPageView .booking-history .booking-cancel-trigger,
#myPageView .booking-history button[class*="cancel"] {
  border: 1.5px solid #ddd !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--tactical-ink, #383832) !important;
  min-height: 44px !important;
}

/* --- Booking history list items --- */
#myPageView .booking-history > li {
  background: #fff !important;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(200, 170, 80, 0.06) !important;
  margin-bottom: 10px !important;
}

/* --- Coupon preview in modal --- */
.coupon-activate-preview {
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  background: #fffdf5 !important;
  padding: 12px !important;
}

/* ==========================================================================
   Admin UI/UX Redesign (2026-04-06)
   - Header: global search + quick actions
   - Sidebar: 6-group navigation (from 4)
   - Mobile: bottom navigation bar
   ========================================================================== */

/* --- Header: Top bar with search & quick actions --- */
.admin-header-top {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.admin-global-search {
  width: 100%;
  max-width: 420px;
}

.admin-global-search input {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--tactical-ink, #383832);
  border-radius: var(--tactical-radius, 4px);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-global-search input:focus {
  outline: none;
  border-color: var(--tactical-yellow, #fec700);
  box-shadow: 0 0 0 3px rgba(254, 199, 0, 0.28), inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.admin-global-search input::placeholder {
  color: var(--tactical-muted, #6a6657);
  font-weight: 500;
}

.admin-quick-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.quick-action-btn {
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- Sidebar: nav group count badge --- */
.admin-nav-group[data-nav-group] {
  position: relative;
}

.admin-nav-group .admin-nav-group-label {
  cursor: default;
  user-select: none;
}

/* --- Mobile bottom navigation --- */
.admin-bottom-nav {
  display: none;
}

@media (max-width: 640px) {
  .admin-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%);
    border-top: 2px solid var(--tactical-ink, #383832);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.1);
  }

  .admin-bottom-nav[hidden] {
    display: none !important;
  }

  .bottom-nav-item {
    display: grid !important;
    place-items: center;
    gap: 2px;
    padding: 6px 4px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tactical-muted, #6a6657);
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    min-height: auto !important;
    transition: color 0.15s;
  }

  .bottom-nav-item:hover,
  .bottom-nav-item:active {
    background: rgba(254, 199, 0, 0.12) !important;
  }

  .bottom-nav-item.active {
    color: var(--tactical-ink, #383832) !important;
    font-weight: 900;
  }

  .bottom-nav-item.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--tactical-yellow, #fec700);
    border-radius: 0 0 3px 3px;
  }

  .bottom-nav-icon {
    font-size: 1.2rem;
    line-height: 1;
  }

  .bottom-nav-label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .bottom-nav-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .bottom-nav-badge[hidden] {
    display: none !important;
  }

  /* Adjust body padding when bottom nav is visible */
  body:not(.liff-body) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  /* Header: stack vertically on mobile */
  .admin-header-top {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .admin-global-search {
    max-width: none;
  }

  .admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .quick-action-btn {
    width: 100%;
  }
}

/* --- Tablet: adjust header --- */
@media (max-width: 1120px) and (min-width: 641px) {
  .admin-header-top {
    grid-template-columns: auto minmax(140px, 1fr) auto;
    gap: 10px;
  }

  .admin-global-search {
    max-width: 320px;
  }
}

/* --- Global search results dropdown --- */
.admin-global-search {
  position: relative;
}

.global-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
  z-index: 100;
  border: 2px solid var(--tactical-ink, #383832);
  border-radius: var(--tactical-radius, 4px);
  background: #fff;
  box-shadow: var(--tactical-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92));
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-search-results.is-open {
  display: block;
}

.global-search-results li {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-search-results li:hover,
.global-search-results li.is-focused {
  background: rgba(254, 199, 0, 0.14);
}

.global-search-results li:last-child {
  border-bottom: 0;
}

.global-search-results .search-result-type {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--tactical-paper-strong, #fff6d8);
  color: var(--tactical-yellow-deep, #7d6100);
  white-space: nowrap;
}

.global-search-results mark {
  background: rgba(254, 199, 0, 0.36);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ==========================================================================
   Admin Test Send Panel (2026-04-07)
   ========================================================================== */

.admin-test-send-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px dashed var(--tactical-ink, #383832);
}

.admin-test-send-panel h3 {
  margin: 0;
  font-size: 1.02rem;
}

.admin-test-send-grid {
  display: grid;
  gap: 16px;
}

.admin-test-send-group {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 2px solid var(--tactical-ink, #383832);
  border-radius: var(--tactical-radius, 4px);
  background: linear-gradient(180deg, #fffef8 0%, #fffbee 100%);
  box-shadow: var(--tactical-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84));
}

.admin-test-send-group h4 {
  margin: 0;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--tactical-yellow-deep, #7d6100);
}

.admin-test-send-group > .small-help {
  margin: 0 0 4px;
}

.admin-test-send-buttons {
  display: grid;
  gap: 8px;
}

.admin-test-send-btn {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px !important;
  width: 100%;
  min-height: 56px !important;
  padding: 10px 14px !important;
  text-align: left !important;
  border: 2px solid var(--tactical-ink, #383832) !important;
  transition: transform 0.1s, box-shadow 0.1s;
}

.admin-test-send-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(56, 56, 50, 0.92) !important;
}

.admin-test-send-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84) !important;
}

.admin-test-send-btn.is-sending {
  opacity: 0.6;
  pointer-events: none;
}

.admin-test-send-icon {
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--tactical-ink, #383832);
  border-radius: var(--tactical-radius, 4px);
  background: #fff;
  flex-shrink: 0;
}

.admin-test-send-copy {
  display: grid;
  gap: 2px;
}

.admin-test-send-copy strong {
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
}

.admin-test-send-copy small {
  font-size: 0.72rem;
  color: var(--tactical-muted, #6a6657);
  line-height: 1.4;
}

@media (min-width: 640px) {
  .admin-test-send-buttons {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* ==========================================================================
   LIFF Design Unification (2026-04-07)
   Resolves conflicts between 4 overlapping style layers:
   1. Base styles (round corners, #f5b500, #111)
   2. Tactical Industrialism (sharp 4px, #fec700, #383832)
   3. Zenith theme (8-10px, cream gradients)
   4. Modal Redesign v5 (16px, white, borderless)

   Unified direction: Zenith (warm paper/cream, 8px radius,
   2px solid ink border, hard offset shadows, tactical yellow accent)
   ========================================================================== */

/* --- 1. Loading Screen: Align to zenith palette --- */
.liff-initial-loading {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.18), transparent 35%),
    radial-gradient(circle at 80% 100%, rgba(56, 56, 50, 0.06), transparent 45%),
    var(--zenith-yellow, #fec700) !important;
}

.liff-initial-loading-card {
  width: min(340px, 92vw) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7dc 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)) !important;
  padding: 24px 16px 20px !important;
}

.liff-initial-spinner {
  border-color: var(--zenith-ink, #383832) !important;
  border-right-color: transparent !important;
  border-bottom-color: var(--zenith-yellow, #fec700) !important;
}

.liff-initial-loading-text {
  color: var(--zenith-ink, #383832) !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* --- 2. LIFF body & container: Consistent base --- */
.liff-body,
.liff-body input,
.liff-body textarea,
.liff-body select,
.liff-body button {
  font-family: "Plus Jakarta Sans", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.liff-body h1,
.liff-body h2,
.liff-body h3,
.liff-body h4,
.liff-body h5,
.liff-body h6 {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.liff-body .card,
.liff-body .liff-view-panel {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, var(--zenith-paper, #fffdf2) 0%, #fffdf8 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)) !important;
}

.liff-body button {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  color: var(--zenith-ink, #383832) !important;
  font-weight: 900 !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.liff-body button:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

.liff-body button.secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  color: var(--zenith-ink, #383832) !important;
}

.liff-body button.danger {
  background: linear-gradient(180deg, #ffd7bd 0%, #f3ab84 100%) !important;
  color: var(--zenith-ink, #383832) !important;
}

.liff-body button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- 3. Entry guide: Zenith aligned --- */
.liff-entry-guide {
  padding: 22px 18px !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff8e3 100%) !important;
}

.liff-entry-guide-kicker {
  color: var(--zenith-yellow-deep, #7d6100) !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.liff-entry-guide h2 {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif !important;
  color: var(--zenith-ink, #383832) !important;
}

.liff-entry-guide .small-help {
  color: var(--zenith-ink-soft, #6a6657) !important;
}

/* --- 4. Registration: Mode toggle & chips --- */
.registration-mode-toggle {
  border-radius: 6px !important;
  background: linear-gradient(180deg, #fff8e2 0%, #fff3cd 100%) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  padding: 4px !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
}

.registration-mode-chip {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--zenith-ink-soft, #6a6657) !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.registration-mode-chip.active {
  background: var(--zenith-ink, #383832) !important;
  color: #fff8d4 !important;
  box-shadow: none !important;
}

/* --- 5. Registration: Fix var(--muted) to zenith-ink-soft --- */
.registration-help-banner span,
.registration-help-banner p,
.registration-section-heading p,
.booking-selected-context small,
.registration-ocr-checklist li,
.registration-ocr-hero-copy p {
  color: var(--zenith-ink-soft, #6a6657) !important;
}

.registration-help-banner {
  border-radius: 8px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
}

/* --- 6. Close dock: Match zenith --- */
.liff-close-dock {
  width: min(420px, calc(100vw - 28px)) !important;
}

.liff-close-btn-wide {
  border-radius: var(--zenith-radius, 4px) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)) !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* --- 7. Bottom bar: Zenith-unified --- */
.bottom-tabbar.bottom-actionbar {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(63, 64, 54, 0.97) 0%, rgba(46, 47, 40, 0.99) 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)) !important;
  padding: 6px !important;
}

.bottom-action-btn {
  border-radius: var(--zenith-radius, 4px) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
}

.bottom-action-btn.secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff6dc 100%) !important;
}

.bottom-action-btn:not(.secondary) {
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
}

.bottom-action-label {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* --- 8. Guide overlays: Consistent warm backdrop --- */
.guide-overlay {
  background: rgba(47, 48, 40, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.guide-card,
.camera-guide-card,
.checkin-guide-card,
.rank-guide-card {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff9e7 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)) !important;
  padding: 16px !important;
}

.guide-card h3 {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif !important;
  color: var(--zenith-ink, #383832) !important;
}

.checkin-guide-kicker {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--zenith-yellow-deep, #7d6100) !important;
}

.checkin-guide-badge {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #fff8d6 0%, #ffe28d 100%) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
  font-size: 0.72rem !important;
  color: var(--zenith-ink, #383832) !important;
}

.guide-frame,
.checkin-guide-note {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%) !important;
  padding: 10px 12px !important;
}

.guide-list li,
.checkin-guide-list li,
.rank-guide-list li {
  color: var(--zenith-ink-soft, #6a6657) !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
}

/* --- 9. Modals: Unified to zenith design language (overrides v5) --- */
.coupon-activate-overlay {
  background: rgba(47, 48, 40, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.coupon-activate-card,
.booking-submit-card,
.booking-cancel-card,
.booking-datetime-error-card,
.booking-success-card,
.account-delete-card {
  width: min(400px, 90vw) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffef9 0%, #fff9e7 100%) !important;
  box-shadow: var(--zenith-shadow, 4px 4px 0 rgba(56, 56, 50, 0.92)) !important;
  padding: 20px 16px 16px !important;
  gap: 12px !important;
}

/* Modal kicker labels */
.coupon-activate-kicker,
.booking-submit-kicker,
.booking-cancel-kicker,
.booking-datetime-error-kicker,
.booking-success-kicker,
.account-delete-kicker {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  color: var(--zenith-yellow-deep, #7d6100) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Modal titles */
.coupon-activate-card h3,
.booking-submit-card h3,
.booking-cancel-card h3,
.booking-datetime-error-card h3,
.booking-success-card h3,
.account-delete-card h3 {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  font-style: normal !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  color: var(--zenith-ink, #383832) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Modal description */
.coupon-activate-description,
.booking-submit-description,
.booking-cancel-description,
.booking-datetime-error-description,
.booking-success-lead {
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  color: var(--zenith-ink-soft, #6a6657) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Modal summary rows */
.booking-submit-modal-summary,
.booking-cancel-modal-summary,
.booking-success-summary,
.booking-datetime-error-preview {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
}

.booking-submit-modal-row,
.booking-cancel-modal-row,
.booking-success-summary-row {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.booking-submit-modal-row + .booking-submit-modal-row,
.booking-cancel-modal-row + .booking-cancel-modal-row,
.booking-success-summary-row + .booking-success-summary-row {
  border-top: 2px dashed rgba(56, 56, 50, 0.14) !important;
}

.booking-submit-modal-row span,
.booking-cancel-modal-row span,
.booking-success-summary-row span {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  color: var(--zenith-yellow-deep, #7d6100) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding-top: 2px !important;
}

.booking-submit-modal-row strong,
.booking-cancel-modal-row strong,
.booking-success-summary-row strong {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  color: var(--zenith-ink, #383832) !important;
  word-break: break-word !important;
}

/* Modal action buttons */
.coupon-activate-card .actions,
.booking-submit-actions,
.booking-cancel-actions,
.booking-datetime-error-actions,
.booking-success-actions,
.account-delete-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.coupon-activate-card .actions button,
.booking-submit-actions button,
.booking-cancel-actions button,
.booking-datetime-error-actions button,
.booking-success-actions button,
.account-delete-actions button {
  flex: 1 1 0 !important;
  min-height: 48px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}

.coupon-activate-card .actions button:active,
.booking-submit-actions button:active,
.booking-cancel-actions button:active,
.booking-datetime-error-actions button:active,
.booking-success-actions button:active,
.account-delete-actions button:active {
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

/* Modal secondary buttons */
.coupon-activate-card .actions .secondary,
.booking-submit-actions .secondary,
.booking-cancel-actions .secondary,
.booking-success-actions .secondary,
.account-delete-actions .secondary {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  color: var(--zenith-ink, #383832) !important;
}

/* Modal primary buttons */
.coupon-activate-card .actions button:not(.secondary):not(.danger),
.booking-submit-actions button:not(.secondary),
.booking-datetime-error-actions button:not(.secondary),
.booking-success-actions button:not(.secondary) {
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  color: var(--zenith-ink, #383832) !important;
}

/* Modal danger buttons */
.booking-cancel-actions .danger,
.account-delete-actions .danger,
.coupon-activate-card .actions .danger {
  background: linear-gradient(180deg, #ffd7bd 0%, #f3ab84 100%) !important;
  color: var(--zenith-ink, #383832) !important;
}

/* Success badge */
.booking-success-badge {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto !important;
  border-radius: var(--zenith-radius, 4px) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
}

.booking-success-badge span {
  font-size: 1.4rem !important;
  color: var(--zenith-ink, #383832) !important;
}

.booking-success-burst {
  display: none !important;
}

/* Coupon preview in modal */
.coupon-activate-preview {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%) !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
  padding: 12px !important;
}

.coupon-activate-preview span {
  color: var(--zenith-yellow-deep, #7d6100) !important;
}

.coupon-activate-rules,
.account-delete-rules {
  color: var(--zenith-ink-soft, #6a6657) !important;
  font-size: 0.8rem !important;
}

/* --- 10. Booking history items: Match zenith --- */
#myPageView .booking-history > li {
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
  margin-bottom: 0 !important;
}

#myPageView .booking-history .booking-cancel-trigger,
#myPageView .booking-history button[class*="cancel"] {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: var(--zenith-ink, #383832) !important;
}

/* --- 11. Rank tier guide in modal: Zenith aligned --- */
.rank-tier-guide {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  list-style: none !important;
}

.rank-tier-guide li {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%) !important;
  box-shadow: none !important;
}

/* --- 12. Camera guide modal: Consistent --- */
.camera-guide-kicker {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--zenith-yellow-deep, #7d6100) !important;
}

.camera-guide-caption {
  color: var(--zenith-ink-soft, #6a6657) !important;
  font-size: 0.78rem !important;
}

.camera-guide-actions button,
.camera-guide-actions-sub button {
  min-height: 48px !important;
}

/* --- 13. Registration view: Step indicators aligned --- */
.registration-step-indicators .booking-step-indicator {
  border: 2px solid transparent !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: transparent !important;
}

.registration-step-indicators .booking-step-indicator.active,
.registration-step-indicators .booking-step-indicator.completed {
  border-color: var(--zenith-ink, #383832) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  box-shadow: 3px 3px 0 0 rgba(56, 56, 50, 0.84) !important;
}

.registration-step-indicators .booking-step-indicator-dot {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: #fff !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
}

.registration-step-indicators .booking-step-indicator.active .booking-step-indicator-dot,
.registration-step-indicators .booking-step-indicator.completed .booking-step-indicator-dot {
  background: var(--zenith-yellow-deep, #7d6100) !important;
  color: #fff !important;
}

.registration-step-indicators .booking-step-indicator-text {
  color: var(--zenith-ink, #383832) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* --- 14. Registration step progress bar: Consistent --- */
.registration-step-progress-shell {
  height: 10px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.registration-step-progress-shell .booking-step-progress-fill {
  background: linear-gradient(90deg, var(--zenith-yellow-deep, #7d6100) 0%, #9b7b09 100%) !important;
}

/* --- 15. Registration OCR hero phone: Zenith aligned --- */
.registration-ocr-hero-phone {
  border-color: var(--zenith-ink, #383832) !important;
}

.registration-ocr-hero-camera {
  border-color: var(--zenith-ink, #383832) !important;
}

/* --- 16. State badge in registration --- */
.registration-badge {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* --- 17. Plate editor / preview: Consistent --- */
.plate-editor,
.plate-preview-card {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
}

/* --- 18. Status badges: Consistent through app --- */
.liff-body .status {
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: #fffef8 !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
}

.liff-body .status.ok {
  background: linear-gradient(180deg, #f0fff5 0%, #e6ffed 100%) !important;
}

.liff-body .status.error {
  background: linear-gradient(180deg, #fff6f0 0%, #ffede2 100%) !important;
}

/* --- 19. Vehicle editor cards: Consistent in profile --- */
#myPageView .vehicle-editor-card,
#myPageView .vehicle-editor-panel,
#myPageView .vehicle-editor-grid {
  border-radius: 8px !important;
}

/* --- 20. All muted text: Use zenith-ink-soft consistently --- */
.liff-body .small-help,
.liff-body .booking-field-help {
  color: var(--zenith-ink-soft, #6a6657) !important;
}

/* --- 21. Registration headline: Remove old green theme --- */
.registration-ocr-headline {
  margin: 0 -14px 0 !important;
  border-bottom: 2px solid var(--zenith-ink, #383832) !important;
  background: linear-gradient(180deg, var(--zenith-ink, #383832) 0%, #2e2f28 100%) !important;
  color: #fff8d4 !important;
  padding: 14px 16px !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

.registration-ocr-headline .registration-badge {
  border: 2px solid rgba(255, 248, 212, 0.4) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  color: var(--zenith-ink, #383832) !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3) !important;
  padding: 4px 10px !important;
}

/* --- 22. Mode chips: Higher specificity to beat .liff-body button --- */
.liff-body .registration-mode-toggle {
  border-radius: 6px !important;
  background: linear-gradient(180deg, #fff8e2 0%, #fff3cd 100%) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  padding: 4px !important;
  box-shadow: var(--zenith-shadow-soft, 3px 3px 0 rgba(56, 56, 50, 0.84)) !important;
}

.liff-body .registration-mode-chip {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--zenith-ink-soft, #6a6657) !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.liff-body .registration-mode-chip.active {
  background: var(--zenith-ink, #383832) !important;
  color: #fff8d4 !important;
  box-shadow: none !important;
}

/* --- 23. Registration choice button: Fix specificity --- */
.liff-body .registration-choice-btn {
  text-align: left !important;
}

.liff-body .registration-choice-btn-primary {
  min-height: 100px !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
}

.liff-body .registration-choice-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: #ffffff !important;
  color: var(--zenith-ink, #383832) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.liff-body .registration-choice-note {
  color: var(--zenith-ink-soft, #6a6657) !important;
}

/* --- 24. Registration sub-action buttons: Consistent size --- */
.liff-body .registration-ocr-subactions button {
  min-height: 44px !important;
}

.liff-body .ghost-link-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--zenith-yellow-deep, #7d6100) !important;
  text-decoration: underline !important;
}

/* --- 25. Step action buttons: Consistent split layout --- */
.liff-body .booking-step-actions-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.liff-body .booking-step-actions-split .secondary {
  min-height: 48px !important;
}

.liff-body .booking-step-actions-split .booking-step-next-btn,
.liff-body .booking-step-actions-split .registration-step-next-btn,
.liff-body .booking-step-actions-split .registration-submit-btn,
.liff-body .booking-step-actions-split .booking-submit-btn {
  min-height: 48px !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
}

/* --- 26. Wizard topbar: Consistent header styling --- */
.liff-body .registration-wizard-topbar,
.liff-body .booking-wizard-topbar {
  border-bottom: 2px solid var(--zenith-ink, #383832) !important;
  background: #ffffff !important;
  padding: 14px 16px !important;
}

.liff-body .booking-step-counter {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 10px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #ffdd58 0%, var(--zenith-yellow, #fec700) 100%) !important;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84) !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--zenith-ink, #383832) !important;
}

/* --- 27. Step indicators: Compact, no wasted whitespace --- */
.registration-step-indicators .booking-step-indicator,
#bookingStepIndicators .booking-step-indicator {
  min-height: 0 !important;
  gap: 4px !important;
  padding: 6px 4px 5px !important;
}

.registration-step-indicators .booking-step-indicator-dot,
#bookingStepIndicators .booking-step-indicator-dot {
  width: 30px !important;
  height: 30px !important;
  font-size: 0.82rem !important;
}

.registration-step-indicators .booking-step-indicator-text,
#bookingStepIndicators .booking-step-indicator-text {
  font-size: 0.62rem !important;
  line-height: 1.15 !important;
}

#bookingStepIndicators .booking-step-indicator-icon {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
}

#bookingStepIndicators .booking-step-indicator-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* --- 28. Remove excessive gaps/margins throughout LIFF --- */
.liff-body .mypage-home-shell {
  gap: 12px !important;
}

.liff-body .mypage-home-stats {
  gap: 6px !important;
}

.liff-body .mypage-primary-actions {
  gap: 8px !important;
}

.liff-body .mypage-menu-grid {
  gap: 8px !important;
}

.liff-body .mypage-route-footer {
  padding-top: 0 !important;
}

.liff-body .mypage-menu-block {
  gap: 8px !important;
}

.liff-body #myPageView .mypage-module {
  padding: 12px !important;
}

/* Compact registration form gaps */
.liff-body .registration-ocr-form {
  gap: 12px !important;
}

.liff-body .registration-ocr-intro {
  gap: 14px !important;
}

.liff-body .registration-step-actions {
  margin-top: 4px !important;
}

/* --- 29. OCR hero card: Proper internal padding --- */
.liff-body .registration-ocr-hero {
  padding: 20px 16px !important;
  gap: 14px !important;
}

.liff-body .registration-ocr-hero-copy {
  gap: 8px !important;
}

.liff-body .registration-ocr-hero-copy strong {
  font-size: 1.08rem !important;
  line-height: 1.35 !important;
}

.liff-body .registration-ocr-hero-copy p {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
}

/* OCR checklist: Proper internal padding */
.liff-body .registration-ocr-checklist {
  padding: 14px 14px 14px 28px !important;
  gap: 6px !important;
}

.liff-body .registration-ocr-checklist li {
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
}

/* OCR sub-actions: Breathing room */
.liff-body .registration-ocr-subactions {
  padding: 12px !important;
  gap: 8px !important;
}

/* --- 30. Empty status: Don't show empty bordered box --- */
.liff-body .status:empty {
  display: none !important;
}

/* --- 31. Back button (ページメニューへ戻る): Zenith consistent --- */
.liff-body #myPageView .mypage-back-btn,
.liff-body .mypage-back-btn {
  width: 100% !important;
  min-height: 48px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: 3px 3px 0 rgba(56, 56, 50, 0.84) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* --- 32. Section head divider: Zenith ink color --- */
.liff-body .section-head {
  border-bottom-color: rgba(56, 56, 50, 0.2) !important;
}

/* --- 33. Profile submit button: Full width --- */
.liff-body #profileSubmitBtn {
  width: 100% !important;
  min-height: 52px !important;
}

/* --- 34. Close dock: Hide when bottom bar is visible --- */
.liff-body .bottom-tabbar:not([hidden]) ~ .liff-close-dock {
  display: none !important;
}

/* --- 35. Vehicle editor: Flatten nested borders --- */
/* Profile-block-car → borderless wrapper, content flows without outer frame */
.liff-body #myPageView .profile-form-paged .profile-block.profile-block-car {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 10px !important;
}

/* Panel → transparent layout container, no outer frame */
.liff-body #myPageView .profile-form-paged .vehicle-editor-panel,
.liff-body #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-panel {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 14px !important;
}

/* Card → subtle single frame, clean white */
.liff-body #myPageView .profile-form-paged .vehicle-editor-card,
.liff-body #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-card {
  border: 1px solid rgba(56, 56, 50, 0.13) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(56, 56, 50, 0.06) !important;
  padding: 14px !important;
  gap: 12px !important;
}

/* Grid → no border, transparent pass-through */
.liff-body #myPageView .profile-form-paged .vehicle-editor-grid,
.liff-body #myPageView .profile-form-paged .profile-block.profile-block-car .vehicle-editor-grid {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 10px 10px !important;
}

/* Date fields (oil-change & inspection) → full width, no wrap */
.liff-body .vehicle-editor-grid label:has(input[type="date"]),
.liff-body #myPageView .vehicle-editor-grid label:has(input[type="date"]) {
  grid-column: 1 / -1 !important;
  white-space: nowrap !important;
}

/* Plate block → tighter gap */
.liff-body #myPageView .vehicle-editor-plate-block {
  gap: 8px !important;
}

/* Plate preview → less vertical spacing */
.liff-body #myPageView .vehicle-editor-plate-preview {
  padding: 2px 0 0 !important;
}

/* jp-plate-card inside vehicle editor → thinner border, no shadow */
.liff-body #myPageView .vehicle-editor-plate-preview .jp-plate-card {
  border-width: 1.5px !important;
  border-color: #999 !important;
  box-shadow: none !important;
}

/* Plate inner boxes → thinner borders */
.liff-body #myPageView .vehicle-editor-plate-preview .jp-plate-top-box,
.liff-body #myPageView .vehicle-editor-plate-preview .jp-plate-bottom-box {
  border-width: 1.5px !important;
  border-color: #d0d0d0 !important;
}

/* Plate grid inputs → compact */
.liff-body #myPageView .vehicle-editor-plate-grid {
  gap: 8px !important;
}

/* Card heading → tighter */
.liff-body #myPageView .vehicle-editor-card-head {
  gap: 8px !important;
}

/* Vehicle list → controlled spacing between cards */
.liff-body #myPageView .profile-form-paged .vehicle-editor-list {
  gap: 12px !important;
}

/* Section head → compact */
.liff-body #myPageView .vehicle-editor-section-head {
  gap: 8px !important;
  padding: 2px 0 0 !important;
}

/* Primary badge → zenith consistent */
.liff-body #myPageView .vehicle-editor-primary-badge {
  border: 1.5px solid var(--zenith-ink, #383832) !important;
  background: var(--zenith-accent, #fec700) !important;
  font-size: 0.72rem !important;
  min-height: 22px !important;
  padding: 1px 8px !important;
}

/* Card note → softer color */
.liff-body #myPageView .vehicle-editor-card-note {
  color: var(--zenith-ink-soft, #6a6657) !important;
  font-size: 0.76rem !important;
}

/* --- 36. Rank progress panel: Light zenith (was dark) --- */
.liff-body #myPageView .point-rank-progress-panel {
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%) !important;
  color: var(--zenith-ink, #383832) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 8px !important;
  box-shadow: 3px 3px 0 rgba(56, 56, 50, 0.84) !important;
}

.liff-body #myPageView .point-rank-progress-panel .meta-label,
.liff-body #myPageView .point-rank-progress-panel #memberTierValue,
.liff-body #myPageView .point-rank-progress-panel #rankProgressText {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body #myPageView .point-rank-progress-panel .point-rank-progress-summary-copy strong {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body #myPageView .point-rank-progress-panel .point-rank-progress-summary {
  border-bottom: 2px solid rgba(56, 56, 50, 0.15) !important;
}

.liff-body #myPageView .point-rank-progress-panel .point-rank-progress-copy {
  color: var(--zenith-ink-soft, #6a6657) !important;
}

.liff-body #myPageView .point-rank-progress-panel .point-progress-track,
.liff-body #myPageView .point-rank-progress-panel .point-progress-rail,
.liff-body #myPageView .point-rank-progress-panel .point-progress-bar,
.liff-body #myPageView .point-rank-progress-panel .point-reward-meter-track {
  background-color: rgba(56, 56, 50, 0.1) !important;
}

.liff-body #myPageView .point-rank-progress-panel .point-progress-fill,
.liff-body #myPageView .point-rank-progress-panel .point-reward-meter-fill {
  background: linear-gradient(90deg, #ffdd58 0%, var(--zenith-accent, #fec700) 100%) !important;
}

/* Point history heading → light badge instead of dark */
.liff-body #myPageView .point-history-head h4 {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  color: var(--zenith-ink, #383832) !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
}

/* --- 37. Booking topbar: Light zenith (was dark) --- */
.liff-body #myPageView .booking-wizard-topbar {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  border: none !important;
  border-bottom: 2px solid var(--zenith-ink, #383832) !important;
  box-shadow: none !important;
}

.liff-body #myPageView .booking-wizard-topbar .booking-wizard-heading {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body #myPageView .booking-wizard-nav-btn {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body #myPageView .booking-wizard-nav-btn:active {
  background: rgba(56, 56, 50, 0.1) !important;
}

/* Registration topbar (same dark → light fix) */
.liff-body .registration-wizard-topbar {
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  border: none !important;
  border-bottom: 2px solid var(--zenith-ink, #383832) !important;
}

.liff-body .registration-wizard-topbar .booking-wizard-heading {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body .registration-wizard-topbar .booking-wizard-nav-btn {
  color: var(--zenith-ink, #383832) !important;
}

/* --- 38. Brand title: Larger, bolder --- */
.liff-body #myPageView .mypage-home-brand-title {
  font-size: clamp(1.6rem, 6.5vw, 2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.liff-body #myPageView .mypage-home-brand-sub {
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
}

/* --- 39. Stat card labels: Larger text --- */
.liff-body #myPageView .home-stat-label {
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

.liff-body #myPageView .home-stat-note {
  font-size: 0.72rem !important;
}

/* 店頭用会員証 kicker → larger */
.liff-body #myPageView .home-member-card-kicker,
.liff-body #myPageView .digital-member-card-kicker {
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

/* Primary action buttons → both get same dark border */
.liff-body #myPageView .home-primary-action,
.liff-body #myPageView .home-primary-action.booking,
.liff-body #myPageView .home-primary-action.coupon {
  border: 2px solid var(--zenith-ink, #383832) !important;
  box-shadow: 3px 3px 0 rgba(56, 56, 50, 0.84) !important;
}

/* --- 40. Menu icons: Visible, properly sized --- */
/* Primary action icons (予約する, クーポンを使う) */
.liff-body #myPageView .home-primary-action-icon {
  width: 48px !important;
  height: 48px !important;
  padding: 6px !important;
  border: none !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}

.liff-body #myPageView .home-primary-action-icon img {
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Secondary menu icons (来店ポイント, 利用履歴, 特典, 設定) */
.liff-body #myPageView .mypage-secondary-link .menu-illustration {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 6px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84) !important;
}

.liff-body #myPageView .menu-illustration img {
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Point page illustration icons */
.liff-body #myPageView .point-card-illustration {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 6px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84) !important;
}

.liff-body #myPageView .point-card-illustration img {
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* --- 41. DIN-style font: Barlow Condensed for all English text --- */
.liff-body .mypage-home-brand-title,
.liff-body .mypage-home-brand-sub,
.liff-body .home-stat-label,
.liff-body .home-stat-value,
.liff-body .home-stat-note,
.liff-body .meta-label,
.liff-body .booking-step-counter,
.liff-body .booking-step-kicker,
.liff-body .booking-wizard-heading,
.liff-body .booking-step-title,
.liff-body .home-member-card-code,
.liff-body .home-member-card-code-value,
.liff-body .home-member-card-tier-badge,
.liff-body .mypage-menu-caption,
.liff-body .coupon-activate-kicker,
.liff-body .registration-section-heading h5,
.liff-body .registration-section-heading h3,
.liff-body .point-rank-summary-trigger,
.liff-body .service-history-stat-label,
.liff-body .service-history-stat-value,
.liff-body .home-primary-action-meta-label,
.liff-body .home-primary-action-meta-value {
  font-family: "Barlow Condensed", "Plus Jakarta Sans", "Hiragino Sans", sans-serif !important;
}

/* Brand title: extra bold condensed DIN feel */
.liff-body #myPageView .mypage-home-brand-title {
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* MEMBER PAGE subtitle */
.liff-body #myPageView .mypage-home-brand-sub {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
}

/* Member code (MEM-XXXXXXXX) */
.liff-body .home-member-card-code-value {
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

/* --- 42. Rank panel: balanced layout (text | ?) --- */
.liff-body #myPageView .point-rank-progress-summary {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
}

/* All ? help buttons → unified size and design (global) */
.liff-body button.help-trigger,
.liff-body .help-trigger,
.liff-body #myPageView .point-rank-summary-trigger,
.liff-body #myPageView .checkin-help-trigger,
.liff-body #myPageView button.help-trigger {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff5d8 100%) !important;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--zenith-ink, #383832) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.liff-body button.help-trigger.is-open,
.liff-body .help-trigger.is-open,
.liff-body #myPageView .point-rank-summary-trigger.is-open,
.liff-body #myPageView .checkin-help-trigger.is-open,
.liff-body #myPageView button.help-trigger.is-open {
  background: var(--zenith-ink, #383832) !important;
  color: var(--zenith-accent, #fec700) !important;
  border-color: var(--zenith-ink, #383832) !important;
}

/* --- 43. Point history: heading and button same height --- */
.liff-body #myPageView .point-history-summary {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px !important;
}

/* "開く/閉じる" button → vertically aligned with h4 */
.liff-body #myPageView .point-history-summary::after {
  margin-top: 0 !important;
  align-self: flex-start !important;
  min-height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  font-weight: 800 !important;
}

/* h4 badge and button at same baseline */
.liff-body #myPageView .point-history-head {
  flex: 1 !important;
}

.liff-body #myPageView .point-history-head h4 {
  min-height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ===================================================================
   44-a. Hide "閉じる" close dock (prevents accidental LIFF close)
   =================================================================== */
.liff-close-dock {
  display: none !important;
}

/* ===================================================================
   44. Booking Wizard — Step Progress Redesign
   Visual stepper so the user always knows which step they are on
   =================================================================== */

/* --- Step header area (STEP counter + title + lead + progress bar) --- */
.liff-body #myPageView .booking-wizard-step-header {
  padding: 16px 20px 14px !important;
  background: #fff !important;
  border-bottom: none !important;
  text-align: center !important;
}

.liff-body #myPageView .booking-wizard-step-header .booking-step-counter {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
  background: var(--zenith-ink, #383832) !important;
  padding: 3px 16px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  font-family: "Barlow Condensed", sans-serif !important;
}

.liff-body #myPageView .booking-wizard-step-header .booking-step-title {
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: var(--zenith-ink, #383832) !important;
  margin: 0 0 4px !important;
  font-family: "Barlow Condensed", sans-serif !important;
  letter-spacing: 0.04em !important;
}

.liff-body #myPageView .booking-wizard-step-header .booking-step-lead {
  display: block !important;
  font-size: 0.82rem !important;
  color: #777 !important;
  margin: 0 0 12px !important;
  font-weight: 500 !important;
}

/* Progress bar shell — rounded gold bar */
.liff-body #myPageView .booking-wizard-step-header .booking-step-progress-shell {
  margin-top: 0 !important;
  height: 6px !important;
  background: #e8e4d9 !important;
  border-radius: 6px !important;
  border: none !important;
  overflow: hidden !important;
}

.liff-body #myPageView .booking-wizard-step-header .booking-step-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--zenith-yellow, #fec700) 0%, #e6a800 100%) !important;
  border-radius: 6px !important;
  border-right: none !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Step indicator strip (dot-circle stepper) --- */
.liff-body #myPageView #bookingStepIndicators {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 18px 16px 14px !important;
  background: #fff !important;
  position: relative !important;
  border-bottom: 2px solid var(--zenith-ink, #383832) !important;
}

/* Connecting rail (background track) */
.liff-body #myPageView #bookingStepIndicators::before {
  content: '' !important;
  position: absolute !important;
  top: 36px !important;
  left: calc(100% / 8 + 2px) !important;
  width: calc(100% - 100% / 4 - 4px) !important;
  height: 3px !important;
  background: #ddd8cb !important;
  border-radius: 4px !important;
  z-index: 0 !important;
}

/* Connecting rail (active progress fill) */
.liff-body #myPageView #bookingStepIndicators::after {
  content: '' !important;
  position: absolute !important;
  top: 36px !important;
  left: calc(100% / 8 + 2px) !important;
  width: calc((100% - 100% / 4 - 4px) * var(--booking-step-progress, 0)) !important;
  height: 3px !important;
  background: var(--zenith-yellow, #fec700) !important;
  border-radius: 4px !important;
  z-index: 1 !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Each step indicator — reset card-style back to clean dot layout */
.liff-body #myPageView #bookingStepIndicators .booking-step-indicator {
  min-height: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 2 !important;
  color: #b0aca0 !important;
  cursor: default !important;
}

/* Hide icon containers (use numbered dots instead) */
.liff-body #myPageView #bookingStepIndicators .booking-step-indicator-icon {
  display: none !important;
}

/* Step number dot — default (future) */
.liff-body #myPageView #bookingStepIndicators .booking-step-indicator-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 3px solid #ddd8cb !important;
  background: #fff !important;
  color: #b0aca0 !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  font-family: "Barlow Condensed", sans-serif !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

/* Step label text — default (future) */
.liff-body #myPageView #bookingStepIndicators .booking-step-indicator-text {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: inherit !important;
}

/* --- Active step (current) --- */
.liff-body #myPageView #bookingStepIndicators .booking-step-indicator.active {
  color: var(--zenith-ink, #383832) !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.liff-body #myPageView #bookingStepIndicators .booking-step-indicator.active .booking-step-indicator-dot {
  border-color: var(--zenith-yellow, #fec700) !important;
  background: var(--zenith-yellow, #fec700) !important;
  color: var(--zenith-ink, #383832) !important;
  box-shadow: 0 0 0 5px rgba(254, 199, 0, 0.22) !important;
  transform: scale(1.1) !important;
}

.liff-body #myPageView #bookingStepIndicators .booking-step-indicator.active .booking-step-indicator-text {
  color: var(--zenith-ink, #383832) !important;
  font-weight: 800 !important;
}

/* --- Completed step (past) --- */
.liff-body #myPageView #bookingStepIndicators .booking-step-indicator.completed {
  color: var(--zenith-ink, #383832) !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.liff-body #myPageView #bookingStepIndicators .booking-step-indicator.completed .booking-step-indicator-dot {
  border-color: var(--zenith-yellow, #fec700) !important;
  background: #fff8e0 !important;
  color: var(--zenith-ink, #383832) !important;
  box-shadow: none !important;
}

/* --- Registration wizard stepper (3-step variant) --- */
.liff-body #registrationStepIndicators {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 18px 16px 14px !important;
  background: #fff !important;
  position: relative !important;
  border-bottom: 2px solid var(--zenith-ink, #383832) !important;
}

.liff-body #registrationStepIndicators::before {
  content: '' !important;
  position: absolute !important;
  top: 36px !important;
  left: calc(100% / 6 + 2px) !important;
  width: calc(100% - 100% / 3 - 4px) !important;
  height: 3px !important;
  background: #ddd8cb !important;
  border-radius: 4px !important;
  z-index: 0 !important;
}

.liff-body #registrationStepIndicators::after {
  content: '' !important;
  position: absolute !important;
  top: 36px !important;
  left: calc(100% / 6 + 2px) !important;
  width: calc((100% - 100% / 3 - 4px) * var(--booking-step-progress, 0)) !important;
  height: 3px !important;
  background: var(--zenith-yellow, #fec700) !important;
  border-radius: 4px !important;
  z-index: 1 !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator {
  min-height: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 2 !important;
  color: #b0aca0 !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 3px solid #ddd8cb !important;
  background: #fff !important;
  color: #b0aca0 !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  font-family: "Barlow Condensed", sans-serif !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator-text {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: inherit !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator.active {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator.active .booking-step-indicator-dot {
  border-color: var(--zenith-yellow, #fec700) !important;
  background: var(--zenith-yellow, #fec700) !important;
  color: var(--zenith-ink, #383832) !important;
  box-shadow: 0 0 0 5px rgba(254, 199, 0, 0.22) !important;
  transform: scale(1.1) !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator.active .booking-step-indicator-text {
  color: var(--zenith-ink, #383832) !important;
  font-weight: 800 !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator.completed {
  color: var(--zenith-ink, #383832) !important;
}

.liff-body #registrationStepIndicators .booking-step-indicator.completed .booking-step-indicator-dot {
  border-color: var(--zenith-yellow, #fec700) !important;
  background: #fff8e0 !important;
  color: var(--zenith-ink, #383832) !important;
  box-shadow: none !important;
}

/* ===================================================================
   45. Booking Step 2+ — Layout cleanup
   Status ↔ selected context swap, compact option, button ratio fix
   =================================================================== */

/* --- Hide the status pop-up; let selected-context show the selection --- */
.liff-body #myPageView .booking-flow-status {
  display: none !important;
}

/* --- Selected context: more compact --- */
.liff-body #myPageView .booking-selected-context {
  padding: 10px 14px !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #fff8e0 0%, #fffdf2 100%) !important;
}

.liff-body #myPageView .booking-selected-context-kicker {
  font-size: 0.72rem !important;
  color: var(--zenith-ink, #383832) !important;
  opacity: 0.6 !important;
}

.liff-body #myPageView .booking-selected-context strong {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}

.liff-body #myPageView .booking-selected-context small {
  font-size: 0.76rem !important;
  color: #888 !important;
}

/* --- Option accordion: compact, not oversized --- */
.liff-body #myPageView .booking-option-accordion {
  padding: 10px 12px !important;
  border-width: 2px !important;
  border-color: var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: #fff !important;
  box-shadow: 3px 3px 0 rgba(56, 56, 50, 0.84) !important;
}

.liff-body #myPageView .booking-option-toggle-btn {
  min-height: 44px !important;
  gap: 10px !important;
}

.liff-body #myPageView .booking-option-toggle-btn-label {
  font-size: 0.92rem !important;
  padding-left: 4px !important;
}

.liff-body #myPageView .booking-option-toggle-btn-state {
  min-width: 4rem !important;
  padding: 6px 14px !important;
  border-width: 2px !important;
  border-color: var(--zenith-ink, #383832) !important;
  font-size: 0.82rem !important;
  border-radius: var(--zenith-radius, 4px) !important;
}

/* --- Step action buttons: small back LEFT, large next RIGHT --- */
.liff-body #myPageView .booking-step-actions-split,
.liff-body #myPageView .booking-step-panel .booking-step-actions-split {
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
}

.liff-body #myPageView .booking-step-back-btn,
.liff-body #myPageView .booking-step-panel .booking-step-actions-split .booking-step-back-btn {
  order: 1 !important;
  min-height: 48px !important;
  width: auto !important;
  padding: 8px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: #fff !important;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.84) !important;
  white-space: nowrap !important;
  justify-self: stretch !important;
}

.liff-body #myPageView .booking-step-next-btn,
.liff-body #myPageView .booking-submit-btn,
.liff-body #myPageView .booking-step-panel .booking-step-actions-split .booking-step-next-btn,
.liff-body #myPageView .booking-step-panel .booking-step-actions-split .booking-submit-btn {
  order: 2 !important;
  min-height: 52px !important;
  width: auto !important;
  padding: 10px 20px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  border: 2px solid var(--zenith-ink, #383832) !important;
  border-radius: var(--zenith-radius, 4px) !important;
  background: linear-gradient(180deg, #ffe28d 0%, var(--zenith-yellow, #fec700) 100%) !important;
  box-shadow: 3px 3px 0 rgba(56, 56, 50, 0.84) !important;
  color: var(--zenith-ink, #383832) !important;
}

/* ===================================================================
   46. Coupon page polish
   Badge overlap fix, label sizing, gothic font, red dates, status top
   =================================================================== */

/* --- Fix 利用可能 badge overlapping --- */
.liff-body #myPageView .coupon-top-meta {
  margin: -14px -14px 0 !important;
  gap: 4px !important;
}

.liff-body #myPageView .coupon-corner-badge {
  padding: 8px 18px !important;
  min-height: auto !important;
  font-size: 0.92rem !important;
  border-bottom-left-radius: 12px !important;
  border-top-right-radius: var(--zenith-radius, 4px) !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* --- 有効期限 / 利用回数 labels: larger, gothic --- */
.liff-body #myPageView .coupon-visual-label {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #555 !important;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
}

/* --- 5/7まで / 制限なし: gothic font --- */
.liff-body #myPageView .coupon-visual-card strong {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Barlow Condensed", sans-serif !important;
  font-weight: 900 !important;
}

/* --- Date range / remaining count small text: red --- */
.liff-body #myPageView .coupon-visual-card small {
  color: #c33 !important;
  font-weight: 700 !important;
}

/* --- 「利用可能 N件」status: move to top of coupon module --- */
.liff-body #myPageView .coupon-module {
  display: flex !important;
  flex-direction: column !important;
}

.liff-body #myPageView .coupon-module #couponStatus {
  order: -1 !important;
}

/* =============================================
   Section 47 — Settings: unify profile-block-car card style
   Match 基本情報 (profile-block-user) card appearance
   ============================================= */
.liff-body #myPageView .profile-form-paged .profile-block.profile-block-car {
  border: var(--tactical-line) !important;
  border-radius: var(--tactical-radius) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff7de 100%) !important;
  box-shadow: var(--tactical-shadow-soft) !important;
  padding: 16px !important;
}

/* =============================================
   Section 48 — Booking: hide selected-context card
   ============================================= */
.liff-body #myPageView .booking-selected-context {
  display: none !important;
}

/* =============================================
   Section 49 — Global font unification
   Japanese: Hiragino Kaku Gothic ProN (gothic)
   English/Numbers: Barlow Condensed (DIN-like)
   ============================================= */
.liff-body,
.liff-body #myPageView {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
}

/* Form elements don't inherit font — force it */
.liff-body input,
.liff-body select,
.liff-body textarea,
.liff-body button,
.liff-body optgroup {
  font-family: inherit !important;
}

/* DIN-style: numbers, stats, headings keep Barlow Condensed */
.liff-body .home-stat-value,
.liff-body .point-balance-card .point-card-content strong,
.liff-body .digital-member-card-head strong,
.liff-body .booking-card-badge,
.liff-body .coupon-corner-badge,
.liff-body .mypage-route-title,
.liff-body .booking-step-title,
.liff-body .booking-step-copy h4,
.liff-body .service-history-item-price,
.liff-body .dashboard-panel h4,
.liff-body .home-primary-action-title,
.liff-body .coupon-title,
.liff-body .point-rank-label,
.liff-body .booking-history-date,
.liff-body .booking-history-status {
  font-family: "Barlow Condensed", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
}

/* ============================================================
   NEW FEATURES - 2026-04-08
   来店状況 / 見積書・伝票 / 代車管理 / SMS配信 /
   スタッフ管理 / 社内連絡 / おすすめ整備
   ============================================================ */

/* --- Visit Status (来店状況) --- */
.visit-customer-alert {
  background: linear-gradient(135deg, #fff7e0 0%, #fff3cc 100%);
  border-left: 4px solid #fec700;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.visit-customer-alert .alert-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  margin-right: 0.4em;
  vertical-align: middle;
}
.visit-customer-alert .alert-info {
  display: inline-block;
  background: #3498db;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  margin-right: 0.4em;
  vertical-align: middle;
}
#section-visit-status .table-wrap td:nth-child(6) {
  max-width: 220px;
  font-size: 0.82rem;
}
#section-visit-status .table-wrap tr.visit-row-active {
  background: #fffbe6;
}

/* --- Admin Dialog (shared for new dialogs) --- */
.admin-dialog {
  border: none;
  border-radius: 14px;
  padding: 1.5rem 2rem;
  max-width: 560px;
  width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  background: #fff;
}
.admin-dialog::backdrop {
  background: rgba(0,0,0,0.35);
}
.admin-dialog h3 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
}

/* --- Admin Form Toggle (details/summary for forms) --- */
.admin-form-toggle {
  margin-bottom: 1.5rem;
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  overflow: hidden;
}
.admin-form-toggle summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #faf6ef 0%, #f5efe4 100%);
  transition: background 0.2s;
}
.admin-form-toggle summary:hover {
  background: linear-gradient(135deg, #f5efe4 0%, #efe8d8 100%);
}
.admin-form-toggle[open] summary {
  border-bottom: 1px solid #e8e0d0;
}
.admin-form-toggle .grid,
.admin-form-toggle form {
  padding: 1rem;
}

/* --- Estimates (見積書・伝票) --- */
.estimate-tax-mode-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 2px solid var(--line, #ddd);
  border-radius: var(--tactical-radius, 4px);
  background: #fffef8;
}

.estimate-tax-mode-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--zenith-ink-soft, #555);
  white-space: nowrap;
}

.estimate-tax-mode-option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.estimate-tax-mode-option input[type="radio"] {
  accent-color: var(--tactical-accent, #f5b500);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.estimate-items-table input {
  width: 100%;
  min-width: 0;
}
.estimate-items-table .item-subtotal {
  white-space: nowrap;
  font-weight: 600;
  text-align: right;
  min-width: 5rem;
}
.estimate-totals {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.92rem;
}
.estimate-grand-total {
  font-size: 1.2rem;
  color: #2a7a3a;
}
.remove-estimate-item {
  padding: 0.2rem 0.5rem !important;
  font-size: 0.85rem !important;
  min-width: auto !important;
}
#section-estimates .table-wrap:last-of-type td:nth-child(6) {
  font-weight: 700;
  text-align: right;
}

/* --- Plate Input Group (ナンバープレート入力) --- */
.plate-input-group {
  border: 2px solid var(--line, #ddd);
  border-radius: var(--tactical-radius, 4px);
  padding: 10px 14px 14px;
  margin: 0;
  background: #fffef8;
}

.plate-input-group legend {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0 6px;
  color: var(--zenith-ink-soft, #555);
}

.plate-input-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr 1.2fr;
  gap: 10px;
  align-items: end;
}

.plate-field span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--zenith-ink-soft, #666);
  margin-bottom: 2px;
}

.plate-field input {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.plate-field-kana input {
  font-size: 1.1rem;
}

@media (max-width: 600px) {
  .plate-input-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Loaner Vehicles (代車管理) --- */
.loaner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .loaner-grid {
    grid-template-columns: 1fr;
  }
}
.loaner-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 0.78rem;
}
.loaner-calendar .cal-header {
  background: #f0ece3;
  padding: 0.3rem;
  text-align: center;
  font-weight: 700;
  border-radius: 4px;
}
.loaner-calendar .cal-day {
  background: #faf8f4;
  padding: 0.3rem;
  min-height: 2.5rem;
  border-radius: 4px;
  position: relative;
}
.loaner-calendar .cal-day.today {
  background: #fff7d6;
  box-shadow: inset 0 0 0 2px #fec700;
}
.loaner-calendar .cal-day .cal-date {
  font-weight: 600;
  font-size: 0.72rem;
  color: #888;
}
.loaner-calendar .cal-day .cal-event {
  font-size: 0.65rem;
  background: #e8f5e9;
  border-radius: 3px;
  padding: 0.1rem 0.25rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loaner-calendar .cal-day .cal-event.lent {
  background: #fff3cd;
  color: #856404;
}
.loaner-status-available {
  color: #2a7a3a;
  font-weight: 600;
}
.loaner-status-lent {
  color: #e67e22;
  font-weight: 600;
}
.loaner-status-maintenance {
  color: #e74c3c;
  font-weight: 600;
}

/* --- SMS Delivery (SMS配信) --- */
.sms-char-count {
  color: #888;
  font-size: 0.82rem;
}
.sms-char-count .over-limit {
  color: #e74c3c;
  font-weight: 700;
}
#section-sms-delivery textarea {
  font-size: 0.95rem;
}

/* --- Staff Management (スタッフ管理) --- */
#section-staff-management .table-wrap td:nth-child(3) {
  font-size: 0.82rem;
  color: #666;
}
.staff-intro-preview {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.5;
  max-height: 80px;
  overflow-y: auto;
}
.staff-send-intro-btn {
  font-size: 0.78rem !important;
  padding: 0.2rem 0.6rem !important;
}

/* --- Internal Chat (社内連絡) --- */
.internal-chat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
  min-height: 420px;
  margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .internal-chat-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}
.internal-chat-sidebar {
  border-right: 1px solid #e8e0d0;
  padding-right: 1rem;
}
@media (max-width: 768px) {
  .internal-chat-sidebar {
    border-right: none;
    border-bottom: 1px solid #e8e0d0;
    padding-right: 0;
    padding-bottom: 0.75rem;
  }
}
.internal-chat-thread-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 360px;
  overflow-y: auto;
}
.internal-chat-thread-list li {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.88rem;
}
.internal-chat-thread-list li:hover {
  background: #f5efe4;
}
.internal-chat-thread-list li.active {
  background: #fef6d8;
  box-shadow: inset 3px 0 0 #fec700;
}
.internal-chat-thread-list li .thread-subject {
  font-weight: 600;
  display: block;
}
.internal-chat-thread-list li .thread-meta {
  font-size: 0.75rem;
  color: #999;
}
.internal-chat-thread-list li .thread-priority-urgent {
  color: #e74c3c;
  font-weight: 700;
  font-size: 0.7rem;
}
.internal-chat-main {
  display: flex;
  flex-direction: column;
}
.internal-chat-header {
  padding: 0.5rem 0.75rem;
  background: #faf6ef;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid #e8e0d0;
}
.internal-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;
  min-height: 200px;
  background: #fdfcf9;
  border-left: 1px solid #f0ece3;
  border-right: 1px solid #f0ece3;
}
.internal-chat-messages .chat-msg {
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.internal-chat-messages .chat-msg.sent {
  background: #fef6d8;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.internal-chat-messages .chat-msg.received {
  background: #f0ece3;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.internal-chat-messages .chat-msg .msg-sender {
  font-weight: 700;
  font-size: 0.75rem;
  color: #666;
  display: block;
  margin-bottom: 0.15rem;
}
.internal-chat-messages .chat-msg .msg-time {
  font-size: 0.68rem;
  color: #aaa;
  display: block;
  margin-top: 0.2rem;
  text-align: right;
}
.internal-chat-input-area {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #faf6ef;
  border-radius: 0 0 8px 8px;
  border-top: 1px solid #e8e0d0;
}
.internal-chat-input-area input {
  flex: 1;
}
.internal-chat-input-area button {
  white-space: nowrap;
}

/* --- Recommended Maintenance (おすすめ整備) --- */
.recommended-alerts {
  background: linear-gradient(135deg, #ffeaea 0%, #ffe0e0 100%);
  border-left: 4px solid #e74c3c;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}
.recommended-alerts .alert-item {
  padding: 0.25rem 0;
}
.recommended-alerts .alert-item::before {
  content: "⚠ ";
}
.recommended-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.recommended-item-card {
  background: linear-gradient(135deg, #faf8f4 0%, #f5f0e8 100%);
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  padding: 1rem;
  position: relative;
}
.recommended-item-card.urgent {
  border-color: #e74c3c;
  background: linear-gradient(135deg, #fff8f8 0%, #fff0f0 100%);
}
.recommended-item-card.urgent::after {
  content: "要対応";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: #e74c3c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 999px;
}
.recommended-item-card .rec-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.recommended-item-card .rec-reason {
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.recommended-item-card .rec-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2a7a3a;
}
.recommended-item-card .rec-last-date {
  font-size: 0.75rem;
  color: #999;
  margin-top: 0.3rem;
}
.recommended-item-card .rec-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}
.recommended-item-card .rec-actions button {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}
.recommended-rules-info {
  margin-top: 0.5rem;
}
.recommended-rules-info table {
  font-size: 0.82rem;
}
.recommended-rules-info td, .recommended-rules-info th {
  padding: 0.4rem 0.6rem;
}

/* --- Required field mark --- */
.input-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--zenith-ink-soft, #777);
  margin-top: 2px;
  font-weight: 600;
}

.required-mark {
  font-size: 0.72rem;
  font-weight: 700;
  color: #d32f2f;
  background: #fff0f0;
  border: 1px solid #d32f2f;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* --- Empty state for new sections --- */
.empty-state-msg {
  text-align: center;
  padding: 2rem 1rem;
  color: #aaa;
  font-size: 0.95rem;
}

/* ── Tag Picker ───────────────────────── */
.tag-picker-wrap {
  position: relative;
}
.tag-picker-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.tag-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 6px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 2px solid var(--tactical-ink, #1a1a1a);
  border-radius: 999px;
  background: var(--tactical-yellow, #f5b500);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tactical-ink, #1a1a1a);
  line-height: 1.4;
}
.tag-chip .tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
  color: var(--tactical-ink, #1a1a1a);
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.tag-chip .tag-chip-remove:hover {
  background: rgba(0,0,0,0.3);
}
.tag-picker-input-row {
  position: relative;
}
.tag-picker-input-row input {
  width: 100%;
}
.tag-picker-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  border: 2px solid var(--tactical-ink, #1a1a1a);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 2px;
}
.tag-picker-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.tag-picker-list li {
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag-picker-list li:hover {
  background: #f5f0e0;
}
.tag-picker-list li.tag-picker-item-selected {
  background: #fff7de;
  font-weight: 700;
}
.tag-picker-list li .tag-check {
  width: 16px;
  height: 16px;
  border: 2px solid var(--tactical-ink, #1a1a1a);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.tag-picker-list li.tag-picker-item-selected .tag-check {
  background: var(--tactical-yellow, #f5b500);
}
.tag-picker-create {
  border-top: 1px solid var(--line, #e0e0e0);
  padding: 6px 10px;
}
.tag-picker-create-btn {
  width: 100%;
  padding: 8px;
  border: 2px dashed var(--tactical-ink, #1a1a1a);
  border-radius: 6px;
  background: #fffef8;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--tactical-ink, #1a1a1a);
  text-align: left;
}
.tag-picker-create-btn:hover {
  background: #fff7de;
}
.tag-picker-empty {
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--muted, #888);
  text-align: center;
}

/* ── Customer Form Dialog ───────────────────────── */
.customer-form-dialog {
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  padding: 0;
  width: min(96vw, 720px);
  max-width: min(96vw, 720px);
  max-height: 90vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  overflow: hidden;
  background: #fffef8;
}
.customer-form-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
.customer-form-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 24px 24px;
}
.customer-form-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tactical-ink);
}
.customer-form-dialog-header h3 {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
}
.customer-form-dialog .grid {
  gap: 14px;
}
.customer-form-dialog-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: #fffef8;
  border-top: 1px solid var(--line);
  z-index: 2;
}
@media (max-width: 600px) {
  .customer-form-dialog {
    width: 98vw;
    max-width: 98vw;
  }
  .customer-form-dialog-inner {
    padding: 14px 12px 16px;
  }
}

/* ── Service Record Form Dialog ──────────────────────────── */
.service-record-form-dialog {
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  padding: 0;
  width: min(96vw, 720px);
  max-width: min(96vw, 720px);
  max-height: 90vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  overflow: hidden;
  background: #fffef8;
}
.service-record-form-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
.service-record-form-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 24px 24px;
}
.service-record-form-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tactical-ink);
}
.service-record-form-dialog-header h3 {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
}
.service-record-form-dialog .grid {
  gap: 14px;
}
.service-record-form-dialog-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: #fffef8;
  border-top: 1px solid var(--line);
  z-index: 2;
}
@media (max-width: 600px) {
  .service-record-form-dialog {
    width: 98vw;
    max-width: 98vw;
  }
  .service-record-form-dialog-inner {
    padding: 14px 12px 16px;
  }
}

/* ── Appointment Form Dialog ─────────────────────────────── */
.appointment-form-dialog {
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  padding: 0;
  width: min(96vw, 560px);
  max-width: min(96vw, 560px);
  max-height: 90vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  overflow: hidden;
  background: #fffef8;
}
.appointment-form-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
.appointment-form-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 24px 24px;
}
.appointment-form-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--tactical-ink);
}
.appointment-form-dialog-header h3 {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
}
.appointment-form-dialog .grid {
  gap: 14px;
}
.appointment-form-dialog-actions {
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: #fffef8;
  border-top: 1px solid var(--line);
  z-index: 2;
}
@media (max-width: 600px) {
  .appointment-form-dialog {
    width: 98vw;
    max-width: 98vw;
  }
  .appointment-form-dialog-inner {
    padding: 14px 12px 16px;
  }
}

/* ── Shared Customer Picker Dialog ───────────────────────── */
.shared-customer-picker-dialog {
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  padding: 0;
  width: min(96vw, 960px);
  max-width: min(96vw, 960px);
  max-height: 88vh;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  overflow: hidden;
  background: #fffef8;
}
.shared-customer-picker-dialog::backdrop {
  background: rgba(0,0,0,.45);
}
.shared-customer-picker {
  padding: 1.2rem 1.4rem 1rem;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  overflow-y: auto;
}
.shared-customer-picker .section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.shared-customer-picker h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}
.shared-customer-picker-filters {
  margin-bottom: 0.5rem;
}
.shared-customer-picker .table-wrap {
  overflow-x: auto;
  max-height: 50vh;
  overflow-y: auto;
}
.shared-customer-picker table {
  width: 100%;
  font-size: 0.88rem;
}
.shared-customer-picker thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff7cc;
}
.shared-customer-picker thead th {
  padding: 0.55rem 0.6rem;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--zenith-ink, #1a1a1a);
}
.shared-customer-picker tbody td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e5e0d0;
  vertical-align: middle;
}
.shared-customer-picker tbody tr {
  cursor: pointer;
  transition: background .1s;
}
.shared-customer-picker tbody tr:hover {
  background: #fff3b8;
}
.shared-customer-picker-selected-row {
  background: #fff7cc;
}
.shared-customer-picker .customer-name-cell {
  font-weight: 700;
}
.shared-customer-picker .customer-meta-cell {
  color: var(--muted, #888);
  font-size: 0.82rem;
}
.shared-customer-picker .customer-select-btn {
  min-width: 4rem;
  font-weight: 700;
}
.shared-customer-picker .customer-select-btn.active {
  background: var(--zenith-ink, #1a1a1a);
  color: #fff;
}

.customer-picker-inline input[readonly] {
  cursor: pointer;
  background: #fffef8;
}

@media (max-width: 600px) {
  .shared-customer-picker-dialog {
    width: 98vw;
    max-height: 92vh;
    border-radius: 8px;
  }
  .shared-customer-picker {
    padding: 0.8rem;
  }
  .shared-customer-picker-filters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* ==========================================================================
   Plate Lookup / ナンバー検索（来店受付）
   ========================================================================== */

.plate-lookup-card {
  overflow: visible;
}

.plate-lookup-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* ── Numpad Area ── */
.plate-lookup-pad-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.plate-lookup-display-wrap {
  text-align: center;
}

.plate-lookup-display-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tactical-muted);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.plate-lookup-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: #1a1a1a;
  border-radius: 8px;
  border: 2px solid #333;
}

.plate-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  font-size: 2rem;
  font-weight: 900;
  font-family: 'SF Mono', 'Consolas', monospace;
  color: #00ff88;
  background: #111;
  border-radius: 4px;
  border: 1px solid #333;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.plate-digit.empty {
  color: #444;
  text-shadow: none;
}

.plate-digit.active {
  border-color: #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

.plate-digit-sep {
  font-size: 2rem;
  font-weight: 900;
  color: #555;
  padding: 0 2px;
}

.plate-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.numpad-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 1.5rem;
  font-weight: 800;
  border: 2px solid var(--tactical-ink) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--tactical-ink) !important;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.5) !important;
  transition: all 0.08s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.1;
}

.numpad-key:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
  background: #f0f0e8 !important;
}

.numpad-delete {
  font-size: 0.75rem !important;
  background: var(--tactical-yellow) !important;
  color: var(--tactical-ink) !important;
  font-weight: 700;
}

.numpad-clear {
  font-size: 0.82rem !important;
  background: #d32f2f !important;
  color: #fff !important;
  font-weight: 700;
}

.plate-lookup-actions {
  display: flex;
}

.plate-lookup-search-btn {
  width: 100%;
  height: 52px;
  font-size: 1.2rem;
  font-weight: 800;
  border: 2px solid var(--tactical-ink) !important;
  border-radius: 8px !important;
  background: #2e7d32 !important;
  color: #fff !important;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(56, 56, 50, 0.6) !important;
  transition: all 0.08s ease;
}

.plate-lookup-search-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

.plate-lookup-search-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.plate-lookup-text-search {
  border-top: 1px solid #ddd;
  padding-top: 0.8rem;
}

.plate-lookup-text-search input {
  width: 100%;
}

/* ── Results Area ── */
.plate-lookup-results-area {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.plate-lookup-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.plate-lookup-results-header h3 {
  margin: 0;
  font-size: 1rem;
}

.plate-lookup-results-list {
  flex: 1;
  overflow-y: auto;
  max-height: 520px;
  border: 2px solid var(--tactical-ink);
  border-radius: 8px;
  background: #fff;
}

.plate-lookup-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--tactical-muted);
  font-size: 0.9rem;
}

.plate-result-row {
  display: grid;
  grid-template-columns: 140px 120px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.1s ease;
}

.plate-result-row:last-child {
  border-bottom: none;
}

.plate-result-row:hover {
  background: #fff8e2;
}

.plate-result-row.selected {
  background: #fff3c4;
  border-left: 4px solid var(--tactical-yellow);
}

.plate-result-plate {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tactical-ink);
  white-space: nowrap;
}

.plate-result-car {
  font-size: 0.85rem;
  color: var(--tactical-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plate-result-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.plate-result-name .plate-result-phone {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--tactical-muted);
  margin-left: 0.5rem;
}

.plate-result-action {
  font-size: 0.8rem;
}

.plate-result-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.plate-result-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.7rem;
  background: #f5f5f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: var(--tactical-muted);
}

/* ── Karte (detail) panel ── */
.plate-lookup-karte {
  margin-top: 1.5rem;
  border: 2px solid var(--tactical-ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #fffef8 0%, #fff8e2 100%);
  padding: 1.2rem;
  animation: karteSlideIn 0.25s ease;
}

@keyframes karteSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.plate-karte-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--tactical-ink);
}

.plate-karte-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.plate-karte-content {}

.plate-karte-hero {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.plate-karte-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tactical-ink);
  color: #fec700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  flex-shrink: 0;
  border: 2px solid var(--tactical-ink);
}

.plate-karte-name {
  font-size: 1.4rem;
  font-weight: 900;
}

.plate-karte-sub {
  font-size: 0.85rem;
  color: var(--tactical-muted);
  margin-top: 2px;
}

.plate-karte-sub span {
  margin-right: 1rem;
}

.plate-karte-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.plate-karte-stat {
  background: #fff;
  border: 2px solid var(--tactical-ink);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.3);
}

.plate-karte-stat-icon {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 4px;
}

.plate-karte-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--tactical-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.plate-karte-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.plate-karte-stat.urgent .plate-karte-stat-value {
  color: #d32f2f;
}

.plate-karte-stat.soon .plate-karte-stat-value {
  color: #e65100;
}

.plate-karte-stat.ok .plate-karte-stat-value {
  color: #2e7d32;
}

.plate-karte-vehicles {
  margin-bottom: 1.2rem;
}

.plate-karte-vehicles h4 {
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}

.plate-karte-vehicle-list {
  display: grid;
  gap: 0.5rem;
}

.plate-karte-vehicle-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--tactical-ink);
  border-radius: 8px;
  align-items: center;
}

.plate-karte-vehicle-plate {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-weight: 800;
  font-size: 1rem;
  background: #1a1a1a;
  color: #00ff88;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.plate-karte-vehicle-meta {
  font-size: 0.85rem;
  color: var(--tactical-muted);
}

.plate-karte-vehicle-meta strong {
  color: var(--tactical-ink);
  margin-right: 0.8rem;
}

.plate-karte-section {
  margin-bottom: 1.2rem;
}

.plate-karte-section h4 {
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.plate-karte-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plate-karte-history-list li {
  display: grid;
  grid-template-columns: 100px 120px 1fr;
  gap: 0.5rem;
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  font-size: 0.85rem;
  align-items: center;
}

.plate-karte-history-list li:last-child {
  border-bottom: none;
}

.plate-karte-history-date {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-weight: 600;
  font-size: 0.8rem;
}

.plate-karte-history-type {
  font-weight: 700;
}

.plate-karte-history-note {
  color: var(--tactical-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plate-karte-talk-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.plate-karte-talk-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.85rem;
}

.plate-karte-talk-point-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.plate-karte-talk-point-text strong {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 2px;
}

.plate-karte-talk-point-text span {
  color: var(--tactical-muted);
  font-size: 0.78rem;
}

.plate-karte-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--tactical-ink);
}

.plate-karte-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 2px solid var(--tactical-ink) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--tactical-ink) !important;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(56, 56, 50, 0.4) !important;
  transition: all 0.08s ease;
}

.plate-karte-action-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none !important;
}

.plate-karte-action-btn.primary {
  background: var(--tactical-yellow) !important;
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .plate-lookup-layout {
    grid-template-columns: 1fr;
  }
  .plate-karte-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plate-result-row {
    grid-template-columns: 120px 1fr;
    gap: 0.3rem;
  }
  .plate-result-car,
  .plate-result-action {
    display: none;
  }
  .plate-karte-history-list li {
    grid-template-columns: 90px 1fr;
  }
  .plate-karte-history-note {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Booking History & Service History — Unified Home-style Cards
   ══════════════════════════════════════════════════════════════════════ */

/* ── Booking History Cards ── */
#myPageView .booking-history {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#myPageView .bk-hist-card {
  border: 1.5px solid #e8e0c8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(200, 170, 80, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#myPageView .bk-hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#myPageView .bk-hist-date {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--tactical-ink);
  line-height: 1.3;
}

#myPageView .bk-hist-status {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1.5px solid #e8e0c8;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #5a5a52;
  background: #f8f7f4;
  white-space: nowrap;
}

#myPageView .bk-hist-status.is-confirmed {
  border-color: var(--tactical-dark);
  background: var(--tactical-dark);
  color: #e8d48a;
}

#myPageView .bk-hist-status.is-cancelled {
  border-color: #c4c4c0;
  background: #efefed;
  color: #8a8a82;
}

/* ── Info table inside booking card ── */
#myPageView .bk-hist-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #e8e0c8;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.82rem;
}

#myPageView .bk-hist-table th,
#myPageView .bk-hist-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

#myPageView .bk-hist-table th {
  width: 64px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #c08a00;
  background: #f8f7f4;
  white-space: nowrap;
  border-right: 1.5px solid #e8e0c8;
}

#myPageView .bk-hist-table td {
  color: var(--tactical-ink);
  font-weight: 600;
  background: #fff;
}

#myPageView .bk-hist-table tr + tr th,
#myPageView .bk-hist-table tr + tr td {
  border-top: 1px solid #f0e8d0;
}

#myPageView .bk-hist-table td.bk-hist-note {
  font-weight: 500;
  color: #5a5a52;
  font-size: 0.78rem;
  line-height: 1.6;
}

#myPageView .bk-hist-cancel {
  all: unset;
  box-sizing: border-box;
  display: block !important;
  width: 100%;
  text-align: center;
  padding: 10px;
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.82rem;
  font-weight: 700 !important;
  color: var(--tactical-ink) !important;
  cursor: pointer;
  transition: background 0.1s;
}

#myPageView .bk-hist-cancel:active {
  background: #f4f3f0;
}

#myPageView .bk-hist-cancel.is-cancelled {
  border-color: #e0e0dc;
  color: #aaa;
  cursor: default;
}

/* ── Service History Cards ── */
#myPageView .service-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#myPageView .sv-hist-card {
  border: 1.5px solid #e8e0c8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(200, 170, 80, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#myPageView .sv-hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#myPageView .sv-hist-date {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--tactical-ink);
  line-height: 1.3;
}

#myPageView .sv-hist-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1.5px solid var(--tactical-dark);
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: var(--tactical-dark);
  white-space: nowrap;
}

#myPageView .sv-hist-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#myPageView .sv-hist-type {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--tactical-ink);
}

#myPageView .sv-hist-detail {
  font-size: 0.78rem;
  color: #5a5a52;
  line-height: 1.5;
}

/* ── Override old styles to prevent conflicts ── */
#myPageView .booking-history > li {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#myPageView .service-history-item {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Summary card in service history ── */
#myPageView .service-history-summary {
  border: 1.5px solid #e8e0c8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(200, 170, 80, 0.06) !important;
  padding: 14px !important;
  color: var(--tactical-ink) !important;
}

#myPageView .service-history-summary .service-history-stat-card strong {
  color: var(--tactical-ink) !important;
}

#myPageView .service-history-summary .service-history-stat-card small {
  color: #c08a00 !important;
}

/* ── Filter row clean style ── */
#myPageView .service-history-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

#myPageView .service-history-filter select {
  border: 1.5px solid #e8e0c8;
  border-radius: 8px;
  background: #fff;
}

/* ── Booking history module clean top bar ── */
#myPageView .booking-history-module::before {
  display: none !important;
}

#myPageView .booking-history-module {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Booking history header ── */
#myPageView .bk-hist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#myPageView .bk-hist-title {
  font-size: clamp(1.3rem, 5.5vw, 1.6rem);
  font-weight: 900;
  color: var(--tactical-ink);
  margin: 0;
  line-height: 1.3;
}

#myPageView .bk-hist-refresh-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

#myPageView .bk-hist-toolbar {
  display: flex;
  justify-content: flex-start;
}

#myPageView .bk-hist-filter-btn {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
}

/* ── Empty states ── */
#myPageView .booking-empty,
#myPageView .service-history-empty {
  border: 1.5px dashed #e8e0c8 !important;
  border-radius: 10px !important;
  background: #fafaf8 !important;
  padding: 20px 16px !important;
  color: #c08a00 !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  text-align: center;
}