/* =========================================================
 * 習陵祭2026 デジタルサイネージ  style.css
 * 和モダン / 明朝体 / 高コントラスト / 桜の襖トランジション
 * 基準: 16:9 の 1920x1080 で calc(var(--u) * 1) ≒ 19.2px
 * ========================================================= */
:root {
  --fs: 1;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(.7, 0, .2, 1);
}

/* ---- テーマ ---- */
#app[data-theme="washi"] {
  --bg: #f4eddf; --bg2: #ebe1cc; --ink: #14233f; --ink-sub: #3e4a63; --accent: #b3293a;
  --card: rgba(255, 252, 244, .86); --line: rgba(20, 35, 63, .22); --hero-bg: #14233f; --hero-ink: #fffaf0;
  --hero-accent: #f5c542; --shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(20, 35, 63, .16);
}
#app[data-theme="yoru"] {
  --bg: #0a1226; --bg2: #101b38; --ink: #f6f1e4; --ink-sub: #c2c9dc; --accent: #ff7a8a;
  --card: rgba(18, 30, 62, .82); --line: rgba(246, 241, 228, .28); --hero-bg: #f6f1e4; --hero-ink: #0a1226;
  --hero-accent: #b3293a; --shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0, 0, 0, .5);
}
#app[data-theme="sakura"] {
  --bg: #fbe8ee; --bg2: #f6d3de; --ink: #3a1020; --ink-sub: #693448; --accent: #c2185b;
  --card: rgba(255, 247, 249, .88); --line: rgba(58, 16, 32, .24); --hero-bg: #7a1f3d; --hero-ink: #fff7f9;
  --hero-accent: #ffe08a; --shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(122, 31, 61, .2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0e1a3a; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

#app {
  --u: calc(min(1vw, 1.7778vh) * var(--fs));
  position: fixed; inset: 0; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, var(--bg2), transparent 70%),
    var(--bg);
  transition: background .6s, color .6s;
}
/* 和紙の質感 */
#app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#app[data-theme="yoru"]::before { opacity: .12; mix-blend-mode: screen; }

/* ---- 花びら ---- */
#petals { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
#petals i {
  position: absolute; top: -8%; left: var(--x); width: calc(var(--u) * 1.5 * var(--s)); height: calc(var(--u) * 1.1 * var(--s));
  background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9c6d3 55%, #ec8fa8 100%);
  border-radius: 80% 0 80% 0; opacity: .75;
  animation: petal var(--d) linear var(--w) infinite;
  transform: rotate(var(--r));
}
@keyframes petal {
  0% { transform: translate3d(0, 0, 0) rotate(var(--r)); }
  50% { transform: translate3d(var(--sw), 55vh, 0) rotate(calc(var(--r) + 200deg)); }
  100% { transform: translate3d(calc(var(--sw) * -1), 112vh, 0) rotate(calc(var(--r) + 420deg)); }
}

/* ---- HUD 上部 ---- */
#hud-top {
  position: absolute; top: 0; left: 0; right: 0; height: calc(var(--u) * 8.4); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 3);
  background: linear-gradient(180deg, var(--card), transparent);
  opacity: 0; transition: opacity .8s .3s;
}
.running #hud-top { opacity: 1; }
.brand { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.seal {
  display: grid; place-items: center; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6);
  background: var(--accent); color: #fff; font-weight: 900; font-size: calc(var(--u) * 3); border-radius: calc(var(--u) * .5);
  box-shadow: inset 0 0 0 calc(var(--u) * .22) rgba(255,255,255,.5);
}
.brand-main { font-size: calc(var(--u) * 3.6); font-weight: 900; letter-spacing: .12em; }
.brand-main small { font-size: .5em; margin-left: .5em; letter-spacing: .1em; opacity: .75; }
.brand-sub { font-size: calc(var(--u) * 1.8); letter-spacing: .5em; color: var(--ink-sub); border-left: calc(var(--u) * .15) solid var(--line); padding-left: calc(var(--u) * 1.4); }
.clock { text-align: right; line-height: 1; }
.clock-time { font-size: calc(var(--u) * 4.8); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.clock-date { font-size: calc(var(--u) * 1.8); color: var(--ink-sub); margin-top: calc(var(--u) * .5); letter-spacing: .1em; }
.net-status { background: #b3293a; color: #fff; font-family: var(--sans); font-weight: 700; padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: 99px; font-size: calc(var(--u) * 1.4); }

/* 緊急バナー */
#emergency-banner {
  position: absolute; z-index: 6; left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 8.6);
  display: flex; gap: calc(var(--u) * 1.6); align-items: center; padding: calc(var(--u) * .9) calc(var(--u) * 2);
  background: #c4162a; color: #fff; border-radius: calc(var(--u) * .6); font-size: calc(var(--u) * 2.3); font-weight: 700;
  box-shadow: var(--shadow); animation: blink 2.4s ease-in-out infinite;
}
#emergency-banner strong { background: #fff; color: #c4162a; padding: 0 .6em; border-radius: .3em; letter-spacing: .2em; }
@keyframes blink { 50% { filter: brightness(1.25); } }
.has-emergency #stage { top: calc(var(--u) * 14.5); }

/* ---- ステージ ---- */
#stage { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--u) * 8.6); bottom: calc(var(--u) * 6.6); padding: 0 calc(var(--u) * 3); transition: top .4s; }
.slide { position: absolute; inset: 0 calc(var(--u) * 3); display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.slide.pre > *, .slide.pre { opacity: 0; }
.slide.fadeout { opacity: 0; transition: opacity .4s; }
.slide.enter > * { animation: rise .9s var(--ease) both; }
.slide.enter > *:nth-child(2) { animation-delay: .18s; }
.slide.enter > *:nth-child(3) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(calc(var(--u) * 2.2)); } to { opacity: 1; transform: none; } }

/* ---- 下部 ---- */
#hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; opacity: 0; transition: opacity .8s .3s; }
.running #hud-bottom { opacity: 1; }
#progress { height: calc(var(--u) * .45); background: var(--line); }
#progress-bar { height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .1s linear; }
.ticker {
  display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 6.2); padding: 0 calc(var(--u) * 3);
  background: var(--hero-bg); color: var(--hero-ink); font-size: calc(var(--u) * 2.4); white-space: nowrap; overflow: hidden;
}
.tk-label { background: var(--hero-accent); color: #14233f; font-weight: 900; padding: .1em .7em; border-radius: .3em; letter-spacing: .15em; }
.tk-time { font-weight: 900; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.tk-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tk-place { opacity: .85; margin-left: auto; }
.tk-cd { font-weight: 900; color: var(--hero-accent); min-width: 6em; text-align: right; }
.ticker.is-near { animation: tkpulse 1.6s ease-in-out infinite; }
@keyframes tkpulse { 50% { background: #b3293a; } }

/* ---- 襖 ---- */
#fusuma { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: flex; overflow: hidden; }
#fusuma .panel {
  position: relative; width: 50%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;
  will-change: transform; transition: transform 1.4s var(--ease); background-color: #efe6d6;
}
#fusuma .left { background-image: url("/img/fusuma-left.jpg"); transform: translate3d(-101%, 0, 0); box-shadow: calc(var(--u) * .6) 0 calc(var(--u) * 2) rgba(0,0,0,.35); }
#fusuma .right { background-image: url("/img/fusuma-right.jpg"); transform: translate3d(101%, 0, 0); box-shadow: calc(var(--u) * -.6) 0 calc(var(--u) * 2) rgba(0,0,0,.35); }
#fusuma.closed .panel { transition-duration: .9s; transform: translate3d(0, 0, 0); }
/* 中央の合わせ目に落ちる影 */
#fusuma::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--u) * .3); background: rgba(40, 20, 10, .55); transform: translateX(-50%); opacity: 0; transition: opacity .6s; }
#fusuma.closed::after { opacity: 1; }

/* ---- スタート画面 ---- */
#start-screen {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6);
  background: radial-gradient(60% 60% at 50% 50%, rgba(244,237,223,.93), rgba(244,237,223,.55) 70%, rgba(244,237,223,.1));
  transition: opacity .6s, visibility .6s; color: #14233f;
}
#start-screen.hide { opacity: 0; visibility: hidden; }
.btn-start {
  font-family: var(--serif); font-weight: 900; font-size: calc(var(--u) * 4.4); letter-spacing: .3em; padding: calc(var(--u) * 1.6) calc(var(--u) * 6);
  color: #fffaf0; background: #14233f; border: 0; border-radius: calc(var(--u) * .5); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(20,35,63,.4), inset 0 0 0 calc(var(--u) * .25) #f5c542;
  transition: transform .2s, box-shadow .2s;
}
.btn-start:hover, .btn-start:focus-visible { transform: translateY(calc(var(--u) * -.4)) scale(1.03); box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(20,35,63,.5), inset 0 0 0 calc(var(--u) * .25) #f5c542; outline: none; }
.start-note { font-size: calc(var(--u) * 1.7); color: #3e4a63; font-weight: 700; }
.start-status { font-size: calc(var(--u) * 1.4); color: #3e4a63; font-family: var(--sans); }
.btn-ghost { background: rgba(255,255,255,.6); border: calc(var(--u) * .12) solid #14233f; color: #14233f; border-radius: 99px; padding: calc(var(--u) * .5) calc(var(--u) * 2); font-size: calc(var(--u) * 1.5); font-family: var(--sans); font-weight: 700; }
.btn-ghost:hover { background: #fff; }

/* ---- 操作ボタン ---- */
.controls {
  position: absolute; z-index: 25; right: calc(var(--u) * 2); bottom: calc(var(--u) * 7.4); display: flex; gap: calc(var(--u) * .6);
  opacity: 0; transform: translateY(calc(var(--u) * 1)); pointer-events: none; transition: .3s;
}
.controls.show { opacity: 1; transform: none; pointer-events: auto; }
.controls button {
  background: rgba(20,35,63,.9); color: #fff; border: 0; border-radius: calc(var(--u) * .5); padding: calc(var(--u) * .6) calc(var(--u) * 1.3); font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 1.4);
}
.controls button:hover { background: #b3293a; }
.idle { cursor: none; }
.paused #progress-bar { background: #999; }

/* =========================================================
 * コマ別レイアウト
 * ========================================================= */
.sec-title { display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 5.4); font-weight: 900; letter-spacing: .2em; margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.6); }
.sec-title::before { content: ""; width: calc(var(--u) * .7); height: calc(var(--u) * 5); background: var(--accent); align-self: center; }
.sec-title em { font-style: normal; font-family: var(--sans); font-size: calc(var(--u) * 1.5); letter-spacing: .4em; color: var(--ink-sub); }

/* --- スケジュール --- */
.s-schedule { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: calc(var(--u) * 2.4); align-items: stretch; padding: calc(var(--u) * 1.2) 0; }
.hero {
  position: relative; background: var(--hero-bg); color: var(--hero-ink); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.6);
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .9); min-height: 0; box-shadow: var(--shadow); overflow: hidden;
  border: calc(var(--u) * .25) solid var(--hero-accent);
}
.hero::after { content: "祭"; position: absolute; right: -.1em; bottom: -.28em; font-size: calc(var(--u) * 24); font-weight: 900; opacity: .07; line-height: 1; pointer-events: none; }
.hero-ribbon { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.hero-ribbon span { background: var(--hero-accent); color: #14233f; font-weight: 900; font-size: calc(var(--u) * 2); padding: .1em .9em; letter-spacing: .3em; border-radius: .3em; }
.hero-ribbon em { font-style: normal; font-family: var(--sans); letter-spacing: .5em; font-size: calc(var(--u) * 1.5); opacity: .8; }
.hero-time { font-size: calc(var(--u) * 8.6); font-weight: 900; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--hero-accent); }
.hero-time small { font-size: .32em; margin-left: .5em; color: var(--hero-ink); opacity: .85; letter-spacing: .06em; }
.hero-cd { font-family: var(--sans); font-weight: 900; font-size: calc(var(--u) * 3); line-height: 1.1; }
.hero-title { font-size: calc(var(--u) * 4.6); font-weight: 900; line-height: 1.3; letter-spacing: .04em; }
.hero-meta { display: flex; align-items: center; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 2.3); font-weight: 700; flex-wrap: wrap; }
.pill-place { background: var(--hero-ink); color: var(--hero-bg); padding: .1em .9em; border-radius: 99px; font-weight: 900; }
.hero-ent { opacity: .92; }
.hero-sub { font-size: calc(var(--u) * 2.6); opacity: .85; }
.hero.is-near { animation: heroglow 1.8s ease-in-out infinite; }
@keyframes heroglow { 0%, 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(245,197,66,.0); } 50% { box-shadow: var(--shadow), 0 0 0 calc(var(--u) * 1.2) rgba(245,197,66,.45); } }
.hero.is-near .hero-cd { color: #ff6b6b; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.06); transform-origin: left; } }

.side { display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); min-height: 0; overflow: hidden; }
.side .col-block { min-height: 0; overflow: hidden; }
.col-block { background: var(--card); border: calc(var(--u) * .1) solid var(--line); border-radius: calc(var(--u) * .7); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); box-shadow: var(--shadow); backdrop-filter: blur(2px); }
.col-h { font-size: calc(var(--u) * 2); font-weight: 900; letter-spacing: .3em; padding-bottom: calc(var(--u) * .4); margin-bottom: calc(var(--u) * .6); border-bottom: calc(var(--u) * .12) solid var(--line); display: flex; align-items: center; gap: .6em; }
.col-h .dot { width: .7em; height: .7em; border-radius: 50%; background: #e0242f; animation: blink 1.4s infinite; }
.side-empty { font-size: calc(var(--u) * 2.4); color: var(--ink-sub); padding: calc(var(--u) * 2); }
.slist { list-style: none; display: flex; flex-direction: column; }
.srow { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 1.4); align-items: center; padding: calc(var(--u) * .55) 0; border-bottom: calc(var(--u) * .08) dashed var(--line); }
.srow:last-child { border-bottom: 0; }
.srow-time { font-size: calc(var(--u) * 2.5); min-width: 3.4em; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.05; }
.srow-time small { display: block; font-size: .5em; color: var(--ink-sub); font-weight: 700; }
.srow-title { font-size: calc(var(--u) * 2.1); font-weight: 900; line-height: 1.25; }
.srow-meta { font-size: calc(var(--u) * 1.4); color: var(--ink-sub); margin-top: .15em; font-family: var(--sans); font-weight: 500; }
.srow-cd { font-family: var(--sans); font-weight: 900; font-size: calc(var(--u) * 1.5); color: var(--accent); white-space: nowrap; }
.srow.is-live .srow-cd { background: #e0242f; color: #fff; padding: .1em .7em; border-radius: 99px; }
.slist.compact .srow-time { font-size: calc(var(--u) * 2.4); }
.slist.compact .srow-title { font-size: calc(var(--u) * 2); }

/* --- 団体紹介 --- */
.s-entity { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.2) 0; }
.ent-left {
  position: relative; color: #fff; border-radius: calc(var(--u) * .8); padding: calc(var(--u) * 3); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 1.6);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ent) 78%, #fff 0%), color-mix(in srgb, var(--ent) 55%, #000)); box-shadow: var(--shadow); overflow: hidden;
  border: calc(var(--u) * .25) solid rgba(255,255,255,.55);
}
.ent-left::after { content: ""; position: absolute; right: calc(var(--u) * -8); top: calc(var(--u) * -8); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; border: calc(var(--u) * .5) solid rgba(255,255,255,.18); }
.ent-kind { font-family: var(--sans); letter-spacing: .5em; font-size: calc(var(--u) * 1.9); font-weight: 700; opacity: .9; }
.ent-name { font-size: calc(var(--u) * 7.2); font-weight: 900; line-height: 1.12; letter-spacing: .04em; text-shadow: 0 calc(var(--u) * .2) calc(var(--u) * .8) rgba(0,0,0,.35); }
.ent-badges, .ent-tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .8); }
.badge { background: #f5c542; color: #14233f; font-weight: 900; font-size: calc(var(--u) * 2.2); padding: .05em .8em; border-radius: .3em; letter-spacing: .2em; }
.tag { border: calc(var(--u) * .12) solid rgba(255,255,255,.85); font-size: calc(var(--u) * 2); font-weight: 700; padding: .05em .8em; border-radius: 99px; background: rgba(255,255,255,.12); }
.ent-right { background: var(--card); border: calc(var(--u) * .1) solid var(--line); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); justify-content: safe center; min-height: 0; overflow: hidden; }
.ent-title { font-size: calc(var(--u) * 3.6); font-weight: 900; line-height: 1.3; letter-spacing: .03em; padding-bottom: calc(var(--u) * .5); border-bottom: calc(var(--u) * .2) solid var(--accent); }
.ent-body { font-size: calc(var(--u) * 2.4); line-height: 1.65; font-weight: 500; }
.ent-imgs { display: flex; gap: calc(var(--u) * 1); min-height: 0; }
.ent-img { flex: 1; min-width: 0; max-height: calc(var(--u) * 14); object-fit: cover; border-radius: calc(var(--u) * .5); }
.ent-sched h4 { font-size: calc(var(--u) * 1.9); letter-spacing: .3em; color: var(--accent); margin-bottom: calc(var(--u) * .2); }

/* --- 混雑状況 --- */
.s-cong { grid-template-rows: auto 1fr; align-content: start; }
.cong-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 1.6); align-content: start; }
.cong { display: flex; align-items: center; gap: calc(var(--u) * 2); background: var(--card); border: calc(var(--u) * .1) solid var(--line); border-left: calc(var(--u) * 1) solid var(--c); border-radius: calc(var(--u) * .7); padding: calc(var(--u) * 1.4) calc(var(--u) * 2); box-shadow: var(--shadow); }
.cong-ok { --c: #1e8e5a; } .cong-mid { --c: #e08a00; } .cong-ng { --c: #d3202f; }
.cong-mark { font-family: var(--sans); font-weight: 900; font-size: calc(var(--u) * 7.5); color: var(--c); line-height: 1; width: 1.1em; text-align: center; }
.cong-area { font-size: calc(var(--u) * 3.2); font-weight: 900; line-height: 1.2; }
.cong-status { font-size: calc(var(--u) * 2.8); font-weight: 900; color: var(--c); letter-spacing: .1em; }
.cong-note { font-size: calc(var(--u) * 1.8); color: var(--ink-sub); font-family: var(--sans); margin-top: .15em; }

/* --- メッセージ --- */
.s-message { align-content: center; justify-items: center; text-align: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 6); position: relative; }
.msg-mark { font-size: calc(var(--u) * 20); line-height: .6; color: var(--accent); opacity: .5; font-weight: 900; }
.msg-title { font-size: calc(var(--u) * 6.6); font-weight: 900; letter-spacing: .12em; }
.msg-body { font-size: calc(var(--u) * 3.2); line-height: 1.9; font-weight: 500; max-width: 80%; }
.msg-by { font-size: calc(var(--u) * 3); font-weight: 900; letter-spacing: .15em; }
.msg-by span { font-size: .65em; margin-right: 1em; padding: .1em .8em; background: var(--ink); color: var(--bg); border-radius: .3em; letter-spacing: .3em; }

/* --- お知らせ一覧 --- */
.s-announce { align-content: start; grid-template-rows: auto 1fr; }
.ann-list { display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); }
.ann { background: var(--card); border: calc(var(--u) * .1) solid var(--line); border-left: calc(var(--u) * 1) solid var(--accent); border-radius: calc(var(--u) * .7); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); box-shadow: var(--shadow); }
.ann.is-emergency { border-left-color: #c4162a; background: rgba(196,22,42,.1); }
.ann-tag { display: inline-block; background: var(--accent); color: #fff; font-family: var(--sans); font-weight: 900; font-size: calc(var(--u) * 1.5); padding: .05em .8em; border-radius: 99px; letter-spacing: .2em; margin-bottom: calc(var(--u) * .4); }
.ann.is-emergency .ann-tag { background: #c4162a; }
.ann-title { font-size: calc(var(--u) * 3.6); font-weight: 900; line-height: 1.25; }
.ann-body { font-size: calc(var(--u) * 2.3); line-height: 1.6; margin-top: .3em; }

/* --- 割り込みお知らせ (最優先) --- */
.s-news { align-content: center; justify-items: stretch; }
.news-card { position: relative; background: var(--hero-bg); color: var(--hero-ink); border: calc(var(--u) * .35) solid var(--hero-accent); border-radius: calc(var(--u) * 1); padding: calc(var(--u) * 3.4) calc(var(--u) * 4.2); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: calc(var(--u) * 2); overflow: hidden; }
.news-card::before { content: ""; position: absolute; inset: calc(var(--u) * .8); border: calc(var(--u) * .1) solid rgba(255,255,255,.3); border-radius: calc(var(--u) * .6); pointer-events: none; }
.news-label { display: flex; align-items: center; gap: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3); font-weight: 900; letter-spacing: .3em; color: var(--hero-accent); }
.news-label em { font-style: normal; font-family: var(--sans); font-size: .5em; letter-spacing: .5em; opacity: .8; color: var(--hero-ink); }
.news-title { font-size: calc(var(--u) * 6.2); font-weight: 900; line-height: 1.25; letter-spacing: .03em; }
.news-body { font-size: calc(var(--u) * 3.2); line-height: 1.7; font-weight: 500; }
.s-news.is-emergency .news-card { background: #b50f22; color: #fff; border-color: #fff; animation: blink 1.6s infinite; }
.s-news.is-emergency .news-label { color: #fff; }

/* --- 空 --- */
.s-empty { place-items: center; }
.empty-box { text-align: center; } .empty-mark { font-size: calc(var(--u) * 18); font-weight: 900; color: var(--accent); } .empty-box p { font-size: calc(var(--u) * 4); font-weight: 900; letter-spacing: .3em; }

/* =========================================================
 * 設定ドロワー
 * ========================================================= */
#settings {
  position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(520px, 96vw); background: #fffdf7; color: #14233f; font-family: var(--sans);
  box-shadow: -8px 0 40px rgba(0,0,0,.35); transform: translateX(105%); transition: transform .35s var(--ease); display: flex; flex-direction: column; font-size: 15px;
}
#settings.open { transform: none; }
.st-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #14233f; color: #fff; }
.st-head h2 { font-family: var(--serif); font-size: 20px; letter-spacing: .2em; }
.st-close { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; padding: 0 6px; }
.st-tabs { display: flex; background: #ece3cf; }
.st-tabs button { flex: 1; padding: 12px 4px; border: 0; background: none; font-weight: 700; border-bottom: 3px solid transparent; }
.st-tabs button.active { background: #fffdf7; border-bottom-color: #b3293a; color: #b3293a; }
.st-pane { display: none; padding: 6px 18px 28px; overflow-y: auto; flex: 1; }
.st-pane.active { display: block; }
.st-pane h3 { font-family: var(--serif); font-size: 16px; margin: 20px 0 8px; padding-left: 8px; border-left: 4px solid #b3293a; }
.check { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; font-weight: 500; }
.check input { width: 20px; height: 20px; accent-color: #b3293a; }
.entity-list { max-height: 180px; overflow-y: auto; border: 1px solid #d9cfb8; border-radius: 6px; padding: 4px 10px; margin-top: 8px; background: #fff; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1; min-width: 70px; padding: 9px 8px; border: 1px solid #14233f; background: #fff; border-radius: 6px; font-weight: 700; }
.seg button.active { background: #14233f; color: #fff; }
.row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.row label { flex: 0 0 auto; font-weight: 700; }
.row input[type=password], .row select { flex: 1; }
.st-pane input[type=text], .st-pane input[type=password], .st-pane textarea, .st-pane select {
  width: 100%; padding: 10px; border: 1px solid #b9ae94; border-radius: 6px; background: #fff; margin-top: 8px;
}
.row input[type=password], .row select { margin-top: 0; }
.st-pane input[type=range] { width: 100%; accent-color: #b3293a; }
.row input[type=range] { flex: 1; }
.hint { font-size: 13px; color: #5a6379; margin-top: 6px; line-height: 1.5; }
.hint.ok { color: #1e7a4d; font-weight: 700; } .hint.ng { color: #c4162a; font-weight: 700; }
.btn-main, .btn-sub { padding: 11px 16px; border: 0; border-radius: 6px; font-weight: 700; margin-top: 10px; }
.btn-main { width: 100%; background: #b3293a; color: #fff; font-size: 16px; }
.btn-main:disabled { opacity: .5; }
.btn-sub { background: #14233f; color: #fff; }
.news-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.news-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px; border: 1px solid #d9cfb8; border-radius: 6px; background: #fff; }
.news-list li.off { opacity: .55; }
.nl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nl-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .nl-main b.em { color: #c4162a; }
.nl-main span { font-size: 11px; color: #777; }
.nl-act { display: flex; gap: 4px; flex-shrink: 0; }
.nl-act button { padding: 5px 9px; border: 1px solid #14233f; background: #fff; border-radius: 4px; font-size: 12px; font-weight: 700; }
.nl-act button.danger { border-color: #c4162a; color: #c4162a; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 40px; transform: translate(-50%, 20px); background: rgba(20,35,63,.95); color: #fff; padding: 12px 24px; border-radius: 99px; font-family: var(--sans); font-weight: 700; opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 縦長/小さい画面 */
@media (max-aspect-ratio: 1/1) {
  #app { --u: calc(min(1vw, 1.7778vh) * var(--fs) * 1.7); }
  .s-schedule, .s-entity { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #petals { display: none; }
  .slide.enter > * { animation-duration: .01s; }
}

/* 団体紹介: 長文でも「この団体の予定」が必ず収まるように行数を制限 */
.ent-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(var(--u) * 3.4); flex: none; }
.ent-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
.ent-sched { flex: none; }
.ent-imgs { flex: 1 1 0; }
.has-emergency .ent-body { -webkit-line-clamp: 2; }
.has-emergency .ent-title { -webkit-line-clamp: 1; }