/* aima — おしゃれな2Dポップ。クリーム × オレンジ主役 + ターコイズ差し色。
   コミック調のハード影（ぼかさないオフセット影）と太めの角丸カードで
   アニメ調イラストの世界観と地続きにする。スマホファースト。 */

:root {
  /* base */
  --cream: #faf3e8;
  --cream-deep: #f4e6cf;
  --paper: #fffdf8;
  --ink: #463a2c;
  --ink-soft: #9c8b73;

  /* 主役オレンジ */
  --accent: #f08c3c;
  --accent-deep: #d76f1c;
  --accent-soft: #ffe6c9;

  /* 差し色ターコイズ */
  --accent-2: #21b6ac;
  --accent-2-deep: #128b83;
  --accent-2-soft: #ccefec;

  /* pop アクセント（ハート/紙吹雪用） */
  --pop-pink: #f2718f;
  --pop-yellow: #ffce4d;

  --line: #ecd9b9;
  --outline: #463a2c;      /* コミック調の縁取り＆ハード影 */
  --danger: #e0615a;
  --danger-soft: #fbe1de;
  --ok: #2f9c72;

  --radius: 22px;
  --radius-sm: 14px;

  /* ハードなオフセット影（ぼかさない） */
  --hard: 4px 4px 0 var(--outline);
  --hard-sm: 3px 3px 0 var(--outline);
  --hard-accent: 4px 4px 0 var(--accent-deep);
  --hard-teal: 4px 4px 0 var(--accent-2-deep);

  --ease: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }

/* width/height属性の高さヒントを無効化（aspect-ratioを効かせる） */
img { max-width: 100%; height: auto; }

/* Webフォント未達でも崩れないよう、丸ゴシック系のローカルフォールバックを積む */
:root {
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ドット＋斜めストライプのさりげないパターン背景 */
body {
  background-color: var(--cream);
  background-image:
    radial-gradient(rgba(240, 140, 60, 0.10) 1.6px, transparent 1.7px),
    radial-gradient(rgba(33, 182, 172, 0.08) 1.6px, transparent 1.7px);
  background-position: 0 0, 11px 11px;
  background-size: 22px 22px, 22px 22px;
}

h1, h2, h3, .brand, .step-title, .cal-title, .btn, .chip, .event-card .title {
  font-family: var(--font-display);
  font-weight: 800;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  /* ホームインジケータのセーフエリアを確保 */
  padding: 20px 16px max(56px, calc(32px + env(safe-area-inset-bottom)));
}

/* ---- トップバー / ブランド ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.brand {
  position: relative;
  font-size: 26px;
  color: var(--accent);
  letter-spacing: 0.01em;
  line-height: 1;
  padding-left: 34px;
}
/* ブランドの前に細線SVGの吹き出しアイコンを CSS マスクで置く代わりに擬似丸ロゴ */
.brand::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 9px 9px 9px 3px;
  background: var(--accent);
  box-shadow: 2px 2px 0 var(--accent-deep);
}
.brand::after {
  content: "";
  position: absolute;
  left: 7px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
}
.brand small {
  display: block;
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.34em;
  margin-top: 3px;
  padding-left: 1px;
}

/* ---- ヒーロー ---- */
.hero {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 3px solid var(--outline);
  border-radius: var(--radius);
  display: block;
  margin: 2px 2px 22px;
  background-color: var(--cream-deep);
  box-shadow: var(--hard);
}
/* 統合予約ページはヒーローを少し控えめに */
body[data-page="booking"] .hero { aspect-ratio: 2 / 1; margin-bottom: 18px; }

/* ---- 案内キャラの吹き出し ---- */
.bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--outline);
  border-radius: 20px;
  padding: 14px 16px 14px 14px;
  font-size: 14px;
  margin: 0 2px 22px;
  line-height: 1.65;
  box-shadow: var(--hard-teal);
}
.bubble .guide {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  object-fit: contain;
  object-position: bottom center;
  margin: -22px -2px -18px 0;   /* キャラが枠から少しはみ出す */
  filter: drop-shadow(2px 3px 0 rgba(70, 58, 44, 0.12));
}
.bubble .bubble-text { flex: 1 1 auto; }
.bubble::after {
  content: "";
  position: absolute;
  left: 58px;
  bottom: -13px;
  width: 20px; height: 20px;
  background: var(--paper);
  border-right: 3px solid var(--outline);
  border-bottom: 3px solid var(--outline);
  border-radius: 0 0 6px 0;
  transform: rotate(45deg);
}

/* ---- カード（共通） ---- */
.card {
  background: var(--paper);
  border: 3px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: var(--hard);
  padding: 18px;
  margin: 0 2px 16px;
}

/* ---- メニューカード（ホーム一覧） ---- */
.event-card {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.event-card:hover {
  transform: translate(-2px, -2px) rotate(-.4deg);
  box-shadow: 7px 7px 0 var(--outline);
}
.event-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--outline);
}
.event-card .ico {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--accent-soft);
  border: 2.5px solid var(--outline);
  box-shadow: var(--hard-sm);
  display: grid;
  place-items: center;
  color: var(--accent-deep);
}
.event-card .meta { flex: 1 1 auto; min-width: 0; }
.event-card .title { font-size: 17px; }
.event-card .desc { font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.event-card .dur {
  display: inline-block;
  font-size: 11px;
  color: var(--accent-2-deep);
  font-weight: 800;
  margin-top: 7px;
  background: var(--accent-2-soft);
  border-radius: 999px;
  padding: 3px 10px;
}
.event-card .chev {
  flex: 0 0 auto;
  color: var(--accent);
  transition: transform .18s var(--ease);
}
.event-card:hover .chev { transform: translateX(3px); }

.icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }

/* ---- イベント見出し ---- */
.ev-head { margin: 6px 2px 4px; }
#ev-title {
  font-size: 23px;
  margin: 4px 0 2px;
  line-height: 1.3;
}
#ev-desc { margin: 0 2px 4px; }

/* ---- ステップインジケータ（数字連番・トラック付き） ---- */
.steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin: 16px 6px 20px;
}
.steps::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  top: 17px;
  height: 4px;
  background: var(--cream-deep);
  border-radius: 4px;
  z-index: 0;
}
.steps .dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--outline);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-size: 15px;
  transition: transform .25s var(--ease), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.steps .dot::before { content: attr(data-step); }
.steps .dot.on {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--hard-sm);
  transform: translateY(-1px) scale(1.06);
}
.steps { margin-bottom: 30px; }
.steps .dot-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.steps .dot.on .dot-label { color: var(--accent-deep); }

.step-title {
  font-size: 18px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.step-title .icon { color: var(--accent); }

/* ---- カレンダー ---- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-head button {
  border: 2.5px solid var(--outline);
  background: var(--accent-soft);
  color: var(--accent-deep);
  width: 44px; height: 44px;   /* タップ領域 44px（Appleガイドライン） */
  flex: 0 0 auto;
  border-radius: 13px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--hard-sm);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.cal-head button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--outline); }
.cal-head button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--outline); }
.cal-head button:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.cal-title { font-size: 17px; }

.cal-grid {
  display: grid;
  /* minmax(0,1fr) で「中身の最小幅」による7列のはみ出しを断つ */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-grid .wd {
  text-align: center;
  font-size: clamp(10px, 3.2vw, 12px);
  font-weight: 700;
  color: var(--ink-soft);
  padding: 2px 0 6px;
}
.cal-grid .wd.sun { color: var(--danger); }
.cal-grid .wd.sat { color: #5b8bd0; }

.cal-cell {
  aspect-ratio: 1 / 1;
  /* min-width は付けない（7列グリッドを押し広げて横スクロールの原因になる）。
     高さの最低 40px だけ担保し、幅はコンテナ側の余白設計で 40px 以上を確保する。 */
  min-height: 40px;
  min-width: 0;
  border-radius: 13px;
  border: 2.5px solid transparent;
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.cal-cell.empty { background: transparent; }

/* 過去日・受付範囲外：枠線なしの薄い数字 */
.cal-cell.out {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  opacity: .4;
}

/* ヒート濃淡（空き枠数の数字は出さない） */
.cal-cell.h0 {            /* 0枠 or 受付対象外：タップ不可 */
  background: var(--cream-deep);
  opacity: .5;
}
.cal-cell.h1,
.cal-cell.h2,
.cal-cell.h3 {
  border-color: var(--outline);
  box-shadow: var(--hard-sm);
  cursor: pointer;
}
.cal-cell.h1 { background: var(--paper); color: var(--ink); }        /* 1〜3枠 */
.cal-cell.h2 { background: var(--accent-soft); color: var(--ink); }  /* 4〜7枠 */
.cal-cell.h3 { background: var(--accent); color: #fff; }             /* 8枠以上 */

.cal-cell.h1:hover, .cal-cell.h2:hover, .cal-cell.h3:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--outline);
}
.cal-cell.h1:active, .cal-cell.h2:active, .cal-cell.h3:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--outline);
}
.cal-cell.h1:focus-visible, .cal-cell.h2:focus-visible, .cal-cell.h3:focus-visible {
  outline: none;
  box-shadow: var(--hard-teal);
}

/* 選択中：ターコイズの縁取りで濃淡と区別 */
.cal-cell.selected {
  border-color: var(--accent-2-deep);
  box-shadow: var(--hard-teal);
  transform: rotate(-2deg) scale(1.04);
}

/* スケルトン（読み込み中） */
.cal-cell.skel {
  background: var(--cream-deep);
  border-color: transparent;
  box-shadow: none;
  color: transparent;
  animation: skel-pulse 1.1s ease-in-out infinite;
}
@keyframes skel-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .85; }
}

/* ヒート凡例 */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 14px;
}
.legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.legend .sw {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: 2px solid var(--outline);
  flex: 0 0 auto;
}
.legend .sw.h3 { background: var(--accent); }
.legend .sw.h2 { background: var(--accent-soft); }
.legend .sw.h1 { background: var(--paper); }
.legend .sw.h0 { background: var(--cream-deep); opacity: .6; border-color: var(--ink-soft); }

/* ---- 長さトグル（セグメントコントロール） ---- */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 3px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
  box-shadow: var(--hard-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.seg-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  min-height: 46px;
  padding: 12px 8px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease;
}
.seg-btn:active { transform: translateY(1px); }
.seg-btn + .seg-btn { border-left: 3px solid var(--outline); }
.seg-btn.on { background: var(--accent); color: #fff; }
.seg-btn:not(.on):hover { background: var(--accent-soft); color: var(--accent-deep); }

/* ---- 時間チップ（チケット風） ---- */
/* 幅に応じて列数が自動で決まる。320pxでも折り返さずに収まる最小幅を指定。 */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.chip {
  border: 2.5px solid var(--outline);
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  min-height: 46px;
  min-width: 0;
  padding: 10px 6px;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;      /* 「10:00」が2行に折り返さない */
  text-align: center;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--hard-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s ease, color .14s ease;
}
.chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--outline); }
.chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
.chip.selected {
  background: var(--accent);
  color: #fff;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--outline);
}

/* ---- フォーム ---- */
label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
input, textarea {
  width: 100%;
  min-height: 48px;
  border: 2.5px solid var(--line);
  border-radius: 13px;
  padding: 12px 13px;
  /* 16px 未満だと iOS Safari がフォーカス時に自動ズームする。絶対に下げない。 */
  font-size: 16px;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s var(--ease);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--outline);
  box-shadow: var(--hard-accent);
}
textarea { min-height: 92px; resize: vertical; }

.summary {
  background: var(--accent-soft);
  border: 2.5px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 10px;
  color: #a4571e;
  line-height: 1.75;
  overflow-wrap: anywhere;
  box-shadow: var(--hard-sm);
}

/* ---- ボタン ---- */
.btn {
  width: 100%;
  min-height: 52px;
  border: 3px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--hard);
  margin-top: 16px;
  transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--outline); }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--outline); }
.btn:disabled { opacity: 0.55; cursor: default; box-shadow: var(--hard-sm); }
.btn.ghost { background: var(--paper); color: var(--accent-deep); }
.btn.danger { background: var(--danger); }

/* アンカーを .btn として使う場合（共有ページ） */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
}
a.btn, button.btn { overflow-wrap: anywhere; }
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn .icon { flex: 0 0 auto; }
.btn.line { background: #06c755; color: #fff; }
.btn.copied { background: var(--accent-2); color: #fff; }

/* ---- 共有ページ ---- */
.share-when {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 5.8vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.share-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 6px;
}
.share-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--accent-2-deep);
  margin: 20px 0 6px;
}
.share-url {
  background: var(--accent-2-soft);
  border: 2.5px solid var(--outline);
  border-radius: var(--radius-sm);
  box-shadow: var(--hard-sm);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-all;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.share-actions { display: block; }
.share-actions .btn { width: 100%; margin-top: 14px; }
.share-ics {
  margin: 16px 0 0;
}
.share-ics a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;          /* タップ領域 44px */
  padding: 8px 10px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.share-ics a:hover { color: var(--accent-deep); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 14px 6px 10px;
  margin-bottom: 12px;
  text-decoration: none;
  transition: transform .14s var(--ease), border-color .14s ease, color .14s ease;
}
.back:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateX(-2px); }

/* ---- メッセージ ---- */
.msg {
  font-size: 14px;
  padding: 11px 13px;
  border-radius: 13px;
  margin-top: 10px;
  line-height: 1.6;
  border: 2.5px solid var(--outline);
  font-weight: 700;
}
.msg.err { background: var(--danger-soft); color: var(--danger); }
.msg.ok  { background: var(--accent-2-soft); color: var(--accent-2-deep); }

/* ---- 完了画面 ---- */
.done { text-align: center; position: relative; overflow: hidden; }
.done img {
  width: 200px;
  max-width: 66%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 6px auto 4px;
  display: block;
  position: relative;
  z-index: 1;
  animation: pop-in .5s var(--ease) both;
}
.done h2 {
  font-size: 22px;
  margin: 6px 0 10px;
  position: relative;
  z-index: 1;
}
.meetbox {
  background: var(--accent-2-soft);
  border: 2.5px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 14px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 14px;
  box-shadow: var(--hard-sm);
  position: relative;
  z-index: 1;
}
.meetbox a { color: var(--accent-2-deep); font-weight: 800; }

/* CSS のみの紙吹雪 */
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.confetti i {
  position: absolute;
  top: -12px;
  width: 9px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall 2.4s linear infinite;
}
.done.hidden .confetti i { animation-play-state: paused; }
.confetti i:nth-child(1)  { left: 6%;  background: var(--accent);    animation-delay: 0s;    }
.confetti i:nth-child(2)  { left: 16%; background: var(--accent-2);  animation-delay: .5s;  transform: rotate(20deg); }
.confetti i:nth-child(3)  { left: 27%; background: var(--pop-pink);  animation-delay: 1.1s; }
.confetti i:nth-child(4)  { left: 38%; background: var(--pop-yellow);animation-delay: .3s;  transform: rotate(-14deg); }
.confetti i:nth-child(5)  { left: 49%; background: var(--accent-2);  animation-delay: 1.4s; }
.confetti i:nth-child(6)  { left: 60%; background: var(--accent);    animation-delay: .8s;  transform: rotate(30deg); }
.confetti i:nth-child(7)  { left: 71%; background: var(--pop-pink);  animation-delay: .1s;  }
.confetti i:nth-child(8)  { left: 82%; background: var(--pop-yellow);animation-delay: 1s;   transform: rotate(-24deg); }
.confetti i:nth-child(9)  { left: 90%; background: var(--accent-2);  animation-delay: 1.7s; }
.confetti i:nth-child(10) { left: 33%; background: var(--accent);    animation-delay: 2s;   }
.confetti i:nth-child(11) { left: 55%; background: var(--pop-pink);  animation-delay: 1.9s; transform: rotate(16deg); }
.confetti i:nth-child(12) { left: 76%; background: var(--pop-yellow);animation-delay: .6s;  }

@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0);      opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}
@keyframes pop-in {
  0%   { transform: scale(.4) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0);      opacity: 1; }
}

/* ---- ステップ切替のふわっと表示 ---- */
section.card:not(.hidden).step-anim { animation: card-in .3s ease both; }
@keyframes card-in {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.muted { color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.center { text-align: center; }
.loading { text-align: center; color: var(--ink-soft); padding: 26px; font-weight: 700; }
.hidden { display: none !important; }

.footer {
  text-align: center;
  margin-top: 28px;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.16em;
  font-weight: 700;
}

/* ---- 小型スマホ（iPhone SE = 320px 等）----
   7列カレンダーのセルを 40px 以上に保つため、外周の余白を削り
   カレンダーだけカードのパディング分を負マージンで食い込ませる。
   320px: (320 - 12(wrap) - 6(border) - 24(card padding) + 20(負マージン) - 18(gap*6)) / 7 = 40px  */
@media (max-width: 400px) {
  .wrap { padding: 16px 6px max(40px, calc(20px + env(safe-area-inset-bottom))); }

  .card { margin-left: 0; margin-right: 0; padding: 16px 12px; }
  .hero, .bubble { margin-left: 0; margin-right: 0; }

  /* ヒーローが縦を圧迫しないよう横長に */
  body[data-page="booking"] .hero { aspect-ratio: 5 / 2; margin-bottom: 14px; }

  .cal-grid { gap: 3px; margin-inline: -10px; }
  .cal-head { margin-bottom: 10px; }
  .cal-title { font-size: 16px; }

  .bubble { gap: 8px; padding: 12px 12px 12px 10px; font-size: 13px; }
  .bubble .guide { width: 58px; height: 58px; }
  .bubble::after { left: 46px; }

  .steps { margin-left: 2px; margin-right: 2px; }
  .steps .dot-label { font-size: 9.5px; }
  /* 両端のラベルは中央寄せだと画面外にはみ出すので端に寄せる */
  .steps .dot:first-child .dot-label { left: 0; transform: none; }
  .steps .dot:last-child .dot-label { left: auto; right: 0; transform: none; }

  .chips { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 7px; }

  .legend { gap: 6px 10px; }
  .step-title { font-size: 17px; }
}

/* ---- タブレット / PC：間延びしないよう軽く広げて2カラム ---- */
@media (min-width: 640px) {
  .wrap { max-width: 660px; padding: 32px 24px 64px; }
  #list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  #list .event-card { margin: 0; }
  #list .loading, #list .msg { grid-column: 1 / -1; }
  .hero { aspect-ratio: 16 / 7; }
  #ev-title { font-size: 26px; }
}

/* ---- モーション控えめ設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .confetti { display: none; }
}