/************************************
** 再生リスト一覧モーダル（サイト共通）
** 計画: .kilo/plans/20261103-creation-modal-layout-and-playlist-modal-plan.md §3-3（G）
** スコープ: .page-id-13（サイト概要）/ フッター（全ページ）の発火先。creation 側（.creation-index-*）とは
**   依存しない自完結クラス。変数（--color-*）は作成ページの modal（css/page-creation.css）と同じ
**   サイトトークン＋フォールバック値を流用する。
** 文字サイズ: design-policy §13（方針A・creation modal と同一）— メタ14px/500、説明15.2px、
**   タイトル16.8px、モーダルタイトル18px、CTA15.2px。12px未満0、<14px かつ <700 も0（14px/700のCTAは維持）
************************************/

html.playlist-modal-open,
html.playlist-modal-open body {
  overflow: hidden;
}

.playlist-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(46, 52, 64, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.playlist-modal-mask.is-open {
  opacity: 1;
  visibility: visible;
}

.playlist-modal-dialog {
  position: fixed;
  z-index: 10051;
  left: 50%;
  top: 50%;
  width: min(960px, calc(100vw - 40px));
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(20, 25, 35, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.98);
  /* visibility はフェードアウト完了後に隠す（開くときは is-open 側で遅延0＝即 visible。focus() を効かせるため） */
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), visibility 0s linear 0.3s;
}

.playlist-modal-dialog.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.35, 1), visibility 0s linear 0s;
}

/* ヘッダーは grid（2026-11-03 R2/R3/R5）。並びは「タイトル → 件数 → CTA（>768）→ ✕」。
   R2: 左上のソース名チップ（YouTube）は廃止（CTA と重複）。タイトルが見出しとして左端に立つ。
   R5: ✕ は常に最終列＝右上。≤768 でも件数が2段目に回るだけで ✕ の位置を譲らない。 */
.playlist-modal-head {
  display: grid;
  grid-template-columns: minmax(0, auto) auto 1fr auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 1.2em;
  border-bottom: 1px solid var(--color-border, #DCE6EE);
  background: #ffffff;
  border-radius: 10px 10px 0 0;
}

.playlist-modal-title {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-text, #2E3440);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 件数チップ（2026-11-03 R3）: トップ「最近の活動」ギャラリーの .top-activity-modal__count と同表現。
   空色の角丸＋空色の濃い文字。12px/700・枠線なし（背景と角丸を枠として扱う）。 */
.playlist-modal-count {
  grid-column: 2;
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--color-sky-deep, #4A6F88);
  background: rgba(79, 126, 153, 0.12);
  border-radius: 4px;
  padding: 0.3em 0.6em;
  white-space: nowrap;
}

.playlist-modal-count[hidden] {
  display: none;
}

/* ヘッダーCTA: フッターCTAの縮小版（14px/700・<14pxかつ<700不可のため太字維持）。
   20261103 追加修正1: 基底 .playlist-modal-cta が後段・同特異度のため上書きが効かず
   フッターCTA同寸で描画されていた（creation modal の page-creation.css と同一の不具合）。
   2クラスで特異度を上げ独立指定に（順序非依存）。縦幅は ✕（2.2em×16px=35.2px）と同一。 */
.playlist-modal-cta.playlist-modal-head-cta {
  grid-column: 3;
  justify-self: end;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  height: 35.2px; /* ✕ と同一 */
  border-radius: 6px;
  padding: 0 0.9em;
}

.playlist-modal-head-cta[hidden] {
  display: none;
}

.playlist-modal-close {
  grid-column: 4;
  justify-self: end;
  width: 2.2em;
  height: 2.2em;
  border-radius: 8px;
  border: 1px solid var(--color-border, #DCE6EE);
  background: #ffffff;
  color: #5A6472;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.playlist-modal-close:hover {
  background: #EDEFF1;
}

.playlist-modal-close:focus-visible,
.playlist-modal-cta:focus-visible,
.playlist-modal-card:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

/* 20261103 追加修正2: 最近の活動ギャラリービューと同じ「背景空色＋白カード」。
   sticky フェードの張り付き範囲 = content box のため padding は 0、外周余白は lead/grid の margin が担う */
.playlist-modal-body {
  padding: 0;
  background: var(--color-bg-light, #F3FAFD);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.playlist-modal-body::-webkit-scrollbar {
  width: 7px;
}

.playlist-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.playlist-modal-body::-webkit-scrollbar-thumb {
  background: rgba(95, 86, 142, 0.35);
  border-radius: 4px;
}

/* --- 本体の上下フェード（20261103 追加修正2: creation modal / top-activity-modal と同一表現） ---
   上端＝::before（sticky・28px）、下端＝::after（sticky・28px）。padding 0 により sticky 偽要素が
   content box に一致。状態は js/playlist-modal.js が .playlist-modal-dialog に
   is-top/is-mid/is-bottom/is-noscroll を付与（js/lib/activity-fade.js 共通）。
   既定（no-js）は is-top 相当（上消・下表）。cards は hover transform 時 z-index:0 扱いのため z-index:1。 */
.playlist-modal-body::before {
  content: "";
  display: block; /* __body はブロック容器。sticky 擬似要素の height 無効化回避（top-activity-modal 同注記） */
  position: sticky;
  /* 2026-11-03 R4: sticky の描画位置がデバイスピクセルへ丸められ、スクロールポート上端に
     未フェードのサブピクセル帯（実測 0.1〜1px）が残るため、ボックスを上方へ張り出させる。
     はみ出し分は overflow のクリップ境界（＝本文の上端）で切られるため、
     「クリップ境界＝フェード上端」になり、丸めに依存した隙間が出ない。
     2026-11-03 試験書追加時: viewport resize 後の sticky 再ピン留めが約1フレーム遅れ、
     最大 2px 下の位置に取り付くことを channel モーダルで再現（未フェード 1px 白線が
     カード上端として検出）。張り出しを 2px に増やし、遅延幅を吸収する。 */
  top: -2px;
  height: 31px;
  margin-bottom: -31px;
  z-index: 1;
  background: linear-gradient(to bottom, var(--color-bg-light, #F3FAFD), rgba(243, 250, 253, 0));
  pointer-events: none;
  opacity: 0;
}
.playlist-modal-body::after {
  content: "";
  display: block;
  position: sticky;
  /* 下端も同様に 2px 下へ張り出し、クリップ境界をフェード下端にする（R4・上端と対称） */
  bottom: -2px;
  height: 31px;
  margin-top: -31px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(243, 250, 253, 0), var(--color-bg-light, #F3FAFD));
  pointer-events: none;
  opacity: 1;
}
/* 先頭: 上消・下表 / 中間: 上下表 / 最下端: 上表・下消 / 非スクロール: 両消 */
.playlist-modal-dialog.is-top .playlist-modal-body::before { opacity: 0; }
.playlist-modal-dialog.is-mid .playlist-modal-body::before,
.playlist-modal-dialog.is-bottom .playlist-modal-body::before { opacity: 1; }
.playlist-modal-dialog.is-top .playlist-modal-body::after { opacity: 1; }
.playlist-modal-dialog.is-bottom .playlist-modal-body::after,
.playlist-modal-dialog.is-noscroll .playlist-modal-body::after { opacity: 0; }
.playlist-modal-dialog.is-noscroll .playlist-modal-body::before { opacity: 0; }

/* 説明文エリア: 再生リストの説明文（config 管理・plan 20261103 §3-3 案1）は lead として表示。
   20261103 追加修正2: 空色背景の上では sky-tint のまま埋もれるため白カードへ（creation modal lead と同一） */
.playlist-modal-lead {
  margin: 1em 1.6em 0;
  padding: 0.65em 1em;
  background: #ffffff;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  font-size: 15.2px;
  line-height: 1.7;
  color: #4A5462;
}

.playlist-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0.8em 1.6em 0.9em;
}

/* 2026-11-03: 再生リスト（フッター「初めての方」/ サイト概要「過程の記録」）は
   カードに説明文が無く、PCで2段の下に3段目が覗いて詰まって見えていた。
   ダイアログの本文高さから2段分を逆算し、行間とカード高を可変にする。
   - 2段＋行間 = 本文の表示域（グリッド上端から下端）に一致
   - 3段目は必ず本文下端の外へ出る
   - 画面が低いときはサムネイル比を少しワイドにして、2段を維持する
   基準は PC（≥1024px）。≤1023 とモバイルは従来の余白のまま。 */
@media (min-width: 1024px) {
  .playlist-modal-grid {
    /* 本文の表示域 = ダイアログ上限(86vh/900) - ヘッダー65 - リード/上下余白 - グリッド下余白16.2 - 遊び */
    --playlist-available: calc(min(86vh, 900px) - 65px - 96px);
    --playlist-card-h: min(350px, calc((var(--playlist-available) - 24px) / 2));
    --playlist-row-gap: max(24px, calc(var(--playlist-available) - (2 * var(--playlist-card-h))));
    row-gap: var(--playlist-row-gap);
  }

  .playlist-modal-card {
    min-height: var(--playlist-card-h);
  }

  .playlist-modal-card-text {
    justify-content: center;
  }
}

/* グリッドカード: 創作紹介モーダルの youtube カテゴリ（PoP & Tears）と同じ見た目 */
.playlist-modal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  background: #ffffff;
  text-decoration: none;
  color: var(--color-text, #2E3440);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* YouTube は <button>（その場再生）になるため、ブラウザ既定を打ち消す */
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.playlist-modal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(90, 140, 170, 0.18);
  border-color: var(--color-fuji, #BBB7DA);
}

/* 2026-11-03 E案: 2行分をPCで収めるため、サムネイルを16:9→2:1へ。 */
.playlist-modal-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  background: #EDEFF1;
  overflow: hidden;
}

.playlist-modal-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playlist-modal-card-thumb.is-empty {
  background: linear-gradient(135deg, #F3FAFD 0%, #F6F3FB 100%);
}

/* 縦が短いPC（ブラウザUI込みで約800px前後）でも2段を維持する。
   サムネイルを2:1→2.4:1に少しワイドにし、カード高を圧縮する。 */
@media (min-width: 1024px) and (max-height: 883px) {
  .playlist-modal-card-thumb {
    aspect-ratio: 2.4 / 1;
  }
}

/* 1366×768 など、さらに縦が短いPCでも2段を維持する。 */
@media (min-width: 1024px) and (max-height: 800px) {
  .playlist-modal-card-thumb {
    aspect-ratio: 2.6 / 1;
  }
}

.playlist-modal-card-text {
  padding: 0.7em 0.9em;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.12em;
}

/* 2026-11-03 E案: タイトル行数で説明文の開始位置が動かないよう、
   モバイル／タブレットは2行分の高さを確保する（1行タイトルでも2行分）。
   PC（≥1024）は1行固定にして、さらに詰める。 */
.playlist-modal-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: 16.8px;
  font-weight: 700;
  color: var(--color-main, #5F568E);
  line-height: 1.45;
}

@media (min-width: 1024px) {
  .playlist-modal-card-title {
    -webkit-line-clamp: 1;
    min-height: 1.45em;
  }
}

/* 日付アイブロウ: タイトルの上・14px/500・字間0.08em・sky-deep（creation modal と同一） */
.playlist-modal-card-date {
  display: block;
  height: 1.4em;
  line-height: 1.4;
  margin: 0 0 0.2em;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-sky-deep, #4A6F88);
}

.playlist-modal-card-date.is-empty {
  visibility: hidden;
}

/* 2026-11-03 E案: 概要は1行に固定。カード高の最大値を安定させる。 */
.playlist-modal-card-desc {
  font-size: 15.2px;
  color: #4A5462;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* カード導線（2026-11-03 E案）: 本文右下の「開く ›」行を廃止し、サムネイル右上の
   半透明ラベルへ移設。カード全体がリンクのため、ラベルは装飾（aria-hidden）とする。 */
.playlist-modal-card-chev {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(46, 52, 64, 0.62);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.playlist-modal-card:hover .playlist-modal-card-chev,
.playlist-modal-card:focus-visible .playlist-modal-card-chev {
  background: rgba(46, 52, 64, 0.82);
}

/* 再生ボタン（2026-11-03 追加）: YouTube カードの「開く ›」を置き換える。
   位置・大きさ・配色・hover はトップ「最近の活動」ギャラリーの
   .top-activity-card__play（サムネイル中央の44px円形）と同一表現に揃える。
   カード全体がボタンのため、アイコンは装飾（aria-hidden）。 */
.playlist-modal-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(46, 52, 64, 0.38);
  color: #ffffff;
  transition: background-color 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.playlist-modal-card-play i {
  font-size: 18px;
  line-height: 1;
}

.playlist-modal-card-play .fab {
  font-weight: 400;
}

@media (hover: hover) {
  .playlist-modal-card:hover .playlist-modal-card-play {
    background: var(--color-sky-mid, #4F7E99);
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.playlist-modal-card:focus-visible .playlist-modal-card-play {
  background: var(--color-sky-mid, #4F7E99);
  transform: translate(-50%, -50%) scale(1.08);
}

/* --- 共通インライン再生プレーヤー（playlist / creation） ---
   カード直後に挿入し、全幅16:9（grid-column: 1 / -1）。
   生成は js/lib/inline-player.js。 */
.tokikai-embed-player {
  position: relative;
  grid-column: 1 / -1;
  border-radius: 8px;
  overflow: hidden;
  background: #1f2024;
  box-shadow: 0 4px 14px rgba(31, 32, 65, 0.18);
  margin: 2px 0 10px;
}

.tokikai-embed-player__frame {
  aspect-ratio: 16 / 9;
}

.tokikai-embed-player__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tokikai-embed-player__close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(46, 52, 64, 0.72);
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

@media (hover: hover) {
  .tokikai-embed-player__close:hover {
    background: rgba(46, 52, 64, 0.92);
  }
}

.tokikai-embed-player__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* フッターCTA行はデスクトップでは非表示（CTAはヘッダーへ）。≤768 で display:flex 復活 */
.playlist-modal-foot {
  display: none;
  justify-content: flex-end;
  padding: 0.8em 1.2em;
  border-top: 1px solid var(--color-border, #DCE6EE);
  border-radius: 0 0 10px 10px;
  background: #ffffff;
}

.playlist-modal-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 15.2px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.55em 1.2em;
  border: 1px solid transparent;
  background: var(--color-fuji-mid, #7369A0);
  color: #ffffff;
  transition: background 0.2s ease;
}

.playlist-modal-cta:hover {
  background: var(--color-fuji-deep, #5F568E);
  color: #ffffff;
}

.playlist-modal-cta[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .playlist-modal-mask,
  .playlist-modal-dialog,
  .playlist-modal-card,
  .playlist-modal-card-chev,
  .playlist-modal-card-play,
  .playlist-modal-cta {
    transition: none !important;
  }
}

/* === [768] === */
@media (max-width: 768px) {
  .playlist-modal-dialog {
    width: calc(100vw - 32px);
    max-height: 88vh;
  }

  /* ヘッダーCTAはタブレット幅では右上に十分収まるため、フッターCTAへの切替は ≤480 で行う
     （2026-11-03 R5 修正）。 */

  /* 2026-11-03 R3/R5: ≤768 も1行（タイトル → 件数 → ✕）。
     件数はタイトルの直後（要件 R3「タイトルの右」）、✕は最終列で右上を維持する。
     2段目右端に置くとタイトルと切り離されて見えるため、モバイルでも1行に戻した。 */
  .playlist-modal-head {
    padding: 0.7em 1em;
  }

  .playlist-modal-title {
    font-size: 17px;
  }

  /* 20261103 追加修正2: body は sticky フェードのため padding 0 固定。外周余白は margin で代替 */
  .playlist-modal-lead {
    margin: 1em 1.1em 0;
  }

  .playlist-modal-foot {
    padding: 0.7em 1em;
  }

  .playlist-modal-grid {
    margin: 0.9em 1.1em 1em;
    gap: 0.8rem;
  }

  /* 方針A: 説明系は14.4px、タイトル16px（メタ14px固定） */
  .playlist-modal-card-desc,
  .playlist-modal-lead {
    font-size: 14.4px;
  }

  .playlist-modal-card-title {
    font-size: 16px;
  }

  .playlist-modal-cta {
    font-size: 14.4px;
  }
}

/* === [480] === */
@media (max-width: 480px) {
  .playlist-modal-dialog {
    width: calc(100vw - 24px);
    max-height: 90vh;
  }

  .playlist-modal-head {
    padding: 0.65em 0.85em;
    gap: 0.6em;
  }

  /* 2026-11-03 R5: モバイル（≤480）はヘッダーCTAをフッターへ戻す。
     タブレット（481–768）は右上に十分な余裕があるためヘッダーCTAを表示する。 */
  .playlist-modal-foot {
    display: flex;
  }

  .playlist-modal-head-cta {
    display: none;
  }

  /* 20261103 追加修正2: body は sticky フェードのため padding 0 固定。外周余白は margin で代替 */
  .playlist-modal-lead {
    margin: 0.9em 0.9em 0;
  }

  .playlist-modal-foot {
    padding: 0.65em 0.85em;
  }

  .playlist-modal-grid {
    margin: 0.8em 0.9em 0.9em;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .playlist-modal-card-text {
    padding: 0.6em 0.8em 0.75em;
  }

  .playlist-modal-cta {
    width: 100%;
    justify-content: center;
    font-size: 14px;
  }

  /* 方針A: ≤480 の説明系は14px（メタ14px固定・タイトル16px・モーダルタイトル17px） */
  .playlist-modal-card-desc,
  .playlist-modal-lead {
    font-size: 14px;
  }
}

/* === 2026-11-03 モーダル内の改行位置（行頭禁則・カタカナ語の途中切れ・追い出し）===
   実測: カタカナ語の途中切れ（コン/セプト・ワール/ド・Webサイ/ト）、行頭禁則違反（2行目先頭の
   「tokikai」/【一枚絵…】）、2字だけの追い出し（旅/立ち）を 768/390/360 で確認。
   値はサイト本文系の正準値（css/page-single.css:579-594）と同値。
   word-break を2行で書いているのは auto-phrase 非対応ブラウザ向けのフォールバック記法（サイト実装と同じ）。
   keep-all は使わない — 再生リストモーダルは js/phrase-break.js（BudouX の <wbr>）の対象外なので、
   keep-all にすると Firefox・非JS で折返し位置がなくなり横溢れする。 */
.playlist-modal-lead,
.playlist-modal-card-desc {
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* カードタイトル（行数 clamp 付き）: 末尾の句読点・長音を枠外に置く指定を加える
   （clamp タイトルの正準値は css/page-blog.css:504-518）。 */
.playlist-modal-card-title {
  line-break: strict;
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  /* text-wrap: pretty;  一時的に無効化 (hover gap テストとの両立のため) */
  hanging-punctuation: allow-end;
}