/**
 * MyPage Typography & Layout Tokens
 *
 * Premium Japanese reservation-site standard for /mypage pages.
 * Scoped to .page-mypage wrapper. Uses system font stack (Noto Sans JP).
 * No inline CSS in Blade; all styling here.
 */

/* ============================================
   TYPOGRAPHY TOKENS (scoped to .page-mypage)
   ============================================ */

.page-mypage {
  --mypage-font-stack: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  --mypage-font-size-base: 15px;
  --mypage-font-size-sm: 13px;
  --mypage-font-size-xs: 12px;
  --mypage-font-size-lg: 16px;
  --mypage-font-size-xl: 18px;
  --mypage-font-size-2xl: 20px;
  --mypage-font-size-3xl: 22px;
  --mypage-line-height-body: 1.75;
  --mypage-line-height-tight: 1.4;
  --mypage-line-height-relaxed: 1.9;
  --mypage-font-weight-normal: 400;
  --mypage-font-weight-medium: 500;
  --mypage-font-weight-semibold: 600;
  --mypage-font-weight-bold: 700;
  --mypage-spacing-xs: 8px;
  --mypage-spacing-sm: 12px;
  --mypage-spacing-md: 16px;
  --mypage-spacing-lg: 24px;
  --mypage-spacing-xl: 32px;
  --mypage-radius-card: 0.75rem;
  --mypage-radius-button: 0.5rem;
  --mypage-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --mypage-shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --mypage-tap-min: 44px;
  --mypage-input-icon-left: var(--mypage-spacing-md);
  --mypage-input-icon-width: 1.5rem;
  --mypage-input-icon-gap: 0.75rem;
  --mypage-input-icon-total: calc(var(--mypage-input-icon-left) + var(--mypage-input-icon-width) + var(--mypage-input-icon-gap));

  font-family: var(--mypage-font-stack);
  font-size: var(--mypage-font-size-base);
  line-height: var(--mypage-line-height-body);
  font-feature-settings: "tnum";
}

/* Base typography */
.page-mypage,
.page-mypage * {
  box-sizing: border-box;
}

.page-mypage h1,
.page-mypage .mypage-hero__title {
  font-size: var(--mypage-font-size-xl);
  font-weight: var(--mypage-font-weight-semibold);
  line-height: var(--mypage-line-height-tight);
  margin-bottom: var(--mypage-spacing-sm);
}

.page-mypage h2,
.page-mypage .mypage-section__title {
  font-size: var(--mypage-font-size-lg);
  font-weight: var(--mypage-font-weight-semibold);
  line-height: var(--mypage-line-height-tight);
  margin-bottom: var(--mypage-spacing-md);
}

.page-mypage h3,
.page-mypage .mypage-card__title {
  font-size: var(--mypage-font-size-base);
  font-weight: var(--mypage-font-weight-semibold);
  line-height: var(--mypage-line-height-tight);
  margin-bottom: var(--mypage-spacing-sm);
}

.page-mypage .mypage-stat__value,
.page-mypage .mypage-card__number {
  font-size: var(--mypage-font-size-xl);
  font-weight: var(--mypage-font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--mypage-line-height-tight);
}

.page-mypage .mypage-body-sm {
  font-size: var(--mypage-font-size-sm);
  line-height: var(--mypage-line-height-body);
}

.page-mypage .mypage-body-xs,
.page-mypage .mypage-badge {
  font-size: var(--mypage-font-size-xs);
  line-height: var(--mypage-line-height-tight);
}

/* ============================================
   HERO / WELCOME BANNER
   ============================================ */

.page-mypage .mypage-hero {
  padding: var(--mypage-spacing-lg) var(--mypage-spacing-md);
  margin-bottom: var(--mypage-spacing-xl);
  border-radius: var(--mypage-radius-card);
}

.page-mypage .mypage-hero__subtext {
  font-size: var(--mypage-font-size-sm);
  opacity: 0.9;
  margin-top: var(--mypage-spacing-xs);
}

.page-mypage .mypage-hero__btn {
  min-height: var(--mypage-tap-min);
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-lg);
  font-size: var(--mypage-font-size-base);
  font-weight: var(--mypage-font-weight-medium);
  border-radius: var(--mypage-radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s;
}

.page-mypage .mypage-hero__btn:hover {
  opacity: 0.95;
}

.page-mypage .mypage-hero__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ============================================
   STAT CARDS
   ============================================ */

.page-mypage .mypage-stat-card {
  padding: var(--mypage-spacing-lg);
  border-radius: var(--mypage-radius-card);
  box-shadow: var(--mypage-shadow-card);
  transition: box-shadow 0.2s, transform 0.2s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-mypage .mypage-stat-card:hover {
  box-shadow: var(--mypage-shadow-card-hover);
}

.page-mypage .mypage-stat-card__label {
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  opacity: 0.95;
}

.page-mypage .mypage-stat-card__cta {
  font-size: var(--mypage-font-size-sm);
  margin-top: var(--mypage-spacing-md);
  display: inline-flex;
  align-items: center;
  gap: var(--mypage-spacing-xs);
  opacity: 0.9;
  transition: opacity 0.2s;
}

.page-mypage .mypage-stat-card:hover .mypage-stat-card__cta {
  opacity: 1;
}

.page-mypage .mypage-stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   CONTENT CARDS (recent reservations, chart, calendar)
   ============================================ */

.page-mypage .mypage-card {
  padding: var(--mypage-spacing-lg);
  border-radius: var(--mypage-radius-card);
  box-shadow: var(--mypage-shadow-card);
  margin-bottom: var(--mypage-spacing-xl);
}

.page-mypage .mypage-card__header {
  display: flex;
  align-items: center;
  gap: var(--mypage-spacing-sm);
  margin-bottom: var(--mypage-spacing-md);
}

.page-mypage .mypage-empty-state {
  text-align: center;
  padding: var(--mypage-spacing-xl);
  font-size: var(--mypage-font-size-sm);
  opacity: 0.8;
}

.page-mypage .mypage-empty-state__cta {
  margin-top: var(--mypage-spacing-md);
  font-weight: var(--mypage-font-weight-medium);
}

/* ============================================
   TABLES / LISTS
   ============================================ */

.page-mypage .mypage-table-row {
  padding: var(--mypage-spacing-md);
  min-height: var(--mypage-tap-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mypage-spacing-sm);
  transition: background-color 0.15s;
}

.page-mypage .mypage-table-row:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.page-mypage .mypage-table-row:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.page-mypage .mypage-table-row:nth-child(even):hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================
   BUTTONS
   ============================================ */

.page-mypage .mypage-btn,
.page-mypage .mypage-btn-primary,
.page-mypage .mypage-btn-secondary {
  min-height: var(--mypage-tap-min);
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-md);
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  border-radius: var(--mypage-radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mypage-spacing-xs);
  transition: opacity 0.2s, background-color 0.2s;
}

.page-mypage .mypage-btn:focus-visible,
.page-mypage .mypage-btn-primary:focus-visible,
.page-mypage .mypage-btn-secondary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.page-mypage .mypage-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mypage-spacing-xs);
  font-size: var(--mypage-font-size-sm);
  min-height: var(--mypage-tap-min);
  padding: var(--mypage-spacing-xs) 0;
  transition: opacity 0.2s;
}

.page-mypage .mypage-back-link:hover {
  opacity: 0.85;
}

.page-mypage .mypage-back-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ============================================
   RESPONSIVE (SP)
   ============================================ */

@media (max-width: 767px) {
  .page-mypage {
    --mypage-font-size-base: 14px;
    --mypage-font-size-2xl: 18px;
    --mypage-font-size-3xl: 20px;
    --mypage-spacing-lg: 20px;
    --mypage-spacing-xl: 24px;
  }

  .page-mypage .mypage-hero {
    padding: var(--mypage-spacing-md) var(--mypage-spacing-sm);
    margin-bottom: var(--mypage-spacing-lg);
  }

  .page-mypage .mypage-hero__title {
    font-size: var(--mypage-font-size-lg);
  }

  .page-mypage .mypage-stat-card {
    padding: var(--mypage-spacing-md);
    min-height: 120px;
  }

  .page-mypage .mypage-stat__value,
  .page-mypage .mypage-card__number {
    font-size: var(--mypage-font-size-lg);
  }

  .page-mypage .mypage-card {
    padding: var(--mypage-spacing-md);
    margin-bottom: var(--mypage-spacing-lg);
  }
}

/* ============================================
   FULLCALENDAR OVERRIDES (mypage scope)
   ============================================ */

.page-mypage #calendar .fc-daygrid-day-number {
  font-size: var(--mypage-font-size-xs);
  font-weight: var(--mypage-font-weight-medium);
}

.page-mypage #calendar .fc-toolbar-title {
  font-size: var(--mypage-font-size-lg);
  font-weight: var(--mypage-font-weight-bold);
}

.page-mypage #calendar .fc-toolbar-chunk button {
  min-height: var(--mypage-tap-min);
  padding: var(--mypage-spacing-xs) var(--mypage-spacing-sm);
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  border-radius: var(--mypage-radius-button);
}

/* Theme variable utilities (no inline styles in Blade) */
.page-mypage .mypage-text-theme {
  color: var(--theme-text);
}

.page-mypage .mypage-text-theme-muted {
  color: var(--theme-text);
  opacity: 0.8;
}

.page-mypage .mypage-text-theme-subtle {
  color: var(--theme-text);
  opacity: 0.7;
}

.page-mypage .mypage-text-on-primary {
  color: var(--theme-text-on-primary, #fff);
}

.page-mypage .mypage-text-on-primary-subtle {
  color: var(--theme-text-on-primary, #fff);
  opacity: 0.9;
}

.page-mypage .mypage-bg-theme {
  background-color: var(--theme-background);
}

.page-mypage .mypage-bg-card {
  background-color: var(--theme-card-background, #fff);
}

.page-mypage .mypage-bg-card-hover:hover {
  background-color: var(--theme-border, #e5e7eb);
}

.page-mypage .mypage-border-theme {
  border: 1px solid var(--theme-border);
}

.page-mypage .mypage-accent {
  color: var(--theme-primary);
}

.page-mypage .mypage-btn-primary-bg {
  background-color: var(--theme-button-primary, var(--theme-primary));
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-btn-secondary-bg {
  background-color: var(--theme-border);
  color: var(--theme-text);
}

.page-mypage .mypage-btn-secondary-bg:hover {
  background-color: var(--theme-background);
}

/* Hero button variant (light bg on gradient) */
.page-mypage .mypage-hero__btn--light {
  background-color: var(--theme-card-background);
  color: var(--theme-primary);
}

.page-mypage .mypage-hero__btn--light:hover {
  background-color: var(--theme-background);
  opacity: 0.95;
}

/* Alpine.js x-cloak (used in mypage modals) */
.page-mypage [x-cloak] {
  display: none !important;
}

/* Form inputs in mypage */
.page-mypage .mypage-input,
.page-mypage input.mypage-input,
.page-mypage select.mypage-input,
.page-mypage textarea.mypage-input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-md);
  font-size: var(--mypage-font-size-sm);
  border: 1px solid var(--theme-border);
  background-color: var(--theme-card-background);
  color: var(--theme-text);
  border-radius: var(--mypage-radius-button);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.page-mypage textarea.mypage-input {
  min-height: 8rem;
  resize: vertical;
}

.page-mypage .mypage-input:focus,
.page-mypage input.mypage-input:focus,
.page-mypage select.mypage-input:focus,
.page-mypage textarea.mypage-input:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.15);
  outline: none;
}

/* Tab buttons */
.page-mypage .mypage-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-lg);
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  border-radius: var(--mypage-radius-button);
  min-height: var(--mypage-tap-min);
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
}

.page-mypage .mypage-tab--active {
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-tab--inactive {
  background-color: var(--theme-border);
  color: var(--theme-text);
}

.page-mypage .mypage-tab--inactive:hover {
  background-color: var(--theme-background);
}

/* Reservation status tabs (segmented control with count badges) */
.page-mypage .mypage-reservation-tabs {
  display: flex;
  justify-content: center;
}

.page-mypage .mypage-reservation-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--mypage-tap-min);
  padding: 0.75rem 1.5rem;
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  border: none;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.page-mypage .mypage-reservation-tab:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

.page-mypage .mypage-reservation-tab--active {
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-reservation-tab--inactive {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--theme-text);
}

.page-mypage .mypage-reservation-tab--inactive:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.page-mypage .mypage-reservation-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  font-weight: var(--mypage-font-weight-semibold);
  border-radius: 9999px;
  line-height: 1;
}

.page-mypage .mypage-reservation-tab--active .mypage-reservation-tab__count {
  background-color: rgba(255, 255, 255, 0.3);
}

.page-mypage .mypage-reservation-tab--inactive .mypage-reservation-tab__count {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--theme-text);
}

/* Reservation card - consistent padding, action area spacing for 詳細を見る */
.page-mypage .mypage-reservation-card {
  padding: var(--mypage-spacing-lg);
  margin-bottom: var(--mypage-spacing-md);
}

.page-mypage .mypage-reservation-card__actions {
  padding-right: var(--mypage-spacing-sm);
}

.page-mypage .mypage-reservation-dl {
  align-items: start;
}

.page-mypage .mypage-reservation-dt {
  min-width: 5.5rem;
  white-space: nowrap;
  color: var(--theme-text);
  opacity: 0.85;
}

.page-mypage .mypage-reservation-dd {
  color: var(--theme-text);
  opacity: 0.85;
  word-break: break-word;
}

@media (max-width: 767px) {
  .page-mypage .mypage-reservation-card {
    padding: var(--mypage-spacing-md);
  }

  .page-mypage .mypage-reservation-card__actions {
    padding-right: var(--mypage-spacing-xs);
  }

  .page-mypage .mypage-reservation-dt {
    min-width: 5rem;
  }
}

/* ============================================
   UNIFIED COMPONENT STYLES (LayoutContainer, SectionCard, InfoRow, etc.)
   ============================================ */

.page-mypage .mypage-page-header {
  margin-bottom: var(--mypage-spacing-md);
  padding-bottom: var(--mypage-spacing-sm);
}

.page-mypage .mypage-border-bottom {
  border-bottom: 1px solid var(--theme-border);
}

.page-mypage .mypage-border-top {
  border-top: 1px solid var(--theme-border);
}

.page-mypage .mypage-page-title {
  font-size: var(--mypage-font-size-xl);
  font-weight: var(--mypage-font-weight-semibold);
  line-height: var(--mypage-line-height-tight);
  color: var(--theme-text);
}

.page-mypage .mypage-section-card {
  margin-bottom: var(--mypage-spacing-md);
}

.page-mypage .mypage-section-card__header {
  display: flex;
  align-items: center;
  gap: var(--mypage-spacing-sm);
  padding: var(--mypage-spacing-md) var(--mypage-spacing-lg);
  min-height: 3rem;
  background: linear-gradient(to right, var(--theme-background), var(--theme-border));
  border-bottom: 1px solid var(--theme-border);
}

.page-mypage .mypage-section-card__title {
  font-size: var(--mypage-font-size-base);
  font-weight: var(--mypage-font-weight-semibold);
  margin: 0;
}

.page-mypage .mypage-section-card__body {
  padding: var(--mypage-spacing-lg);
}

.page-mypage .mypage-info-row {
  margin-bottom: var(--mypage-spacing-sm);
}

.page-mypage .mypage-info-row:last-child {
  margin-bottom: 0;
}

.page-mypage .mypage-info-row__label {
  font-size: var(--mypage-font-size-xs);
  margin-bottom: 0.125rem;
}

.page-mypage .mypage-info-row__value {
  font-size: var(--mypage-font-size-sm);
}

.page-mypage .mypage-info-row__icon--primary {
  background-color: var(--theme-badge-info-bg);
  color: var(--theme-primary);
}

.page-mypage .mypage-info-row__icon--success {
  background-color: var(--theme-badge-success-bg);
  color: var(--theme-success);
}

.page-mypage .mypage-info-row__icon--warning {
  background-color: var(--theme-badge-warning-bg);
  color: var(--theme-warning);
}

.page-mypage .mypage-info-row__icon--error {
  background-color: var(--theme-badge-error-bg);
  color: var(--theme-error);
}

.page-mypage .mypage-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
}

.page-mypage .mypage-status-badge--default {
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-action-bar {
  margin-top: var(--mypage-spacing-md);
}

.page-mypage .mypage-summary-card {
  background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
  margin-bottom: var(--mypage-spacing-md);
}

.page-mypage .mypage-summary-card-bg {
  color: var(--theme-card-text-white, #fff);
}

.page-mypage .mypage-summary-card__label {
  font-size: var(--mypage-font-size-xs);
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.page-mypage .mypage-summary-card__amount {
  font-size: var(--mypage-font-size-2xl);
  font-weight: var(--mypage-font-weight-bold);
  margin: 0;
}

.page-mypage .mypage-summary-card__subtext {
  font-size: var(--mypage-font-size-xs);
  opacity: 0.75;
}

.page-mypage .mypage-summary-card .mypage-status-badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}

/* Reservation details page typography (scoped to .reservation-details-container) */
.page-mypage .reservation-details-container {
  font-size: 0.875rem;
  line-height: 1.5;
}

.page-mypage .reservation-details-container h2 {
  font-size: 1.5rem;
}

.page-mypage .reservation-details-container h3 {
  font-size: 1rem;
}

.page-mypage .reservation-details-container .text-sm,
.page-mypage .reservation-details-container .text-base {
  font-size: 0.875rem;
}

.page-mypage .reservation-details-container .text-3xl {
  font-size: 1.875rem;
}

.page-mypage .reservation-details-container .text-xl {
  font-size: 1.25rem;
}

.page-mypage .reservation-details-container a,
.page-mypage .reservation-details-container button {
  font-size: 0.875rem;
}

/* ============================================
   INBOX (メッセージ詳細・一覧)
   Clean, grounded message UI — no decorative noise
   ============================================ */

/* --- Inbox Index (list page) --- */
.page-mypage .inbox-index__unread {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: var(--mypage-spacing-md);
  padding: 0.375rem 0.75rem;
  font-size: var(--mypage-font-size-sm);
  background-color: var(--theme-badge-info-bg);
  color: var(--theme-text);
  border-radius: var(--mypage-radius-button);
}

.page-mypage .inbox-index__unread-count {
  font-weight: var(--mypage-font-weight-semibold);
  color: var(--theme-primary);
}

.page-mypage .inbox-index__unread-text {
  color: var(--theme-text);
  opacity: 0.85;
}

.page-mypage .inbox-index__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--mypage-spacing-lg);
  border-bottom: 1px solid var(--theme-border);
}

.page-mypage .inbox-index__tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-md);
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  min-height: var(--mypage-tap-min);
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
  color: var(--theme-text);
  opacity: 0.75;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.page-mypage .inbox-index__tab--active {
  opacity: 1;
  color: var(--theme-primary);
  border-bottom-color: var(--theme-primary);
  font-weight: var(--mypage-font-weight-semibold);
}

.page-mypage .inbox-index__tab--inactive:hover {
  opacity: 1;
}

.page-mypage .inbox-index__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mypage-spacing-xl) var(--mypage-spacing-lg);
  text-align: center;
}

.page-mypage .inbox-index__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--mypage-spacing-md);
  color: var(--theme-text);
  opacity: 0.35;
}

.page-mypage .inbox-index__empty-text {
  margin: 0;
  font-size: var(--mypage-font-size-sm);
}

.page-mypage .inbox-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--theme-border);
  border-radius: var(--mypage-radius-button);
  overflow: hidden;
}

.page-mypage .inbox-index__item {
  border-bottom: 1px solid var(--theme-border);
}

.page-mypage .inbox-index__item:last-child {
  border-bottom: none;
}

.page-mypage .inbox-index__item--unread .inbox-index__link {
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.04);
}

.page-mypage .inbox-index__item--unread .inbox-index__link:hover {
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.08);
}

.page-mypage .inbox-index__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mypage-spacing-md);
  padding: var(--mypage-spacing-md) var(--mypage-spacing-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.page-mypage .inbox-index__link:hover {
  background-color: var(--theme-background);
}

.page-mypage .inbox-index__link-main {
  flex: 1;
  min-width: 0;
}

.page-mypage .inbox-index__subject {
  font-weight: var(--mypage-font-weight-medium);
  margin: 0 0 0.25rem 0;
  line-height: 1.35;
}

.page-mypage .inbox-index__subject--unread {
  font-weight: var(--mypage-font-weight-semibold);
}

.page-mypage .inbox-index__shop {
  margin: 0;
}

.page-mypage .inbox-index__date {
  flex-shrink: 0;
  white-space: nowrap;
}

.page-mypage .inbox-index__pagination {
  margin-top: var(--mypage-spacing-lg);
  padding-top: var(--mypage-spacing-md);
  border-top: 1px solid var(--theme-border);
  display: flex;
  justify-content: center;
}

/* Unread badge */
.page-mypage .inbox-unread-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.65rem;
  font-weight: var(--mypage-font-weight-medium);
  border-radius: 4px;
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* --- Inbox Detail (show page) ---
   Chat-style thread, integrated reply, clearer hierarchy
   ============================================ */

.page-mypage .inbox-detail__header {
  margin-bottom: var(--mypage-spacing-xl);
  padding-bottom: var(--mypage-spacing-lg);
  border-bottom: 1px solid var(--theme-border);
}

.page-mypage .inbox-detail__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mypage-spacing-md);
  margin-bottom: var(--mypage-spacing-md);
}

.page-mypage .inbox-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--mypage-font-size-sm);
  text-decoration: none;
  min-height: 2rem;
  padding: 0.25rem 0;
  transition: opacity 0.2s;
}

.page-mypage .inbox-detail__back:hover {
  opacity: 0.85;
}

.page-mypage .inbox-detail__archive-form {
  margin: 0;
}

.page-mypage .inbox-detail__archive-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--mypage-font-size-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--mypage-radius-button);
  transition: background-color 0.15s, opacity 0.2s;
}

.page-mypage .inbox-detail__archive-btn:hover {
  background-color: var(--theme-background);
  opacity: 1;
}

.page-mypage .inbox-detail__subject {
  font-size: var(--mypage-font-size-xl);
  font-weight: var(--mypage-font-weight-semibold);
  line-height: 1.35;
  margin: 0 0 var(--mypage-spacing-xs) 0;
}

.page-mypage .inbox-detail__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-mypage .inbox-detail__meta-sep {
  opacity: 0.5;
  font-size: var(--mypage-font-size-sm);
}

.page-mypage .inbox-detail__meta-date {
  font-size: var(--mypage-font-size-xs);
}

/* Thread: chat-style bubbles */
.page-mypage .inbox-detail__thread {
  display: flex;
  flex-direction: column;
  gap: var(--mypage-spacing-md);
  margin-bottom: var(--mypage-spacing-xl);
}

.page-mypage .inbox-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--mypage-spacing-sm);
  max-width: 90%;
}

.page-mypage .inbox-bubble--shop {
  align-self: flex-start;
}

.page-mypage .inbox-bubble--customer {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.page-mypage .inbox-bubble__avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.page-mypage .inbox-bubble__avatar--shop {
  background-color: var(--theme-background);
  color: var(--theme-text);
  opacity: 0.75;
}

.page-mypage .inbox-bubble__avatar--customer {
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.15);
  color: var(--theme-primary);
}

.page-mypage .inbox-bubble__content {
  flex: 1;
  min-width: 0;
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-md);
  border-radius: var(--mypage-radius-button);
}

.page-mypage .inbox-bubble--shop .inbox-bubble__content {
  background-color: var(--theme-background);
  border: 1px solid var(--theme-border);
}

.page-mypage .inbox-bubble--customer .inbox-bubble__content {
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.08);
  border: 1px solid rgba(var(--theme-primary-rgb, 37, 99, 235), 0.2);
}

.page-mypage .inbox-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mypage-spacing-xs);
  margin-bottom: 0.25rem;
}

.page-mypage .inbox-bubble__meta--customer {
  flex-direction: row-reverse;
}

.page-mypage .inbox-bubble__sender {
  font-size: var(--mypage-font-size-xs);
  font-weight: var(--mypage-font-weight-semibold);
}

.page-mypage .inbox-bubble__time {
  font-size: 0.6875rem;
  opacity: 0.7;
}

.page-mypage .inbox-bubble__body {
  line-height: var(--mypage-line-height-body);
  word-break: break-word;
  font-size: var(--mypage-font-size-sm);
}

.page-mypage .inbox-bubble__body.content-reading {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.page-mypage .inbox-bubble__body a {
  color: var(--theme-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-mypage .inbox-bubble__body a:hover {
  opacity: 0.85;
}

/* Reply section: integrated, not boxed */
.page-mypage .inbox-detail__reply {
  padding-top: var(--mypage-spacing-lg);
  border-top: 1px solid var(--theme-border);
}

.page-mypage .inbox-detail__reply-heading {
  font-size: var(--mypage-font-size-base);
  font-weight: var(--mypage-font-weight-semibold);
  margin: 0 0 var(--mypage-spacing-md) 0;
}

.page-mypage .inbox-detail__reply-form {
  display: flex;
  flex-direction: column;
  gap: var(--mypage-spacing-md);
}

.page-mypage .inbox-detail__reply-textarea {
  min-height: 8rem;
  resize: vertical;
}

.page-mypage .inbox-detail__reply-error {
  margin: 0;
}

.page-mypage .inbox-detail__reply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mypage-spacing-md);
}

.page-mypage .inbox-detail__reply-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.page-mypage .inbox-detail__reply-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .page-mypage .inbox-bubble {
    max-width: 95%;
  }

  .page-mypage .inbox-detail__reply-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-mypage .inbox-detail__reply-back,
  .page-mypage .inbox-detail__reply-submit {
    justify-content: center;
  }
}

/* ============================================
   INBOX SAAS (Modern Slack/Intercom-style message detail)
   /mypage/inbox/{id}
   Theme-synced: uses --theme-* variables
   ============================================ */

.inbox-conv {
  --inbox-bg: #F5F6F8;
  --inbox-bubble-radius: 14px;
  --inbox-grid: 8px;
  --inbox-max: 760px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background-color: var(--inbox-bg);
}

.inbox-conv__header {
  flex-shrink: 0;
  background-color: var(--theme-card-background, #fff);
  border-bottom: 1px solid var(--theme-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Generic detail bar: compact single row (reusable) */
.detail-bar {
  max-width: var(--detail-bar-max, var(--inbox-max, 760px));
  margin: 0 auto;
  padding: var(--inbox-grid) calc(var(--inbox-grid) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--inbox-grid) * 2);
  flex-wrap: wrap;
}

.detail-bar__meta {
  flex: 1;
  min-width: 0;
}

.detail-bar__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px 0;
  color: var(--theme-text);
}

.detail-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--inbox-grid);
  flex-shrink: 0;
}

.detail-bar__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--inbox-grid) / 2);
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-primary);
  text-decoration: none;
  padding: var(--inbox-grid) calc(var(--inbox-grid) * 1.5);
  border-radius: 8px;
  transition: opacity 0.2s, background-color 0.15s;
}

.detail-bar__link:hover {
  opacity: 0.9;
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.08);
}

.detail-bar__form {
  margin: 0;
}

.detail-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--inbox-grid) / 2);
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-text);
  opacity: 0.75;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--inbox-grid) calc(var(--inbox-grid) * 1.5);
  border-radius: 8px;
  transition: background-color 0.15s, opacity 0.2s;
}

.detail-bar__btn:hover {
  background-color: var(--theme-background);
  opacity: 1;
}

/* Generic inline metadata (reusable) */
.meta-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--inbox-grid) / 2);
  font-size: 13px;
  color: var(--theme-text);
  opacity: 0.8;
}

.meta-inline__sep {
  opacity: 0.5;
}

/* Generic status badge (reusable) */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px calc(var(--inbox-grid) * 1.5);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
}

.status-badge--active {
  background-color: var(--theme-badge-success-bg, rgba(34, 197, 94, 0.15));
  color: var(--theme-success, #22c55e);
}

.status-badge--archived {
  background-color: var(--theme-background);
  color: var(--theme-text);
  opacity: 0.7;
}

.inbox-conv__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 calc(var(--inbox-grid) * 2);
}

.inbox-conv__thread {
  flex: 1;
  overflow-y: auto;
  max-width: var(--inbox-max);
  margin: 0 auto;
  padding: calc(var(--inbox-grid) * 3) var(--inbox-grid) calc(var(--inbox-grid) * 4);
  width: 100%;
}

.inbox-conv__day-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--inbox-grid) * 3) 0 calc(var(--inbox-grid) * 2);
}

.inbox-conv__day-divider span {
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-text);
  opacity: 0.5;
  padding: 0 calc(var(--inbox-grid) * 2);
}

.inbox-conv__bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--inbox-grid);
  margin-bottom: var(--inbox-grid);
  max-width: 85%;
}

.inbox-conv__bubble--staff {
  align-self: flex-start;
}

.inbox-conv__bubble--customer {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.inbox-conv__bubble--grouped {
  margin-bottom: 2px;
}

.inbox-conv__bubble-avatar,
.inbox-conv__bubble-spacer {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.inbox-conv__bubble-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.inbox-conv__bubble-avatar--staff {
  background-color: var(--theme-border);
  color: var(--theme-text);
  opacity: 0.9;
}

.inbox-conv__bubble-avatar--customer {
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.15);
  color: var(--theme-primary);
}

.inbox-conv__bubble-content {
  flex: 1;
  min-width: 0;
}

.inbox-conv__bubble-sender {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--theme-text);
  margin-bottom: 4px;
}

.inbox-conv__bubble-body {
  padding: calc(var(--inbox-grid) * 1.5) calc(var(--inbox-grid) * 2);
  border-radius: var(--inbox-bubble-radius);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.inbox-conv__bubble-body.content-reading {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.inbox-conv__bubble--staff .inbox-conv__bubble-body {
  background-color: var(--theme-card-background, #fff);
  border: 1px solid var(--theme-border);
}

.inbox-conv__bubble--customer .inbox-conv__bubble-body {
  background-color: var(--theme-button-primary, var(--theme-primary));
  color: var(--theme-button-text, #fff);
  border: none;
}

.inbox-conv__bubble--customer .inbox-conv__bubble-body a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}

.inbox-conv__bubble--staff .inbox-conv__bubble-body a {
  color: var(--theme-primary);
  text-decoration: underline;
}

.inbox-conv__bubble-empty {
  opacity: 0.6;
}

.inbox-conv__bubble-time {
  display: block;
  font-size: 12px;
  color: var(--theme-text);
  opacity: 0.5;
  margin-top: 4px;
}

.inbox-conv__composer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding: var(--inbox-grid);
  border-top: 1px solid var(--theme-border);
}

.inbox-conv__composer-form {
  max-width: var(--inbox-max);
  margin: 0 auto;
}

.inbox-conv__composer-inner {
  display: flex;
  align-items: flex-end;
  gap: var(--inbox-grid);
  padding: calc(var(--inbox-grid) * 1.5) calc(var(--inbox-grid) * 2);
  background: white;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
}

.inbox-conv__composer-input {
  flex: 1;
  min-height: 24px;
  max-height: 160px;
  padding: calc(var(--inbox-grid) * 1.5) calc(var(--inbox-grid) * 2);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  resize: none;
  border: none;
  background: none;
  color: var(--theme-text);
  font-family: inherit;
}

.inbox-conv__composer-input::placeholder {
  color: var(--theme-text);
  opacity: 0.5;
}

.inbox-conv__composer-input:focus {
  outline: none;
}

.inbox-conv__composer-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-button-primary, var(--theme-primary));
  color: var(--theme-button-text, #fff);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.inbox-conv__composer-send:hover {
  opacity: 0.95;
}

.inbox-conv__composer-send:active {
  transform: scale(0.97);
}

.inbox-conv__composer-error {
  font-size: 13px;
  color: var(--theme-error);
  margin: var(--inbox-grid) 0 0;
}

@media (max-width: 767px) {
  .detail-bar {
    padding-left: calc(var(--inbox-grid) * 2);
    padding-right: calc(var(--inbox-grid) * 2);
    flex-direction: column;
    align-items: stretch;
  }

  .detail-bar__actions {
    justify-content: flex-start;
  }

  .inbox-conv__thread {
    padding-left: calc(var(--inbox-grid) * 2);
    padding-right: calc(var(--inbox-grid) * 2);
  }

  .inbox-conv__bubble {
    max-width: 92%;
  }
}

/* ============================================
   PAYMENT HISTORY (お支払い履歴)
   Neutral backgrounds for consistent contrast
   ============================================ */

.page-mypage .mypage-payment-stat-card {
  background: linear-gradient(to bottom right, var(--theme-background), var(--theme-border));
  box-shadow: var(--mypage-shadow-card);
  border: 1px solid var(--theme-border);
}

.page-mypage .mypage-payment-stat-label {
  font-size: var(--mypage-font-size-sm);
  color: var(--theme-text);
  opacity: 0.75;
  margin: 0 0 0.25rem 0;
}

.page-mypage .mypage-payment-stat-value {
  font-size: var(--mypage-font-size-xl);
  font-weight: var(--mypage-font-weight-bold);
  color: var(--theme-text);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-payment-stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-background);
  color: var(--theme-text);
  opacity: 0.8;
}

.page-mypage .mypage-payment-filter-btn {
  background-color: var(--theme-card-background);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  transition: background-color 0.2s;
}

.page-mypage .mypage-payment-filter-btn:hover {
  background-color: var(--theme-background);
}

.page-mypage .mypage-payment-card-header {
  background-color: var(--theme-background);
  border-bottom: 1px solid var(--theme-border);
}

.page-mypage .mypage-payment-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-payment-card-type {
  font-size: var(--mypage-font-size-base);
  font-weight: var(--mypage-font-weight-semibold);
  margin: 0 0 0.125rem 0;
}

.page-mypage .mypage-payment-card-date {
  font-size: var(--mypage-font-size-sm);
  margin: 0;
}

.page-mypage .mypage-payment-card-amount {
  font-size: var(--mypage-font-size-lg);
  font-weight: var(--mypage-font-weight-bold);
  color: var(--theme-error);
  margin: 0 0 0.25rem 0;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-payment-invoice-link {
  font-size: var(--mypage-font-size-sm);
  transition: opacity 0.2s;
}

.page-mypage .mypage-payment-invoice-link:hover {
  opacity: 0.85;
}

.page-mypage .mypage-payment-details {
  font-size: var(--mypage-font-size-sm);
}

.page-mypage .mypage-payment-detail-row {
  margin: 0;
  display: flex;
  align-items: center;
  color: var(--theme-text);
  opacity: 0.9;
}

.page-mypage .mypage-payment-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--mypage-font-size-xs);
  font-weight: var(--mypage-font-weight-medium);
  border-radius: 9999px;
  background-color: var(--theme-success);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-payment-order-btn {
  background-color: var(--theme-badge-success-bg);
  color: var(--theme-success);
  min-height: var(--mypage-tap-min);
  padding: var(--mypage-spacing-sm) var(--mypage-spacing-md);
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  border-radius: var(--mypage-radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.page-mypage .mypage-payment-order-btn:hover {
  background-color: var(--theme-success);
  color: var(--theme-button-text, #fff);
}

@media (max-width: 767px) {
  .page-mypage .mypage-payment-stat-value {
    font-size: var(--mypage-font-size-lg);
  }

  .page-mypage .mypage-payment-card-amount {
    font-size: var(--mypage-font-size-base);
  }
}

/* Login history (ログイン履歴) */
.page-mypage .mypage-log-entry-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-background);
  color: var(--theme-text);
  opacity: 0.85;
}

.page-mypage .mypage-log-entry-date {
  font-size: var(--mypage-font-size-base);
  font-weight: var(--mypage-font-weight-semibold);
}

.page-mypage .mypage-log-entry-time {
  font-size: var(--mypage-font-size-sm);
}

.page-mypage .mypage-log-status-fail {
  background-color: var(--theme-badge-error-bg);
  color: var(--theme-error);
}

.page-mypage .mypage-empty-state-card {
  background-color: var(--theme-card-background);
}

.page-mypage .mypage-empty-state-icon {
  background-color: var(--theme-border);
  color: var(--theme-text);
  opacity: 0.6;
}

.page-mypage .mypage-profile-label {
  font-size: var(--mypage-font-size-sm);
  font-weight: var(--mypage-font-weight-medium);
  color: var(--theme-text);
  opacity: 0.9;
  display: block;
  margin-bottom: 0.375rem;
}

/* Profile edit (プロフィール編集) */
.page-mypage .mypage-profile-form .mypage-section-card {
  margin-bottom: 0;
}

.page-mypage .mypage-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mypage-spacing-md);
}

@media (max-width: 639px) {
  .page-mypage .mypage-profile-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact reservation-status rows. Keep this at the end to override older card rules. */
.page-mypage .mypage-reservation-grid {
  gap: 0.5rem !important;
  padding: 0 !important;
  background-color: color-mix(in srgb, var(--theme-primary, #5b21b6) 3%, transparent);
}

.page-mypage .mypage-reservation-card {
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-text, #1f2937) 9%, transparent) !important;
  background-color: var(--mp-paper, #fff) !important;
  box-shadow: none !important;
}

.page-mypage .mypage-reservation-card+.mypage-reservation-card {
  margin-top: 0 !important;
}

.page-mypage .mypage-reservation-card__rail {
  width: 3px !important;
}

.page-mypage .mypage-reservation-card__inner {
  padding: 0.625rem 0.75rem 0.625rem 0.875rem !important;
}

.page-mypage .mypage-reservation-card__head {
  align-items: center !important;
  padding-bottom: 0.4375rem !important;
  margin-bottom: 0.5rem !important;
}

.page-mypage .mypage-reservation-card__id-block {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
}

.page-mypage .mypage-reservation-card__eyebrow {
  font-size: 0.625rem !important;
  letter-spacing: 0.08em !important;
}

.page-mypage .mypage-reservation-card__id {
  font-size: 1rem !important;
}

.page-mypage .mypage-reservation-card__badges {
  gap: 0.375rem !important;
}

.page-mypage .mypage-reservation-card__status,
.page-mypage .mypage-reservation-card__payment-pill {
  min-height: 28px !important;
  padding: 0.25rem 0.5625rem !important;
  font-size: 0.6875rem !important;
}

.page-mypage .mypage-reservation-card__body {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  gap: 0.625rem !important;
  align-items: center !important;
}

.page-mypage .mypage-reservation-card__date-block {
  width: 70px !important;
  min-height: 64px !important;
  border-radius: 8px !important;
  gap: 0 !important;
}

.page-mypage .mypage-reservation-card__month,
.page-mypage .mypage-reservation-card__weekday {
  font-size: 0.625rem !important;
  line-height: 1.2 !important;
}

.page-mypage .mypage-reservation-card__day {
  font-size: 1.5rem !important;
}

.page-mypage .mypage-reservation-card__facts {
  grid-template-columns: minmax(130px, 0.9fr) minmax(72px, 0.45fr) minmax(140px, 1fr) minmax(120px, 0.9fr) minmax(160px, 1fr) !important;
  gap: 0.375rem 0.75rem !important;
  align-items: center !important;
}

.page-mypage .mypage-reservation-card__facts dt {
  margin-bottom: 0.0625rem !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.04em !important;
}

.page-mypage .mypage-reservation-card__facts dt i {
  width: 12px !important;
  font-size: 0.75rem !important;
}

.page-mypage .mypage-reservation-card__facts dd {
  font-size: 0.8125rem !important;
  line-height: 1.25 !important;
}

.page-mypage .mypage-reservation-card__payment-fact {
  padding: 0.375rem 0.5rem !important;
  border-radius: 7px !important;
}

.page-mypage .mypage-reservation-card__payment-fact strong {
  font-size: 0.8125rem !important;
}

.page-mypage .mypage-reservation-card__payment-fact small {
  font-size: 0.625rem !important;
}

.page-mypage .mypage-reservation-card__facts-row--wide {
  grid-column: 1 / -1 !important;
}

.page-mypage .mypage-reservation-card__facts-row--wide dd {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--theme-text, #1f2937) 82%, transparent) !important;
}

.page-mypage .mypage-reservation-card__actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.375rem !important;
  min-width: 132px !important;
}

.page-mypage .mypage-reservation-card__actions .mypage-btn {
  min-height: 36px !important;
  padding: 0.375rem 0.6875rem !important;
  font-size: 0.75rem !important;
  border-radius: 8px !important;
}

.page-mypage .mypage-reservation-card__actions .mypage-btn i {
  margin-right: 0.25rem !important;
}

.page-mypage .mypage-reservation-card__cancel,
.page-mypage .mypage-reservation-card__cancel>button {
  width: 100% !important;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-reservation-card__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0 0.875rem !important;
  }

  .page-mypage .mypage-reservation-card__head {
    grid-column: 1 / -1 !important;
  }

  .page-mypage .mypage-reservation-card__body {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .page-mypage .mypage-reservation-card__actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 1023px) {
  .page-mypage .mypage-reservation-card__body {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  .page-mypage .mypage-reservation-card__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .page-mypage .mypage-reservation-card__actions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid color-mix(in srgb, var(--theme-text, #1f2937) 6%, transparent) !important;
  }
}

@media (max-width: 639px) {
  .page-mypage .mypage-reservation-grid {
    padding: 0.5rem !important;
  }

  .page-mypage .mypage-reservation-card__id-block {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.0625rem !important;
  }

  .page-mypage .mypage-reservation-card__body {
    grid-template-columns: 1fr !important;
  }

  .page-mypage .mypage-reservation-card__date-block {
    width: 100% !important;
    min-height: 52px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 0.5rem 0.625rem !important;
    gap: 0.5rem !important;
  }

  .page-mypage .mypage-reservation-card__facts {
    grid-template-columns: 1fr !important;
  }

  .page-mypage .mypage-reservation-card__actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

.page-mypage .mypage-profile-stack {
  display: flex;
  flex-direction: column;
}

.page-mypage .mypage-profile-field-group {
  margin-bottom: 0;
}

.page-mypage .mypage-input-wrapper {
  position: relative;
}

.page-mypage .mypage-profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mypage-spacing-md);
  flex-wrap: wrap;
}

.page-mypage .mypage-profile-toggle-label {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-profile-error {
  font-size: var(--mypage-font-size-sm);
  color: var(--theme-error);
  margin: 0.25rem 0 0 0;
}

/* Icon + input: icon area = left + width + gap. Text must start after. */
.page-mypage .mypage-input-icon {
  position: absolute;
  left: var(--mypage-input-icon-left);
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-text);
  opacity: 0.6;
  pointer-events: none;
  width: var(--mypage-input-icon-width);
  min-width: var(--mypage-input-icon-width);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.page-mypage .mypage-input-icon i {
  font-size: 0.875rem;
}

.page-mypage .mypage-input-with-icon,
.page-mypage input.mypage-input.mypage-input-with-icon {
  box-sizing: border-box;
  padding-left: var(--mypage-input-icon-total);
}

.page-mypage .mypage-input-with-icon:-webkit-autofill,
.page-mypage .mypage-input-with-icon:-webkit-autofill:hover,
.page-mypage .mypage-input-with-icon:-webkit-autofill:focus {
  padding-left: var(--mypage-input-icon-total);
}

.page-mypage .mypage-radio-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.page-mypage .mypage-radio-fieldset legend {
  margin-bottom: 0.375rem;
}

.page-mypage .mypage-radio-group {
  display: flex;
  align-items: center;
  gap: var(--mypage-spacing-xl);
  flex-wrap: wrap;
}

.page-mypage .mypage-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: var(--mypage-font-size-sm);
  color: var(--theme-text);
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.75rem;
  border-radius: var(--mypage-radius-button);
  min-height: var(--mypage-tap-min);
  min-width: 5rem;
}

.page-mypage .mypage-radio-option:hover {
  background-color: rgba(var(--theme-primary-rgb, 37, 99, 235), 0.06);
}

.page-mypage .mypage-radio {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--theme-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.page-mypage .mypage-toggle {
  position: relative;
  display: inline-flex;
  width: 3.5rem;
  height: 1.75rem;
  cursor: pointer;
  flex-shrink: 0;
}

.page-mypage .mypage-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.page-mypage .mypage-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--theme-border);
  border-radius: 9999px;
  transition: background-color 0.2s;
}

.page-mypage .mypage-toggle-slider::before {
  content: '';
  position: absolute;
  height: 1.25rem;
  width: 1.25rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.page-mypage .mypage-toggle-input:checked+.mypage-toggle-slider {
  background-color: var(--theme-primary);
}

.page-mypage .mypage-toggle-input:checked+.mypage-toggle-slider::before {
  transform: translateX(1.75rem);
}

.page-mypage .mypage-toggle-input:focus-visible+.mypage-toggle-slider {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

.page-mypage .mypage-profile-actions {
  background-color: var(--theme-background);
}

/* ============================================
   PREMIUM MINIMAL REFINEMENT
   Apple / Linear / Notion aesthetic — clean surfaces, no gradients,
   hierarchy by typography + rhythm. Overrides earlier rules.
   ============================================ */

/* Soft page surface */
.page-mypage {
  background: var(--theme-background, #FAFAF9);
}

/* Reset gradients on stat cards (dashboard utility classes) */
.page-mypage .mypage-stat-card,
.page-mypage .mypage-stat-card.theme-gradient-info,
.page-mypage .mypage-stat-card.theme-gradient-success,
.page-mypage .mypage-stat-card.theme-gradient-error,
.page-mypage .mypage-stat-card.theme-gradient-warning,
.page-mypage .mypage-stat-card.theme-gradient-primary {
  background: var(--theme-card-background, #FFFFFF) !important;
  background-image: none !important;
  color: var(--theme-text, #1F1F1F) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  border: none;
  transform: none !important;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.page-mypage .mypage-stat-card:hover {
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 2%, var(--theme-card-background, #FFFFFF)) !important;
  box-shadow: none !important;
  transform: none !important;
}

.page-mypage .mypage-stat-card .mypage-stat-card__label,
.page-mypage .mypage-stat-card .mypage-stat-card__cta,
.page-mypage .mypage-text-on-primary {
  color: var(--theme-text, #1F1F1F) !important;
  opacity: 1;
  text-shadow: none;
}

.page-mypage .mypage-stat-card__label {
  font-size: 0.75rem !important;
  font-weight: 500;
  color: var(--theme-text-muted, #8E8E93) !important;
  letter-spacing: 0.04em;
  text-transform: none;
}

.page-mypage .mypage-stat-card__cta {
  font-size: 0.8125rem !important;
  color: var(--theme-text-muted, #6E6E73) !important;
  opacity: 0.85;
}

.page-mypage .mypage-stat-card__icon {
  width: 36px !important;
  height: 36px !important;
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 8%, transparent) !important;
  color: var(--theme-primary, #5C2D2D) !important;
  font-size: 0.9375rem;
}

.page-mypage .mypage-card__number {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  color: var(--theme-text, #1F1F1F) !important;
}

/* Section card — flat surface, no header gradient */
.page-mypage .mypage-section-card {
  background: var(--theme-card-background, #FFFFFF);
  border-radius: 16px;
  border: none;
  box-shadow: none;
  overflow: hidden;
}

.page-mypage .mypage-section-card__header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 1.5rem 1.75rem 0.875rem !important;
}

.page-mypage .mypage-section-card__title {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-text-muted, #6E6E73) !important;
  font-family: inherit !important;
}

.page-mypage .mypage-section-card__header i {
  color: var(--theme-text-muted, #8E8E93) !important;
}

.page-mypage .mypage-section-card__body {
  padding: 0.5rem 1.75rem 1.75rem !important;
}

/* Content card */
.page-mypage .mypage-card {
  background: var(--theme-card-background, #FFFFFF);
  border-radius: 16px;
  box-shadow: none;
  border: none;
}

.page-mypage .mypage-card__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-text-muted, #6E6E73);
}

/* Summary card (payment total) — flat soft surface, readable */
.page-mypage .mypage-summary-card {
  background: var(--theme-card-background, #FFFFFF) !important;
  background-image: none !important;
  border-radius: 16px;
  border: none;
  box-shadow: none;
  padding: 1.75rem !important;
  margin-bottom: 1.5rem;
}

.page-mypage .mypage-summary-card-bg {
  color: var(--theme-text, #1F1F1F) !important;
}

.page-mypage .mypage-summary-card__label {
  font-size: 0.75rem !important;
  font-weight: 500;
  color: var(--theme-text-muted, #8E8E93) !important;
  opacity: 1;
  letter-spacing: 0.04em;
  margin-bottom: 0.375rem;
}

.page-mypage .mypage-summary-card__amount {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: clamp(1.75rem, 3.6vw, 2.25rem) !important;
  font-weight: 500;
  color: var(--theme-text, #1F1F1F) !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.page-mypage .mypage-summary-card__subtext {
  font-size: 0.8125rem !important;
  color: var(--theme-text-muted, #8E8E93) !important;
  opacity: 1;
  margin-top: 0.5rem;
}

/* Status badge inside summary — soft tint, readable */
.page-mypage .mypage-summary-card .mypage-status-badge {
  background: color-mix(in srgb, var(--theme-success, #16a34a) 10%, transparent) !important;
  color: var(--theme-success, #16a34a) !important;
  padding: 0.4rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-summary-card .mypage-status-badge i {
  font-size: 0.6875rem;
}

/* Generic status badges — readable */
.page-mypage .mypage-status-badge--default {
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 10%, transparent) !important;
  color: var(--theme-primary, #5C2D2D) !important;
}

/* Info row */
.page-mypage .mypage-info-row {
  padding-block: 0.5rem;
}

.page-mypage .mypage-info-row__label {
  font-size: 0.75rem !important;
  color: var(--theme-text-muted, #8E8E93);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-info-row__value {
  font-size: 0.9375rem !important;
  color: var(--theme-text, #1F1F1F);
  line-height: 1.55;
}

.page-mypage .mypage-info-row__icon {
  background: transparent !important;
  color: var(--theme-text-muted, #8E8E93) !important;
  width: auto !important;
  height: auto !important;
}

/* Page header */
.page-mypage .mypage-page-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}

.page-mypage .mypage-page-title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Borders soft hairline only where strictly needed */
.page-mypage .mypage-border-bottom,
.page-mypage .mypage-border-top {
  border-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
}

/* Table rows airy */
.page-mypage .mypage-table-row {
  padding: 1rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent);
}

.page-mypage .mypage-table-row:last-child {
  border-bottom: none;
}

/* Action bar */
.page-mypage .mypage-action-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Drop transform/scale hover globally on mypage interactive */
.page-mypage [class*="hover:scale"],
.page-mypage [class*="hover:-translate"] {
  transition: opacity 0.15s ease, background-color 0.15s ease !important;
}

.page-mypage [class*="hover:scale"]:hover,
.page-mypage [class*="hover:-translate"]:hover {
  transform: none !important;
}

/* ============================================
   PASS 2 — Tailwind-utility de-escalation + hero refinement
   ============================================ */

/* Wrapper card: drop Tailwind shadow-lg/shadow-md inside mypage */
.page-mypage .mypage-card.shadow-lg,
.page-mypage .mypage-card.shadow-md,
.page-mypage .mypage-card.shadow-xl,
.page-mypage .theme-card {
  box-shadow: none !important;
  border: none !important;
  background: var(--theme-card-background, #FFFFFF) !important;
}

/* Welcome hero: flatten gradient, dark text on light surface */
.page-mypage .mypage-hero,
.page-mypage .mypage-hero.theme-gradient-primary,
.page-mypage .mypage-hero.theme-gradient-info,
.page-mypage .mypage-hero.theme-gradient-success {
  background: var(--theme-card-background, #FFFFFF) !important;
  background-image: none !important;
  color: var(--theme-text, #1F1F1F) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 1.75rem !important;
}

.page-mypage .mypage-hero .mypage-text-on-primary,
.page-mypage .mypage-hero .mypage-text-on-primary-subtle,
.page-mypage .mypage-hero__title,
.page-mypage .mypage-hero__subtext {
  color: var(--theme-text, #1F1F1F) !important;
  text-shadow: none;
  opacity: 1;
}

.page-mypage .mypage-hero__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: clamp(1.25rem, 2.8vw, 1.5rem) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 0.375rem;
}

.page-mypage .mypage-hero__subtext {
  color: var(--theme-text-muted, #8E8E93) !important;
  font-size: 0.875rem;
}

.page-mypage .mypage-hero__btn,
.page-mypage .mypage-hero__btn--light {
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 8%, transparent) !important;
  color: var(--theme-primary, #5C2D2D) !important;
  border: none !important;
  border-radius: 999px;
  padding: 0.5rem 1rem !important;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none !important;
}

.page-mypage .mypage-hero__btn:hover {
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 14%, transparent) !important;
}

/* Order/Payment summary panel — inline gradient style overridden by mypage scope */
.page-mypage .mypage-summary-panel,
.page-mypage [style*="linear-gradient"][class*="rounded-xl"]:not(.theme-btn-primary):not(.theme-btn-secondary) {
  background: var(--theme-card-background, #FFFFFF) !important;
  background-image: none !important;
  color: var(--theme-text, #1F1F1F) !important;
  box-shadow: none !important;
}

/* Stat card icon white-on-gradient → tinted neutral on flat */
.page-mypage .mypage-stat-card__icon i.mypage-text-on-primary,
.page-mypage .mypage-stat-card__icon i {
  color: var(--theme-primary, #5C2D2D) !important;
  font-size: 1rem !important;
  opacity: 1;
}

.page-mypage .mypage-stat__value {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.625rem !important;
  font-weight: 500 !important;
  color: var(--theme-text, #1F1F1F) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 0.625rem;
}

/* Page padding & rhythm consistency */
.page-mypage .mypage-stat-card {
  padding: 1.5rem !important;
  min-height: auto !important;
}

.page-mypage .mypage-card {
  padding: 1.75rem !important;
}

@media (min-width: 768px) {
  .page-mypage .mypage-card {
    padding: 2rem !important;
  }
}

/* Grid spacing */
.page-mypage .grid.gap-6 {
  gap: 1.25rem !important;
}

@media (min-width: 1024px) {
  .page-mypage .grid.gap-6 {
    gap: 1.5rem !important;
  }
}

/* Borders soft / hairline replacement for any leftover Tailwind border utilities */
.page-mypage .border,
.page-mypage .border-gray-100,
.page-mypage .border-gray-200,
.page-mypage [class*="border-gray-"] {
  border-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent) !important;
}

/* Inline accent border-left bars (warning/info notes) → soft tinted bg, no left bar */
.page-mypage .border-l-4,
.page-mypage .border-l-2,
.page-mypage [class*="border-l-"] {
  border-left: none !important;
}

/* Tables / lists — airy row padding */
.page-mypage table th,
.page-mypage table td {
  padding-block: 0.875rem !important;
  border-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent) !important;
}

/* Form inputs — clean, no heavy borders */
.page-mypage .mypage-card input[type="text"],
.page-mypage .mypage-card input[type="email"],
.page-mypage .mypage-card input[type="tel"],
.page-mypage .mypage-card input[type="password"],
.page-mypage .mypage-card select,
.page-mypage .mypage-card textarea {
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 10px;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page-mypage .mypage-card input:focus,
.page-mypage .mypage-card select:focus,
.page-mypage .mypage-card textarea:focus {
  outline: none;
  background: var(--theme-card-background, #FFFFFF);
  border-color: color-mix(in srgb, var(--theme-primary, #5C2D2D) 40%, transparent);
}

/* Reservation card (partials/reservation-card) — flat surface */
.page-mypage .mypage-reservation-card {
  background: var(--theme-card-background, #FFFFFF) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px;
}

/* ============================================
   PASS 3 — Enterprise polish (Linear/Stripe/Notion)
   ============================================ */

/* Soft status badges — neutralize saturated inline bg colors via secondary token */
.page-mypage .mypage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.625rem !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  border-radius: 999px !important;
  line-height: 1.2;
}

.page-mypage .mypage-badge i {
  font-size: 0.6875rem;
}

/* Reservation status badge — soft tint (overrides inline saturated bg) */
.page-mypage .mypage-reservation-card .mypage-badge[style*="background-color"],
.page-mypage .mypage-table-row .mypage-badge[style*="background-color"]:not(.theme-badge-info),
.page-mypage .mypage-section-card .mypage-badge[style*="background-color"]:not(.theme-badge-info) {
  background-color: color-mix(in srgb, currentColor 12%, transparent) !important;
  color: inherit;
}

/* Recent reservation row — clean two-column layout */
.page-mypage .mypage-table-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem !important;
  border-radius: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, transparent);
  transition: background-color 0.15s ease;
}

.page-mypage .mypage-table-row:hover {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent) !important;
}

.page-mypage .mypage-table-row>div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.page-mypage .mypage-table-row p {
  margin: 0;
}

.page-mypage .mypage-table-row .mypage-body-sm {
  font-size: 0.9375rem !important;
  font-weight: 500;
  color: var(--theme-text, #1F1F1F) !important;
}

.page-mypage .mypage-table-row .mypage-body-xs {
  font-size: 0.8125rem !important;
  color: var(--theme-text-muted, #8E8E93) !important;
  margin-top: 0.125rem;
}

/* Theme badge info — guests count chip neutral */
.page-mypage .theme-badge-info {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, transparent) !important;
  color: var(--theme-text-muted, #6E6E73) !important;
}

/* Cards section header — quieter icon, tighter rhythm */
.page-mypage .mypage-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
}

.page-mypage .mypage-card__header i {
  font-size: 0.875rem;
  opacity: 0.55;
}

/* Profile / form inputs — site-wide (not only within mypage-card) */
.page-mypage input[type="text"],
.page-mypage input[type="email"],
.page-mypage input[type="tel"],
.page-mypage input[type="password"],
.page-mypage input[type="number"],
.page-mypage input[type="search"],
.page-mypage input[type="date"],
.page-mypage select,
.page-mypage textarea {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 2.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 10px;
  padding: 0.65rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--theme-text, #1F1F1F);
  width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.page-mypage input:hover,
.page-mypage select:hover,
.page-mypage textarea:hover {
  border-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 14%, transparent);
}

.page-mypage input:focus,
.page-mypage select:focus,
.page-mypage textarea:focus {
  outline: none;
  background: var(--theme-card-background, #FFFFFF);
  border-color: color-mix(in srgb, var(--theme-primary, #5C2D2D) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #5C2D2D) 10%, transparent);
}

.page-mypage label,
.page-mypage .mypage-profile-label {
  font-size: 0.8125rem !important;
  font-weight: 500;
  color: var(--theme-text-muted, #6E6E73);
  letter-spacing: 0.01em;
  margin-bottom: 0.375rem;
  display: block;
}

/* Section group title (form section header) */
.page-mypage .mypage-section-card__header,
.page-mypage .mypage-card__header {
  position: relative;
}

/* Profile actions bar — flat, no card-in-card */
.page-mypage .mypage-profile-actions {
  background-color: transparent !important;
  border-top: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 7%, transparent);
  padding-top: 1.25rem !important;
  margin-top: 1.5rem;
}

/* Reservation card actions bar */
.page-mypage .mypage-reservation-card__actions {
  border-top-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 7%, transparent) !important;
  padding-top: 1rem !important;
}

/* Buttons — consistent enterprise scale */
.page-mypage .mypage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.page-mypage .mypage-btn.btn-lg {
  padding: 0.65rem 1.25rem;
  font-size: 0.9375rem;
}

.page-mypage .mypage-btn.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
}

.page-mypage .mypage-btn:active {
  transform: translateY(0.5px);
}

/* Reservation tabs — pill segmented */
.page-mypage .mypage-reservation-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent);
  border-radius: 12px;
}

.page-mypage .mypage-reservation-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--theme-text-muted, #6E6E73);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-mypage .mypage-reservation-tab--inactive:hover {
  color: var(--theme-text, #1F1F1F);
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent);
}

.page-mypage .mypage-reservation-tab--active {
  background: var(--theme-card-background, #FFFFFF);
  color: var(--theme-text, #1F1F1F);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
}

.page-mypage .mypage-reservation-tab__count {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent);
  color: var(--theme-text-muted, #6E6E73);
}

.page-mypage .mypage-reservation-tab--active .mypage-reservation-tab__count {
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 12%, transparent);
  color: var(--theme-primary, #5C2D2D);
}

/* Empty state — refined */
.page-mypage .mypage-empty-state,
.page-mypage .mypage-empty-state-card {
  padding: 2rem 1rem !important;
  text-align: center;
  color: var(--theme-text-muted, #8E8E93) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.page-mypage .mypage-empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent) !important;
  color: var(--theme-text-muted, #8E8E93) !important;
}

.page-mypage .mypage-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-primary, #5C2D2D) !important;
}

.page-mypage .mypage-empty-state__cta:hover {
  text-decoration: underline;
}

/* Payment stat / summary cards — quieter */
.page-mypage .mypage-payment-stat-card {
  background: var(--theme-card-background, #FFFFFF) !important;
  border-radius: 14px;
  border: none !important;
  box-shadow: none !important;
  padding: 1.25rem !important;
}

.page-mypage .mypage-payment-stat-label {
  font-size: 0.75rem !important;
  color: var(--theme-text-muted, #8E8E93) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.page-mypage .mypage-payment-stat-value {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.5rem !important;
  font-weight: 500;
  color: var(--theme-text, #1F1F1F) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 0.375rem;
}

.page-mypage .mypage-payment-stat-icon {
  width: 32px !important;
  height: 32px !important;
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 8%, transparent) !important;
  color: var(--theme-primary, #5C2D2D) !important;
  font-size: 0.875rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Payment filter buttons — segmented pill */
.page-mypage .mypage-payment-filter-btn {
  padding: 0.45rem 0.875rem !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  border: none !important;
  background: transparent;
  color: var(--theme-text-muted, #6E6E73);
  transition: background-color 0.15s, color 0.15s;
}

.page-mypage .mypage-payment-filter-btn:hover {
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent);
  color: var(--theme-text, #1F1F1F);
}

/* FullCalendar — fill colored event chip with soft tint */
.page-mypage #calendar .fc-event,
.page-mypage #calendar .fc-event-success,
.page-mypage #calendar .fc-event-warning {
  background-color: color-mix(in srgb, var(--theme-primary, #5C2D2D) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary, #5C2D2D) 20%, transparent) !important;
  box-shadow: none !important;
  color: var(--theme-primary, #5C2D2D) !important;
}

.page-mypage #calendar .fc-event div[style] {
  background-color: transparent !important;
  color: var(--theme-primary, #5C2D2D) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  padding: 0.05rem 0.25rem !important;
}

.page-mypage #calendar .fc-toolbar-chunk button {
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent) !important;
  background: transparent !important;
  color: var(--theme-text-muted, #6E6E73) !important;
  border-radius: 8px !important;
  padding: 0.3rem 0.75rem !important;
}

.page-mypage #calendar .fc-toolbar-chunk button:hover {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent) !important;
  color: var(--theme-text, #1F1F1F) !important;
}

.page-mypage #calendar .fc-col-header-cell {
  background-color: transparent !important;
  border: none !important;
}

.page-mypage #calendar .fc-col-header-cell-cushion {
  color: var(--theme-text-muted, #8E8E93) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
}

.page-mypage #calendar .fc-scrollgrid,
.page-mypage #calendar .fc-scrollgrid td,
.page-mypage #calendar .fc-scrollgrid th {
  border-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent) !important;
}

/* Log entry rows */
.page-mypage .mypage-log-entry {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, transparent);
}

.page-mypage .mypage-log-entry:last-child {
  border-bottom: none;
}

.page-mypage .mypage-log-entry-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 8%, transparent);
  color: var(--theme-primary, #5C2D2D);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Avatar chip (welcome hero) */
.page-mypage .mypage-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 10%, transparent);
  color: var(--theme-primary, #5C2D2D);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-weight: 500;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Inbox list row */
.page-mypage .mypage-inbox-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, transparent);
  transition: background-color 0.15s ease;
}

.page-mypage .mypage-inbox-row:hover {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent);
}

/* Cancel modal overlay — clean */
.page-mypage .fixed.inset-0[class*="bg-black"] {
  backdrop-filter: blur(6px);
}

/* Chart container background canvas */
.page-mypage canvas {
  background: transparent !important;
}

/* Strip shadow-sm/md/lg/xl utilities application-wide inside mypage */
.page-mypage .shadow-sm,
.page-mypage .shadow-md,
.page-mypage .shadow-lg,
.page-mypage .shadow-xl {
  box-shadow: none !important;
}

/* Soft block tints (badge-info-bg surfaces) — quieter, no border */
.page-mypage [style*="--theme-badge-info-bg"],
.page-mypage [style*="theme-badge-info-bg"] {
  border: none !important;
}

/* ============================================
   PASS 4 — Enterprise density & information architecture
   Tighter rhythm, dashboard SaaS grid, denser data tables,
   consistent page-header pattern, refined focus & states.
   ============================================ */

/* Layout container — comfortable max-width, refined padding */
.page-mypage .mypage-container {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .page-mypage .mypage-container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .page-mypage .mypage-container {
    padding-inline: 2rem;
  }
}

/* Page header (x-mypage.page-header) — quiet, sticky title pattern */
.page-mypage .mypage-page-header,
.page-mypage [class*="page-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent);
}

.page-mypage .mypage-page-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  color: var(--theme-text, #1F1F1F);
}

/* Section title outside of section-card */
.page-mypage .mypage-section__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important;
  font-weight: 500;
  text-align: left !important;
  margin-bottom: 1.25rem !important;
  color: var(--theme-text, #1F1F1F);
}

/* Compact card padding — denser SaaS rhythm */
.page-mypage .mypage-card {
  padding: 1.25rem !important;
}

@media (min-width: 768px) {
  .page-mypage .mypage-card {
    padding: 1.5rem !important;
  }
}

.page-mypage .mypage-stat-card {
  padding: 1.125rem 1.25rem !important;
}

/* KPI grid — better proportions, denser */
.page-mypage .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
  gap: 0.875rem !important;
}

@media (min-width: 1024px) {
  .page-mypage .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    gap: 1rem !important;
  }
}

.page-mypage .mypage-stat__value {
  font-size: 1.5rem !important;
  margin-top: 0.5rem !important;
}

.page-mypage .mypage-stat-card__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

.page-mypage .mypage-stat-card__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  font-size: 0.75rem !important;
}

/* Hero — denser, no chunky padding */
.page-mypage .mypage-hero {
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.25rem;
}

.page-mypage .mypage-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.9375rem;
}

/* Dashboard primary two-column grid */
.page-mypage .mypage-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-dashboard-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* Recent reservation row — denser inline layout */
.page-mypage .mypage-table-row {
  padding: 0.75rem 0.875rem !important;
  border-radius: 8px !important;
}

.page-mypage .mypage-table-row .mypage-body-sm {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.page-mypage .mypage-table-row .mypage-body-xs {
  font-size: 0.75rem !important;
}

.page-mypage .mypage-table-row>div:first-child>.space-y-1>p {
  margin: 0;
}

/* Card header — denser */
.page-mypage .mypage-card__header {
  margin-bottom: 0.75rem;
}

.page-mypage .mypage-card__title {
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em !important;
}

/* Section card — denser */
.page-mypage .mypage-section-card__header {
  padding: 1.125rem 1.25rem 0.5rem !important;
}

.page-mypage .mypage-section-card__body {
  padding: 0.25rem 1.25rem 1.25rem !important;
}

@media (min-width: 768px) {
  .page-mypage .mypage-section-card__header {
    padding: 1.25rem 1.5rem 0.5rem !important;
  }

  .page-mypage .mypage-section-card__body {
    padding: 0.25rem 1.5rem 1.5rem !important;
  }
}

/* Reservation card — denser */
.page-mypage .mypage-reservation-card {
  padding: 1.125rem !important;
}

.page-mypage .mypage-reservation-card h3.mypage-card__title {
  font-size: 0.9375rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  color: var(--theme-text, #1F1F1F) !important;
  font-family: inherit !important;
}

.page-mypage .mypage-reservation-card .mypage-reservation-dl {
  row-gap: 0.5rem !important;
}

.page-mypage .mypage-reservation-card .mypage-reservation-dt {
  font-size: 0.75rem !important;
  color: var(--theme-text-muted, #8E8E93) !important;
  font-weight: 500;
}

.page-mypage .mypage-reservation-card .mypage-reservation-dd {
  font-size: 0.875rem !important;
  color: var(--theme-text, #1F1F1F);
  font-variant-numeric: tabular-nums;
}

/* Section title under section-card */
.page-mypage .mypage-section-card__title {
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em !important;
}

/* Filter / search form bar — denser */
.page-mypage .mypage-card form.grid {
  gap: 0.875rem !important;
}

/* Payment / list row table — denser */
.page-mypage table {
  font-size: 0.875rem;
}

.page-mypage table th {
  font-size: 0.6875rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-muted, #8E8E93);
  font-weight: 600;
}

.page-mypage table th,
.page-mypage table td {
  padding-block: 0rem !important;
}

/* Filter section gradient — strip */
.page-mypage [style*="linear-gradient"][class*="rounded"]:not(button):not(a) {
  background-image: none !important;
  background-color: transparent !important;
}

.page-mypage .mypage-section-card__header[style*="linear-gradient"] {
  background-image: none !important;
}

/* Buttons — site-wide pill scale */
.page-mypage .mypage-btn-primary-bg {
  background-color: var(--theme-primary, #5C2D2D) !important;
  color: var(--theme-button-text, #fff) !important;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: none;
  transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-primary, #5C2D2D) 20%, transparent);
}

.page-mypage .mypage-btn-primary-bg:hover {
  background-color: color-mix(in srgb, var(--theme-primary, #5C2D2D) 90%, #000) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--theme-primary, #5C2D2D) 30%, transparent);
}

.page-mypage .mypage-btn-secondary-bg {
  background-color: transparent !important;
  color: var(--theme-text, #1F1F1F) !important;
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 12%, transparent) !important;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.page-mypage .mypage-btn-secondary-bg:hover {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent) !important;
}

.page-mypage .mypage-btn.btn-lg {
  padding: 0.6rem 1.125rem;
  font-size: 0.875rem;
}

/* Cancel link styling */
.page-mypage a.mypage-text-theme-subtle {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.875rem;
  border-radius: 10px;
  transition: background-color 0.15s, color 0.15s;
}

.page-mypage a.mypage-text-theme-subtle:hover {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent);
  color: var(--theme-text, #1F1F1F);
}

/* Profile form grid: side-by-side 姓/名 */
.page-mypage .mypage-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .page-mypage .mypage-profile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Input with icon wrapper */
.page-mypage .mypage-input-wrapper {
  position: relative;
}

.page-mypage .mypage-input-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-text-muted, #8E8E93);
  font-size: 0.875rem;
  pointer-events: none;
}

.page-mypage .mypage-input-with-icon {
  padding-left: 2.375rem !important;
}

/* Radio group — pill */
.page-mypage .mypage-radio-group {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent);
  border-radius: 10px;
}

.page-mypage .mypage-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--theme-text-muted, #6E6E73);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.page-mypage .mypage-radio-option:has(input:checked) {
  background: var(--theme-card-background, #FFFFFF);
  color: var(--theme-text, #1F1F1F);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
}

.page-mypage .mypage-radio {
  accent-color: var(--theme-primary, #5C2D2D);
}

/* Toggle row — flat row */
.page-mypage .mypage-profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.page-mypage .mypage-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

/* Profile error */
.page-mypage .mypage-profile-error {
  color: var(--theme-error, #DC2626);
  font-size: 0.75rem;
  margin-top: 0.375rem;
}

/* Inbox list — proper enterprise rows */
.page-mypage .inbox-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent);
}

.page-mypage .inbox-index__item {
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, transparent);
  transition: background-color 0.15s ease;
}

.page-mypage .inbox-index__item:hover {
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent);
}

.page-mypage .inbox-index__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  text-decoration: none;
  color: inherit;
}

.page-mypage .inbox-index__link-main {
  flex: 1 1 auto;
  min-width: 0;
}

.page-mypage .inbox-index__subject {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--theme-text, #1F1F1F);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-mypage .inbox-index__subject--unread {
  font-weight: 600;
}

.page-mypage .inbox-index__shop {
  font-size: 0.8125rem;
  color: var(--theme-text-muted, #8E8E93);
  margin: 0.125rem 0 0;
}

.page-mypage .inbox-index__date {
  font-size: 0.75rem;
  color: var(--theme-text-muted, #8E8E93);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.page-mypage .inbox-index__item--unread {
  background-color: color-mix(in srgb, var(--theme-primary, #5C2D2D) 3%, transparent);
}

.page-mypage .inbox-unread-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--theme-primary, #5C2D2D) 12%, transparent);
  color: var(--theme-primary, #5C2D2D);
  border-radius: 999px;
}

.page-mypage .inbox-index__tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.page-mypage .inbox-index__tab {
  padding: 0.4rem 0.875rem;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--theme-text-muted, #6E6E73);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.page-mypage .inbox-index__tab--inactive:hover {
  color: var(--theme-text, #1F1F1F);
  background-color: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent);
}

.page-mypage .inbox-index__tab--active {
  background: var(--theme-card-background, #FFFFFF);
  color: var(--theme-text, #1F1F1F);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
}

.page-mypage .inbox-index__unread {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  color: var(--theme-text-muted, #6E6E73);
}

.page-mypage .inbox-index__unread-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-primary, #5C2D2D);
}

.page-mypage .inbox-index__empty {
  text-align: center;
  padding: 3rem 1rem;
}

.page-mypage .inbox-index__empty-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, transparent);
  color: var(--theme-text-muted, #8E8E93);
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.page-mypage .inbox-index__pagination {
  margin-top: 1.25rem;
}

/* Reservation tab pill outer wrapper — strip inline border ring */
.page-mypage .mypage-reservation-tabs>div[style*="border"] {
  border: none !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 4%, transparent);
  border-radius: 12px;
  padding: 0.25rem;
  overflow: visible !important;
}

/* Mobile menu / dropdown surfaces */
.page-mypage [x-cloak] {
  display: none !important;
}

/* Focus visibility — accessible */
.page-mypage a:focus-visible,
.page-mypage button:focus-visible,
.page-mypage input:focus-visible,
.page-mypage select:focus-visible,
.page-mypage textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary, #5C2D2D) 60%, transparent);
  outline-offset: 2px;
}

.page-mypage .mypage-reservation-tab:focus-visible,
.page-mypage .mypage-payment-filter-btn:focus-visible {
  outline-offset: 0;
}

/* Reduce wrapper container card chrome — drop heavy double-card */
.page-mypage .mypage-card.mypage-bg-card>.mypage-page-header {
  margin-top: -0.25rem;
}

/* Hero CTA: secondary "プロフィール編集" — softer */
.page-mypage .mypage-hero__btn--light {
  background: var(--theme-card-background, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 10%, transparent) !important;
  color: var(--theme-text, #1F1F1F) !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 0.8125rem !important;
}

.page-mypage .mypage-hero__btn--light:hover {
  background: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, transparent) !important;
}

/* Mobile responsive — KPI grid */
@media (max-width: 640px) {
  .page-mypage .mypage-stat-card {
    padding: 1rem !important;
  }

  .page-mypage .mypage-stat__value {
    font-size: 1.375rem !important;
  }

  .page-mypage .mypage-hero {
    padding: 1rem 1.125rem !important;
  }

  .page-mypage .mypage-hero__title {
    font-size: 1.0625rem !important;
  }
}


/* ============================================
   DASHBOARD REDESIGN (2026-05) — premium SaaS layout
   Scoped to .page-mypage. Tokens reuse --theme-*.
   ============================================ */

.page-mypage .mypage-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.page-mypage .mypage-dash-header__id {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.page-mypage .mypage-dash-header__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 60%, #000));
  color: var(--theme-button-text, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.page-mypage .mypage-dash-header__name-block {
  min-width: 0;
}

.page-mypage .mypage-dash-header__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0;
  font-weight: 600;
}

.page-mypage .mypage-dash-header__name {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0.125rem 0 0.125rem;
  line-height: 1.2;
}

.page-mypage .mypage-dash-header__meta {
  font-size: 0.8125rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0;
}

.page-mypage .mypage-dash-header__meta i {
  margin-right: 0.375rem;
  opacity: 0.7;
}

.page-mypage .mypage-dash-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 639px) {
  .page-mypage .mypage-dash-header {
    padding: 1rem;
  }

  .page-mypage .mypage-dash-header__actions {
    width: 100%;
  }

  .page-mypage .mypage-dash-header__actions .mypage-btn {
    flex: 1;
    justify-content: center;
  }
}

/* KPI strip */
.page-mypage .mypage-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.page-mypage .mypage-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem 0.75rem;
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--theme-text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.page-mypage .mypage-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--kpi-accent, var(--theme-primary));
  opacity: 0.85;
}

.page-mypage .mypage-kpi[data-tone="primary"] {
  --kpi-accent: var(--theme-primary);
}

.page-mypage .mypage-kpi[data-tone="success"] {
  --kpi-accent: var(--theme-success);
}

.page-mypage .mypage-kpi[data-tone="warning"] {
  --kpi-accent: var(--theme-warning);
}

.page-mypage .mypage-kpi[data-tone="info"] {
  --kpi-accent: var(--theme-info, var(--theme-primary));
}

.page-mypage .mypage-kpi[data-tone="accent"] {
  --kpi-accent: var(--theme-secondary, var(--theme-warning));
}

.page-mypage .mypage-kpi:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--kpi-accent) 30%, transparent);
  box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--kpi-accent) 50%, transparent);
}

.page-mypage .mypage-kpi[data-attention="true"] {
  border-color: color-mix(in srgb, var(--kpi-accent) 35%, transparent);
  background-color: color-mix(in srgb, var(--kpi-accent) 4%, var(--theme-card-background));
}

.page-mypage .mypage-kpi__label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-kpi__value {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--theme-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.page-mypage .mypage-kpi__unit {
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  letter-spacing: 0;
}

.page-mypage .mypage-kpi__foot {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--kpi-accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.page-mypage .mypage-kpi__foot i {
  font-size: 0.6875rem;
}

/* Dashboard grid */
.page-mypage .mypage-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-dash-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    align-items: start;
  }
}

.page-mypage .mypage-dash-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.page-mypage .mypage-dash-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-dash-side {
    position: sticky;
    top: 1rem;
  }
}

/* Next reservation hero card */
.page-mypage .mypage-next-card {
  position: relative;
  display: flex;
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 24px -16px rgba(0, 0, 0, 0.12);
}

.page-mypage .mypage-next-card__rail {
  width: 4px;
  flex-shrink: 0;
}

.page-mypage .mypage-next-card__body {
  flex: 1;
  padding: 1.125rem 1.375rem 1.25rem;
  min-width: 0;
}

.page-mypage .mypage-next-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.page-mypage .mypage-next-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-next-card__eyebrow i {
  color: var(--theme-primary);
  font-size: 0.875rem;
}

.page-mypage .mypage-next-card__countdown {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  color: var(--theme-primary);
  letter-spacing: 0.04em;
}

.page-mypage .mypage-next-card__main {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
}

.page-mypage .mypage-next-card__date-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background-color: color-mix(in srgb, var(--theme-text) 3%, transparent);
  border-radius: 10px;
  min-width: 86px;
}

.page-mypage .mypage-next-card__month {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-next-card__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  margin: 0.125rem 0;
}

.page-mypage .mypage-next-card__weekday {
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 500;
}

.page-mypage .mypage-next-card__detail {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-next-card__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0 0 0.625rem;
  line-height: 1.35;
}

.page-mypage .mypage-next-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem 1rem;
}

.page-mypage .mypage-next-card__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--theme-text);
}

.page-mypage .mypage-next-card__facts li i {
  width: 14px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-next-card__status i {
  font-size: 0.5rem !important;
  color: inherit !important;
}

.page-mypage .mypage-next-card__status {
  font-weight: 600;
}

.page-mypage .mypage-next-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-next-card--empty .mypage-next-card__body {
  padding: 1.75rem;
}

.page-mypage .mypage-next-empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-next-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  color: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.page-mypage .mypage-next-empty__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
}

.page-mypage .mypage-next-empty__sub {
  font-size: 0.8125rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0.125rem 0 0;
}

.page-mypage .mypage-next-empty>div {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 639px) {
  .page-mypage .mypage-next-card__main {
    flex-direction: column;
    gap: 0.875rem;
  }

  .page-mypage .mypage-next-card__date-block {
    flex-direction: row;
    gap: 0.75rem;
    align-self: flex-start;
    padding: 0.625rem 0.875rem;
    min-width: 0;
  }

  .page-mypage .mypage-next-card__day {
    font-size: 1.5rem;
    margin: 0;
  }

  .page-mypage .mypage-next-card__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Widget container */
.page-mypage .mypage-widget {
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 14px;
  overflow: hidden;
}

.page-mypage .mypage-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
}

.page-mypage .mypage-widget--tight .mypage-widget__head {
  padding: 0.75rem 1rem;
}

.page-mypage .mypage-widget__head-text {
  min-width: 0;
}

.page-mypage .mypage-widget__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.01em;
}

.page-mypage .mypage-widget__title i {
  font-size: 0.8125rem;
  color: var(--theme-primary);
  opacity: 0.9;
}

.page-mypage .mypage-widget__sub {
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0.1875rem 0 0;
}

.page-mypage .mypage-widget__more {
  font-size: 0.75rem;
  color: var(--theme-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-widget__more:hover {
  opacity: 0.75;
}

.page-mypage .mypage-widget__more i {
  font-size: 0.6875rem;
}

.page-mypage .mypage-widget__chart {
  position: relative;
  height: 220px;
  padding: 0.875rem 1rem 0.5rem;
}

.page-mypage .mypage-widget__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-widget__empty i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.page-mypage .mypage-widget__empty p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.page-mypage .mypage-widget__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--theme-primary);
  text-decoration: none;
  font-weight: 600;
}

/* Reservation list inside widget */
.page-mypage .mypage-res-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-mypage .mypage-res-list__item+.mypage-res-list__item {
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-res-list__link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.125rem;
  text-decoration: none !important;
  color: var(--theme-text);
  transition: background-color 0.15s ease;
}

.page-mypage .mypage-res-list__link:hover {
  background-color: color-mix(in srgb, var(--theme-text) 2.5%, transparent);
}

.page-mypage .mypage-res-list__date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  padding: 0.375rem;
  background-color: color-mix(in srgb, var(--theme-primary) 5%, transparent);
  border-radius: 8px;
  line-height: 1;
}

.page-mypage .mypage-res-list__month {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-primary);
  font-weight: 600;
}

.page-mypage .mypage-res-list__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  margin: 0.0625rem 0;
}

.page-mypage .mypage-res-list__wday {
  font-size: 0.625rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-res-list__body {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-res-list__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0 0 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mypage .mypage-res-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0;
}

.page-mypage .mypage-res-list__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.page-mypage .mypage-res-list__meta i {
  font-size: 0.625rem;
  opacity: 0.8;
}

.page-mypage .mypage-res-list__shop {
  color: var(--theme-text);
  opacity: 0.75;
}

.page-mypage .mypage-res-list__status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--s, var(--theme-primary)) 12%, transparent);
  color: var(--s, var(--theme-primary));
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* History list */
.page-mypage .mypage-history-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.page-mypage .mypage-history-list__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.125rem;
  text-decoration: none !important;
  color: var(--theme-text);
  transition: background-color 0.15s ease;
}

.page-mypage .mypage-history-list__row:hover {
  background-color: color-mix(in srgb, var(--theme-text) 2.5%, transparent);
}

.page-mypage .mypage-history-list__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-mypage .mypage-history-list__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.page-mypage .mypage-history-list__title {
  font-size: 0.875rem;
  color: var(--theme-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mypage .mypage-history-list__meta {
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-history-list__status {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Side calendar */
.page-mypage .mypage-side-calendar {
  padding: 0.5rem 0.75rem 0.75rem;
}

.page-mypage .mypage-side-calendar .fc-toolbar.fc-header-toolbar {
  margin-bottom: 0.5rem;
}

.page-mypage .mypage-side-calendar .fc-toolbar-title {
  font-size: 0.9375rem !important;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-weight: 500;
}

.page-mypage .mypage-side-calendar .fc-toolbar-chunk button {
  font-size: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent) !important;
  background-color: transparent !important;
  color: var(--theme-text) !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell-cushion {
  font-size: 0.625rem !important;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent)) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-number {
  font-size: 0.6875rem !important;
  color: var(--theme-text) !important;
  opacity: 0.7;
}

.page-mypage .mypage-side-calendar .fc-event {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.page-mypage .mypage-cal-pill {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-side-calendar .fc-event-warning .mypage-cal-pill {
  background-color: var(--theme-warning);
}

.page-mypage .mypage-side-calendar .fc-event-success .mypage-cal-pill {
  background-color: var(--theme-success);
}

/* Quick nav */
.page-mypage .mypage-quick-nav {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
}

.page-mypage .mypage-quick-nav__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  text-decoration: none !important;
  color: var(--theme-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-mypage .mypage-quick-nav__item:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 6%, transparent);
  color: var(--theme-primary);
}

.page-mypage .mypage-quick-nav__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--theme-text) 5%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--theme-text);
  opacity: 0.75;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.page-mypage .mypage-quick-nav__item:hover .mypage-quick-nav__icon {
  background-color: color-mix(in srgb, var(--theme-primary) 12%, transparent);
  color: var(--theme-primary);
  opacity: 1;
}

.page-mypage .mypage-quick-nav__item[data-tone="primary"] .mypage-quick-nav__icon {
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
  opacity: 1;
}

.page-mypage .mypage-quick-nav__label {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-quick-nav__chev {
  font-size: 0.6875rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-quick-nav__pill {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  background-color: var(--theme-warning);
  color: #fff;
  min-width: 18px;
  text-align: center;
}

/* Account snapshot */
.page-mypage .mypage-snapshot {
  margin: 0;
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.page-mypage .mypage-snapshot>div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-snapshot>div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-mypage .mypage-snapshot dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
  flex-shrink: 0;
}

.page-mypage .mypage-snapshot dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--theme-text);
  font-weight: 500;
  text-align: right;
  min-width: 0;
}

.page-mypage .mypage-snapshot__truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

/* ============================================
   RESERVATION CARD (2026-05) — list + detail use
   ============================================ */
.page-mypage .mypage-reservation-card {
  display: flex;
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.page-mypage .mypage-reservation-card:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 25%, transparent);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.page-mypage .mypage-reservation-card[data-status="canceled"] {
  opacity: 0.85;
}

.page-mypage .mypage-reservation-card__rail {
  width: 4px;
  flex-shrink: 0;
}

.page-mypage .mypage-reservation-card__inner {
  flex: 1;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

.page-mypage .mypage-reservation-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.page-mypage .mypage-reservation-card__id-block {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.page-mypage .mypage-reservation-card__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-reservation-card__id {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-reservation-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--s, var(--theme-primary)) 12%, transparent);
  color: var(--s, var(--theme-primary));
  letter-spacing: 0.03em;
}

.page-mypage .mypage-reservation-card__status i {
  font-size: 0.875rem;
}

.page-mypage .mypage-reservation-card__body {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}

.page-mypage .mypage-reservation-card__date-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.875rem;
  background-color: color-mix(in srgb, var(--theme-text) 3%, transparent);
  border-radius: 10px;
  min-width: 72px;
  line-height: 1;
}

.page-mypage .mypage-reservation-card__month {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-reservation-card__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  margin: 0.1875rem 0;
}

.page-mypage .mypage-reservation-card__weekday {
  font-size: 0.6875rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 500;
}

.page-mypage .mypage-reservation-card__facts {
  flex: 1;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.625rem 1.25rem;
  min-width: 0;
}

.page-mypage .mypage-reservation-card__facts>div {
  min-width: 0;
}

.page-mypage .mypage-reservation-card__facts-row--wide {
  grid-column: 1 / -1;
}

.page-mypage .mypage-reservation-card__facts dt {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin-bottom: 0.1875rem;
}

.page-mypage .mypage-reservation-card__facts dt i {
  font-size: 0.6875rem;
  color: var(--theme-primary);
  opacity: 0.7;
}

.page-mypage .mypage-reservation-card__facts dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--theme-text);
  font-weight: 500;
}

.page-mypage .mypage-reservation-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-btn-danger-bg {
  background-color: var(--theme-error);
  color: var(--theme-button-text, #fff);
  border: 1px solid var(--theme-error);
}

.page-mypage .mypage-btn-danger-bg:hover {
  opacity: 0.92;
}

@media (max-width: 639px) {
  .page-mypage .mypage-reservation-card__inner {
    padding: 0.875rem 1rem;
  }

  .page-mypage .mypage-reservation-card__body {
    flex-direction: column;
    gap: 0.875rem;
  }

  .page-mypage .mypage-reservation-card__date-block {
    flex-direction: row;
    align-self: flex-start;
    padding: 0.5rem 0.75rem;
    gap: 0.625rem;
    min-width: 0;
  }

  .page-mypage .mypage-reservation-card__day {
    font-size: 1.25rem;
    margin: 0;
  }

  .page-mypage .mypage-reservation-card__actions {
    justify-content: stretch;
  }

  .page-mypage .mypage-reservation-card__actions .mypage-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================
   SHARED PILL & TOKENS — used by detail pages
   ============================================ */
.page-mypage .mypage-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--s, var(--theme-primary)) 12%, transparent);
  color: var(--s, var(--theme-primary));
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.page-mypage .mypage-pill i {
  font-size: 0.5rem;
}

.page-mypage .mypage-pill--ghost {
  background-color: color-mix(in srgb, var(--theme-text) 6%, transparent);
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 60%, transparent));
}

.page-mypage .mypage-pill--success {
  --s: var(--theme-success);
}

.page-mypage .mypage-pill--warning {
  --s: var(--theme-warning);
}

.page-mypage .mypage-pill--error {
  --s: var(--theme-error);
}

.page-mypage .mypage-pill--info {
  --s: var(--theme-info, var(--theme-primary));
}

/* ============================================
   RESERVATION DETAIL PAGE
   ============================================ */
.page-mypage .mypage-detail-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-mypage .mypage-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}

.page-mypage .mypage-detail-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--theme-primary);
  font-weight: 500;
  text-decoration: none;
}

.page-mypage .mypage-detail-nav__back:hover {
  opacity: 0.75;
}

.page-mypage .mypage-detail-nav__back i {
  font-size: 0.75rem;
}

.page-mypage .mypage-detail-nav__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-detail-nav__crumb i {
  font-size: 0.625rem;
  opacity: 0.6;
}

.page-mypage .mypage-detail-hero {
  display: flex;
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1F1F1F) 8%, transparent);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 24px -16px rgba(0, 0, 0, 0.12);
}

.page-mypage .mypage-detail-hero__rail {
  width: 4px;
  flex-shrink: 0;
}

.page-mypage .mypage-detail-hero__body {
  flex: 1;
  padding: 1.25rem 1.5rem 1.375rem;
  min-width: 0;
}

.page-mypage .mypage-detail-hero__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-detail-hero__id-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.page-mypage .mypage-detail-hero__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-detail-hero__id {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-detail-hero__tags {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-detail-hero__main {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}

.page-mypage .mypage-detail-hero__date-block {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.125rem;
  background-color: color-mix(in srgb, var(--theme-text) 3%, transparent);
  border-radius: 12px;
  min-width: 96px;
  line-height: 1;
}

.page-mypage .mypage-detail-hero__month {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-detail-hero__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0;
}

.page-mypage .mypage-detail-hero__weekday {
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 500;
}

.page-mypage .mypage-detail-hero__detail {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-detail-hero__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--theme-text);
  line-height: 1.3;
  margin: 0;
}

.page-mypage .mypage-detail-hero__shop {
  font-size: 0.875rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0.375rem 0 0.625rem;
}

.page-mypage .mypage-detail-hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.page-mypage .mypage-detail-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--theme-text);
}

.page-mypage .mypage-detail-hero__facts li i {
  font-size: 0.8125rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  width: 14px;
  text-align: center;
}

@media (max-width: 639px) {
  .page-mypage .mypage-detail-hero__main {
    flex-direction: column;
    gap: 0.875rem;
  }

  .page-mypage .mypage-detail-hero__date-block {
    flex-direction: row;
    align-self: flex-start;
    padding: 0.625rem 0.875rem;
    gap: 0.75rem;
    min-width: 0;
  }

  .page-mypage .mypage-detail-hero__day {
    font-size: 1.75rem;
    margin: 0;
  }

  .page-mypage .mypage-detail-hero__title {
    font-size: 1.25rem;
  }
}

/* Detail grid */
.page-mypage .mypage-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-detail-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    align-items: start;
  }
}

.page-mypage .mypage-detail-grid__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.page-mypage .mypage-detail-grid__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-detail-grid__side {
    position: sticky;
    top: 1rem;
  }
}

/* DL */
.page-mypage .mypage-detail-dl {
  margin: 0;
  padding: 1rem 1.125rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.875rem 1.5rem;
}

.page-mypage .mypage-detail-dl>div {
  min-width: 0;
}

.page-mypage .mypage-detail-dl__row--wide {
  grid-column: 1 / -1;
}

.page-mypage .mypage-detail-dl dt {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin-bottom: 0.25rem;
}

.page-mypage .mypage-detail-dl dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--theme-text);
  font-weight: 500;
  word-break: break-word;
}

.page-mypage .mypage-detail-link {
  color: var(--theme-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.page-mypage .mypage-detail-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.page-mypage .mypage-detail-link i {
  font-size: 0.75rem;
}

/* Breakdown */
.page-mypage .mypage-breakdown {
  padding: 0.875rem 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-mypage .mypage-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--theme-text);
  padding: 0.375rem 0;
}

.page-mypage .mypage-breakdown__row span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.page-mypage .mypage-breakdown__row--discount {
  color: var(--theme-primary);
  border-top: 1px dashed color-mix(in srgb, var(--theme-text) 10%, transparent);
}

.page-mypage .mypage-breakdown__row--discount i {
  margin-right: 0.375rem;
}

.page-mypage .mypage-breakdown__row--total {
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 12%, transparent);
  padding-top: 0.75rem;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1rem;
  font-weight: 500;
}

.page-mypage .mypage-breakdown__row--total span:last-child {
  font-size: 1.125rem;
  color: var(--theme-primary);
}

/* Summary card */
.page-mypage .mypage-detail-summary__body {
  padding: 1rem 1.125rem 1.125rem;
}

.page-mypage .mypage-detail-summary__amount {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-detail-summary__body>.mypage-pill {
  margin-top: 0.5rem;
}

.page-mypage .mypage-detail-summary__meta {
  margin: 0.875rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-mypage .mypage-detail-summary__meta>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-detail-summary__meta>div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.page-mypage .mypage-detail-summary__meta dt {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  font-weight: 600;
}

.page-mypage .mypage-detail-summary__meta dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
  text-align: right;
}

/* Detail actions */
.page-mypage .mypage-detail-actions {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-mypage .mypage-detail-actions__btn {
  width: 100%;
}

.page-mypage .mypage-detail-actions__btn .mypage-btn {
  width: 100%;
  justify-content: center;
}

/* ============================================
   SHARED FILTER PANEL + SEGMENT
   ============================================ */
.page-mypage .mypage-filter-panel {
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  background-color: color-mix(in srgb, var(--theme-text) 2%, transparent);
}

.page-mypage .mypage-filter-form {
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-mypage .mypage-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.875rem 1rem;
}

.page-mypage .mypage-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.page-mypage .mypage-filter-field--wide {
  grid-column: 1 / -1;
}

.page-mypage .mypage-filter-field[data-show="0"] {
  display: none;
}

.page-mypage .mypage-filter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-filter-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-mypage .mypage-filter-range>.mypage-input {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-filter-range__sep {
  font-size: 0.8125rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
}

.page-mypage .mypage-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed color-mix(in srgb, var(--theme-text) 8%, transparent);
}

.page-mypage .mypage-segment {
  display: inline-flex;
  padding: 0.25rem;
  background-color: color-mix(in srgb, var(--theme-text) 5%, transparent);
  border-radius: 10px;
  gap: 0.125rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-segment__btn {
  border: none;
  background: transparent;
  padding: 0.4375rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--theme-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-mypage .mypage-segment__btn:hover {
  background-color: color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-segment__btn.is-active {
  background-color: var(--theme-card-background);
  color: var(--theme-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Ghost button variant */
.page-mypage .mypage-btn-ghost {
  background-color: transparent;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 65%, transparent));
  border: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
}

.page-mypage .mypage-btn-ghost:hover {
  background-color: color-mix(in srgb, var(--theme-text) 4%, transparent);
  color: var(--theme-text);
}

/* ============================================
   PAY-LIST (payment + points + generic txn list)
   ============================================ */
.page-mypage .mypage-pay-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-mypage .mypage-pay-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
  transition: background-color 0.15s ease;
}

.page-mypage .mypage-pay-list__item:first-child {
  border-top: none;
}

.page-mypage .mypage-pay-list__item:hover {
  background-color: color-mix(in srgb, var(--theme-text) 2%, transparent);
}

.page-mypage .mypage-pay-list__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--theme-primary) 8%, transparent);
  color: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.page-mypage .mypage-pay-list__icon[data-tone="success"] {
  background-color: color-mix(in srgb, var(--theme-success) 12%, transparent);
  color: var(--theme-success);
}

.page-mypage .mypage-pay-list__icon[data-tone="error"] {
  background-color: color-mix(in srgb, var(--theme-error) 12%, transparent);
  color: var(--theme-error);
}

.page-mypage .mypage-pay-list__icon[data-tone="warning"] {
  background-color: color-mix(in srgb, var(--theme-warning) 12%, transparent);
  color: var(--theme-warning);
}

.page-mypage .mypage-pay-list__body {
  min-width: 0;
}

.page-mypage .mypage-pay-list__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0 0 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-mypage .mypage-pay-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0;
}

.page-mypage .mypage-pay-list__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.page-mypage .mypage-pay-list__meta i {
  font-size: 0.625rem;
  opacity: 0.75;
}

.page-mypage .mypage-pay-list__amount-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.page-mypage .mypage-pay-list__amount {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.page-mypage .mypage-pay-list__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .page-mypage .mypage-pay-list__item {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon body" "amount amount" "actions actions";
    gap: 0.5rem 0.75rem;
  }

  .page-mypage .mypage-pay-list__icon {
    grid-area: icon;
  }

  .page-mypage .mypage-pay-list__body {
    grid-area: body;
  }

  .page-mypage .mypage-pay-list__amount-block {
    grid-area: amount;
    align-items: flex-start;
    flex-direction: row;
    gap: 0.5rem;
  }

  .page-mypage .mypage-pay-list__actions {
    grid-area: actions;
    justify-content: flex-end;
  }
}

/* ============================================
   LOG-LIST (login history)
   ============================================ */
.page-mypage .mypage-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-mypage .mypage-log-list__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-log-list__item:first-child {
  border-top: none;
}

.page-mypage .mypage-log-list__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--theme-success) 12%, transparent);
  color: var(--theme-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

.page-mypage .mypage-log-list__icon[data-tone="error"] {
  background-color: color-mix(in srgb, var(--theme-error) 12%, transparent);
  color: var(--theme-error);
}

.page-mypage .mypage-log-list__body {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-log-list__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0 0 0.125rem;
}

.page-mypage .mypage-log-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  font-size: 0.75rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  margin: 0;
}

.page-mypage .mypage-log-list__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.page-mypage .mypage-log-list__meta i {
  font-size: 0.625rem;
  opacity: 0.75;
}

/* ============================================
   NOTICE-LIST
   ============================================ */
.page-mypage .mypage-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-mypage .mypage-notice-item {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-notice-item:first-child {
  border-top: none;
}

.page-mypage .mypage-notice-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  color: var(--theme-primary);
}

.page-mypage .mypage-notice-item[data-tone="success"] .mypage-notice-item__icon {
  background-color: color-mix(in srgb, var(--theme-success) 12%, transparent);
  color: var(--theme-success);
}

.page-mypage .mypage-notice-item[data-tone="error"] .mypage-notice-item__icon {
  background-color: color-mix(in srgb, var(--theme-error) 12%, transparent);
  color: var(--theme-error);
}

.page-mypage .mypage-notice-item[data-tone="info"] .mypage-notice-item__icon {
  background-color: color-mix(in srgb, var(--theme-info, var(--theme-primary)) 12%, transparent);
  color: var(--theme-info, var(--theme-primary));
}

.page-mypage .mypage-notice-item[data-tone="ghost"] .mypage-notice-item__icon {
  background-color: color-mix(in srgb, var(--theme-text) 8%, transparent);
  color: var(--theme-text);
}

.page-mypage .mypage-notice-item__body {
  flex: 1;
  min-width: 0;
}

.page-mypage .mypage-notice-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.page-mypage .mypage-notice-item__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
  line-height: 1.5;
}

.page-mypage .mypage-notice-item__ref {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--theme-text) 6%, transparent);
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 65%, transparent));
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-notice-item__facts {
  margin: 0 0 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.375rem 1rem;
}

.page-mypage .mypage-notice-item__facts>div {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  min-width: 0;
}

.page-mypage .mypage-notice-item__facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  white-space: nowrap;
}

.page-mypage .mypage-notice-item__facts dd {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--theme-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-mypage .mypage-notice-item__time {
  font-size: 0.6875rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 55%, transparent));
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}

.page-mypage .mypage-notice-item__time i {
  font-size: 0.625rem;
  opacity: 0.7;
}

/* ============================================
   FAV-GRID
   ============================================ */
.page-mypage .mypage-fav-grid {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.875rem;
}

.page-mypage .mypage-fav-card {
  display: flex;
  flex-direction: column;
  background-color: var(--theme-card-background);
  border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.page-mypage .mypage-fav-card:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 25%, transparent);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.page-mypage .mypage-fav-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--theme-text) 4%, transparent);
}

.page-mypage .mypage-fav-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.page-mypage .mypage-fav-card:hover .mypage-fav-card__img {
  transform: scale(1.03);
}

.page-mypage .mypage-fav-card__body {
  padding: 0.875rem 1rem 0.5rem;
  flex: 1;
}

.page-mypage .mypage-fav-card__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.page-mypage .mypage-fav-card__meta {
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-mypage .mypage-fav-card__meta>div {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8125rem;
  color: var(--theme-text-muted, color-mix(in srgb, var(--theme-text) 60%, transparent));
}

.page-mypage .mypage-fav-card__meta dt {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.page-mypage .mypage-fav-card__meta dt i {
  color: var(--theme-primary);
  font-size: 0.75rem;
  opacity: 0.8;
}

.page-mypage .mypage-fav-card__meta dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-mypage .mypage-fav-card__price {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--theme-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-fav-card__actions {
  padding: 0.625rem 1rem 0.875rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-fav-card__actions .mypage-btn {
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.page-mypage .mypage-fav-card__actions form {
  display: inline-flex;
}

/* ============================================
   REFINEMENT PASS (2026-05-12) — premium dashboard
   Overrides earlier "REDESIGN" block.
   Direction: layered tonal surfaces, fewer borders,
   calmer accents, tighter rhythm, JP-first typography.
   ============================================ */

/* Surface tokens — neutral layered scale */
.page-mypage {
  --mp-surface-0: color-mix(in srgb, var(--theme-text, #1F1F1F) 2.5%, var(--theme-background, #F7F5F3));
  --mp-surface-1: var(--theme-card-background, #FFFFFF);
  --mp-surface-2: color-mix(in srgb, var(--theme-text, #1F1F1F) 3%, var(--theme-card-background));
  --mp-surface-3: color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, var(--theme-card-background));
  --mp-hairline: color-mix(in srgb, var(--theme-text, #1F1F1F) 6%, transparent);
  --mp-hairline-strong: color-mix(in srgb, var(--theme-text, #1F1F1F) 10%, transparent);
  --mp-muted: color-mix(in srgb, var(--theme-text, #1F1F1F) 56%, transparent);
  --mp-muted-soft: color-mix(in srgb, var(--theme-text, #1F1F1F) 72%, transparent);
}

.page-mypage main,
.page-mypage .mypage-layout-container {
  background-color: var(--mp-surface-0);
}

/* HEADER — denser, calmer */
.page-mypage .mypage-dash-header {
  padding: 1.125rem 1.25rem;
  border: none;
  background-color: var(--mp-surface-1);
  border-radius: 16px;
  box-shadow: 0 1px 0 var(--mp-hairline);
  margin-bottom: 0.875rem;
}

.page-mypage .mypage-dash-header__avatar {
  width: 40px;
  height: 40px;
  background: var(--theme-primary);
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}

.page-mypage .mypage-dash-header__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  color: var(--mp-muted);
}

.page-mypage .mypage-dash-header__name {
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.3;
  margin-top: 0.0625rem;
}

.page-mypage .mypage-dash-header__meta {
  font-size: 0.75rem;
  color: var(--mp-muted);
  margin-top: 0.1875rem;
}

/* KPI STRIP — remove accent rail, lean tonal */
.page-mypage .mypage-kpi-strip {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.page-mypage .mypage-kpi {
  padding: 0.875rem 1rem 0.875rem;
  background-color: var(--mp-surface-1);
  border: 1px solid var(--mp-hairline);
  border-radius: 14px;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value icon"
    "foot  icon";
  align-items: center;
  gap: 0.125rem 0.75rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page-mypage .mypage-kpi::before {
  display: none;
}

.page-mypage .mypage-kpi::after {
  content: '';
  grid-area: icon;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--kpi-accent) 10%, transparent);
  color: var(--kpi-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.page-mypage .mypage-kpi__label {
  grid-area: label;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--mp-muted);
}

.page-mypage .mypage-kpi__value {
  grid-area: value;
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  font-feature-settings: "palt" 1;
  margin-top: 0.125rem;
}

.page-mypage .mypage-kpi__unit {
  font-size: 0.75rem;
  color: var(--mp-muted);
  margin-left: 0.1875rem;
}

.page-mypage .mypage-kpi__foot {
  grid-area: foot;
  font-size: 0.6875rem;
  color: var(--mp-muted);
  font-weight: 500;
  margin-top: 0.1875rem;
}

.page-mypage .mypage-kpi__foot i {
  font-size: 0.625rem;
  color: var(--kpi-accent);
}

.page-mypage .mypage-kpi:hover {
  background-color: var(--mp-surface-2);
  border-color: var(--mp-hairline-strong);
  transform: none;
  box-shadow: none;
}

.page-mypage .mypage-kpi[data-attention="true"] {
  background-color: color-mix(in srgb, var(--kpi-accent) 5%, var(--mp-surface-1));
  border-color: color-mix(in srgb, var(--kpi-accent) 22%, transparent);
}

/* WIDGET — borderless, soft elevation, tighter heads */
.page-mypage .mypage-widget {
  background-color: var(--mp-surface-1);
  border: 1px solid var(--mp-hairline);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}

.page-mypage .mypage-widget__head {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--mp-hairline);
}

.page-mypage .mypage-widget--tight .mypage-widget__head {
  padding: 0.75rem 1rem;
}

.page-mypage .mypage-widget__title {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  font-weight: 500;
  color: var(--theme-text);
}

.page-mypage .mypage-widget__title i {
  color: var(--mp-muted-soft);
  font-size: 0.75rem;
  opacity: 0.85;
}

.page-mypage .mypage-widget__sub {
  color: var(--mp-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  margin-top: 0.125rem;
}

.page-mypage .mypage-widget__more {
  color: var(--theme-text);
  opacity: 0.65;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.page-mypage .mypage-widget__more:hover {
  opacity: 1;
  color: var(--theme-primary);
}

/* NEXT CARD — fuse with surface tone, refine date block */
.page-mypage .mypage-next-card {
  background-color: var(--mp-surface-1);
  border: 1px solid var(--mp-hairline);
  border-radius: 16px;
  box-shadow: none;
}

.page-mypage .mypage-next-card__rail {
  width: 3px;
  opacity: 0.85;
}

.page-mypage .mypage-next-card__body {
  padding: 1.125rem 1.375rem 1.25rem;
}

.page-mypage .mypage-next-card__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  color: var(--mp-muted);
}

.page-mypage .mypage-next-card__eyebrow i {
  color: var(--mp-muted-soft);
}

.page-mypage .mypage-next-card__countdown {
  background-color: var(--mp-surface-2);
  color: var(--theme-text);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.page-mypage .mypage-next-card__main {
  border-bottom: 1px solid var(--mp-hairline);
  padding-bottom: 1rem;
  margin-bottom: 0.875rem;
  gap: 1.125rem;
}

.page-mypage .mypage-next-card__date-block {
  background-color: var(--mp-surface-2);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  min-width: 84px;
}

.page-mypage .mypage-next-card__month {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--mp-muted);
}

.page-mypage .mypage-next-card__day {
  font-size: 2.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.page-mypage .mypage-next-card__weekday {
  font-size: 0.6875rem;
  color: var(--mp-muted);
}

.page-mypage .mypage-next-card__title {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-feature-settings: "palt" 1;
  line-height: 1.35;
}

.page-mypage .mypage-next-card__facts li i {
  color: var(--mp-muted-soft);
}

.page-mypage .mypage-next-card__facts li {
  font-size: 0.8125rem;
  color: var(--theme-text);
}

.page-mypage .mypage-next-empty__icon {
  background-color: var(--mp-surface-2);
  color: var(--theme-primary);
}

/* RES-LIST — denser, no chip-blue, calmer accents */
.page-mypage .mypage-res-list__link {
  padding: 0.6875rem 1.125rem;
  gap: 0.875rem;
}

.page-mypage .mypage-res-list__link:hover {
  background-color: var(--mp-surface-2);
}

.page-mypage .mypage-res-list__date {
  width: 48px;
  background-color: var(--mp-surface-2);
  border-radius: 10px;
}

.page-mypage .mypage-res-list__month {
  color: var(--mp-muted);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
}

.page-mypage .mypage-res-list__day {
  font-size: 1.125rem;
  color: var(--theme-text);
  font-weight: 500;
}

.page-mypage .mypage-res-list__wday {
  font-size: 0.5625rem;
  color: var(--mp-muted);
}

.page-mypage .mypage-res-list__title {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  font-feature-settings: "palt" 1;
}

.page-mypage .mypage-res-list__meta {
  font-size: 0.6875rem;
  color: var(--mp-muted);
  gap: 0.375rem 0.875rem;
}

.page-mypage .mypage-res-list__meta i {
  color: var(--mp-muted-soft);
}

.page-mypage .mypage-res-list__shop {
  color: var(--mp-muted-soft);
}

/* HISTORY LIST */
.page-mypage .mypage-history-list__row {
  padding: 0.625rem 1.125rem;
}

.page-mypage .mypage-history-list__row:hover {
  background-color: var(--mp-surface-2);
}

.page-mypage .mypage-history-list__title {
  font-size: 0.875rem;
  font-weight: 500;
}

.page-mypage .mypage-history-list__meta {
  font-size: 0.6875rem;
  color: var(--mp-muted);
}

/* WIDGET CHART — tighter */
.page-mypage .mypage-widget__chart {
  height: 200px;
  padding: 1rem 1rem 0.5rem;
}

/* SIDE CALENDAR — fully integrated */
.page-mypage .mypage-side-calendar {
  padding: 0.625rem 0.875rem 0.875rem;
}

.page-mypage .mypage-side-calendar .fc-toolbar-title {
  font-size: 0.875rem !important;
  font-weight: 500;
  color: var(--theme-text);
}

.page-mypage .mypage-side-calendar .fc-toolbar-chunk button {
  font-size: 0.6875rem !important;
  padding: 0.1875rem 0.5rem !important;
  border: none !important;
  background-color: var(--mp-surface-2) !important;
  color: var(--theme-text) !important;
  border-radius: 6px !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell-cushion {
  font-size: 0.5625rem !important;
  color: var(--mp-muted) !important;
  letter-spacing: 0.1em;
  padding: 0.375rem 0 !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-number {
  font-size: 0.6875rem !important;
  padding: 0.25rem !important;
  color: var(--theme-text) !important;
  opacity: 0.8;
}

.page-mypage .mypage-side-calendar .fc-day-today {
  background-color: color-mix(in srgb, var(--theme-primary) 6%, transparent) !important;
}

.page-mypage .mypage-side-calendar .fc-day-today .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  font-weight: 600;
  opacity: 1;
}

.page-mypage .mypage-cal-pill {
  font-size: 0.5625rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  background-color: var(--theme-primary);
}

/* QUICK NAV — refined */
.page-mypage .mypage-quick-nav {
  padding: 0.25rem 0 0.375rem;
}

.page-mypage .mypage-quick-nav__item {
  padding: 0.5625rem 1rem;
  gap: 0.6875rem;
  font-size: 0.8125rem;
}

.page-mypage .mypage-quick-nav__item:hover {
  background-color: var(--mp-surface-2);
  color: var(--theme-text);
}

.page-mypage .mypage-quick-nav__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--mp-surface-2);
  color: var(--mp-muted-soft);
  font-size: 0.75rem;
  opacity: 1;
}

.page-mypage .mypage-quick-nav__item:hover .mypage-quick-nav__icon {
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  color: var(--theme-primary);
}

.page-mypage .mypage-quick-nav__item[data-tone="primary"] .mypage-quick-nav__icon {
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
}

.page-mypage .mypage-quick-nav__chev {
  font-size: 0.625rem;
  opacity: 0.55;
}

/* SNAPSHOT */
.page-mypage .mypage-snapshot {
  padding: 0.625rem 1rem 0.875rem;
  gap: 0.5rem;
}

.page-mypage .mypage-snapshot>div {
  padding-bottom: 0.4375rem;
}

.page-mypage .mypage-snapshot dt {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--mp-muted);
}

.page-mypage .mypage-snapshot dd {
  font-size: 0.8125rem;
  color: var(--theme-text);
}

/* DASHBOARD GRID — tighter rhythm */
.page-mypage .mypage-dash-grid {
  gap: 0.875rem;
}

.page-mypage .mypage-dash-main {
  gap: 0.875rem;
}

.page-mypage .mypage-dash-side {
  gap: 0.875rem;
}

@media (min-width: 1024px) {
  .page-mypage .mypage-dash-grid {
    grid-template-columns: minmax(0, 1.85fr) minmax(260px, 0.9fr);
  }
}

/* DETAIL HERO — calmer */
.page-mypage .mypage-detail-hero {
  background-color: var(--mp-surface-1);
  border: 1px solid var(--mp-hairline);
  border-radius: 16px;
  box-shadow: none;
}

.page-mypage .mypage-detail-hero__rail {
  width: 3px;
  opacity: 0.85;
}

.page-mypage .mypage-detail-hero__date-block {
  background-color: var(--mp-surface-2);
  border-radius: 12px;
}

/* RESERVATION CARD — borderless rail, layered */
.page-mypage .mypage-reservation-card {
  background-color: var(--mp-surface-1);
  border: 1px solid var(--mp-hairline);
  border-radius: 14px;
  box-shadow: none;
}

.page-mypage .mypage-reservation-card:hover {
  border-color: var(--mp-hairline-strong);
  background-color: var(--mp-surface-1);
  box-shadow: 0 4px 16px -12px rgba(0, 0, 0, 0.18);
}

.page-mypage .mypage-reservation-card__rail {
  width: 3px;
  opacity: 0.85;
}

.page-mypage .mypage-reservation-card__date-block {
  background-color: var(--mp-surface-2);
  border-radius: 10px;
}

/* TIGHTEN body line-height for JP density */
.page-mypage {
  line-height: 1.55;
}

.page-mypage h1,
.page-mypage h2,
.page-mypage h3 {
  font-feature-settings: "palt" 1;
}

/* Action bar wraps to right */
.page-mypage .mypage-detail-actions {
  gap: 0.4375rem;
}

/* ============================================
   COMPLETION TOKENS (2026-05-12 phase 2)
   Fills gaps referenced by reservation-status,
   change-pwd, order/cart, inbox subagent rewrites.
   ============================================ */

/* Form wrapper + error */
.page-mypage .mypage-form {
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.page-mypage .mypage-form-error {
  font-size: 0.75rem;
  color: var(--theme-error);
  margin: 0.25rem 0 0;
}

/* Widget body padding helper */
.page-mypage .mypage-widget__body {
  padding: 1rem 1.125rem 1.125rem;
}

/* Widget head right action cluster */
.page-mypage .mypage-widget__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Widget pagination footer */
.page-mypage .mypage-widget__pagination {
  padding: 0.625rem 1.125rem 0.875rem;
  border-top: 1px solid var(--mp-hairline);
  background-color: var(--mp-surface-2);
}

.page-mypage .mypage-widget__pagination nav {
  display: flex;
  justify-content: center;
}

.page-mypage .mypage-widget__pagination .pagination {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-mypage .mypage-widget__pagination .pagination>li>a,
.page-mypage .mypage-widget__pagination .pagination>li>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 6px;
  color: var(--theme-text);
  text-decoration: none;
  border: 1px solid transparent;
}

.page-mypage .mypage-widget__pagination .pagination>li.active>span,
.page-mypage .mypage-widget__pagination .pagination>li>a:hover {
  background-color: var(--mp-surface-1);
  border-color: var(--mp-hairline-strong);
}

.page-mypage .mypage-widget__pagination .pagination>li.disabled>span {
  opacity: 0.4;
}

/* Compose popover (inbox) */
.page-mypage .mypage-widget__popover {
  position: relative;
}

.page-mypage .mypage-widget__popover-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: 600;
  padding: 0.625rem 1.125rem 0.375rem;
}

.page-mypage .mypage-widget__popover-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 1.125rem;
  text-decoration: none !important;
  color: var(--theme-text);
  border-top: 1px solid var(--mp-hairline);
  transition: background-color 0.15s ease;
}

.page-mypage .mypage-widget__popover-item:first-of-type {
  border-top: none;
}

.page-mypage .mypage-widget__popover-item:hover {
  background-color: var(--mp-surface-2);
}

.page-mypage .mypage-widget__popover-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
}

.page-mypage .mypage-widget__popover-meta {
  font-size: 0.6875rem;
  color: var(--mp-muted);
}

/* Reservation-status card grid */
.page-mypage .mypage-reservation-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1rem 1rem;
}

/* Cancel cluster wrapper inside reservation card */
.page-mypage .mypage-reservation-card__cancel {
  display: inline-flex;
}

/* Summary card rows (cart / order summary) */
.page-mypage .mypage-summary-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--theme-text);
  border-top: 1px solid var(--mp-hairline);
}

.page-mypage .mypage-summary-card__row:first-child {
  border-top: none;
}

.page-mypage .mypage-summary-card__row--total {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1rem;
  font-weight: 500;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mp-hairline-strong);
  margin-top: 0.25rem;
}

.page-mypage .mypage-summary-card__value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--theme-text);
}

.page-mypage .mypage-summary-card__row--total .mypage-summary-card__value {
  font-size: 1.125rem;
  color: var(--theme-primary);
}

.page-mypage .mypage-summary-card__meta {
  font-size: 0.6875rem;
  color: var(--mp-muted);
  letter-spacing: 0.04em;
}

/* ============================================
   PROFILE FORM FIX — body padding + gap rhythm
   Inputs were rendering at the widget edge without
   internal padding, making them look detached.
   ============================================ */
.page-mypage .mypage-profile-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.page-mypage .mypage-profile-form .mypage-widget>.mypage-profile-grid,
.page-mypage .mypage-profile-form .mypage-widget>.mypage-profile-stack {
  padding: 1rem 1.125rem 1.125rem;
}

.page-mypage .mypage-profile-form .mypage-profile-stack {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.page-mypage .mypage-profile-form .mypage-profile-stack .mypage-profile-grid {
  padding: 0;
}

/* Form action row — side-by-side, right-aligned, intrinsic width */
.page-mypage .mypage-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  background-color: var(--mp-surface-1);
  border: 1px solid var(--mp-hairline);
  border-radius: 14px;
  flex-wrap: wrap;
}

.page-mypage .mypage-form-actions .mypage-btn {
  min-width: 120px;
  justify-content: center;
}

@media (max-width: 639px) {
  .page-mypage .mypage-form-actions {
    flex-direction: column-reverse;
  }

  .page-mypage .mypage-form-actions .mypage-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Radio group polish */
.page-mypage .mypage-radio-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.page-mypage .mypage-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.page-mypage .mypage-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--mp-surface-2);
  border: 1px solid var(--mp-hairline);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--theme-text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.page-mypage .mypage-radio-option:hover {
  background-color: var(--mp-surface-3);
}

.page-mypage .mypage-radio-option:has(.mypage-radio:checked) {
  background-color: color-mix(in srgb, var(--theme-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary) 30%, transparent);
  color: var(--theme-primary);
}

.page-mypage .mypage-radio {
  accent-color: var(--theme-primary);
}

/* Toggle row spacing */
.page-mypage .mypage-profile-toggle-row {
  padding: 0.625rem 0.75rem;
  background-color: var(--mp-surface-2);
  border-radius: 10px;
}

/* Password tips list */
.page-mypage .mypage-tips {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-mypage .mypage-tips li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--theme-text);
}

.page-mypage .mypage-tips li i {
  color: var(--theme-success);
  font-size: 0.75rem;
}

/* ============================================
   SIDE CALENDAR FIX — compact, theme-aligned
   ============================================ */
.page-mypage .mypage-side-calendar {
  padding: 0.5rem 0.625rem 0.625rem;
  --fc-border-color: var(--mp-hairline);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: transparent;
  --fc-today-bg-color: color-mix(in srgb, var(--theme-primary) 8%, transparent);
}

/* Toolbar — compact */
.page-mypage .mypage-side-calendar .fc-header-toolbar {
  margin-bottom: 0.375rem !important;
  padding: 0 0.125rem;
}

.page-mypage .mypage-side-calendar .fc-toolbar-title {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--theme-text) !important;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-side-calendar .fc-toolbar-chunk {
  display: inline-flex;
  gap: 0.1875rem;
}

.page-mypage .mypage-side-calendar .fc-button,
.page-mypage .mypage-side-calendar .fc-toolbar-chunk button {
  font-size: 0.6875rem !important;
  padding: 0.1875rem 0.4375rem !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  border: 1px solid var(--mp-hairline) !important;
  background-color: transparent !important;
  color: var(--theme-text) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.page-mypage .mypage-side-calendar .fc-button:hover {
  background-color: var(--mp-surface-2) !important;
}

.page-mypage .mypage-side-calendar .fc-button:disabled {
  opacity: 0.4 !important;
}

.page-mypage .mypage-side-calendar .fc-icon {
  font-size: 0.875rem !important;
  vertical-align: -1px;
}

/* Hide the full row of trailing empty days — cleaner look */
.page-mypage .mypage-side-calendar {
  --fc-non-business-color: transparent;
}

/* Grid cells — much shorter */
.page-mypage .mypage-side-calendar .fc-scrollgrid {
  border: none !important;
}

.page-mypage .mypage-side-calendar .fc-scrollgrid-section>* {
  border-color: var(--mp-hairline) !important;
}

.page-mypage .mypage-side-calendar table {
  border-color: var(--mp-hairline) !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell {
  border-color: var(--mp-hairline) !important;
  padding: 0.25rem 0 !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell-cushion {
  font-size: 0.5625rem !important;
  color: var(--mp-muted) !important;
  letter-spacing: 0.08em;
  font-weight: 600 !important;
  padding: 0.125rem 0 !important;
  text-decoration: none !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day {
  border-color: var(--mp-hairline) !important;
  height: auto !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-frame {
  min-height: 36px !important;
  padding: 1px 2px !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-top {
  flex-direction: row !important;
  justify-content: flex-end;
  padding: 1px 3px 0;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-number {
  font-size: 0.625rem !important;
  padding: 0 !important;
  color: var(--theme-text) !important;
  opacity: 0.7;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.4;
}

.page-mypage .mypage-side-calendar .fc-day-other .fc-daygrid-day-number {
  opacity: 0.3;
}

.page-mypage .mypage-side-calendar .fc-day-other .fc-daygrid-day-frame {
  background-color: var(--mp-surface-2);
}

.page-mypage .mypage-side-calendar .fc-day-today {
  background-color: var(--fc-today-bg-color) !important;
}

.page-mypage .mypage-side-calendar .fc-day-today .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  font-weight: 700 !important;
  opacity: 1;
}

/* Events */
.page-mypage .mypage-side-calendar .fc-daygrid-day-events {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px 2px !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-event-harness {
  margin: 0 !important;
}

.page-mypage .mypage-side-calendar .fc-event {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-mypage .mypage-side-calendar .fc-event-main {
  padding: 0 !important;
}

.page-mypage .mypage-cal-pill {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 600;
  padding: 1px 2px;
  border-radius: 3px;
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
  line-height: 1.3;
  letter-spacing: 0;
}

.page-mypage .mypage-side-calendar .fc-event-warning .mypage-cal-pill {
  background-color: color-mix(in srgb, var(--theme-primary) 70%, var(--theme-warning));
}

.page-mypage .mypage-side-calendar .fc-event-success .mypage-cal-pill {
  background-color: var(--theme-success);
}

/* Hide the all-empty trailing rows via fixedWeekCount: false already set;
   make sure no large vertical bumps remain */
.page-mypage .mypage-side-calendar .fc-daygrid-body,
.page-mypage .mypage-side-calendar .fc-daygrid-body table {
  width: 100% !important;
}

.page-mypage .mypage-side-calendar .fc-scrollgrid-sync-table {
  height: auto !important;
}

/* List view (mobile) — denser */
.page-mypage .mypage-side-calendar .fc-list-day-cushion {
  background-color: var(--mp-surface-2) !important;
  padding: 0.375rem 0.5rem !important;
}

.page-mypage .mypage-side-calendar .fc-list-event {
  font-size: 0.75rem;
}

.page-mypage .mypage-side-calendar .fc-list-event:hover td {
  background-color: var(--mp-surface-2) !important;
}

/* ============================================
   FORM ACTIONS — flush, transparent (not a card)
   Reset earlier card-chrome version.
   ============================================ */
.page-mypage .mypage-form-actions {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0.25rem 0 0;
  gap: 0.625rem;
  justify-content: flex-end;
}

.page-mypage .mypage-form-actions .mypage-btn {
  min-width: 132px;
}

@media (max-width: 639px) {
  .page-mypage .mypage-form-actions {
    flex-direction: column-reverse;
    padding: 0.25rem 0 0;
  }

  .page-mypage .mypage-form-actions .mypage-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Radio legend tighter to chips */
.page-mypage .mypage-radio-fieldset .mypage-profile-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: 600;
  margin-bottom: 0;
}

.page-mypage .mypage-radio-group {
  margin-top: 0.5rem;
}

/* Selected radio — solid tint, not outline */
.page-mypage .mypage-radio-option:has(.mypage-radio:checked) {
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent);
  color: var(--theme-primary);
  font-weight: 500;
}

.page-mypage .mypage-radio-option:has(.mypage-radio:checked) span {
  color: var(--theme-primary);
}

/* Toggle row — left-aligned content, right toggle, no chip background unless desired */
.page-mypage .mypage-profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--mp-surface-2);
  border-radius: 10px;
  margin-top: 0.5rem;
}

.page-mypage .mypage-profile-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.page-mypage .mypage-profile-toggle-label .mypage-profile-label {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-text);
  margin: 0;
  font-weight: 500;
}

.page-mypage .mypage-profile-toggle-label .mypage-body-sm {
  font-size: 0.75rem;
  color: var(--mp-muted);
}

/* ============================================
   ADDITIONAL INFO SECTION — gender + toggle rhythm
   ============================================ */
.page-mypage .mypage-profile-form .mypage-widget>.mypage-profile-stack {
  gap: 1rem;
}

.page-mypage .mypage-profile-stack>.mypage-profile-field-group+.mypage-profile-field-group {
  padding-top: 1rem;
  border-top: 1px solid var(--mp-hairline);
}

/* Gender fieldset — clearer hierarchy */
.page-mypage .mypage-radio-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-mypage .mypage-radio-fieldset .mypage-profile-label {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--theme-text);
  font-weight: 500;
  margin: 0;
}

.page-mypage .mypage-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  gap: 0.5rem;
  margin-top: 0;
}

.page-mypage .mypage-radio-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  background-color: var(--mp-surface-2);
  border: 1px solid var(--mp-hairline);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--theme-text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  min-width: 110px;
}

.page-mypage .mypage-radio-option:hover {
  background-color: var(--mp-surface-3);
  border-color: var(--mp-hairline-strong);
}

.page-mypage .mypage-radio {
  accent-color: var(--theme-primary);
  flex-shrink: 0;
}

/* Toggle row — match radio chip vertical rhythm */
.page-mypage .mypage-profile-toggle-row {
  padding: 0.875rem 1rem;
  gap: 1rem;
}

.page-mypage .mypage-profile-toggle-label .mypage-profile-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--theme-text);
}

.page-mypage .mypage-profile-toggle-label .mypage-body-sm,
.page-mypage .mypage-profile-toggle-label .mypage-text-theme-subtle {
  font-size: 0.75rem;
  color: var(--mp-muted);
  margin-top: 0.125rem;
}

/* Toggle visual — themed */
.page-mypage .mypage-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.page-mypage .mypage-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.page-mypage .mypage-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--theme-text) 18%, transparent);
  border-radius: 999px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.page-mypage .mypage-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.page-mypage .mypage-toggle-input:checked~.mypage-toggle-slider {
  background-color: var(--theme-primary);
}

.page-mypage .mypage-toggle-input:checked~.mypage-toggle-slider::before {
  transform: translateX(18px);
}

.page-mypage .mypage-toggle-input:focus-visible~.mypage-toggle-slider {
  outline: 2px solid color-mix(in srgb, var(--theme-primary) 50%, transparent);
  outline-offset: 2px;
}

/* ============================================
   RADIO CHIPS — hide native input, chip = control
   ============================================ */
.page-mypage .mypage-radio-option {
  position: relative;
  user-select: none;
  font-weight: 500;
}

.page-mypage .mypage-radio-option .mypage-radio,
.page-mypage .mypage-radio-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.page-mypage .mypage-radio-option span {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--theme-text);
}

.page-mypage .mypage-radio-option:hover {
  background-color: var(--mp-surface-3);
  border-color: var(--mp-hairline-strong);
}

.page-mypage .mypage-radio-option:has(.mypage-radio:checked),
.page-mypage .mypage-radio-option:has(input[type="radio"]:checked) {
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  border-color: var(--theme-primary);
  color: var(--theme-primary);
  box-shadow: inset 0 0 0 1px var(--theme-primary);
}

.page-mypage .mypage-radio-option:has(.mypage-radio:checked) span,
.page-mypage .mypage-radio-option:has(input[type="radio"]:checked) span {
  color: var(--theme-primary);
  font-weight: 600;
}

.page-mypage .mypage-radio-option:has(.mypage-radio:focus-visible),
.page-mypage .mypage-radio-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--theme-primary) 45%, transparent);
  outline-offset: 2px;
}

/* ============================================
   DETAIL NAV / BREADCRUMB — spacing + responsive
   ============================================ */
.page-mypage .mypage-detail-nav {
  padding: 0.5rem 0.25rem;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  gap: 0.75rem 1rem;
}

.page-mypage .mypage-detail-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--theme-primary);
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0.125rem;
  border-radius: 6px;
}

.page-mypage .mypage-detail-nav__back i {
  font-size: 0.6875rem;
  transition: transform 0.15s ease;
}

.page-mypage .mypage-detail-nav__back:hover {
  opacity: 0.8;
}

.page-mypage .mypage-detail-nav__back:hover i {
  transform: translateX(-2px);
}

.page-mypage .mypage-detail-nav__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--mp-muted);
  letter-spacing: 0.02em;
}

.page-mypage .mypage-detail-nav__crumb i {
  font-size: 0.5625rem;
  color: var(--mp-muted);
  opacity: 0.7;
}

.page-mypage .mypage-detail-nav__crumb>span:last-child {
  color: var(--theme-text);
  font-weight: 500;
}

@media (max-width: 639px) {
  .page-mypage .mypage-detail-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.375rem 0 0.5rem;
    margin-bottom: 0.625rem;
  }

  .page-mypage .mypage-detail-nav__crumb {
    font-size: 0.6875rem;
  }
}

/* ============================================
   GENDER RADIO — segmented control pattern
   Override previous chip layout.
   ============================================ */
.page-mypage .mypage-radio-group {
  display: inline-flex;
  padding: 4px;
  background-color: var(--mp-surface-2);
  border: 1px solid var(--mp-hairline);
  border-radius: 12px;
  gap: 2px;
  width: max-content;
  max-width: 100%;
}

.page-mypage .mypage-radio-option {
  position: relative;
  flex: 1;
  min-width: 96px;
  padding: 0.5rem 1.25rem;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  color: var(--mp-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.page-mypage .mypage-radio-option:hover {
  background-color: transparent;
  color: var(--theme-text);
  border: none;
}

.page-mypage .mypage-radio-option .mypage-radio,
.page-mypage .mypage-radio-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.page-mypage .mypage-radio-option span {
  position: relative;
  z-index: 0;
  font-size: 0.875rem;
  color: inherit;
}

.page-mypage .mypage-radio-option:has(.mypage-radio:checked),
.page-mypage .mypage-radio-option:has(input[type="radio"]:checked) {
  background-color: var(--mp-surface-1);
  color: var(--theme-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--theme-primary) 25%, transparent);
  border: none;
}

.page-mypage .mypage-radio-option:has(.mypage-radio:checked) span,
.page-mypage .mypage-radio-option:has(input[type="radio"]:checked) span {
  color: var(--theme-primary);
  font-weight: 600;
}

.page-mypage .mypage-radio-option:has(.mypage-radio:focus-visible),
.page-mypage .mypage-radio-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--theme-primary) 45%, transparent);
  outline-offset: 2px;
}

/* Fieldset label spacing */
.page-mypage .mypage-radio-fieldset {
  gap: 0.625rem;
}

.page-mypage .mypage-radio-fieldset .mypage-profile-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: 600;
}

/* ============================================
   GENDER SEGMENTED — FINAL (overrides all prior)
   Higher specificity: .mypage-profile-form .mypage-radio-*
   Track contrast bumped, shadow visible, hover state.
   ============================================ */
.page-mypage .mypage-profile-form .mypage-radio-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-profile-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: 600;
  margin: 0;
  display: block;
}

.page-mypage .mypage-profile-form .mypage-radio-group {
  display: inline-flex;
  padding: 4px;
  background-color: color-mix(in srgb, var(--theme-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent);
  border-radius: 11px;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin: 0;
}

.page-mypage .mypage-profile-form .mypage-radio-option {
  position: relative;
  flex: 0 0 auto;
  min-width: 88px;
  padding: 0.4375rem 1.125rem;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  color: color-mix(in srgb, var(--theme-text) 65%, transparent);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.page-mypage .mypage-profile-form .mypage-radio-option:hover {
  background-color: color-mix(in srgb, var(--theme-text) 4%, transparent);
  color: var(--theme-text);
  border: none;
}

.page-mypage .mypage-profile-form .mypage-radio-option .mypage-radio,
.page-mypage .mypage-profile-form .mypage-radio-option input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  accent-color: var(--theme-primary);
}

.page-mypage .mypage-profile-form .mypage-radio-option span {
  position: relative;
  z-index: 0;
  font-size: 0.8125rem;
  color: inherit;
  font-weight: inherit;
}

.page-mypage .mypage-profile-form .mypage-radio-option:has(.mypage-radio:checked),
.page-mypage .mypage-profile-form .mypage-radio-option:has(input[type="radio"]:checked) {
  background-color: var(--theme-card-background, #fff);
  color: var(--theme-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  border: none;
  font-weight: 600;
}

.page-mypage .mypage-profile-form .mypage-radio-option:has(.mypage-radio:checked) span,
.page-mypage .mypage-profile-form .mypage-radio-option:has(input[type="radio"]:checked) span {
  color: var(--theme-primary);
  font-weight: 600;
}

.page-mypage .mypage-profile-form .mypage-radio-option:has(.mypage-radio:focus-visible),
.page-mypage .mypage-profile-form .mypage-radio-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--theme-primary) 40%, transparent);
  outline-offset: 2px;
}

/* ============================================
   GENDER — solid primary fill on active
   Higher specificity wins all prior rules.
   ============================================ */
.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-group {
  display: inline-flex;
  padding: 5px;
  background-color: color-mix(in srgb, var(--theme-text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  border-radius: 12px;
  gap: 3px;
}

.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-option {
  min-width: 92px;
  padding: 0.5rem 1.25rem;
  background-color: transparent;
  color: color-mix(in srgb, var(--theme-text) 70%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-option:hover {
  background-color: color-mix(in srgb, var(--theme-text) 4%, transparent);
  color: var(--theme-text);
}

.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-option:has(.mypage-radio:checked),
.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-option:has(input[type="radio"]:checked) {
  background-color: var(--theme-primary);
  color: var(--theme-button-text, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-option:has(.mypage-radio:checked) span,
.page-mypage .mypage-profile-form .mypage-radio-fieldset .mypage-radio-option:has(input[type="radio"]:checked) span {
  color: var(--theme-button-text, #fff);
  font-weight: 600;
}

/* Detail hero — drop left rail */
.page-mypage .mypage-detail-hero__rail {
  display: none;
}

/* Strip all left-rail status accents site-wide */
.page-mypage .mypage-next-card__rail,
.page-mypage .mypage-detail-hero__rail,
.page-mypage .mypage-reservation-card__rail {
  display: none !important;
}

/* KPI real icon slot (replaces empty ::after) */
.page-mypage .mypage-kpi::after {
  display: none !important;
}

.page-mypage .mypage-kpi__icon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--kpi-accent, var(--theme-primary)) 12%, transparent);
  color: var(--kpi-accent, var(--theme-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.page-mypage .mypage-kpi__icon i {
  line-height: 1;
}

/* ============================================
   PREMIUM REDESIGN LAYER (2026-05-12 phase 3)
   Editorial Kappo aesthetic: warm canvas + noir
   hero + gold accent + serif numerals.
   ============================================ */

.page-mypage {
  --mp-noir: #1B1614;
  --mp-noir-2: #211B19;
  --mp-noir-line: rgba(255, 255, 255, 0.08);
  --mp-gold: #C9A14A;
  --mp-gold-soft: rgba(201, 161, 74, 0.18);
  --mp-canvas: #F4EFE9;
  --mp-canvas-deep: #ECE5DC;
  --mp-paper: #FBF9F6;
  --mp-paper-warm: #F8F5F0;
}

.page-mypage main,
.page-mypage .mypage-layout-container {
  background-color: var(--mp-canvas);
  background-image:
    radial-gradient(at 0% 0%, rgba(201, 161, 74, 0.06) 0%, transparent 40%),
    radial-gradient(at 100% 100%, rgba(92, 45, 45, 0.04) 0%, transparent 40%);
  min-height: 100vh;
}

.page-mypage .mypage-noir-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--mp-noir);
  color: #fff;
  margin-bottom: 1rem;
  box-shadow:
    0 30px 60px -40px rgba(27, 22, 20, 0.55),
    0 8px 24px -16px rgba(27, 22, 20, 0.35);
}

.page-mypage .mypage-noir-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 18% 0%, rgba(201, 161, 74, 0.18), transparent 55%),
    radial-gradient(at 95% 100%, rgba(92, 45, 45, 0.35), transparent 60%),
    linear-gradient(135deg, var(--mp-noir), var(--mp-noir-2));
  pointer-events: none;
}

.page-mypage .mypage-noir-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.6;
}

.page-mypage .mypage-noir-hero__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  grid-template-areas:
    "id metrics"
    "actions actions";
  gap: 1.5rem 1.5rem;
  padding: 1.75rem 1.875rem 1.5rem;
}

@media (max-width: 1023px) {
  .page-mypage .mypage-noir-hero__body {
    grid-template-columns: 1fr;
    grid-template-areas: "id" "metrics" "actions";
    gap: 1.25rem;
    padding: 1.5rem 1.375rem 1.375rem;
  }
}

.page-mypage .mypage-noir-hero__id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.page-mypage .mypage-noir-hero__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mp-gold), #A37F30);
  color: var(--mp-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 4px 12px -4px rgba(201, 161, 74, 0.5);
}

.page-mypage .mypage-noir-hero__name-block {
  min-width: 0;
}

.page-mypage .mypage-noir-hero__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mp-gold);
  margin: 0;
  font-weight: 600;
}

.page-mypage .mypage-noir-hero__name {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.625rem;
  font-weight: 500;
  margin: 0.25rem 0 0.125rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
}

.page-mypage .mypage-noir-hero__name span {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 0.25rem;
  font-weight: 400;
}

.page-mypage .mypage-noir-hero__meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.25rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.page-mypage .mypage-noir-hero__meta i {
  font-size: 0.6875rem;
  opacity: 0.7;
}

.page-mypage .mypage-noir-hero__metrics {
  grid-area: metrics;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--mp-noir-line);
}

@media (max-width: 1023px) {
  .page-mypage .mypage-noir-hero__metrics {
    border-left: none;
    border-top: 1px solid var(--mp-noir-line);
    padding-left: 0;
    padding-top: 1rem;
    justify-content: space-between;
  }
}

.page-mypage .mypage-noir-hero__metric {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  min-width: 0;
}

.page-mypage .mypage-noir-hero__metric-label {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

.page-mypage .mypage-noir-hero__metric-value {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.875rem;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.page-mypage .mypage-noir-hero__metric-value em {
  font-style: normal;
  font-size: 0.75rem;
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0;
}

.page-mypage .mypage-noir-hero__actions {
  grid-area: actions;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.875rem;
  border-top: 1px solid var(--mp-noir-line);
}

.page-mypage .mypage-noir-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-mypage .mypage-noir-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.page-mypage .mypage-noir-btn i {
  font-size: 0.75rem;
  opacity: 0.85;
}

.page-mypage .mypage-noir-btn--gold {
  background-color: var(--mp-gold);
  color: var(--mp-noir);
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 14px -6px rgba(201, 161, 74, 0.55);
}

.page-mypage .mypage-noir-btn--gold:hover {
  background-color: #D8B05A;
  color: var(--mp-noir);
  border-color: transparent;
}

.page-mypage .mypage-noir-btn--gold i {
  opacity: 1;
}

.page-mypage .mypage-kpi-strip {
  margin-bottom: 1rem;
}

.page-mypage .mypage-kpi {
  background-color: var(--mp-paper);
  border: 1px solid color-mix(in srgb, var(--theme-text) 7%, transparent);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 12px 28px -24px rgba(27, 22, 20, 0.18);
}

.page-mypage .mypage-kpi:hover {
  background-color: #fff;
  border-color: color-mix(in srgb, var(--theme-text) 10%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 16px 32px -24px rgba(27, 22, 20, 0.25);
}

.page-mypage .mypage-kpi__icon {
  background-color: color-mix(in srgb, var(--kpi-accent, var(--theme-primary)) 12%, transparent);
  color: var(--kpi-accent, var(--theme-primary));
}

.page-mypage .mypage-kpi__value {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.page-mypage .mypage-widget {
  background-color: var(--mp-paper);
  border: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 12px 28px -24px rgba(27, 22, 20, 0.15);
}

.page-mypage .mypage-widget__head {
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  background-color: transparent;
}

.page-mypage .mypage-widget__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-widget__title i {
  font-size: 0.75rem;
  color: var(--mp-gold);
  opacity: 0.85;
}

.page-mypage .mypage-next-card,
.page-mypage .mypage-reservation-card,
.page-mypage .mypage-detail-hero {
  background-color: var(--mp-paper);
  border: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 16px 32px -24px rgba(27, 22, 20, 0.18);
}

.page-mypage .mypage-next-card__date-block,
.page-mypage .mypage-detail-hero__date-block,
.page-mypage .mypage-reservation-card__date-block,
.page-mypage .mypage-res-list__date {
  background-color: var(--mp-canvas-deep);
}

.page-mypage .mypage-dash-header {
  display: none;
}

.page-mypage .mypage-quick-nav__icon {
  background-color: var(--mp-canvas-deep);
}

.page-mypage .mypage-quick-nav__item:hover {
  background-color: color-mix(in srgb, var(--mp-gold) 8%, transparent);
}

.page-mypage .mypage-quick-nav__item:hover .mypage-quick-nav__icon {
  background-color: var(--mp-gold-soft);
  color: var(--mp-gold);
}

.page-mypage .mypage-side-calendar .fc-day-today {
  background-color: color-mix(in srgb, var(--mp-gold) 10%, transparent) !important;
}

.page-mypage .mypage-side-calendar .fc-day-today .fc-daygrid-day-number {
  color: #8E6F25 !important;
}

.page-mypage .mypage-cal-pill {
  background-color: var(--theme-primary);
}

.page-mypage .mypage-snapshot dt {
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.16em;
}

.page-mypage .mypage-pill {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s, var(--theme-primary)) 25%, transparent);
}

.page-mypage .mypage-dash-grid {
  gap: 1rem;
}

.page-mypage .mypage-dash-main {
  gap: 1rem;
}

.page-mypage .mypage-dash-side {
  gap: 1rem;
}

/* ============================================
   PHASE 4 — CARD ACCENTS (next, lists, side)
   Editorial seal + gold rule + denser rows
   ============================================ */

/* NEXT RESERVATION CARD — featured editorial treatment */
.page-mypage .mypage-next-card {
  position: relative;
  overflow: hidden;
}

.page-mypage .mypage-next-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mp-gold) 0%, var(--theme-primary) 60%, transparent 100%);
  z-index: 1;
}

.page-mypage .mypage-next-card__body {
  padding: 1.25rem 1.5rem 1.375rem;
}

.page-mypage .mypage-next-card__eyebrow {
  color: var(--mp-gold);
  letter-spacing: 0.22em;
}

.page-mypage .mypage-next-card__eyebrow i {
  color: var(--mp-gold);
}

.page-mypage .mypage-next-card__countdown {
  background-color: var(--mp-noir);
  color: var(--mp-gold);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--mp-gold-soft);
}

.page-mypage .mypage-next-card__date-block {
  background-color: var(--mp-noir);
  color: #fff;
  padding: 0.875rem 1.125rem;
  min-width: 88px;
  border-radius: 12px;
  box-shadow: 0 4px 14px -6px rgba(27, 22, 20, 0.35);
}

.page-mypage .mypage-next-card__date-block .mypage-next-card__month {
  color: var(--mp-gold);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.page-mypage .mypage-next-card__date-block .mypage-next-card__day {
  color: #fff;
  font-size: 2.25rem;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-weight: 500;
}

.page-mypage .mypage-next-card__date-block .mypage-next-card__weekday {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6875rem;
}

.page-mypage .mypage-next-card__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.page-mypage .mypage-next-card__title::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--mp-gold);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* RES LIST — editorial timeline rail */
.page-mypage .mypage-res-list__item {
  position: relative;
}

.page-mypage .mypage-res-list__link {
  padding: 0.875rem 1.25rem;
  gap: 1rem;
}

.page-mypage .mypage-res-list__date {
  width: 54px;
  background-color: var(--mp-canvas-deep);
  border: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-res-list__month {
  color: var(--mp-gold);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.page-mypage .mypage-res-list__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.page-mypage .mypage-res-list__wday {
  font-size: 0.5625rem;
}

.page-mypage .mypage-res-list__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.9375rem;
  font-weight: 500;
}

.page-mypage .mypage-res-list__status {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 0.3125rem 0.625rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s, var(--theme-primary)) 30%, transparent);
}

/* HISTORY LIST — refined */
.page-mypage .mypage-history-list__row {
  padding: 0.75rem 1.25rem;
  gap: 0.875rem;
}

.page-mypage .mypage-history-list__dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-text) 5%, transparent);
}

.page-mypage .mypage-history-list__title {
  font-size: 0.875rem;
  font-weight: 500;
}

.page-mypage .mypage-history-list__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-history-list__status {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

/* CHART widget — editorial frame */
.page-mypage .mypage-widget__chart {
  padding: 1rem 1.125rem 0.75rem;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--mp-gold) 3%, transparent) 100%);
}

/* SIDE WIDGETS — calendar + quick nav + snapshot */
.page-mypage .mypage-widget--tight .mypage-widget__head {
  padding-block: 0.6875rem;
}

/* CALENDAR — paper bg, gold today, primary pills */
.page-mypage .mypage-side-calendar {
  padding: 0.625rem 0.75rem 0.875rem;
}

.page-mypage .mypage-side-calendar .fc-toolbar-title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.875rem !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-mypage .mypage-side-calendar .fc-toolbar-chunk button {
  background-color: var(--mp-canvas-deep) !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell-cushion {
  color: var(--mp-gold) !important;
  font-weight: 700 !important;
  font-size: 0.5625rem !important;
  letter-spacing: 0.16em;
}

/* QUICK NAV */
.page-mypage .mypage-quick-nav__item {
  padding: 0.5625rem 1rem;
  gap: 0.75rem;
}

.page-mypage .mypage-quick-nav__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.page-mypage .mypage-quick-nav__label {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* SNAPSHOT */
.page-mypage .mypage-snapshot {
  padding: 0.75rem 1.125rem 0.875rem;
}

.page-mypage .mypage-snapshot>div {
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 5%, transparent);
  padding-bottom: 0.5rem;
}

.page-mypage .mypage-snapshot dt {
  font-size: 0.625rem;
  color: var(--mp-gold);
  letter-spacing: 0.18em;
  font-weight: 700;
}

.page-mypage .mypage-snapshot dd {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* WIDGET HEAD — eyebrow rule under title */
.page-mypage .mypage-widget__head {
  position: relative;
  padding: 0.875rem 1.25rem 0.9375rem;
}

.page-mypage .mypage-widget__head::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 1.25rem;
  width: 24px;
  height: 2px;
  background-color: var(--mp-gold);
  border-radius: 1px;
}

.page-mypage .mypage-widget__more {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--theme-primary);
  font-weight: 600;
  opacity: 0.85;
}

.page-mypage .mypage-widget__more:hover {
  color: var(--mp-gold);
  opacity: 1;
}

/* RESERVATION CARD (list partial) — premium */
.page-mypage .mypage-reservation-card {
  border-radius: 14px;
}

.page-mypage .mypage-reservation-card__inner {
  padding: 1.125rem 1.375rem;
  gap: 0.875rem;
}

.page-mypage .mypage-reservation-card__id {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.125rem;
}

.page-mypage .mypage-reservation-card__date-block {
  background-color: var(--mp-canvas-deep);
}

.page-mypage .mypage-reservation-card__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.75rem;
}

/* DETAIL HERO — match next-card editorial treatment */
.page-mypage .mypage-detail-hero {
  position: relative;
  overflow: hidden;
}

.page-mypage .mypage-detail-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mp-gold) 0%, var(--theme-primary) 60%, transparent 100%);
  z-index: 1;
}

.page-mypage .mypage-detail-hero__date-block {
  background-color: var(--mp-noir);
  color: #fff;
}

.page-mypage .mypage-detail-hero__date-block .mypage-detail-hero__month {
  color: var(--mp-gold);
  letter-spacing: 0.18em;
}

.page-mypage .mypage-detail-hero__date-block .mypage-detail-hero__day {
  color: #fff;
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
}

.page-mypage .mypage-detail-hero__date-block .mypage-detail-hero__weekday {
  color: rgba(255, 255, 255, 0.6);
}

.page-mypage .mypage-detail-hero__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.4375rem;
  font-weight: 500;
}

.page-mypage .mypage-detail-hero__title::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--mp-gold);
  margin-top: 0.625rem;
  margin-bottom: 0.5rem;
}

/* ============================================
   THEME-AWARE PREMIUM TOKENS (overrides phase 3)
   Derive --mp-* from active theme's --theme-* vars.
   Each theme (modern/default) provides --theme-primary,
   --theme-secondary, --theme-accent, --theme-background,
   --theme-card-background, --theme-text. Premium palette
   now adapts automatically per active theme.
   ============================================ */
.page-mypage {
  /* Noir = darkest neutral — mix theme-text with deep brown anchor */
  --mp-noir: color-mix(in srgb, var(--theme-text, #1B1614) 92%, #000);
  --mp-noir-2: color-mix(in srgb, var(--theme-text, #211B19) 86%, #000);
  --mp-noir-line: rgba(255, 255, 255, 0.08);

  /* Gold = theme-secondary or theme-accent if defined, fallback warm gold */
  --mp-gold: var(--theme-secondary, var(--theme-accent, #C9A14A));
  --mp-gold-soft: color-mix(in srgb, var(--mp-gold) 22%, transparent);

  /* Canvas = theme-background (page bg) */
  --mp-canvas: var(--theme-background, #F4EFE9);
  --mp-canvas-deep: color-mix(in srgb, var(--theme-text, #1F1F1F) 5%, var(--mp-canvas));

  /* Paper = theme-card-background (widget bg) */
  --mp-paper: var(--theme-card-background, #FBF9F6);
  --mp-paper-warm: color-mix(in srgb, var(--theme-text, #1F1F1F) 2%, var(--mp-paper));
}

/* Theme-specific tuning slots (optional manual overrides) */
.page-mypage[data-theme="modern"] {
  /* Modern theme = Kappo editorial (wine/gold default tokens fit) */
}

.page-mypage[data-theme="default"] {
  /* Default theme keeps its own brand color via --theme-* — no override */
}

/* Hero gradient now uses theme tokens */
.page-mypage .mypage-noir-hero__bg {
  background:
    radial-gradient(at 18% 0%, color-mix(in srgb, var(--mp-gold) 35%, transparent), transparent 55%),
    radial-gradient(at 95% 100%, color-mix(in srgb, var(--theme-primary) 55%, transparent), transparent 60%),
    linear-gradient(135deg, var(--mp-noir), var(--mp-noir-2));
}

/* Gold→primary gradient stripes use theme tokens */
.page-mypage .mypage-next-card::before,
.page-mypage .mypage-detail-hero::before {
  background: linear-gradient(90deg, var(--mp-gold) 0%, var(--theme-primary) 60%, transparent 100%);
}

/* Calendar today color = derived from gold */
.page-mypage .mypage-side-calendar .fc-day-today {
  background-color: color-mix(in srgb, var(--mp-gold) 10%, transparent) !important;
}

.page-mypage .mypage-side-calendar .fc-day-today .fc-daygrid-day-number {
  color: color-mix(in srgb, var(--mp-gold) 70%, #000) !important;
}

/* ============================================
   PHASE 5 — CONTRAST + STRIP TOP/LEFT BORDERS
   Remove decorative rules on top, fix avatar &
   countdown legibility, strengthen pills.
   ============================================ */

/* Remove top stripes (gold→primary gradient on next-card and detail-hero) */
.page-mypage .mypage-next-card::before,
.page-mypage .mypage-detail-hero::before {
  display: none !important;
}

/* Remove decorative gold rule under widget heads */
.page-mypage .mypage-widget__head::after {
  display: none !important;
}

/* Remove gold underline pseudo under titles */
.page-mypage .mypage-next-card__title::after,
.page-mypage .mypage-detail-hero__title::after {
  display: none !important;
}

/* HERO — better contrast */
.page-mypage .mypage-noir-hero__avatar {
  background: linear-gradient(135deg, #E8C36A, #B8862C);
  color: #1B1614;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.25),
    0 6px 18px -6px rgba(232, 195, 106, 0.6);
  font-weight: 700;
}

.page-mypage .mypage-noir-hero__eyebrow {
  color: #E8C36A;
  font-weight: 700;
}

.page-mypage .mypage-noir-hero__name {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-mypage .mypage-noir-hero__name span {
  color: rgba(255, 255, 255, 0.7);
}

.page-mypage .mypage-noir-hero__meta {
  color: rgba(255, 255, 255, 0.72);
}

.page-mypage .mypage-noir-hero__metric-label {
  color: rgba(255, 255, 255, 0.6);
}

.page-mypage .mypage-noir-hero__metric-value {
  color: #fff;
}

.page-mypage .mypage-noir-hero__metric-value em {
  color: rgba(255, 255, 255, 0.7);
}

.page-mypage .mypage-noir-btn {
  background-color: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
}

.page-mypage .mypage-noir-btn:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
}

.page-mypage .mypage-noir-btn--gold {
  background-color: #E8C36A;
  color: #1B1614;
  border-color: transparent;
}

.page-mypage .mypage-noir-btn--gold:hover {
  background-color: #F2D285;
  color: #1B1614;
}

/* COUNTDOWN chip — better contrast */
.page-mypage .mypage-next-card__countdown {
  background-color: color-mix(in srgb, var(--theme-primary) 12%, transparent);
  color: var(--theme-primary);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 25%, transparent);
  font-weight: 600;
}

/* STATUS PILLS — solid readable */
.page-mypage .mypage-pill {
  background-color: color-mix(in srgb, var(--s, var(--theme-primary)) 14%, var(--mp-paper));
  color: color-mix(in srgb, var(--s, var(--theme-primary)) 80%, #000);
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--s, var(--theme-primary)) 25%, transparent);
  font-weight: 600;
}

.page-mypage .mypage-pill i {
  color: var(--s, var(--theme-primary));
  opacity: 0.9;
}

/* RES LIST status pill */
.page-mypage .mypage-res-list__status {
  background-color: color-mix(in srgb, var(--s, var(--theme-primary)) 14%, var(--mp-paper));
  color: color-mix(in srgb, var(--s, var(--theme-primary)) 75%, #000);
  border: 1px solid color-mix(in srgb, var(--s, var(--theme-primary)) 25%, transparent);
  box-shadow: none;
}

/* Next card date block — already noir; ensure text white contrast */
.page-mypage .mypage-next-card__date-block .mypage-next-card__day,
.page-mypage .mypage-detail-hero__date-block .mypage-detail-hero__day {
  color: #fff;
}

/* CHART widget — remove tinted background */
.page-mypage .mypage-widget__chart {
  background: transparent;
}

/* Widget head: bigger title for readability */
.page-mypage .mypage-widget__title {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.page-mypage .mypage-widget__title i {
  color: var(--theme-primary);
  font-size: 0.8125rem;
}

.page-mypage .mypage-widget__sub {
  font-size: 0.75rem;
  color: var(--mp-muted);
  margin-top: 0.1875rem;
}

/* "すべて表示" link — clearer */
.page-mypage .mypage-widget__more {
  color: var(--theme-primary);
  opacity: 1;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
  font-weight: 600;
}

.page-mypage .mypage-widget__more:hover {
  opacity: 0.75;
}

/* Snapshot dt: use primary not gold */
.page-mypage .mypage-snapshot dt {
  color: var(--mp-muted);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}

/* KPI card hover: cleaner */
.page-mypage .mypage-kpi {
  border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent);
}

.page-mypage .mypage-kpi__foot {
  color: var(--theme-primary);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.page-mypage .mypage-kpi__foot i {
  color: var(--theme-primary);
}

.page-mypage .mypage-kpi__label {
  color: var(--mp-muted);
  font-weight: 600;
}

/* History dots remove ghost ring (visual noise) */
.page-mypage .mypage-history-list__dot {
  box-shadow: none;
  width: 6px;
  height: 6px;
}

/* Reservation card hover lift removed */
.page-mypage .mypage-reservation-card:hover {
  transform: none;
}

/* Detail hero date-block: ensure white text */
.page-mypage .mypage-detail-hero__date-block {
  color: #fff;
}

.page-mypage .mypage-detail-hero__date-block .mypage-detail-hero__weekday {
  color: rgba(255, 255, 255, 0.7);
}

.page-mypage .mypage-detail-hero__date-block .mypage-detail-hero__month {
  color: #E8C36A;
}

/* ============================================
   PHASE 6 — PRO CALENDAR (compact, dense)
   Override prior side-calendar rules with stricter
   cell heights, top-aligned day numbers, anchored pills.
   ============================================ */

.page-mypage .mypage-widget .mypage-side-calendar {
  padding: 0.625rem 0.75rem 0.875rem;
}

/* Toolbar — compact */
.page-mypage .mypage-side-calendar .fc-header-toolbar.fc-toolbar {
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
  gap: 0;
}

.page-mypage .mypage-side-calendar .fc-toolbar-chunk {
  display: inline-flex;
  gap: 0.1875rem;
  align-items: center;
}

.page-mypage .mypage-side-calendar .fc-toolbar-title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: var(--theme-text) !important;
}

.page-mypage .mypage-side-calendar .fc-button {
  font-size: 0.6875rem !important;
  padding: 0.1875rem 0.4375rem !important;
  height: 26px !important;
  min-width: 26px !important;
  line-height: 1 !important;
  border: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent) !important;
  background-color: var(--mp-canvas-deep) !important;
  color: var(--theme-text) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.page-mypage .mypage-side-calendar .fc-button:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--mp-canvas-deep)) !important;
  color: var(--theme-primary) !important;
}

.page-mypage .mypage-side-calendar .fc-button:disabled {
  opacity: 0.35 !important;
}

.page-mypage .mypage-side-calendar .fc-icon {
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

/* Grid — drop all heavy borders, use thin hairlines */
.page-mypage .mypage-side-calendar .fc-scrollgrid,
.page-mypage .mypage-side-calendar .fc-scrollgrid-section>* {
  border: none !important;
}

.page-mypage .mypage-side-calendar table {
  border-collapse: collapse !important;
}

/* Day-of-week header — tighter */
.page-mypage .mypage-side-calendar .fc-col-header-cell {
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent) !important;
  padding: 0.25rem 0 !important;
  background: transparent !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell-cushion {
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: var(--mp-muted) !important;
  padding: 0.125rem 0 !important;
  text-decoration: none !important;
  text-transform: none;
}

.page-mypage .mypage-side-calendar .fc-day-sun .fc-col-header-cell-cushion {
  color: color-mix(in srgb, var(--theme-error) 70%, var(--mp-muted)) !important;
}

.page-mypage .mypage-side-calendar .fc-day-sat .fc-col-header-cell-cushion {
  color: color-mix(in srgb, var(--theme-primary) 60%, var(--mp-muted)) !important;
}

/* Day cells — STRICT compact height */
.page-mypage .mypage-side-calendar .fc-daygrid-day {
  border-right: 1px solid color-mix(in srgb, var(--theme-text) 4%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 4%, transparent) !important;
  height: auto !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day:last-child {
  border-right: none !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-frame {
  min-height: 38px !important;
  height: 38px !important;
  padding: 2px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-top {
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-number {
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  color: var(--theme-text) !important;
  opacity: 0.7;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-side-calendar .fc-day-sun .fc-daygrid-day-number {
  color: var(--theme-error) !important;
  opacity: 0.8;
}

.page-mypage .mypage-side-calendar .fc-day-sat .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  opacity: 0.85;
}

.page-mypage .mypage-side-calendar .fc-day-other .fc-daygrid-day-number {
  opacity: 0.25;
}

.page-mypage .mypage-side-calendar .fc-day-other .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-text) 2%, transparent);
}

/* Today */
.page-mypage .mypage-side-calendar .fc-day-today {
  background-color: color-mix(in srgb, var(--theme-primary) 7%, transparent) !important;
}

.page-mypage .mypage-side-calendar .fc-day-today .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  font-weight: 700 !important;
  opacity: 1;
}

/* Events — bottom anchored pill */
.page-mypage .mypage-side-calendar .fc-daygrid-day-events {
  position: absolute !important;
  bottom: 2px !important;
  left: 2px !important;
  right: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-event-harness {
  margin: 0 !important;
  position: relative !important;
  inset: auto !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-event-harness-abs {
  position: relative !important;
  inset: auto !important;
}

.page-mypage .mypage-side-calendar .fc-event {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-mypage .mypage-side-calendar .fc-event-main {
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}

.page-mypage .mypage-cal-pill {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 0;
  border-radius: 3px;
  background-color: var(--theme-primary);
  color: #fff;
  line-height: 1.3;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.page-mypage .mypage-side-calendar .fc-event-warning .mypage-cal-pill {
  background-color: var(--theme-warning, var(--theme-primary));
  color: #fff;
}

.page-mypage .mypage-side-calendar .fc-event-success .mypage-cal-pill {
  background-color: var(--theme-success, var(--theme-primary));
}

/* Hide popover trigger "+more" — keep dayMaxEvents: 1 from JS */
.page-mypage .mypage-side-calendar .fc-daygrid-more-link {
  font-size: 0.5625rem !important;
  color: var(--mp-muted) !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* List view mobile */
.page-mypage .mypage-side-calendar .fc-list {
  border: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent) !important;
  border-radius: 8px;
  overflow: hidden;
}

.page-mypage .mypage-side-calendar .fc-list-day-cushion {
  background-color: var(--mp-canvas-deep) !important;
  padding: 0.375rem 0.625rem !important;
  font-size: 0.6875rem;
}

.page-mypage .mypage-side-calendar .fc-list-event {
  font-size: 0.75rem;
}

.page-mypage .mypage-side-calendar .fc-list-event:hover td {
  background-color: var(--mp-canvas-deep) !important;
}

/* Calendar — shorter cells */
.page-mypage .mypage-side-calendar .fc-daygrid-day-frame {
  min-height: 30px !important;
  height: 30px !important;
  padding: 1px 2px !important;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-number {
  font-size: 0.5625rem !important;
}

.page-mypage .mypage-cal-pill {
  font-size: 0.5rem;
  padding: 0;
  line-height: 1.25;
}

.page-mypage .mypage-side-calendar .fc-daygrid-day-events {
  bottom: 1px !important;
  left: 1px !important;
  right: 1px !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell-cushion {
  font-size: 0.5625rem !important;
  padding: 0 !important;
}

.page-mypage .mypage-side-calendar .fc-col-header-cell {
  padding: 0.1875rem 0 !important;
}

/* ============================================
   PHASE 7 — RESERVATION PANEL (cards + calendar)
   Two-column unified reservation focus.
   ============================================ */

.page-mypage .mypage-res-panel {
  background-color: var(--mp-paper);
  border: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  border-radius: 16px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 12px 28px -24px rgba(27, 22, 20, 0.18);
  overflow: hidden;
}

.page-mypage .mypage-res-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.9375rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  background-color: color-mix(in srgb, var(--theme-text) 1.5%, var(--mp-paper));
  flex-wrap: wrap;
}

.page-mypage .mypage-res-panel__head-text {
  min-width: 0;
}

.page-mypage .mypage-res-panel__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.01em;
}

.page-mypage .mypage-res-panel__title i {
  color: var(--theme-primary);
  font-size: 0.875rem;
  opacity: 0.9;
}

.page-mypage .mypage-res-panel__sub {
  font-size: 0.75rem;
  color: var(--mp-muted);
  margin: 0.25rem 0 0;
}

.page-mypage .mypage-res-panel__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.page-mypage .mypage-res-panel__more {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-primary);
  letter-spacing: 0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.page-mypage .mypage-res-panel__more:hover {
  opacity: 0.75;
}

.page-mypage .mypage-res-panel__more i {
  font-size: 0.6875rem;
}

.page-mypage .mypage-res-panel__body {
  display: block;
}

.page-mypage .mypage-res-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .page-mypage .mypage-res-split {
    grid-template-columns: 1fr;
  }
}

.page-mypage .mypage-res-panel__list {
  padding: 0.625rem 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-mypage .mypage-res-panel__list::-webkit-scrollbar {
  width: 6px;
}

.page-mypage .mypage-res-panel__list::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--theme-text) 12%, transparent);
  border-radius: 3px;
}

/* RES TILE — enhanced reservation card */
.page-mypage .mypage-res-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background-color: var(--mp-paper);
  border: 1px solid color-mix(in srgb, var(--theme-text) 7%, transparent);
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.page-mypage .mypage-res-tile:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 28%, transparent);
  background-color: color-mix(in srgb, var(--theme-primary) 2%, var(--mp-paper));
  box-shadow: 0 4px 14px -10px rgba(27, 22, 20, 0.2);
}

.page-mypage .mypage-res-tile.is-primary {
  background-color: color-mix(in srgb, var(--theme-primary) 4%, var(--mp-paper));
  border-color: color-mix(in srgb, var(--theme-primary) 22%, transparent);
  box-shadow: 0 6px 18px -12px rgba(27, 22, 20, 0.22);
}

.page-mypage .mypage-res-tile.is-today {
  background-color: color-mix(in srgb, var(--mp-gold) 6%, var(--mp-paper));
  border-color: color-mix(in srgb, var(--mp-gold) 35%, transparent);
}

.page-mypage .mypage-res-tile__date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background-color: color-mix(in srgb, var(--theme-text) 4%, var(--mp-paper));
  border-radius: 10px;
  min-width: 60px;
  line-height: 1;
}

.page-mypage .mypage-res-tile.is-primary .mypage-res-tile__date {
  background-color: var(--mp-noir);
  color: #fff;
}

.page-mypage .mypage-res-tile.is-today .mypage-res-tile__date {
  background-color: var(--theme-primary);
  color: #fff;
}

.page-mypage .mypage-res-tile__month {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mp-muted);
}

.page-mypage .mypage-res-tile.is-primary .mypage-res-tile__month,
.page-mypage .mypage-res-tile.is-today .mypage-res-tile__month {
  color: var(--mp-gold);
}

.page-mypage .mypage-res-tile.is-today .mypage-res-tile__month {
  color: rgba(255, 255, 255, 0.85);
}

.page-mypage .mypage-res-tile__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  margin: 0.125rem 0;
  letter-spacing: -0.01em;
}

.page-mypage .mypage-res-tile.is-primary .mypage-res-tile__day,
.page-mypage .mypage-res-tile.is-today .mypage-res-tile__day {
  color: #fff;
}

.page-mypage .mypage-res-tile__wday {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--mp-muted);
}

.page-mypage .mypage-res-tile.is-primary .mypage-res-tile__wday,
.page-mypage .mypage-res-tile.is-today .mypage-res-tile__wday {
  color: rgba(255, 255, 255, 0.7);
}

.page-mypage .mypage-res-tile__wday.is-weekend {
  color: var(--theme-error);
}

.page-mypage .mypage-res-tile.is-primary .mypage-res-tile__wday.is-weekend,
.page-mypage .mypage-res-tile.is-today .mypage-res-tile__wday.is-weekend {
  color: #FFB4A0;
}

.page-mypage .mypage-res-tile__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.page-mypage .mypage-res-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.page-mypage .mypage-res-tile__title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.page-mypage .mypage-res-tile__countdown {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--theme-primary) 12%, transparent);
  color: var(--theme-primary);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 25%, transparent);
}

.page-mypage .mypage-res-tile__countdown.is-today {
  background-color: var(--mp-gold);
  color: var(--mp-noir);
  border-color: transparent;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--mp-gold) 60%, transparent);
}

.page-mypage .mypage-res-tile__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
}

.page-mypage .mypage-res-tile__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--theme-text) 75%, transparent);
}

.page-mypage .mypage-res-tile__facts li i {
  font-size: 0.6875rem;
  color: var(--mp-muted);
  opacity: 0.85;
  width: 12px;
  text-align: center;
}

.page-mypage .mypage-res-tile__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.page-mypage .mypage-res-tile__amount {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding-left: 0.5rem;
}

.page-mypage .mypage-res-tile__actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-self: center;
}

.page-mypage .mypage-res-tile__actions .mypage-btn {
  padding: 0.4375rem 0.75rem;
  font-size: 0.75rem;
  gap: 0.375rem;
  border-radius: 8px;
  min-width: 78px;
  justify-content: center;
}

.page-mypage .mypage-res-tile__actions .mypage-btn i {
  font-size: 0.75rem;
  margin: 0;
}

@media (max-width: 639px) {
  .page-mypage .mypage-res-tile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "date body" "actions actions";
    padding: 0.75rem 0.875rem;
  }

  .page-mypage .mypage-res-tile__date {
    grid-area: date;
  }

  .page-mypage .mypage-res-tile__body {
    grid-area: body;
  }

  .page-mypage .mypage-res-tile__actions {
    grid-area: actions;
    flex-direction: row;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  }

  .page-mypage .mypage-res-tile__actions .mypage-btn {
    flex: 1;
  }
}

/* Empty state */
.page-mypage .mypage-res-panel__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.page-mypage .mypage-res-panel__empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  color: var(--theme-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.page-mypage .mypage-res-panel__empty-title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--theme-text);
  margin: 0;
}

.page-mypage .mypage-res-panel__empty-sub {
  font-size: 0.8125rem;
  color: var(--mp-muted);
  margin: 0 0 0.625rem;
}

/* Calendar side */
.page-mypage .mypage-res-panel__cal {
  border-left: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  background-color: color-mix(in srgb, var(--theme-text) 1.5%, var(--mp-paper));
  padding: 0.875rem 0.9375rem 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

@media (max-width: 1023px) {
  .page-mypage .mypage-res-panel__cal {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  }
}

.page-mypage .mypage-res-panel__cal-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: 600;
}

.page-mypage .mypage-cal-legend {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
}

.page-mypage .mypage-cal-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.6875rem;
  color: var(--mp-muted);
  font-weight: 500;
}

.page-mypage .mypage-cal-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  display: inline-block;
}

.page-mypage .mypage-cal-legend__dot[data-tone="today"] {
  background-color: var(--mp-gold);
}

.page-mypage .mypage-cal-legend__dot[data-tone="past"] {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--theme-text) 25%, transparent);
}

/* CALENDAR rich states */
.page-mypage .mypage-res-panel__cal .fc-day-booked {
  background-color: color-mix(in srgb, var(--theme-primary) 5%, transparent) !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  opacity: 1;
  font-weight: 700 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-past .fc-daygrid-day-number {
  opacity: 0.35 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-today {
  background-color: color-mix(in srgb, var(--mp-gold) 12%, transparent) !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-today .fc-daygrid-day-number {
  color: color-mix(in srgb, var(--mp-gold) 75%, #000) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day:hover {
  background-color: color-mix(in srgb, var(--theme-text) 4%, transparent) !important;
  cursor: pointer;
}

.page-mypage .mypage-res-panel__cal .fc-day.is-selected {
  outline: 2px solid var(--theme-primary);
  outline-offset: -2px;
  background-color: color-mix(in srgb, var(--theme-primary) 8%, transparent) !important;
}

.page-mypage .mypage-res-panel__cal .fc-day:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: -2px;
}

/* Calendar — replace pill with reference dot */
.page-mypage .mypage-side-calendar .fc-event {
  display: flex;
  justify-content: center;
}

.page-mypage .mypage-cal-pill {
  display: none !important;
}

.page-mypage .mypage-cal-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary) 35%, transparent);
}

.page-mypage .mypage-side-calendar .fc-event-warning .mypage-cal-dot {
  background-color: var(--theme-warning, var(--theme-primary));
}

.page-mypage .mypage-side-calendar .fc-event-success .mypage-cal-dot {
  background-color: var(--theme-success, var(--theme-primary));
}

/* ============================================
   PHASE 8 — CALENDAR PRO REDESIGN
   Override all prior calendar rules with strict
   compact cells, visible status dot marker, selected
   and unavailable states, balanced weekend tones.
   ============================================ */

/* Eyebrow + container */
.page-mypage .mypage-res-panel__cal {
  padding: 1rem 1rem 0.875rem;
  gap: 0.5rem;
}

.page-mypage .mypage-res-panel__cal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-res-panel__cal-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mp-muted);
  font-weight: 700;
  display: block;
  margin-bottom: 0;
}

.page-mypage .mypage-res-panel__cal-note {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--theme-text) 68%, transparent);
  font-weight: 600;
}

/* Toolbar — single row, balanced */
.page-mypage .mypage-res-panel__cal .fc-header-toolbar.fc-toolbar {
  margin: 0 0 0.625rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.375rem;
}

.page-mypage .mypage-res-panel__cal .fc-toolbar-title {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: var(--theme-text) !important;
  text-align: center;
  flex: 1;
}

.page-mypage .mypage-res-panel__cal .fc-toolbar-chunk {
  display: inline-flex !important;
  gap: 0.1875rem;
  align-items: center;
  flex: 0 0 auto;
}

.page-mypage .mypage-res-panel__cal .fc-button {
  font-size: 0.75rem !important;
  padding: 0 !important;
  height: 44px !important;
  min-width: 44px !important;
  width: auto !important;
  line-height: 1 !important;
  border: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent) !important;
  background-color: var(--mp-paper) !important;
  color: var(--theme-text) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.page-mypage .mypage-res-panel__cal .fc-button.fc-today-button {
  padding: 0 0.875rem !important;
  min-width: 58px !important;
}

.page-mypage .mypage-res-panel__cal .fc-button:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--mp-paper)) !important;
  color: var(--theme-primary) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 25%, transparent) !important;
}

.page-mypage .mypage-res-panel__cal .fc-button:disabled {
  opacity: 0.35 !important;
}

.page-mypage .mypage-res-panel__cal .fc-icon {
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

/* Grid wrapper — clean */
.page-mypage .mypage-res-panel__cal .fc,
.page-mypage .mypage-res-panel__cal .fc-view-harness {
  background-color: transparent;
}

.page-mypage .mypage-res-panel__cal .fc-scrollgrid,
.page-mypage .mypage-res-panel__cal .fc-scrollgrid-section>*,
.page-mypage .mypage-res-panel__cal .fc-scrollgrid-section td {
  border: none !important;
}

.page-mypage .mypage-res-panel__cal table {
  border-collapse: collapse !important;
}

/* Day-of-week header — flat, weekend tinted */
.page-mypage .mypage-res-panel__cal .fc-col-header-cell {
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 8%, transparent) !important;
  padding: 0.3125rem 0 0.375rem !important;
  background: transparent !important;
}

.page-mypage .mypage-res-panel__cal .fc-col-header-cell-cushion {
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--mp-muted) !important;
  padding: 0 !important;
  text-decoration: none !important;
  text-transform: none;
  opacity: 0.85;
}

.page-mypage .mypage-res-panel__cal .fc-day-sun .fc-col-header-cell-cushion {
  color: var(--theme-error) !important;
  opacity: 0.9;
}

.page-mypage .mypage-res-panel__cal .fc-day-sat .fc-col-header-cell-cushion {
  color: var(--theme-primary) !important;
  opacity: 0.9;
}

/* Day cells — minimum 44px touch target */
.page-mypage .mypage-res-panel__cal .fc-daygrid-day {
  border: none !important;
  height: auto !important;
  vertical-align: top;
}

.page-mypage .mypage-res-panel__cal .fc-daygrid-day-frame {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  border-radius: 6px;
  margin: 1px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

.page-mypage .mypage-res-panel__cal .fc-daygrid-day-top {
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  position: relative;
  z-index: 1;
}

.page-mypage .mypage-res-panel__cal .fc-daygrid-day-number {
  font-family: var(--theme-font-secondary, 'Noto Sans JP'), sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--theme-text) !important;
  opacity: 0.8;
  padding: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Weekend coloring */
.page-mypage .mypage-res-panel__cal .fc-day-sun:not(.fc-day-past) .fc-daygrid-day-number {
  color: var(--theme-error) !important;
  opacity: 0.85;
}

.page-mypage .mypage-res-panel__cal .fc-day-sat:not(.fc-day-past) .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  opacity: 0.9;
}

/* Other-month cells */
.page-mypage .mypage-res-panel__cal .fc-day-other .fc-daygrid-day-number {
  opacity: 0.2 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-other .fc-daygrid-day-frame {
  background-color: transparent !important;
}

/* Past — muted */
.page-mypage .mypage-res-panel__cal .fc-day-past .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-text) 3%, transparent) !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-past .fc-daygrid-day-number {
  opacity: 0.42 !important;
  color: var(--theme-text) !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-unavailable .fc-daygrid-day-frame::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--theme-text) 20%, transparent);
}

/* Hover — soft bg */
.page-mypage .mypage-res-panel__cal .fc-day:hover .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 6%, transparent) !important;
  cursor: pointer;
}

/* Booked — visible count badge, stronger than today */
.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 8%, var(--mp-paper)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-multiple .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 14%, var(--mp-paper)) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--theme-primary) 34%, transparent);
}

/* Today — clear ring that does not overpower booked states */
.page-mypage .mypage-res-panel__cal .fc-day-today .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--mp-gold, #B8944D) 10%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mp-gold, #B8944D) 45%, transparent);
}

.page-mypage .mypage-res-panel__cal .fc-day-today .fc-daygrid-day-top {
  position: relative;
}

.page-mypage .mypage-res-panel__cal .fc-day-today .fc-daygrid-day-number {
  position: relative;
  z-index: 2;
  color: color-mix(in srgb, var(--mp-gold, #B8944D) 62%, #191513) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-today .fc-daygrid-day-top::before {
  content: '本日';
  position: absolute;
  top: 5px;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 24px;
  padding: 1px 4px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--mp-gold, #B8944D) 20%, var(--mp-paper));
  color: color-mix(in srgb, var(--mp-gold, #B8944D) 70%, #191513);
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.15;
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: none;
}

/* Today + booked: reservation remains dominant */
.page-mypage .mypage-res-panel__cal .fc-day-today.fc-day-booked .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 13%, var(--mp-paper)) !important;
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--theme-primary) 36%, transparent),
    inset 0 -3px 0 color-mix(in srgb, var(--mp-gold, #B8944D) 70%, transparent);
}

.page-mypage .mypage-res-panel__cal .fc-day-today.fc-day-booked .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
}

/* Selected day */
.page-mypage .mypage-res-panel__cal .fc-day.is-selected .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 16%, var(--mp-paper)) !important;
  outline: 2px solid var(--theme-primary) !important;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mp-paper) 95%, transparent);
}

/* Focus visible */
.page-mypage .mypage-res-panel__cal .fc-day:focus-visible {
  outline: none !important;
}

.page-mypage .mypage-res-panel__cal .fc-day:focus-visible .fc-daygrid-day-frame,
.page-mypage .mypage-res-panel__cal .fc-daygrid-day-frame:focus-visible {
  outline: 2px solid var(--theme-primary) !important;
  outline-offset: -1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

/* Events — status-colored dot marker, counts remain available through aria labels */
.page-mypage .mypage-res-panel__cal .fc-daygrid-day-events {
  position: absolute !important;
  bottom: 0px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness-abs {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
}

.page-mypage .mypage-res-panel__cal .fc-event {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-mypage .mypage-res-panel__cal .fc-event-main {
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-count {
  display: none !important;
}

.page-mypage .mypage-res-panel__cal .fc-event-title,
.page-mypage .mypage-res-panel__cal .fc-event-time {
  display: none !important;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-dot {
  display: inline-block !important;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--cal-status-color, var(--theme-primary));
  box-shadow:
    0 0 0 2px var(--mp-paper),
    0 0 0 3px color-mix(in srgb, var(--cal-status-color, var(--theme-primary)) 28%, transparent);
}

.page-mypage .mypage-res-panel__cal .fc-event-multiple .mypage-cal-dot {
  width: 17px;
  height: 8px;
  background-color: var(--cal-status-color, var(--theme-primary));
}

/* Hide +more link clutter */
.page-mypage .mypage-res-panel__cal .fc-daygrid-more-link {
  display: none !important;
}

.page-mypage .mypage-cal-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--theme-text) 3%, var(--mp-paper));
  border: 1px solid color-mix(in srgb, var(--theme-text) 7%, transparent);
}

.page-mypage .mypage-cal-selection__label {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--mp-muted);
}

.page-mypage .mypage-cal-selection__value {
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--theme-text);
  text-align: right;
}

/* Legend — tighter */
.page-mypage .mypage-res-panel__cal .mypage-cal-legend {
  border-top: 1px solid color-mix(in srgb, var(--theme-text) 6%, transparent);
  padding: 0.625rem 0.125rem 0;
  margin-top: 0.5rem;
  gap: 0.625rem 0.875rem;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend li {
  min-height: 24px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--theme-text) 70%, transparent);
}

.page-mypage .mypage-cal-legend__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background-color: var(--theme-primary);
  box-shadow:
    0 0 0 2px var(--mp-paper),
    0 0 0 3px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

.page-mypage .mypage-cal-legend__dot[data-tone="multiple"] {
  width: 18px;
  background-color: color-mix(in srgb, var(--theme-primary) 86%, #111827);
}

.page-mypage .mypage-cal-legend__ring {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--mp-gold, #B8944D) 60%, transparent);
  background-color: color-mix(in srgb, var(--mp-gold, #B8944D) 10%, transparent);
}

.page-mypage .mypage-cal-legend__bar {
  width: 24px;
  height: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--theme-text) 24%, transparent);
  background-color: color-mix(in srgb, var(--theme-text) 4%, transparent);
  border-radius: 4px;
}

@media (max-width: 639px) {
  .page-mypage .mypage-res-panel__cal {
    padding: 0.875rem 0.75rem;
  }

  .page-mypage .mypage-res-panel__cal .fc-header-toolbar.fc-toolbar {
    gap: 0.25rem;
  }

  .page-mypage .mypage-res-panel__cal .fc-toolbar-title {
    font-size: 0.875rem !important;
  }

  .page-mypage .mypage-res-panel__cal .fc-daygrid-day-frame {
    min-height: 46px !important;
    height: 46px !important;
    margin: 1px 0;
  }

  .page-mypage .mypage-res-panel__cal .fc-daygrid-day-number {
    font-size: 0.75rem !important;
  }

  .page-mypage .mypage-res-panel__cal .mypage-cal-dot {
    width: 7px;
    height: 7px;
  }

  .page-mypage .mypage-cal-selection {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.125rem;
  }

  .page-mypage .mypage-cal-selection__value {
    text-align: left;
  }
}

/* ============================================
   RESERVATION STATUS PAGE — operational card redesign
   Dense, scannable reservation records with payment visibility.
   ============================================ */

.page-mypage .mypage-reservation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

.page-mypage .mypage-reservation-card {
  position: relative;
  overflow: hidden;
  background-color: var(--mp-paper, #fff);
  border: 1px solid color-mix(in srgb, var(--theme-text, #1f2937) 7%, transparent);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 16px 32px -28px rgba(27, 22, 20, 0.22);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.page-mypage .mypage-reservation-card:hover {
  border-color: color-mix(in srgb, var(--theme-primary, #5b21b6) 26%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 18px 36px -28px rgba(27, 22, 20, 0.28);
}

.page-mypage .mypage-reservation-card[data-status="canceled"] {
  opacity: 0.78;
}

.page-mypage .mypage-reservation-card__rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  opacity: 0.95;
}

.page-mypage .mypage-reservation-card__inner {
  padding: 0.75rem 0.875rem 0.75rem 1rem;
}

.page-mypage .mypage-reservation-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.625rem;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text, #1f2937) 6%, transparent);
}

.page-mypage .mypage-reservation-card__id-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.page-mypage .mypage-reservation-card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mp-muted, #7c6f8f);
}

.page-mypage .mypage-reservation-card__id {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.125rem;
  line-height: 1.1;
  color: var(--theme-primary, #4c1d95);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-reservation-card__badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-mypage .mypage-reservation-card__status,
.page-mypage .mypage-reservation-card__payment-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.page-mypage .mypage-reservation-card__status {
  color: var(--s, var(--theme-primary));
  background-color: color-mix(in srgb, var(--s, var(--theme-primary)) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s, var(--theme-primary)) 22%, transparent);
}

.page-mypage .mypage-reservation-card__payment-pill {
  color: var(--theme-text, #1f2937);
  background-color: color-mix(in srgb, var(--theme-text, #1f2937) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-text, #1f2937) 8%, transparent);
}

.page-mypage .mypage-reservation-card__payment-pill[data-payment="paid"] {
  color: var(--theme-success, #16a34a);
  background-color: color-mix(in srgb, var(--theme-success, #16a34a) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-success, #16a34a) 24%, transparent);
}

.page-mypage .mypage-reservation-card__payment-pill[data-payment="unpaid"] {
  color: var(--theme-warning, #d97706);
  background-color: color-mix(in srgb, var(--theme-warning, #d97706) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-warning, #d97706) 26%, transparent);
}

.page-mypage .mypage-reservation-card__body {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}

.page-mypage .mypage-reservation-card__date-block {
  min-height: 96px;
  width: 86px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--theme-primary, #5b21b6) 8%, var(--mp-paper, #fff));
  border: 1px solid color-mix(in srgb, var(--theme-primary, #5b21b6) 10%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
}

.page-mypage .mypage-reservation-card__month,
.page-mypage .mypage-reservation-card__weekday {
  font-size: 0.6875rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--theme-primary, #5b21b6) 74%, var(--theme-text, #1f2937));
}

.page-mypage .mypage-reservation-card__day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--theme-primary, #4c1d95);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-reservation-card__facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  margin: 0;
}

.page-mypage .mypage-reservation-card__facts>div {
  min-width: 0;
}

.page-mypage .mypage-reservation-card__facts dt {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-bottom: 0.1875rem;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--mp-muted, #7c6f8f);
  letter-spacing: 0.06em;
}

.page-mypage .mypage-reservation-card__facts dt i {
  color: var(--theme-primary, #5b21b6);
  opacity: 0.78;
  width: 14px;
  text-align: center;
}

.page-mypage .mypage-reservation-card__facts dd {
  margin: 0;
  color: var(--theme-text, #1f2937);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.page-mypage .mypage-reservation-card__payment-fact {
  padding: 0.4375rem 0.625rem;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--theme-text, #1f2937) 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-text, #1f2937) 6%, transparent);
}

.page-mypage .mypage-reservation-card__payment-fact[data-payment="paid"] {
  background-color: color-mix(in srgb, var(--theme-success, #16a34a) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-success, #16a34a) 16%, transparent);
}

.page-mypage .mypage-reservation-card__payment-fact[data-payment="unpaid"] {
  background-color: color-mix(in srgb, var(--theme-warning, #d97706) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-warning, #d97706) 18%, transparent);
}

.page-mypage .mypage-reservation-card__payment-fact dd {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.page-mypage .mypage-reservation-card__payment-fact strong {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--theme-text, #1f2937);
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-reservation-card__payment-fact small {
  font-size: 0.6875rem;
  color: var(--mp-muted, #7c6f8f);
  font-weight: 700;
}

.page-mypage .mypage-reservation-card__facts-row--wide {
  grid-column: 1 / -1;
}

.page-mypage .mypage-reservation-card__facts-row--wide dd {
  font-weight: 700;
}

.page-mypage .mypage-reservation-card__actions {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid color-mix(in srgb, var(--theme-text, #1f2937) 6%, transparent);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  background: transparent;
}

.page-mypage .mypage-reservation-card__actions .mypage-btn {
  min-height: 44px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 800;
  padding-inline: 0.875rem;
}

.page-mypage .mypage-reservation-card__cancel {
  display: inline-flex;
}

@media (max-width: 1023px) {
  .page-mypage .mypage-reservation-card__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .page-mypage .mypage-reservation-card__inner {
    padding: 0.75rem;
  }

  .page-mypage .mypage-reservation-card__head {
    flex-direction: column;
    gap: 0.625rem;
  }

  .page-mypage .mypage-reservation-card__badges {
    justify-content: flex-start;
  }

  .page-mypage .mypage-reservation-card__body {
    grid-template-columns: 1fr;
  }

  .page-mypage .mypage-reservation-card__date-block {
    width: 100%;
    min-height: 64px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0.625rem 0.75rem;
    gap: 0.625rem;
  }

  .page-mypage .mypage-reservation-card__day {
    font-size: 1.625rem;
  }

  .page-mypage .mypage-reservation-card__facts {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .page-mypage .mypage-reservation-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .page-mypage .mypage-reservation-card__actions .mypage-btn,
  .page-mypage .mypage-reservation-card__cancel {
    width: 100%;
  }
}

/* ============================================
   PHASE 9 — CALENDAR EVENT CAPSULE REMOVED
   Dot only, bottom-anchored, no overlay on date.
   Selection summary becomes link when booked.
   ============================================ */

/* Nuke every chrome from FullCalendar event wrappers */
.page-mypage .mypage-res-panel__cal .fc-event,
.page-mypage .mypage-res-panel__cal .fc-event-main,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness-abs {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
}

/* Bottom-anchored event row, no overlay on number */
.page-mypage .mypage-res-panel__cal .fc-daygrid-day-frame {
  padding-bottom: 8px !important;
}

.page-mypage .mypage-res-panel__cal .fc-daygrid-day-events {
  position: absolute !important;
  bottom: 4px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px;
  pointer-events: none;
  z-index: 2;
}

/* Dot — status-aware via inline --cal-status-color, fallback primary */
.page-mypage .mypage-res-panel__cal .mypage-cal-dot {
  display: inline-block !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--cal-status-color, var(--theme-primary)) !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0;
  vertical-align: middle;
}

.page-mypage .mypage-res-panel__cal .fc-event-warning .mypage-cal-dot {
  background-color: var(--theme-warning) !important;
}

.page-mypage .mypage-res-panel__cal .fc-event-success .mypage-cal-dot {
  background-color: var(--theme-success) !important;
}

/* Multi-event day: render second dot via pseudo */
.page-mypage .mypage-res-panel__cal .fc-day-booked--multi .fc-daygrid-day-events::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  margin-left: 2px;
  opacity: 0.7;
}

/* Hide any extra events beyond first */
.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness~.fc-daygrid-event-harness {
  display: none !important;
}

/* Cell + frame: clickable feedback when booked */
.page-mypage .mypage-res-panel__cal .fc-day-booked {
  cursor: pointer;
}

.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-frame {
  position: relative;
}

.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-number {
  color: var(--theme-primary) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-booked:hover .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 9%, transparent) !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-booked:focus-visible .fc-daygrid-day-frame {
  outline: 2px solid var(--theme-primary) !important;
  outline-offset: -2px;
}

/* Past dates still get muted */
.page-mypage .mypage-res-panel__cal .fc-day-past .fc-daygrid-day-number {
  opacity: 0.4 !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-past.fc-day-booked .fc-daygrid-day-number {
  opacity: 0.7 !important;
}

/* Selection summary — link mode */
.page-mypage .mypage-cal-selection__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  text-decoration: none;
  color: var(--theme-primary);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.625rem;
  background-color: color-mix(in srgb, var(--theme-primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-primary) 22%, transparent);
  border-radius: 8px;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-mypage .mypage-cal-selection__link:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--theme-primary) 35%, transparent);
  transform: translateX(1px);
}

.page-mypage .mypage-cal-selection__link strong {
  color: var(--theme-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-cal-selection__link i {
  font-size: 0.6875rem;
  opacity: 0.8;
}

.page-mypage .mypage-cal-selection__empty {
  font-size: 0.8125rem;
  color: var(--mp-muted);
  font-weight: 500;
}

/* ============================================
   PHASE 10 — CALENDAR EVENT VISUAL UNIFICATION
   Hide all FullCalendar event chrome; render
   booked indicator via pseudo on day cell to
   match legend exactly. No borders, no capsules.
   ============================================ */

/* Kill every FC event rendering inside the panel calendar */
.page-mypage .mypage-res-panel__cal .fc-daygrid-day-events,
.page-mypage .mypage-res-panel__cal .fc-daygrid-day-bottom,
.page-mypage .mypage-res-panel__cal .fc-event,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness,
.page-mypage .mypage-res-panel__cal .fc-daygrid-event-harness-abs {
  display: none !important;
}

/* Cell frame becomes the canvas for booked indicator */
.page-mypage .mypage-res-panel__cal .fc-daygrid-day-frame {
  position: relative !important;
  padding-bottom: 0px !important;
}

/* SINGLE booking — primary dot 6px bottom-center */
.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-frame::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  pointer-events: none;
}

/* MULTI booking — primary capsule 18x6 bottom-center */
.page-mypage .mypage-res-panel__cal .fc-day-booked--multi .fc-daygrid-day-frame::after {
  width: 18px;
  height: 6px;
  border-radius: 999px;
}

/* Past with booking — dim the indicator */
.page-mypage .mypage-res-panel__cal .fc-day-past.fc-day-booked .fc-daygrid-day-frame::after {
  background-color: color-mix(in srgb, var(--theme-primary) 50%, transparent);
}

/* Today + booked — white indicator on primary circle */
.page-mypage .mypage-res-panel__cal .fc-day-today.fc-day-booked .fc-daygrid-day-frame::after {
  background-color: #fff;
  bottom: 6px;
}

/* Remove ANY outline/border on cell hover/focus that looked like capsule */
.page-mypage .mypage-res-panel__cal .fc-day-booked .fc-daygrid-day-frame {
  border: none !important;
  outline: none !important;
}

.page-mypage .mypage-res-panel__cal .fc-day-booked:hover .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, var(--theme-primary) 9%, transparent) !important;
  outline: none !important;
}

/* Legend matches actual indicators */
.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot {
  background-color: var(--theme-primary);
  border-radius: 50%;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot[data-tone="primary"] {
  width: 6px;
  height: 6px;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot[data-tone="multi"] {
  width: 18px;
  height: 6px;
  border-radius: 999px;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot[data-tone="today"] {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--theme-text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text) 15%, transparent);
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot[data-tone="past"] {
  width: 16px;
  height: 8px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--theme-primary) 12%, transparent);
  border: none;
}

/* Legend variants — match user's actual class names */
.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot[data-tone="reserved"] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--theme-primary);
  display: inline-block;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__dot[data-tone="multiple"] {
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--theme-primary);
  display: inline-block;
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__ring[data-tone="today"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--theme-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-text) 18%, transparent);
}

.page-mypage .mypage-res-panel__cal .mypage-cal-legend__bar[data-tone="unavailable"] {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--theme-primary) 14%, transparent);
}

/* ===== Reservation Status page redesign ===== */
.page-mypage .mypage-res-status-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 14px;
  margin-bottom: 1rem;
}

.page-mypage .mypage-res-status-hero__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--theme-text, #111827);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-mypage .mypage-res-status-hero__title i {
  color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-res-status-hero__sub {
  font-size: 0.8125rem;
  color: var(--theme-text-muted, #6b7280);
  margin: 0.25rem 0 0;
}

@media (max-width: 640px) {
  .page-mypage .mypage-res-status-hero {
    flex-direction: column;
    align-items: stretch;
  }
}

.page-mypage .mypage-res-filter {
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.page-mypage .mypage-res-filter__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.page-mypage .mypage-res-filter:has(.mypage-res-filter__form:not(.is-hidden)) .mypage-res-filter__head {
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--theme-border, #e5e7eb);
}

.page-mypage .mypage-res-filter__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--theme-text, #111827);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-mypage .mypage-res-filter__title i {
  color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-res-filter__sub {
  font-size: 0.75rem;
  color: var(--theme-text-muted, #6b7280);
  margin: 0.25rem 0 0;
}

.page-mypage .mypage-res-filter__clear {
  font-size: 0.75rem;
  color: var(--theme-text-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 999px;
  background: transparent;
  transition: all 0.15s ease;
}

.page-mypage .mypage-res-filter__clear:hover {
  color: var(--theme-primary, #4f46e5);
  border-color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-res-filter__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr);
  gap: 0.875rem 1rem;
  align-items: end;
}

@media (max-width: 768px) {
  .page-mypage .mypage-res-filter__grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-mypage .mypage-res-filter__field--wide {
    grid-column: 1 / -1;
  }
}

.page-mypage .mypage-res-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.page-mypage .mypage-res-filter__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-text-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.page-mypage .mypage-res-filter__label i {
  color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-res-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.page-mypage .mypage-res-filter__chip {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: transparent;
  color: var(--theme-text, #374151);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.page-mypage .mypage-res-filter__chip:hover {
  border-color: var(--theme-primary, #4f46e5);
  color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-res-filter__chip.is-active {
  background: var(--theme-primary, #4f46e5);
  border-color: var(--theme-primary, #4f46e5);
  color: #fff;
}

.page-mypage .mypage-res-filter__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--theme-border, #e5e7eb);
}

.page-mypage .mypage-res-filter__quick-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-text-muted, #6b7280);
  margin-right: 0.25rem;
}

.page-mypage .mypage-res-filter__quick-btn {
  font-size: 0.75rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: transparent;
  color: var(--theme-text-muted, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.page-mypage .mypage-res-filter__quick-btn:hover {
  border-color: var(--theme-primary, #4f46e5);
  color: var(--theme-primary, #4f46e5);
  background: color-mix(in srgb, var(--theme-primary, #4f46e5) 6%, transparent);
}

.page-mypage .mypage-res-filter__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.875rem;
}

.page-mypage .mypage-res-filter__head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-res-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid var(--theme-border, #e5e7eb);
  background: var(--theme-surface, #fff);
  color: var(--theme-text, #374151);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.page-mypage .mypage-res-filter__toggle:hover {
  border-color: var(--theme-primary, #4f46e5);
  color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-res-filter__toggle.is-open {
  background: var(--theme-primary, #4f46e5);
  border-color: var(--theme-primary, #4f46e5);
  color: #fff;
}

.page-mypage .mypage-res-filter__toggle-caret {
  font-size: 0.625rem;
  transition: transform 0.2s ease;
}

.page-mypage .mypage-res-filter__toggle.is-open .mypage-res-filter__toggle-caret {
  transform: rotate(180deg);
}

.page-mypage .mypage-res-filter__form {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
  max-height: 600px;
  opacity: 1;
}

.page-mypage .mypage-res-filter__form.is-hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.page-mypage .mypage-res-filter__form.is-hidden>* {
  visibility: hidden;
}

/* ===== KPI cards: themed gradient backgrounds ===== */
.page-mypage .mypage-kpi[data-tone] {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-text, #111827) 6%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-mypage .mypage-kpi[data-tone]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--kpi-accent, var(--theme-primary, #4f46e5)) 40%, transparent);
  border-color: color-mix(in srgb, var(--kpi-accent, var(--theme-primary, #4f46e5)) 35%, transparent);
}

.page-mypage .mypage-kpi[data-tone="primary"] {
  --kpi-accent: var(--theme-primary, #4f46e5);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary, #4f46e5) 10%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 70%);
}

.page-mypage .mypage-kpi[data-tone="success"] {
  --kpi-accent: #10b981;
  background: linear-gradient(135deg,
      color-mix(in srgb, #10b981 12%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 70%);
}

.page-mypage .mypage-kpi[data-tone="warning"] {
  --kpi-accent: #f59e0b;
  background: linear-gradient(135deg,
      color-mix(in srgb, #f59e0b 14%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 70%);
}

.page-mypage .mypage-kpi[data-tone="info"] {
  --kpi-accent: #3b82f6;
  background: linear-gradient(135deg,
      color-mix(in srgb, #3b82f6 12%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 70%);
}

.page-mypage .mypage-kpi[data-tone="accent"] {
  --kpi-accent: #8b5cf6;
  background: linear-gradient(135deg,
      color-mix(in srgb, #8b5cf6 12%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 70%);
}

.page-mypage .mypage-kpi[data-tone]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kpi-accent, var(--theme-primary, #4f46e5)), transparent);
  opacity: 0.7;
}

.page-mypage .mypage-kpi[data-tone] .mypage-kpi__icon {
  background: color-mix(in srgb, var(--kpi-accent, var(--theme-primary, #4f46e5)) 18%, transparent);
  color: var(--kpi-accent, var(--theme-primary, #4f46e5));
  border: 1px solid color-mix(in srgb, var(--kpi-accent, var(--theme-primary, #4f46e5)) 25%, transparent);
}

.page-mypage .mypage-kpi[data-tone] .mypage-kpi__foot,
.page-mypage .mypage-kpi[data-tone] .mypage-kpi__foot i {
  color: var(--kpi-accent, var(--theme-primary, #4f46e5));
}

.page-mypage .mypage-kpi[data-attention="true"] {
  animation: kpi-pulse 2s ease-in-out infinite;
}

@keyframes kpi-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--kpi-accent, var(--theme-primary, #4f46e5)) 30%, transparent);
  }

  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--kpi-accent, var(--theme-primary, #4f46e5)) 0%, transparent);
  }
}

/* =====================================================
   Reservation Card v3 — compact, responsive, info-dense
   ===================================================== */
.page-mypage .mypage-reservation-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.page-mypage .mypage-reservation-grid>.mypage-rcard.reservation-item {
  margin: 0 0 1rem !important;
}

.page-mypage .mypage-reservation-grid>.mypage-rcard.reservation-item:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 560px) {
  .page-mypage .mypage-reservation-grid>.mypage-rcard.reservation-item {
    margin-bottom: 1.3rem !important;
  }
}

.page-mypage .mypage-rcard {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 1rem;
  align-items: stretch;
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.page-mypage .mypage-rcard:hover {
  border-color: color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 35%, var(--theme-border, #e5e7eb));
  box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 40%, transparent);
}

.page-mypage .mypage-rcard[data-status="canceled"] {
  opacity: 0.75;
}

.page-mypage .mypage-rcard[data-status="completed"] {
  background: color-mix(in srgb, var(--theme-text, #111827) 3%, var(--theme-surface, #fff));
}

/* Date block */
.page-mypage .mypage-rcard__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.625rem 0.5rem;
  background: color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 6%, transparent);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 15%, transparent);
  min-width: 88px;
}

.page-mypage .mypage-rcard__date-month {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rcard-accent, var(--theme-primary, #4f46e5));
}

.page-mypage .mypage-rcard__date-day {
  font-family: var(--theme-font-primary, 'Noto Serif JP'), serif;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 600;
  color: var(--theme-text, #111827);
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-rcard__date-wday {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--theme-text-muted, #6b7280);
}

.page-mypage .mypage-rcard__date-wday.is-weekend {
  color: #ef4444;
}

.page-mypage .mypage-rcard__countdown {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--rcard-accent, var(--theme-primary, #4f46e5));
  color: #fff;
}

.page-mypage .mypage-rcard__countdown.is-today {
  background: #ef4444;
  animation: rcard-pulse 1.6s ease-in-out infinite;
}

@keyframes rcard-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

/* Main */
.page-mypage .mypage-rcard__main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.page-mypage .mypage-rcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-mypage .mypage-rcard__title-block {
  min-width: 0;
  flex: 1 1 240px;
}

.page-mypage .mypage-rcard__id {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--theme-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-rcard__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--theme-text, #111827);
  margin: 0.125rem 0 0.25rem;
  line-height: 1.3;
  word-break: break-word;
}

.page-mypage .mypage-rcard__shop {
  font-size: 0.75rem;
  color: var(--theme-text-muted, #6b7280);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.page-mypage .mypage-rcard__shop i {
  font-size: 0.6875rem;
  color: var(--theme-primary, #4f46e5);
}

.page-mypage .mypage-rcard__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: flex-start;
  flex-shrink: 0;
}

.page-mypage .mypage-rcard__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.page-mypage .mypage-rcard__pill--status {
  background: color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 12%, transparent);
  color: var(--rcard-accent, var(--theme-primary, #4f46e5));
  border: 1px solid color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 25%, transparent);
}

.page-mypage .mypage-rcard__pill--pay[data-payment="paid"] {
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: #047857;
  border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

.page-mypage .mypage-rcard__pill--pay[data-payment="unpaid"] {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #b45309;
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

.page-mypage .mypage-rcard__pill--pay[data-payment="local"] {
  background: color-mix(in srgb, var(--theme-text, #6b7280) 8%, transparent);
  color: var(--theme-text-muted, #6b7280);
  border: 1px solid var(--theme-border, #e5e7eb);
}

/* Facts inline */
.page-mypage .mypage-rcard__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--theme-text, #374151);
}

.page-mypage .mypage-rcard__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
}

.page-mypage .mypage-rcard__facts li i {
  font-size: 0.75rem;
  color: var(--theme-primary, #4f46e5);
  flex-shrink: 0;
}

.page-mypage .mypage-rcard__facts-amount span {
  font-weight: 700;
  color: var(--theme-text, #111827);
  font-variant-numeric: tabular-nums;
}

.page-mypage .mypage-rcard__facts-addr {
  flex: 1 1 100%;
  color: var(--theme-text-muted, #6b7280);
  font-size: 0.75rem;
}

.page-mypage .mypage-rcard__facts-addr span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Actions */
.page-mypage .mypage-rcard__actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-self: center;
  flex-shrink: 0;
}

.page-mypage .mypage-rcard__actions .mypage-btn {
  justify-content: center;
  min-width: 110px;
}

/* Responsive: tablet */
@media (max-width: 900px) {
  .page-mypage .mypage-rcard {
    grid-template-columns: 72px 1fr;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem 0.75rem 1rem;
  }

  .page-mypage .mypage-rcard__date {
    min-width: 72px;
    padding: 0.5rem 0.375rem;
  }

  .page-mypage .mypage-rcard__date-day {
    font-size: 1.5rem;
  }

  .page-mypage .mypage-rcard__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 0.25rem;
  }

  .page-mypage .mypage-rcard__actions .mypage-btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
}

/* Responsive: mobile */
@media (max-width: 560px) {
  .page-mypage .mypage-rcard {
    grid-template-columns: 1fr;
    padding: 0.75rem;
  }

  .page-mypage .mypage-rcard__date {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem;
    min-width: 0;
  }

  .page-mypage .mypage-rcard__date-day {
    font-size: 1.25rem;
  }

  .page-mypage .mypage-rcard__countdown {
    margin-top: 0;
    margin-left: auto;
  }

  .page-mypage .mypage-rcard__top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .page-mypage .mypage-rcard__title-block {
    flex: 0 0 auto;
    width: 100%;
  }

  .page-mypage .mypage-rcard__pills {
    width: 100%;
  }

  .page-mypage .mypage-rcard__actions .mypage-btn {
    flex: 1 1 100%;
  }
}

/* Status-based backgrounds */
.page-mypage .mypage-rcard[data-status="confirmed"] {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--rcard-accent, var(--theme-primary, #4f46e5)) 5%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 60%);
}

.page-mypage .mypage-rcard[data-status="completed"] {
  background: linear-gradient(135deg,
      color-mix(in srgb, #6b7280 6%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 60%);
  opacity: 0.92;
}

.page-mypage .mypage-rcard[data-status="canceled"] {
  background: linear-gradient(135deg,
      color-mix(in srgb, #ef4444 6%, var(--theme-surface, #fff)) 0%,
      var(--theme-surface, #fff) 60%);
  opacity: 0.7;
}
/* =====================================================
   Unified status color tokens (mypage-wide)
   ===================================================== */
.page-mypage {
  --status-confirmed: var(--theme-primary, #4f46e5);
  --status-pending: #f59e0b;
  --status-completed: #10b981;
  --status-canceled: #ef4444;
  --status-default: #6b7280;

  --pay-paid: #10b981;
  --pay-unpaid: #f59e0b;
  --pay-local: #6b7280;
}

/* Reservation card: data-status -> unified token (overrides inline color) */
.page-mypage .mypage-rcard[data-status="confirmed"] { --rcard-accent: var(--status-confirmed); }
.page-mypage .mypage-rcard[data-status="completed"] { --rcard-accent: var(--status-completed); }
.page-mypage .mypage-rcard[data-status="canceled"]  { --rcard-accent: var(--status-canceled); }

.page-mypage .mypage-rcard[data-status="confirmed"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--status-confirmed) 6%, var(--theme-surface, #fff)) 0%,
    var(--theme-surface, #fff) 60%);
}
.page-mypage .mypage-rcard[data-status="completed"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--status-completed) 6%, var(--theme-surface, #fff)) 0%,
    var(--theme-surface, #fff) 60%);
}
.page-mypage .mypage-rcard[data-status="canceled"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--status-canceled) 7%, var(--theme-surface, #fff)) 0%,
    var(--theme-surface, #fff) 60%);
}

/* Dashboard tile status accent unified */
.page-mypage .mypage-res-tile[data-status="confirmed"] { --tile-accent: var(--status-confirmed); }
.page-mypage .mypage-res-tile[data-status="completed"] { --tile-accent: var(--status-completed); }
.page-mypage .mypage-res-tile[data-status="canceled"]  { --tile-accent: var(--status-canceled); }

/* Status pill (legacy + new) — use tokens */
.page-mypage .mypage-pill[data-status="confirmed"],
.page-mypage .mypage-rcard__pill--status[data-status="confirmed"] {
  --s: var(--status-confirmed);
}
.page-mypage .mypage-pill[data-status="completed"],
.page-mypage .mypage-rcard__pill--status[data-status="completed"] {
  --s: var(--status-completed);
}
.page-mypage .mypage-pill[data-status="canceled"],
.page-mypage .mypage-rcard__pill--status[data-status="canceled"] {
  --s: var(--status-canceled);
}

/* Payment pill colors unified via tokens */
.page-mypage .mypage-rcard__pill--pay[data-payment="paid"],
.page-mypage .mypage-pill--success {
  background: color-mix(in srgb, var(--pay-paid) 14%, transparent);
  color: color-mix(in srgb, var(--pay-paid) 70%, #000);
  border-color: color-mix(in srgb, var(--pay-paid) 30%, transparent);
}
.page-mypage .mypage-rcard__pill--pay[data-payment="unpaid"],
.page-mypage .mypage-pill--warning {
  background: color-mix(in srgb, var(--pay-unpaid) 14%, transparent);
  color: color-mix(in srgb, var(--pay-unpaid) 70%, #000);
  border-color: color-mix(in srgb, var(--pay-unpaid) 30%, transparent);
}
.page-mypage .mypage-rcard__pill--pay[data-payment="local"],
.page-mypage .mypage-pill--ghost {
  background: color-mix(in srgb, var(--pay-local) 10%, transparent);
  color: var(--pay-local);
  border-color: color-mix(in srgb, var(--pay-local) 25%, transparent);
}

/* KPI tones aligned with status tokens */
.page-mypage .mypage-kpi[data-tone="primary"]  { --kpi-accent: var(--status-confirmed); }
.page-mypage .mypage-kpi[data-tone="success"]  { --kpi-accent: var(--status-completed); }
.page-mypage .mypage-kpi[data-tone="warning"]  { --kpi-accent: var(--pay-unpaid); }
.page-mypage .mypage-kpi[data-tone="info"]     { --kpi-accent: #3b82f6; }
.page-mypage .mypage-kpi[data-tone="danger"]   { --kpi-accent: var(--status-canceled); }

/* Hero variant of reservation card (used on details page) */
.page-mypage .mypage-rcard--hero {
  grid-template-columns: 120px 1fr;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.page-mypage .mypage-rcard--hero .mypage-rcard__date {
  min-width: 120px;
  padding: 0.875rem 0.625rem;
}

.page-mypage .mypage-rcard--hero .mypage-rcard__date-day {
  font-size: 2.25rem;
}

.page-mypage .mypage-rcard--hero .mypage-rcard__title {
  font-size: 1.25rem;
}

@media (max-width: 900px) {
  .page-mypage .mypage-rcard--hero {
    grid-template-columns: 88px 1fr;
    padding: 1rem;
  }
  .page-mypage .mypage-rcard--hero .mypage-rcard__date {
    min-width: 88px;
  }
  .page-mypage .mypage-rcard--hero .mypage-rcard__date-day {
    font-size: 1.75rem;
  }
  .page-mypage .mypage-rcard--hero .mypage-rcard__title {
    font-size: 1.0625rem;
  }
}

@media (max-width: 560px) {
  .page-mypage .mypage-rcard--hero {
    grid-template-columns: 1fr;
  }
}

/* Generic pill data-status mapping (legacy .mypage-pill) */
.page-mypage .mypage-pill[data-status="confirmed"] { --s: var(--status-confirmed); }
.page-mypage .mypage-pill[data-status="completed"] { --s: var(--status-completed); }
.page-mypage .mypage-pill[data-status="canceled"]  { --s: var(--status-canceled); }

/* ===== Detail page: info tile grid (replaces dl visual) ===== */
.page-mypage .mypage-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
}

@media (max-width: 640px) {
  .page-mypage .mypage-info-grid {
    grid-template-columns: 1fr;
    padding: 0.875rem 1rem 1rem;
  }
}

.page-mypage .mypage-info-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: color-mix(in srgb, var(--theme-text, #111827) 2.5%, var(--theme-surface, #fff));
  border: 1px solid var(--theme-border, #e5e7eb);
  border-radius: 12px;
  min-width: 0;
}

.page-mypage .mypage-info-tile--wide {
  grid-column: 1 / -1;
}

.page-mypage .mypage-info-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--info-tone, var(--theme-primary, #4f46e5)) 14%, transparent);
  color: var(--info-tone, var(--theme-primary, #4f46e5));
  font-size: 0.9375rem;
}

.page-mypage .mypage-info-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.page-mypage .mypage-info-tile__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--theme-text-muted, #6b7280);
  letter-spacing: 0.02em;
}

.page-mypage .mypage-info-tile__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--theme-text, #111827);
  word-break: break-word;
  line-height: 1.4;
}

.page-mypage .mypage-info-tile__value a {
  color: var(--theme-primary, #4f46e5);
}

/* Memo block */
.page-mypage .mypage-detail-memo {
  margin: 0 1.25rem 1.25rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, #f59e0b 6%, var(--theme-surface, #fff));
  border: 1px dashed color-mix(in srgb, #f59e0b 30%, transparent);
  border-radius: 12px;
}

.page-mypage .mypage-detail-memo__label {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b45309;
  margin: 0 0 0.375rem;
}

.page-mypage .mypage-detail-memo__body {
  font-size: 0.875rem;
  color: var(--theme-text, #111827);
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

/* Alert widget variant (canceled) */
.page-mypage .mypage-widget--alert {
  border-color: color-mix(in srgb, var(--status-canceled) 30%, var(--theme-border, #e5e7eb));
  background: color-mix(in srgb, var(--status-canceled) 4%, var(--theme-surface, #fff));
}

.page-mypage .mypage-widget--alert .mypage-widget__title i {
  color: var(--status-canceled);
}

/* =====================================================
   Inbox thread v2 — chat-style redesign
   ===================================================== */
.page-mypage .inbox-thread-v2 {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 560px;
}

.page-mypage .inbox-thread-v2__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #4f46e5) 8%, var(--theme-surface, #fff)) 0%,
        var(--theme-surface, #fff) 60%);
    border-bottom: 1px solid var(--theme-border, #e5e7eb);
    flex-wrap: wrap;
}

.page-mypage .inbox-thread-v2__hero-shop {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    flex: 1 1 auto;
}

.page-mypage .inbox-thread-v2__hero-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--theme-primary, #4f46e5);
    color: #fff;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.page-mypage .inbox-thread-v2__hero-text {
    min-width: 0;
}

.page-mypage .inbox-thread-v2__hero-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text, #111827);
    margin: 0 0 0.25rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-mypage .inbox-thread-v2__hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

.page-mypage .inbox-thread-v2__hero-meta i {
    margin-right: 0.25rem;
    color: var(--theme-primary, #4f46e5);
}

.page-mypage .inbox-thread-v2__sep {
    opacity: 0.5;
}

.page-mypage .inbox-thread-v2__hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.page-mypage .inbox-thread-v2__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.page-mypage .inbox-thread-v2__status-pill[data-state="active"] {
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #047857;
    border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}

.page-mypage .inbox-thread-v2__status-pill[data-state="active"] i {
    font-size: 0.5rem;
    animation: inbox-pulse-dot 1.6s ease-in-out infinite;
}

@keyframes inbox-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.page-mypage .inbox-thread-v2__status-pill[data-state="archived"] {
    background: color-mix(in srgb, var(--theme-text, #6b7280) 8%, transparent);
    color: var(--theme-text-muted, #6b7280);
    border: 1px solid var(--theme-border, #e5e7eb);
}

.page-mypage .inbox-thread-v2__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: color-mix(in srgb, var(--theme-text, #111827) 2%, var(--theme-surface, #fff));
}

.page-mypage .inbox-thread-v2__thread {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scrollbar-width: thin;
}

.page-mypage .inbox-thread-v2__day {
    align-self: center;
    margin: 0.75rem 0 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-text, #6b7280) 6%, transparent);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6b7280);
}

.page-mypage .inbox-thread-v2__row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0.625rem;
    align-items: flex-start;
}

.page-mypage .inbox-thread-v2__row[data-side="customer"] {
    grid-template-columns: 1fr 40px;
}

.page-mypage .inbox-thread-v2__row[data-side="customer"] .inbox-thread-v2__avatar-col {
    order: 2;
}

.page-mypage .inbox-thread-v2__row[data-side="customer"] .inbox-thread-v2__bubble-col {
    order: 1;
    align-items: flex-end;
}

.page-mypage .inbox-thread-v2__row[data-grouped="true"] {
    margin-top: -0.25rem;
}

.page-mypage .inbox-thread-v2__row[data-grouped="true"] .inbox-thread-v2__bubble[data-side="shop"] {
    border-top-left-radius: 16px;
}

.page-mypage .inbox-thread-v2__row[data-grouped="true"] .inbox-thread-v2__bubble[data-side="customer"] {
    border-top-right-radius: 16px;
}

.page-mypage .inbox-thread-v2__avatar-col {
    width: 40px;
}

.page-mypage .inbox-thread-v2__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    flex-shrink: 0;
}

.page-mypage .inbox-thread-v2__avatar[data-side="shop"] {
    background: var(--theme-primary, #4f46e5);
}

.page-mypage .inbox-thread-v2__avatar[data-side="customer"] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.page-mypage .inbox-thread-v2__bubble-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
    max-width: 80%;
}

.page-mypage .inbox-thread-v2__row[data-side="customer"] .inbox-thread-v2__bubble-col {
    margin-left: auto;
}

.page-mypage .inbox-thread-v2__sender {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6b7280);
    padding: 0 0.25rem;
}

.page-mypage .inbox-thread-v2__bubble {
    position: relative;
    padding: 0.5625rem 0.875rem 0.5rem;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.55;
    word-break: break-word;
    min-width: 80px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    display: inline-block;
    max-width: 100%;
}

.page-mypage .inbox-thread-v2__bubble[data-side="shop"] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e5e7eb);
    color: var(--theme-text, #111827);
    border-top-left-radius: 4px;
}

.page-mypage .inbox-thread-v2__bubble[data-side="shop"] .inbox-thread-v2__time {
    color: var(--theme-text-muted, #6b7280);
}

.page-mypage .inbox-thread-v2__bubble[data-side="customer"] {
    background: linear-gradient(135deg,
        var(--theme-primary, #4f46e5) 0%,
        color-mix(in srgb, var(--theme-primary, #4f46e5) 80%, #000) 100%);
    color: #fff !important;
    border-top-right-radius: 4px;
    box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--theme-primary, #4f46e5) 60%, transparent);
}

.page-mypage .inbox-thread-v2__bubble[data-side="customer"] .inbox-thread-v2__bubble-body,
.page-mypage .inbox-thread-v2__bubble[data-side="customer"] .inbox-thread-v2__bubble-body * {
    color: #fff !important;
}

.page-mypage .inbox-thread-v2__bubble[data-side="customer"] .inbox-thread-v2__bubble-body a {
    color: #fff !important;
    text-decoration: underline;
}

.page-mypage .inbox-thread-v2__bubble[data-side="customer"] .inbox-thread-v2__time {
    color: rgba(255, 255, 255, 0.85) !important;
}

.page-mypage .inbox-thread-v2__bubble[data-side="customer"] a {
    color: #fff;
    text-decoration: underline;
}

.page-mypage .inbox-thread-v2__bubble-body :is(p, ul, ol) {
    margin: 0 0 0.5rem;
}

.page-mypage .inbox-thread-v2__bubble-body :is(p, ul, ol):last-child {
    margin-bottom: 0;
}

.page-mypage .inbox-thread-v2__empty {
    opacity: 0.6;
    font-style: italic;
}

.page-mypage .inbox-thread-v2__time {
    display: block;
    font-size: 0.625rem;
    color: color-mix(in srgb, currentColor 55%, transparent);
    margin-top: 0.1875rem;
    text-align: right;
    letter-spacing: 0.02em;
}

.page-mypage .inbox-thread-v2__bubble[data-side="customer"] .inbox-thread-v2__time {
    color: rgba(255, 255, 255, 0.75);
}

.page-mypage .inbox-thread-v2__composer {
    border-top: 1px solid var(--theme-border, #e5e7eb);
    padding: 0.75rem 1.25rem 1rem;
    background: var(--theme-surface, #fff);
}

.page-mypage .inbox-thread-v2__composer-inner {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.4375rem 0.4375rem 0.4375rem 0.875rem;
    background: color-mix(in srgb, var(--theme-text, #111827) 2.5%, var(--theme-surface, #fff));
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 14px;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.page-mypage .inbox-thread-v2__composer-inner:focus-within {
    border-color: var(--theme-primary, #4f46e5);
    background: var(--theme-surface, #fff);
}

.page-mypage .inbox-thread-v2__composer-input,
.page-mypage textarea.inbox-thread-v2__composer-input {
    flex: 1;
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    resize: none;
    outline: none !important;
    box-shadow: none !important;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--theme-text, #111827);
    max-height: 160px;
    overflow-y: auto;
    padding: 0.4375rem 0;
    appearance: none;
    -webkit-appearance: none;
}

.page-mypage .inbox-thread-v2__composer-input:focus,
.page-mypage textarea.inbox-thread-v2__composer-input:focus,
.page-mypage .inbox-thread-v2__composer-input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.page-mypage .inbox-thread-v2__composer-input::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

.page-mypage .inbox-thread-v2__composer-send {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 10px;
    border: 0;
    background: var(--theme-primary, #4f46e5);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.page-mypage .inbox-thread-v2__composer-send:hover {
    filter: brightness(0.95);
}

.page-mypage .inbox-thread-v2__composer-send:active {
    transform: translateY(1px);
}

.page-mypage .inbox-thread-v2__composer-error {
    color: var(--status-canceled, #ef4444);
    font-size: 0.75rem;
    margin: 0.4375rem 0 0;
}

/* Responsive */
@media (max-width: 640px) {
    .page-mypage .inbox-thread-v2 {
        height: calc(100vh - 160px);
        border-radius: 12px;
    }
    .page-mypage .inbox-thread-v2__hero {
        padding: 0.75rem 0.875rem;
    }
    .page-mypage .inbox-thread-v2__hero-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .page-mypage .inbox-thread-v2__hero-title {
        font-size: 0.9375rem;
    }
    .page-mypage .inbox-thread-v2__thread {
        padding: 0.875rem 0.75rem;
    }
    .page-mypage .inbox-thread-v2__row {
        grid-template-columns: 32px 1fr;
    }
    .page-mypage .inbox-thread-v2__row[data-side="customer"] {
        grid-template-columns: 1fr 32px;
    }
    .page-mypage .inbox-thread-v2__avatar-col {
        width: 32px;
    }
    .page-mypage .inbox-thread-v2__avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
        border-radius: 10px;
    }
    .page-mypage .inbox-thread-v2__bubble-col {
        max-width: 88%;
    }
    .page-mypage .inbox-thread-v2__composer {
        padding: 0.625rem 0.75rem 0.75rem;
    }
    .page-mypage .inbox-thread-v2__composer-send span {
        display: none;
    }
}

/* Unread message badge for thread list */
.page-mypage .inbox-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-left: 0.5rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--status-canceled, #ef4444);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: inbox-new-pulse 2s ease-in-out infinite;
    vertical-align: middle;
}

.page-mypage .inbox-new-badge i {
    font-size: 0.625rem;
}

@keyframes inbox-new-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}