/* 来場者ページ 2026-09-28
   配色・書体はここの変数を変えるだけで全体に反映される（デザイン調整はPhase 5） */
:root {
  --bg: #F4F2EE;
  --card: #FFFFFF;
  --ink: #2E2A33;
  --ink-soft: #6B6572;
  --line: #DCD6CF;
  --plum: #5A3D6B;
  --plum-deep: #3E2A4B;
  --plum-tint: #EDE6F1;
  --gold: #B89A5C;
  --gold-tint: #F6EFDD;
  --danger: #9B3B3B;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
}
.app { max-width: 480px; margin: 0 auto; padding: 24px 20px 48px; }
.screen { animation: fade .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); font-size: 14px; }

/* 見出し */
.hero { text-align: center; margin-bottom: 20px; }
.hero-eyebrow { margin: 0 0 4px; color: var(--gold); font-family: var(--font-serif); font-size: 15px; letter-spacing: .3em; }
.title { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.4; color: var(--plum-deep); text-align: center; }
.lead { margin: 0 0 16px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.greeting { margin: 4px 0 16px; text-align: center; font-family: var(--font-serif); font-size: 20px; color: var(--plum-deep); }

/* 側の切り替え・五十音 */
.side-tabs { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); margin-bottom: 12px; }
.side-tab { flex: 1; border: 0; background: transparent; padding: 10px 0; font: inherit; font-size: 15px; color: var(--ink-soft); }
.side-tab.is-active { background: var(--plum); color: #fff; }
.search { display: block; margin-bottom: 10px; }
.search input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 17px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink); -webkit-appearance: none;
}
.search input:focus { outline: 2px solid var(--plum); outline-offset: 1px; }
.row-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.row-tab {
  min-width: 40px; padding: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  font: inherit; font-size: 15px; color: var(--ink);
}
.row-tab.is-active { background: var(--plum-tint); border-color: var(--plum); color: var(--plum-deep); font-weight: 600; }
.notice { background: var(--gold-tint); border-left: 3px solid var(--gold); padding: 10px 12px; border-radius: 6px; font-size: 14px; }

/* 名前一覧：ここが来場者の主な操作なので大きく */
.guest-list { list-style: none; margin: 0; padding: 0; }
.guest-list li { margin-bottom: 8px; }
.guest-btn {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  font: inherit; text-align: left; color: var(--ink);
}
.guest-btn:active { background: var(--plum-tint); }
.guest-name { font-family: var(--font-serif); font-size: 19px; }
.guest-kana { color: var(--ink-soft); font-size: 13px; }
.guest-side { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }

/* 確認 */
.check-list { list-style: none; margin: 0 0 8px; padding: 0; }
.check-list label {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 18px; font-family: var(--font-serif);
}
.check-list input { width: 22px; height: 22px; accent-color: var(--plum); }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.btn {
  padding: 14px 18px; border-radius: 12px; font: inherit; font-size: 17px; border: 1px solid transparent; width: 100%;
}
.btn-primary { background: var(--plum); color: #fff; }
.btn-primary:disabled { opacity: .5; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }

/* 受付待ち */
#screen-wait { text-align: center; padding-top: 24px; }
.wait-mark {
  width: 64px; height: 64px; margin: 8px auto 20px; border-radius: 50%;
  border: 3px solid var(--plum-tint); border-top-color: var(--plum); animation: spin 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .wait-mark { animation: none; border-top-color: var(--plum-tint); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 席次表・お品書き */
.banner { background: var(--gold-tint); border: 1px solid var(--gold); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; line-height: 1.6; }
.main-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.main-tab { flex: 1; border: 0; background: transparent; padding: 10px 0; font: var(--font-serif); font-family: var(--font-serif); font-size: 17px; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.main-tab.is-active { color: var(--plum-deep); border-bottom-color: var(--plum); font-weight: 600; }
.seat-grid { display: flex; flex-direction: column; gap: 12px; }
.seat-head { margin: 0 auto 4px; padding: 6px 28px; border: 1px solid var(--gold); border-radius: 999px; font-family: var(--font-serif); color: var(--gold); font-size: 14px; letter-spacing: .3em; }
.seat-row { display: grid; gap: 10px; }
.seat-title { display: block; font-size: 10px; color: var(--ink-soft); line-height: 1.2; }
.seat-name { display: block; font-size: 14px; line-height: 1.35; }
.seat-table { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 8px; min-width: 0; }
.seat-table.is-mine { border: 2px solid var(--gold); background: var(--gold-tint); box-shadow: 0 0 0 4px rgba(184,154,92,.15); }
.seat-table-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.seat-table-label { font-family: var(--font-serif); font-size: 20px; color: var(--plum-deep); }
.seat-table-note { font-size: 12px; color: var(--ink-soft); }
.seat-mine-tag { font-size: 12px; color: var(--gold); font-weight: 600; }
.seat-names { margin: 0; padding: 0; list-style: none; }
.seat-names li { margin-bottom: 6px; }
.seat-names li.is-me { font-weight: 700; color: var(--plum-deep); }
.menu-title { text-align: center; font-family: var(--font-serif); font-size: 22px; color: var(--plum-deep); margin: 4px 0 16px; }
.menu-section { margin-bottom: 18px; text-align: center; }
.menu-heading { font-family: var(--font-serif); font-size: 14px; color: var(--gold); letter-spacing: .2em; margin: 0 0 4px; }
.menu-items { margin: 0; padding: 0; list-style: none; font-family: var(--font-serif); font-size: 17px; }
.menu-footer { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: 20px; }
.menu-image { width: 100%; max-width: 100%; height: auto; border-radius: 10px; display: block; margin-bottom: 12px; }