/* BEER GIRLS 2027 出店計画書（Web版）。仕様は DESIGN.md。1スライド＝960×540pt を基準に --u で拡大縮小する */
:root {
  --ink: #5A3425;
  --accent: #C85369;
  --gold: #F2A730;
  --paper: #FFF9ED;
  --line: #F1D9A8;
  --note: #1F7A99;
  --sub: #7A5038;
  --desk: #EFE3CC;
  --night-top: #1A1613;
  --night-mid: #29201A;
  --night-floor: #4D3421;
  /* 見出しは和欧混植：英字・数字は Montserrat、日本語は LINE Seed JP（D30） */
  --display: "Montserrat", "LINE Seed JP", sans-serif;
  --display-weight: 700;
  --body: "Zen Maru Gothic", sans-serif;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.6;
  counter-reset: slide;
}
main { display: grid; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 24px; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* 1枚の紙面 */
.slide { container-type: inline-size; counter-increment: slide; }
.page {
  --u: calc(100cqw / 960);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(66 * var(--u)) calc(60 * var(--u)) calc(40 * var(--u));
  background: var(--paper) url(img/bg.svg) center / cover;
  font-size: calc(15 * var(--u));
}
.foot {
  position: absolute;
  inset: auto calc(60 * var(--u)) calc(18 * var(--u));
  display: flex;
  justify-content: space-between;
  color: var(--sub);
  font-size: calc(9 * var(--u));
  letter-spacing: .04em;
}
.foot::after { content: counter(slide, decimal-leading-zero); }

/* 見出し：茶の文字＋金の線（02・03・18は線なし） */
h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: calc(30 * var(--u));
  line-height: 1.35;
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid var(--line);
}
h2.plain { border: 0; padding: 0; }
.kicker { color: var(--sub); font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: .05em; }
.accent { color: var(--accent); }
.note { color: var(--note); }
.sub { color: var(--sub); }
.b { font-weight: 700; }
.small { font-size: calc(12 * var(--u)); }

/* 横に読む行（04・06・13・16・17） */
.rows > li {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: calc(16 * var(--u));
  align-items: center;
  min-height: calc(var(--rh) * var(--u));
  border-bottom: 1px solid var(--line);
}
.rows .n { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(22 * var(--u)); }
.rows .t { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(20 * var(--u)); line-height: 1.35; }
.rows .t.bodyface { font-family: var(--body); font-weight: 700; font-size: calc(17 * var(--u)); }
.rows .d { color: var(--sub); }

/* 並んだ2〜4列は、縦の金の線1本で分ける */
.cols { display: grid; grid-template-columns: var(--tpl, repeat(var(--n, 2), minmax(0, 1fr))); flex: 1; min-height: 0; }
.cols > * { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: 0 calc(28 * var(--u)); }
.cols > :first-child { padding-left: 0; }
.cols > :last-child { padding-right: 0; }
.cols > * + * { border-left: 1px solid var(--line); }
.label { font-weight: 700; font-size: calc(17 * var(--u)); }
.price { color: var(--accent); font-weight: 700; font-size: calc(28 * var(--u)); }

/* 表（12・14）：塗りと縦線なし */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: calc(13 * var(--u)); line-height: 1.35; }
th, td { text-align: left; vertical-align: middle; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-bottom: 1px solid var(--line); }
th { font-size: calc(12 * var(--u)); font-weight: 700; border-bottom: 1.5px solid var(--ink); }
tr.total td { font-weight: 700; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 01 表紙：右上から差す夏の日差し（D21） */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0, rgb(255 255 255 / .6), rgb(242 167 48 / .1) 35%, rgb(255 249 237 / 0) 70%);
  pointer-events: none;
}
.cover > :not(.foot, .girl) { position: relative; }
.cover { justify-content: center; gap: calc(28 * var(--u)); padding-top: calc(48 * var(--u)); }
.cover .intro { font-size: calc(16 * var(--u)); font-weight: 700; }
.cover h1 { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(58 * var(--u)); line-height: 1.1; }
.cover .message { font-family: var(--display); font-weight: var(--display-weight); color: var(--accent); font-size: calc(34 * var(--u)); line-height: 1.35; }
.cover .promise { font-size: calc(18 * var(--u)); font-weight: 700; }
.cover .details { color: var(--sub); font-size: calc(13 * var(--u)); }
.cover .girl { position: absolute; left: calc(616 * var(--u)); top: calc(25 * var(--u)); width: calc(265 * var(--u)); }

/* 02・03：語りのページ */
.story { gap: calc(24 * var(--u)); padding-top: calc(60 * var(--u)); font-size: calc(16 * var(--u)); }
.story .big { font-weight: 700; font-size: calc(22 * var(--u)); }
.story .crew { margin-top: auto; color: var(--sub); font-size: calc(11 * var(--u)); }

/* 03：はじまりの言葉。仲間それぞれの言葉を、線で区切らず1行に1つずつ置く。
   左・中央・右に振り分け、中央のひと言（.spark）と勢いのある一言（.pop）だけ太く大きくする。
   見出しの書体は全角の「！」を持たないため使わない */
.voices-page { gap: calc(10 * var(--u)); padding-top: calc(56 * var(--u)); font-size: calc(16 * var(--u)); }
.voices-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: calc(24 * var(--u)); }
.voices-head .big { font-weight: 700; font-size: calc(22 * var(--u)); }
.voices { flex: 1; min-height: 0; display: grid; grid-auto-rows: 1fr; font-size: calc(15 * var(--u)); }
.voices li { display: flex; align-items: center; padding: 0 calc(20 * var(--u)); }
.voices .c { justify-content: center; }
.voices .r { justify-content: flex-end; }
.voices .spark { color: var(--accent); font-weight: 700; font-size: calc(21 * var(--u)); }
.voices .pop { font-weight: 700; font-size: calc(18 * var(--u)); }
.voices-page .crew { color: var(--sub); font-size: calc(11 * var(--u)); }

/* 05 */
.stat { font-size: calc(60 * var(--u)); font-weight: 700; color: var(--accent); line-height: 1.1; }
.quote { font-weight: 700; font-size: calc(21 * var(--u)); }
.source { font-size: calc(10 * var(--u)); color: var(--sub); }

/* 07 */
.drink img { height: calc(136 * var(--u)); width: auto; margin: calc(6 * var(--u)) auto; }

/* 09 */
.step .k { color: var(--sub); font-weight: 700; font-size: calc(13 * var(--u)); letter-spacing: .05em; }
.step .label { font-size: calc(18 * var(--u)); }
.step p:last-child { font-size: calc(14 * var(--u)); }

/* 10 配置図：区画は枠線なしの面、ブース境界だけ茶の破線 */
.booth { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border: 1.5px dashed var(--ink); font-size: calc(13 * var(--u)); font-weight: 700; text-align: center; }
.booth > div { padding: calc(10 * var(--u)); border-radius: calc(4 * var(--u)); }
.booth .wide { grid-column: 1 / -1; }
.z1 { background: #FFE3A3; } .z2 { background: #FFF3D6; } .z3 { background: #FADCAB; }
.z4 { background: #FBD0D5; } .z5 { background: #FFF0C9; margin: 0 calc(24 * var(--u)); }
.booth-caption { text-align: center; font-size: calc(12 * var(--u)); color: var(--sub); font-weight: 700; }

/* 11 */
.photo { display: grid; grid-template-columns: 493fr 347fr; flex: 1; min-height: 0; }
.photo figure { padding-right: calc(28 * var(--u)); border-right: 1px solid var(--line); display: grid; gap: calc(6 * var(--u)); align-content: start; }
.photo img { border-radius: calc(4 * var(--u)); }
.photo ul { display: grid; gap: calc(18 * var(--u)); padding-left: calc(28 * var(--u)); align-content: start; }

/* 14・15 */
.split { display: grid; grid-template-columns: var(--tpl, minmax(0, 584fr) minmax(0, 256fr)); flex: 1; min-height: 0; }
.split > :last-child { border-left: 1px solid var(--line); padding-left: calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.split > :first-child { padding-right: calc(20 * var(--u)); }
.equation li { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: calc(64 * var(--u)); border-bottom: 1px solid var(--line); }
.equation li:nth-child(2) { border-bottom: 1.5px solid var(--ink); }
.equation .v { font-weight: 700; font-size: calc(28 * var(--u)); font-variant-numeric: tabular-nums; }

/* 18：最後の乾杯だけ夜。上は暖かい黒、下は琥珀（明かりの届くテーブル）。クリームの文字、金は「やってみたい」だけ。電球5つと床の光（D20・D21・D23） */
.night { background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 55%, var(--night-floor) 100%); color: var(--paper); gap: calc(26 * var(--u)); padding-top: calc(40 * var(--u)); }
.night .kicker, .night .foot { color: var(--line); }
.night h2 { font-size: calc(28 * var(--u)); }
.night .headline { font-family: var(--display); font-weight: var(--display-weight); color: var(--gold); font-size: calc(40 * var(--u)); }
.night .hope { font-size: calc(19 * var(--u)); }
.night .given { font-weight: 700; font-size: calc(24 * var(--u)); margin-top: auto; }
.night .sign { width: calc(460 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid var(--line); font-size: calc(14 * var(--u)); }
.night .lights { position: absolute; left: calc(470 * var(--u)); top: 0; width: calc(490 * var(--u)); height: auto; overflow: visible; }
.night .floor { position: absolute; left: calc(544 * var(--u)); top: calc(420 * var(--u)); width: calc(380 * var(--u)); height: calc(110 * var(--u)); background: radial-gradient(closest-side, rgb(242 167 48 / .3), rgb(242 167 48 / 0)); }
.night .toasts { position: absolute; left: calc(536 * var(--u)); top: calc(338 * var(--u)); width: calc(396 * var(--u)); aspect-ratio: 396 / 136; }
.night > :is(p, h2):not(.foot) { position: relative; }
/* 18の乾杯：7と同じ絵を2枚（ビールが左・手前、ソフトドリンクが右・奥）。押すとグラスがぶつかり、しぶきが飛ぶ（D26・D29）。
   止まっているときは元の絵（.whole）を見せ、ぶつかる間（.clinking）だけ、同じ絵をグラスの境目で切り分けた .piece を動かす */
.night button.toast { position: absolute; top: 0; width: calc(204 * var(--u)); aspect-ratio: 3 / 2; padding: 0; border: 0; background: none; cursor: pointer; }
.night button.toast[data-drink="beer"] { left: 0; z-index: 2; }
.night button.toast[data-drink="soft"] { right: 0; z-index: 1; }
.night button.toast img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.night .glass { position: absolute; inset: 0; pointer-events: none; }
.night .glass .piece { visibility: hidden; }
.night .clinking .whole { visibility: hidden; }
.night .clinking .glass .piece { visibility: visible; }
/* 液体の中を昇る炭酸。位置と形（液体の多角形）は toast.js が絵ごとに決める */
.night .carbonation { position: absolute; overflow: hidden; pointer-events: none; }
.night .carbonation i { position: absolute; left: var(--x); bottom: -8%; width: var(--size); aspect-ratio: 1; border-radius: 50%; border: .6px solid rgb(255 249 220 / .8); background: radial-gradient(circle at 30% 25%, #fff9df 0 12%, transparent 45%); opacity: 0; animation: beer-rise var(--duration) linear var(--delay) infinite paused; }
.night .carbonating .carbonation i { animation-play-state: running; }
@keyframes beer-rise {
  0% { bottom: -8%; transform: translateX(0) scale(.55); opacity: 0; }
  18% { opacity: .65; }
  55% { transform: translateX(2px) scale(.8); opacity: .6; }
  100% { bottom: 100%; transform: translateX(-1px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .night .carbonation { display: none; }
}
.night .fizz { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 3; }
.night .fizz > * { position: absolute; display: block; max-width: none; }
:is(.night .fizz, .splashes, .drink-btn) .splash { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4C8 0 18%, #F7C35A 45%, #E08A1E 100%); }
:is(.night .fizz, .splashes, .drink-btn) .splash.soda { background: radial-gradient(circle at 35% 30%, #FFFFFF 0 18%, rgb(255 246 214 / .75) 45%, rgb(214 160 96 / .5) 100%); }
.night button.toast:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.night .lights:not(.live-on) .live, .night .lights.live-on .halo { display: none; }

/* スマートフォン：16:9をやめ、上から順に読む */
@media (max-width: 719px) {
  main { padding: 12px 0; gap: 12px; }
  .page { --u: 1.05px; aspect-ratio: auto; padding: 40px 16px 48px; }
  .foot { inset: auto 16px 16px; }
  .rows > li { grid-template-columns: auto 1fr; grid-template-areas: "n t" "n d"; row-gap: 2px; padding: 10px 0; }
  .rows > li:not(:has(.n)) { grid-template-columns: 1fr; grid-template-areas: "t" "d"; }
  .rows .n { grid-area: n; align-self: start; } .rows .t { grid-area: t; } .rows .d { grid-area: d; }
  .cols, .photo, .split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cols > *, .split > :first-child, .photo figure, .photo ul { padding: 0; border: 0; }
  .cols > * + *, .split > :last-child { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; }
  .cover .girl { position: static; width: 60%; margin: 0 auto; }
  .night .lights, .night .floor { display: none; }
  .night .toasts { position: relative; left: auto; top: auto; width: 100%; flex-shrink: 0; }
  .night button.toast { width: 52%; }
  .night .sign { width: 100%; }
  .voices :is(li, .c, .r) { justify-content: flex-start; padding: 10px 0; }
}

@media print {
  @page { size: 960px 540px; margin: 0; }
  body { background: none; }
  main { padding: 0; gap: 0; max-width: none; }
  .slide { break-after: page; }
  /* PDFは電球を静止画に戻す（動きの途中を写さない） */
  .night .lights .live { display: none !important; }
  .night .lights .halo { display: inline !important; }
  .night .lights .bulbs circle { fill: #FFE3A6 !important; stroke: #F2A730 !important; }
  .night .floor { opacity: 1 !important; }
  .night .fizz { display: none; }
  .night .carbonation { display: none; }
  .night .glass { display: none; }
  .night .whole { visibility: visible !important; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}