/* ============================================================
   JAY.radio ｜ 2026年8月のラジオ
   スマホのラジオアプリを模した作り。
   ------------------------------------------------------------
   設計方針：
   - 画面幅は 560px で固定し、PCでも「アプリを開いている」見え方にする
   - 下部にタブバー、その上にミニプレーヤー。指の届く範囲に操作を集める
   - 色は白基調。各回の色みはアートワークの hue だけで作り分ける
   - 端末の設定に合わせてダークモードにも対応する
   ============================================================ */

:root{
  --bg:#ffffff;
  --bg-sub:#f6f6f8;        /* 沈める面（バナー・チップの下地） */
  --card:#ffffff;
  --ink:#14161a;           /* 主文字。真っ黒を少し外す */
  --ink-sub:#6a7078;       /* 補助文字 */
  --ink-faint:#9aa0a8;     /* さらに控えめ */
  --line:#e9eaee;
  --line-soft:#f1f2f5;
  --accent:#e8734a;        /* 朝焼けのオレンジ */
  --accent-ink:#c8552f;
  --grad:linear-gradient(135deg,#f7a35c 0%,#ef6d7e 100%); /* 中央ボタン・強調 */
  --shadow-sm:0 1px 2px rgba(20,22,26,.06);
  --shadow:0 2px 10px rgba(20,22,26,.08);
  --shadow-lg:0 -2px 16px rgba(20,22,26,.10);
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --appw:560px;            /* アプリの画面幅 */
  --tabh:58px;             /* タブバーの高さ */
  --minih:60px;            /* ミニプレーヤーの高さ */
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --safe:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e0e11;
    --bg-sub:#17171c;
    --card:#141419;
    --ink:#f0f1f3;
    --ink-sub:#a0a5ad;
    --ink-faint:#767c85;
    --line:#26262e;
    --line-soft:#1e1e25;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 10px rgba(0,0,0,.45);
    --shadow-lg:0 -2px 16px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{max-width:100%;display:block}
svg{width:100%;height:100%;fill:currentColor;display:block}

/* ============ 上部バー ============ */
.appbar{
  position:sticky; top:0; z-index:40;
  max-width:var(--appw); margin:0 auto;
  height:52px; padding:0 18px;
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
}
.brand-name{
  font-family:var(--serif);
  font-size:21px; font-weight:700; letter-spacing:.02em;
}
.appbar-right{display:flex;align-items:center;gap:12px}
.appbar-link{font-size:13px;color:var(--ink-sub)}
.appbar-badge{
  font-size:11px; letter-spacing:.08em; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:99px; padding:2px 9px;
}

/* ============ 本体 ============ */
.app-main{
  max-width:var(--appw);
  margin:0 auto;
  padding:6px 0 calc(var(--tabh) + var(--safe) + 26px);
}
body.has-mini .app-main{ padding-bottom:calc(var(--tabh) + var(--minih) + var(--safe) + 26px) }
body.is-navigating .app-main{ opacity:.5; transition:opacity .12s ease }

.sec{ padding:14px 18px 6px }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px }
.sec-title{ font-size:19px; font-weight:700; letter-spacing:.01em; margin:0 }
.sec-more{ font-size:13px; color:var(--ink-sub) }

.page-head{ padding:14px 18px 2px }
.page-title{ font-size:26px; font-weight:700; margin:0 0 2px }
.page-sub{ font-size:13px; color:var(--ink-sub); margin:0 }

.note{ font-size:12.5px; color:var(--ink-faint); margin:12px 0 0; line-height:1.7 }
.muted-note{ font-size:13px; color:var(--ink-faint); margin:6px 2px }

/* ============ アートワーク ============ */
/* 各回の色は --h（色相）だけで作り分ける。画像を用意しなくても成立させる */
.art{
  position:relative; overflow:hidden;
  border-radius:var(--r-sm);
  background:
    radial-gradient(115% 115% at 18% 12%, hsl(var(--h,30) 88% 74%) 0%, transparent 62%),
    linear-gradient(152deg, hsl(var(--h,30) 72% 60%) 0%, hsl(calc(var(--h,30) + 24) 58% 38%) 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.art::after{ /* 光の帯。単色グラデにわずかな奥行きを足す */
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,255,255,.22) 0%, transparent 46%);
}
.art-n{
  position:relative; z-index:1;
  font-family:var(--serif); font-weight:600;
  font-size:26px; line-height:1;
  opacity:.92; text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.art-brand{
  position:absolute; z-index:1; left:0; right:0; bottom:12px;
  text-align:center; font-family:var(--serif);
  font-size:12px; letter-spacing:.14em; opacity:.72;
}
.art.is-locked{ filter:saturate(.35) brightness(.94) }
.art-lock{ width:22px; height:22px; position:relative; z-index:1; opacity:.9 }
.art-lock.lg{ width:38px; height:38px }

/* ============ 上部バナー（横スクロール） ============ */
.banners{ padding:6px 0 2px }
.banner-track{
  display:flex; gap:12px;
  padding:6px 18px 10px;
  /* スナップ位置に余白を含めないと、左のpaddingがスクロールに食われてカードが
     画面の縁にくっついて見える（実測で left:0 になっていた） */
  scroll-padding-left:18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.banner-track::-webkit-scrollbar{ display:none }
.banner{
  scroll-snap-align:start; flex:none;
  width:min(84%, 420px);
  border-radius:var(--r-lg);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-sm);
}
.banner-main{
  background:var(--grad);
  color:#fff;
}
.banner-eyebrow{ font-size:11.5px; letter-spacing:.14em; opacity:.9; margin:0 0 8px }
.banner-title{
  font-family:var(--serif); font-size:27px; font-weight:600;
  margin:0 0 10px; line-height:1.35; letter-spacing:.02em;
}
.banner-lead{ font-size:13px; line-height:1.75; margin:0; opacity:.95 }
.banner-meta{
  font-size:12px; margin:14px 0 0; display:flex; align-items:center; gap:7px;
  opacity:.95;
}
.banner-meta .dot{
  width:7px;height:7px;border-radius:99px;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.28);
}
.banner-next{
  background:var(--bg-sub);
  border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
}
.banner-next .banner-eyebrow{ color:var(--accent-ink); opacity:1; font-weight:600 }
.banner-next-title{
  font-size:17px; font-weight:700; margin:0 0 8px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.banner-next-meta{ font-size:12.5px; color:var(--ink-sub); margin:0 }

/* ============ 最新回（大カード） ============ */
.feature{ display:flex; gap:14px; align-items:flex-start }
.feature-art{
  width:112px; height:112px; border-radius:var(--r);
}
.feature-art .art-n{ font-size:32px }
.feature-art .art-brand{ bottom:9px; font-size:10px }
.feature-body{ flex:1; min-width:0 }
.feature-date{ font-size:12px; color:var(--ink-sub); margin:1px 0 4px }
.feature-title{ font-size:17px; font-weight:700; line-height:1.5; margin:0 0 4px }
.feature-lead{ font-size:13px; color:var(--ink-sub); margin:0 0 12px; line-height:1.6 }

.btn-play{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--bg);
  border-radius:99px; padding:9px 18px 9px 14px;
  font-size:13.5px; font-weight:600;
  transition:transform .12s ease, opacity .12s ease;
}
.btn-play:active{ transform:scale(.97) }
.btn-play svg{ width:17px; height:17px }
.btn-play .i-pause{ display:none }
.btn-play.is-playing .i-play{ display:none }
.btn-play.is-playing .i-pause{ display:block }

/* ============ 横スクロールのカード ============ */
.hcards{
  display:flex; gap:13px;
  overflow-x:auto; scrollbar-width:none;
  margin:0 -18px; padding:2px 18px 8px;
  scroll-snap-type:x proximity;
}
.hcards::-webkit-scrollbar{ display:none }
.hcard{ flex:none; width:132px; scroll-snap-align:start }
.hcard-art{
  width:132px; height:132px; border-radius:var(--r);
  margin-bottom:8px;
}
.hcard-art .art-n{ font-size:28px }
.hcard-play{
  position:absolute; z-index:2; right:8px; bottom:8px;
  width:32px; height:32px; border-radius:99px;
  background:rgba(255,255,255,.94); color:#14161a;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.22);
}
.hcard-play svg{ width:15px; height:15px; margin-left:1px }
.hcard-play .i-pause{ display:none; margin-left:0 }
.hcard-play.is-playing .i-play{ display:none }
.hcard-play.is-playing .i-pause{ display:block }
.hcard-title{
  display:block; font-size:13px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hcard-meta{ font-size:11.5px; color:var(--ink-faint); margin:3px 0 0 }

/* ============ 一覧の行 ============ */
.rows{ display:flex; flex-direction:column }
.row{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.row:last-child{ border-bottom:0 }
.row-art{ width:66px; height:66px; border-radius:var(--r-sm) }
.row-art .art-n{ font-size:20px }
.row-body{ flex:1; min-width:0; padding-top:1px }
.row-title{
  font-size:14.5px; font-weight:600; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.row.is-locked .row-title{ color:var(--ink-faint) }
.row-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:7px;
}
.row-date{ font-size:11.5px; color:var(--ink-faint) }

.play-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-sub); border:1px solid var(--line);
  border-radius:99px; padding:4px 12px 4px 9px;
  font-size:12px; color:var(--ink-sub);
  transition:transform .12s ease;
}
.play-chip:active{ transform:scale(.96) }
.play-chip svg{ width:13px; height:13px }
.play-chip .i-pause{ display:none }
.play-chip.is-playing{ background:var(--ink); border-color:var(--ink); color:var(--bg) }
.play-chip.is-playing .i-play{ display:none }
.play-chip.is-playing .i-pause{ display:block }
.chip-note{ font-size:11.5px; color:var(--ink-faint) }
.chip-preview{
  font-size:10.5px; color:var(--accent-ink);
  border:1px solid currentColor; border-radius:99px; padding:0 7px;
}

/* ============ 番組についてのカード ============ */
.about-card{
  display:flex; align-items:center; gap:13px;
  background:var(--bg-sub); border-radius:var(--r);
  padding:13px 15px;
}
.about-photo{ width:44px; height:44px; border-radius:99px; object-fit:cover; flex:none }
.about-body{ flex:1; display:flex; flex-direction:column }
.about-name{ font-size:13.5px; font-weight:600 }
.about-text{ font-size:12px; color:var(--ink-sub) }
.about-arrow{ color:var(--ink-faint); font-size:20px; line-height:1 }

/* ============ エピソード詳細 ============ */
.ep{ padding:8px 18px 0 }
.ep-art{
  width:100%; aspect-ratio:1/1; max-width:340px; margin:6px auto 20px;
  border-radius:var(--r-lg);
}
.ep-art .art-n{ font-size:72px }
.ep-art .art-brand{ bottom:20px; font-size:13px; letter-spacing:.16em }
.ep-head{ margin-bottom:20px }
.ep-date{ font-size:12px; color:var(--ink-sub); margin:0 0 6px }
.ep-title{ font-size:22px; font-weight:700; line-height:1.5; margin:0 0 8px; letter-spacing:.01em }
.ep-lead{ font-size:14px; color:var(--ink-sub); margin:0; line-height:1.7 }
.ep-tags{ margin:12px 0 0; display:flex; gap:7px; flex-wrap:wrap }
.tag{
  font-size:11.5px; color:var(--ink-sub);
  background:var(--bg-sub); border-radius:99px; padding:3px 11px;
}

/* --- プレーヤー --- */
.player{
  background:var(--bg-sub);
  border-radius:var(--r-lg);
  padding:18px 18px 14px;
  margin-bottom:22px;
}
.seek{ margin-bottom:6px }
.seek-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer;
}
.seek-range::-webkit-slider-runnable-track{
  height:4px; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 14%, transparent);
}
.seek-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:99px; background:var(--ink);
  margin-top:-4.5px; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.seek-range::-moz-range-track{
  height:4px; border-radius:99px;
  background:color-mix(in srgb, var(--ink) 14%, transparent);
}
.seek-range::-moz-range-thumb{
  width:13px;height:13px;border:0;border-radius:99px;background:var(--ink);
}
.seek-times{
  display:flex; justify-content:space-between;
  font-size:11.5px; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.controls{
  display:flex; align-items:center; justify-content:center; gap:30px;
  margin:6px 0 4px;
}
.ctrl{
  position:relative; width:38px; height:38px; color:var(--ink-sub);
  display:flex; align-items:center; justify-content:center;
}
.ctrl svg{ width:26px; height:26px }
.ctrl-num{ /* 円形矢印アイコンの中心に秒数を置く（矢印の頭が上にある分だけ下げる） */
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding-top:4px;
  font-size:8.5px; font-weight:700; letter-spacing:.01em;
}
.ctrl-main{
  width:62px; height:62px; border-radius:99px;
  background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.ctrl-main:active{ transform:scale(.95) }
.ctrl-main svg{ width:26px; height:26px; margin-left:2px }
.ctrl-main .i-pause{ display:none; margin-left:0 }
.player.is-playing .ctrl-main .i-play{ display:none }
.player.is-playing .ctrl-main .i-pause{ display:block }

.controls-sub{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; min-height:26px;
}
.chip-btn{
  font-size:12px; color:var(--ink-sub);
  border:1px solid var(--line); border-radius:99px; padding:3px 12px;
  background:var(--card);
}
.resume-note{ font-size:11.5px; color:var(--ink-faint) }

/* --- リアクション --- */
.reactions{ margin-bottom:24px }
.react-lead{ font-size:12.5px; color:var(--ink-faint); margin:0 0 10px; text-align:center }
.react-row{ display:flex; gap:9px; justify-content:center }
.react{
  flex:1; max-width:112px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--bg-sub); border:1px solid transparent;
  border-radius:var(--r); padding:11px 6px 9px;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.react:active{ transform:scale(.96) }
.react.is-on{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
}
.react-emoji{ font-size:22px; line-height:1.25 }
.react-label{ font-size:11px; color:var(--ink-sub) }
.react-count{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums }
.react.pop .react-emoji{ animation:pop .4s ease }
@keyframes pop{
  0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)}
}

.ep-desc{ margin-bottom:26px }
.ep-desc p{ font-size:14px; line-height:1.9; color:var(--ink-sub); margin:0 0 14px }

.locked-box{
  background:var(--bg-sub); border-radius:var(--r-lg);
  padding:26px 20px; text-align:center; margin-bottom:24px;
}
.locked-title{ font-size:14.5px; font-weight:700; margin:0 0 6px }
.locked-lead{ font-size:13px; color:var(--ink-sub); margin:0 }

.ep-nav{
  display:flex; gap:10px; border-top:1px solid var(--line-soft);
  padding:16px 0 6px;
}
.ep-nav-item{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.ep-nav-item.right{ text-align:right; align-items:flex-end }
.ep-nav-item.is-empty{ pointer-events:none }
.ep-nav-dir{ font-size:11.5px; color:var(--ink-faint) }
.ep-nav-title{
  font-size:13px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ============ 番組について ============ */
.hosts{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px }
.host{ display:flex; align-items:center; gap:14px }
.host-photo{ width:62px; height:62px; border-radius:99px; object-fit:cover; flex:none }
/* 写真がない話し手は頭文字の丸で表す */
.host-initial{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-sub); color:var(--ink-sub);
  font-family:var(--serif); font-size:23px;
}
.host-name{ font-size:15px; font-weight:700; margin:0 }
.host-role{ font-size:12px; color:var(--ink-sub); margin:0 }
.prose p{ font-size:14px; line-height:1.9; color:var(--ink-sub); margin:0 0 14px }

.sched{ list-style:none; margin:0; padding:0 }
.sched-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:13px; color:var(--ink-faint);
}
.sched-item.is-open{ color:var(--ink) }
.sched-date{ width:64px; flex:none; font-variant-numeric:tabular-nums }
.sched-wd{ font-size:11px; color:var(--ink-faint); margin-left:2px }
.sched-title{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sched-state{ font-size:11px; color:var(--ink-faint); flex:none }
.sched-item.is-open .sched-state{ color:var(--accent-ink) }

.howto{ list-style:none; margin:0; padding:0; counter-reset:h }
.howto li{
  position:relative; padding:0 0 16px 30px; counter-increment:h;
}
.howto li::before{
  content:counter(h);
  position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:99px;
  background:var(--bg-sub); color:var(--ink-sub);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.howto-t{ display:block; font-size:14px; font-weight:600 }
.howto-b{ display:block; font-size:13px; color:var(--ink-sub); line-height:1.7 }

/* ============ マイ ============ */
.stats{ display:flex; gap:10px; margin-bottom:14px }
.stat{
  flex:1; background:var(--bg-sub); border-radius:var(--r);
  padding:14px 10px; text-align:center;
}
.stat-num{
  display:block; font-family:var(--serif);
  font-size:26px; font-weight:600; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.stat-label{ font-size:11px; color:var(--ink-sub) }
.progress{
  height:6px; border-radius:99px; background:var(--bg-sub); overflow:hidden;
}
.progress i{ display:block; height:100%; background:var(--grad); border-radius:99px; transition:width .4s ease }

.empty{ text-align:center; padding:40px 20px }
.empty-title{ font-family:var(--serif); font-size:19px; margin:0 0 8px }
.empty-lead{ font-size:13px; color:var(--ink-sub); margin:0 }

/* ============ ミニプレーヤー ============ */
.miniplayer[hidden]{ display:none } /* display:flex より後に書くと hidden が効かないので明示 */
.miniplayer{
  position:fixed; z-index:45;
  left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabh) + var(--safe));
  width:100%; max-width:var(--appw);
  height:var(--minih);
  background:color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line-soft);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:11px;
  padding:0 14px;
}
.mini-progress{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}
.mini-progress i{ display:block; height:100%; width:0; background:var(--accent) }
.mini-main{ flex:1; min-width:0; display:flex; align-items:center; gap:11px }
.mini-art{
  width:40px; height:40px; border-radius:8px; flex:none;
  position:relative; overflow:hidden; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(115% 115% at 18% 12%, hsl(var(--h,30) 88% 74%) 0%, transparent 62%),
    linear-gradient(152deg, hsl(var(--h,30) 72% 60%) 0%, hsl(calc(var(--h,30) + 24) 58% 38%) 100%);
  font-family:var(--serif); font-size:15px;
}
.mini-text{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center }
.mini-title{
  font-size:13px; font-weight:600; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mini-sub{ font-size:11px; color:var(--ink-faint) }
.mini-btn{
  width:38px; height:38px; border-radius:99px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-sub); color:var(--ink);
}
.mini-btn svg{ width:17px; height:17px; margin-left:2px }
.mini-btn .i-pause{ display:none; margin-left:0 }
body.is-playing .mini-btn .i-play{ display:none }
body.is-playing .mini-btn .i-pause{ display:block }

/* ============ 下部タブバー ============ */
.tabbar{
  position:fixed; z-index:50; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; max-width:var(--appw);
  height:calc(var(--tabh) + var(--safe));
  padding-bottom:var(--safe);
  background:color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:1fr 1fr 78px 1fr 1fr;
  align-items:center;
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-faint); font-size:9.5px; letter-spacing:.02em;
  padding-top:2px;
}
.tab svg{ width:23px; height:23px }
.tab.is-on{ color:var(--ink) }
.tab-play{
  justify-self:center;
  width:54px; height:54px; border-radius:99px;
  margin-top:-20px;
  background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(232,115,74,.42);
  border:3px solid var(--bg);
  transition:transform .12s ease;
}
.tab-play:active{ transform:scale(.94) }
.tab-play svg{ width:22px; height:22px; margin-left:2px }
.tab-play .i-pause{ display:none; margin-left:0 }
body.is-playing .tab-play .i-play{ display:none }
body.is-playing .tab-play .i-pause{ display:block }

/* ============ 入口（合言葉） ============ */
/* 入口も本編と同じ白基調。朝焼けはごく淡い気配としてだけ残す */
.gate-body{
  margin:0; min-height:100svh;
  background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.gate-body::before{
  content:""; position:fixed; inset:0;
  background:
    radial-gradient(92% 58% at 50% 106%, rgba(239,109,126,.13) 0%, transparent 64%),
    radial-gradient(72% 48% at 16% -2%, rgba(247,163,92,.11) 0%, transparent 62%);
  pointer-events:none;
}
.gate{
  position:relative; z-index:1;
  width:100%; max-width:360px; padding:40px 28px 48px; text-align:center;
}
.gate-mark{ margin-bottom:26px }
.gate-wave{ display:flex; align-items:flex-end; justify-content:center; gap:5px; height:34px }
.gate-wave i{
  width:4px; border-radius:99px; background:linear-gradient(180deg,#f7a35c,#ef6d7e);
  animation:wave 1.5s ease-in-out infinite;
}
.gate-wave i:nth-child(1){ height:14px; animation-delay:0s }
.gate-wave i:nth-child(2){ height:26px; animation-delay:.15s }
.gate-wave i:nth-child(3){ height:34px; animation-delay:.3s }
.gate-wave i:nth-child(4){ height:22px; animation-delay:.45s }
.gate-wave i:nth-child(5){ height:12px; animation-delay:.6s }
@keyframes wave{
  0%,100%{ transform:scaleY(.5); opacity:.6 }
  50%{ transform:scaleY(1); opacity:1 }
}
.gate-brand{ font-family:var(--serif); font-size:30px; font-weight:700; margin:0 0 34px; letter-spacing:.03em }
.gate-form{ display:flex; flex-direction:column; gap:9px; text-align:left }
.gate-label{ font-size:12px; color:var(--ink-sub); letter-spacing:.04em }
.gate-input{
  width:100%; padding:13px 15px;
  background:var(--bg-sub); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  font-size:16px; /* iOSで拡大されないよう16px */
  outline:none;
}
.gate-input:focus{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:var(--bg) }
.gate-error{ font-size:12.5px; color:#c8442f; margin:2px 0 0 }
.gate-btn{
  margin-top:8px; padding:13px;
  background:var(--grad); color:#fff;
  border-radius:12px; font-size:15px; font-weight:700;
  box-shadow:0 4px 16px rgba(232,115,74,.34);
  transition:transform .12s ease;
}
.gate-btn:active{ transform:scale(.98) }
.gate-note{ font-size:11.5px; color:var(--ink-faint); margin:26px 0 0; text-align:center }

/* ============ 管理画面 ============ */
.admin-body{ background:var(--bg-sub); margin:0 }
.admin-wrap{ max-width:900px; margin:0 auto; padding:26px 18px 60px }
.admin-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.admin-head h1{ font-size:19px; margin:0 }
.admin-actions{ display:flex; align-items:center; gap:12px }
.admin-link{ font-size:13px; color:var(--ink-sub); text-decoration:underline }
.admin-btn{
  font-size:13px; border:1px solid var(--line); border-radius:8px;
  padding:5px 12px; background:var(--card);
}
.admin-total{ font-size:13px; color:var(--ink-sub); margin:16px 0 10px }
.admin-table{
  width:100%; border-collapse:collapse; background:var(--card);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm);
  font-size:13px;
}
.admin-table th,.admin-table td{
  padding:9px 10px; text-align:left; border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.admin-table th{ background:var(--bg-sub); font-size:12px; color:var(--ink-sub); font-weight:600 }
.admin-title{ max-width:280px; overflow:hidden; text-overflow:ellipsis }
.admin-title a{ text-decoration:underline }
.admin-note{ font-size:12px; color:var(--ink-faint); margin-top:14px; line-height:1.8 }

/* ============ お知らせ（予告のモーダル） ============ */
/* 第1回が開くまでの間だけ、入ってきた人に予告を出す。閉じたら二度と出ない */
.modal[hidden]{ display:none }
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.modal-back{
  position:absolute; inset:0;
  background:rgba(10,11,14,.46);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal-card{
  position:relative; z-index:1;
  width:100%; max-width:336px;
  background:var(--card); border-radius:24px;
  padding:26px 24px 20px; text-align:center;
  box-shadow:0 18px 50px rgba(20,22,26,.3);
  animation:modal-in .34s cubic-bezier(.2,.9,.3,1);
}
@keyframes modal-in{
  from{ opacity:0; transform:translateY(14px) scale(.97) }
  to{ opacity:1; transform:none }
}
.modal-art{ width:96px; height:96px; border-radius:var(--r); margin:0 auto 18px }
.modal-eyebrow{ font-size:11.5px; letter-spacing:.12em; color:var(--accent-ink); margin:0 0 8px }
.modal-title{ font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.6; margin:0 0 10px }
.modal-lead{ font-size:13px; color:var(--ink-sub); margin:0 0 20px; line-height:1.75 }
.modal-play{ width:100%; justify-content:center; padding:13px 18px }
.modal-later{
  display:block; width:100%; margin-top:10px; padding:8px;
  font-size:12.5px; color:var(--ink-faint);
}
body.modal-open{ overflow:hidden }

/* 公開前のタイトルはぼかす（収録するまで変わりうるため）。公開されると自動で外れる */
.is-blur{
  filter:blur(5px);
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
}

/* 予告のアートワークは数字ではなく「予告」の2文字なので小さめに */
.art-n.sm{ font-size:13px; letter-spacing:.1em; font-weight:600 }
.feature-art .art-n.sm{ font-size:16px }
.modal-art .art-n.sm{ font-size:15px }
.ep-art .art-n.sm{ font-size:32px }

/* ============ 仕上げ ============ */
@media (min-width:600px){
  /* PCでは「アプリの画面」を中央に置き、周囲を静かに沈める */
  body.app{ background:var(--bg-sub) }
  .appbar,.app-main{ background:var(--bg) }
  .app-main{ min-height:calc(100svh - 52px); box-shadow:0 0 0 1px var(--line-soft) }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}