:root { color-scheme: light; font-family: system-ui, sans-serif; color: #24342f; background: #f4f2ed; } body { margin: 0; } header { padding: 3rem max(1.25rem, calc((100vw - 920px)/2)); background: #264a42; color: white; } header h1 { margin: .25rem 0; } main { max-width: 920px; margin: 2rem auto; padding: 0 1.25rem; display: grid; gap: 1.25rem; grid-template-columns: 1.2fr .8fr; } .card { background:white; border-radius:16px; padding:1.5rem; box-shadow:0 5px 22px #17312712; } .eyebrow { color:#a76639; font-size:.78rem; font-weight:700; letter-spacing:.08em; margin:0; } header .eyebrow { color:#ffd8b7; } h2 { margin-top:.3rem; } .slots { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; margin:1rem 0; } button { border:0; background:#2d6b5d; color:white; padding:.75rem; border-radius:9px; font-weight:700; cursor:pointer; } button:disabled { background:#d6d8d4; color:#777; cursor:not-allowed; } form, .settings { display:grid; gap:.8rem; } label { display:grid; gap:.3rem; font-weight:700; } input, select { padding:.6rem; border:1px solid #bdc7c1; border-radius:7px; font:inherit; } .calendar { padding:.8rem; border-left:4px solid #d2915c; background:#fff6ed; font-size:.9rem; } .message { min-height:1.2em; color:#176549; font-weight:700; } @media (max-width:700px){ main { grid-template-columns:1fr; margin-top:1rem; } header { padding-top:2rem; } }
/* form{display:grid}がhidden属性を打ち消すため、hiddenを常に優先させる。 */
[hidden] { display:none !important; }
.customer > label { margin-top:1rem; } .demo-switch { padding:.7rem .8rem; border:1px dashed #b3bdb7; border-radius:9px; background:#faf9f6; font-size:.85rem; color:#5d6b65; } .menu-description { margin:.6rem 0 0; color:#5d6b65; font-size:.9rem; } .slot-note { grid-column:1/-1; margin:0; padding:.9rem; background:#f4f2ed; border-radius:9px; color:#5d6b65; font-size:.9rem; } #reservation-list { padding-left:1.1rem; } #reservation-list li { margin-bottom:.35rem; }
.hint { margin:.2rem 0 .7rem; color:#5d6b65; font-size:.85rem; } .menu-admin-list { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.5rem; } .menu-admin-list li { display:grid; gap:.45rem; padding:.7rem .8rem; background:#f7f6f2; border-radius:9px; } .menu-admin-list li.is-draft { background:#f0efec; color:#7a8480; } .menu-admin-list li.is-archived { background:#ece9e4; color:#8a8f8b; text-decoration-line:none; } .menu-admin-label { font-size:.9rem; font-weight:700; } .menu-admin-actions { display:flex; flex-wrap:wrap; gap:.4rem; } button.ghost { background:transparent; color:#2d6b5d; border:1px solid #b7c6bf; padding:.32rem .6rem; font-size:.78rem; } .menu-form-row, .settings-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
main.single { grid-template-columns:1fr; max-width:640px; }
.step-nav { display:flex; gap:.4rem; list-style:none; padding:0; margin:.6rem 0 0; font-size:.8rem; color:#8a8f8b; } .step-nav li { padding:.3rem .7rem; border-radius:99px; background:#f0efec; } .step-nav li.is-current { background:#2d6b5d; color:white; font-weight:700; }
.confirm-summary { display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; margin:1rem 0; } .confirm-summary dt { font-weight:700; color:#5d6b65; } .confirm-summary dd { margin:0; }
.reservation-admin-list { list-style:none; padding:0; margin:.6rem 0 1.2rem; display:grid; gap:.5rem; } .reservation-admin-list li { display:grid; gap:.45rem; padding:.7rem .8rem; background:#f7f6f2; border-radius:9px; font-size:.9rem; } .reservation-admin-list li.is-cancelled { background:#f0efec; color:#8a8f8b; } .reservation-admin-list select { padding:.35rem; font-size:.8rem; }
main.single.wide { max-width:1080px; }
.header-link { color:#ffd8b7; font-weight:700; text-decoration:none; margin-left:.6rem; } .header-link:hover { text-decoration:underline; }
.calendar-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; } .calendar-toolbar h2 { margin:.2rem 0 0; } .calendar-toolbar-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.status-legend { display:flex; gap:.5rem; margin:.8rem 0; flex-wrap:wrap; } .legend-item { font-size:.75rem; font-weight:700; padding:.25rem .6rem; border-radius:99px; }
.week-calendar { display:grid; grid-template-columns:52px repeat(7, 1fr); gap:0; overflow-x:auto; border:1px solid #e3e1db; border-radius:10px; }
.calendar-time-column, .calendar-day-column { min-width:0; } .calendar-day-column { border-left:1px solid #e3e1db; }
.calendar-day-header { height:2.4rem; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:#5d6b65; background:#f7f6f2; border-bottom:1px solid #e3e1db; }
.calendar-day-body { position:relative; background:white; }
.calendar-hour-line { position:absolute; left:0; right:0; border-top:1px solid #f0efec; }
.calendar-hour-label { position:absolute; right:.35rem; transform:translateY(-45%); font-size:.7rem; color:#8a8f8b; background:white; padding:0 .1rem; }
.calendar-reservation { position:absolute; left:3px; right:3px; border:0; border-radius:6px; padding:.2rem .35rem; text-align:left; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; gap:.05rem; font-family:inherit; }
.calendar-reservation-title { font-size:.72rem; font-weight:700; line-height:1.2; } .calendar-reservation-sub { font-size:.65rem; line-height:1.2; }
.status-tentative { background:#fff3e2; color:#8a5a2a; border-left:3px solid #d2915c; }
.status-confirmed { background:#e3f0eb; color:#1d5245; border-left:3px solid #2d6b5d; }
.status-completed { background:#e8e9f5; color:#3d4270; border-left:3px solid #5a62a8; }
.status-cancelled { background:#f0efec; color:#9a9f9b; border-left:3px solid #c5c8c3; text-decoration:line-through; }
button.calendar-reservation.status-tentative, button.calendar-reservation.status-confirmed, button.calendar-reservation.status-completed, button.calendar-reservation.status-cancelled { font-weight:400; } .menu-form-actions { display:flex; gap:.5rem; align-items:center; }
.availability-tools { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; } .availability-tools .hint { margin:0; }