@charset "UTF-8";
/**
 * 楽曲詳細 2026 — Dark Editorial
 *
 * ページ本体は YOOtheme Builder と Sonaar MP3 Audio Player プラグインの描画のまま。
 * ここでは配色と字組みだけを上書きする（テンプレートは作らない）。
 * ヘッダーは mu-plugin が共通ヘッダーに差し替える。
 *
 * スコープの考え方:
 *   body.single-music … 楽曲詳細では自動で当たる
 *   .u-player         … 他のページでプレイヤーを置いたとき、手動で当てるためのclass
 * この2つを :is() で束ねているので、片方に書けば両方に効く。
 *
 * 【CSSで変えられないもの】波形は <canvas> に描かれているため、色はプラグイン設定側。
 *   Sonaar → 設定 → Player Design
 *     Timeline color（未再生）… rgba(31,31,31,1)  → #3A3532
 *     Progress color（再生済）… rgba(116,1,223,1) → #C8B89A
 *
 * 切り戻し: mu-plugin の is_singular('music') を外せば元の見た目に戻る。
 */

/* ---------- ページの下地 ---------- */

body.single-music {
  --bg: #0A0909;
  --bg-alt: #111010;
  --line: #242020;
  --fg: #EDE8E3;
  --muted: #888480;
  --accent: #C8B89A;
  --radius: 2px;
  --sans: 'Noto Sans JP', system-ui, sans-serif;
  --serif: 'Noto Serif JP', serif;
  --display: 'DM Sans', system-ui, sans-serif;

  background: var(--bg);
  color: var(--fg);
}

/* YOOtheme のセクションは白地なので透過させ、body の色を見せる */
body.single-music .uk-section,
body.single-music .uk-section-default,
body.single-music .uk-container { background: transparent !important; }

/* 1つ目のセクション（プレイヤー）は共通ヘッダーの分だけ上に余白を足す */
body.single-music #tm-main > .uk-section:first-of-type { padding-top: 88px; }

body.single-music a { color: var(--fg); }

/* ---------- プレイヤー全体 ---------- */

:is(body.single-music, .u-player) .iron-audioplayer {
  color: var(--fg);
  font-family: var(--sans);
}

/* アートワーク。ジャケットは作品そのものなので加工せず色のまま出す */
:is(body.single-music, .u-player) .album-art img {
  border-radius: var(--radius);
  background: var(--bg-alt);
}

/* ---------- アルバム名・サブタイトル ---------- */

:is(body.single-music, .u-player) .sr_it-playlist-title,
:is(body.single-music, .u-player) .sr_it-playlist-title a {
  font-family: var(--serif) !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  letter-spacing: .02em;
  color: var(--fg) !important;
}

:is(body.single-music, .u-player) .srp_subtitle {
  margin-top: 10px !important;
  font-family: var(--display) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  color: var(--accent) !important;
}

/* ---------- トラックリスト ---------- */

:is(body.single-music, .u-player) .srp_tracklist { margin-top: 32px; }

:is(body.single-music, .u-player) .sr-playlist-item {
  border-bottom: 1px solid var(--line) !important;
  transition: background-color .2s ease;
}

:is(body.single-music, .u-player) .sr-playlist-item:first-child {
  border-top: 1px solid var(--line) !important;
}

:is(body.single-music, .u-player) .sr-playlist-item:hover {
  background: rgba(255, 255, 255, .03) !important;
}

:is(body.single-music, .u-player) .audio-track {
  padding: 14px 12px !important;
  color: var(--fg) !important;
}

:is(body.single-music, .u-player) .track-number,
:is(body.single-music, .u-player) .track-number .number {
  font-family: var(--display) !important;
  font-size: 11px !important;
  letter-spacing: 1px;
  color: var(--muted) !important;
}

/* 曲番号の隣の ▶ アイコン。
   プラグイン設定の featured_color が #000 なので、暗い背景では真っ黒に沈む。
   ここで色を与え、曲名との間隔も確保する（既定では詰まって重なって見える）。 */
:is(body.single-music, .u-player) .track-number .sricon-play,
:is(body.single-music, .u-player) .track-number .sricon-play::before,
:is(body.single-music, .u-player) .track-number .sricon-pause,
:is(body.single-music, .u-player) .track-number .sricon-pause::before {
  display: inline-block;
  width: 13px;
  margin-right: 10px;
  font-size: 10px !important;
  color: var(--muted) !important;
  transition: color .2s ease;
}

/* ::before は幅と余白を二重に持たせない */
:is(body.single-music, .u-player) .track-number .sricon-play::before,
:is(body.single-music, .u-player) .track-number .sricon-pause::before {
  width: auto;
  margin-right: 0;
}

:is(body.single-music, .u-player) .tracklist-item-title {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--fg) !important;
  transition: color .2s ease;
}

:is(body.single-music, .u-player) .tracklist-item-time {
  font-family: var(--display) !important;
  font-size: 11px !important;
  letter-spacing: .5px;
  color: var(--muted) !important;
}

:is(body.single-music, .u-player) .sr-playlist-item:hover .tracklist-item-title { color: #fff !important; }
:is(body.single-music, .u-player) .sr-playlist-item:hover .track-number,
:is(body.single-music, .u-player) .sr-playlist-item:hover .track-number .number,
:is(body.single-music, .u-player) .sr-playlist-item:hover .track-number .sricon-play,
:is(body.single-music, .u-player) .sr-playlist-item:hover .track-number .sricon-play::before { color: var(--accent) !important; }

/* 再生中の曲（プラグインが .current を付ける） */
:is(body.single-music, .u-player) .sr-playlist-item.current .tracklist-item-title { color: var(--accent) !important; }
:is(body.single-music, .u-player) .sr-playlist-item.current .track-number,
:is(body.single-music, .u-player) .sr-playlist-item.current .track-number .number,
:is(body.single-music, .u-player) .sr-playlist-item.current .sricon-play,
:is(body.single-music, .u-player) .sr-playlist-item.current .sricon-play::before,
:is(body.single-music, .u-player) .sr-playlist-item.current .sricon-pause,
:is(body.single-music, .u-player) .sr-playlist-item.current .sricon-pause::before { color: var(--accent) !important; }

:is(body.single-music, .u-player) .srp_track_description {
  font-size: 12px !important;
  line-height: 22px !important;
  color: var(--muted) !important;
}

/* ---------- 再生バー ---------- */

:is(body.single-music, .u-player) .album-player {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

:is(body.single-music, .u-player) .srp_meta.track-title {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--fg) !important;
}

:is(body.single-music, .u-player) .currentTime,
:is(body.single-music, .u-player) .totalTime {
  font-family: var(--display) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: var(--muted) !important;
}

/* ---------- 操作ボタン ---------- */

/* opacity はプラグインのJSが読み込み完了時に 0→1 にするので触らない */
:is(body.single-music, .u-player) .srp_main_control .control > div,
:is(body.single-music, .u-player) .srp_main_control .sricon-play,
:is(body.single-music, .u-player) .srp_main_control .sricon-pause,
:is(body.single-music, .u-player) .srp_main_control .sricon-back,
:is(body.single-music, .u-player) .srp_main_control .sricon-forward {
  color: var(--fg) !important;
  transition: color .2s ease, transform .2s ease;
}

:is(body.single-music, .u-player) .srp_main_control .control > div:hover,
:is(body.single-music, .u-player) .srp_main_control .control > div:hover i {
  color: var(--accent) !important;
}

:is(body.single-music, .u-player) .srp_main_control .play { transform-origin: center; }
:is(body.single-music, .u-player) .srp_main_control .play:hover { transform: scale(1.06); }

/* アートワーク上に重なる再生ボタン */
:is(body.single-music, .u-player) .sonaar-Artwort-box .control .sricon-play,
:is(body.single-music, .u-player) .sonaar-Artwort-box .control .sricon-pause { color: var(--fg) !important; }

/* ---------- 下部のスライダー（他の楽曲） ---------- */

body.single-music .uk-slider-items .el-title {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  letter-spacing: .04em;
  color: var(--fg) !important;
}

body.single-music .uk-slider-items img {
  border-radius: var(--radius);
  filter: grayscale(.7) brightness(.85);
  transition: filter .3s ease;
}

body.single-music .uk-slider-items a:hover img { filter: none; }

/* 送りボタンと丸ドット */
body.single-music .uk-slidenav { color: var(--muted) !important; }
body.single-music .uk-slidenav:hover { color: var(--accent) !important; }

/* --line では暗背景に沈んで見えないので、ここだけ白の薄い線を使う */
body.single-music .uk-dotnav > * > * {
  border-color: rgba(255, 255, 255, .22) !important;
  background: transparent !important;
}

body.single-music .uk-dotnav > * > :hover { border-color: var(--muted) !important; }

body.single-music .uk-dotnav > .uk-active > * {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  body.single-music #tm-main > .uk-section:first-of-type { padding-top: 64px; }
  :is(body.single-music, .u-player) .sr_it-playlist-title { font-size: 30px !important; }
}

@media (max-width: 560px) {
  :is(body.single-music, .u-player) .sr_it-playlist-title { font-size: 26px !important; }
  :is(body.single-music, .u-player) .audio-track { padding: 12px 4px !important; }
}