:root {
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-muted: #737373;
  --color-border: #e2e2df;
  --color-dark: #111111;
  --color-charcoal: #2a2a2a;
  --color-soft: #f1f1ef;
  --color-danger: #7c2929;
  --color-danger-soft: #f6eeee;
  --color-success: #385844;
  --color-success-soft: #edf2ee;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, .05);
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --accent: var(--color-dark);
  --accent-soft: var(--color-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --radius: var(--radius-md);
  --shadow: var(--shadow-sm);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; color: var(--color-text); background: var(--color-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
::selection { color: #fff; background: #111; }

.site-header { position: sticky; top: 0; z-index: 20; height: 60px; padding: 0 max(20px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(17, 17, 17, .11); background: rgba(247, 247, 245, .94); backdrop-filter: blur(14px); }
.brand { font-size: 14px; font-weight: 600; letter-spacing: .05em; }
.top-nav { display: flex; gap: 20px; align-items: center; font-size: 13px; }
.top-nav a, .link-button { color: #555; transition: color .15s; }
.top-nav a:hover, .link-button:hover { color: #111; }
.inline-form { display: inline; margin: 0; }
.link-button { border: 0; background: none; padding: 8px 0; }

.page-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 72px; }
.landing-shell { padding-top: 0; }
.booking-shell { max-width: 720px; }
.calendar-booking-shell { max-width: 1120px; }
.admin-shell { width: min(1320px, calc(100% - 40px)); padding-top: 28px; }
h1, h2, h3 { line-height: 1.28; letter-spacing: -.02em; }
h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 600; }
h2 { font-size: 20px; font-weight: 600; }
p { margin-top: 0; }
.muted { color: var(--color-muted); }
.small, small { font-size: 12px; }
.eyebrow { margin: 0 0 7px; color: #777; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.mini-label { margin-bottom: 12px; color: #777; font-size: 12px; }
.lead { max-width: 560px; color: #d2d2d2; font-size: 16px; line-height: 1.9; }
.divider { height: 1px; margin: 4px 0; background: var(--color-border); }

.hero { min-height: calc(100vh - 60px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: stretch; margin-inline: calc(50% - 50vw); background: var(--color-dark); color: #fff; }
.hero > div:first-child { display: flex; flex-direction: column; justify-content: center; padding: 72px max(32px, calc((100vw - 1120px) / 2)); }
.hero h1 { max-width: 620px; margin: 0 0 20px; font-size: clamp(42px, 6vw, 72px); font-weight: 550; line-height: 1.08; letter-spacing: -.055em; }
.hero .eyebrow { color: #aaa; }
.hero-actions { display: flex; gap: 10px; margin-top: 28px; }
.hero .button.primary { background: #fff; color: #111; border-color: #fff; }
.hero .button.secondary { background: transparent; color: #fff; border-color: #555; }
.feature-card { align-self: center; margin: 40px max(32px, calc((100vw - 1120px) / 2)) 40px 0; padding: 28px; border: 1px solid #3e3e3e; border-radius: var(--radius-md); background: #1b1b1b; }
.flow-step { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #333; color: #e6e6e6; }
.flow-step:last-child { border-bottom: 0; }
.flow-step span { width: 24px; color: #8c8c8c; font-size: 11px; }

.button { min-height: 46px; padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: var(--radius-sm); background: #fff; color: #111; font-size: 14px; font-weight: 550; line-height: 1.2; transition: transform .15s, background-color .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); border-color: #999; }
.button:active { transform: none; }
.button.primary { color: #fff; background: #111; border-color: #111; }
.button.primary:hover { background: #292929; border-color: #292929; }
.button.secondary { background: #fff; }
.button.danger { color: var(--color-danger); background: #fff; border-color: #cbaaaa; }
.button.danger:hover { background: var(--color-danger-soft); border-color: #b98282; }
.button.full { width: 100%; }

.auth-card, .booking-card, .panel, .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.auth-card { max-width: 500px; margin: 32px auto; padding: 32px; box-shadow: var(--shadow-sm); }
.auth-card h1, .booking-card h1, .admin-heading h1 { margin: 0; }
.booking-card { padding: 30px; }
.booking-head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.booking-head.compact-head { margin-bottom: 20px; }
.booking-head h1 { font-size: 28px; }
.booking-head > .muted { margin: 8px 0 0; font-size: 13px; }
.section-heading { margin: 28px 0 16px; }
.section-heading h2 { margin: 0 0 6px; }
.section-heading p { margin: 0; font-size: 13px; }

.stack-form { display: grid; gap: 18px; }
.choice-fieldset { margin: 0; padding: 0; border: 0; }
.choice-fieldset legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.required-note { color: #766b55; font-size: 10px; font-weight: 500; }
.radio-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radio-choice { position: relative; cursor: pointer; }
.radio-choice input { position: absolute; opacity: 0; pointer-events: none; }
.radio-choice span { min-height: 46px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font-size: 13px; transition: border-color .15s, background .15s, box-shadow .15s; }
.radio-choice input:checked + span { border-color: #6f745d; background: #eff0e9; box-shadow: inset 0 0 0 1px #6f745d; }
.radio-choice input:focus-visible + span { outline: 2px solid #111; outline-offset: 2px; }
label, .field-label { display: grid; gap: 7px; color: #343434; font-size: 13px; font-weight: 550; }
label small { color: var(--color-muted); font-weight: 400; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid #d5d5d2; border-radius: var(--radius-sm); outline: none; background: #fff; color: #111; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 108px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #aaa; }
input:focus, select:focus, textarea:focus { border-color: #111; box-shadow: 0 0 0 2px rgba(17, 17, 17, .08); }
input[type="checkbox"] { min-height: 0; accent-color: #111; }
.flash-stack { margin-bottom: 18px; display: grid; gap: 8px; }
.flash { padding: 12px 14px; border: 1px solid #d7ddd8; border-radius: var(--radius-sm); background: var(--color-success-soft); color: var(--color-success); font-size: 13px; }
.flash.error { color: var(--color-danger); background: var(--color-danger-soft); border-color: #e5caca; }
.flash.success { color: var(--color-success); background: var(--color-success-soft); }

.booking-steps { list-style: none; margin: 0 0 28px; padding: 0 0 15px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); }
.booking-steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; color: #999; font-size: 12px; white-space: nowrap; }
.booking-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 2px; background: transparent; }
.booking-steps li span { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #ccc; border-radius: 50%; font-size: 10px; }
.booking-steps li.active { color: #111; font-weight: 600; }
.booking-steps li.active::after { background: #111; }
.booking-steps li.active span { color: #fff; background: #111; border-color: #111; }
.booking-steps li.done { color: #555; }
.booking-steps li.done span { color: #fff; background: #777; border-color: #777; }

.customer-menu-list { display: grid; gap: 10px; }
.customer-menu-card { display: grid; grid-template-columns: 1fr auto 18px; gap: 14px; align-items: center; min-height: 86px; padding: 17px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; transition: color .15s, background-color .15s, border-color .15s, transform .15s; }
.customer-menu-card:hover, .customer-menu-card:focus-visible { color: #fff; background: #111; border-color: #111; transform: translateY(-1px); outline: none; }
.menu-card-main { min-width: 0; display: grid; gap: 5px; }
.menu-card-main strong { overflow-wrap: anywhere; font-size: 16px; font-weight: 600; }
.menu-card-main small { color: var(--color-muted); }
.customer-menu-card:hover small, .customer-menu-card:focus-visible small { color: #bbb; }
.menu-card-price { font-weight: 600; white-space: nowrap; }
.menu-card-arrow { color: #999; font-size: 21px; }

.selected-menu-summary { margin-top: 18px; padding: 15px 16px; display: flex; justify-content: space-between; gap: 18px; align-items: center; border-left: 3px solid #111; background: var(--color-soft); }
.selected-menu-summary > div { display: grid; gap: 3px; }
.selected-menu-summary span { color: var(--color-muted); font-size: 12px; }
.calendar-card { padding: 28px; }
.calendar-toolbar { margin: 4px 0 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.calendar-toolbar > :last-child { justify-self: end; }
.week-nav { min-height: 42px; padding: 8px 12px; display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font-size: 12px; font-weight: 550; }
.week-nav:hover { border-color: #999; }
.calendar-help { margin: 0 0 10px; color: var(--color-muted); font-size: 12px; }
.calendar-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; }
.availability-calendar { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; }
.availability-calendar th, .availability-calendar td { width: 96px; height: 54px; padding: 5px; border-right: 1px solid #e8e8e6; border-bottom: 1px solid #e8e8e6; text-align: center; }
.availability-calendar tr > :last-child { border-right: 0; }
.availability-calendar tbody tr:last-child > * { border-bottom: 0; }
.availability-calendar .calendar-opening-spacer th, .availability-calendar .calendar-opening-spacer td { height: 27px; padding: 0; background: #fafaf9; }
.availability-calendar thead th { position: sticky; top: 0; z-index: 3; background: #f7f7f5; }
.calendar-corner, .time-heading { position: sticky; left: 0; z-index: 4; width: 68px !important; min-width: 68px; background: #f7f7f5; color: #666; font-size: 11px; }
.calendar-corner { z-index: 5 !important; }
.date-heading span, .date-heading strong { display: block; }
.date-heading span { margin-bottom: 3px; color: #888; font-size: 11px; font-weight: 400; }
.date-heading strong { font-size: 13px; font-weight: 600; }
.date-heading.outside-range { color: #aaa; background: #f1f1ef; }
.available-cell a { width: 42px; height: 42px; display: grid; place-items: center; margin: auto; border: 1px solid #111; border-radius: var(--radius-sm); background: #fff; color: #111; font-size: 17px; font-weight: 600; transition: color .12s, background-color .12s; }
.available-cell a:hover, .available-cell a:active, .available-cell a:focus-visible { color: #fff; background: #111; outline: none; }
.unavailable-cell { color: #c3c3c0; background: #fafaf9; font-size: 16px; }
.closed-day { color: #777; background: repeating-linear-gradient(135deg, #f3f3f1, #f3f3f1 10px, #ededeb 10px, #ededeb 20px); }
.closed-day span { display: block; font-size: 22px; font-weight: 500; letter-spacing: .1em; }

.reservation-summary { margin-bottom: 24px; border-top: 1px solid #111; border-bottom: 1px solid var(--color-border); }
.reservation-summary > div, .summary-list > div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 2px; border-bottom: 1px solid var(--color-border); }
.reservation-summary > div:last-child, .summary-list > div:last-child { border-bottom: 0; }
.reservation-summary span, .summary-list span { color: var(--color-muted); font-size: 12px; }
.summary-list { margin: 26px 0; border-top: 1px solid var(--color-border); }
.summary-list.compact { margin: 8px 0 24px; }
.text-back-link { display: inline-block; margin-top: 22px; color: var(--color-muted); font-size: 13px; border-bottom: 1px solid #aaa; }
.policy-box { padding: 14px 15px; border-left: 2px solid #999; background: var(--color-soft); color: #666; font-size: 12px; line-height: 1.8; }
.success-card { text-align: center; padding-top: 42px; }
.success-icon { width: 52px; height: 52px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #111; color: #fff; font-size: 22px; }
.success-notice { margin: 0 0 16px; text-align: left; }
.slot-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot-button { min-height: 44px; padding: 10px 4px; border: 1px solid #ccc; border-radius: var(--radius-sm); background: #fff; font-weight: 550; }
.slot-button:hover, .slot-button.selected { color: #fff; background: #111; border-color: #111; }

.admin-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; }
.sidebar { position: sticky; top: 88px; align-self: start; display: grid; gap: 1px; border-top: 1px solid #111; }
.sidebar-title { padding: 16px 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 13px; font-weight: 600; }
.sidebar a { min-height: 42px; padding: 10px; border-bottom: 1px solid var(--color-border); color: #777; font-size: 13px; }
.sidebar a.active { color: #fff; background: #111; border-color: #111; }
.sidebar a:hover:not(.active) { color: #111; background: var(--color-soft); }
.admin-content { min-width: 0; }
.admin-heading { margin-bottom: 22px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; }
.admin-heading h1 { font-size: 28px; }
.admin-heading-note { margin: 7px 0 0; font-size: 12px; }
.admin-heading-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.admin-week-toolbar { margin-bottom: 10px; display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; }
.admin-week-toolbar strong { justify-self: center; font-size: 14px; }

.admin-calendar-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; -webkit-overflow-scrolling: touch; }
.admin-calendar-grid { min-width: 920px; }
.admin-calendar-head { position: sticky; top: 0; z-index: 8; height: 58px; display: grid; grid-template-columns: 68px repeat(7, minmax(116px, 1fr)); border-bottom: 1px solid var(--color-border); background: #f7f7f5; }
.admin-calendar-corner { position: sticky; left: 0; z-index: 10; display: grid; place-items: center; border-right: 1px solid var(--color-border); background: #f7f7f5; color: #777; font-size: 11px; }
.admin-date-heading { display: flex; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--color-border); }
.admin-date-heading:last-child { border-right: 0; }
.admin-date-heading span { color: #888; font-size: 11px; }
.admin-date-heading strong { font-size: 13px; font-weight: 600; }
.admin-date-heading small { padding-left: 5px; color: #777; font-size: 10px; }
.admin-date-heading.closed { background: #ededeb; }
.admin-date-heading.today { box-shadow: inset 0 -2px #111; }
.admin-date-heading.today strong { font-weight: 700; }
.admin-calendar-body { height: var(--calendar-height); min-height: 100%; display: grid; grid-template-columns: 68px repeat(7, minmax(116px, 1fr)); }
.admin-time-rail { position: sticky; left: 0; z-index: 6; height: var(--calendar-height); border-right: 1px solid var(--color-border); background: #f7f7f5; }
.admin-time-rail span { position: absolute; right: 9px; transform: translateY(-50%); color: #777; font-size: 10px; }
.admin-day-column { position: relative; height: var(--calendar-height); border-right: 1px solid var(--color-border); background-color: #fff; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, #e8e8e6 63px, #e8e8e6 64px); background-position-y: calc(var(--first-hour-top) - 63px); }
.admin-day-column:last-child { border-right: 0; }
.admin-day-column.closed { background-color: #f1f1ef; background-image: repeating-linear-gradient(135deg, transparent 0, transparent 11px, rgba(17,17,17,.035) 11px, rgba(17,17,17,.035) 22px), repeating-linear-gradient(to bottom, transparent 0, transparent 63px, #dededb 63px, #dededb 64px); background-position: 0 0, 0 calc(var(--first-hour-top) - 63px); }
.admin-empty-slot { position: absolute; left: 0; right: 0; z-index: 1; width: 100%; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: #111; }
.admin-empty-slot span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #bbb; border-radius: var(--radius-sm); background: #fff; opacity: 0; font-size: 16px; transition: opacity .15s, transform .15s; }
.admin-empty-slot:hover { background: rgba(17,17,17,.035); }
.admin-empty-slot:hover span, .admin-empty-slot:focus-visible span { opacity: 1; transform: translateY(-1px); }
.admin-empty-slot:focus-visible { z-index: 4; outline: 2px solid #111; outline-offset: -3px; }
.admin-booking-card { position: absolute; left: 4px; right: 4px; z-index: 2; min-height: 30px; padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; border: 1px solid #d6d6d3; border-left: 4px solid #111; border-radius: 6px; background: #f6f6f4; color: #111; font-size: 11px; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.admin-booking-card:hover { z-index: 3; background: #fff; box-shadow: var(--shadow-sm); }
.admin-booking-card strong { font-weight: 650; }
.admin-booking-card strong, .admin-booking-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-booking-card small { color: #666; }
.admin-booking-time { font-size: 10px; font-weight: 600; }
.admin-booking-card.customer-new { border-color: #b7bba8; border-left-color: #72785d; background: #eceee5; }
.admin-booking-card.customer-existing { border-color: #c8c0b5; border-left-color: #897967; background: #f0ece7; }
.admin-block-card { position: absolute; left: 4px; right: 4px; z-index: 2; min-height: 30px; padding: 6px 7px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; border: 1px solid #111; border-left: 4px solid #000; border-radius: 6px; background: #2b2b2b; color: #fff; font-size: 11px; line-height: 1.25; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.admin-block-card:hover { z-index: 3; background: #3b3b3b; box-shadow: var(--shadow-sm); }
.admin-block-card strong, .admin-block-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-block-card small { color: #ccc; }
.admin-closed-label { position: sticky; top: 70px; z-index: 1; display: block; width: max-content; margin: 18px auto 0; padding: 7px 9px; border: 1px solid #ccc; border-radius: var(--radius-sm); background: rgba(255,255,255,.9); color: #666; font-size: 12px; font-weight: 600; pointer-events: none; }

.slot-action-overlay[hidden] { display: none !important; }
.slot-action-overlay { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; background: rgba(0,0,0,.56); }
.slot-action-dialog { position: relative; width: min(92vw, 390px); padding: 24px; border: 1px solid #333; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 22px 70px rgba(0,0,0,.25); }
.slot-action-dialog h2 { margin: 0 34px 7px 0; }
.slot-action-datetime { margin: 0 0 20px; color: var(--color-muted); font-size: 13px; font-weight: 550; }
.slot-action-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #555; font-size: 24px; }
.slot-action-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.panel { margin-bottom: 18px; padding: 22px; box-shadow: none; }
.panel.no-pad { padding: 0; overflow: hidden; }
.panel h2 { margin: 0 0 17px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); font-size: 17px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head a { color: var(--color-muted); font-size: 12px; }
.detail-grid { margin-bottom: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; border-top: 1px solid var(--color-border); }
.detail-grid > div { padding: 14px 0; display: grid; gap: 3px; border-bottom: 1px solid var(--color-border); }
.detail-grid span { color: var(--color-muted); font-size: 12px; }
.detail-sections { border-top: 1px solid #111; }
.detail-section { padding: 16px 2px; display: grid; gap: 4px; border-bottom: 1px solid var(--color-border); }
.detail-section > span, .detail-section > small { color: var(--color-muted); font-size: 12px; }
.detail-section > strong { font-size: 16px; font-weight: 600; }
.detail-contact { margin-top: 9px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 5px 10px; color: #555; font-size: 12px; }
.detail-contact small { color: #999; }
.detail-contact span { overflow-wrap: anywhere; }
.block-detail-badge, .status { display: inline-flex; padding: 5px 8px; border: 1px solid #bbb; border-radius: 5px; background: #fff; color: #444; font-size: 11px; font-weight: 600; white-space: nowrap; }
.block-detail-badge { margin-bottom: 16px; color: #fff; background: #333; border-color: #333; }
.status.cancelled { color: var(--color-danger); background: var(--color-danger-soft); border-color: #dfc4c4; }
.block-form-help, .dayoff-guidance { margin: 0 0 20px; padding: 13px 15px; border-left: 2px solid #555; background: var(--color-soft); color: #606060; font-size: 12px; line-height: 1.75; }
.dayoff-guidance { border-left-color: #888; }
.admin-booking-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.narrow-panel, .form-panel { max-width: 680px; }
.stats-grid { margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; }
.stat-card { padding: 18px; box-shadow: none; }
.stat-card span { display: block; margin-bottom: 6px; color: var(--color-muted); font-size: 12px; }
.stat-card strong { font-size: 28px; font-weight: 600; }
.stat-card small { margin-left: 4px; color: var(--color-muted); }
.stat-card code { font-size: 14px; word-break: break-all; }
.booking-list { display: grid; }
.booking-row { min-height: 72px; padding: 14px 18px; display: grid; grid-template-columns: 72px 1fr auto 18px; gap: 14px; align-items: center; border-bottom: 1px solid var(--color-border); transition: background .15s; }
.booking-row:hover { background: var(--color-soft); }
.booking-row:last-child { border-bottom: 0; }
.date-block, .booking-main { display: grid; }
.date-block span, .booking-main span { margin-top: 2px; color: var(--color-muted); font-size: 12px; }
.chevron { color: #aaa; font-size: 20px; }
.tabs { margin-bottom: 14px; display: flex; gap: 0; border-bottom: 1px solid var(--color-border); }
.tabs a { padding: 9px 13px; color: #777; font-size: 12px; border-bottom: 2px solid transparent; }
.tabs a.active { color: #111; border-color: #111; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.history-list { display: grid; }
.history-item { padding: 14px 0; display: grid; grid-template-columns: 180px 1fr; gap: 18px; border-bottom: 1px solid var(--color-border); }
.history-item:last-child { border-bottom: 0; }
.history-item div { display: grid; }
.history-item span { margin-top: 3px; color: var(--color-muted); font-size: 12px; }
.history-item p { margin: 0; color: #555; }
.inline-grid-form { display: grid; grid-template-columns: 1.4fr .7fr .8fr auto; gap: 12px; align-items: end; }
.menu-admin-item { padding: 18px 0; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; border-bottom: 1px solid var(--color-border); }
.menu-admin-item:last-child { border-bottom: 0; }
.muted-item { opacity: .5; }
.text-action { padding: 10px 0; border: 0; background: none; color: var(--color-muted); font-size: 12px; text-decoration: underline; }
.hours-form { display: grid; gap: 10px; }
.hours-row { padding: 9px 0; display: grid; grid-template-columns: 50px 90px 1fr 28px 1fr; gap: 10px; align-items: center; border-bottom: 1px solid var(--color-border); }
.switch-label { display: flex; grid-template: none; align-items: center; gap: 8px; font-weight: 500; }
.switch-label input { width: auto; }
.dayoff-form { display: flex; gap: 10px; }
.dayoff-list > div { padding: 12px 0; display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--color-border); }
.dayoff-list span { color: var(--color-muted); }
.empty-state { padding: 30px 10px; color: var(--color-muted); text-align: center; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero > div:first-child { min-height: 56vh; padding: 64px 5vw; }
  .feature-card { margin: 0; padding: 34px 5vw; border-width: 1px 0 0; border-radius: 0; }
  .calendar-booking-shell { width: 100%; max-width: none; }
  .calendar-card { border-left: 0; border-right: 0; border-radius: 0; padding-inline: 4vw; }
  .admin-layout { grid-template-columns: 1fr; gap: 20px; }
  .sidebar { position: static; display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-title { display: none; }
  .sidebar a { min-height: 40px; flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; }
  .sidebar a.active { color: #111; background: transparent; border-color: #111; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card.wide { grid-column: 1 / -1; }
  .two-col { grid-template-columns: 1fr; }
  .inline-grid-form { grid-template-columns: 1fr 1fr; }
  .menu-admin-item { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --mobile-calendar-time-width: 44px; }
  body { font-size: 14px; }
  .site-header { height: 58px; padding: 0 18px; }
  .top-nav { gap: 12px; font-size: 12px; }
  .top-nav a:first-child { display: none; }
  .page-shell { width: calc(100% - 32px); padding: 24px 0 56px; }
  .landing-shell { width: 100%; padding: 0; }
  .hero { min-height: calc(100vh - 58px); }
  .hero > div:first-child { min-height: 55vh; padding: 48px 20px; }
  .hero h1 { font-size: 40px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .feature-card { padding: 28px 20px; }
  .auth-card, .booking-card, .panel { padding: 20px; border-radius: var(--radius-md); }
  .auth-card { margin-top: 12px; }
  .booking-card { padding: 22px 18px; }
  .calendar-booking-shell { width: 100%; }
  .calendar-card { padding: 20px 8px; }
  .booking-head h1, .admin-heading h1 { font-size: 24px; }
  .booking-steps { gap: 4px; }
  .booking-steps li { gap: 4px; font-size: 10px; }
  .booking-steps li span { width: 18px; height: 18px; font-size: 9px; }
  .selected-menu-summary { align-items: flex-start; }
  .calendar-toolbar { font-size: 12px; }
  .week-nav { min-height: 44px; padding: 8px; font-size: 11px; }
  .calendar-scroll { width: 100%; overflow-x: hidden; }
  .availability-calendar { width: 100%; min-width: 0; table-layout: fixed; }
  .availability-calendar th, .availability-calendar td { width: auto; height: 50px; padding: 2px 1px; }
  .calendar-corner, .time-heading { width: var(--mobile-calendar-time-width) !important; min-width: var(--mobile-calendar-time-width); padding-inline: 2px; font-size: 9px; }
  .date-heading { padding-inline: 0 !important; }
  .date-heading span { margin-bottom: 1px; font-size: 9px; }
  .date-heading strong { font-size: 9px; letter-spacing: -.04em; }
  .available-cell a { width: calc(100% - 4px); max-width: 38px; height: 44px; border-radius: 6px; font-size: 14px; }
  .unavailable-cell { font-size: 13px; }
  .closed-day span { font-size: 16px; }
  .reservation-summary strong, .summary-list strong { max-width: 68%; text-align: right; overflow-wrap: anywhere; }
  .admin-shell { width: calc(100% - 32px); padding-top: 18px; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .admin-heading-actions { width: 100%; justify-content: flex-start; }
  .admin-heading-actions .button { flex: 1; min-width: 104px; padding-inline: 10px; }
  .admin-week-toolbar { grid-template-columns: auto auto 1fr auto; gap: 5px; }
  .admin-week-toolbar strong { font-size: 11px; }
  .admin-calendar-scroll { width: calc(100% + 32px); margin-inline: -16px; overflow-x: hidden; border-radius: 0; }
  .admin-calendar-grid { width: 100%; min-width: 0; }
  .admin-calendar-head, .admin-calendar-body { width: 100%; grid-template-columns: var(--mobile-calendar-time-width) repeat(7, minmax(0, 1fr)); }
  .admin-calendar-corner, .admin-time-rail { width: var(--mobile-calendar-time-width); font-size: 9px; }
  .admin-time-rail span { right: 4px; font-size: 8px; }
  .admin-date-heading { min-width: 0; padding: 2px 0; flex-direction: column; gap: 0; overflow: hidden; }
  .admin-date-heading span { font-size: 8px; line-height: 1.2; }
  .admin-date-heading strong { font-size: 9px; line-height: 1.25; letter-spacing: -.04em; }
  .admin-date-heading small { padding: 0; font-size: 8px; line-height: 1.2; }
  .admin-booking-card, .admin-block-card { left: 1px; right: 1px; gap: 1px; padding: 3px 2px; border-left-width: 2px; border-radius: 3px; font-size: 8px; line-height: 1.15; }
  .admin-booking-card strong, .admin-booking-card small, .admin-block-card strong, .admin-block-card small { text-overflow: ellipsis; white-space: nowrap; }
  .admin-booking-time { display: none; }
  .admin-empty-slot span { width: 26px; height: 32px; border-radius: 5px; opacity: .35; font-size: 13px; }
  .admin-closed-label { top: 66px; margin-top: 12px; padding: 0; border: 0; background: transparent; font-size: 0; }
  .admin-closed-label::after { content: "休"; color: #777; font-size: 14px; font-weight: 500; }
  .slot-action-overlay { align-items: end; padding: 12px; }
  .slot-action-dialog { width: 100%; padding: 24px 18px 18px; border-radius: var(--radius-lg); }
  .slot-action-links { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-booking-datetime, .detail-grid { grid-template-columns: 1fr; }
  .inline-grid-form { grid-template-columns: 1fr; }
  .hours-row { grid-template-columns: 34px 76px 1fr 12px 1fr; gap: 6px; }
  .hours-row input { padding: 9px 6px; }
  .dayoff-form { flex-direction: column; }
  .dayoff-list > div { grid-template-columns: 1fr auto; }
  .dayoff-list span { display: none; }
  .history-item { grid-template-columns: 1fr; gap: 8px; }
  .booking-row { padding-inline: 14px; grid-template-columns: 62px 1fr auto 12px; gap: 8px; }
  .booking-row .status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}