/* ============================================================
   🎵 おみそのプレイリスト — サイト実装版CSS
   配置: /playlist/assets/playlist.css
   クラスは pl- プレフィックスで既存スタイルと衝突しません。
   スーツケース型レコードボックス + ジャケット裏面の曲目リスト。
   ============================================================ */
.pl-wrap {
  --pl-rose: #9B3A6B;
  --pl-teal-d: #2FB2AA;
  --pl-ink: #4A3540;
  --pl-ink-soft: #9A8491;
  --pl-didot: "Linotype Didot", Didot, "Playfair Display", serif;
  --pl-script: "Petit Formal Script", cursive;
  --pl-jp: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
  --pl-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  max-width: 520px;
  margin: 0 auto;
  padding: 40px 18px 90px;
  color: var(--pl-ink);
  line-height: 1.9;
  font-family: var(--pl-jp);
  font-weight: 300;
  letter-spacing: .04em;
}
.pl-wrap button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; padding: 0; }
.pl-script { font-family: var(--pl-script); color: var(--pl-rose); }

.pl-head { text-align: center; margin-bottom: 30px; }
.pl-head .pl-script { font-size: 1.25rem; display: block; }
.pl-head h1, .pl-head .pl-head__title { font-family: var(--pl-jp); font-weight: 400; font-size: 1.4rem; letter-spacing: .14em; margin: 8px 0 0; }
.pl-head p { font-size: .8rem; color: var(--pl-ink-soft); margin-top: 6px; }

/* ============================================================
   レコードプレイヤー(スーツケース型レコードボックス)
   ============================================================ */
.pl-player {
  position: relative;
  background: linear-gradient(160deg, #F4E4CE, #E8D2B4);
  border: 2px solid #C9A97F;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(74,53,64,.22),
              inset 0 0 0 6px rgba(255,255,255,.35);
  padding: 34px 22px 24px;
  margin-top: 26px;
}
.pl-player::before {
  content: ""; position: absolute; inset: 10px;
  border: 2px dashed rgba(138, 90, 59, .35);
  border-radius: 12px;
  pointer-events: none;
}
.pl-handle {
  position: absolute; top: -22px; left: 50%; translate: -50% 0;
  width: 120px; height: 34px;
  border: 7px solid #B98D5F; border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 4px rgba(74,53,64,.15);
}
.pl-clasp {
  position: absolute; top: -7px;
  width: 26px; height: 14px; border-radius: 3px;
  background: linear-gradient(#EDE8DF, #B8B2A6);
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
}
.pl-clasp--l { left: 34px; }
.pl-clasp--r { right: 34px; }

/* ターンテーブル台座 */
.pl-deck {
  position: relative; width: 288px; height: 288px;
  max-width: 100%;
  margin: 0 auto 46px;
  background: #3B2F2A;
  border-radius: 22px;
  box-shadow: inset 0 4px 12px rgba(0,0,0,.45),
              0 2px 0 rgba(255,255,255,.4);
}

/* レコード盤 */
.pl-vinyl {
  position: absolute; inset: 14px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(circle at 50% 50%,
      transparent 0 56px, rgba(255,255,255,.12) 56px 57.5px,
      transparent 57.5px 76px, rgba(255,255,255,.10) 76px 77.5px,
      transparent 77.5px 96px, rgba(255,255,255,.09) 96px 97.5px,
      transparent 97.5px),
    repeating-radial-gradient(circle at 50% 50%, #2C2934 0 1.5px, #121016 1.5px 3.2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
  display: grid; place-items: center;
  animation: plSpin 1.9s linear infinite;
  animation-play-state: paused;
  transition: transform .3s var(--pl-bounce);
}
.pl-vinyl:hover { transform: scale(1.02); }
.pl-playing .pl-vinyl { animation-play-state: running; }
@keyframes plSpin { to { transform: rotate(360deg); } }

.pl-label {
  width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle, #B04A80, var(--pl-rose));
  display: grid; place-items: center; text-align: center;
  color: #FFF3F9; position: relative;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.14);
}
.pl-label::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #FDF9F5; box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.pl-label__emoji { font-size: 2.1rem; line-height: 1; translate: 0 -8px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.pl-label__side { position: absolute; bottom: 18px; font-family: var(--pl-didot); font-style: italic; font-size: .52rem; letter-spacing: .18em; opacity: .85; }

/* トーンアーム(待機: 盤の外 → 再生: 盤の上へ) */
.pl-tonearm {
  position: absolute; top: 12px; right: 18px;
  width: 24px; height: 24px; z-index: 4;
  transform-origin: 12px 12px;
  transform: rotate(-30deg);
  transition: transform .9s var(--pl-bounce);
}
.pl-playing .pl-tonearm { transform: rotate(16deg); }
.pl-tonearm::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E5D8C8, #B8A692);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.pl-tonearm::after {
  content: ""; position: absolute; top: 10px; left: 10px;
  width: 4px; height: 112px; border-radius: 3px;
  background: linear-gradient(#D9CCBC, #B8A692);
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.pl-needle {
  position: absolute; top: 118px; left: 5px;
  width: 14px; height: 20px; border-radius: 4px;
  background: #8A7566;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}

.pl-hint {
  position: absolute; bottom: -32px; left: 50%; translate: -50% 0;
  font-family: var(--pl-didot); font-style: italic; font-size: .74rem;
  color: var(--pl-ink-soft); letter-spacing: .16em; white-space: nowrap;
  transition: opacity .3s ease;
}
.pl-playing .pl-hint { opacity: 0; }

/* 再生中の曲情報 */
.pl-now { text-align: center; margin-top: 18px; min-height: 46px; }
.pl-now__np { font-family: var(--pl-didot); font-style: italic; font-size: .7rem; letter-spacing: .2em; color: var(--pl-rose); }
.pl-now__title { font-weight: 500; font-size: .95rem; letter-spacing: .08em; margin: 0; }
.pl-now__artist { font-size: .76rem; color: var(--pl-ink-soft); margin: 0; }
.pl-eq { display: inline-flex; gap: 3px; align-items: flex-end; height: 12px; margin-left: 8px; vertical-align: -1px; visibility: hidden; }
.pl-eq span { width: 3px; background: var(--pl-teal-d); border-radius: 2px; animation: plEq .9s ease-in-out infinite; }
.pl-eq span:nth-child(2) { animation-delay: .2s; }
.pl-eq span:nth-child(3) { animation-delay: .4s; }
@keyframes plEq { 0%,100% { height: 4px; } 50% { height: 12px; } }
.pl-now.on .pl-eq { visibility: visible; }

/* 埋め込みプレイヤー */
.pl-embed { margin-top: 16px; }
.pl-embed iframe { border-radius: 12px; border: 0; width: 100%; }
.pl-embed .pl-note { font-size: .66rem; color: var(--pl-ink-soft); margin-top: 6px; text-align: center; }

/* ============================================================
   トラックリスト(レコードジャケットの裏面)
   クラフト紙のバックカバー + 曲目 + クレジット + バーコード。
   上端からレコード盤が少し覗いていて、再生中は回転します
   ============================================================ */
.pl-sleeve {
  margin-top: 40px; position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(122, 98, 66, .04) 3px, rgba(122, 98, 66, .04) 4px),
    linear-gradient(160deg, #F2E8D8, #E8DCC6);
  border: 1px solid #C9B89C;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(74, 53, 64, .18),
              inset 0 0 0 1px rgba(255, 255, 255, .4);
  padding: 20px 22px 16px;
}
/* スリーブから覗くレコード盤(再生中に回転) */
.pl-sleeve__disc {
  position: absolute; top: -20px; right: 28px;
  width: 84px; height: 84px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #B04A80 0 15px, #9B3A6B 15px 17px, transparent 17px),
    repeating-radial-gradient(circle at 50% 50%, #2E2B30 0 1.5px, #232126 1.5px 3.2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  z-index: -1;                       /* スリーブの後ろに隠れて上だけ覗く */
  animation: plSpin 2.2s linear infinite;
  animation-play-state: paused;
}
.pl-sleeve__disc i {
  position: absolute; top: 6px; left: 50%;
  width: 3px; height: 8px; border-radius: 2px;
  background: rgba(255, 255, 255, .45);   /* 回転が見えるハイライト */
}
.pl-sleeve.pl-playing .pl-sleeve__disc { animation-play-state: running; }

/* ヘッダー(タイトル行) */
.pl-sleeve__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--pl-ink);
  padding-bottom: 8px; margin-bottom: 4px;
}
.pl-sleeve__title {
  font-family: var(--pl-didot);
  font-style: italic; font-weight: 600;
  font-size: 1.15rem; letter-spacing: .14em;
  color: var(--pl-ink);
}
.pl-sleeve__side {
  font-family: var(--pl-didot); font-style: italic;
  font-size: .66rem; letter-spacing: .18em;
  color: var(--pl-ink-soft);
}

/* 曲目(裏ジャケの曲リスト風) */
.pl-track {
  width: 100%; display: flex; align-items: baseline; gap: 10px;
  padding: 10px 2px; text-align: left;
  border-bottom: 1px solid rgba(74, 53, 64, .18);
  transition: background .2s ease, transform .2s var(--pl-bounce);
}
.pl-track:last-of-type { border-bottom: none; }
.pl-track:hover { background: rgba(74, 53, 64, .05); transform: translateX(4px); }
.pl-track .no { font-family: var(--pl-didot); font-style: italic; font-size: .8rem; color: var(--pl-ink-soft); min-width: 24px; }
.pl-track .t-title { font-weight: 400; font-size: .86rem; letter-spacing: .04em; color: var(--pl-ink); }
.pl-track .t-artist { font-size: .7rem; color: var(--pl-ink-soft); margin-left: auto; }
.pl-track .badge {
  font-family: var(--pl-didot); font-style: italic; font-size: .58rem;
  color: var(--pl-ink-soft); border: 1px solid currentColor;
  padding: 1px 7px; border-radius: 999px;
}
.pl-track.active { background: rgba(155, 58, 107, .08); }
.pl-track.active .t-title { color: var(--pl-rose); font-weight: 500; }
.pl-track-comment {
  display: none; font-size: .72rem; color: var(--pl-ink-soft);
  padding: 0 4px 8px 36px;
  border-bottom: 1px solid rgba(74, 53, 64, .18);
  margin: 0;
}
.pl-track.active + .pl-track-comment { display: block; }
.pl-track-comment::before { content: "💬 "; }

/* フッター(クレジット + バーコード) */
.pl-sleeve__foot {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid rgba(74, 53, 64, .3);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.pl-sleeve__credit {
  font-family: var(--pl-didot); font-style: italic;
  font-size: .58rem; line-height: 1.8;
  letter-spacing: .12em; color: var(--pl-ink-soft);
}
.pl-sleeve__barcode {
  flex: none; width: 76px; height: 30px;
  background:
    repeating-linear-gradient(90deg,
      #2E2830 0 2px, transparent 2px 4px,
      #2E2830 4px 5px, transparent 5px 8px,
      #2E2830 8px 11px, transparent 11px 13px),
    #FFFDF6;
  background-clip: content-box, padding-box;
  padding: 4px 5px;
  border: 1px solid rgba(74, 53, 64, .25);
  border-radius: 2px;
}

.pl-foot { margin-top: 20px; font-size: .68rem; color: var(--pl-ink-soft); line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .pl-vinyl, .pl-sleeve__disc, .pl-eq span { animation: none; }
  .pl-tonearm { transition: none; }
}

/* ============================================================
   PCレイアウト: レコードとジャケットを横並びに
   (900px以上で2カラム、スマホは従来どおり縦積み)
   ============================================================ */
@media (min-width: 900px) {
  .pl-wrap {
    max-width: 1060px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    align-items: start;
  }
  .pl-head { grid-column: 1 / -1; }
  .pl-player { grid-column: 1; }
  .pl-sleeve {
    grid-column: 2;
    margin-top: 26px;   /* レコードボックス(ハンドル分の余白)と天面を揃える */
  }
  .pl-foot { grid-column: 1 / -1; text-align: center; }
}

/* ============================================================
   トップページ埋め込み時の調整
   ============================================================ */
.fp-playlist-live { padding: 6px clamp(16px, 4vw, 48px) 28px; }
.pl-head__title {
  font-family: var(--pl-jp);
  font-weight: 400; font-size: 1.4rem;
  letter-spacing: .14em; margin: 8px 0 0;
  color: var(--pl-ink);
}

/* ============================================================
   タイトルフォントをサイト見出し(最新の記録 等)と統一
   ============================================================ */
.pl-head h1,
.pl-head .pl-head__title {
  font-family: 'Zen Maru Gothic', var(--pl-jp), sans-serif;
  font-weight: 400;
}

/* ============================================================
   🎧 ながら再生(別ウィンドウ)
   ============================================================ */
.pl-bgm { text-align: center; margin-top: 18px; }
.pl-bgm-btn {
  font-size: .8rem; letter-spacing: .06em;
  color: var(--pl-rose);
  border: 1px solid var(--pl-rose);
  padding: 10px 24px; border-radius: 999px;
  transition: all .25s var(--pl-bounce);
}
.pl-bgm-btn:hover { background: var(--pl-rose); color: #fff; transform: translateY(-2px); }
.pl-bgm-note { display: block; font-size: .66rem; color: var(--pl-ink-soft); margin-top: 6px; }

/* ミニモード(?mini=1 の別ウィンドウ表示): サイトの枠を隠して省スペースに */
body.pl-mini-mode .site-header,
body.pl-mini-mode footer,
body.pl-mini-mode .site-footer { display: none; }
body.pl-mini-mode .pl-wrap { padding: 14px 14px 40px; display: block; max-width: 480px; }
body.pl-mini-mode .pl-head p,
body.pl-mini-mode .pl-foot,
body.pl-mini-mode .pl-bgm { display: none; }