/* ── ベーススタイル / 共通コンポーネント ───────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
button, [role="tab"], .btn { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.theater { background: var(--paper); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: 0.01em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--crimson); color: #fff; }

/* 紙の微かなテクスチャ（グレイン） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(120, 100, 70, 0.05) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ── グローバルヘッダー ─────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 17, 13, 0.96);
  color: #f6efe2;
  border-bottom: 3px solid var(--crimson);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; }
.brand__mark { width: 38px; height: 38px; border-radius: 9px; }
.brand__name { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.04em; }
.brand__name small { font-size: 0.62em; color: #d9b7b0; font-family: var(--font-sans); display: block; letter-spacing: 0.18em; margin-top: -2px; }
.site-nav { display: flex; gap: 2px; margin-left: auto; }
.site-nav a {
  text-decoration: none;
  color: #e7ddcc;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--text-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.1); }
.site-nav a.is-active { background: var(--crimson); color: #fff; }
.site-clock {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #f6efe2;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.site-clock b { color: var(--gold); }

/* ── ボタン ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--text-sm);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.btn--primary:hover { background: var(--crimson-deep); }
.btn--ghost { background: transparent; }
.btn--sm { padding: 6px 12px; font-size: var(--text-xs); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── バッジ・チップ ───────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
}
.tag-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--crimson);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}
.tag-live::before {
  content: "";
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── モーダル ─────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 14, 8, 0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 560px; width: 100%;
  max-height: 88vh; max-height: 88dvh; overflow: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur) var(--ease);
  border: 1px solid var(--line);
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); }

/* ── ユーティリティ ───────────────────────────────────── */
.container { max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-5); position: relative; z-index: 1; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--crimson); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--paper-2) 25%, var(--surface-2) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toast-host { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: var(--text-sm); font-weight: 700; box-shadow: var(--shadow); animation: toastin var(--dur) var(--ease); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

/* ── 文字サイズ切替（シニア配慮・全ページ共通） ─────────── */
html.font-large { font-size: 118%; }
html.font-large body { line-height: 1.8; }
.font-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(246, 239, 226, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #f6efe2;
  padding: 6px 12px;
  min-height: 34px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.font-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.font-toggle[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #241c10; }

/* ── モバイルヘッダー調整 ─────────────────────────────────── */
@media (max-width: 640px) {
  .site-header__inner { gap: var(--sp-2); padding: 8px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .brand__name { font-size: 1.05rem; }
  .brand__name small { display: none; }
  .brand__mark { width: 32px; height: 32px; }
  .site-nav { gap: 0; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 9px 10px; font-size: var(--text-xs); white-space: nowrap; }
  .site-clock { display: none; }

  /* iOSのフォーカス時自動ズームを防ぐ（16px未満の入力が対象） */
  input, select, textarea { font-size: max(16px, 1em); }

  /* モーダルはボトムシート化（片手操作・可読性） */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none; max-height: 92vh; max-height: 92dvh;
    border-radius: 16px 16px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-backdrop.is-open .modal { transform: none; }
}