/* ===== SETLIST ARCHIVE (/setlist) ===== */

.sl-main {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
  /* 保険。何かがはみ出してもページ自体は横に動かさない。
     body ではなく main に掛けるのは、曲名列の position:sticky を壊さないため */
  overflow-x: hidden;
}

/* --- Hero --- */
/* .site-header は position:fixed のため実ヘッダー高さ分の逃げが要る（/cm と同じ） */
/* 下余白は控えめに。ヒーローの中身が Spotify ボタンまでで終わるため、
   /cm と同じ値にすると（波の食い込みを差し引いても）間延びして見える */
.sl-hero {
  padding: calc(clamp(5.5rem, 11vw, 8rem) + env(safe-area-inset-top, 0px)) 1.25rem clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 50% 0%, rgba(var(--gold2-rgb), 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 85% 90%, rgba(var(--gold-lite-rgb), 0.3) 0%, transparent 65%);
  pointer-events: none;
}
.sl-hero-inner { position: relative; max-width: 780px; margin: 0 auto; }

.sl-hero-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  font-weight: 700;
  color: var(--ember);
  margin-bottom: 0.5rem;
}
/* 箔は background-size:220% + position:0% が必須（中央の淡い金が文字に乗ると白飛びする）。
   drop-shadow は background-clip:text と併用すると iOS Safari で残像化するため使わない */
.sl-hero-title {
  font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
  font-size: clamp(2.8rem, 9vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  background: var(--rg-foil);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.2s ease;
}
.sl-hero-title:hover { background-position: 100% 50%; }
/* 親の -webkit-text-fill-color: transparent が継承されるので必ず打ち消す */
.sl-hero-title-ja {
  display: block;
  /* 「セットリスト」の途中で改行させない（狭い幅では語のまとまりで折り返す） */
  word-break: auto-phrase;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.82rem, 2.6vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 0.6rem;
}

.sl-tour-name {
  display: block;
  /* h1 の箔グラデ（background-clip: text）は -webkit-text-fill-color が子に継承されるので、
     打ち消さないと文字が透明になって消える（.sl-hero-title-ja と同じ対処） */
  -webkit-text-fill-color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: normal;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  /* このページの実質的な主題なので、英字ロゴの下でも埋もれない大きさにする */
  font-size: clamp(1.2rem, 4.2vw, 1.75rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: balance;
}
.sl-tour-meta {
  margin-top: 0.5rem;
  font-size: clamp(0.78rem, 2.4vw, 0.88rem);
  color: var(--smoke);
  line-height: 1.7;
}

/* --- カバー率（データの穴を隠さないための表示） --- */
.sl-coverage {
  margin: clamp(1.6rem, 4vw, 2.2rem) auto 0;
  max-width: 420px;
  padding: clamp(1rem, 3vw, 1.4rem) 1.4rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.sl-coverage-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2rem, 7vw, 2.8rem);
  line-height: 1;
  color: var(--foil-dark);
  font-variant-numeric: tabular-nums;
}
.sl-coverage-num b { font-weight: 400; }
.sl-coverage-num span { font-size: 0.6em; color: var(--muted); }
.sl-coverage-label {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--smoke);
}
.sl-coverage-bar {
  margin-top: 0.8rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--heat-rgb), 0.15);
  overflow: hidden;
}
/* 幅はテンプレートの nonce 付き <style> で上書きする。
   style 属性は CSP（style-src に 'unsafe-inline' なし）でブロックされるため使えない。
   既定を 0 にしておき、万一その指定が届かなくても「満杯」ではなく「空」に倒れるようにする */
.sl-coverage-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold2), var(--foil-dark));
}

/* --- 本文の器 --- */
/* 上余白は .cm-body（56px）に寄せる。波線の食い込み 60px は共通なので、
   ここが揃っていないとページ間で見出しの始まる位置がずれる */
.sl-body {
  position: relative;
  background: var(--section-alt);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}
.sl-body > section { max-width: 940px; margin: 0 auto; }
.sl-body > section + section { margin-top: clamp(1.5rem, 3vw, 2.2rem); }

/* 先頭セクションの見出しだけ上余白を削る。.section-heading は上下に
   clamp(2rem,4vw,4rem) の padding を持つが、その真上はヒーローの余白なので
   二重に空いて見える（2つ目以降の見出しは区切りとして必要なので触らない） */
.sl-body > section:first-of-type > .section-heading { padding-top: 0; }

/* 表から読み取れる要点を先に置く。読み方の説明より前。
   枠はトップの「Pick up Movie おすすめコメント」（.pickup-rec）と同じ見た目に揃える。
   あちらは幅 92%/760px で中央寄せだが、ここはセクション幅いっぱいに広げる */
.sl-finding-card {
  /* 見出しのアンダーライン（.section-heading::after は bottom:-1px）に枠が被るので下げる */
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
  background-color: var(--paper-base);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.72  0 0 0 0 0.55  0 0 0 0 0.18  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/></svg>"),
    linear-gradient(135deg, var(--paper-1) 0%, var(--paper-2) 60%, var(--paper-3) 100%);
  background-size: 150px 150px, 100% 100%;
  background-blend-mode: multiply, normal;
  border: 2px solid rgba(var(--fire-rgb), 0.55);
  border-radius: 14px;
  padding: 1.05rem 1.3rem 1.15rem;
  box-shadow: 0 3px 12px rgba(var(--fire-rgb), 0.18);
}
.sl-finding-lbl {
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 0.9rem;
  color: var(--heat);
  margin-bottom: 0.5rem;
}
.sl-finding {
  font-size: clamp(0.86rem, 2.7vw, 0.98rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.9;
  /* ch は半角基準。62ch は日本語だと約31字で折り返してしまう */
  max-width: 46em;
  text-wrap: pretty;
}

.sl-lead {
  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
  color: var(--smoke);
  line-height: 1.9;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
  /* ch は半角基準なので、日本語だと 60ch ≒ 30字で折り返してしまい行が余る。
     em（全角1文字ぶん）で指定する。46em は「ファンによる非公式の……順に載せています。」
     の1文（44字）がPCで折り返さずに収まる幅 */
  max-width: 46em;
  text-wrap: pretty;
}

/* --- セットリスト・マトリクス（曲 × 公演） --- */
.sl-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 横だけスクロールさせ、1列目(曲名)を固定する。
   縦は制限しない：高さを絞ると表が独立したスクロール領域になり、
   スマホで表の上をなぞったときにページが揺れて操作しづらくなるため
   （縦固定は一度試して取りやめた）。日付ヘッダーは縦スクロールで流れて構わない */
.sl-matrix-wrap {
  overflow-x: auto;
  /* 端まで振り切った勢いがページ本体に伝わるのを止める（iOS 対策） */
  overscroll-behavior-x: contain;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper-1);
  -webkit-overflow-scrolling: touch;
}
.sl-matrix-wrap:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.sl-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.sl-matrix th,
.sl-matrix td {
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.74rem, 2.2vw, 0.84rem);
}
.sl-matrix tbody tr:last-child th,
.sl-matrix tbody tr:last-child td { border-bottom: none; }

/* 曲名列は横スクロールしても残す（数字だけ流れると何の曲か分からなくなる） */
.sl-mx-song {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper-1);
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 0.6rem 0.9rem;
  min-width: 11rem;
  max-width: 16rem;
  border-right: 1px solid var(--border);
}
/* ヘッダー行の曲名セル。流れてくる日付列より前面に置く。
   後段の .sl-matrix thead th より詳細度を高くしないと z-index を奪われる */
.sl-matrix thead th.sl-mx-song {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--paper-3);
  color: var(--smoke);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* 重なり順は 通常セル < 曲名列(2) < ヘッダーの曲名セル(3) */
.sl-matrix thead th {
  background: var(--paper-3);
  padding: 0.5rem 0.4rem;
  white-space: nowrap;
  vertical-align: bottom;
}
.sl-mx-show { text-align: center; min-width: 3.4rem; }
.sl-mx-show a {
  display: block;
  color: var(--foil-dark);
  text-decoration: none;
}
.sl-mx-show a:hover { text-decoration: underline; }
.sl-mx-date { display: block; font-weight: 900; font-size: 0.84rem; }
.sl-mx-city { display: block; font-size: 0.66rem; color: var(--smoke); font-weight: 400; }
.sl-mx-conf {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ember);
}
.sl-mx-conf--verified { color: var(--heat); }
/* セトリを確認できていない列。曲名や確定の列より弱く見せる */
.sl-mx-conf--partial,
.sl-mx-conf--none { color: var(--smoke); font-weight: 400; }

.sl-matrix tbody td {
  text-align: center;
  padding: 0.55rem 0.4rem;
  color: var(--muted);
}
/* color は `.sl-matrix tbody td`（詳細度 0,1,2）に負けるので、必ず td を含めて書く。
   クラスだけで書くと --muted のまま描かれ、●が 3.59:1 で AA を満たさない */
.sl-mx-on {
  background: rgba(var(--gold2-rgb), 0.16);
  font-weight: 700;
}
.sl-matrix tbody td.sl-mx-on { color: var(--ink); }
.sl-matrix tbody td.sl-mx-unordered { color: var(--foil-dark); }
.sl-mx-off { background: transparent; }
/* 「演奏なし（空欄）」と「不明」を見た目で必ず分ける。
   同じ空欄にすると、セトリ未収集の公演で全曲を「演奏なし」と主張することになる */
.sl-mx-unknown {
  background: repeating-linear-gradient(
    -45deg,
    rgba(var(--gold2-rgb), 0.14) 0 3px,
    transparent 3px 6px
  );
  font-weight: 700;
}
.sl-matrix tbody td.sl-mx-unknown { color: var(--smoke); }
/* 凡例まるごと nowrap にすると、20文字のかたまりが折り返せず next 行へ丸ごと送られ、
   前の行末に大きな余白ができる。切れて困るのは「? は」の間だけなのでそこだけ繋ぐ */
.sl-mx-legend { white-space: normal; }
.sl-mx-nb { white-space: nowrap; }
.sl-mx-unknown-mark {
  display: inline-block;
  min-width: 1.1em;
  padding: 0 0.15em;
  text-align: center;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(var(--gold2-rgb), 0.14) 0 3px,
    transparent 3px 6px
  );
  color: var(--smoke);
}

/* width:1% + nowrap で内容ぴったりに縮め、余った幅は公演列へ配分させる
   （公演数が少ないうちに、この列の手前へ余白が溜まるのを防ぐ） */
.sl-mx-count {
  width: 1%;
  text-align: right;
  padding: 0.55rem 0.9rem;
  white-space: nowrap;
  color: var(--smoke);
  border-left: 1px solid var(--border);
}
.sl-mx-count b { color: var(--foil-dark); font-size: 1.1em; }
.sl-mx-extra { color: var(--muted); font-size: 0.72em; margin-left: 0.15rem; }

.sl-matrix-note {
  margin-top: 0.9rem;
  font-size: 0.74rem;
  color: var(--smoke);
  line-height: 1.9;
  max-width: 68ch;
  text-wrap: pretty;
}

/* --- 公演カード（アコーディオン） --- */
.sl-shows-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.4rem);
}
.sl-lead--tight { margin-bottom: 0; }
.sl-toggle-all {
  border: 1px solid var(--border);
  background: var(--paper-1);
  color: var(--foil-dark);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
}
/* タッチターゲットを 44px に（見た目は変えずに当たり判定だけ広げる） */
.sl-toggle-all::before { content: ""; position: absolute; inset: -8px; }
.sl-toggle-all:hover { background: var(--paper-3); }
.sl-toggle-all:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.sl-shows {
  display: grid;
  gap: clamp(0.6rem, 2vw, 0.9rem);
}
.sl-show {
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(0.85rem, 2.6vw, 1.2rem);
}
.sl-show.is-empty { background: var(--paper-2); }
.sl-show[open] { background: var(--paper-1); }

.sl-show-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}
summary.sl-show-head {
  cursor: pointer;
  list-style: none;
  padding-right: 1.6rem;
  position: relative;
}
summary.sl-show-head::-webkit-details-marker { display: none; }
/* 開閉マーカーは自前で用意する（既定の三角は位置と色を揃えられないため） */
summary.sl-show-head::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--foil-dark);
  border-bottom: 2px solid var(--foil-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.sl-show[open] summary.sl-show-head::after { transform: translateY(-30%) rotate(-135deg); }
summary.sl-show-head:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.sl-show-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--smoke);
  font-variant-numeric: tabular-nums;
}
/* 日付は日本語表記（曜日つき）なので、英字専用の Bebas Neue は使わない */
.sl-show-day {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.92rem, 2.9vw, 1.05rem);
  font-weight: 900;
  color: var(--foil-dark);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sl-show-note {
  margin-left: 0.5rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.68rem;
  color: var(--smoke);
  letter-spacing: 0;
}
.sl-show-venue {
  font-size: clamp(0.82rem, 2.6vw, 0.94rem);
  font-weight: 700;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.sl-show-area {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

.sl-show-empty {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--smoke);
}
.sl-order-warning {
  margin-top: 0.8rem;
  padding: 0.55rem 0.8rem;
  background: rgba(var(--heat-rgb), 0.08);
  border-radius: 8px;
  font-size: 0.76rem;
  color: var(--smoke);
  line-height: 1.7;
}

/* 1公演20曲超が普通なので、幅があるときは段組みにして縦の長さを抑える。
   columns は上から下→次の列に流れるので、曲順の読み順は保たれる */
.sl-songs {
  margin-top: 0.9rem;
  padding-left: 1.6rem;
  columns: 2;
  column-gap: 2rem;
}
.sl-songs li {
  font-size: clamp(0.82rem, 2.5vw, 0.92rem);
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 0.3rem;
  break-inside: avoid;
}
/* アンコールのように曲数が少ないリストは、段組みにすると
   「18,19 / 20」のように不自然に割れるので1段のまま出す */
.sl-songs.is-short { columns: 1; }

@media (max-width: 620px) {
  .sl-songs { columns: 1; }
}
/* 曲順が不明なものは番号を出さない（順序を主張しないため） */
.sl-songs.is-unordered { list-style: none; padding-left: 0; }
.sl-songs.is-unordered li::before {
  content: "・";
  color: var(--gold2);
  margin-right: 0.2rem;
}
.sl-song-note {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--smoke);
}

.sl-encore-label {
  margin-top: 1rem;
  margin-bottom: -0.2rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--foil-dark);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sl-encore-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- 確度バッジ --- */
.sl-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sl-badge--verified {
  background: rgba(var(--heat-rgb), 0.14);
  color: var(--heat);
  border-color: rgba(var(--heat-rgb), 0.3);
}
.sl-badge--reported {
  background: rgba(var(--gold2-rgb), 0.16);
  color: var(--ember);
  border-color: rgba(var(--gold2-rgb), 0.35);
}
.sl-badge--partial {
  background: rgba(var(--foil-dark-rgb), 0.1);
  color: var(--foil-dark);
  border-color: rgba(var(--foil-dark-rgb), 0.25);
}
.sl-badge--none {
  background: transparent;
  color: var(--smoke);
  border-color: var(--border);
}

/* --- Spotify リンク --- */
.sl-hero-actions { margin-top: clamp(1rem, 2.5vw, 1.4rem); }
.sl-show-actions {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}
.sl-show-actions-note { font-size: 0.7rem; color: var(--muted); }
/* --muted はこのサイズだと AA を満たさないので --smoke を使う */
.sl-hero-actions-note {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  color: var(--smoke);
}

.sl-spotify-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
/* 出所は隠さない。公式でないものを公式に見せないための表示（CM の official と同じ方針） */
.sl-spotify-official {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sl-spotify-by {
  font-size: 0.7rem;
  color: var(--muted);
}

.sl-spotify {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #1db954;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease;
}
.sl-spotify svg { width: 1.05rem; height: 1.05rem; flex: none; }
.sl-spotify:hover { background: #1ed760; }
.sl-spotify:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* タッチターゲットを 44px 確保（サイトの他ボタンと同じ手法） */
.sl-spotify::before { content: ""; position: absolute; inset: -6px; }

@media (prefers-reduced-motion: reduce) {
  .sl-spotify { transition: none; }
}

/* --- データについて --- */
.sl-about {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(1.2rem, 3.5vw, 1.8rem);
}
.sl-about-title {
  font-size: clamp(0.94rem, 2.8vw, 1.05rem);
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.sl-about-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1rem;
  font-size: clamp(0.76rem, 2.4vw, 0.84rem);
  line-height: 1.8;
}
.sl-about-list dt { font-weight: 700; color: var(--foil-dark); white-space: nowrap; }
.sl-about-list dd { color: var(--smoke); }

.sl-disclaimer {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--smoke);
  line-height: 1.9;
}
.sl-disclaimer a { color: var(--ember); }

@media (max-width: 560px) {
  .sl-about-list { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .sl-about-list dd { margin-bottom: 0.5rem; }
  .sl-show-head { gap: 0.35rem 0.7rem; }
  .sl-first { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero-title { transition: none; }
}


/* --- ツアー一覧（/setlist） --- */
.sl-backlink {
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
}
.sl-backlink a { color: var(--ember); text-decoration: none; }
.sl-backlink a:hover { text-decoration: underline; }

.sl-tours {
  display: grid;
  gap: clamp(0.7rem, 2vw, 1rem);
}
.sl-tour-card {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 1.4rem);
  padding: clamp(1rem, 3vw, 1.4rem);
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sl-tour-card:hover {
  background: var(--paper-2);
  border-color: rgba(var(--gold2-rgb), 0.5);
}
.sl-tour-card:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* 年号は箔にせず単色（箔だと桁ごとに色割れする＝section-num と同じ判断） */
.sl-tour-year {
  flex: none;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1;
  color: var(--num-color);
  font-variant-numeric: tabular-nums;
}
.sl-tour-body { flex: 1 1 auto; min-width: 0; display: block; }
.sl-tour-title {
  display: block;
  font-size: clamp(0.94rem, 2.9vw, 1.1rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.5;
  text-wrap: pretty;
}
.sl-tour-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: clamp(0.74rem, 2.3vw, 0.82rem);
  color: var(--smoke);
  line-height: 1.7;
}
.sl-tour-cov { display: block; margin-top: 0.5rem; font-size: 0.74rem; }
.sl-tour-cov-done { color: var(--heat); font-weight: 700; }
.sl-tour-cov-part { color: var(--foil-dark); font-weight: 700; }
.sl-tour-cov-none { color: var(--muted); }
.sl-tour-cov .sl-coverage-bar {
  display: block;
  max-width: 220px;
  margin-top: 0.35rem;
}
.sl-tour-go {
  flex: none;
  font-size: 1.4rem;
  color: var(--gold2);
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sl-tour-card { transition: none; }
}

/* ── PICK UP ──────────────────────────────────────────────────
   主役はセトリなので、記事は先頭に置きつつ高さを抑える。
   画像つきの大カードは1件だけ、残りは文字カードにする（画像は公式素材のみ） */
.sl-pickup-grid {
  display: grid;
  gap: clamp(0.7rem, 2vw, 1rem);
}
/* このファイルの他のブレークポイント（620/560px）とは別の値。2カラムに割ると
   左のカードが窮屈になるため、成立する最小幅として 820px を取っている */
@media (min-width: 820px) {
  .sl-pickup-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
  }
  /* 動画が無いツアーは1カラム。読み幅として広がりすぎないよう上限を付ける */
  .sl-pickup-grid.is-articles-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46em;
  }
}

.sl-pickup-main {
  display: block;
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sl-pickup-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(var(--heat-rgb), 0.16);
}
.sl-pickup-main:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.sl-pickup-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--paper-3);
}
.sl-pickup-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-pickup-main-body { display: block; padding: clamp(0.8rem, 2.4vw, 1.1rem); }

.sl-pickup-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-size: 0.72rem;
  color: var(--smoke);
}
.sl-pickup-source { font-weight: 700; color: var(--foil-dark); }
.sl-pickup-official {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(var(--gold2-rgb), 0.18);
  color: var(--foil-dark);
  font-size: 0.66rem;
  font-weight: 700;
}
.sl-pickup-kind {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--paper-3);
  font-size: 0.66rem;
}
.sl-pickup-date { color: var(--smoke); font-variant-numeric: tabular-nums; }

.sl-pickup-title {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(0.98rem, 3vw, 1.12rem);
  font-weight: 900;
  line-height: 1.45;
  color: var(--ink);
}
.sl-pickup-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.45rem;
  font-size: clamp(0.8rem, 2.5vw, 0.88rem);
  line-height: 1.7;
  color: var(--smoke);
}
.sl-pickup-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--foil-dark);
}

.sl-pickup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.sl-pickup-list a {
  display: block;
  padding: 0.7rem 0.85rem;
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease;
}
.sl-pickup-list a:hover { background: var(--paper-2); }
.sl-pickup-list a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.sl-pickup-sub-title {
  display: block;
  margin-top: 0.3rem;
  font-size: clamp(0.85rem, 2.6vw, 0.92rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

/* 動画のときだけ出す再生マーク。カード内では再生せず、
   クリックで yt-modal を開く（/cm と同じ作り） */
.sl-pickup-thumb { position: relative; }
.sl-pickup-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(48px, 12%, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(12, 8, 4, 0.62);
  transition: background 0.18s ease, transform 0.18s ease;
}
.sl-pickup-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.85em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(0.9rem, 2.4vw, 1.1rem);
}
.sl-pickup-main:hover .sl-pickup-play {
  background: rgba(var(--heat-rgb), 0.9);
  transform: translate(-50%, -50%) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .sl-pickup-main, .sl-pickup-play, .sl-show-links a { transition: none; }
  .sl-pickup-main:hover { transform: none; }
  .sl-pickup-main:hover .sl-pickup-play { transform: translate(-50%, -50%); }
}

/* 公演カードの中の「この公演の映像・記事」。畳まれていても件数が分かるよう、
   見出し側には sl-badge--media / --doc を出している */
.sl-badge--media,
.sl-badge--doc {
  background: rgba(var(--gold2-rgb), 0.14);
  color: var(--foil-dark);
  border-color: rgba(var(--gold2-rgb), 0.3);
}
/* 公演の見出しは 日付・会場・曲数・確度 で既に詰まっている。狭幅では
   バッジ全体を小さくして、行数が増えないようにする */
@media (max-width: 560px) {
  .sl-show-head .sl-badge {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
    letter-spacing: 0;
  }
}

.sl-show-links {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
}
.sl-show-links-title {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--smoke);
  letter-spacing: 0.04em;
}
.sl-show-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.sl-show-links a {
  display: block;
  position: relative;
  padding: 0.6rem 0.75rem;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease;
}
.sl-show-links a:hover { background: var(--paper-3); }
.sl-show-links a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
/* サムネがある行は横並び。指で押せる大きさを稼ぐ */
.sl-show-links a.has-thumb {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem 0.55rem 0.55rem;
}
.sl-show-link-thumb {
  position: relative;
  flex: 0 0 auto;
  width: clamp(96px, 28%, 136px);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-3);
}
.sl-show-link-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sl-show-link-body { min-width: 0; }
.sl-show-link-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(12, 8, 4, 0.62);
  transition: background 0.18s ease;
}
.sl-show-links a:hover .sl-show-link-play { background: rgba(var(--heat-rgb), 0.9); }
.sl-show-link-play::after {
  content: "";
  position: absolute;
  left: 56%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.28rem 0 0.28rem 0.44rem;
  border-color: transparent transparent transparent #fff;
}
.sl-show-link-title {
  display: block;
  font-size: clamp(0.82rem, 2.6vw, 0.9rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.sl-show-links .sl-pickup-meta { margin-top: 0.25rem; }

/* マトリクスを読んでいる間だけ共有ボタンを引っ込める（setlist.js がクラスを付ける）。
   モバイルは共有ボタンが左下固定で、横スクロールする表の曲名列と必ず重なるため。
   PC は共有ボタンが右にあり衝突しないので、ここでは何もしない */
@media (max-width: 640px) {
  .hero-share.is-behind-table {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 日本語の折り返しを文節単位にする（Chrome/Edge の word-break: auto-phrase）。
   「裏が取れたものから順に載せ／ています。」のように語の途中で切れるのを防ぐ。
   未対応ブラウザ（Safari 等）では従来どおりの折り返しに戻るだけで実害はない */
.sl-lead,
.sl-finding,
.sl-tour-sub,
.sl-tour-meta,
.sl-pickup-excerpt,
.sl-hero-actions-note,
.sl-matrix-note {
  word-break: auto-phrase;
}

/* 「全10公演を確認済み」でも、曲順が分からない公演があるなら言い切らない */
.sl-tour-cov-note {
  color: var(--smoke);
  font-weight: 400;
}

/* --- PICK UP の映像スライダー（左カラム） -------------------------------
   /cm の .cm-player と同じ作り。値も揃えてあるので、共通部品にするならこの2つ。
   違いは、下に「表示中の映像の情報」を出して JS で切り替えるところ */
.sl-player {
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.sl-player-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.sl-player-track { display: flex; height: 100%; transition: transform 0.3s ease; }
.sl-player-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  cursor: pointer;
  /* ホバーズームが隣のスライドにはみ出さないよう、各スライドで切る */
  overflow: hidden;
}
.sl-player-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.sl-player-slide:hover img { transform: scale(1.05); }

.sl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(20, 12, 4, 0.5);
  color: #fff; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 0.2s;
}
.sl-nav:hover { background: var(--foil-dark); }
.sl-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sl-nav-prev { left: 0.4rem; }
.sl-nav-next { right: 0.4rem; }
/* 見た目は 34px のまま、タップ判定だけ 44px+ にする */
.sl-nav::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }

.sl-count-tag {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(20, 12, 4, 0.7);
  color: #fff;
  pointer-events: none;
}

.sl-player-dots {
  position: absolute;
  left: 0; right: 0; bottom: 0.5rem;
  display: flex; justify-content: center; gap: 1.1rem;
  z-index: 2;
}
.sl-dot {
  position: relative;
  width: 7px; height: 7px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  cursor: pointer; padding: 0;
  transition: transform 0.15s, background 0.15s;
}
/* 7px は押しづらいのでヒット領域を広げる。44px にすると隣と重なるので非重複の最大に留める */
.sl-dot::before { content: ""; position: absolute; inset: -16px -8px; }
.sl-dot.is-on { background: #fff; transform: scale(1.2); }

.sl-player-caption { padding: clamp(0.7rem, 2vw, 0.95rem); }
.sl-player-caption .sl-pickup-title {
  margin: 0.3rem 0 0;
  font-size: clamp(0.86rem, 2.4vw, 0.98rem);
  font-weight: 700;
  line-height: 1.5;
}
.sl-player-caption .sl-pickup-excerpt { margin: 0.35rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .sl-player-track, .sl-nav, .sl-dot, .sl-player-slide img { transition: none; }
  .sl-player-slide:hover img { transform: none; }
}

/* サムネつきの記事カード（TikTok など、埋め込み再生しない動画）。
   縦動画は 720x1280 なので、横長の枠に入れると上下が切れる。小さめの縦枠で出す */
.sl-pickup-has-thumb > a {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.sl-pickup-sub-thumb {
  position: relative;
  flex: 0 0 74px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 16 / 9;
}
.sl-pickup-sub-thumb.is-portrait { aspect-ratio: 3 / 4; flex-basis: 56px; }
.sl-pickup-sub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-pickup-sub-body { min-width: 0; }
.sl-pickup-play--sm { transform: scale(0.62); }

/* マトリクスの説明文は、PC では表と左右の端を揃える。
   狭い幅で折り返すと、すぐ下にある表と行頭・行末が食い違って落ち着かない。
   （/setlist の「このページについて」は読み幅を優先するのでここでは触らない） */
@media (min-width: 820px) {
  .sl-matrix-section .sl-finding,
  .sl-shows-section .sl-finding,
  .sl-matrix-section .sl-lead { max-width: none; }
}


/* ── OTHER TOURS（ページ末尾の回遊スライダー） ────────────────
   viewport 自体を横スクロールにしてあるので、JS が無くても・タッチでも動く。
   ‹ › とドットは JS が付ける上乗せ。PCは2枚、モバイルは1枚が収まる幅 */
/* ‹ ●●● › をスライダーの下に一列で置く。映像スライダー用の重ね置きは解除する */
.sl-carousel-ctrl {
  /* JS が動いたときだけ出す。動かないときは viewport の横スクロールで読める */
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1.1rem);
  margin-top: clamp(0.8rem, 2vw, 1.1rem);
}
.sl-others.is-ready .sl-carousel-ctrl { display: flex; }
/* static にすると、タップ判定用の .sl-nav::before（position:absolute; inset:-8px）が
   .sl-body を基準に広がり、ページ全体を覆う透明な膜になってスクロールもタップも死ぬ。
   relative のまま top/left/right だけ打ち消すこと */
.sl-others .sl-nav {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
}

.sl-carousel { position: relative; }
.sl-carousel-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sl-carousel-viewport::-webkit-scrollbar { display: none; }
.sl-carousel-viewport:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.sl-carousel-track {
  display: flex;
  gap: clamp(0.7rem, 2vw, 1rem);
}
.sl-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* .sl-tour-card は align-items:center の flex。カードごとに高さが変わると
     送るたびに下の余白が動くので、行の高さを揃える */
  align-items: stretch;
}
.sl-carousel-slide .sl-tour-body { align-self: center; }
.sl-carousel-slide .sl-tour-year,
.sl-carousel-slide .sl-tour-go { align-self: center; }
@media (min-width: 720px) {
  /* 2枚 + すき間1つ */
  .sl-carousel-slide { flex-basis: calc((100% - clamp(0.7rem, 2vw, 1rem)) / 2); }
}

.sl-tdots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.sl-tdot {
  position: relative;
  width: 7px; height: 7px;
  border: 0; border-radius: 50%;
  background: rgba(var(--fire-rgb), 0.3);
  cursor: pointer; padding: 0;
  transition: transform 0.15s, background 0.15s;
}
.sl-tdot::before { content: ""; position: absolute; inset: -14px -7px; }
.sl-tdot.is-on { background: var(--foil-dark); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .sl-tdot { transition: none; }
}

/* 狭い幅では、行を整える指定の代償が大きい。1行あたり最大 87px＝約6文字ぶんが
   右に余って、行末がガタガタになる。PCは1行が長いのでそのままのほうが読みやすい。
   word-break: auto-phrase は Chrome/Edge だけ、text-wrap: pretty は WebKit だと
   段落全体を組み直すので、どちらも切らないと端末によって直らない */
@media (max-width: 719px) {
  .sl-finding,
  .sl-lead,
  .sl-matrix-note,
  .sl-pickup-excerpt {
    word-break: normal;
    text-wrap: wrap;
  }
}