:root {
    --paper: #f4efe6;
    --ink: #241c16;
    --moss: #2f4f45;
    --moss-deep: #1c322c;
    --clay: #b85c38;
    --line: #d8cfc2;
    --white: #fffdf8;
    --danger: #8c2f2f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: radial-gradient(circle at top right, #efe6d6 0, var(--paper) 42%);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    line-height: 1.7;
}

h1, h2, h3, .site-title, .button-primary, .menu-card__name {
    font-family: "Yu Gothic Medium", "Hiragino Sans", "Noto Sans JP", sans-serif;
    letter-spacing: 0.04em;
}

a { color: var(--moss); }
a:hover { color: var(--clay); }

.site-header, .site-footer {
    padding: 1.5rem 1.25rem;
}

.site-header__inner, .site-main, .site-footer {
    max-width: 52rem;
    margin: 0 auto;
}

.site-mark {
    margin: 0;
    color: var(--clay);
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.site-title { margin: 0.2rem 0 0; font-size: 1.6rem; }

.panel, .login-card, .admin-main {
    background: var(--white);
    border: 1px solid var(--line);
}

.panel, .login-card {
    padding: 1.75rem;
    border-radius: 2px;
}

.eyebrow {
    margin: 0;
    color: var(--clay);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
}

.lead, .hint { color: #5c534a; }

.flash-list { list-style: none; padding: 0; }
.flash { padding: 0.75rem 1rem; border-radius: 2px; }
.flash--error { background: #f8e8e4; color: var(--danger); }
.flash--success { background: #e7efe8; color: var(--moss-deep); }

.fieldset {
    border: 0;
    padding: 0;
    margin: 1.5rem 0;
}

.fieldset legend {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.menu-grid, .slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.menu-card, .slot-button {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    background: #fbf7f0;
    cursor: pointer;
}

.menu-card:has(input:checked), .slot-button.is-selected {
    border-color: var(--moss);
    background: #eef4f0;
}

.menu-card input { accent-color: var(--moss); }

.field, .stack-form, .booking-form { display: grid; gap: 0.45rem; }
.field span { font-size: 0.9rem; }
input, select, textarea {
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.date-field {
    position: relative;
    display: block;
}

.date-field__display {
    display: block;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    background: #fff;
    min-height: 2.5rem;
    font-family: "Yu Gothic Medium", "Hiragino Sans", "Noto Sans JP", sans-serif;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.date-field__display.is-placeholder {
    color: #8a8076;
}

.date-field__input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: transparent;
    background: transparent;
}

.date-field__input::-webkit-datetime-edit,
.date-field__input::-webkit-datetime-edit-fields-wrapper,
.date-field__input::-webkit-datetime-edit-text,
.date-field__input::-webkit-datetime-edit-year-field,
.date-field__input::-webkit-datetime-edit-month-field,
.date-field__input::-webkit-datetime-edit-day-field {
    color: transparent;
}

.date-field__input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.date-field__input:disabled {
    cursor: not-allowed;
}

.date-field:focus-within .date-field__display {
    outline: 2px solid var(--moss);
    outline-offset: 1px;
}

.availability-week {
    display: grid;
    gap: 0.75rem;
}

.availability-week__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.availability-week__nav-button {
    font-family: "Yu Gothic Medium", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: 0.85rem;
    padding: 0.35rem 0.15rem;
    border: 0;
    background: transparent;
    color: var(--clay);
    cursor: pointer;
}

.availability-week__nav-button:disabled {
    color: #b5aea4;
    cursor: default;
}

.availability-week__scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    background: var(--white);
}

.availability-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: "Yu Gothic Medium", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: 0.78rem;
    line-height: 1.3;
}

.availability-table th,
.availability-table td {
    border: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
    padding: 0.2rem 0.1rem;
}

.availability-table thead th {
    background: #f6f1e8;
    font-weight: 700;
}

.availability-table__month {
    font-size: 0.75rem;
}

.availability-table__day {
    min-width: 3.1rem;
}

.availability-table__day-num,
.availability-table__day-week {
    display: block;
}

.availability-table__day.is-saturday {
    color: #2f5f9e;
}

.availability-table__day.is-sunday {
    color: #c4453c;
}

.availability-table__time {
    width: 3.2rem;
    min-width: 3.2rem;
    background: #f6f1e8;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.availability-table tbody tr:nth-child(even) td {
    background: #fbf7f0;
}

.availability-table tbody tr:nth-child(even) .availability-table__time {
    background: #f1ebe1;
}

.availability-cell--closed {
    background: #ece8e2;
    color: #9a9288;
}

.availability-table tbody tr:nth-child(even) .availability-cell--closed {
    background: #e5e0d8;
}

.availability-cell--unavailable {
    color: #6b6258;
}

.availability-mark {
    font-weight: 700;
}

.availability-mark--available,
.availability-cell__button {
    color: var(--clay);
}

.availability-mark--unavailable,
.availability-mark--closed {
    color: #8a8076;
}

.availability-cell__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.7rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.availability-cell__button:hover {
    background: #eef4f0;
}

.availability-cell.is-selected,
.availability-table tbody tr:nth-child(even) .availability-cell.is-selected {
    background: #eef4f0;
}

.availability-cell__button.is-selected {
    outline: 2px solid var(--moss);
    outline-offset: -2px;
}

.availability-week__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #5c534a;
    font-size: 0.85rem;
}

.button-primary, .button-quiet, .button-danger {
    font-family: "Yu Gothic Medium", "Hiragino Sans", sans-serif;
    border: 0;
    cursor: pointer;
    padding: 0.7rem 1.1rem;
}

.button-primary { background: var(--moss); color: #f7f4ef; }
.button-primary:hover { background: var(--moss-deep); }
.button-quiet { background: transparent; color: var(--moss); border: 1px solid var(--line); }
.button-danger { background: var(--danger); color: #fff; }

.summary { display: grid; gap: 0.75rem; }
.summary div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem; }
.summary dt { color: #6b6258; }

.admin-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
    background: #ebe4d8;
}

.admin-nav {
    background: var(--moss-deep);
    color: #f3eee4;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-nav a {
    display: block;
    color: #d5e0da;
    text-decoration: none;
    padding: 0.35rem 0;
}

.admin-nav a.is-current, .admin-nav a:hover { color: #fff; }

.admin-main { margin: 1rem; padding: 1.5rem; min-height: calc(100vh - 2rem); }

.admin-section h3 {
    margin: 2rem 0 0.5rem;
}

.admin-section__header, .calendar-toolbar, .inline-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.data-table th, .data-table td {
    border-bottom: 1px solid var(--line);
    text-align: left;
    padding: 0.65rem 0.4rem;
}

.weekday-hours-table input[type="time"] {
    min-width: 8rem;
}

.view-toggle { display: flex; gap: 0.25rem; }
.view-toggle__button.is-current { background: var(--moss); color: #fff; }

.admin-calendar { margin-top: 1rem; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.calendar-head, .calendar-cell {
    background: var(--white);
    min-height: 7rem;
    padding: 0.4rem;
    font-size: 0.85rem;
}

.calendar-head { min-height: auto; font-weight: 700; background: #f6f1e8; }

.calendar-cell--day {
    cursor: pointer;
}

.calendar-cell--day:hover {
    background: #f6f1e8;
}

.calendar-event {
    display: block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.3rem;
    background: #e4eee8;
    color: var(--moss-deep);
    text-decoration: none;
    font-size: 0.75rem;
}

.calendar-event.is-cancelled {
    text-decoration: line-through;
    opacity: 0.55;
}

[data-staff-color-index="0"] { background-color: #c5e4c8; }
[data-staff-color-index="1"] { background-color: #f2c5c1; }
[data-staff-color-index="2"] { background-color: #c9d7ef; }
[data-staff-color-index="3"] { background-color: #f0ddb0; }
[data-staff-color-index="4"] { background-color: #ddccea; }
[data-staff-color-index="5"] { background-color: #bfe4dc; }
[data-staff-color-index="6"] { background-color: #f0d0b4; }
[data-staff-color-index="7"] { background-color: #ecc6d6; }
[data-staff-color-index="8"] { background-color: #d4dfb6; }
[data-staff-color-index="9"] { background-color: #c4e6f3; }
[data-staff-color-index="10"] { background-color: #d0d4f0; }
[data-staff-color-index="11"] { background-color: #f1cbb8; }
[data-staff-color-index="12"] { background-color: #b7d9c4; }
[data-staff-color-index="13"] { background-color: #e8d59a; }
[data-staff-color-index="14"] { background-color: #c8d2e4; }
[data-staff-color-index="15"] { background-color: #e6c5cf; }
[data-staff-color-index="16"] { background-color: #ccd8c4; }
[data-staff-color-index="17"] { background-color: #f3d6c2; }
[data-staff-color-index="18"] { background-color: #d8ccec; }
[data-staff-color-index="19"] { background-color: #d7d4c2; }

.staff-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.1rem;
    list-style: none;
    padding: 0.85rem 0 0;
    margin: 0;
    color: var(--moss-deep);
    font-size: 0.85rem;
}

.staff-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.staff-legend__swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 2px;
}

.week-grid {
    display: grid;
    grid-template-columns: 4rem repeat(7, 1fr);
    gap: 1px;
    background: var(--line);
}

.admin-login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: min(24rem, 92vw); }

.check-field { display: flex; gap: 0.5rem; align-items: center; }
.danger-form { margin-top: 2rem; }

@media (max-width: 800px) {
    .admin-body { grid-template-columns: 1fr; }
    .calendar-cell { min-height: 4.5rem; }
}