/* デザインの基準: アイビ祭の公式ポスター */
:root {
  --paper: #fdf8ec;      /* クリーム色の画用紙 */
  --paper-2: #fbefd2;    /* 黄色い色鉛筆のぬり */
  --surface: #fffdf7;
  --ink: #2a2622;        /* 鉛筆の黒 */
  --muted: #7b6b5a;
  --line: #ead8b8;
  --maple: #e2572b;      /* 紅葉の朱 */
  --orange: #f0902c;
  --yellow: #f6c740;
  --berry: #c8323a;      /* 赤い実 */
  --sky: #3f7cc4;        /* 風船の青 */
  /* 角丸: 手描き風に角ごとに少しずつ違う丸みにする（丸すぎないよう控えめ） */
  --r-lg: 12px 5px 10px 6px / 6px 10px 5px 12px;  /* 大きな枠: マップ全体・ごあいさつ・詳細画面・トップのボタン */
  --r-md: 9px 4px 8px 5px / 5px 8px 4px 9px;      /* カード・タブ・開催日の帯・ジャンルのボタン */
  --r-sm: 5px 3px 6px 2px / 3px 6px 2px 5px;      /* 教室の枠・階の札・小さなラベル */
}

/* ---------- 手描きの枠（初期値） ----------
   枠・ボタン・カードは、線と塗りを ::before に描き、大きな枠は ::after で少しずらした2本目の線を重ねる。
   各部品では background / border / box-shadow の代わりに次の変数を指定する:
   --bg 塗り / --b 線の太さ / --bc 線の色 / --bt, --btc 上の線（アクセント） / --bl, --blc 左の線 / --sh 影 */
:where(.hero-date, .tab, .top-btn, .greeting, .gr-role, .tab-home, .fm-wrap, .fm-floor, .fm-room, .genre-chip, .genre-badge, .shop-card, .sc-floor, .room-detail, .rd-note, .stage-card) {
  --b: 0px; --bt: var(--b); --bl: var(--b);
  --bc: var(--ink); --btc: var(--bc); --blc: var(--bc);
  --bg: transparent; --sh: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* スマホの横向きで文字が勝手に拡大されないように */

body {
  margin: 0;
  /* フォントはヒラギノ角ゴで統一（英数字もヒラギノ角ゴ）。
     ヒラギノ角ゴが入っていない端末（Android・Windows）は、近いゴシック体で表示する */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", Meiryo, sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background-color: var(--paper);
  /* 色鉛筆の斜めタッチ */
  background-image: repeating-linear-gradient(
    -35deg, rgba(246, 199, 64, .07) 0 2px, transparent 2px 7px);
}

/* 手描きアイコン（index.html の <symbol id="i-…">） */
.ico {
  display: inline-block;
  width: 1.3em; height: 1.3em;
  vertical-align: -.3em;
  flex-shrink: 0;
  overflow: visible;
}
.rd-place .ico { margin-right: 2px; vertical-align: -.25em; }
.top-btn .ico { vertical-align: -.25em; }

/* 開催日の帯（トップページ） */
.hero-date {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 6px 0 0;
  padding: 8px 22px 10px;
  font-size: .95rem; font-weight: 700;
  color: #fff;
  --bg: var(--maple);
  border-radius: var(--r-md);
}
/* 日付と時間を1行に（時間は数字の幅をそろえる） */
.hd-day { display: flex; align-items: baseline; gap: 12px; }
.hd-day span { font-variant-numeric: tabular-nums; }

/* オレンジの点線 */
.dots {
  height: 8px; width: min(70%, 260px);
  margin: 14px auto;
  background: radial-gradient(circle, var(--orange) 2.2px, transparent 2.6px) 0 50% / 16px 8px repeat-x;
}

/* ---------- タブ ---------- */
.tabs {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 10px; justify-content: center;
  padding: 12px 16px;
  background: rgba(253, 248, 236, .92);
  -webkit-backdrop-filter: blur(8px);  /* iPhone の Safari 用 */
  backdrop-filter: blur(8px);
  border-bottom: 2px dashed var(--line);
}
.tab {
  flex: 1; max-width: 220px;
  font: inherit; font-weight: 700;
  padding: 10px 12px;
  --b: 2px; --bc: var(--ink);
  border-radius: var(--r-md);
  --bg: var(--surface); color: var(--ink);
  --sh: 2px 3px 0 var(--line);
  cursor: pointer;
}
.tab { white-space: nowrap; }
.tab:hover { --bg: var(--paper-2); }
.tab.active { --bg: var(--maple); color: #fff; }

/* ポスターのトップページ */
body.is-top .guide { display: none; }
body:not(.is-top) .top-page { display: none; }
.top-page { max-width: 460px; margin: 0 auto; padding: 32px 16px 8px; text-align: center; overflow-x: clip; }
.poster {
  position: relative;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 4px 6px 0 var(--line);
}
.poster img { display: block; width: 100%; height: auto; }
/* 角のマスキングテープ */
.tape {
  position: absolute; top: -8px; z-index: 1;
  width: 78px; height: 22px;
  background: rgba(246, 199, 64, .6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.tape-l { left: -10px; transform: rotate(-32deg); }
.tape-r { right: -10px; transform: rotate(32deg); background: rgba(240, 144, 44, .5); }
.hd-year { margin: 24px 0 0; font-size: .95rem; font-weight: 700; letter-spacing: .1em; }
.top-page .hero-date { margin-top: 4px; font-size: 1rem; }
.top-menu { display: grid; gap: 12px; }
.top-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 16px;
  font-size: 1.15rem; font-weight: 700; line-height: 1.5;
  color: var(--ink); text-decoration: none;
  --bg: var(--surface);
  --b: 2px; --bc: var(--ink);
  border-radius: var(--r-lg);
  --sh: 3px 4px 0 var(--line);
  transition: transform .15s;
}
.top-btn small { font-size: .8rem; font-weight: 400; }
.top-btn:hover { transform: translateY(-2px); }
.top-btn:active { transform: translateY(0); }
/* 禁煙のお知らせ（トップページ）。控えめな1行 */
.no-smoking {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 auto 14px;
  font-size: .8rem;
  color: var(--muted);
}
.no-smoking .ico { width: 1.3rem; height: 1.3rem; vertical-align: 0; }

/* メインステージのスケジュール（トップページ） */
.stage-top { margin-top: 36px; }
.stage-card {
  padding: 14px 16px 12px;
  text-align: left;
  --b: 2px; --bc: var(--ink); --bg: var(--surface); --sh: 3px 4px 0 var(--line);
  border-radius: var(--r-lg);
}
.stage-card .sched { margin-top: 8px; }
/* ポスター受賞作品（傾けずにまっすぐ並べる） */
.awards { margin-top: 36px; }
.award-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }  /* 3枚の枠の高さをそろえる */
.award {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  padding: 5px 5px 8px;
  font: inherit; color: inherit;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 2px 3px 0 var(--line);
  cursor: pointer;
  transition: transform .15s;
}
.award:hover { transform: translateY(-2px); }
.award:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.award img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; }
.award-hint { margin: 12px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
.award-name {
  padding: 0 8px;
  font-size: .8rem; font-weight: 700;
  color: #fff;
  background: var(--maple);
  border-radius: var(--r-sm);
}
.award-name.gold   { background: #c99a1e; }  /* 金賞 */
.award-name.silver { background: #8a96a3; }  /* 銀賞 */
.award-group  { margin-top: -2px; font-size: .7rem; color: var(--muted); line-height: 1.3; }
.award-person { margin-top: -4px; font-size: .8rem; font-weight: 700; line-height: 1.35; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
/* 拡大表示の下の「賞・クラス名・氏名」 */
.poster-view-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 2px; }
.poster-view-cap .award-group, .poster-view-cap .award-person { margin: 0; font-size: .9rem; }
/* ポスターの拡大表示 */
.poster-view {
  width: min(92vw, 520px);
  padding: 6px;
  background: #fff;
  border: 0;
  box-shadow: 4px 6px 0 rgba(0, 0, 0, .25);
  overflow: visible;
}
.poster-view::backdrop { background: rgba(42, 38, 34, .7); }
.poster-view img { display: block; width: 100%; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); object-fit: contain; }
.poster-view .rd-close { top: -12px; right: -12px; }

/* ごあいさつ（校長・実行委員長） */
.greetings { margin-top: 36px; text-align: left; }
.greeting {
  position: relative;
  margin-top: 16px;
  padding: 16px 16px 14px;
  --bg: var(--surface);
  --b: 2px; --bc: var(--ink);
  border-radius: var(--r-lg);
  --sh: 3px 4px 0 var(--line);
}
.greeting:nth-child(even) { transform: rotate(.6deg); }
.greeting:nth-child(odd)  { transform: rotate(-.4deg); }
/* 役職（ラベル）とその下のお名前 */
.gr-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.gr-role {
  padding: 1px 12px;
  font-size: .8rem; font-weight: 700;
  color: #fff;
  --bg: var(--orange);
  border-radius: var(--r-sm);
}
.gr-name {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.gr-group { margin: 0; font-size: .8rem; color: var(--muted); }  /* 所属（学科・学年） */
/* 実行委員（副実行委員長・書記）。役職の札 | 所属とお名前 の2列 */
.cm-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0 12px;
  margin: 0; padding: 0;
  list-style: none;
}
.cm-list li { display: contents; }
.cm-role { justify-self: start; font-size: .8rem; }
.cm-who { display: flex; flex-direction: column; padding: 8px 0; min-width: 0; line-height: 1.4; }
.cm-list li + li .cm-who { border-top: 1.5px dashed var(--line); }
.cm-list li:first-child .cm-who { padding-top: 0; }
.cm-list li:last-child .cm-who { padding-bottom: 0; }
.cm-group { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.cm-name { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.gr-name.tbd { font-family: inherit; font-weight: 400; font-size: .85rem; color: var(--muted); }
.gr-text { margin: 0; font-size: .9rem; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
/* 写真（ポラロイド風に少し傾けて貼る） */
.gr-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.gr-top .gr-head { margin: 0; }
.gr-photo {
  flex: 0 0 auto;
  width: 84px;
  margin: 0;
  padding: 4px 4px 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 2px 3px 0 var(--line);
  transform: rotate(-3deg);
}
.greeting:nth-child(even) .gr-photo { transform: rotate(3deg); }
.gr-photo-crop, .gr-photo-empty {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
/* 写真は顔の位置（data.js の photoFocus）を枠の中心にして拡大する */
.gr-photo-crop { position: relative; overflow: hidden; background: var(--paper-2); }
.gr-photo-crop img {
  position: absolute; left: 50%; top: 50%;
  width: 170%; height: auto; max-width: none;
  transform: translate(calc(-1 * var(--fx)), calc(-1 * var(--fy)));
}
.gr-photo-empty {
  display: grid; place-items: center; align-content: center;
  background: var(--paper-2);
  border: 1.5px dashed var(--line);
  color: var(--muted);
}
.gr-photo-empty .ico { width: 34px; height: 34px; vertical-align: 0; }
.gr-photo-empty small { font-size: .68rem; line-height: 1.2; }

/* タブの左の「トップへ戻る」 */
.tab-home {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px;
  font-size: 1.15rem; text-decoration: none;
  --bg: var(--surface);
  --b: 2px; --bc: var(--ink);
  border-radius: var(--r-md);
  --sh: 2px 3px 0 var(--line);
}
.tab-home:hover { --bg: var(--paper-2); }

.view { display: none; }
.view.active { display: block; }

main { max-width: 960px; margin: 0 auto; padding: 24px 16px 40px; }

.section-title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
}
.section-title::after {
  content: "";
  display: block;
  width: 120px; height: 6px;
  margin: 2px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  transform: rotate(-1.5deg);
}

/* ---------- フロアマップ（建物の断面図） ---------- */
.fm-wrap {
  --bg: var(--surface);
  --b: 2px; --bc: var(--ink);
  border-radius: var(--r-lg);
  padding: 14px 10px;
  --sh: 3px 4px 0 var(--line);
}
.floor-map {
  display: grid;
  grid-template-columns: 2rem repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.fm-floor {
  grid-column: 1;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  --bg: var(--ink);
  border-radius: var(--r-sm);
}
.fm-room {
  display: flex; flex-direction: column; gap: 2px;
  font: inherit; color: inherit; text-align: left;
  min-height: 72px;
  padding: 5px 6px 7px;
  --bg: #fff;
  --b: 1.5px; --bc: var(--ink);
  --bt: 5px; --btc: var(--orange);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}
.fm-no {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--berry);
  -webkit-text-stroke: 1px var(--ink);  /* 黒い文字枠 */
  paint-order: stroke fill;               /* 枠を文字の外側に描いて赤を残す */
}
/* 教室番号とジャンルの印を横に並べる */
/* 幅が足りないときは番号を折り返さず、ジャンルの札のほうを次の行に回す */
.fm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.fm-head .fm-no { white-space: nowrap; }
.fm-genres { display: flex; gap: 3px; margin-left: auto; }
.fm-genres .genre-badge { margin-left: 0; padding: 0 5px; font-size: .62rem; }  /* マップでは札を少し小さく */
.fm-name  { margin-top: 2px; font-size: .82rem; font-weight: 700; line-height: 1.35; }
/* data.js の名前・クラス名に書いた改行（\n）は、フロアマップの枠の中だけで改行する */
.fm-name, .fm-group { white-space: pre-line; }
.fm-group { margin-top: auto; font-size: .68rem; line-height: 1.35; color: var(--muted); }

.fm-room.stage { --btc: var(--maple); --bg: #fff1e6; justify-content: center; }
.fm-room.stage .fm-name { font-size: 1.05rem; text-align: center; }
.fm-room.info  { --btc: var(--sky); --bg: #eef4fb; }

/* 押せる見た目（指のカーソル・浮き上がり）は、詳細画面を出すとき（button のとき）だけ */
button.fm-room { cursor: pointer; transition: transform .15s, box-shadow .15s; }
button.fm-room:hover { transform: translateY(-2px); --sh: 2px 4px 0 var(--line); }
button.fm-room:active { transform: translateY(0); }
button.fm-room:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* data.js の SHOW_SHOPS が false のときは、お店・企画のボタン・タブ・ページを出さない */
.shops-off :is(.top-btn[href="#shops"], .tab[data-view="shops"], #view-shops) { display: none !important; }

/* ---------- お店・企画 ---------- */
.genre-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.genre-chip {
  padding: 4px 14px;
  font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--g, var(--ink));
  --bg: var(--surface);
  --b: 2px; --bc: var(--g, var(--ink));
  border-radius: var(--r-md);
  cursor: pointer;
}
.genre-chip.active { color: #fff; --bg: var(--g, var(--ink)); }
.genre-badge {
  margin-left: auto;
  padding: 0 8px;
  font-size: .72rem; font-weight: 700; line-height: 1.6;
  color: #fff;
  --bg: var(--g);
  border-radius: var(--r-sm);
}
.genre-badge + .genre-badge { margin-left: 4px; }  /* ジャンルが複数のとき */
/* 「内容は変更になる場合があります」 */
.change-notice { margin: 0 0 14px; font-size: .8rem; color: var(--muted); text-align: center; text-wrap: balance; }  /* 折り返したとき2行の長さをそろえる */
.room-detail .change-notice { margin: 16px 0 0; text-align: left; }
.shop-empty { margin: 24px 0; text-align: center; color: var(--muted); }

.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.shop-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px 14px;
  font: inherit; color: inherit; text-align: left;
  --bg: #fff;
  --b: 1.5px; --bc: var(--ink);
  --bt: 5px; --btc: var(--orange);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.shop-card.stage { --btc: var(--maple); --bg: #fff1e6; }
.shop-card:hover { transform: translateY(-2px); --sh: 2px 4px 0 var(--line); }
.shop-card:active { transform: translateY(0); }
.shop-card:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.sc-place { display: flex; align-items: center; gap: 8px; }
.sc-floor {
  padding: 0 8px;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  --bg: var(--ink);
  border-radius: var(--r-sm);
}
.sc-name {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
}
.sc-group { font-size: .8rem; color: var(--muted); }
/* 店名が未定のお店 */
.sc-name.tbd, .rd-name.tbd { color: var(--muted); font-weight: 400; }

/* ---------- 部屋の詳細 ---------- */
.room-detail {
  width: min(90vw, 420px);
  padding: 26px 22px 22px;
  color: var(--ink);
  --bg: var(--surface);
  --b: 2px; --bc: var(--ink);
  --bt: 8px; --btc: var(--orange);
  border-radius: var(--r-lg);
  --sh: 4px 6px 0 var(--line);
}
.room-detail::backdrop { background: rgba(42, 38, 34, .45); }
.rd-place { margin: 0; font-size: .85rem; font-weight: 700; color: var(--berry); }
.rd-name {
  margin: 4px 0 0;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.35;
}
.rd-name::after {
  content: "";
  display: block;
  width: 90px; height: 5px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  transform: rotate(-1.5deg);
}
.rd-group { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }
.rd-genre { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .9rem; }
.rd-genre .genre-badge { margin-left: 0; font-size: .8rem; padding: 1px 10px; }
.rd-label { font-size: .8rem; font-weight: 700; color: var(--muted); }
.rd-tbd { color: var(--muted); }
.rd-desc  { margin: 12px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.rd-menu  { width: 100%; margin-top: 12px; border-collapse: collapse; }
.rd-menu td:first-child { overflow-wrap: anywhere; }
/* お店の「紹介・メニューと料金・補足」 */
.rd-sec { margin-top: 16px; }
.rd-sec-title {
  display: inline-block;
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  /* 黄色い色鉛筆でなぞったような下線 */
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}
.rd-sec .rd-desc, .rd-sec .rd-menu, .rd-sec .rd-tbd { margin-top: 6px; }
.rd-sec .rd-tbd { margin-bottom: 0; font-size: .9rem; }
/* 補足（アレルギー・整理券など）は付せん風に */
.rd-note {
  padding: 8px 12px;
  font-size: .9rem;
  --bg: var(--paper-2);
  --bl: 4px; --blc: var(--orange);
  border-radius: var(--r-sm);
}
.rd-menu td { padding: 6px 0; border-bottom: 1.5px dashed var(--line); }
.rd-menu td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
/* 閉じるボタンの「×」は文字ではなく線で描いて、ボタンのまん中にそろえる */
.rd-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* メインステージのスケジュール（日付・時間・催事の3列） */
.sched { display: grid; gap: 5px; --c1: 4.2rem; --c2: 6.8rem; }
.sched-head { display: grid; grid-template-columns: var(--c1) var(--c2) 1fr; gap: 5px; }
.sched-head span {
  padding: 1px 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-align: center;
  color: var(--muted);
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.sched-day { display: grid; grid-template-columns: var(--c1) 1fr; gap: 5px; }
.sched-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 2px;
  color: #fff;
  background: var(--d);
  border-radius: var(--r-sm);
  line-height: 1.15;
}
.sd-md { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sd-wd { margin-top: 2px; font-size: .9rem; font-weight: 700; }
.sched-items { display: grid; gap: 5px; }
/* 時間と催事は、ほかのカードと同じ白い紙の欄。行ごとに1つの枠でくくる */
.sched-row {
  display: grid; grid-template-columns: var(--c2) 1fr;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
}
.sched-row > span { display: flex; align-items: center; min-height: 2.4rem; padding: 4px 8px; }
.sched-time {
  justify-content: center;
  border-right: 1.5px dashed var(--line);
  font-weight: 700; font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--berry);
}
.sched-what { gap: 6px; flex-wrap: wrap; font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
/* 「開催中」「NEXT」の札と、終わった催事 */
.sched-badge:empty { display: none; }
.sched-badge {
  padding: 0 6px;
  font-size: .68rem; font-weight: 700; line-height: 1.5; letter-spacing: .05em;
  border: 1.5px solid var(--maple);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.is-live .sched-badge { color: #fff; background: var(--maple); }   /* 開催中: 赤の塗り */
.is-next .sched-badge { color: var(--maple); background: #fff; }   /* NEXT: 白地に赤 */
.sched-row.is-live { border: 2px solid var(--maple); background: #fff4f0; }  /* 開催中の行を1つの赤枠で */
.is-done { opacity: .45; }

.rd-close {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}

/* ---------- 手描きの枠 ---------- */
:is(.hero-date, .tab, .top-btn, .greeting, .gr-role, .tab-home, .fm-wrap, .fm-floor, .fm-room, .genre-chip, .genre-badge, .shop-card, .sc-floor, .room-detail, .rd-note, .stage-card) {
  isolation: isolate;
  background: transparent;
  border-style: solid;
  border-color: transparent;
  border-width: var(--bt) var(--b) var(--b) var(--bl);
  box-shadow: none;
}
:is(.hero-date, .tab, .top-btn, .greeting, .gr-role, .tab-home, .fm-wrap, .fm-floor, .fm-room, .genre-chip, .genre-badge, .shop-card, .sc-floor, .room-detail, .rd-note, .stage-card):not(dialog) { position: relative; }
/* 線と塗り */
:is(.hero-date, .tab, .top-btn, .greeting, .gr-role, .tab-home, .fm-wrap, .fm-floor, .fm-room, .genre-chip, .genre-badge, .shop-card, .sc-floor, .room-detail, .rd-note, .stage-card)::before {
  content: "";
  position: absolute; z-index: -1;
  inset: calc(-1 * var(--bt)) calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--bl));
  pointer-events: none;
  /* 色鉛筆でぬったような斜めのタッチを塗りに重ねる */
  background:
    repeating-linear-gradient(-35deg, rgba(255, 255, 255, .16) 0 1.5px, transparent 1.5px 5px),
    var(--bg);
  border-style: solid;
  border-width: var(--bt) var(--b) var(--b) var(--bl);
  border-color: var(--btc) var(--bc) var(--bc) var(--blc);
  border-radius: inherit;
  box-shadow: var(--sh);
}
/* 大きな枠は、鉛筆で2度なぞったように薄い線をもう1本 */
:is(.tab, .tab-home, .top-btn, .greeting, .fm-wrap, .fm-room, .shop-card, .room-detail, .stage-card)::after {
  content: "";
  position: absolute; z-index: -1;
  inset: calc(-1 * var(--b) - 1px) calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b) - 1px);
  pointer-events: none;
  border: 1.5px solid var(--bc);
  /* 1本目と角の丸みをずらして、線が重なりきらないように */
  border-radius: 6px 12px 5px 10px / 10px 5px 12px 6px;
  opacity: .35;
  transform: rotate(-.5deg) translate(1px, 0);
}
/* 詳細画面: 枠の線が切れないよう外側は見せ、中身だけをスクロールさせる */
.room-detail { overflow: visible; max-height: none; }
#room-detail-body { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; }

/* 幅の狭いスマホ（iPhone SE など） */
@media (max-width: 380px) {
  .award-person { font-size: .74rem; }  /* 受賞者の名前（シュレシュタ など）が言葉の途中で切れないように */
  .sched { --c1: 3rem; --c2: 5.5rem; gap: 4px; }
  .sched-time { font-size: .74rem; }
  .sched-what { font-size: .9rem; }
  .sched-row > span { padding: 4px 5px; }
  .sd-md { font-size: 1.05rem; }
  .stage-card { padding: 12px 10px 10px; }
  .room-detail { padding: 24px 14px 18px; }  /* 詳細画面の中は横幅が狭いので余白を詰める */
  main { padding-left: 12px; padding-right: 12px; }
  .tabs { gap: 8px; padding: 10px 12px; }
  .tab { padding: 8px 6px; font-size: .9rem; }
  .fm-wrap { padding: 10px 6px; }
  .floor-map { grid-template-columns: 1.7rem repeat(3, minmax(0, 1fr)); gap: 4px; }
  .fm-room { padding: 4px 5px 6px; }
  .fm-name { font-size: .78rem; }
}

@media (min-width: 640px) {
  .floor-map { grid-template-columns: 3rem repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fm-room { min-height: 84px; padding: 6px 10px 8px; }
  .fm-group { font-size: .75rem; }
  .fm-name  { font-size: 1rem; }
  .fm-no    { font-size: 1.3rem; }
  .fm-room.stage .fm-name { font-size: 1.4rem; }
}

footer {
  text-align: center; color: var(--muted);
  font-size: .8rem; padding: 8px 16px 28px;
}
footer .dots { margin-bottom: 10px; }