@charset "UTF-8";

body:has(.booking-head), body:has(.confirmation-card), body:has(.form-card.narrow) { background: linear-gradient(145deg,#f8fcff,#eef7ff); }
.public-content:has(.booking-head) { max-width: 820px; }
.booking-head { position: relative; margin: 0 0 24px; padding: 27px 28px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; }
.booking-head::after { content: ""; position: absolute; width: 145px; height: 145px; top: -70px; right: -45px; background: var(--primary-soft); border-radius: 50%; }
.booking-head h1 { position: relative; z-index: 1; margin: 5px 0; font-size: clamp(1.45rem,3vw,2rem); }
.booking-head p { position: relative; z-index: 1; margin: 5px 0 0; color: var(--muted); }
.step-label { position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 5px 11px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }

.date-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: 11px; }
.date-card, .time-card { min-height: 108px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 15px 10px; color: var(--navy); background: #fff; border: 1px solid #cdddeb; border-radius: 11px; box-shadow: var(--shadow-xs); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); }
.date-card:hover, .time-card:hover { color: var(--navy); background: #f8fbff; border-color: var(--primary); box-shadow: 0 10px 24px rgba(37,99,235,.13); transform: translateY(-2px); }
.date-card strong { font-size: 1.1rem; }
.date-card > span { color: var(--muted); font-size: .75rem; text-transform: uppercase; }
.date-card small, .time-card span { margin-top: 5px; padding: 2px 8px; color: #047857; background: var(--success-soft); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.date-card.status-残り少ない small, .time-card span:has(+ *) { color: #b45309; background: var(--warning-soft); }
.status-休み, .status-満席, .disabled { opacity: 1; color: #98a6b5; background: #f1f5f9; border-color: #e1e7ee; box-shadow: none; pointer-events: none; }
.status-満席 small { color: #b91c1c; background: #fee2e2; }
.status-休み small { color: #64748b; background: #e2e8f0; }

.time-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 11px; margin-bottom: 22px; }
.time-card { min-height: 82px; border-color: #bfd5ef; }
.time-card strong { color: var(--navy); font-size: 1.08rem; }
.time-card.disabled span { color: #8494a5; background: #e5ebf1; }

.public-content:has(.booking-head) > a:last-of-type { display: inline-flex; min-height: 44px; align-items: center; margin-top: 12px; padding: 7px 12px; border-radius: 8px; font-weight: 700; }
.notice { margin-top: 26px; padding: 17px 19px; color: #7c5311; background: var(--warning-soft); border: 1px solid #fde2a8; border-radius: 10px; }
.confirmation-card { border-top: 4px solid var(--primary); }
.confirmation-card dl { padding: 5px 0 20px; }
.confirmation-card form { margin-top: 14px; }
.confirmation-card .primary-button, .confirmation-card .danger-button { min-width: 210px; }

.form-card.narrow { border-top: 4px solid var(--primary); }
.form-card.narrow b { display: inline-flex; margin-left: 5px; padding: 1px 5px; color: #fff; background: var(--danger); border-radius: 4px; font-size: .67rem; vertical-align: middle; }

@media (max-width: 700px) {
    .public-content:has(.booking-head) { padding-inline: 12px; }
    .booking-head { padding: 21px 18px; border-radius: 12px; }
    .date-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
    .date-card { min-height: 96px; padding: 10px 5px; }
    .date-card strong { font-size: 1rem; }
    .time-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .time-card { min-height: 72px; }
    .confirmation-card .primary-button, .confirmation-card .danger-button { width: 100%; }
}

@media (max-width: 360px) {
    .date-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}