/*
 * User（先生）画面
 * ご提案サンプル（artifact「プレスト レッスン管理アプリ」）のアプリ部分 .app を移植（ライトテーマのみ）
 * レイアウト: resources/views/layouts/user/app.blade.php
 * モバイルファースト：768px 未満はスマホ表示（ここまでの指定）。末尾の「レスポンシブ」で 768px / 1024px 以上を上書き
 */

:root {
  color-scheme: light;
  --body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --mark: 'Cormorant Garamond', Georgia, serif;
  --a-bg: #F4F5F7; --a-card: #FFFFFF; --a-ink: #1A2233; --a-ink2: #3D4555; --a-sub: #5F6778;
  --a-line: #E3E6EC; --a-line2: #D5D9E2; --a-pri: #23408E; --a-on: #FFFFFF; --a-pri-soft: #E8EDF8; --a-pri-tint: #F2F5FC;
  --a-ok-bg: #EAF4EE; --a-ok: #1E5B3B; --a-ok2: #1E7A4C; --a-warn-bg: #FDF3E7; --a-warn: #7A4410; --a-warn-line: #F3D3AE;
  --a-chip: #EEF0F4; --a-off: #ECEEF2; --a-dis: #C5CAD5; --a-dark: #1A2233; --a-dark-sub: #C9CFDB;
  --page: #E4E7ED;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--a-ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
}
button { font: inherit; }
a { color: var(--a-pri); }
:focus-visible { outline: 2px solid var(--a-pri); outline-offset: 2px; }
[v-cloak] { display: none !important; }

/* ---------- レイアウト（スマホは全幅、PCは中央 480px） ---------- */
.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--a-bg);
  color: var(--a-ink);
  font-size: 14px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 481px) {
  .app { box-shadow: 0 0 0 1px var(--a-line), 0 20px 50px -24px rgb(10 16 30 / .3); }
}
/* Vue のマウント先・フォームを .app の縦並びに参加させる */
.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---------- ヘッダー ---------- */
.ahdr {
  position: sticky; top: 0; z-index: 20;
  height: 56px; flex-shrink: 0;
  background: var(--a-card); border-bottom: 1px solid var(--a-line);
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
}
.ahdr h2 { margin: 0; font-size: 17px; font-weight: 700; white-space: nowrap; }
.ahdr h2.no-back { padding-left: 8px; }
.ahdr .r { margin-left: auto; padding-right: 8px; font-size: 13px; color: var(--a-sub); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahdr select.r { width: auto; max-width: 50%; height: 36px; padding: 0 8px; margin-right: 8px; font-size: 13px; }
.ibtn {
  width: 44px; height: 44px; border: 0; background: transparent; color: inherit;
  display: grid; place-items: center; cursor: pointer; border-radius: 10px; flex-shrink: 0; text-decoration: none;
}

/* ---------- 画面本体 ---------- */
.scr { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.scr.flush { padding: 0; gap: 0; }
.pad { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sec { display: flex; flex-direction: column; gap: 8px; }
.st { font-size: 13px; font-weight: 700; color: var(--a-ink2); display: flex; justify-content: space-between; align-items: baseline; }
.st small { font-weight: 400; font-size: 11px; color: var(--a-sub); }
label.st { display: block; }
.sh { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
.sh h3 { margin: 0; font-size: 16px; }
.sh span { font-size: 12px; color: var(--a-sub); }
.card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 12px; }
.empty { padding: 16px; text-align: center; color: var(--a-sub); font-size: 13px; border-style: dashed; }

/* ---------- ボタン ---------- */
.btn {
  height: 52px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none;
}
.btn-pri { background: var(--a-pri); color: var(--a-on); }
.btn-sec { background: var(--a-card); border: 1px solid var(--a-line2); color: var(--a-ink); font-size: 14px; font-weight: 500; }
.btn-out { background: var(--a-card); border: 1.5px solid var(--a-pri); color: var(--a-pri); font-size: 14px; height: 44px; border-radius: 10px; }
.btn-soft { background: var(--a-chip); color: var(--a-ink); font-size: 14px; font-weight: 500; height: 44px; border-radius: 10px; }
.btn-sm { height: 38px; font-size: 13px; border-radius: 10px; }
.btn:disabled { background: var(--a-dis); color: var(--a-ink2); cursor: not-allowed; border-color: var(--a-dis); }
.link { border: 0; background: none; padding: 2px 0; color: var(--a-pri); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }

/* ---------- チップ（日付・時間・設備フィルタ・種類） ---------- */
.chip {
  border: 1px solid var(--a-line2); background: var(--a-card); color: var(--a-ink); border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.chip[aria-pressed="true"] { background: var(--a-pri); border-color: var(--a-pri); color: var(--a-on); }
.chip:disabled { background: var(--a-off); border-color: var(--a-off); color: var(--a-sub); cursor: not-allowed; }
.chip .s { font-size: 11px; color: var(--a-ok2); }
.chip[aria-pressed="true"] .s { color: var(--a-pri-soft); }
.chip:disabled .s { color: var(--a-sub); }
.pill { height: 36px; padding: 0 14px; border-radius: 18px; flex-shrink: 0; font-size: 13px; font-weight: 500; }
.day { width: 52px; height: 64px; flex-shrink: 0; border-radius: 12px; }
.day b { font-size: 18px; }
.day small { font-size: 11px; }
.hs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.hs::-webkit-scrollbar { display: none; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tm { height: 54px; }
.tm b { font-size: 15px; }
.kind { height: 58px; }
.kind b { font-size: 14px; }
.kind span { font-size: 11px; }

/* ---------- ラジオカード（ブース・生徒） ---------- */
.opt {
  width: 100%; min-height: 62px; border: 2px solid var(--a-line); background: var(--a-card); border-radius: 12px;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--a-ink);
}
.opt[aria-pressed="true"], .opt.is-on, .opt:has(input:checked) { border-color: var(--a-pri); background: var(--a-pri-tint); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #A3AABA; display: grid; place-items: center; flex-shrink: 0; }
.opt[aria-pressed="true"] .radio, .opt.is-on .radio, .opt:has(input:checked) .radio { border-color: var(--a-pri); }
.opt[aria-pressed="true"] .radio::after, .opt.is-on .radio::after, .opt:has(input:checked) .radio::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--a-pri);
}
.opt .tick { color: var(--a-pri); display: grid; place-items: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.grow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t1 { font-size: 15px; font-weight: 700; }
.t2 { font-size: 12px; color: var(--a-sub); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 12px; font-weight: 500; color: var(--a-ink2); background: var(--a-chip); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.av { width: 36px; height: 36px; border-radius: 50%; background: var(--a-pri-soft); color: var(--a-pri); font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }

/* ---------- バッジ・注記 ---------- */
.badge { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.badge.sm { font-size: 11px; }
.b-ok { background: var(--a-ok-bg); color: var(--a-ok); }
.b-warn { background: var(--a-warn-bg); color: var(--a-warn); }
.b-pri { background: var(--a-pri-soft); color: var(--a-pri); }
.b-mute { background: var(--a-chip); color: var(--a-ink2); }
.note { border-radius: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.7; display: flex; gap: 8px; }
.note.ok { background: var(--a-ok-bg); color: var(--a-ok); }
.note.warn { background: var(--a-warn-bg); color: var(--a-warn); font-size: 13px; }
.note.pri { background: var(--a-pri-soft); color: #1A2F6B; font-size: 13px; font-weight: 500; align-items: center; }
.note svg { flex-shrink: 0; }
.note ul { margin: 0; padding: 0; list-style: none; }
.desc { margin: 0; font-size: 12px; line-height: 1.6; color: var(--a-ink2); }
.kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); row-gap: 10px; padding: 16px; font-size: 14px; }
.kv span:nth-child(odd) { color: var(--a-sub); }
.kv span:nth-child(even) { font-weight: 700; overflow-wrap: anywhere; }

/* ---------- 下部バー・タブ ---------- */
.bar {
  position: sticky; bottom: 0; z-index: 20;
  flex-shrink: 0; background: var(--a-card); border-top: 1px solid var(--a-line);
  padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px;
}
.bar .sum { font-size: 13px; color: var(--a-ink2); }
.tabs {
  position: sticky; bottom: 0; z-index: 20;
  height: 68px; flex-shrink: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--a-card); border-top: 1px solid var(--a-line);
}
.tabs a, .tabs button {
  border: 0; background: transparent; color: var(--a-sub); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; font-size: 11px; cursor: pointer; text-decoration: none;
}
.tabs [aria-current="page"] { color: var(--a-pri); font-weight: 700; }

/* ---------- フォーム ---------- */
textarea, select { font: inherit; font-size: 14px; border-radius: 10px; border: 1px solid var(--a-line2); background: var(--a-card); color: var(--a-ink); padding: 10px 12px; width: 100%; }
textarea { resize: none; }
select { height: 48px; font-size: 15px; }
textarea.is-invalid, select.is-invalid { border-color: var(--a-warn); }
.invalid-feedback { display: block; font-size: 12px; color: var(--a-warn); }
.invalid-feedback strong { font-weight: 500; }

/* ---------- ホーム ---------- */
.hero { background: var(--a-dark); color: var(--a-on); padding: 20px 20px 34px; display: flex; flex-direction: column; gap: 14px; }
.hero .top { display: flex; align-items: center; justify-content: space-between; }
.wm { font-family: var(--mark); font-style: italic; font-weight: 600; font-size: 26px; }
.wm-s { font-size: 11px; color: var(--a-dark-sub); margin-left: 8px; }
.hello { display: flex; flex-direction: column; gap: 2px; }
.hello span { font-size: 13px; color: var(--a-dark-sub); }
.hello strong { font-size: 22px; }
.cta { padding: 0 16px; margin-top: -18px; display: flex; flex-direction: column; gap: 10px; }
.cta .btn-pri { height: 62px; font-size: 17px; box-shadow: 0 6px 16px rgb(35 64 142 / .25); }
.row { display: flex; align-items: center; gap: 12px; }
.bk { padding: 14px 16px; }
.bk .d { width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 14px; border-right: 1px solid var(--a-line); flex-shrink: 0; }
.bk .d small { font-size: 11px; color: var(--a-sub); }
.bk .d b { font-size: 18px; }
.bk .who { font-size: 13px; color: var(--a-ink2); }
.bk .exp { font-size: 12px; color: var(--a-warn); font-weight: 500; }
.bk-act { display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px 14px; }
.bk-act form { margin: 0; flex: 1; }
.bk-act.single form { flex: 0 0 auto; }
.bk-act.single .btn { width: auto; padding: 0 18px; }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.lesson { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

/* ヒーロー右上のメニュー（ログアウト等） */
.menu { position: relative; }
.menu > summary { list-style: none; color: var(--a-on); }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: 48px; z-index: 30; min-width: 180px;
  background: var(--a-card); color: var(--a-ink); border: 1px solid var(--a-line); border-radius: 12px;
  box-shadow: 0 12px 28px -12px rgb(10 16 30 / .35); padding: 6px; display: flex; flex-direction: column;
}
.menu-pop form { margin: 0; }
.menu-pop a, .menu-pop button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent;
  color: var(--a-ink); font-size: 14px; border-radius: 8px; text-decoration: none; cursor: pointer;
}
.menu-pop a:hover, .menu-pop button:hover { background: var(--a-chip); }
.menu-pop .menu-name { padding: 8px 12px 6px; font-size: 12px; color: var(--a-sub); border-bottom: 1px solid var(--a-line); margin-bottom: 4px; }

/* ---------- 完了 ---------- */
.done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 24px; text-align: center; }
.done .ok { width: 76px; height: 76px; border-radius: 50%; background: var(--a-ok-bg); color: var(--a-ok2); display: grid; place-items: center; }
.done h2 { margin: 0; font-size: 21px; }
.done p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--a-ink2); white-space: pre-line; }
.done .card { width: 100%; text-align: left; }
.done .actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.done .actions .btn-sec { height: 48px; }

/* ---------- 読み込み中 ---------- */
.loading { padding: 16px; text-align: center; color: var(--a-sub); font-size: 13px; }

/* ---------- フラッシュメッセージ（トースト） ---------- */
.toasts {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 50;
  width: calc(100% - 32px); max-width: 448px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; background: var(--a-dark); color: var(--a-on); font-size: 13px; line-height: 1.6;
  padding: 10px 16px; border-radius: 999px; max-width: 100%; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 10px 24px -10px rgb(10 16 30 / .45); transition: opacity .3s;
}
.toast.is-warn { background: var(--a-warn-bg); color: var(--a-warn); border: 1px solid var(--a-warn-line); border-radius: 12px; }
.toast button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 16px; line-height: 1; }
.toast.is-hidden { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .scr, .done { animation: fade .18s ease-out; }
}
@keyframes fade { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- PC 用の段組みの入れ物（スマホは display: contents で従来どおり1列に並ぶ） ---------- */
.lanes, .lane, .pick, .pick-l, .pick-r, .opts { display: contents; }
@media (max-width: 1023.98px) {
  .only-wide { display: none !important; }
}

/* ---------- 入力フォーム（components/form の出力を .fm の中だけで整える） ---------- */
.fm { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.fm-set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fm .form-label { font-size: 13px; font-weight: 700; color: var(--a-ink2); }
.fm .form-control {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px;
  border: 1px solid var(--a-line2); border-radius: 10px; background: var(--a-card); color: var(--a-ink);
  font: inherit; font-size: 16px; line-height: 1.4; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.fm .form-control::placeholder { color: #8A91A0; }
.fm .form-control:focus { outline: none; border-color: var(--a-pri); box-shadow: 0 0 0 3px rgb(35 64 142 / .18); }
.fm .form-control.is-invalid { border-color: var(--a-warn); }
.fm .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgb(122 68 16 / .16); }
.fm .form-control:disabled { background: var(--a-off); color: var(--a-sub); cursor: not-allowed; }
.fm .form-check { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.fm .form-check-input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--a-pri); cursor: pointer; }
.fm .form-check-label { font-size: 14px; color: var(--a-ink2); cursor: pointer; }
.fm .btn { margin-top: 4px; }
/* パスワード：入力欄の右端に表示切替ボタン（user_app_password_toggle） */
.pw { position: relative; }
.pw .form-control { padding-right: 52px; }
.pw-toggle {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; border-radius: 8px;
  background: transparent; color: var(--a-sub); display: grid; place-items: center; cursor: pointer;
}
.pw-toggle:hover { color: var(--a-ink); }
.pw-toggle:disabled { opacity: .5; cursor: not-allowed; }
.pw-toggle span { display: grid; }
.pw-toggle .i-hide, .pw-toggle[aria-pressed="true"] .i-show { display: none; }
.pw-toggle[aria-pressed="true"] .i-hide { display: grid; }

/* フォームのカード（プロフィール設定） */
.form-card { padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.form-card-h { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.form-card-h svg { color: var(--a-pri); }
.note strong { display: block; margin-bottom: 2px; }

/* ---------- ログイン・パスワードリセット（未ログイン。PC でも中央のカード） ---------- */
.app.is-guest { max-width: none; box-shadow: none; }
.auth-hero {
  background: var(--a-dark); color: var(--a-on); padding: 48px 20px 88px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.auth-hero .wm { font-size: 42px; line-height: 1.1; }
.auth-hero .wm-s { margin: 0; font-size: 12px; letter-spacing: .14em; }
.auth { flex: 1; width: 100%; max-width: 452px; margin: -56px auto 0; padding: 0 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.auth-card { padding: 28px 20px 20px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 14px 32px -18px rgb(10 16 30 / .35); }
.auth-card h1 { margin: 0; font-size: 20px; text-align: center; }
.auth-card .desc { text-align: center; text-wrap: balance; }
.auth-links { display: flex; justify-content: center; gap: 16px; }
.auth-links .link { font-size: 13px; padding: 6px 0; }
/* 講師番号（数値入力）の増減ボタンは表示しない */
.auth-card input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.auth-card input[type="number"]::-webkit-inner-spin-button,
.auth-card input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.auth-dev { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-style: dashed; background: transparent; }
.auth-dev h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--a-sub); letter-spacing: .08em; }
.fm.dev-id { flex-direction: row; gap: 8px; }
.fm.dev-id .form-control { height: 38px; flex: 1; min-width: 0; font-size: 14px; }
.fm.dev-id .btn { width: auto; flex-shrink: 0; margin: 0; padding: 0 14px; }
.dev-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--a-card); }
.dev-table caption { text-align: left; font-size: 12px; font-weight: 700; color: var(--a-sub); padding-bottom: 6px; }
.dev-table th, .dev-table td { padding: 6px 10px; border: 1px solid var(--a-line); text-align: left; }
.dev-table th { background: var(--a-chip); font-weight: 500; color: var(--a-ink2); }
.toasts.is-guest { bottom: 24px; }

/* ---------- PC の左サイドメニュー（user_left_side_menu。1024px 未満は非表示） ---------- */
.snav { display: none; }
.snav-brand { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; color: var(--a-ink); text-decoration: none; }
.snav-brand .wm { font-size: 30px; line-height: 1.1; }
.snav-brand .wm-s { margin: 0; color: var(--a-sub); }
.snav-list { display: flex; flex-direction: column; gap: 4px; }
.snav-item {
  width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
  display: flex; align-items: center; gap: 12px; color: var(--a-ink2); font-size: 14px; font-weight: 500;
  text-decoration: none; text-align: left; cursor: pointer;
}
.snav-item:hover { background: var(--a-chip); color: var(--a-ink); }
.snav-item[aria-current="page"] { background: var(--a-pri-soft); color: var(--a-pri); font-weight: 700; }
.snav-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--a-line); display: flex; flex-direction: column; gap: 4px; }
.snav-foot form { margin: 0; }
.snav-user { display: flex; align-items: center; gap: 10px; padding: 4px 12px 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.snav-user .av { width: 32px; height: 32px; }
.snav-user .av svg { width: 18px; height: 18px; }

/* ---------- レスポンシブ：タブレット（768px 以上） ---------- */
@media (min-width: 768px) {
  .app { max-width: 720px; }
  /* 日付・設備フィルタは横スクロールをやめて折り返す（日数が多いときは縦スクロール） */
  .hs { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
  .hs.days { max-height: 216px; overflow-y: auto; }
  .g4.times { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* ブース・生徒のラジオカードは2列 */
  .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .opts > .empty { grid-column: 1 / -1; }
  .done { width: 100%; max-width: 480px; margin: 0 auto; }
}

/* ---------- レスポンシブ：PC（1024px 以上）左サイドメニュー + メイン ---------- */
@media (min-width: 1024px) {
  .shell { display: flex; min-height: 100vh; min-height: 100dvh; }
  .snav {
    position: sticky; top: 0; z-index: 30; flex-shrink: 0;
    width: 240px; height: 100vh; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px; padding: 20px 12px 16px;
    background: var(--a-card); border-right: 1px solid var(--a-line);
  }
  /* メインは右側いっぱい。本文は最大 1040px（narrow は 640px）を中央に置く余白 --gut を各ブロックの左右に付ける */
  .app {
    --content: 1040px;
    --gut: max(32px, calc((100% - var(--content)) / 2));
    flex: 1; max-width: none; margin: 0; box-shadow: none;
  }
  .app.is-narrow { --content: 640px; }
  .ahdr { padding: 0 calc(var(--gut) - 12px); }
  .scr { padding: 24px var(--gut) 32px; gap: 20px; }
  .scr.flush { padding: 0; gap: 0; }
  .bar { flex-direction: row; align-items: center; gap: 16px; padding: 14px var(--gut); }
  .bar .sum { flex: 1; min-width: 0; font-size: 14px; }
  .bar .btn { width: 320px; flex-shrink: 0; }
  .app.is-narrow .bar .btn { width: 100%; flex-shrink: 1; }
  .tabs { display: none; }
  .toasts { left: calc(50% + 120px); }
  .toasts.is-guest { left: 50%; }

  /* ホーム：ヒーローを低く、今日 / 予約済みを2カラム */
  .hero { padding: 28px var(--gut) 44px; }
  .hero .top { display: none; }
  .hello strong { font-size: 24px; }
  .cta { padding: 0 var(--gut); flex-direction: row; }
  .cta .btn-pri { width: 340px; }
  .pad { padding: 16px var(--gut) 40px; }
  .lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .lane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

  /* ブース予約：左に日付・時間（日付7個 = 1週間が1行に入る幅）、右にブース */
  .pick { display: grid; grid-template-columns: minmax(412px, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
  .pick-l, .pick-r { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .pick-r { container-type: inline-size; }
  .pick-r .opt { padding: 10px 12px; gap: 10px; }
  .pick-r .opt .t1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* 右カラムが狭いとき（1024px 付近）はブースを1列 */
@container (max-width: 479.98px) {
  .pick-r .opts { grid-template-columns: minmax(0, 1fr); }
}