/* ===== CM ARCHIVE (/cm) ===== */

.cm-main {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
}

/* --- Hero --- */
/* .site-header は position:fixed のため、ヒーロー上部に実ヘッダー高さ分の逃げが要る */
.cm-hero {
  padding: calc(clamp(5.5rem, 11vw, 8rem) + env(safe-area-inset-top, 0px)) 1.25rem clamp(4.5rem, 9vw, 7rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cm-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;
}
.cm-hero-inner { position: relative; max-width: 940px; margin: 0 auto; }

.cm-hero-head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.cm-hero-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  font-weight: 700;
  color: var(--ember);
  margin-bottom: 0.5rem;
}
/* トップの .rich-foil .hero-title と同じ箔。background-size:220% + position:0% で
   濃い赤を主体にしないと、中央の淡い金が文字に乗って読みづらくなる。
   ホバーで position を流して「光が走る」演出も同じ（transition 1.2s）。
   ※ filter: drop-shadow は background-clip:text と併用すると iOS Safari で
   永続合成レイヤー化しスクロール時に残像化するため使わない（トップと同方針） */
.cm-hero-title {
  font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  margin: 0 0 0.7rem;
  background-image: var(--rg-foil);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  transition: background-position 1.2s ease;
}
.cm-hero-title:hover { background-position: 100% 50%; }
/* h1 内の日本語サブ行。親の箔グラデは -webkit-text-fill-color: transparent を
   継承させてしまい文字が消えるので、ここで必ず打ち消す。
   文字色は AA 準拠の --heat（--fire は 3.0:1 で未達なので使わない） */
.cm-hero-title-ja {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.78rem, 2.1vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-top: 0.5rem;
  color: var(--heat);
  -webkit-text-fill-color: var(--heat);
}

.cm-hero-tagline {
  font-size: clamp(0.84rem, 2.4vw, 0.95rem);
  color: var(--smoke);
  margin: 0;
}
.cm-hero-tagline b { color: var(--ember); font-weight: 700; }

/* --- Latest CM showcase --- */
.cm-latest {
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  box-shadow: 0 8px 30px rgba(var(--heat-rgb), 0.12);
}
.cm-latest-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.cm-latest-badge {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--foil-dark);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(var(--foil-dark-rgb), 0.3);
}
.cm-latest-cap {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--smoke);
}

/* 主動画を上に大きく、その下にサブを横並び */
.cm-latest-stage {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}

.cm-latest-main {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-3);
}
.cm-latest-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cm-latest-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(20, 12, 4, 0.82));
  pointer-events: none;
}
.cm-latest-title { color: #fff; font-weight: 900; font-size: clamp(0.9rem, 2.4vw, 1.1rem); margin: 0; }
.cm-latest-song { color: var(--gold-lite); font-size: 0.76rem; font-weight: 700; margin: 0.2rem 0 0; }

.cm-play-lg { width: 76px; height: 52px; border-radius: 12px; }
.cm-play-lg::after { border-width: 11px 0 11px 17px; }

.cm-latest-subs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}
.cm-latest-sub {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-3);
}
.cm-latest-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.9rem 0 0;
  text-align: center;
}


/* --- Body --- */
.cm-body {
  background: var(--section);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}

/* --- Filters --- */
.cm-filters {
  max-width: 1180px;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 2.5rem;
  justify-content: center;
  padding: 1.1rem 1.25rem;
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(var(--heat-rgb), 0.06);
}
.cm-filter-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.cm-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}
.cm-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cm-chip {
  position: relative;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--smoke);
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
/* 高さ34px のままタップ判定を 44px+ に */
.cm-chip::before { content: ""; position: absolute; inset: -6px 0; }
.cm-chip:hover { border-color: var(--gold2); transform: translateY(-1px); }
.cm-chip:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.cm-chip.is-on {
  background: var(--foil-dark);
  border-color: var(--foil-dark);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--foil-dark-rgb), 0.28);
}

/* --- Timeline --- */
.cm-timeline { max-width: 1180px; margin: 0 auto; }

.cm-year { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.cm-year[hidden] { display: none; }

.cm-year-marker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
/* 年号は箔にすると桁ごとに色が割れて読みづらいので単色。
   トップの .rich-foil .section-num と同じ判断・同じ --num-color（テーマ追従） */
.cm-year-num {
  font-family: "Bebas Neue", "Barlow Condensed", sans-serif;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--num-color);
  -webkit-text-fill-color: var(--num-color);
  flex-shrink: 0;
}
.cm-year-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--gold2) 0%, rgba(var(--gold2-rgb), 0.15) 70%, transparent 100%);
  border-radius: 2px;
}

/* --- Grid & cards --- */
.cm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1.1rem, 3vw, 1.75rem);
  /* カードを自然な高さにし、準備中カード（低）と確定動画カード（高）の差を出す */
  align-items: start;
}

.cm-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(var(--heat-rgb), 0.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold2-rgb), 0.6);
  box-shadow: 0 10px 26px rgba(var(--heat-rgb), 0.16);
}
.cm-card[hidden] { display: none; }

/* thumbnail */
.cm-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--paper-3);
  overflow: hidden;
  cursor: pointer;
}
.cm-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.cm-card:hover .cm-thumb-img { transform: scale(1.05); }

/* --- 画面内スライダー（カードの動画群を ‹ ›・ドット・スワイプで切替） --- */
.cm-player { position: relative; }
.cm-player-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-3);
}
.cm-player-track { display: flex; height: 100%; transition: transform .3s ease; }
.cm-player-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  cursor: pointer;
  /* ホバーズーム(scale 1.05)は画面外の次スライドの画像にも効く。各スライドが
     自分の領域でクリップしないと、拡大分が右端から覗いてしまう */
  overflow: hidden;
}
.cm-player-slide .cm-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cm-player-slide:hover .cm-play { background: var(--foil-dark); transform: scale(1.06); }
.cm-player-slide.is-making .cm-thumb-tag { background: rgba(154, 110, 26, 0.92); }

.cm-nav {
  position: absolute;
  top: calc(50% - 20px);
  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 .2s;
}
.cm-nav:hover { background: var(--foil-dark); }
.cm-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-nav-prev { left: 0.4rem; }
.cm-nav-next { right: 0.4rem; }
/* 見た目は 34px のまま、タップ判定だけ 44px+ に広げる（share-btn と同じ手法） */
.cm-nav::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }

/* 複数動画があることを一目で伝える（ドットだけでは気づかれにくい） */
.cm-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;
}

.cm-player-dots {
  position: absolute;
  left: 0; right: 0; bottom: 0.5rem;
  /* ヒット領域が隣と重ならない間隔を確保（下の ::before と対で調整） */
  display: flex; justify-content: center; gap: 1.1rem;
  z-index: 2;
}
.cm-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 .15s, background .15s;
}
/* 7px の点は押しづらいのでヒット領域を拡張。44px にすると隣と重なって誤タップに
   なるため、非重複で取れる最大（≒24x40）に留める。44px 相当の操作は矢印(50x50)が担う。 */
.cm-dot::before { content: ""; position: absolute; inset: -16px -8px; }
.cm-dot.is-on { background: #fff; transform: scale(1.2); }

.cm-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: rgba(20, 12, 4, 0.72);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.cm-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.cm-thumb:hover .cm-play { background: var(--foil-dark); transform: scale(1.08); }
.cm-play:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.cm-thumb-tag {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.26rem 0.6rem;
  border-radius: 999px;
  background: rgba(20, 12, 4, 0.74);
  color: #fff;
  pointer-events: none;
}
.cm-thumb-tag--muted { background: rgba(90, 72, 48, 0.9); }

/* 準備中カードは 16:9 をやめコンパクトな帯にし、確定動画カードを相対的に際立たせる */
.cm-thumb-empty,
.cm-thumb-link {
  aspect-ratio: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem;
  cursor: default;
  background:
    repeating-linear-gradient(135deg,
      var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
}
/* 外部サイトでしか見られないCM（YouTubeに無い）。埋め込まずリンクのみ */
.cm-thumb-link {
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.cm-thumb-link:hover { background: var(--paper-3); }
.cm-thumb-link:focus-visible { outline: 2px solid var(--ember); outline-offset: -3px; }
.cm-thumb-tag--link {
  position: static;
  left: auto; bottom: auto;
  background: var(--foil-dark);
}
/* 帯の中ではタグを絶対配置から通常フローへ戻し、アヒルと横並びにする（濃い pill は維持） */
.cm-thumb-empty .cm-thumb-tag--muted { position: static; left: auto; bottom: auto; }
.cm-thumb-duck { font-size: 1.5rem; opacity: 0.55; }

/* card body */
.cm-card-body {
  padding: 1rem 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cm-brand {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.2rem;
}
.cm-product {
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.cm-title {
  font-size: 0.82rem;
  color: var(--smoke);
  margin: 0 0 0.7rem;
  line-height: 1.5;
}

.cm-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0;
  margin: 0 0 0.85rem;
}
.cm-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.cm-badge--era {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.cm-badge--ref {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  border-style: dashed;
}

.cm-meta {
  margin: 0 0 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.cm-meta-row {
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.7;
}
.cm-meta-row dt {
  flex-shrink: 0;
  width: 2.6em;
  color: var(--muted);
  font-weight: 700;
}
.cm-meta-row dd { margin: 0; color: var(--smoke); }
.cm-song { font-weight: 700; color: var(--ember); }

.cm-note {
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  padding-top: 0.2rem;
}

/* --- Empty / disclaimer --- */
.cm-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 3rem 1rem;
}
.cm-disclaimer {
  max-width: 1180px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .cm-grid { grid-template-columns: 1fr; }
  .cm-filters { gap: 0.8rem 1.2rem; padding: 0.9rem 1rem; }
  .cm-filter-row { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-card, .cm-thumb-img, .cm-play, .cm-chip,
  .cm-player-track, .cm-nav, .cm-dot { transition: none; }
  .cm-card:hover { transform: none; }
  .cm-card:hover .cm-thumb-img { transform: none; }
}

/* ===== モーダルプレーヤー =====
   小さいカード内で再生するとYouTubeのコントロール（一時停止マーク等）が
   相対的に大きく目障りになるため、クリック時はここで大きく開く。 */
.cm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 余白は控えめに。プレーヤーを大きく取れるほど YouTube が高い画質を選ぶ */
  padding: clamp(0.75rem, 2vw, 1.5rem);
}
.cm-modal[hidden] { display: none; }
.cm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 4, 0.85);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
/* 16:9 が縦にも収まるよう、ビューポート高からも幅を上限する。
   YouTube はプレーヤーの実寸から画質を決める（小さいと720pに落とされる）ため、
   画面が許す限り大きく取って 1080p を選ばせる。 */
.cm-modal-inner {
  position: relative;
  width: min(1600px, 100%, calc((100vh - 5.5rem) * 16 / 9));
}
.cm-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.cm-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* プレーヤーの上に置くと縦を食って画質が落ちるので、画面右上に固定する */
.cm-modal-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff; font-size: 0.95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.cm-modal-close:hover { background: var(--foil-dark); }
.cm-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cm-modal-close::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.cm-modal-cap {
  margin: 0.8rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cream);
}
body.cm-modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .cm-modal-close { top: 0.6rem; right: 0.6rem; width: 34px; height: 34px; }
}

/* ===== 番外編：声だけ出演 =====
   映像には出ずCMソング/楽曲提供だけのCM。年代タイムラインとは分けて最下部に置く。
   本編と区別しつつ浮かないよう、見出しは箔を使わず控えめに。 */
.cm-bonus {
  max-width: 1180px;
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px dashed var(--border);
}
.cm-bonus-head {
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.cm-bonus-title {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 900;
  color: var(--foil-dark);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cm-bonus-title::before {
  content: "🎤";
  font-size: 0.95em;
}
.cm-bonus-lead {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--smoke);
  margin: 0;
}
.cm-bonus-lead b { color: var(--ember); font-weight: 700; }