/* /assets/css/style.css?v=20260919quality1 */
/* ============================================================
   H/MIX GALLERY - Main Stylesheet v7
   Theme: 音楽の風景図鑑 / Quiet Fantasy Music Library
   Palette: Warm Ivory × Forest Green × Soft Gold
   Inspired by: Studio Ghibli, WLOP, quiet RPG, Japanese nature
   ============================================================ */

/* ===== GOOGLE FONTS =====
   2026-09-09: @import を撤去。各HTMLの <link> と families/weights が食い違って
   いたため fonts.googleapis.com のCSSとwoff2を二重取得していた（実測+195KB）。
   加えて @import は HTML→style.css→fonts.css→woff2 の直列ブロックを作り、
   <link media="print" onload> による非同期化を打ち消していた。
   フォントは各ページの <link> が読む（scripts/audit-font-coverage.js で全ページ検証）。 */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* ── Background (Warm Ivory / Washi) ── */
  --color-bg:           #f5f0e8;   /* 和紙・生成り */
  --color-bg-2:         #ede8df;   /* やや濃い生成り */
  --color-bg-3:         #e8e2d8;   /* セクション区切り */
  --color-surface:      #f9f6f0;   /* カード面 */
  --color-surface-2:    #f2ede4;   /* ホバー面 */
  --color-surface-3:    #ebe5da;   /* 深めの面 */

  /* ── Forest Green (Base Color) ── */
  --color-green:        #2d5a3d;   /* 深森の緑 */
  --color-green-mid:    #3d7a52;   /* 中間の緑 */
  --color-green-light:  #5a9e6e;   /* 明るい緑 */
  --color-green-pale:   rgba(45, 90, 61, 0.08);
  --color-green-dim:    #1e3d29;   /* 暗い緑 */
  --color-moss:         #4a6741;   /* 苔色 */

  /* ── Soft Gold (Accent, reduced) ── */
  --color-gold:         #8a7040;   /* 落ち着いたゴールド */
  --color-gold-light:   #a8905a;   /* 明るめゴールド */
  --color-gold-dim:     #6a5530;   /* 暗めゴールド */
  --color-gold-pale:    rgba(138, 112, 64, 0.10);

  /* ── Borders ── */
  --color-border:       rgba(45, 90, 61, 0.15);
  --color-border-hover: rgba(45, 90, 61, 0.35);
  --color-border-gold:  rgba(138, 112, 64, 0.25);

  /* ── Text ── */
  --color-text:         #2a2018;   /* 濃い焦げ茶 */
  --color-text-muted:   #5a5040;   /* ミュート */
  --color-text-dim:     #8a7a68;   /* 薄め */
  --color-text-green:   var(--color-green);

  /* ── Semantic Category Colors ── */
  --color-japanese:     #2d5a3d;
  --color-horror:       #4a2020;
  --color-night:        #1a2a4a;
  --color-battle:       #4a3a1a;
  --color-sad:          #2a3a4a;

  /* ── Typography ── */
  --font-serif-jp:      'Noto Serif JP', 'Yu Mincho', 'YuMincho', serif;
  --font-sans-jp:       'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-display:       'Cinzel', serif;

  /* ── Spacing ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* ── Layout ── */
  --max-width:        1200px;
  --header-height:    64px;
  --section-padding:  var(--space-5xl) var(--space-xl);

  /* ── Transitions ── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.3s ease;
  --transition-slow:  0.6s ease;

  /* ── Borders ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* ── Dark Theme Shared Tokens ──
     player / theater / music-library-dark 等で共通利用 */

  /* Glow Green（ダークUI上の発光緑） */
  --dark-glow-green:        rgba(100, 220, 140, 0.60);
  --dark-glow-green-soft:   rgba(80, 200, 120, 0.20);
  --dark-glow-green-dim:    rgba(60, 140, 90, 0.12);
  --dark-glow-green-bright: rgba(120, 230, 155, 0.95);

  /* Dark Base（漆黒背景） */
  --dark-bg:          #0b1510;
  --dark-bg-2:        #0e1a14;
  --dark-bg-3:        #111d17;
  --dark-surface:     #182618;
  --dark-surface-2:   #1e3020;

  /* Dark Text */
  --dark-text:        #e8f5ec;
  --dark-text-muted:  #b0c8b8;
  --dark-text-dim:    #6e8f76;
  --dark-text-bright: rgba(200, 240, 215, 0.95);

  /* Dark Green Accent */
  --dark-green:       #7ecb95;
  --dark-green-mid:   #5aaa72;
  --dark-green-light: #9adfb4;
  --dark-green-pale:  rgba(100, 200, 140, 0.12);

  /* Dark Gold（ランタン・真鍮） */
  --dark-gold:        #c4a445;
  --dark-gold-light:  #e2c070;
  --dark-gold-warm:   rgba(209, 184, 122, 0.60);

  /* Dark Border */
  --dark-border:       rgba(100, 180, 130, 0.18);
  --dark-border-hover: rgba(100, 180, 130, 0.40);
  --dark-border-gold:  rgba(196, 164, 69, 0.30);

  /* Translucent White（ダーク上の白系テキスト・UI） */
  --dark-white:       rgba(255, 255, 255, 0.90);
  --dark-white-muted: rgba(255, 255, 255, 0.50);
  --dark-white-dim:   rgba(255, 255, 255, 0.15);
  --dark-white-warm:  rgba(255, 250, 240, 0.95);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: #000; /* bodyの外側に白が透けるのを防ぐ */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans-jp);
  background-color: #000;
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ===== 蔦・草花 装飾パターン（SVGインライン） ===== */
/* 控えめな植物モチーフをbefore/afterで表現 */
.decor-vine::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10,60 Q30,20 60,40 Q90,60 110,30' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.12'/%3E%3Cpath d='M0,90 Q40,70 60,90 Q80,110 120,80' stroke='%232d5a3d' stroke-width='0.6' fill='none' opacity='0.08'/%3E%3Ccircle cx='45' cy='35' r='3' fill='%232d5a3d' opacity='0.08'/%3E%3Ccircle cx='75' cy='55' r='2' fill='%232d5a3d' opacity='0.06'/%3E%3Ccircle cx='90' cy='25' r='2.5' fill='%232d5a3d' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
  z-index: 0;
}

/* ===== UTILITY ===== */
.section-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-padding);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  justify-content: center;
}

.section-label--left {
  justify-content: flex-start;
}

.section-label-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-green));
  opacity: 0.3;
  animation: lineBreathe 6s ease-in-out infinite;
}

@keyframes lineBreathe {
  0%, 100% { opacity: 0.3; max-width: 80px; }
  50%      { opacity: 0.5; max-width: 90px; }
}

.section-label--left .section-label-line {
  background: linear-gradient(90deg, var(--color-green), transparent);
  opacity: 0.3;
  max-width: 60px;
}

.section-label-text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--color-green);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
}

.section-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

.section-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-3xl);
  letter-spacing: 0.03em;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.625rem;
  font-family: var(--font-sans-jp);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 999px;
  transition: all var(--transition-base);
  cursor: pointer;
  text-decoration: none;
}

.btn--primary {
  background: var(--color-green);
  color: #f5f0e8;
  border: 1px solid var(--color-green);
}

.btn--primary:hover {
  background: var(--color-green-mid);
  border-color: var(--color-green-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

.btn--ghost {
  background: transparent;
  color: var(--color-green);
  border: 1px solid var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-green);
  background: var(--color-green-pale);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.btn--outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10020;
  height: var(--header-height);
  transition: background var(--transition-slow), backdrop-filter var(--transition-slow);
}

/* 通常ページ（ライト）*/
.site-header.scrolled {
  background: rgba(245, 240, 232, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(45, 90, 61, 0.06);
}

/* TOP ページ: Library と統一ダークヘッダー */
body.top-page .site-header {
  background: rgba(11, 21, 16, 0.82);
  border-bottom: 1px solid rgba(80, 160, 110, 0.12);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.top-page .site-header.scrolled {
  background: rgba(10, 18, 14, 0.97);
  border-bottom-color: rgba(80, 160, 110, 0.18);
}
/* TOP ヘッダーのテキスト色 → Library dark に統一 */
body.top-page .logo-text {
  color: #9adfb4;
  text-shadow: 0 0 24px rgba(126, 203, 149, 0.30);
}
body.top-page .logo-sub {
  color: #6e8f76;
}
body.top-page .nav-link {
  color: #b0c8b8;
}
body.top-page .nav-link:hover,
body.top-page .nav-link--active {
  color: #9adfb4;
}

/* active 状態の常時アンダーライン */
body.top-page .nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: rgba(154, 223, 180, 0.50);
  transform: scaleX(1);
}
body.top-page .nav-link--cta {
  border-color: rgba(100, 180, 130, 0.30);
  color: #9adfb4;
}
body.top-page .nav-link--cta:hover {
  background: rgba(80, 160, 110, 0.18);
  border-color: #5aaa72;
}
body.top-page .nav-toggle span {
  background: #b0c8b8;
}
body.top-page .nav-lang-toggle {
  border-color: rgba(100, 180, 130, 0.2);
}
body.top-page .nav-lang-toggle:hover {
  border-color: rgba(100, 190, 140, 0.55);
  background: rgba(100, 190, 140, 0.06);
}
body.top-page .lang-opt         { color: #b0c8b8; }
body.top-page .lang-opt--active { color: #9adfb4; font-weight: 700; }
body.top-page .lang-sep         { color: #b0c8b8; }
body.top-page .lang-globe       { stroke: #b0c8b8; }

/* ── TOP page: Site History / Composer / License / Footer
      → Music Library dark tone に統一
      CSS変数スコープ上書きのみ。各コンポーネントルールは変更不要。 ── */
body.top-page .site-history,
body.top-page .composer,
body.top-page .license-info,
body.top-page .site-footer {
  /* ── 背景 (Library dark) → 共通ダークトークン参照 ── */
  --color-bg:           var(--dark-bg);
  --color-bg-2:         var(--dark-bg-2);
  --color-bg-3:         var(--dark-bg-3);
  --color-surface:      var(--dark-surface);
  --color-surface-2:    var(--dark-surface-2);
  --color-surface-3:    #223625;
  /* ── テキスト ── */
  --color-text:         var(--dark-text);
  --color-text-muted:   var(--dark-text-muted);
  --color-text-dim:     var(--dark-text-dim);
  /* ── グリーン ── */
  --color-green:        var(--dark-green);
  --color-green-mid:    var(--dark-green-mid);
  --color-green-light:  var(--dark-green-light);
  --color-green-pale:   var(--dark-green-pale);
  --color-green-dim:    #2d5a3d;
  /* ── ゴールド ── */
  --color-gold:         var(--dark-gold);
  --color-gold-light:   var(--dark-gold-light);
  --color-gold-pale:    rgba(196, 164, 69, 0.10);
  /* ── ボーダー ── */
  --color-border:       var(--dark-border);
  --color-border-hover: var(--dark-border-hover);
  --color-border-gold:  var(--dark-border-gold);

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

/* composer の蔦装飾: ダーク地でも柔らかく */
body.top-page .composer::after {
  opacity: 0.55; /* Library の翡翠グリーンで SVG stroke が見える調整 */
}

/* license-info 背景画像: ダーク地では透過を上げてメリハリを出す */
body.top-page .license-info::before {
  opacity: 0.12;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-green);
  line-height: 1;
}

.logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-item {
  display: block;
  position: relative;
  line-height: 1;
}

.nav-link {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-green);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.nav-link:hover {
  color: var(--color-green);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-item--dropdown > .nav-link {
  padding-right: 0.85rem;
}

.nav-item--dropdown > .nav-link::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0.65;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-item--dropdown:hover > .nav-link::before,
.nav-item--dropdown:focus-within > .nav-link::before {
  opacity: 1;
  transform: translateY(-35%) rotate(225deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  z-index: 260;
  min-width: 178px;
  padding: 0.45rem;
  list-style: none;
  background: rgba(10, 20, 15, 0.96);
  border: 1px solid rgba(100, 180, 130, 0.24);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.nav-list.open .nav-submenu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  width: auto;
  min-width: 178px;
  margin: 0;
  padding: 0.45rem;
  background: rgba(10, 20, 15, 0.96);
  border: 1px solid rgba(100, 180, 130, 0.24);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  transform: translate(-50%, -4px);
}

.nav-submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.75rem;
  height: 0.75rem;
}

.nav-item--dropdown:hover .nav-submenu,
.nav-item--dropdown:focus-within .nav-submenu,
.nav-list.open .nav-item--dropdown:hover .nav-submenu,
.nav-list.open .nav-item--dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-submenu__link {
  display: block;
  padding: 0.58rem 0.68rem;
  border-radius: 4px;
  color: rgba(210, 235, 218, 0.86);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color var(--transition-base), background var(--transition-base);
}

.nav-submenu__link:hover,
.nav-submenu__link:focus-visible,
.nav-submenu__link--active {
  color: #9adfb4;
  background: rgba(100, 180, 130, 0.12);
}

.nav-link--cta {
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-green);
}

.nav-link--cta::after {
  display: none;
}

.nav-link--cta:hover {
  background: var(--color-green-pale);
  border-color: var(--color-green);
}

.nav-link--theater {
  color: var(--color-text-muted);
  font-weight: inherit;
}
.nav-link--theater::after {
  background: var(--color-green);
}

.nav-lang-toggle {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid rgba(45, 90, 61, 0.3);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition-base), background var(--transition-base);
  flex-shrink: 0;
}
.nav-lang-toggle:hover {
  border-color: var(--color-green-mid);
  background: var(--color-green-pale);
}

.mobile-action-dock {
  display: none;
}

/* 言語トグル — 全ページ共通（opacity 不使用・色で直接制御） */
.lang-globe {
  stroke: rgba(170, 210, 185, 0.7);
  flex-shrink: 0;
}
.lang-opt {
  color: rgba(170, 210, 185, 0.6);
  transition: color var(--transition-base);
}
.lang-opt--active {
  color: rgba(154, 223, 180, 0.95);
  font-weight: 700;
}
.lang-sep {
  color: rgba(170, 210, 185, 0.3);
}
/* Dark library / track-detail pages */
body.library-page--dark .nav-lang-toggle {
  border-color: rgba(80, 160, 110, 0.22);
}
body.library-page--dark .nav-lang-toggle:hover {
  border-color: rgba(80, 160, 110, 0.5);
  background: rgba(80, 160, 110, 0.07);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-text-muted);
  transition: all var(--transition-base);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 幻想の森・霧の背景（時間帯で切り替え） */
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/hero/hero-bg.webp'); /* fallback */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;  /* パララックス用 */
  transition: background-image 0s, opacity 1.5s ease;
}

/* 幻想オーバーレイ（深みと静けさ） */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5, 15, 10, 0.55) 0%,
      rgba(8, 20, 12, 0.45) 25%,
      rgba(8, 22, 14, 0.40) 50%,
      rgba(5, 15, 10, 0.82) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* 光のゆらぎレイヤー（幻想的な光源） */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 40%, rgba(100, 160, 120, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 30% 30%, rgba(80, 140, 100, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(5, 15, 10, 0.50) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  animation: lanternGlow 7s ease-in-out infinite;
}

.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(5, 15, 10, 0.20) 0%,
    rgba(8, 20, 12, 0.15) 30%,
    rgba(8, 20, 12, 0.18) 55%,
    rgba(5, 15, 8, 0.80) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-xl);
  max-width: 800px;
  /* テキスト背後に暗いスポットを追加して可読性を向上 */
  background: radial-gradient(
    ellipse 85% 75% at 50% 50%,
    rgba(5, 15, 10, 0.38) 0%,
    rgba(5, 15, 10, 0.18) 60%,
    transparent 100%
  );
  border-radius: 50%;
}

/* モバイルでは楕円の縦横比を安定化 */
@media (max-width: 768px) {
  .hero-content {
    border-radius: 40%;
    background: radial-gradient(
      ellipse 120% 60% at 50% 50%,
      rgba(5, 15, 10, 0.35) 0%,
      rgba(5, 15, 10, 0.15) 60%,
      transparent 100%
    );
  }
}

.hero-eyebrow {
  font-family: var(--font-serif-jp);
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  color: rgba(190, 230, 205, 0.90);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeInUp 1s ease 0.3s forwards;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.65);
}
/* h1 サブライン: ブランド名直下、控えめなキーワード表示 (SEO 用) */
.hero-eyebrow-sub {
  display: block;
  margin-top: 0.35em;
  font-family: var(--font-serif-jp);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(190, 230, 205, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ヒーロー下の静かな抜け道: カテゴリから探す
   詩性を壊さぬよう、粒子のように控えめに配置 */
.hero-skip-link {
  position: absolute;
  bottom: 18px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-family: var(--font-serif-jp);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(245, 216, 150, 0.45);
  text-decoration: none;
  opacity: 0;
  animation: fadeInUp 1.4s ease 1.8s forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  transition: color 0.5s ease, opacity 0.5s ease;
  z-index: 5;
}
.hero-skip-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 216, 150, 0.5));
  flex-shrink: 0;
  transition: width 0.5s ease, background 0.5s ease;
}
.hero-skip-en {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.3em;
  color: rgba(245, 216, 150, 0.3);
  margin-left: 0.3em;
}
.hero-skip-link:hover {
  color: rgba(245, 216, 150, 0.95);
}
.hero-skip-link:hover .hero-skip-line {
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(245, 216, 150, 0.9));
}
.hero-skip-link:hover .hero-skip-en {
  color: rgba(245, 216, 150, 0.7);
}
@media (max-width: 720px) {
  .hero-skip-link {
    bottom: 68px;
    right: 16px;
    font-size: 9px;
  }
  .hero-skip-en { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-skip-link { animation: none; opacity: 1; }
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  opacity: 0;
  animation: fadeInUp 1s ease 0.6s forwards;
}

.hero-title-main {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #f0f8f2;
  line-height: 1;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.90),
    0 4px 20px rgba(0, 0, 0, 0.75),
    0 0 60px rgba(80, 160, 100, 0.20),
    0 0 120px rgba(60, 140, 80, 0.10);
}

.hero-title-sub {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  color: rgba(180, 225, 195, 0.90);
  text-transform: uppercase;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-copy {
  font-family: var(--font-sans-jp);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: rgba(220, 245, 228, 0.95);
  line-height: 2;
  margin-bottom: var(--space-2xl);
  opacity: 0;
  animation: fadeInUp 1s ease 0.9s forwards;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-copy--poetic {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  color: rgba(220, 245, 228, 0.95);
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-copy-en {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(160, 215, 175, 0.85);
  margin-top: var(--space-md);
  text-transform: uppercase;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 10px rgba(0, 0, 0, 0.70);
}

/* ===== HERO SIGNATURE TRACK（静かに聴く） ===== */
.hero-signature-track {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: rgba(10, 25, 15, 0.55);
  border: 1px solid rgba(100, 160, 120, 0.20);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-2xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp 1s ease 1.0s forwards;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

/* 波紋エフェクト用 */
.hero-signature-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(100, 180, 120, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.hero-track-label {
  font-family: var(--font-serif-jp);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(140, 190, 155, 0.65);
  text-align: center;
}

.hero-track-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.hero-track-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.hero-track-title {
  font-family: var(--font-serif-jp);
  font-size: 1.1rem;
  font-weight: 500;
  color: #d8f0e0;
  letter-spacing: 0.05em;
}

.hero-track-title-en {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(120, 180, 140, 0.60);
  text-transform: uppercase;
  margin-top: 2px;
}

.hero-track-player {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* 「静かに聴く」ボタン */
.hero-play-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 1.4rem;
  background: rgba(80, 140, 100, 0.20);
  color: rgba(200, 235, 210, 0.90);
  border: 1px solid rgba(100, 160, 120, 0.30);
  border-radius: 999px;
  font-family: var(--font-serif-jp);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.hero-play-btn:hover {
  background: rgba(80, 140, 100, 0.35);
  border-color: rgba(100, 160, 120, 0.50);
  box-shadow: 0 0 20px rgba(80, 160, 100, 0.25);
}

.hero-play-btn.playing {
  background: rgba(60, 120, 80, 0.30);
  color: rgba(180, 230, 195, 0.90);
  border-color: rgba(100, 170, 120, 0.40);
}

/* 波紋アニメーション（再生中） */
.hero-play-btn.playing::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid rgba(100, 180, 120, 0.3);
  animation: ripplePulse 2s ease-in-out infinite;
}

.hero-play-label {
  font-weight: 400;
}

.hero-track-link {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: rgba(120, 180, 140, 0.55);
  text-decoration: none;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.hero-track-link:hover {
  color: rgba(160, 220, 175, 0.90);
}

/* 音の波紋（視覚的な音の気配） */
.hero-sound-ripple {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-sound-ripple.active {
  opacity: 1;
}

.hero-sound-ripple svg {
  width: 100%;
  height: 100%;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
  opacity: 0;
  animation: fadeInUp 1s ease 1.1s forwards;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  opacity: 0;
  animation: fadeInUp 1s ease 1.3s forwards;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(220, 248, 228, 0.98);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.90),
    0 2px 12px rgba(0, 0, 0, 0.70);
}

.hero-stat-label {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(170, 215, 182, 0.85);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.80);
}

.hero-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(100, 160, 110, 0.2);
}

.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  animation: fadeIn 1s ease 2s forwards;
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(100, 160, 110, 0.5), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

.hero-scroll-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: rgba(160, 200, 165, 0.70);
  text-transform: uppercase;
}

/* ===== TODAY'S MUSIC ===== */
.todays-music {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* 蔦の薄い装飾 */
.todays-music::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M280,20 Q200,80 220,150 Q240,220 180,270' stroke='%232d5a3d' stroke-width='1.2' fill='none' opacity='0.07'/%3E%3Cpath d='M300,80 Q240,100 250,160 Q260,220 200,260' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.05'/%3E%3Ccircle cx='215' cy='148' r='4' fill='%232d5a3d' opacity='0.06'/%3E%3Ccircle cx='185' cy='268' r='3' fill='%232d5a3d' opacity='0.05'/%3E%3Cpath d='M220,150 Q230,130 245,135' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3Cpath d='M220,150 Q210,165 225,175' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.8;
}

.todays-card {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 2px 20px rgba(45, 90, 61, 0.06);
}

/* カードの上部に薄いグリーンのライン */
.todays-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-green-light), transparent);
  opacity: 0.3;
}

.todays-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(45, 90, 61, 0.04) 0%, transparent 70%),
    linear-gradient(135deg, rgba(45, 90, 61, 0.03) 0%, transparent 60%);
  pointer-events: none;
}

.todays-card-sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90%);
  height: min(420px, 90%);
  background-image: url('/assets/images/sigil-emblem.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.todays-card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.todays-track-info {
  text-align: center;
}

.todays-track-category {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-green);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.todays-track-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.05em;
}

.todays-track-title-en {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.todays-track-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.todays-player {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.play-btn {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-green);
  color: #f5f0e8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(45, 90, 61, 0.2);
}

.play-btn:hover {
  background: var(--color-green-mid);
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(45, 90, 61, 0.3);
}

.play-btn.playing {
  background: var(--color-surface-3);
  color: var(--color-green);
  border: 1px solid var(--color-border);
}

.todays-player-info {
  flex: 1;
}

.progress-bar-wrap {
  height: 2px;
  background: var(--color-surface-3);
  border-radius: 2px;
  margin-bottom: var(--space-sm);
  cursor: pointer;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--color-green);
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 2px;
}

.player-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
}

.todays-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-green);
  transition: gap var(--transition-base);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin: 0 calc(-1 * var(--space-2xl));
  margin-bottom: calc(-1 * var(--space-2xl));
}

.todays-link:hover {
  gap: var(--space-md);
  background: var(--color-green-pale);
}

/* ===== SCENE SEARCH ===== */
.scene-search {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* 左下に蔦の装飾 */
.scene-search::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 250px; height: 250px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cpath d='M20,250 Q60,180 40,120 Q20,60 80,20' stroke='%232d5a3d' stroke-width='1.2' fill='none' opacity='0.08'/%3E%3Cpath d='M0,200 Q50,160 30,100 Q10,40 60,10' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.05'/%3E%3Ccircle cx='42' cy='118' r='4' fill='%232d5a3d' opacity='0.06'/%3E%3Ccircle cx='78' cy='22' r='3' fill='%232d5a3d' opacity='0.05'/%3E%3Cpath d='M40,120 Q25,108 28,95' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3Cpath d='M40,120 Q55,112 58,125' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
}

.scene-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  box-shadow: 0 2px 12px rgba(45, 90, 61, 0.06);
}

.scene-card:hover {
  border-color: var(--color-green);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45, 90, 61, 0.15);
}

.scene-card-bg {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-slow);
}

.scene-card:hover .scene-card-bg {
  transform: scale(1.05);
}

/* シーンカードの背景（明るい幻想的な色調） */
.scene-card--samurai .scene-card-bg {
  background: linear-gradient(
    160deg,
    #2a4a30 0%,
    #1e3825 40%,
    #2a3a1a 100%
  );
}

.scene-card--horror .scene-card-bg {
  background: linear-gradient(
    160deg,
    #2a1a1a 0%,
    #1f1010 40%,
    #2a1a2a 100%
  );
}

.scene-card--night .scene-card-bg {
  background: linear-gradient(
    160deg,
    #1a2035 0%,
    #101528 40%,
    #1a1a35 100%
  );
}

.scene-card--battle .scene-card-bg {
  background: linear-gradient(
    160deg,
    #3a2a10 0%,
    #2a2010 40%,
    #3a1a10 100%
  );
}

.scene-card--sad .scene-card-bg {
  background: linear-gradient(
    160deg,
    #1a2535 0%,
    #141c2a 40%,
    #1a2535 100%
  );
}

/* シーンカードの上部装飾ライン */
.scene-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 160, 110, 0.4), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.scene-card:hover::before {
  opacity: 1;
}

.scene-card-content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}

.scene-card-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  filter: grayscale(0.2);
}

.scene-card-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #e8f0e8;
  margin-bottom: 2px;
}

.scene-card-desc {
  font-size: 0.7rem;
  color: rgba(200, 220, 200, 0.6);
  letter-spacing: 0.05em;
}

/* ===== BGM CATEGORIES ===== */
.bgm-categories {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.category-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: 0 1px 8px rgba(45, 90, 61, 0.04);
  position: relative;
  overflow: hidden;
}

/* カードの左端に薄いグリーンのライン */
.category-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-green);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.category-card:hover::before {
  opacity: 0.4;
}

.category-card:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 90, 61, 0.10);
}

.category-card--all {
  background: var(--color-surface-2);
  border-color: var(--color-border-hover);
}

.category-card--all:hover {
  border-color: var(--color-green);
  background: var(--color-surface-3);
}

.category-card-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.category-card-body {
  flex: 1;
  min-width: 0;
}

.category-card-title {
  font-family: var(--font-serif-jp);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 1px;
  letter-spacing: 0.03em;
}

.category-card-title-en {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--color-text-dim);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
}

.category-card-count {
  font-size: 0.75rem;
  color: var(--color-green);
  margin-bottom: var(--space-xs);
  font-variant-numeric: tabular-nums;
}

.category-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  line-height: 1.6;
}

/* ===== MUSIC LIBRARY ===== */
.music-library {
  background: var(--color-bg);
}

.library-search-wrap {
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}

.library-search-box {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.75rem var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-shadow: 0 1px 8px rgba(45, 90, 61, 0.05);
}

.library-search-box:focus-within {
  border-color: var(--color-green);
  box-shadow: 0 2px 16px rgba(45, 90, 61, 0.12);
}

.search-icon {
  color: var(--color-text-dim);
  flex-shrink: 0;
}

.library-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-sans-jp);
  font-size: 0.875rem;
  color: var(--color-text);
  caret-color: var(--color-green);
}

.library-search-input::placeholder {
  color: var(--color-text-dim);
}

.library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.tag-btn {
  padding: 0.4rem 1rem;
  font-family: var(--font-sans-jp);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: all var(--transition-base);
  cursor: pointer;
}

.tag-btn:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-pale);
}

.tag-btn--active {
  background: var(--color-green-pale);
  border-color: var(--color-green);
  color: var(--color-green);
}

/* トラックリスト */
.track-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--space-2xl);
}

.track-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}

.track-item:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 12px rgba(45, 90, 61, 0.07);
}

.track-item.playing {
  background: var(--color-surface-2);
  border-color: var(--color-green);
  border-left: 3px solid var(--color-green);
}

.track-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--color-text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.track-item.playing .track-num {
  color: var(--color-green);
}

.track-info {
  min-width: 0;
}

.track-title {
  font-family: var(--font-serif-jp);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.track-item.playing .track-title {
  color: var(--color-green);
}

.track-title-en {
  font-size: 0.7rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.track-tag {
  padding: 1px 6px;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  background: var(--color-surface-3);
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

.track-duration {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.track-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  cursor: pointer;
  flex-shrink: 0;
}

.track-play-btn:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-pale);
}

.track-item.playing .track-play-btn {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-pale);
}

.library-more {
  text-align: center;
}

/* ===== COMPOSER ===== */
/* セクション間の余白リズム — 静の「間」を広く取る */
.composer .section-container {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.composer {
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

/* 右上に蔦の装飾 */
.composer::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M200,0 Q140,60 160,120 Q180,180 120,200' stroke='%232d5a3d' stroke-width='1' fill='none' opacity='0.09'/%3E%3Ccircle cx='158' cy='118' r='3.5' fill='%232d5a3d' opacity='0.07'/%3E%3Cpath d='M160,120 Q148,108 150,95' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.07'/%3E%3Cpath d='M160,120 Q172,112 175,125' stroke='%232d5a3d' stroke-width='0.8' fill='none' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

.composer-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-4xl);
  align-items: center;
}

.composer-text {
  max-width: 560px;
}

.composer-name {
  font-family: var(--font-serif-jp);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

.composer-name-en {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--color-green);
  margin-bottom: var(--space-xl);
  text-transform: uppercase;
}

.composer-bio {
  text-wrap: pretty;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 2.2;
  margin-bottom: var(--space-md);
  font-feature-settings: 'palt' 1;
}

.composer-bio-en {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  line-height: 1.8;
  margin-bottom: var(--space-2xl);
  font-style: italic;
}

.composer-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* SNSアイコンボタン */
.composer-social-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-green);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.composer-social-btn:hover {
  border-color: var(--color-border-hover);
  color: var(--color-green-mid);
  background: var(--color-green-pale);
}

.composer-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.composer-emblem {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid var(--color-border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--color-surface);
  box-shadow: 0 4px 24px rgba(45, 90, 61, 0.08);
}

.composer-emblem::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.composer-emblem::after {
  content: '';
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(45, 90, 61, 0.05) 0%, transparent 70%);
}

.composer-emblem-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  z-index: 1;
}

.composer-emblem-text {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-green);
}

.composer-emblem-year {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

/* アルバムジャケット（Composer セクション） */
.composer-album {
  display: block;
  text-decoration: none;
  text-align: center;
}
.composer-album__jacket {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(154, 223, 180, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.composer-album:hover .composer-album__jacket {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(154, 223, 180, 0.28);
}
.composer-album__label {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

.composer-album__cta {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans-jp);
  font-size: 0.72rem;
  color: var(--color-green);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.composer-album:hover .composer-album__cta {
  opacity: 1;
}

/* ===== LICENSE INFO ===== */
.license-info {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

.license-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/bg/terms.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}


.license-info .section-container {
  position: relative;
  z-index: 1;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.license-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: 720px;
  margin: 0 auto;
}

.license-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  align-items: stretch;
}

@media (max-width: 1000px) {
  .license-grid--3 {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

.license-tier-note {
  max-width: 1100px;
  margin: var(--space-xl) auto 0;
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--color-text-muted);
  text-align: center;
}

.license-tier-note b {
  color: var(--color-text);
  font-weight: 600;
}

.license-tier-note a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  color: var(--color-green);
}

.license-card--pro .license-card-list--rates li {
  padding-left: 0;
  font-size: 0.8rem;
  line-height: 1.7;
}

.license-card--pro .license-card-list--rates li::before {
  content: none;
}

.license-card--pro .license-card-list--rates li > span {
  display: block;
  padding-left: 4.3rem;
  text-indent: -4.3rem;
}

.license-card--pro .license-card-list--rates b {
  display: inline-block;
  width: 4.3rem;
  text-indent: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-green);
  white-space: nowrap;
}

.license-card {
  padding: var(--space-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  box-shadow: 0 2px 16px rgba(45, 90, 61, 0.05);
}

.license-card--free {
  box-shadow:
    0 2px 16px rgba(45, 90, 61, 0.05),
    inset 0 1px 0 rgba(100, 180, 130, 0.10);
}

.license-card--free .license-card-badge {
  color: var(--color-green);
  border-color: var(--color-green);
  background: var(--color-green-pale);
}

.license-card--commercial {
  border: 1px solid var(--color-border-gold);
  background: linear-gradient(165deg, var(--color-surface) 0%, rgba(138, 112, 64, 0.06) 100%);
  box-shadow:
    0 2px 20px rgba(138, 112, 64, 0.08),
    inset 0 1px 0 rgba(138, 112, 64, 0.12);
}

.license-card--commercial .license-card-header {
  border-bottom: 1px solid rgba(138, 112, 64, 0.15);
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
}

.license-card-header {
  text-align: center;
}

.license-card-badge {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.license-card-badge--gold {
  color: var(--color-green);
  border-color: var(--color-border-hover);
}

.license-card-title {
  font-family: var(--font-serif-jp);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.license-card-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-green);
  letter-spacing: 0.05em;
}

.license-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.license-card-list li {
  text-wrap: pretty;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding-left: var(--space-lg);
  position: relative;
}

.license-card-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-green);
  opacity: 0.5;
}

/* ===== FOOTER ===== */
.site-footer {
  position: relative;
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
}

/* 固定プレイヤー用に body へ確保した余白が、body の黒のまま帯に見えていた。
   フッターと同じ色で塗る（高さは確保している余白と同じなので文書は伸びない）。 */
.site-footer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 88px;
  background: var(--color-bg-2);
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-footer::after { height: 90px; }
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4xl);
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
}

.footer-logo {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.footer-desc {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  line-height: 1.8;
  max-width: 300px;
}

.footer-nav {
  display: flex;
  gap: var(--space-3xl);
}

.footer-nav-heading {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--color-green);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-nav-list a {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  transition: color var(--transition-base);
}

.footer-nav-list a:hover {
  color: var(--color-green);
}

.footer-bottom {
  text-align: center;
}

.footer-copy {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  letter-spacing: 0.05em;
}

/* ===== FOOTER v2: site-footer__* ===== */
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10vh var(--space-xl) 6vh;
}

/* ── ブランド導入 ── */
.site-footer__intro {
  margin-bottom: 5vh;
  padding-bottom: 5vh;
  border-bottom: 1px solid var(--color-border);
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-green);
  margin: 0 0 var(--space-sm);
}

.site-footer__tagline {
  font-family: var(--font-serif-jp);
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.06em;
}

.site-footer__desc {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  line-height: 1.8;
  margin: 0;
}

/* ── Favorites ブロック ── */
.site-footer__favorites {
  margin-bottom: 5vh;
  padding: 24px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.site-footer__fav-heading {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 10px;
}

.site-footer__fav-desc {
  text-wrap: pretty;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin: 0;
}

.site-footer__fav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  font-family: var(--font-sans-jp);
}

.footer-fav-btn:hover {
  color: var(--color-text);
  border-color: var(--color-green);
  background: var(--color-green-pale);
}

.site-footer__fav-count {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

/* ── 4カラムナビ ── */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3xl);
  margin-bottom: 5vh;
  padding-bottom: 5vh;
  border-bottom: 1px solid var(--color-border);
}

.site-footer__nav-heading {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-lg);
}

.site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__nav-list a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  text-wrap: pretty;
  font-size: 0.8rem;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.nav-lang-toggle {
  min-height: 40px;
}

.footer-fav-btn {
  min-height: 42px;
}

.site-footer__nav-list a:hover {
  color: var(--color-green);
  padding-left: 4px;
}

/* 段組みで列が狭くなるとアイコンとラベルが縦に割れる。
   .site-footer__nav-list a より特異度を上げないと display が効かない。 */
.site-footer__nav-list a.site-footer__x-link,
.site-footer__x-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ── 最下部 ── */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
}

/* ボタン内の文字が1文字だけ折り返すのを防ぐ（320px でカード3枚とも割れていた） */
@media (max-width: 400px) {
  .license-card-actions .btn {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }
}

/* ── レスポンシブ ── */
@media (max-width: 900px) {
  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

@media (max-width: 600px) {
  /* グリッドだと Genres(11項目) に行高が揃い、Explore(3項目) の下に約370pxの穴が空く。
     段組みにして中身を流し込むと、ブラウザが2列の高さを均してくれる。 */
  .site-footer__nav {
    display: block;
    columns: 2;
    column-gap: var(--space-xl);
  }
  .site-footer__nav-group {
    break-inside: avoid;
    margin-bottom: var(--space-2xl);
  }
  .site-footer__favorites {
    padding: 18px 20px;
  }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

/* 波紋パルス（Hero再生中） */
@keyframes ripplePulse {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.08); opacity: 0.15; }
  100% { transform: scale(1); opacity: 0.4; }
}

/* 音の波形アニメーション */
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* 灯籠のゆらぎ（4〜7秒周期） */
@keyframes lanternGlow {
  0%   { opacity: 0.6; }
  30%  { opacity: 1.0; }
  55%  { opacity: 0.7; }
  80%  { opacity: 1.0; }
  100% { opacity: 0.6; }
}

/* パーティクル（蛛/光の粒） */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(160, 210, 170, 0.6);
  animation: particleFloat linear infinite;
  opacity: 0;
}

/* スクロールアニメーション */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 音の波形ビジュアライザー（Hero用） ===== */
.hero-sound-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-sound-bars.active {
  opacity: 1;
}

.hero-sound-bar {
  width: 3px;
  background: rgba(160, 210, 170, 0.6);
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(0.4);
}

.hero-sound-bars.active .hero-sound-bar:nth-child(1) { animation: waveBar 0.8s ease-in-out 0.0s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(2) { animation: waveBar 0.8s ease-in-out 0.1s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(3) { animation: waveBar 0.8s ease-in-out 0.2s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(4) { animation: waveBar 0.8s ease-in-out 0.15s infinite; }
.hero-sound-bars.active .hero-sound-bar:nth-child(5) { animation: waveBar 0.8s ease-in-out 0.05s infinite; }

/* ===== HERO TODAY'S MUSIC — 1曲日替わり表示 ===== */
.hero-todays-music {
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp 1s ease 1.0s forwards;
}

/* ローディング時のスケルトンヒント */
.hero-todays-list:empty::after {
  content: '';
  display: block;
  width: 200px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  animation: skeletonPulse 2s ease-in-out infinite;
  margin: 0 auto;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.hero-todays-label {
  font-family: var(--font-serif-jp);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: rgba(140, 190, 155, 0.85);
  text-align: center;
  margin-bottom: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.70);
}

/* 1曲用カード */
.hero-daily-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  background: rgba(4, 12, 8, 0.72);
  border: 1px solid rgba(100, 160, 120, 0.25);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero-daily-card:hover {
  background: rgba(8, 22, 14, 0.80);
  border-color: rgba(120, 180, 140, 0.38);
}

.hero-daily-card.playing {
  background: rgba(10, 28, 18, 0.82);
  border-color: rgba(100, 190, 130, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(80, 180, 110, 0.15);
}

.hero-daily-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.hero-daily-name {
  font-family: var(--font-serif-jp);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(232, 252, 240, 0.98);
  letter-spacing: 0.04em;
  white-space: normal;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.hero-daily-card.playing .hero-daily-name {
  color: rgba(165, 235, 185, 1);
}

.hero-daily-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* タグは共通クラスを流用 */
.hero-daily-tags .hero-track-tag {
  font-size: 0.60rem;
}

.hero-daily-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.hero-daily-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hero-daily-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(55, 115, 80, 0.60);
  border: 1px solid rgba(120, 195, 148, 0.55);
  color: rgba(215, 248, 225, 0.98);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.hero-daily-play-btn:hover {
  background: rgba(70, 140, 100, 0.75);
  border-color: rgba(140, 210, 165, 0.70);
  transform: scale(1.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(80, 180, 110, 0.20);
}

.hero-daily-card.playing .hero-daily-play-btn {
  background: rgba(50, 120, 80, 0.70);
  border-color: rgba(120, 210, 150, 0.65);
  color: rgba(170, 240, 190, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 16px rgba(80, 200, 120, 0.25);
}

.hero-daily-detail {
  font-family: var(--font-display);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  color: rgba(145, 205, 165, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.70);
}

.hero-daily-detail:hover {
  color: rgba(180, 238, 198, 0.95);
}

/* ── Today's Music: Fav / Download buttons ── */
.hero-daily-fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(185, 150, 70, 0.28);
  color: rgba(185, 150, 70, 0.42);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.hero-daily-fav-btn:hover {
  color: rgba(255, 159, 58, 0.85);
  border-color: rgba(255, 140, 40, 0.50);
  background: rgba(255, 140, 40, 0.08);
}

.hero-daily-fav-btn.is-fav {
  color: rgba(255, 159, 58, 0.96);
  border-color: rgba(255, 140, 40, 0.55);
  background: rgba(255, 140, 40, 0.12);
  box-shadow: 0 0 8px rgba(255, 140, 40, 0.28);
}

.hero-daily-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(145, 205, 165, 0.25);
  color: rgba(145, 205, 165, 0.48);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  text-decoration: none;
}

.hero-daily-dl-btn:hover {
  color: rgba(180, 238, 198, 0.90);
  border-color: rgba(145, 205, 165, 0.55);
  background: rgba(80, 160, 110, 0.12);
}

/* 旧リストUI（互換性のため残存） */
.hero-track-tag {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: rgba(160, 215, 175, 0.90);
  background: rgba(60, 110, 80, 0.35);
  border: 1px solid rgba(100, 160, 120, 0.30);
  border-radius: 100px;
  padding: 0.1rem 0.4rem;
}

.hero-track-detail-link:hover {
  color: rgba(180, 235, 195, 0.95);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .scene-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .scene-card:nth-child(4),
  .scene-card:nth-child(5) {
    grid-column: span 1;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .composer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .composer-visual {
    order: -1;
  }

  .composer-emblem {
    width: 160px;
    height: 160px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-4xl) var(--space-lg);
  }

  .nav-list {
    display: flex;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: rgba(8, 16, 12, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    padding: 1rem 2rem 1.2rem;
    gap: 0.8rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(80, 160, 110, 0.12);
    overflow-y: auto;
    max-height: calc(100dvh - var(--header-height));
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.7rem);
    transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0.24s;
  }

  /* メニュー内リンク色をダークテーマに、タップターゲットを WCAG 44px 以上に */
  .nav-list .nav-link {
    color: #b0c8b8;
    font-size: 0.95rem;
    letter-spacing: 0.10em;
    padding: 0.9rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-list .nav-link:hover,
  .nav-list .nav-link--active {
    color: #9adfb4;
  }
  .nav-list .nav-item {
    width: 100%;
    text-align: center;
  }
  /* ドロップダウン: 行全幅をタップ可能に（文字幅だけだった旧挙動を修正） */
  .nav-list .nav-item--dropdown > .nav-link {
    display: block;
    width: 100%;
    padding: 1rem 2.2rem;
    min-height: 48px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }
  .nav-list .nav-item--dropdown > .nav-link::before {
    display: block;
    right: 1rem;
    width: 9px;
    height: 9px;
    border-right-width: 1.5px;
    border-bottom-width: 1.5px;
    opacity: 0.85;
  }
  .nav-list.open .nav-submenu,
  .nav-list .nav-submenu {
    display: none;
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    margin: 0.1rem 0 0.35rem;
    padding: 0.1rem 0 0.1rem 0.9rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav-list.open .nav-item--dropdown:hover .nav-submenu,
  .nav-list.open .nav-item--dropdown:focus-within .nav-submenu,
  .nav-list .nav-item--dropdown:hover .nav-submenu,
  .nav-list .nav-item--dropdown:focus-within .nav-submenu {
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .nav-list .nav-item--submenu-open .nav-submenu {
    display: block;
  }

  .nav-list .nav-item--submenu-open > .nav-link::before {
    transform: translateY(-35%) rotate(225deg);
  }

  .nav-list .nav-submenu::before {
    display: none;
  }
  .nav-list .nav-submenu__link {
    display: block;
    padding: 0.7rem 0.4rem;
    min-height: 40px;
    color: rgba(176, 200, 184, 0.86);
    background: transparent;
    font-size: 0.86rem;
    line-height: 1.4;
  }
  .nav-list .nav-submenu__link:hover,
  .nav-list .nav-submenu__link--active {
    color: #9adfb4;
    background: transparent;
  }
  .nav-list .nav-link--cta {
    border-color: rgba(100, 180, 130, 0.35);
    color: #9adfb4;
  }
  .nav-list .nav-link--cta:hover {
    background: rgba(100, 180, 130, 0.12);
    border-color: rgba(100, 180, 130, 0.6);
  }
  .nav-list .nav-lang-toggle {
    border-color: rgba(100, 180, 130, 0.3);
    color: #9adfb4;
    align-self: flex-start;
  }
  .nav-list .nav-lang-toggle:hover {
    border-color: rgba(100, 180, 130, 0.6);
    background: rgba(100, 180, 130, 0.1);
  }

  .nav-list.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0s;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 10030;
  }

  body.has-mobile-action-dock {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.has-mobile-action-dock .mobile-action-dock {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 10020;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(126, 203, 149, 0.22);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(15, 27, 20, 0.94), rgba(8, 15, 11, 0.96)),
      rgba(8, 15, 11, 0.96);
    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.has-mobile-action-dock .mobile-action-dock__item {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(126, 203, 149, 0.16);
    border-radius: 6px;
    color: rgba(214, 235, 220, 0.88);
    background: rgba(255, 255, 255, 0.035);
    text-decoration: none;
  }

  body.has-mobile-action-dock .mobile-action-dock__item--primary {
    border-color: rgba(226, 192, 112, 0.55);
    color: rgba(255, 241, 202, 0.98);
    background: linear-gradient(180deg, rgba(196, 164, 69, 0.24), rgba(126, 203, 149, 0.08));
  }

  body.has-mobile-action-dock .mobile-action-dock__icon {
    font-family: var(--font-display);
    font-size: 0.78rem;
    line-height: 1;
    color: #9adfb4;
  }

  body.has-mobile-action-dock .mobile-action-dock__item--primary .mobile-action-dock__icon {
    color: #e2c070;
  }

  body.has-mobile-action-dock .mobile-action-dock__label {
    font-size: 0.72rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  body.top-page .site-logo {
    min-width: 0;
  }

  body.top-page .logo-text,
  body.top-page .logo-sub {
    white-space: nowrap;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .scene-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scene-card:nth-child(5) {
    grid-column: span 2;
    aspect-ratio: 5/2;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .track-item {
    grid-template-columns: 36px 1fr auto;
  }

  .track-tags {
    display: none;
  }

  .license-grid {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: var(--space-2xl);
  }

  .hero-stats {
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  body.top-page .header-inner {
    padding-inline: 0.9rem;
  }

  body.top-page .site-nav {
    gap: 0.8rem;
  }

  body.top-page .logo-text {
    font-size: 0.98rem;
    letter-spacing: 0.08em;
  }

  body.top-page .logo-sub {
    font-size: 0.52rem;
    letter-spacing: 0.14em;
  }

  .scene-grid {
    grid-template-columns: 1fr 1fr;
  }

  .scene-card:nth-child(5) {
    grid-column: span 2;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .todays-player {
    flex-direction: column;
    align-items: flex-start;
  }

  .play-btn {
    align-self: center;
  }

  .hero-stats {
    gap: var(--space-md);
  }
  .hero-stat-num {
    font-size: 1.2rem;
  }
  .hero-stat-divider {
    height: 24px;
  }
}


/* ============================================================
   SECTION: SCENE TAGS（軽量導線型）
   ============================================================ */

.scene-tags-wrap {
  margin-bottom: var(--space-2xl);
}

.scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.scene-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-family: var(--font-serif-jp);
  font-size: 0.82rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
}

.scene-tag:hover {
  background: var(--color-green-pale);
  border-color: var(--color-border-hover);
  color: var(--color-green);
  transform: translateY(-1px);
}

/* ============================================================
   SECTION: FEATURED SCENES
   ============================================================ */

.featured-scenes {
  padding: var(--section-padding);
  background: var(--color-bg-2);
  position: relative;
}

.featured-scenes::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10 110 Q30 80 20 60 Q10 40 30 20 M40 115 Q55 90 50 70 Q45 50 60 30 M70 118 Q80 95 75 75 Q70 55 85 35' stroke='%232d5a3d' stroke-width='0.6' fill='none' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
}

.featured-scenes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* 8カードグリッド専用: 4+4 の2行 */
.featured-scenes-grid--8 {
  grid-template-columns: repeat(4, 1fr);
}

.featured-scene-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: 0 2px 16px rgba(42, 32, 24, 0.08);
}

.featured-scene-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(42, 32, 24, 0.14);
}

.featured-scene-card:focus-visible {
  outline: 2px solid rgba(154, 223, 180, 0.60);
  outline-offset: 3px;
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(42, 32, 24, 0.14);
}

.btn:focus-visible,
.fm-card:focus-visible {
  outline: 2px solid rgba(154, 223, 180, 0.60);
  outline-offset: 3px;
}

.featured-scene-card-bg {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-slow);
  overflow: hidden;
}

.featured-scene-card:hover .featured-scene-card-bg {
  transform: scale(1.04);
}

/* 背景画像レイヤー */
.featured-scene-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(1.5px) brightness(0.72) saturate(0.85);
  transition: transform var(--transition-slow), filter var(--transition-slow);
  transform: scale(1.04); /* blurの縁を防ぎ、少し拡大 */
}

.featured-scene-card:hover .featured-scene-card-img {
  filter: blur(0.5px) brightness(0.82) saturate(1.05);
  transform: scale(1.10);
}

.featured-scene-card:hover .featured-scene-card-content {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* 各情景カードのグラデーションオーバーレイ（画像の上に色味を乗せる） */
.featured-scene-card--japanese .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 58, 42, 0.55) 0%, rgba(45, 90, 61, 0.35) 60%, rgba(61, 122, 82, 0.20) 100%);
}
.featured-scene-card--rpg .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 42, 58, 0.55) 0%, rgba(42, 61, 90, 0.35) 60%, rgba(58, 82, 112, 0.20) 100%);
}
.featured-scene-card--sad .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 32, 48, 0.55) 0%, rgba(42, 48, 80, 0.35) 60%, rgba(58, 64, 96, 0.20) 100%);
}
.featured-scene-card--horror .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 10, 26, 0.65) 0%, rgba(42, 10, 42, 0.45) 60%, rgba(58, 20, 48, 0.25) 100%);
}
.featured-scene-card--healing .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 48, 32, 0.50) 0%, rgba(42, 80, 48, 0.30) 60%, rgba(74, 122, 80, 0.15) 100%);
}
.featured-scene-card--fun .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(42, 32, 16, 0.55) 0%, rgba(74, 56, 32, 0.35) 60%, rgba(106, 80, 48, 0.20) 100%);
}

.featured-scene-card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
  width: 100%;
  background: linear-gradient(to top, rgba(5, 10, 8, 0.92) 0%, rgba(5, 10, 8, 0.55) 50%, transparent 100%);
}

.featured-scene-icon {
  display: block;
  font-size: 1.4rem;
  margin-bottom: var(--space-xs);
  line-height: 1;
}

.featured-scene-title {
  text-wrap: pretty;
  font-family: var(--font-serif-jp);
  font-size: 0.95rem;
  font-weight: 500;
  color: #f5f0e8;
  margin-bottom: 0.2rem;
}

.featured-scene-desc {
  font-size: 0.72rem;
  color: rgba(245, 240, 232, 0.75);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
}

.featured-scene-count {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: rgba(122, 158, 110, 0.8);
  text-transform: uppercase;
}

/* カードCTA（ホバー時にふわっと表示） */
.featured-scene-card-content::after {
  content: '選曲する →';
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans-jp);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(200, 230, 210, 0.55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.featured-scene-card:hover .featured-scene-card-content::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── 幕間: シアターから現実世界への余韻 ── */
.theater-interlude {
  height: 120px;
  background: linear-gradient(
    to bottom,
    #030403 0%,
    #040806 40%,
    #050a07 70%,
    #000 100%
  );
  pointer-events: none;
  position: relative;
}

/* シアターの残光 */
.theater-interlude::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    rgba(100, 180, 130, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ============================================================
   SECTION ④: LIBRARY GATEWAY — 旅の続き
   ============================================================ */

.library-gateway {
  position: relative;
  overflow: hidden;
  padding: var(--space-5xl) 0;
  min-height: max(480px, 60vh);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom,
    #000       0%,
    #050a07   50%,
    #0a1410  100%
  );
  text-align: center;
}

/* ── Library Gateway アニメーション ── */
@keyframes lgwGlowDrift {
  0%   { transform: translate(0, 0)   scale(1);    opacity: 1; }
  30%  { transform: translate(6%, 10%) scale(1.12); opacity: 0.85; }
  65%  { transform: translate(-5%, -8%) scale(0.94); opacity: 0.95; }
  100% { transform: translate(0, 0)   scale(1);    opacity: 1; }
}

@keyframes lgwTitleBreathe {
  0%, 100% {
    text-shadow:
      0 0 60px rgba(200, 155, 60, 0.25),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
  50% {
    text-shadow:
      0 0 100px rgba(210, 165, 60, 0.55),
      0 0 200px rgba(185, 140, 40, 0.18),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
}

@keyframes lgwStreak {
  0%   { transform: translateX(-120%) skewX(-22deg); opacity: 0; }
  12%  { opacity: 0.22; }
  88%  { opacity: 0.22; }
  100% { transform: translateX(260%) skewX(-22deg); opacity: 0; }
}

/* 奥から差し込む光 — 深森の遠い灯 */
.lgw-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 35% at 50% 65%, rgba(154, 223, 180, 0.06) 0%, transparent 70%);
  animation: lgwGlowDrift 14s ease-in-out infinite;
}

/* 光の流星ライン */
.lgw-streak {
  position: absolute;
  top: 38%;
  left: 0;
  width: 50%;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(195, 165, 80, 0.45) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
  animation: lgwStreak 9s ease-in-out 3s infinite;
}

/* 上端の自然な溶け込み（薄く） */
.library-gateway::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom, #000, transparent);
  z-index: 1;
  pointer-events: none;
}
/* .library-gateway::after は不要な白いグラデーションを発生させていたため削除 */

.lgw-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
  text-align: center;
}

/* ラベル */
.lgw-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: rgba(185, 155, 80, 0.55);
  text-transform: uppercase;
  margin-bottom: var(--space-2xl);
}

/* メインコピー */
.lgw-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: rgba(240, 230, 210, 0.95);
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin-bottom: 1rem;
  white-space: nowrap;
  animation: lgwTitleBreathe 4.5s ease-in-out 0.5s infinite;
  text-shadow:
    0 0 60px rgba(200, 155, 60, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.lgw-title-en {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: rgba(185, 155, 80, 0.45);
  text-transform: uppercase;
  margin-bottom: var(--space-3xl);
}

/* サブコピー */
.lgw-desc {
  font-family: var(--font-serif-jp);
  font-size: 0.96rem;
  line-height: 2;
  color: rgba(195, 185, 165, 0.70);
  margin-bottom: var(--space-4xl);
}

/* 統計 */
.lgw-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-4xl);
}

.lgw-stat {
  text-align: center;
  padding: 0 var(--space-3xl);
}

.lgw-stat-div {
  width: 1px;
  height: 36px;
  background: rgba(185, 155, 80, 0.20);
}

.lgw-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: rgba(205, 170, 80, 0.90);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.lgw-stat-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  color: rgba(180, 165, 135, 0.50);
  text-transform: uppercase;
}

/* CTA ボタン */
.lgw-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.lgw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2.4rem;
  background: linear-gradient(135deg, rgba(185, 148, 50, 0.22), rgba(160, 120, 30, 0.14));
  border: 1px solid rgba(185, 148, 50, 0.40);
  border-radius: 2px;
  color: rgba(220, 195, 120, 0.95);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.lgw-btn-primary:hover {
  background: linear-gradient(135deg, rgba(185, 148, 50, 0.36), rgba(160, 120, 30, 0.26));
  border-color: rgba(210, 175, 80, 0.65);
  color: rgba(240, 215, 140, 1);
  box-shadow: 0 0 28px rgba(185, 148, 50, 0.18), 0 4px 20px rgba(0, 0, 0, 0.40);
}

.lgw-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.8rem;
  background: transparent;
  border: 1px solid rgba(155, 145, 125, 0.22);
  border-radius: 2px;
  color: rgba(165, 155, 135, 0.65);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.lgw-btn-ghost:hover {
  border-color: rgba(185, 155, 80, 0.35);
  color: rgba(200, 185, 145, 0.85);
}

/* is-immersive 時: lgw はブライト維持 */
body.is-immersive .library-gateway {
  filter: brightness(1.05) saturate(1.02);
}

/* ============================================================
   RESPONSIVE: Featured Scenes & Library Gateway
   ============================================================ */

@media (max-width: 1100px) {
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 最終行: 7枚目は通常幅、8枚目は幅広 */
  .featured-scenes-grid--8 > :nth-child(8) {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .featured-scenes-grid,
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-scenes-grid--8 > :nth-child(8) {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .featured-scenes-grid,
  .featured-scenes-grid--8 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  .featured-scene-card {
    min-height: 140px;
  }
  .featured-scene-title {
    font-size: 0.82rem;
  }
  .featured-scene-desc {
    display: none;
  }
  .lgw-title {
    font-size: 1.9rem;
    white-space: normal;
  }
  .lgw-stat {
    padding: 0 var(--space-lg);
  }
  .scene-tags {
    gap: 0.4rem;
  }
  .scene-tag {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
  }
}

/* ===================================================
   HERO FIREFLIES — 蛍のような光のアニメーション
   =================================================== */

.hero__fireflies {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* 蛍本体 */
.firefly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(var(--blur, 0px));
  animation:
    fireflyFloat var(--floatDur, 18s) ease-in-out infinite,
    fireflyGlow var(--glowDur, 4.8s) ease-in-out infinite;
}

/* 発光の芯 */
.firefly::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle,
      rgba(255, 243, 181, 0.98) 0%,
      rgba(255, 222, 128, 0.82) 35%,
      rgba(255, 196, 90, 0.38) 62%,
      rgba(255, 196, 90, 0) 100%);
  box-shadow:
    0 0 8px rgba(255, 208, 110, 0.55),
    0 0 18px rgba(255, 208, 110, 0.24);
}

/* うっすら尾を引く感じ */
.firefly::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--size, 8px) * 2.2);
  height: calc(var(--size, 8px) * 1.2);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 218, 120, 0.22) 0%,
    rgba(255, 218, 120, 0.08) 45%,
    rgba(255, 218, 120, 0) 100%
  );
  filter: blur(2px);
}

/* ゆったり漂う */
@keyframes fireflyFloat {
  0% {
    transform: translate3d(var(--x0), var(--y0), 0) scale(var(--scale, 1));
  }
  20% {
    transform: translate3d(var(--x1), var(--y1), 0) scale(var(--scale, 1));
  }
  40% {
    transform: translate3d(var(--x2), var(--y2), 0) scale(var(--scale, 1));
  }
  60% {
    transform: translate3d(var(--x3), var(--y3), 0) scale(var(--scale, 1));
  }
  80% {
    transform: translate3d(var(--x4), var(--y4), 0) scale(var(--scale, 1));
  }
  100% {
    transform: translate3d(var(--x0), var(--y0), 0) scale(var(--scale, 1));
  }
}

/* 明滅（不規則） */
@keyframes fireflyGlow {
  0%, 100% { opacity: 0.12; }
  8%        { opacity: 0.75; }
  16%       { opacity: 0.18; }
  28%       { opacity: 0.95; }
  42%       { opacity: 0.28; }
  57%       { opacity: 0.82; }
  73%       { opacity: 0.16; }
  88%       { opacity: 0.68; }
}

/* モバイルでは少し減らす */
@media (max-width: 768px) {
  .firefly:nth-child(n + 13) {
    display: none;
  }
}

/* 動きを減らしたい環境向け */
@media (prefers-reduced-motion: reduce) {
  .firefly {
    animation: none;
    opacity: 0.35;
  }
}

/* Hero テキストの可読性向上（各要素に個別設定済み・このルールは削除） */

/* ============================================================
   SITE HISTORY — 時間の回廊
   Scroll-linked horizontal exhibition gallery
   ============================================================ */

/* ── Outer section ── */
.site-history {
  position: relative;
  height: 300vh; /* Reduced from 420vh to compress scroll */
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    #060a08 4%,
    #040806 9%,
    #040806 91%,
    #060a08 96%,
    var(--color-bg) 100%
  );
}

/* ── Sticky panel: the exhibition room ── */
.sh-sticky-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* Cinematic background representing the 25 years journey */
  background:
    url('/assets/images/history/bg-journey.png') center / cover no-repeat;
  background-attachment: fixed; /* Parallax effect */
}

/* Dark overlay on background image */
.sh-sticky-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 8, 0.50);
  z-index: 1;
}

/* Edge vignette: heavy curtain — 緑寄り */
.sh-sticky-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  background:
    linear-gradient(to bottom, rgba(4, 12, 8, 0.70) 0%, transparent 22%),
    linear-gradient(to top,    rgba(4, 12, 8, 0.70) 0%, transparent 22%),
    linear-gradient(to right,  rgba(4, 12, 8, 0.62) 0%, transparent 28%),
    linear-gradient(to left,   rgba(4, 12, 8, 0.62) 0%, transparent 28%);
  pointer-events: none;
}

/* ── Centre spotlight — 深緑の光 ── */
.sh-spotlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(
      ellipse 22% 38% at 50% 46%,
      rgba(154, 223, 180, 0.12) 0%,
      rgba(100, 180, 130, 0.06) 32%,
      rgba(80, 160, 110, 0.02) 55%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 22% 14% at 50% 80%,
      rgba(100, 180, 130, 0.06) 0%,
      transparent 70%
    );
  pointer-events: none;
}

/* ── Background Watermark "25 YEARS" ── */
.sh-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 22vw, 24rem);
  font-weight: 700;
  color: rgba(154, 223, 180, 0.03);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  letter-spacing: 0.05em;
  user-select: none;
}

/* ── Chapter title: presides over the whole section ── */
.sh-header {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 60;
  pointer-events: none;
}

.sh-header::before {
  display: none;
}

.sh-header-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(154, 223, 180, 0.45);
  margin-bottom: 1rem;
}

.sh-header-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  color: rgba(232, 245, 236, 1.0);
  letter-spacing: 0.06em;
  margin: 0;
  text-shadow:
    0 0 8px  rgba(100, 180, 130, 0.40),
    0 0 22px rgba(80, 160, 110, 0.28),
    0 0 55px rgba(60, 140, 90, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ── Stage: clips the moving track ── */
.sh-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 10;
}

/* ── Track: horizontal flex row ── */
.sh-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 260px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 26vh;
  will-change: transform;
}

/* ── Card: image is the hero ── */
.sh-card {
  flex-shrink: 0;
  width: min(58vw, 860px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
}

/* ── Screenshot: 額縁付き — 森の展示室の肖像画 ── */
.sh-screenshot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(100, 180, 130, 0.15);
  outline: 1px solid rgba(100, 180, 130, 0.06);
  outline-offset: 6px;
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.90),
    0 5px 20px  rgba(0, 0, 0, 0.65);
  background-color: #0a1410;
  /* JS controls filter: brightness() */
  transition: box-shadow 0.55s ease, border-color 0.55s ease;
}

/* 2001-2003, 2004画像のヘッダーが見えるようにクロップ位置を上に調整 */
.sh-card[data-index="0"] .sh-screenshot,
.sh-card[data-index="1"] .sh-screenshot {
  object-position: top;
}

/* Centred image: breathes, glows — 深緑の光 */
.sh-card.is-center .sh-screenshot {
  border-color: rgba(154, 223, 180, 0.25);
  outline-color: rgba(154, 223, 180, 0.10);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.90),
    0 5px 20px   rgba(0, 0, 0, 0.65),
    0 0 50px rgba(100, 180, 130, 0.18),
    0 0 140px rgba(80, 160, 110, 0.10);
  animation: shBreath 4.5s ease-in-out infinite;
}

@keyframes shBreath {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

/* ── Era text: below the image, monumental ── */
.sh-era {
  margin-top: 36px;
  text-align: center;
  opacity: 0;
  /* JS controls opacity + translateY */
}

.sh-era-year {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 600;
  color: rgba(220, 245, 228, 0.96);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow:
    0 0 22px rgba(100, 180, 130, 0.50),
    0 0 55px rgba(80, 160, 110, 0.28),
    0 0 100px rgba(60, 140, 90, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.96);
}

.sh-era-label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.6vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(154, 223, 180, 0.50);
  margin-top: 0.6rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* ── Finale message — 格上げ ── */
.sh-finale {
  position: absolute;
  bottom: 9%;
  left: 0;
  right: 0;
  z-index: 40;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.22em;
  color: rgba(220, 245, 228, 0.80);
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 20px rgba(100, 180, 130, 0.30),
    0 2px 8px rgba(0, 0, 0, 0.70);
}

/* ── Progress timeline (bars instead of dots) ── */
.sh-dots {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 40;
  align-items: center;
}

.sh-dot {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: rgba(100, 180, 130, 0.18);
  transition: background 0.4s ease, width 0.4s ease, box-shadow 0.4s ease;
}

.sh-dot.is-active {
  background: rgba(154, 223, 180, 0.85);
  width: 48px;
  box-shadow: 0 0 8px rgba(154, 223, 180, 0.5);
}

/* ── Tablet ── */
@media (max-width: 900px) {
  .sh-card {
    width: min(72vw, 680px);
  }
  .sh-track {
    gap: 160px;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .site-history {
    height: 250vh; /* reduced significantly for better scroll pace */
  }
  .sh-card {
    width: min(88vw, 480px);
  }
  .sh-track {
    gap: 100px;
    padding-top: 20vh;
  }
  .sh-header-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .sh-era-year {
    font-size: clamp(2.4rem, 10vw, 3.5rem);
  }
}

/* ── エピローグ配置（フッター直前）: 少し静かに ── */
.site-history--epilogue {
  /* シアターほど止まらない: 高さを縮小 */
  height: 300vh;
  /* 上: license-info からの接続 / 下: フッターへの余白 */
  margin-bottom: 0;
}

.site-history--epilogue .sh-sticky-panel {
  /* filter を外し、他セクションと同等の明度に */
  filter: none;
}

.site-history--epilogue .sh-card {
  /* カードのスケールを控えめに */
  opacity: 0.90;
}

.site-history--epilogue .sh-card.is-center {
  opacity: 1;
}

@media (max-width: 640px) {
  .site-history--epilogue {
    height: 260vh;
  }
}

/* ============================================================
   FEATURED SCENES — DARK VARIANT
   音楽の旅の入口 / 8-scene dark gallery
   ============================================================ */

.featured-scenes--dark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    #0c1008 5%,
    #0a0e06 10%,
    #0a0e06 88%,
    #040604 95%,
    #000 100%
  );
  padding-top: calc(var(--section-padding) + 2rem);
  padding-bottom: calc(var(--section-padding) + 2rem);
}

.featured-scenes--dark::before {
  background-image: none;
}

/* ── Section background: cross-fade layers ── */
.fs-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fs-bg-layer {
  position: absolute;
  inset: -6%;          /* ぼかしの縁を隠す */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s ease, transform 1.8s ease;
  filter: blur(16px) brightness(0.55) saturate(0.85);
}

.fs-bg-layer.is-active {
  opacity: 1;
  transform: scale(1.05);
}

.fs-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 10, 6, 0.38) 0%,
    rgba(5, 10, 6, 0.55) 100%
  );
}

/* section-container を背景レイヤーの上に */
.featured-scenes--dark .section-container {
  position: relative;
  z-index: 1;
}

/* Section title/desc on dark background */
.section-label--light .section-label-line {
  background: rgba(185, 155, 85, 0.35);
}
.section-label--light .section-label-text {
  color: rgba(185, 155, 85, 0.75);
}
.section-title--light {
  color: rgba(245, 240, 222, 0.95);
}
.section-desc--light {
  color: rgba(200, 190, 170, 0.82);
}

/* 8-column grid (4×2) */
.featured-scenes-grid--8 {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* 情景への扉カード */
.featured-scenes--dark .featured-scene-card {
  min-height: 220px;
  border-radius: 10px;
  background: rgba(18, 34, 24, 0.88);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 60px rgba(160, 120, 40, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.40s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.40s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.40s ease;
}

.featured-scenes--dark .featured-scene-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.80),
    0 0 0 1px rgba(185, 155, 85, 0.22),
    0 4px 80px rgba(160, 120, 40, 0.22);
  border-color: rgba(185, 155, 85, 0.20);
}

/* 画像の明るさ改善 */
.featured-scenes--dark .featured-scene-card-img {
  filter: brightness(0.75) saturate(0.88);
}
.featured-scenes--dark .featured-scene-card:hover .featured-scene-card-img {
  filter: brightness(0.88) saturate(1.05);
}

/* Content: 中央配置・扉感 */
.featured-scenes--dark .featured-scene-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  background: linear-gradient(to top,
    rgba(4, 10, 6, 0.94) 0%,
    rgba(4, 10, 6, 0.50) 50%,
    transparent 100%
  );
  padding: 0 1.2rem 1.1rem;
}

.featured-scenes--dark .featured-scene-title {
  font-family: var(--font-serif-jp);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(245, 240, 222, 0.97);
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.featured-scenes--dark .featured-scene-desc {
  font-size: 0.66rem;
  color: rgba(200, 190, 170, 0.62);
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.featured-scenes--dark .featured-scene-count {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(155, 195, 135, 0.65);
  margin-top: 0.35rem;
}
/* 絵文字アイコンを非表示 */
.featured-scenes--dark .featured-scene-icon {
  display: none;
}

/* Night card overlay */
.featured-scene-card--night .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(8, 10, 28, 0.60) 0%,
    rgba(16, 18, 46, 0.40) 60%,
    rgba(28, 30, 64, 0.20) 100%
  );
}

/* Travel card overlay */
.featured-scene-card--travel .featured-scene-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(16, 28, 42, 0.58) 0%,
    rgba(26, 42, 58, 0.38) 60%,
    rgba(38, 56, 72, 0.20) 100%
  );
}

/* Responsive: 2 columns on tablet */
@media (max-width: 900px) {
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-scenes--dark .featured-scene-card {
    min-height: 170px;
  }
}

/* Responsive: 2 columns on mobile (same) */
@media (max-width: 480px) {
  .featured-scenes-grid--8 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .featured-scenes--dark .featured-scene-card {
    min-height: 140px;
  }
  .featured-scenes--dark .featured-scene-title {
    font-size: 0.8rem;
  }
  .featured-scenes--dark .featured-scene-desc {
    display: none;
  }
}

/* ============================================================
   TOP PICKUP — 割れガラス・シアター
   暗闇の中に浮かぶ情景スクリーン / プレイヤー連動
   ============================================================ */

/* ── セクション全体: 純黒 + 縦長シアター ── */
.top-pickup {
  position: relative;
  min-height: 100vh;
  background: #000;
}
.top-pickup.theater-mode {
  min-height: 240vh;
  /* margin → padding: 帯を防ぐ（bodyが透けない） */
  margin: 0;
  padding-top: 16vh;
  padding-bottom: 18vh;
  background: #000;
  /* overflow は visible のまま（sticky に必要） */
}

/* sticky コンテナ: 常に画面中央に居続ける */
.top-pickup__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  z-index: 2;
}

/* 上境界（不要になったので削除、featured-scenes が #000 で終わるため） */
.top-pickup::before {
  display: none;
}

/* 下境界: 帰還グラデ */
.top-pickup::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.9) 60%,
    #000 100%
  );
}

/* ── body 全体の暗転 ── */
body {
  transition: filter 2.4s ease, background-color 2.4s ease;
}
body.is-theater-active {
  filter: brightness(0.82);
}

/* シアター内部だけを濃く暗転（局所化） */
.top-pickup__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 3s ease;
}
.top-pickup.is-theater-deep .top-pickup__sticky::before {
  opacity: 1;
}
/* sticky 内の実コンテンツは前面に */
.top-pickup__sticky .theater,
.top-pickup__sticky .pickup-nav,
.top-pickup__sticky .pickup-dots {
  position: relative;
  z-index: 2;
}

/* ── シアター: 縦並びで中央集中 ── */
.theater {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ── 割れガラスのスクリーン ── */
.theater-screen {
  width: min(440px, 76vw);
  height: min(440px, 76vw);
  position: relative;
  clip-path: polygon(22% 0%, 78% 6%, 100% 55%, 68% 100%, 32% 92%, 0% 44%);
  overflow: hidden;
  box-shadow: none;
  cursor: pointer;

  /* 初期: 完全に隠す */
  opacity: 0;
  transform: perspective(900px) rotateX(6deg) scale(0.88);
  filter: blur(10px) brightness(0.6);
  transition: opacity 3.6s ease, transform 4.2s ease, filter 4.2s ease;
}

/* スクロールで出現 */
.top-pickup.is-revealed .theater-screen {
  opacity: 1;
  transform: perspective(900px) rotateX(2deg) scale(1);
  filter: none;
  animation: screen-breathe 7s ease-in-out 1.4s infinite;
}

/* 呼吸アニメ */
@keyframes screen-breathe {
  0%, 100% { transform: perspective(900px) rotateX(2deg) scale(1.000); }
  50%       { transform: perspective(900px) rotateX(2deg) scale(1.018); }
}

/* ── 没入が深まるとスクリーンが前に出る ── */
.top-pickup.is-theater-deep .theater-screen {
  animation: none;
  transform: perspective(900px) rotateX(0deg) scale(1.10) !important;
  filter: brightness(1.04) !important;
  transition: transform 1.8s ease, filter 1.8s ease, opacity 1.8s ease;
}

/* ── 退場前: スクリーンが引いていく ── */
.top-pickup.is-theater-exit .theater-screen {
  animation: none;
  transform: perspective(900px) rotateX(-2deg) scale(0.94) !important;
  opacity: 0.80 !important;
  filter: brightness(0.88) blur(1px) !important;
  transition: transform 1.6s ease, opacity 1.6s ease, filter 1.6s ease;
}

/* テキスト・操作: 没入中は明瞭に、退場前はフェード */
.top-pickup.is-theater-deep .theater-title,
.top-pickup.is-theater-deep .theater-copy {
  opacity: 1;
}
.top-pickup.is-theater-exit .theater-title,
.top-pickup.is-theater-exit .theater-copy,
.top-pickup.is-theater-exit .theater-actions {
  opacity: 0.55;
  transition: opacity 1.2s ease;
}

/* ── ガラス形状パターン（曲ごとに変える） ── */
/* 歪んだ六角形 — デフォルト / 森・静寂 */
.glass-1 {
  clip-path: polygon(22% 0%, 78% 6%, 100% 55%, 68% 100%, 32% 92%, 0% 44%);
}
/* 鋭角の破片 — 夜・緊張 */
.glass-2 {
  clip-path: polygon(10% 12%, 90% 0%, 100% 78%, 60% 100%, 0% 68%);
}
/* 横長の裂け目 — 旅・広がり */
.glass-3 {
  clip-path: polygon(0% 28%, 100% 18%, 92% 78%, 8% 100%);
}
/* 崩れた多角形 — 追憶・悲しみ */
.glass-4 {
  clip-path: polygon(28% 0%, 82% 18%, 100% 68%, 62% 100%, 18% 82%, 0% 38%);
}

/* 画像レイヤー（A/B クロスフェード） */
.theater-screen__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: blur(1px) brightness(0.9);
  mix-blend-mode: normal;
}

.theater-screen__layer.is-active {
  opacity: 1;
}

/* 反射レイヤーは消す */
.theater-screen::before {
  display: none !important;
}

/* 漏れ光: ガラスの縁から滲む（is-revealed 後のみ） */
.theater-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 52%,
    rgba(200, 240, 180, 0.09) 0%,
    rgba(200, 240, 180, 0.04) 30%,
    transparent 68%
  );
  filter: blur(14px);
  opacity: 0;
  transition: opacity 2.4s ease;
}
.top-pickup.is-revealed .theater-screen::after {
  opacity: 1;
}

/* 外縁グロー（clip-path に沿って滲む） */
.top-pickup.is-revealed .theater-screen {
  box-shadow:
    0 0 28px rgba(180, 220, 150, 0.07),
    0 0 70px rgba(180, 220, 150, 0.04);
}

/* ── 蛍コンテナ（ガラス内部） ── */
.window-fireflies {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.top-pickup.is-revealed .window-fireflies {
  opacity: 1;
}

/* 蛍粒子（ヒーロー版と同アニメ / 座標はJSでpx指定） */
.window-firefly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 7px);
  height: var(--size, 7px);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(var(--blur, 0.5px));
  animation:
    fireflyFloat var(--floatDur, 18s) ease-in-out infinite,
    fireflyGlow  var(--glowDur,  5s)  ease-in-out infinite;
}
.window-firefly::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle,
    rgba(255, 243, 181, 0.96) 0%,
    rgba(255, 222, 128, 0.78) 35%,
    rgba(255, 196, 90,  0.32) 62%,
    rgba(255, 196, 90,  0)    100%);
  box-shadow:
    0 0 7px  rgba(255, 208, 110, 0.50),
    0 0 16px rgba(255, 208, 110, 0.20);
}

/* 曲ごとの漏れ光色 */
.theater-screen[data-glow="blue"]::after {
  background: radial-gradient(circle at 50% 52%,
    rgba(160, 210, 255, 0.09) 0%,
    rgba(160, 210, 255, 0.04) 30%,
    transparent 68%);
}
.theater-screen[data-glow="amber"]::after {
  background: radial-gradient(circle at 50% 52%,
    rgba(255, 200, 100, 0.09) 0%,
    rgba(255, 200, 100, 0.04) 30%,
    transparent 68%);
}

/* ── 向こう側の空気 ── */

/* 霧: ゆっくり漂う光の靄 */
.window-mist {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(170, 220, 255, 0.07), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal;
  transition: opacity 3.6s ease;
  animation: mist 54s ease-in-out infinite;
}
.top-pickup.is-revealed .window-mist {
  opacity: 0.15;
}
@keyframes mist {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-10px, -5px); }
}

/* 光塵: ふわふわ浮かぶ微粒子 */
.window-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 3.6s ease;
}
.top-pickup.is-revealed .window-atmosphere {
  opacity: 1;
}

.mote {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(170, 220, 255, 0.22);
  filter: blur(1.5px);
  animation: drift 42s ease-in-out infinite;
}
.mote:nth-child(1) { left: 18%; top: 68%; animation-delay:  -6s; animation-duration: 60s; }
.mote:nth-child(2) { left: 32%; top: 54%; animation-delay: -15s; animation-duration: 51s; width: 7px;  height: 7px; }
.mote:nth-child(3) { left: 48%; top: 72%; animation-delay: -21s; animation-duration: 66s; width: 9px;  height: 9px; }
.mote:nth-child(4) { left: 64%; top: 40%; animation-delay:  -9s; animation-duration: 45s; width: 6px;  height: 6px; }
.mote:nth-child(5) { left: 74%; top: 62%; animation-delay: -24s; animation-duration: 57s; }
.mote:nth-child(6) { left: 24%; top: 34%; animation-delay: -12s; animation-duration: 72s; width: 8px;  height: 8px; }
.mote:nth-child(7) { left: 58%; top: 28%; animation-delay: -18s; animation-duration: 48s; width: 7px;  height: 7px; }
.mote:nth-child(8) { left: 82%; top: 48%; animation-delay: -27s; animation-duration: 63s; width: 6px;  height: 6px; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(0.9);        opacity: 0.08; }
  50%  { transform: translate(-12px, -30px) scale(1.08); opacity: 0.24; }
  100% { transform: translate(0, 0) scale(0.9);        opacity: 0.08; }
}

/* 光: たまに通り過ぎる */
.window-light-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.08) 50%, transparent 80%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: normal;
  opacity: 0;
  transform: translateX(-120%);
  animation: sweep 33s ease-in-out infinite;
}
@keyframes sweep {
  0%, 68%, 100% { transform: translateX(-120%); opacity: 0; }
  82%            { transform: translateX(0%);    opacity: 0.08; }
  96%            { transform: translateX(120%);  opacity: 0; }
}

/* ── テキスト ── */
.pickup-sub {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: rgba(185, 155, 85, 0.82);
  margin: 0 0 10px;
  text-shadow: 0 0 10px rgba(255, 220, 130, 0.18);
}

.theater-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(1.5rem, 3.8vw, 2.2rem);
  font-weight: 400;
  color: rgba(245, 240, 222, 0.96);
  letter-spacing: 0.10em;
  line-height: 1.3;
  text-align: center;
  margin: 0;
  /* 切り替え時フェード (JS 制御) */
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.theater-copy {
  font-size: 0.82rem;
  color: rgba(210, 200, 182, 0.58);
  letter-spacing: 0.07em;
  line-height: 1.8;
  text-align: center;
  margin: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.theater-title.is-transitioning,
.theater-copy.is-transitioning {
  opacity: 0;
  transform: translateY(6px);
}

/* ── アクションボタン ── */
.theater-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.pickup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(4, 10, 6, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(245, 240, 222, 0.82);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.28s ease, border-color 0.28s ease,
              transform 0.22s ease, box-shadow 0.28s ease;
}

.pickup-btn:hover {
  background: rgba(18, 38, 26, 0.70);
  border-color: rgba(185, 155, 85, 0.45);
  transform: scale(1.10);
  box-shadow: 0 0 20px rgba(185, 155, 85, 0.18);
}

.pickup-btn--play {
  width: 58px;
  height: 58px;
  border-color: rgba(185, 155, 85, 0.28);
}

.pickup-btn--fav.is-fav {
  border-color: rgba(200, 80, 80, 0.50);
  color: rgba(220, 100, 100, 0.90);
}
.pickup-btn--fav.is-fav .icon-fav-off { display: none; }
.pickup-btn--fav.is-fav .icon-fav-on  { display: block !important; }

/* 旧ナビは非表示（theater-arrow に置き換え） */
.pickup-nav { display: none !important; }

/* ── シアター左右矢印（曲送り） ── */
.theater {
  position: relative;
}

.theater-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.08),
    0 0 60px rgba(255, 255, 255, 0.03);
  opacity: 0.70;
  transform: translateY(-50%) scale(0.9);
  transform-origin: center center;
  transition:
    transform 1.2s ease,
    opacity 1.2s ease,
    box-shadow 1.2s ease,
    background 1.2s ease;
}

/* CSS矢印アイコン（文字不使用 → ズレなし） */
.theater-arrow__icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}
.theater-arrow__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.92);
  border-left: 2px solid rgba(255, 255, 255, 0.92);
  transform-origin: center;
}
.theater-arrow--prev .theater-arrow__icon::before {
  transform: rotate(-45deg);
}
.theater-arrow--next .theater-arrow__icon::before {
  transform: rotate(135deg);
}

/* 光円 */
.theater-arrow::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, 0.07), transparent 70%);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* theater に近づいたら浮かぶ */
.theater:hover .theater-arrow {
  opacity: 0.88;
}

/* hover: ふわっと大きく + 発光 */
.theater-arrow:hover {
  animation: none;
  transform: translateY(-50%) scale(1.25);
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.12),
    0 0 80px rgba(255, 255, 255, 0.05);
}

.theater-arrow--prev {
  left: -190px;
  animation: arrowFloatLeft 4.0s ease-in-out infinite;
}
.theater-arrow--next {
  right: -190px;
  animation: arrowFloatRight 4.4s ease-in-out infinite;
}

@keyframes arrowFloatLeft {
  0%, 100% { transform: translateY(-50%) scale(0.9); }
  50%       { transform: translateY(calc(-50% - 8px)) scale(0.9); }
}
@keyframes arrowFloatRight {
  0%, 100% { transform: translateY(-50%) scale(0.9); }
  50%       { transform: translateY(calc(-50% - 8px)) scale(0.9); }
}

@media (max-width: 1200px) {
  .theater-arrow--prev { left: 16px; }
  .theater-arrow--next { right: 16px; }
}


/* ── ドット ── */
.pickup-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.pickup-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(185, 155, 85, 0.20);
  transition: background 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.pickup-dot.is-active {
  background: rgba(185, 155, 85, 0.78);
  transform: scale(1.5);
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .top-pickup.theater-mode {
    min-height: 180vh;
    padding-top: 10vh;
    padding-bottom: 12vh;
  }
  .theater-screen {
    width: min(320px, 82vw);
    height: min(320px, 82vw);
  }
  .pickup-nav {
    width: 34px;
    height: 34px;
  }
  .pickup-btn--play {
    width: 52px;
    height: 52px;
  }
}

/* ============================================================
   IS-IMMERSIVE — ピックアップ侵入時の空気変化
   ============================================================ */

body {
  transition: background 1s ease, filter 1s ease;
}

body.is-immersive {
  background: #020504;
  filter: brightness(0.75) saturate(0.80) contrast(1.10);
}

/* ピックアップ自体は逆に浮かせる */
body.is-immersive .top-pickup {
  filter: brightness(1.05) saturate(1.05);
}

/* タグ側を少し明るく — 差を作る */
.featured-scenes--dark {
  filter: brightness(1.08);
}

/* ================================================================
   実用利用ガイド — Practical Guide
   世界観セクションと明確に切り離した実務情報の区画。
   詩的コピーの後に位置し、柔らかい和紙調の背景で区切る。
   ================================================================ */
.practical-guide {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 1.25rem;
  background: linear-gradient(180deg, rgba(12, 14, 20, 0.96) 0%, rgba(18, 20, 28, 0.98) 100%);
  color: rgba(230, 226, 214, 0.92);
  border-top: 1px solid rgba(198, 168, 120, 0.18);
}
.practical-guide::before {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto 2.25rem;
  background: linear-gradient(90deg, transparent, rgba(198, 168, 120, 0.6), transparent);
}
.practical-guide__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.practical-guide__heading {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 500;
  color: rgba(240, 226, 196, 0.94);
  letter-spacing: 0.12em;
  text-align: center;
  margin: 0 0 0.6rem;
}
.practical-guide__lead {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(200, 190, 172, 0.65);
  letter-spacing: 0.08em;
  margin: 0 0 2.5rem;
}
.practical-guide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
}
.practical-guide__block {
  font-size: 0.92rem;
  line-height: 1.9;
}
.practical-guide__sub {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: rgba(220, 196, 150, 0.92);
  letter-spacing: 0.08em;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(198, 168, 120, 0.22);
}
.practical-guide__block p {
  color: rgba(220, 216, 204, 0.82);
  margin: 0 0 0.75rem;
}
.practical-guide__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.75rem !important;
}
.practical-guide__links a {
  color: rgba(220, 196, 150, 0.9);
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(198, 168, 120, 0.3);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.practical-guide__links a:hover {
  color: rgba(255, 224, 170, 1);
  border-bottom-color: rgba(255, 224, 170, 0.7);
}
.practical-guide__genres {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
.practical-guide__genres li a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(198, 168, 120, 0.28);
  border-radius: 2px;
  color: rgba(230, 222, 204, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.02);
}
.practical-guide__genres li a:hover {
  border-color: rgba(220, 196, 150, 0.6);
  color: rgba(255, 232, 190, 1);
  background: rgba(198, 168, 120, 0.08);
}
@media (max-width: 640px) {
  .practical-guide {
    padding: 2.5rem 1rem;
  }
  .practical-guide__grid {
    gap: 1.75rem;
  }
}

/* =====================================================================
   HERO TODAY'S MUSIC — 初期スケルトン（2026-04-21 追加）
   tracks.js の defer 化に伴い、データ取得前のレイアウト保持 / CLS 対策。
   initHeroPlayer() が実データで innerHTML を差し替えると消える。
   ===================================================================== */
.hero-daily-card--skeleton {
  pointer-events: none;
}
.hero-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: heroSkeletonShimmer 1.8s ease-in-out infinite;
}
.hero-skeleton--title {
  display: block;
  width: 62%;
  height: 1.1rem;
  margin: 0 auto 0.75rem;
  border-radius: 4px;
}
.hero-skeleton--tag {
  width: 54px;
  height: 20px;
  border-radius: 999px;
  margin: 0 3px;
}
.hero-skeleton--btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.hero-skeleton--icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 4px;
}

@keyframes heroSkeletonShimmer {
  0%   { background-position: 200% 0; opacity: 0.55; }
  50%  { opacity: 0.85; }
  100% { background-position: -200% 0; opacity: 0.55; }
}

/* 動きに敏感なユーザー対応 */
@media (prefers-reduced-motion: reduce) {
  .hero-skeleton {
    animation: none;
    opacity: 0.55;
  }
}

/* /assets/css/music-library.css?v=20260906search1 */
/*
  H/MIX GALLERY — Music Library CSS v3.0
  新UI: Hero / Quick Scene / Filter Panel / Active Filters / Card Grid
  テーマ: 幻想的な美術館 × 高級ゲーム音楽図書館
  パレット: Warm Ivory × Forest Green × Soft Gold
*/

/* ===== BODY ===== */
body.library-page { background-color: var(--color-bg); }

/* ===== HERO 幻想CSS v2.0 ===== */

/* 変数追加 */
:root {
  --hmix-mist: rgba(120, 140, 120, 0.08);
  --hmix-mist-2: rgba(70, 95, 80, 0.06);
  --hmix-glow: rgba(108, 137, 108, 0.14);
  --hmix-glow-soft: rgba(170, 184, 150, 0.12);
  --hmix-gold: rgba(157, 138, 84, 0.26);
  --hmix-line: rgba(70, 80, 60, 0.08);
}

/* Hero本体 */
.music-library-hero {
  position: relative;
  z-index: 2;                         /* scene-bg(z-index:1)より上 → hero内テキスト保護 */
  overflow: hidden;
  isolation: isolate;
  padding: clamp(84px, 12vw, 160px) 20px clamp(56px, 8vw, 96px);
  background:
    radial-gradient(ellipse 72% 62% at 50% 44%, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 28%, var(--hmix-glow) 0%, rgba(0,0,0,0) 34%),
    radial-gradient(circle at 18% 18%, var(--hmix-glow-soft) 0%, rgba(0,0,0,0) 26%),
    radial-gradient(circle at 82% 22%, rgba(118, 132, 110, 0.08) 0%, rgba(0,0,0,0) 24%),
    linear-gradient(180deg, #f7f3ea 0%, #f2eee5 48%, #ece7dc 100%);
  border-bottom: 1px solid var(--hmix-line);
}

/* 薄い霧レイヤー */
.music-library-hero::before {
  content: "";
  position: absolute;
  inset: -8% -6% auto -6%;
  height: 82%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(ellipse at 30% 45%, var(--hmix-mist) 0%, rgba(0,0,0,0) 54%),
    radial-gradient(ellipse at 70% 42%, var(--hmix-mist-2) 0%, rgba(0,0,0,0) 50%);
  filter: blur(26px);
  opacity: 0.9;
  animation: heroMistFloat 16s ease-in-out infinite alternate;
}

/* 粒子・古地図風テクスチャ */
.music-library-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(70, 90, 70, 0.08) 0.6px, transparent 0.8px),
    radial-gradient(circle at 72% 18%, rgba(70, 90, 70, 0.07) 0.7px, transparent 0.9px),
    radial-gradient(circle at 38% 72%, rgba(130, 115, 80, 0.06) 0.6px, transparent 0.8px),
    linear-gradient(rgba(120, 110, 90, 0.025), rgba(120, 110, 90, 0.025));
  background-size: 180px 180px, 220px 220px, 260px 260px, 100% 100%;
  mix-blend-mode: multiply;
}

/* 内側コンテナ */
.music-library-hero__inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

/* 上の小さなラベル */
.music-library-hero__eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: rgba(92, 116, 92, 0.72);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-family: var(--font-display);
  text-shadow: 0 1px 6px rgba(247,243,234,0.85);
}

/* タイトル */
.music-library-hero__title {
  margin: 0;
  color: var(--color-green);
  font-size: clamp(44px, 8vw, 92px);
  line-height: 0.96;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 600;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.72),
    0 2px 14px rgba(255,255,255,0.40),
    0 8px 30px rgba(53,95,70,0.09);
}

/* タイトル下の薄い光ライン */
.music-library-hero__title-main,
.music-library-hero__title-sub {
  display: block;
}

.music-library-hero__title-sub {
  margin-top: 0.8rem;
  color: rgba(69, 92, 70, 0.76);
  font-family: var(--font-serif-jp);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: none;
}

.music-library-hero__title::after {
  content: "";
  display: block;
  width: min(180px, 34vw);
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(122, 109, 72, 0.22) 18%,
    rgba(80, 110, 80, 0.34) 50%,
    rgba(122, 109, 72, 0.22) 82%,
    rgba(0,0,0,0) 100%
  );
  box-shadow: 0 0 18px rgba(122, 109, 72, 0.12);
}

/* サブコピー */
.music-library-hero__lead {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--color-text);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-family: var(--font-serif-jp);
  text-shadow: 0 1px 10px rgba(247,243,234,0.90);
}

.music-library-hero__sublead {
  margin: 12px auto 0;
  color: var(--color-text-dim);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 8px rgba(247,243,234,0.85);
}

/* 検索ボックスラップ */
.music-library-hero__search-wrap {
  margin: 34px auto 0;
  max-width: 760px;
  padding: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.66));
  border: 1px solid rgba(125, 124, 106, 0.12);
  box-shadow:
    0 10px 30px rgba(44, 50, 35, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
}

/* 検索入力本体 */
.music-library-hero__search-row {
  position: relative;
}

.music-library-hero__search {
  width: 100%;
  height: 54px;
  padding: 0 20px 0 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.90);
  color: var(--color-text);
  font-size: 15px;
  font-family: var(--font-sans-jp);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(95, 100, 80, 0.07);
  transition: box-shadow 0.2s ease;
}

.music-library-hero__search:focus {
  box-shadow:
    inset 0 0 0 1.5px rgba(53, 95, 70, 0.18),
    0 0 0 3px rgba(53, 95, 70, 0.07);
}

.music-library-hero__search::placeholder { color: #9b9485; }

/* 検索アイコン */
.music-library-hero__search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.55;
  pointer-events: none;
  color: var(--color-text-dim);
}

/* クリアボタン（旧クラス互換） */
.ml-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ml-search-clear:hover { background: var(--color-bg-3); color: var(--color-text); }
.ml-search-clear svg { width: 16px; height: 16px; }

/* 人気タグ */
.music-library-hero__quick-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.music-library-hero__quick-tag-label {
  color: var(--color-text-dim);
  font-size: 12px;
  margin-right: 4px;
  align-self: center;
}

.music-library-hero__quick-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(90, 100, 80, 0.09);
  background: rgba(255, 252, 246, 0.62);
  color: #6f6a5f;
  font-size: 12px;
  font-family: var(--font-sans-jp);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.music-library-hero__quick-tag:hover {
  transform: translateY(-1px);
  color: var(--color-green);
  border-color: rgba(53, 95, 70, 0.22);
  background: rgba(255, 252, 246, 0.9);
  box-shadow: 0 10px 18px rgba(45, 50, 35, 0.06);
}

/* フェードインアニメーション */
.music-library-hero__inner > * {
  animation: heroFadeUp 900ms ease both;
}
.music-library-hero__eyebrow  { animation-delay:  40ms; }
.music-library-hero__title    { animation-delay: 110ms; }
.music-library-hero__lead     { animation-delay: 180ms; }
.music-library-hero__sublead  { animation-delay: 240ms; }
.music-library-hero__search-wrap { animation-delay: 320ms; }
.music-library-hero__quick-tags  { animation-delay: 420ms; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroMistFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, 10px, 0) scale(1.02); }
}

/* レスポンシブ: モバイル */
@media (max-width: 768px) {
  .music-library-hero {
    padding-top: 92px;
    padding-bottom: 64px;
  }
  .music-library-hero__lead {
    line-height: 1.8;
    padding: 0 8px;
  }
  .music-library-hero__search-wrap {
    padding: 10px;
    margin-top: 28px;
  }
  .music-library-hero__search {
    height: 50px;
    font-size: 14px;
    padding-left: 44px;
  }
  .music-library-hero__quick-tags { gap: 8px; }
  .music-library-hero__quick-tag {
    min-height: 30px;
    padding: 0 12px;
    font-size: 11px;
  }
}

/* 動きが苦手な環境向け */
@media (prefers-reduced-motion: reduce) {
  .music-library-hero::before,
  .music-library-hero__inner > * { animation: none !important; }
  .music-library-hero__quick-tag,
  .music-library-hero__search-wrap { transition: none !important; }
}

/* ===== LIBRARY INTRO ===== */
.ml-intro {
  text-align: center;
  padding: clamp(2.8rem, 7vw, 4.5rem) 1.5rem clamp(2rem, 5vw, 3.2rem);
  position: relative;
  z-index: 2;
}

.ml-intro__main {
  font-family: var(--font-serif-jp);
  font-weight: 300;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  color: var(--color-text);
  letter-spacing: 0.22em;
  line-height: 1.7;
  margin: 0 0 0.85em;
}

.ml-intro__sub {
  font-family: var(--font-serif-jp);
  font-weight: 300;
  font-size: clamp(0.8125rem, 2vw, 0.9375rem);
  color: var(--color-text-dim);
  letter-spacing: 0.09em;
  line-height: 1.95;
  margin: 0;
}

/* ===== QUICK SCENE NAVIGATION ===== */
.ml-quick-scene {
  padding: var(--space-2xl) var(--space-xl);
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.ml-quick-scene-inner { max-width: var(--max-width); margin: 0 auto; }
.ml-quick-scene-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-md);
}
.ml-qs-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: all var(--transition-base); text-align: center; font-family: var(--font-sans-jp);
}
.ml-qs-card:hover {
  border-color: var(--color-green-mid); background: var(--color-surface-2);
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(45,90,61,0.12);
}
.ml-qs-card.active {
  border-color: var(--color-green); background: rgba(45,90,61,0.08); color: var(--color-green);
}
.ml-qs-icon { font-size: 1.5rem; line-height: 1; }
.ml-qs-label {
  font-family: var(--font-display); font-size: 0.75rem;
  letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600;
}
.ml-qs-label-jp { font-size: 0.7rem; color: var(--color-text-dim); }

/* ===== FILTER PANEL ===== */
.ml-filter-panel {
  padding: var(--space-2xl) var(--space-xl);
  background: rgba(247, 243, 234, 0.45); /* 透けるように薄く変更 */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--color-border);
}
.ml-filter-panel-inner { max-width: var(--max-width); margin: 0 auto; }
.ml-filter-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-xl);
}
.ml-filter-heading {
  display: flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--color-green); letter-spacing: 0.08em;
}
.ml-filter-heading svg { width: 18px; height: 18px; color: var(--color-green-mid); }
.ml-filter-reset-btn {
  font-family: var(--font-sans-jp); font-size: 0.8rem; color: var(--color-text-dim);
  padding: 0.3rem 0.8rem; border: 1px solid var(--color-border); border-radius: 999px;
  cursor: pointer; transition: all var(--transition-fast);
}
.ml-filter-reset-btn:hover {
  border-color: var(--color-green-mid); color: var(--color-green); background: var(--color-green-pale);
}
/* 「すべて開く / 閉じる」一括トグル ── モバイルのみ表示（PC は連動方式） */
.ml-filter-expand-all-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-sans-jp); font-size: 0.8rem; color: var(--color-text-dim);
  padding: 0.3rem 0.8rem; border: 1px solid var(--color-border); border-radius: 999px;
  background: transparent; cursor: pointer; transition: all var(--transition-fast);
}
.ml-filter-expand-all-btn svg { transition: transform var(--transition-fast); }
.ml-filter-expand-all-btn.is-expanded svg { transform: rotate(180deg); }
.ml-filter-expand-all-btn:hover {
  border-color: var(--color-green-mid); color: var(--color-green); background: var(--color-green-pale);
}
@media (min-width: 768px) {
  .ml-filter-expand-all-btn { display: none; }
}
.ml-filter-groups {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl);
}
.ml-filter-group {
  background: rgba(255, 252, 246, 0.55); /* 透けるように薄く変更 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ml-filter-group-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg); font-family: var(--font-sans-jp);
  cursor: pointer; transition: background var(--transition-fast);
  border-bottom: 1px solid var(--color-border);
}
.ml-filter-group-toggle:hover { background: var(--color-surface-2); }
.ml-filter-group-icon { font-size: 1rem; color: var(--color-gold); flex-shrink: 0; }
.ml-filter-group-label {
  flex: 1; font-size: 0.9rem; font-weight: 500;
  color: var(--color-text); letter-spacing: 0.05em;
}
.ml-filter-group-label-jp {
  font-size: 0.75rem; color: var(--color-text-dim); margin-left: var(--space-xs);
}
.ml-filter-group-arrow {
  width: 16px; height: 16px; color: var(--color-text-dim);
  transition: transform var(--transition-base); flex-shrink: 0;
}
.ml-filter-group-toggle[aria-expanded="false"] .ml-filter-group-arrow {
  transform: rotate(-90deg);
}
.ml-filter-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg); transition: all var(--transition-base);
}
.ml-filter-chips.collapsed { display: none; }
.ml-chip {
  padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-bg);
  font-family: var(--font-sans-jp); font-size: 0.8rem;
  color: var(--color-text-muted); cursor: pointer;
  transition: all var(--transition-fast); white-space: nowrap; user-select: none;
}
.ml-chip:hover {
  border-color: var(--color-green-mid); background: var(--color-surface-2);
  color: var(--color-green); transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45,90,61,0.10);
}
.ml-chip.active {
  border-color: var(--color-green); background: var(--color-green);
  color: #fff; box-shadow: 0 2px 12px rgba(45,90,61,0.25);
}
.ml-chip.active:hover { background: var(--color-green-mid); border-color: var(--color-green-mid); }

/* 候補0件のチップ（選んでも結果が出ない） */
.ml-chip--empty {
  opacity: 0.25;
  pointer-events: none;
  cursor: default;
}

/* ===== ACTIVE FILTERS BAR ===== */
.ml-active-filters {
  background: rgba(45,90,61,0.06); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-xl);
}
.ml-active-filters-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
}
.ml-active-filters-label { font-size: 0.8rem; color: var(--color-text-dim); white-space: nowrap; }
.ml-active-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); flex: 1; }
.ml-active-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--color-green-mid); background: rgba(45,90,61,0.08);
  font-family: var(--font-sans-jp); font-size: 0.78rem;
  color: var(--color-green); cursor: pointer; transition: all var(--transition-fast);
}
.ml-active-chip:hover { background: rgba(45,90,61,0.15); border-color: var(--color-green); }
.ml-active-clear-all {
  font-family: var(--font-sans-jp); font-size: 0.78rem; color: var(--color-text-dim);
  padding: 0.25rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all var(--transition-fast);
}
.ml-active-clear-all:hover { color: var(--color-green); border-color: var(--color-green-mid); }

/* ===== RESULTS BAR ===== */
.ml-results-bar {
  padding: var(--space-md) var(--space-xl);
  background: rgba(247, 243, 234, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.ml-results-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
}
.ml-results-count {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--color-green); letter-spacing: 0.05em;
}
.ml-results-condition { font-size: 0.85rem; color: var(--color-text-muted); }
.ml-results-hint { font-size: 0.78rem; color: var(--color-text-dim); margin-left: auto; }

/* ===== SORT SELECT ===== */
.ml-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 50, 35, 0.8);
  border: 1px solid rgba(80, 140, 100, 0.35);
  border-radius: 6px;
  color: rgba(200, 220, 200, 0.9);
  font-size: 0.78rem;
  padding: 4px 28px 4px 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a0cca0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.2s;
}
.ml-sort-select:hover,
.ml-sort-select:focus {
  border-color: rgba(90, 170, 110, 0.6);
  color: rgba(220, 240, 220, 1);
  outline: none;
}
.ml-sort-select option {
  background: #0f2a1f;
  color: #c8dcc8;
}

/* ===== MUSIC CARD GRID ===== */
.ml-main {
  max-width: var(--max-width); margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
}
/* ===== MUSIC CARD GRID — Jacket UI ===== */
.ml-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }

/* カード本体 */
.ml-card {
  border-radius: var(--radius-xl); overflow: hidden;
  position: relative;
  /* アニメーション不発時でも確実に表示されるよう opacity: 0 は削除し 1 を指定 */
  opacity: 1; 
  animation: ml-card-appear 0.5s ease forwards;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@keyframes ml-card-appear {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ジャケット背景（タグ別グラデーション） */
.ml-card-jacket {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-slow);
}

/* タグ別グラデーション */
.ml-card[data-tag-primary="japanese"] .ml-card-jacket,
.ml-card[data-tag-primary="oriental"] .ml-card-jacket,
.ml-card[data-tag-primary="shrine"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d1f18 0%, #1a3a28 40%, #2a5a3c 70%, #1a3020 100%);
}
.ml-card[data-tag-primary="fantasy"] .ml-card-jacket,
.ml-card[data-tag-primary="celtic"] .ml-card-jacket,
.ml-card[data-tag-primary="medieval"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d1525 0%, #1a2a40 40%, #2a4060 70%, #1a2535 100%);
}
.ml-card[data-tag-primary="scary"] .ml-card-jacket,
.ml-card[data-tag-primary="japanese_horror"] .ml-card-jacket,
.ml-card[data-tag-primary="western_horror"] .ml-card-jacket,
.ml-card[data-tag-primary="horror"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d0510 0%, #1a0a20 40%, #2a1030 70%, #150818 100%);
}
.ml-card[data-tag-primary="battle"] .ml-card-jacket,
.ml-card[data-tag-primary="boss"] .ml-card-jacket {
  background: linear-gradient(145deg, #1a0a08 0%, #2d1510 40%, #3d2018 70%, #1a0d0a 100%);
}
.ml-card[data-tag-primary="gentle"] .ml-card-jacket,
.ml-card[data-tag-primary="peaceful"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d1a12 0%, #1a3020 40%, #2a4830 70%, #152018 100%);
}
.ml-card[data-tag-primary="sad"] .ml-card-jacket,
.ml-card[data-tag-primary="memory"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d1020 0%, #1a1a35 40%, #252545 70%, #101525 100%);
}
.ml-card[data-tag-primary="mysterious"] .ml-card-jacket,
.ml-card[data-tag-primary="dark"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d0d1a 0%, #1a1525 40%, #251a35 70%, #100d18 100%);
}
.ml-card[data-tag-primary="epic"] .ml-card-jacket {
  background: linear-gradient(145deg, #0d1018 0%, #1a1a28 40%, #252838 70%, #101218 100%);
}
/* デフォルト（タグなし・その他） */
.ml-card .ml-card-jacket {
  background: linear-gradient(145deg, #0f1a14 0%, #1a2a1e 40%, #253528 70%, #121e16 100%);
}

/* ジャケット装飾（光の粒子風） */
.ml-card-jacket::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 0%, transparent 40%),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.02) 0%, transparent 35%);
  pointer-events: none;
}

/* ジャケット装飾（下部グラデーション） */
.ml-card-jacket::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.70) 0%, transparent 100%);
  pointer-events: none;
}

/* hover時のジャケット拡大 */
.ml-card:hover .ml-card-jacket {
  transform: scale(1.04);
}

/* hover時のカード浮き上がり */
.ml-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.30), 0 6px 16px rgba(0,0,0,0.15);
}

/* 再生中 */
.ml-card.is-playing {
  box-shadow: 0 0 0 2px rgba(100,220,140,0.90), 0 0 28px rgba(80,200,120,0.30), 0 12px 40px rgba(0,0,0,0.28);
}
.ml-card.is-playing .ml-card-title {
  color: rgba(140, 245, 175, 1);
}

/* カード内コンテンツ（ジャケットの上に重ねる） */
.ml-card-inner {
  position: relative;
  z-index: 1;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
  flex: 1;
}

/* ヘッダー（ID + 再生中バー） */
.ml-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.ml-card-id {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(180, 210, 190, 0.45);
  text-transform: uppercase;
}

.ml-card-duration {
  font-size: 0.7rem;
  color: rgba(180, 210, 190, 0.40);
  font-variant-numeric: tabular-nums;
}

/* メタ情報バッジ（duration / bpm / loop） */
.ml-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ml-card-meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.60);
}

.ml-card-meta-badge--duration {
  color: rgba(180, 210, 190, 0.55);
  background: rgba(80, 160, 110, 0.10);
  border: 1px solid rgba(80, 160, 110, 0.15);
}

.ml-card-meta-badge--bpm {
  color: rgba(200, 180, 140, 0.60);
  background: rgba(180, 150, 80, 0.08);
  border: 1px solid rgba(180, 150, 80, 0.15);
}

.ml-card-meta-badge--loop {
  color: rgba(140, 200, 220, 0.65);
  background: rgba(80, 160, 200, 0.08);
  border: 1px solid rgba(80, 160, 200, 0.15);
}

/* カ��ド focus-visible */
.ml-card:focus-visible {
  outline: 2px solid var(--dark-glow-green, rgba(100, 220, 140, 0.60));
  outline-offset: 3px;
}

/* タイトル */
.ml-card-title {
  font-family: var(--font-serif-jp);
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(230, 245, 235, 0.95);
  line-height: 1.4;
  transition: color var(--transition-fast);
  text-shadow: 0 1px 8px rgba(0,0,0,0.60);
}

.ml-card:hover .ml-card-title {
  color: rgba(160, 230, 180, 1);
}

/* 説明文 */
.ml-card-desc {
  font-size: 0.78rem;
  color: rgba(190, 220, 200, 0.65);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,0.50);
}

/* タグ */
.ml-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ml-card-tag {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(140, 200, 160, 0.20);
  background: rgba(60, 120, 80, 0.15);
  font-size: 0.68rem;
  color: rgba(160, 220, 175, 0.75);
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}

/* 再生中バー */
.ml-card-playing-bar {
  display: flex; align-items: flex-end; gap: 3px; height: 18px;
  opacity: 0; transition: opacity var(--transition-base);
}
.ml-card.is-playing .ml-card-playing-bar { opacity: 1; }
.ml-card-playing-bar span {
  width: 3px; background: rgba(120, 210, 150, 0.80); border-radius: 2px;
  animation: playbar 0.8s ease-in-out infinite alternate;
}
.ml-card-playing-bar span:nth-child(1) { height: 40%; animation-delay: 0s; }
.ml-card-playing-bar span:nth-child(2) { height: 80%; animation-delay: 0.15s; }
.ml-card-playing-bar span:nth-child(3) { height: 60%; animation-delay: 0.3s; }
.ml-card-playing-bar span:nth-child(4) { height: 100%; animation-delay: 0.1s; }
.ml-card-playing-bar span:nth-child(5) { height: 50%; animation-delay: 0.25s; }
@keyframes playbar {
  from { transform: scaleY(0.4); }
  to   { transform: scaleY(1); }
}

/* アクションボタン */
.ml-card-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
}

/* 試聴ボタン（円形） */
.ml-btn-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(60, 120, 80, 0.30);
  color: rgba(200, 240, 210, 0.90);
  border: 1px solid rgba(100, 170, 120, 0.30);
  font-family: var(--font-sans-jp);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  backdrop-filter: blur(6px);
}
.ml-btn-play:hover {
  background: rgba(60, 120, 80, 0.55);
  border-color: rgba(100, 180, 130, 0.55);
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(60,120,80,0.30);
}
.ml-btn-play.playing {
  background: rgba(40, 100, 60, 0.45);
  border-color: rgba(100, 190, 130, 0.55);
  color: rgba(160, 240, 185, 1);
  box-shadow: 0 0 12px rgba(80,180,110,0.25);
}
.play-icon-svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 詳細ボタン */
.ml-btn-detail {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(180, 210, 190, 0.18);
  background: rgba(255,255,255,0.05);
  color: rgba(190, 220, 200, 0.65);
  font-family: var(--font-sans-jp);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.ml-btn-detail:hover {
  border-color: rgba(140, 200, 160, 0.40);
  color: rgba(200, 240, 215, 0.90);
  background: rgba(60, 120, 80, 0.18);
}

/* お気に入りボタン */
.ml-btn-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(200, 150, 165, 0.22);
  background: rgba(180, 80, 100, 0.08);
  color: rgba(220, 150, 170, 0.55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
  margin-left: auto;
}
.ml-btn-fav:hover {
  border-color: rgba(220, 100, 130, 0.55);
  color: rgba(240, 130, 160, 0.90);
  background: rgba(180, 60, 90, 0.18);
  transform: scale(1.12);
}
.ml-btn-fav.is-fav {
  color: rgba(235, 90, 120, 1);
  border-color: rgba(220, 100, 130, 0.65);
  background: rgba(160, 50, 80, 0.22);
}

/* ダウンロードボタン */
.ml-btn-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(180, 210, 190, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(190, 220, 200, 0.45);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  flex-shrink: 0;
}
.ml-btn-dl:hover {
  border-color: rgba(140, 200, 160, 0.45);
  color: rgba(200, 240, 215, 0.90);
  background: rgba(60, 120, 80, 0.18);
  transform: scale(1.12);
}

/* ===== 空状態 ===== */
.ml-empty { text-align: center; padding: var(--space-5xl) var(--space-xl); }
.ml-empty-inner { max-width: 480px; margin: 0 auto; }
.ml-empty-icon { font-size: 3rem; margin-bottom: var(--space-lg); opacity: 0.4; }
.ml-empty-title { font-family: var(--font-serif-jp); font-size: 1.1rem; color: var(--color-text); margin-bottom: var(--space-sm); }
.ml-empty-sub { font-size: 0.85rem; color: var(--color-text-dim); margin-bottom: var(--space-xl); }
.ml-empty-suggest { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-xl); }
.ml-chip--suggest { background: var(--color-surface); }
.ml-empty-reset {
  font-family: var(--font-sans-jp); font-size: 0.85rem; color: var(--color-green);
  padding: 0.5rem 1.2rem; border: 1px solid var(--color-green-mid); border-radius: 999px;
  cursor: pointer; transition: all var(--transition-fast);
}
.ml-empty-reset:hover { background: var(--color-green); color: #fff; }

/* ===== LOAD MORE ===== */
.ml-loadmore-wrap { text-align: center; padding: var(--space-2xl) 0; }
.ml-loadmore-btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 0.85rem 2.5rem; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  font-family: var(--font-sans-jp); font-size: 0.9rem; color: var(--color-text-muted);
  cursor: pointer; transition: all var(--transition-base); letter-spacing: 0.05em;
}
.ml-loadmore-btn:hover {
  border-color: var(--color-green-mid); color: var(--color-green);
  background: var(--color-surface-2); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,90,61,0.12);
}
.ml-loadmore-label { font-weight: 500; }
.ml-loadmore-count { font-size: 0.8rem; color: var(--color-text-dim); }

/* ===== BOTTOM CTA ===== */
.ml-bottom-cta {
  background: var(--color-bg-2); border-top: 1px solid var(--color-border);
  padding: var(--space-4xl) var(--space-xl); text-align: center;
}
.ml-bottom-cta-inner { max-width: 600px; margin: 0 auto; }
.ml-bottom-cta-text { font-family: var(--font-serif-jp); font-size: 1.3rem; color: var(--color-text); margin-bottom: var(--space-sm); }
.ml-bottom-cta-sub { font-size: 0.9rem; color: var(--color-text-dim); margin-bottom: var(--space-xl); }
.ml-bottom-cta-btns { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }

/* ===== CARD RENEWAL: Glass fantasy controls ===== */
.ml-card {
  border: 1px solid rgba(170, 220, 188, 0.16);
  background: rgba(12, 26, 18, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 46px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
.ml-card::before,
.ml-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.ml-card::before {
  inset: 10px;
  border: 1px solid rgba(226, 198, 128, 0.13);
  border-radius: calc(var(--radius-xl) - 8px);
  clip-path: polygon(0 0, 46px 0, 46px 1px, 1px 1px, 1px 46px, 0 46px, 0 0, 100% 0, 100% 46px, calc(100% - 1px) 46px, calc(100% - 1px) 1px, calc(100% - 46px) 1px, calc(100% - 46px) 0, 100% 0, 100% 100%, calc(100% - 46px) 100%, calc(100% - 46px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 46px), 100% calc(100% - 46px), 100% 100%, 0 100%, 0 calc(100% - 46px), 1px calc(100% - 46px), 1px calc(100% - 1px), 46px calc(100% - 1px), 46px 100%, 0 100%);
}
.ml-card::after {
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 198, 128, 0.52), rgba(128, 228, 166, 0.28), transparent);
}
.ml-card:hover {
  border-color: rgba(178, 234, 196, 0.30);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.38),
    0 0 34px rgba(91, 190, 124, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.ml-card:hover::before { opacity: 0.9; transform: scale(0.992); }
.ml-card:hover::after { opacity: 0.95; }
.ml-card-actions {
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.ml-btn-play,
.ml-btn-tools {
  min-height: 36px;
}
.ml-btn-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 116px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 198, 128, 0.38);
  background:
    linear-gradient(135deg, rgba(226, 198, 128, 0.18), rgba(78, 164, 110, 0.18)),
    rgba(255,255,255,0.055);
  color: rgba(246, 231, 180, 0.94);
  font-family: var(--font-sans-jp);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ml-btn-tools:hover {
  border-color: rgba(246, 216, 148, 0.72);
  color: rgba(255, 240, 190, 1);
  background:
    linear-gradient(135deg, rgba(226, 198, 128, 0.28), rgba(78, 164, 110, 0.24)),
    rgba(255,255,255,0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(226, 198, 128, 0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}
.ml-card-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.ml-card-icon-actions .ml-btn-fav {
  margin-left: 0;
}
.ml-card-icon-actions .ml-btn-detail {
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Game: compact quest HUD with status-bar energy */
body.ml-card-style-game .ml-card {
  border-radius: 6px;
  border-color: rgba(104, 236, 156, 0.28);
  background:
    linear-gradient(135deg, rgba(16, 44, 29, 0.88), rgba(7, 18, 14, 0.92)),
    rgba(5, 18, 12, 0.74);
  box-shadow: 0 18px 48px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(104,236,156,0.06);
}
body.ml-card-style-game .ml-card::before {
  inset: 8px;
  border-color: rgba(104, 236, 156, 0.22);
  border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 1px, 0 1px, 0 0, 0 100%, 1px 100%, 1px 0, 0 0, 100% 0, 100% 100%, calc(100% - 1px) 100%, calc(100% - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 1px), 100% calc(100% - 1px), 100% 100%);
}
body.ml-card-style-game .ml-card::after {
  left: 12px;
  right: 12px;
  top: auto;
  bottom: 8px;
  height: 3px;
  background: linear-gradient(90deg, rgba(104,236,156,0.95), rgba(226,198,128,0.78), transparent 72%);
}
body.ml-card-style-game .ml-card-title {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.ml-card-style-game .ml-card-tag,
body.ml-card-style-game .ml-card-meta-badge {
  border-radius: 4px;
}
body.ml-card-style-game .ml-btn-play,
body.ml-card-style-game .ml-btn-tools {
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.ml-card-style-game .ml-btn-tools {
  border-color: rgba(104,236,156,0.50);
  color: rgba(190,255,214,0.96);
  background: linear-gradient(180deg, rgba(44,132,78,0.36), rgba(10,48,30,0.46));
}

/* Fantasy: ornate, warmer, manuscript-like */
body.ml-card-style-fantasy .ml-card {
  border-radius: 14px 4px 14px 4px;
  border-color: rgba(226, 198, 128, 0.28);
  background:
    radial-gradient(circle at 18% 10%, rgba(226,198,128,0.13), transparent 30%),
    linear-gradient(145deg, rgba(44, 34, 22, 0.82), rgba(14, 26, 18, 0.90));
  box-shadow: 0 18px 52px rgba(0,0,0,0.42), inset 0 0 28px rgba(226,198,128,0.055);
}
body.ml-card-style-fantasy .ml-card::before {
  inset: 9px;
  border-color: rgba(226, 198, 128, 0.30);
  border-radius: 10px 3px 10px 3px;
}
body.ml-card-style-fantasy .ml-card::after {
  left: 22%;
  right: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,236,170,0.72), transparent);
}
body.ml-card-style-fantasy .ml-card-title {
  color: rgba(255, 242, 202, 0.98);
}
body.ml-card-style-fantasy .ml-card-tag {
  border-color: rgba(226, 198, 128, 0.28);
  background: rgba(92, 66, 34, 0.22);
  color: rgba(244, 224, 170, 0.86);
}
body.ml-card-style-fantasy .ml-btn-tools {
  border-color: rgba(255, 222, 150, 0.58);
  background: linear-gradient(135deg, rgba(136, 92, 34, 0.30), rgba(50, 96, 58, 0.20));
  color: rgba(255, 236, 184, 1);
}

/* Bold: angular, editorial, high-contrast */
body.ml-card-style-bold .ml-card {
  border-radius: 3px;
  border-color: rgba(246, 216, 148, 0.30);
  background:
    linear-gradient(112deg, rgba(7, 13, 11, 0.96) 0 56%, rgba(47, 82, 54, 0.68) 56% 100%);
  box-shadow: 0 22px 60px rgba(0,0,0,0.48);
}
body.ml-card-style-bold .ml-card::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(112deg, transparent 0 55%, rgba(246,216,148,0.24) 55.2%, transparent 56%);
  clip-path: none;
}
body.ml-card-style-bold .ml-card::after {
  left: 0;
  right: auto;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, rgba(246,216,148,0.94), rgba(104,236,156,0.62));
}
body.ml-card-style-bold .ml-card-title {
  font-size: 1.22rem;
  color: rgba(255,255,244,0.98);
}
body.ml-card-style-bold .ml-card-desc {
  max-width: 82%;
}
body.ml-card-style-bold .ml-btn-play,
body.ml-card-style-bold .ml-btn-tools {
  border-radius: 2px;
}
body.ml-card-style-bold .ml-btn-tools {
  min-width: 126px;
  background: rgba(246, 216, 148, 0.20);
  border-color: rgba(246, 216, 148, 0.70);
  color: rgba(255, 245, 205, 1);
}

/* Forest Glass: ClaudeDesign-inspired iridescent forest card */
.fg-noise,
.fg-iridescent,
.fg-specular,
.fg-gloss,
.fg-halo {
  display: none;
}

body.ml-card-style-forest-glass {
  --tilt-max: 8deg;
  --hover-lift: 6px;
  --hover-scale: 1.018;
  --surface-alpha: 0.62;
  --surface-blur: 14px;
  --surface-tint: 0.55;
  --light-hue: 132;
  --light-peak: 0.995;
  --light-chroma: 0.16;
  --specular-alpha: 1;
  --specular-size: 44%;
  --specular-sharp: 0.50;
  --secondary-spec: 0.85;
  --iridescent-alpha: 0.72;
  --iridescent-shift: 0deg;
  --reveal-edge: 0.60;
  --glow-color: 142;
  --glow-alpha: 0.48;
  --ambient-light: 0.18;
  --noise-alpha: 0.045;
  --tools-glow: 0.95;
}

body.ml-card-style-forest-glass .ml-card {
  --hover-active: 0;
  border-radius: 18px;
  border: 1px solid oklch(0.74 0.06 142 / 0.22);
  background:
    radial-gradient(140% 70% at 50% 0%,
      oklch(0.62 0.14 var(--light-hue) / calc(0.22 * var(--surface-alpha) * var(--surface-tint))),
      transparent 55%),
    radial-gradient(120% 80% at 50% 0%,
      oklch(0.34 0.07 152 / calc(0.55 * var(--surface-alpha))),
      transparent 60%),
    linear-gradient(160deg,
      oklch(0.27 0.05 152 / var(--surface-alpha)) 0%,
      oklch(0.20 0.04 152 / var(--surface-alpha)) 55%,
      oklch(0.16 0.03 152 / var(--surface-alpha)) 100%);
  backdrop-filter: blur(var(--surface-blur)) saturate(1.08);
  -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(1.08);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 var(--light-hue) / calc(var(--reveal-edge) * 0.7)),
    inset 0 0 0 1px oklch(0.74 0.06 142 / 0.06),
    0 1px 1px oklch(0.04 0.005 150 / 0.4),
    0 12px 30px -10px oklch(0.04 0.005 150 / 0.55);
  transform: none;
  transform-origin: 50% 50%;
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s,
    border-color .35s;
  will-change: transform;
  isolation: isolate;
}

body.ml-card-style-forest-glass .ml-card::before,
body.ml-card-style-forest-glass .ml-card::after {
  opacity: 0;
}

body.ml-card-style-forest-glass .ml-card-jacket {
  background:
    radial-gradient(ellipse 70% 60% at 30% -10%,
      oklch(0.78 0.14 var(--light-hue) / calc(0.55 * var(--surface-tint))),
      transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 14%,
      oklch(0.92 0.12 110 / calc(0.20 * var(--surface-tint))),
      transparent 60%),
    linear-gradient(170deg,
      oklch(0.26 0.07 var(--light-hue) / calc(0.85 * var(--surface-alpha))) 0%,
      oklch(0.14 0.03 150 / calc(0.95 * var(--surface-alpha))) 100%);
  opacity: calc(0.4 + 0.6 * var(--surface-alpha));
}

body.ml-card-style-forest-glass .ml-card-jacket::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, oklch(0.92 0.08 152 / 0.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(25deg, oklch(0.86 0.10 90 / 0.03) 0 1px, transparent 1px 22px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

body.ml-card-style-forest-glass .ml-card-inner {
  z-index: 2;
}

body.ml-card-style-forest-glass .fg-noise,
body.ml-card-style-forest-glass .fg-iridescent,
body.ml-card-style-forest-glass .fg-specular,
body.ml-card-style-forest-glass .fg-gloss,
body.ml-card-style-forest-glass .fg-halo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body.ml-card-style-forest-glass .fg-iridescent {
  background:
    conic-gradient(from calc(120deg + var(--iridescent-shift)),
      oklch(0.96 0.14 var(--light-hue) / 0) 0deg,
      oklch(0.98 0.14 var(--light-hue) / 0.82) 28deg,
      oklch(0.99 0.10 100 / 0.72) 60deg,
      oklch(0.95 0.18 130 / 0.78) 95deg,
      oklch(0.92 0.16 152 / 0.58) 140deg,
      oklch(0.86 0.18 142 / 0.64) 180deg,
      oklch(0.94 0.14 122 / 0.48) 230deg,
      oklch(0.99 0.10 100 / 0.34) 290deg,
      oklch(0.96 0.14 var(--light-hue) / 0) 360deg);
  -webkit-mask-image:
    radial-gradient(circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      black 0%, black 14%, transparent 58%);
          mask-image:
    radial-gradient(circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      black 0%, black 14%, transparent 58%);
  mix-blend-mode: plus-lighter;
  opacity: calc(var(--iridescent-alpha) * (var(--ambient-light, 0) + var(--hover-active, 0)));
  filter: blur(5px) saturate(1.35);
  transition: opacity .35s ease;
}

body.ml-card-style-forest-glass .fg-iridescent--sharp {
  filter: none;
  opacity: calc(var(--iridescent-alpha) * 0.48 * (var(--ambient-light, 0) * 0.5 + var(--hover-active, 0)));
  -webkit-mask-image:
    radial-gradient(circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      black 0%, black 6%, transparent 30%);
          mask-image:
    radial-gradient(circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      black 0%, black 6%, transparent 30%);
}

body.ml-card-style-forest-glass .fg-specular {
  background:
    radial-gradient(
      calc(var(--specular-size) * (0.18 + (1 - var(--specular-sharp)) * 0.10))
      calc(var(--specular-size) * (0.18 + (1 - var(--specular-sharp)) * 0.10))
      at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      oklch(var(--light-peak) var(--light-chroma) var(--light-hue) / calc(var(--specular-alpha) * var(--secondary-spec))) 0%,
      oklch(0.95 0.18 var(--light-hue) / calc(var(--specular-alpha) * var(--secondary-spec) * 0.55)) 28%,
      transparent 60%),
    radial-gradient(
      var(--specular-size) var(--specular-size)
      at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
      oklch(var(--light-peak) var(--light-chroma) var(--light-hue) / calc(var(--specular-alpha) * (0.9 - var(--specular-sharp) * 0.3))) 0%,
      oklch(0.92 0.18 calc(var(--light-hue) + 14) / calc(var(--specular-alpha) * 0.55)) 22%,
      oklch(0.88 0.16 152 / calc(var(--specular-alpha) * 0.30)) 45%,
      transparent 70%);
  mix-blend-mode: plus-lighter;
  opacity: calc(var(--ambient-light, 0) * 0.55 + var(--hover-active, 0));
  filter: saturate(1.15);
  transition: opacity .35s ease;
}

body.ml-card-style-forest-glass .fg-noise {
  opacity: var(--noise-alpha);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(/assets/css/%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

body.ml-card-style-forest-glass .fg-gloss {
  background:
    linear-gradient(180deg,
      oklch(0.96 0.14 var(--light-hue) / calc(var(--reveal-edge) * 0.6)) 0%,
      oklch(0.92 0.10 var(--light-hue) / 0) 18%,
      transparent 100%),
    linear-gradient(95deg,
      transparent 0%,
      oklch(0.95 0.06 var(--light-hue) / calc(var(--reveal-edge) * 0.10)) 6%,
      transparent 18%);
  mix-blend-mode: plus-lighter;
}

body.ml-card-style-forest-glass .fg-halo {
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 75% 60% at 50% 50%,
    oklch(0.78 0.18 var(--glow-color, 142) /
      calc(var(--glow-alpha) * (var(--ambient-light, 0) * 0.4 + var(--hover-active, 0)))),
    transparent 70%);
  filter: blur(26px);
  opacity: calc(var(--ambient-light, 0) * 0.5 + var(--hover-active, 0));
  transition: opacity .45s ease;
}

body.ml-card-style-forest-glass .ml-card:hover,
body.ml-card-style-forest-glass .ml-card.is-hover {
  --hover-active: 1;
  border-color: oklch(0.92 0.10 var(--light-hue) / 0.36);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.12 var(--light-hue) / calc(var(--reveal-edge) * 1)),
    inset 0 0 0 1px oklch(0.92 0.10 var(--light-hue) / 0.14),
    0 2px 2px oklch(0.04 0.005 150 / 0.45),
    0 24px 50px -12px oklch(0.04 0.005 150 / 0.7),
    0 0 60px -8px oklch(0.78 0.18 var(--glow-color, 142) / calc(var(--glow-alpha) * 1.4));
  transform:
    rotateX(calc(var(--ry, 0) * var(--tilt-max) * -1))
    rotateY(calc(var(--rx, 0) * var(--tilt-max)))
    translateY(calc(var(--hover-lift) * -1))
    scale(var(--hover-scale));
}

body.ml-card-style-forest-glass .ml-card-title {
  color: oklch(0.97 0.02 142);
  text-shadow: 0 1px 14px oklch(0.20 0.06 152 / 0.7);
}
body.ml-card-style-forest-glass .ml-card:hover .ml-card-title {
  color: oklch(0.97 0.04 132);
}
body.ml-card-style-forest-glass .ml-card-desc {
  color: oklch(0.84 0.03 142 / 0.78);
}
body.ml-card-style-forest-glass .ml-card-tag,
body.ml-card-style-forest-glass .ml-card-meta-badge {
  color: oklch(0.92 0.06 142 / 0.85);
  background: oklch(0.30 0.06 152 / 0.42);
  border: 1px solid oklch(0.74 0.08 142 / 0.22);
  backdrop-filter: blur(6px);
}

body.ml-card-style-forest-glass .ml-btn-tools {
  position: relative;
  min-width: 136px;
  min-height: 36px;
  padding: 0.48rem 0.92rem 0.48rem 0.72rem;
  gap: 0.36rem;
  font-family: var(--font-display), var(--font-sans-jp);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.96 0.04 142);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.86 0.10 90 / calc(0.20 * var(--tools-glow))), transparent 70%),
    linear-gradient(180deg, oklch(0.42 0.10 150 / 0.95), oklch(0.30 0.08 152 / 0.95));
  border: 1px solid oklch(0.82 0.10 90 / 0.36);
  box-shadow:
    inset 0 1px 0 oklch(0.92 0.08 152 / 0.5),
    inset 0 -1px 0 oklch(0.10 0.03 150 / 0.5),
    0 4px 14px -3px oklch(0.20 0.06 152 / 0.6);
  overflow: hidden;
  isolation: isolate;
}
body.ml-card-style-forest-glass .ml-btn-tools::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg,
      oklch(0.92 0.08 152 / 0) 0 6px,
      oklch(0.92 0.08 152 / 0.08) 6px 7px);
  opacity: 0.7;
}
body.ml-card-style-forest-glass .ml-btn-tools::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    oklch(0.99 0.05 92 / calc(0.55 * var(--tools-glow))) 40%,
    oklch(0.92 0.10 152 / calc(0.35 * var(--tools-glow))) 60%,
    transparent 100%);
  filter: blur(3px);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.2,.7,.2,1);
}
body.ml-card-style-forest-glass .ml-card:hover .ml-btn-tools::after,
body.ml-card-style-forest-glass .ml-btn-tools:hover::after {
  left: 130%;
}
body.ml-card-style-forest-glass .ml-btn-tools .tools-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.96 0.08 92);
  filter: drop-shadow(0 0 4px oklch(0.86 0.10 90 / calc(0.7 * var(--tools-glow))));
}
body.ml-card-style-forest-glass .ml-btn-tools .tools-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(0.92 0.16 142);
  box-shadow: 0 0 6px oklch(0.92 0.16 142 / 0.9);
  animation: toolsPulse 2.4s ease-in-out infinite;
}
@keyframes toolsPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.10); }
}
body.ml-card-style-forest-glass .ml-btn-tools:hover {
  border-color: oklch(0.92 0.10 90 / 0.55);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.86 0.10 90 / calc(0.32 * var(--tools-glow))), transparent 70%),
    linear-gradient(180deg, oklch(0.48 0.12 148 / 0.95), oklch(0.34 0.10 152 / 0.95));
  box-shadow:
    inset 0 1px 0 oklch(0.92 0.10 152 / 0.65),
    inset 0 -1px 0 oklch(0.10 0.03 150 / 0.5),
    0 6px 18px -3px oklch(0.20 0.08 152 / 0.7),
    0 0 24px -4px oklch(0.86 0.10 90 / calc(0.55 * var(--tools-glow)));
  transform: translateY(-1px);
}
body.ml-card-style-forest-glass .ml-btn-play {
  color: oklch(0.92 0.08 152 / 0.92);
  background: oklch(0.28 0.05 152 / 0.45);
  border-color: oklch(0.74 0.08 142 / 0.30);
  backdrop-filter: blur(6px);
}
body.ml-card-style-forest-glass .ml-btn-play:hover {
  background: oklch(0.36 0.08 150 / 0.6);
  border-color: oklch(0.86 0.10 142 / 0.5);
  color: oklch(0.97 0.04 142);
}
body.ml-card-style-forest-glass .ml-btn-play.playing {
  color: oklch(0.96 0.10 142);
  background: oklch(0.34 0.10 150 / 0.6);
  border-color: oklch(0.86 0.14 142 / 0.6);
  box-shadow: 0 0 16px -3px oklch(0.74 0.14 142 / 0.5);
}
body.ml-card-style-forest-glass .ml-card.is-playing {
  border-color: oklch(0.86 0.14 142 / 0.6);
  box-shadow:
    inset 0 1px 0 oklch(0.92 0.10 152 / 0.5),
    inset 0 0 0 1px oklch(0.86 0.14 142 / 0.25),
    0 0 0 1px oklch(0.86 0.14 142 / 0.35),
    0 24px 50px -12px oklch(0.04 0.005 150 / 0.7),
    0 0 80px -8px oklch(0.74 0.16 142 / 0.45);
}

@media (max-width: 720px) {
  body.ml-card-style-forest-glass .ml-card {
    transform: none !important;
  }
  body.ml-card-style-forest-glass .fg-iridescent,
  body.ml-card-style-forest-glass .fg-iridescent--sharp,
  body.ml-card-style-forest-glass .fg-specular {
    opacity: 0 !important;
  }
  body.ml-card-style-forest-glass .fg-gloss {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ml-card-style-forest-glass .ml-card {
    transition: none !important;
    transform: none !important;
  }
  body.ml-card-style-forest-glass .ml-btn-tools::after {
    display: none;
  }
  body.ml-card-style-forest-glass .ml-btn-tools .tools-pip {
    animation: none;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .ml-quick-scene-grid { grid-template-columns: repeat(4, 1fr); }
  .ml-filter-groups { grid-template-columns: repeat(2, 1fr); }
  .ml-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Heroレスポンシブ（新クラス名に対応済み—上部の@media内に定義済み） */
  .ml-quick-scene { padding: var(--space-lg) var(--space-md); }
  .ml-quick-scene-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
  .ml-qs-card { padding: var(--space-sm); }
  .ml-qs-icon { font-size: 1.2rem; }
  .ml-filter-panel { padding: var(--space-lg) var(--space-md); }
  .ml-filter-groups { grid-template-columns: 1fr; gap: var(--space-md); }
  .ml-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .ml-main { padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .ml-card-actions { flex-wrap: wrap; }
  .ml-btn-play,
  .ml-btn-tools { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .ml-card-icon-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
  .ml-results-bar { padding: var(--space-md); }
  .ml-results-hint { display: none; }
  .ml-active-filters { padding: var(--space-sm) var(--space-md); }
  .ml-bottom-cta { padding: var(--space-2xl) var(--space-md); }
  .ml-bottom-cta-btns { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .ml-quick-scene-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); }
  .ml-qs-label-jp { display: none; }
  .ml-card-inner { padding: var(--space-lg); }
}

/* Search interpretation and one-condition recovery share the existing forest palette. */
.ml-search-conditions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px auto; max-width:760px; padding:0 8px; }
.ml-search-conditions[hidden] { display:none; }
.ml-search-conditions__label { font-size:12px; color:var(--text-secondary, #b6c7b6); }
.ml-search-condition, .ml-search-recovery { font:inherit; font-size:13px; line-height:1.5; color:#e8eddc; background:#21392b; border:1px solid #7e936e; border-radius:18px; padding:8px 14px; min-height:44px; cursor:pointer; overflow-wrap:anywhere; max-width:100%; }
.ml-search-condition:hover, .ml-search-recovery:hover { background:#345139; border-color:#ddc984; }
.ml-search-condition:focus-visible, .ml-search-recovery:focus-visible { outline:2px solid #ead486; outline-offset:3px; }
.ml-empty-suggest { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.ml-search-help { max-width:760px; margin:10px auto; padding:0 8px; font-size:12px; line-height:1.8; color:var(--text-secondary, #b6c7b6); }
@media(max-width:600px) { .ml-search-conditions { gap:6px; } .ml-search-conditions__label { width:100%; } }

/* ===== 人気ランクバッジ（ライブ人気スコア上位N曲） ===== */
.ml-card-rank{
  position: absolute; top: 10px; left: 10px; z-index: 6;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px 3px 7px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(40,30,10,.92), rgba(22,18,9,.86));
  border: 1px solid rgba(231,202,124,.55);
  color: #f3d98a; font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(0,0,0,.42), 0 0 12px rgba(202,164,78,.18);
  pointer-events: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ml-card-rank__star{ color: #ffcf6e; font-size: .72rem; line-height: 1; }
.ml-card-rank__n::before{ content: '#'; opacity: .68; margin-right: .5px; }
.ml-card-rank.is-top3{
  background: linear-gradient(135deg, rgba(122,92,22,.95), rgba(58,44,14,.9));
  border-color: rgba(255,226,140,.85); color: #fff3c4;
  box-shadow: 0 2px 12px rgba(0,0,0,.46), 0 0 16px rgba(255,210,110,.3);
}
.ml-card-rank.is-top3 .ml-card-rank__star{ color: #ffe49a; filter: drop-shadow(0 0 4px rgba(255,210,110,.6)); }
@media (max-width: 600px){
  .ml-card-rank{ top: 8px; left: 8px; font-size: .68rem; padding: 2px 7px 2px 6px; }
}

/* /assets/css/music-library-dark.css */
/* ================================================================
   H/MIX GALLERY — Music Library DARK THEME
   深緑・夜・森・静けさ / ゲームタイトル画面の没入感
   ================================================================ */

/* ===================================================================
   § 1. CSS変数オーバーライド
   =================================================================== */

body.library-page--dark {
  /* 背景 — 漆黒の森（共通ダークトークン参照） */
  --color-bg:           var(--dark-bg);
  --color-bg-2:         var(--dark-bg-2);
  --color-bg-3:         var(--dark-bg-3);
  --color-surface:      var(--dark-surface);
  --color-surface-2:    var(--dark-surface-2);
  --color-surface-3:    #223625;

  /* テキスト — 月光の白 */
  --color-text:         var(--dark-text);
  --color-text-muted:   var(--dark-text-muted);
  --color-text-dim:     var(--dark-text-dim);

  /* グリーン — 翡翠 */
  --color-green:        var(--dark-green);
  --color-green-mid:    var(--dark-green-mid);
  --color-green-light:  var(--dark-green-light);
  --color-green-pale:   var(--dark-green-pale);
  --color-green-dim:    #2d5a3d;

  /* ゴールド — ランタン */
  --color-gold:         var(--dark-gold);
  --color-gold-light:   var(--dark-gold-light);

  /* ボーダー */
  --color-border:       var(--dark-border);
  --color-border-hover: var(--dark-border-hover);

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

/* ===================================================================
   § 2. 蛍エフェクト — レイヤー構造
   ──────────────────────────────────────────────────────────────────
   問題: hero__fireflies を #scene-bg の中に入れると
         scene-bg の opacity(0〜0.50) が継承され、
         fireflyGlow(0.12〜0.95) が 0.05〜0.38 に圧縮 → 明滅が見えなくなる。
         CSS opacity 継承は子要素から上書き不可。

   解法: hero__fireflies を scene-bg と独立した兄弟要素にし、
         自身の opacity:1 を保つ。
         コンテンツセクションを z-index:3 に引き上げることで、
         暗い背景色がUIエリアの蛍を視覚的に覆い隠す。
         → 背景画像が透けているエリアにのみ蛍が見える。

   z-index 階層:
     #scene-bg (z-index:1)             ← 図書館背景画像
     .hero__fireflies (fixed, z-index:2) ← 蛍 / TOPと同一アニメ
     コンテンツ全セクション (z-index:3) ← UI / 暗背景が蛍を隠す
     player (z-index:1200)
   =================================================================== */

body.library-page--dark .hero__fireflies {
  position: fixed;
  z-index: 2;   /* scene-bg(1) より上 / コンテンツ(3) より下 */
  pointer-events: none; /* クリックを阻害しない */
}

/* ===================================================================
   § 3. scenic-bg: ダーク背景で映えるよう opacity 引き上げ
        + タグ連動切替用に transition を 0.8s に短縮（base: 1.8s）
   =================================================================== */

body.library-page--dark #scene-bg {
  transition: opacity 0.8s ease-in-out;
}
body.library-page--dark #scene-bg.is-idle    { opacity: 0.40; }
body.library-page--dark #scene-bg.is-visible { opacity: 0.55; }

/* ===================================================================
   § 3. Header
   =================================================================== */

body.library-page--dark .site-header {
  background: rgba(11, 21, 16, 0.92);
  border-bottom: 1px solid rgba(80, 160, 110, 0.14);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
}

body.library-page--dark .site-header.scrolled {
  background: rgba(10, 18, 14, 0.97);
}

body.library-page--dark .logo-text {
  color: var(--color-green-light);
  text-shadow: 0 0 24px rgba(126, 203, 149, 0.30);
}

body.library-page--dark .logo-sub   { color: var(--color-text-dim); }

body.library-page--dark .nav-link {
  color: var(--color-text-muted);
}
body.library-page--dark .nav-link:hover,
body.library-page--dark .nav-link--active {
  color: var(--color-green-light);
}

body.library-page--dark .nav-link--cta {
  border-color: rgba(100, 180, 130, 0.30);
  color: var(--color-green-light);
}
body.library-page--dark .nav-link--cta:hover {
  background: rgba(80, 160, 110, 0.18);
  border-color: var(--color-green-mid);
}

body.library-page--dark .nav-toggle span {
  background: var(--color-text-muted);
}

/* ===================================================================
   § 4. Hero — ゲームタイトル画面
   z-index:auto で scenic-bg が透過して映える
   =================================================================== */

body.library-page--dark .music-library-hero {
  z-index: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0)    0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.50) 100%
  );
  border-bottom: 1px solid rgba(80, 160, 110, 0.10);
  padding: clamp(100px, 14vw, 180px) 20px clamp(72px, 10vw, 120px);
}

/* 霧レイヤー */
body.library-page--dark .music-library-hero::before {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(60, 120, 80, 0.10) 0%, rgba(0, 0, 0, 0) 58%),
    radial-gradient(ellipse at 30% 55%, rgba(40, 80, 55, 0.08) 0%, rgba(0, 0, 0, 0) 54%);
}

/* テクスチャレイヤー */
body.library-page--dark .music-library-hero::after {
  opacity: 0.08;
}

/* eyebrow */
body.library-page--dark .music-library-hero__eyebrow {
  color: rgba(154, 223, 180, 0.82);
  text-shadow: 0 0 20px rgba(100, 200, 140, 0.30);
  letter-spacing: 0.45em;
}

/* タイトル "Music Library" */
body.library-page--dark .music-library-hero__title {
  color: #f0faf4;
  text-shadow:
    0 0 40px rgba(100, 220, 150, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.65),
    0 4px 20px rgba(0, 0, 0, 0.50);
  font-weight: 400;
}

/* タイトル下ライン */
body.library-page--dark .music-library-hero__title::after {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(100, 200, 140, 0.30) 18%,
    rgba(120, 210, 155, 0.50) 50%,
    rgba(100, 200, 140, 0.30) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  box-shadow: 0 0 18px rgba(100, 200, 140, 0.18);
}

/* lead */
body.library-page--dark .music-library-hero__lead {
  color: rgba(225, 245, 232, 0.95);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75);
}

/* sublead */
body.library-page--dark .music-library-hero__sublead {
  color: rgba(170, 205, 182, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}

/* 検索ラップ */
body.library-page--dark .music-library-hero__search-wrap {
  background: rgba(12, 22, 16, 0.82);
  border: 1px solid rgba(100, 180, 130, 0.24);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(100, 180, 130, 0.12);
  backdrop-filter: blur(24px);
}

/* 検索入力 */
body.library-page--dark .music-library-hero__search {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px rgba(100, 180, 130, 0.14);
  caret-color: var(--color-green-light);
}

body.library-page--dark .music-library-hero__search::placeholder {
  color: rgba(120, 170, 135, 0.60);
}

body.library-page--dark .music-library-hero__search:focus {
  box-shadow:
    inset 0 0 0 1.5px rgba(100, 180, 130, 0.40),
    0 0 0 3px rgba(80, 160, 110, 0.14);
}

/* 検索アイコン */
body.library-page--dark .music-library-hero__search-icon {
  color: rgba(100, 180, 130, 0.60);
}

/* クリアボタン */
body.library-page--dark .ml-search-clear {
  color: var(--color-text-dim);
}
body.library-page--dark .ml-search-clear:hover {
  background: rgba(100, 180, 130, 0.12);
  color: var(--color-text);
}

/* 人気タグラベル */
body.library-page--dark .music-library-hero__quick-tag-label {
  color: var(--color-text-dim);
}

/* 人気タグボタン */
body.library-page--dark .music-library-hero__quick-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(100, 180, 130, 0.22);
  color: rgba(170, 215, 180, 0.82);
}
body.library-page--dark .music-library-hero__quick-tag:hover {
  background: rgba(80, 160, 110, 0.20);
  border-color: rgba(100, 200, 140, 0.45);
  color: var(--color-green-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

/* ===================================================================
   § 5. コンテンツセクション — z-index: 3 で scene-bg と蛍より前面へ
   scene-bg(z-index:1) と hero__fireflies(z-index:2) より上に配置。
   各セクションの暗い background-color が蛍を視覚的に隠すため
   テキスト・カード上に蛍が重なって見えることはない。
   =================================================================== */

body.library-page--dark .ml-intro,
body.library-page--dark .ml-quick-scene,
body.library-page--dark .ml-filter-panel,
body.library-page--dark .ml-active-filters,
body.library-page--dark .ml-results-bar,
body.library-page--dark .ml-main,
body.library-page--dark .end-cta,
body.library-page--dark .site-footer {
  position: relative;
  z-index: 3;   /* 蛍(z-index:2) より上 — 各セクションの暗背景が蛍を隠す */
}

/* ===================================================================
   § 6. Library Intro
   =================================================================== */

body.library-page--dark .ml-intro {
  background: rgba(8, 16, 12, 0.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: clamp(3.5rem, 8vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

body.library-page--dark .ml-intro__main {
  color: rgba(225, 245, 232, 0.95);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}

body.library-page--dark .ml-intro__sub {
  color: rgba(150, 190, 162, 0.80);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* ===================================================================
   § 7. Quick Scene Navigation
   =================================================================== */

body.library-page--dark .ml-quick-scene {
  background: rgba(8, 16, 12, 0.50);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(80, 160, 110, 0.10);
  border-bottom: 1px solid rgba(80, 160, 110, 0.10);
}

body.library-page--dark .ml-scene-card {
  background: rgba(22, 38, 28, 0.90);
  border-color: rgba(100, 180, 130, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

body.library-page--dark .ml-scene-card:hover {
  background: rgba(40, 80, 55, 0.60);
  border-color: rgba(100, 200, 140, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 16px rgba(80, 160, 110, 0.14);
}

body.library-page--dark .ml-scene-card.is-active {
  background: rgba(60, 120, 80, 0.50);
  border-color: rgba(126, 203, 149, 0.65);
  box-shadow: 0 0 20px rgba(100, 200, 140, 0.22);
}

/* QuickScene カードラベル */
body.library-page--dark .ml-scene-icon  { color: var(--color-green-light); }
body.library-page--dark .ml-scene-label { color: rgba(210, 240, 220, 0.95); }
body.library-page--dark .ml-scene-label-jp { color: rgba(150, 190, 162, 0.75); }

/* QuickScene SVGアイコン (ml-qs-* クラス) */
body.library-page--dark .ml-qs-card {
  background: rgba(16, 30, 22, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(100, 180, 130, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
body.library-page--dark .ml-qs-card:hover {
  background: rgba(30, 65, 44, 0.55);
  border-color: rgba(100, 200, 140, 0.40);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(80, 160, 110, 0.08);
}
body.library-page--dark .ml-qs-card.active {
  background: rgba(40, 100, 65, 0.40);
  border-color: rgba(126, 203, 149, 0.55);
  color: var(--color-green-light);
  box-shadow:
    0 0 20px rgba(100, 200, 140, 0.15),
    inset 0 0 12px rgba(100, 200, 140, 0.04);
}
body.library-page--dark .ml-qs-label     { color: rgba(210, 240, 220, 0.90); }
body.library-page--dark .ml-qs-label-jp  { color: rgba(150, 190, 162, 0.72); }

/* ===================================================================
   § 8. Filter Panel
   =================================================================== */

body.library-page--dark .ml-filter-panel {
  background: rgba(10, 28, 18, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(80, 160, 110, 0.10);
  border-bottom: 1px solid rgba(80, 160, 110, 0.10);
}

body.library-page--dark .ml-filter-heading {
  color: rgba(180, 225, 195, 0.92);
}

body.library-page--dark .ml-filter-heading svg {
  color: var(--color-green-mid);
}

/* フィルターヘッダー右側グループ */
body.library-page--dark .ml-filter-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 最近再生フィルターボタン — 青緑 / 時間の流れ */
body.library-page--dark .ml-recent-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(80, 195, 210, 0.78);
  background: rgba(20, 60, 40, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(60, 170, 190, 0.22);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
body.library-page--dark .ml-recent-filter-btn:hover {
  color: rgba(110, 220, 235, 0.90);
  border-color: rgba(70, 190, 210, 0.38);
  background: rgba(30, 80, 50, 0.70);
}
body.library-page--dark .ml-recent-filter-btn[aria-pressed="true"] {
  color: rgba(100, 230, 245, 0.96);
  border-color: rgba(70, 200, 220, 0.55);
  background: rgba(18, 110, 130, 0.16);
  box-shadow:
    0 0 8px  rgba(80, 210, 230, 0.30),
    0 0 18px rgba(50, 170, 190, 0.14);
  text-shadow: 0 0 6px rgba(100, 220, 240, 0.28);
}

/* お気に入りのみフィルターボタン — 灯火 / アンバー */
body.library-page--dark .ml-fav-filter-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(210, 148, 62, 0.78);
  background: rgba(20, 60, 40, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(200, 130, 45, 0.22);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
body.library-page--dark .ml-fav-filter-btn:hover {
  color: rgba(255, 184, 88, 0.90);
  border-color: rgba(255, 148, 45, 0.38);
  background: rgba(30, 80, 50, 0.70);
}
body.library-page--dark .ml-fav-filter-btn.is-active,
body.library-page--dark .ml-fav-filter-btn[aria-pressed="true"] {
  color: rgba(255, 175, 72, 0.98);
  border-color: rgba(255, 145, 45, 0.55);
  background: rgba(180, 100, 18, 0.16);
  box-shadow:
    0 0 8px  rgba(255, 170, 60, 0.32),
    0 0 18px rgba(255, 120, 35, 0.14);
  text-shadow: 0 0 6px rgba(255, 180, 80, 0.30);
}

body.library-page--dark .ml-filter-reset-btn {
  color: var(--color-text-muted);
  background: rgba(20, 60, 40, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(100, 180, 130, 0.22);
}
body.library-page--dark .ml-filter-reset-btn:hover {
  color: var(--color-green-light);
  border-color: rgba(100, 200, 140, 0.42);
  background: rgba(30, 80, 50, 0.70);
}

/* フィルターグループ */
body.library-page--dark .ml-filter-group {
  background: rgba(14, 28, 20, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(100, 180, 130, 0.15);
}

body.library-page--dark .ml-filter-group-toggle {
  color: rgba(195, 230, 208, 0.92);
  border-bottom-color: rgba(80, 140, 100, 0.14);
}
body.library-page--dark .ml-filter-group-toggle:hover {
  background: rgba(40, 70, 50, 0.50);
  color: var(--color-green-light);
}

body.library-page--dark .ml-filter-group-label   { color: rgba(210, 240, 220, 0.95); }
body.library-page--dark .ml-filter-group-label-jp { color: var(--color-text-dim); }
body.library-page--dark .ml-filter-group-icon     { color: var(--color-gold-light); }

/* チップ */
body.library-page--dark .ml-chip {
  background: rgba(22, 40, 30, 0.90);
  border-color: rgba(100, 180, 130, 0.22);
  color: rgba(180, 220, 192, 0.88);
}

body.library-page--dark .ml-chip:hover {
  background: rgba(50, 100, 68, 0.55);
  border-color: rgba(100, 200, 140, 0.45);
  color: var(--color-green-light);
}

body.library-page--dark .ml-chip.is-active,
body.library-page--dark .ml-chip[aria-pressed="true"] {
  background: rgba(60, 140, 90, 0.22);
  border-color: rgba(126, 203, 149, 0.55);
  color: var(--dark-green-light, #9adfb4);
  box-shadow:
    0 0 12px rgba(100, 200, 140, 0.20),
    inset 0 0 8px rgba(100, 200, 140, 0.06);
  text-shadow: 0 0 8px rgba(100, 200, 140, 0.25);
}

/* ===================================================================
   § 9. Active Filters / Results Bar
   =================================================================== */

body.library-page--dark .ml-active-filters {
  background: rgba(8, 16, 12, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(80, 160, 110, 0.10);
}

body.library-page--dark .ml-active-filters-label {
  color: var(--color-text-muted);
}

body.library-page--dark .ml-active-chip {
  background: rgba(60, 140, 90, 0.18);
  border-color: rgba(126, 203, 149, 0.35);
  color: var(--dark-green-light, #9adfb4);
  box-shadow: 0 0 8px rgba(100, 200, 140, 0.10);
}

body.library-page--dark .ml-active-chip__remove:hover {
  background: rgba(200, 80, 80, 0.22);
  color: rgba(240, 185, 185, 0.95);
}

/* 最近再生フィルターチップ — 青緑 */
body.library-page--dark .ml-active-chip--recent {
  background: rgba(18, 110, 130, 0.18);
  border-color: rgba(70, 195, 215, 0.40);
  color: rgba(110, 225, 240, 0.90);
}

/* お気に入りフィルターチップ — アンバー */
body.library-page--dark .ml-active-chip--fav {
  background: rgba(170, 100, 18, 0.20);
  border-color: rgba(255, 145, 45, 0.42);
  color: rgba(255, 184, 88, 0.92);
}

body.library-page--dark .ml-active-clear-all {
  color: var(--color-text-muted);
  border-color: rgba(100, 180, 130, 0.22);
}
body.library-page--dark .ml-active-clear-all:hover {
  color: var(--color-green-light);
  border-color: rgba(100, 200, 140, 0.42);
}

body.library-page--dark .ml-results-bar {
  background: rgba(10, 18, 14, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(80, 140, 100, 0.14);
}

body.library-page--dark .ml-results-count {
  color: rgba(180, 225, 195, 0.95);
}

body.library-page--dark .ml-results-condition {
  color: var(--color-text-muted);
}

body.library-page--dark .ml-results-hint {
  color: var(--color-text-dim);
}

/* ===================================================================
   § 10. Card Grid — フル幅レイアウト + 左右フェード
   =================================================================== */

/*
  ml-main をフル幅に解放し、::before の gradient で左右フェードを演出。
  z-index 構造:
    #scene-bg (fixed, z-index:1)
    └─ .ml-main (relative, z-index:2) ← scene-bg より上
         ├─ ::before (z-index:-1) ← .ml-main 内で最背面 / scene-bg より上
         └─ .ml-grid / cards ← ::before の上
*/

body.library-page--dark .ml-main {
  max-width: 100%;
  margin: 0;
  padding: var(--space-2xl) clamp(0.75rem, 2.5vw, 2.5rem) var(--space-4xl);
  background: transparent;  /* 背景は ::before に委譲 */
}

/* 左右フェードグラデーション背景 */
body.library-page--dark .ml-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 18, 14, 0)    0%,
    rgba(10, 18, 14, 0.04) 3%,
    rgba(10, 18, 14, 0.10) 8%,
    rgba(10, 18, 14, 0.16) 16%,
    rgba(10, 18, 14, 0.20) 24%,
    rgba(10, 18, 14, 0.20) 76%,
    rgba(10, 18, 14, 0.16) 84%,
    rgba(10, 18, 14, 0.10) 92%,
    rgba(10, 18, 14, 0.04) 97%,
    rgba(10, 18, 14, 0)   100%
  );
  pointer-events: none;
  z-index: -1;
}

/* グリッド: 3列固定 / max-width で画面が広がってもカード幅を抑制 */
body.library-page--dark .ml-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1080px;    /* 3列 × ~340px + gap = カード幅を適切に抑える */
  margin-left: auto;
  margin-right: auto;
}

/* カード本体
   ① animation:none でベースCSSのml-card-appearをキャンセル（scroll-revealに委譲）
   ② 視認できる背景色を付与
   ③ ボーダーを強化 */
body.library-page--dark .ml-card {
  animation: none;
  background-color: rgba(14, 28, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(100, 180, 130, 0.18);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

body.library-page--dark .ml-card:hover {
  background-color: rgba(18, 36, 26, 0.85);
  border-color: rgba(100, 200, 140, 0.38);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.60),
    0 0 28px rgba(80, 160, 110, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ホバー時: 試聴ボタンが少し前に浮き出る */
body.library-page--dark .ml-card:hover .ml-btn-play {
  transform: translateY(-3px) scale(1.08);
  background: rgba(45, 110, 72, 0.62);
  border-color: rgba(118, 192, 148, 0.62);
  box-shadow: 0 6px 22px rgba(50, 130, 80, 0.40);
}

body.library-page--dark .ml-card.is-playing {
  border-color: rgba(126, 203, 149, 0.82);
  box-shadow:
    0 0 0 2px rgba(100, 220, 140, 0.95),
    0 0 38px rgba(80, 200, 120, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.50);
}

/* ジャケット背景を統一 — タグ別グラデーションを全て深緑ベースに上書き
   body.library-page--dark .ml-card[data-tag-primary] .ml-card-jacket は
   specificityが (0,3,0) でベースCSSの (0,2,0) を上回るため !important 不要 */
body.library-page--dark .ml-card-jacket,
body.library-page--dark .ml-card[data-tag-primary] .ml-card-jacket {
  background: linear-gradient(145deg, #0e1f17 0%, #172b1d 45%, #1d3422 72%, #12201a 100%);
  filter: none;
}

/* カードタイトル */
body.library-page--dark .ml-card-title {
  color: rgba(240, 255, 245, 0.98);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.70);
}

body.library-page--dark .ml-card:hover .ml-card-title {
  color: rgba(165, 240, 190, 1);
}

body.library-page--dark .ml-card.is-playing .ml-card-title {
  color: rgba(155, 255, 190, 1);
}

/* カード説明文 */
body.library-page--dark .ml-card-desc {
  color: rgba(195, 225, 205, 0.82);
}

/* カードID・尺 */
body.library-page--dark .ml-card-id       { color: rgba(150, 190, 165, 0.55); }
body.library-page--dark .ml-card-duration { color: rgba(150, 190, 165, 0.50); }

/* カードタグ */
body.library-page--dark .ml-card-tag {
  border-color: rgba(140, 200, 165, 0.28);
  background: rgba(50, 100, 68, 0.28);
  color: rgba(185, 230, 200, 0.88);
}

/* 試聴ボタン */
body.library-page--dark .ml-btn-play {
  background: rgba(40, 100, 62, 0.45);
  border-color: rgba(100, 180, 130, 0.42);
  color: rgba(200, 245, 215, 0.95);
}
body.library-page--dark .ml-btn-play:hover {
  background: rgba(50, 120, 75, 0.65);
  border-color: rgba(126, 203, 149, 0.65);
  box-shadow: 0 4px 20px rgba(60, 140, 90, 0.40);
}

/* お気に入りボタン — 灯火 / アンバー */
body.library-page--dark .ml-btn-fav {
  border-color: rgba(200, 130, 45, 0.22);
  background: rgba(140, 90, 18, 0.10);
  color: rgba(210, 148, 62, 0.55);
}
body.library-page--dark .ml-btn-fav:hover {
  border-color: rgba(255, 150, 50, 0.45);
  color: rgba(255, 184, 88, 0.92);
  background: rgba(160, 100, 18, 0.18);
}
body.library-page--dark .ml-btn-fav.is-fav {
  color: rgba(255, 168, 60, 0.98);
  border-color: rgba(255, 148, 45, 0.65);
  background: rgba(180, 100, 18, 0.22);
  box-shadow:
    0 0 6px  rgba(255, 175, 70, 0.42),
    0 0 14px rgba(255, 125, 35, 0.20);
  text-shadow: 0 0 5px rgba(255, 190, 90, 0.25);
}

/* ダウンロードボタン */
body.library-page--dark .ml-btn-dl {
  border-color: rgba(140, 200, 160, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(180, 220, 195, 0.60);
}
body.library-page--dark .ml-btn-dl:hover {
  border-color: rgba(140, 200, 160, 0.52);
  color: rgba(210, 248, 225, 0.95);
  background: rgba(50, 110, 72, 0.25);
}

/* ===================================================================
   § 11. Load More
   =================================================================== */

body.library-page--dark .ml-loadmore-btn {
  background: rgba(18, 34, 24, 0.90);
  border-color: rgba(100, 180, 130, 0.26);
  color: var(--color-text-muted);
}
body.library-page--dark .ml-loadmore-btn:hover {
  background: rgba(50, 100, 68, 0.45);
  border-color: rgba(100, 200, 140, 0.48);
  color: var(--color-green-light);
}

/* ===================================================================
   § 12. Empty State
   =================================================================== */

body.library-page--dark .ml-empty-title {
  color: rgba(190, 225, 200, 0.95);
}
body.library-page--dark .ml-empty-sub {
  color: var(--color-text-dim);
}
body.library-page--dark .ml-empty-reset {
  color: var(--color-green-light);
  border-color: rgba(100, 180, 130, 0.35);
}
body.library-page--dark .ml-empty-reset:hover {
  background: var(--color-green-mid);
  color: #fff;
}

/* ===================================================================
   § 13. Bottom CTA
   =================================================================== */

/* ===================================================================
   旧 ml-bottom-cta は end-cta に置き換え済み（クラス名は保持）
   =================================================================== */
body.library-page--dark .ml-bottom-cta {
  display: none; /* 保険 */
}

/* ===================================================================
   § END CTA — 次の旅への分岐点
   =================================================================== */

body.library-page--dark .end-cta {
  background: rgba(8, 14, 11, 0.96);
  border-top: 1px solid rgba(80, 140, 100, 0.14);
  text-align: center;
  padding: 100px 20px 120px;
}

body.library-page--dark .end-cta__inner {
  max-width: 580px;
  margin: 0 auto;
}

body.library-page--dark .end-cta__title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  letter-spacing: 0.10em;
  color: rgba(216, 240, 228, 0.96);
  margin-bottom: 1.25rem;
  font-weight: 400;
}

body.library-page--dark .end-cta__desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.86rem;
  line-height: 2.0;
  color: rgba(180, 215, 198, 0.72);
  margin-bottom: 2.75rem;
}

/* Card renewal overrides */
body.library-page--dark .ml-card {
  background:
    linear-gradient(180deg, rgba(22, 44, 32, 0.76), rgba(9, 18, 13, 0.82)),
    rgba(12, 26, 18, 0.56);
  border-color: rgba(170, 220, 188, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 52px rgba(0, 0, 0, 0.42);
}
body.library-page--dark .ml-card:hover {
  background:
    linear-gradient(180deg, rgba(25, 52, 37, 0.84), rgba(10, 22, 15, 0.88)),
    rgba(14, 32, 22, 0.64);
  border-color: rgba(178, 234, 196, 0.34);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.58),
    0 0 34px rgba(91, 190, 124, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.library-page--dark .ml-btn-tools {
  border-color: rgba(226, 198, 128, 0.45);
  background:
    linear-gradient(135deg, rgba(226, 198, 128, 0.20), rgba(78, 164, 110, 0.22)),
    rgba(255, 255, 255, 0.06);
  color: rgba(248, 232, 180, 0.96);
}
body.library-page--dark .ml-btn-tools:hover {
  border-color: rgba(246, 216, 148, 0.76);
  color: rgba(255, 242, 196, 1);
  box-shadow:
    0 8px 24px rgba(226, 198, 128, 0.20),
    0 0 18px rgba(90, 190, 124, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
body.library-page--dark .ml-card-icon-actions .ml-btn-detail {
  border-color: rgba(140, 200, 160, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(180, 220, 195, 0.66);
}
body.library-page--dark .ml-card-icon-actions .ml-btn-detail:hover {
  border-color: rgba(140, 200, 160, 0.52);
  color: rgba(210, 248, 225, 0.95);
  background: rgba(50, 110, 72, 0.25);
}
body.library-page--dark.ml-card-style-game .ml-card {
  border-color: rgba(104, 236, 156, 0.34);
  background:
    linear-gradient(135deg, rgba(13, 46, 30, 0.92), rgba(3, 13, 11, 0.96)),
    rgba(4, 14, 10, 0.86);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(104, 236, 156, 0.06),
    inset 0 0 24px rgba(104, 236, 156, 0.06);
}
body.library-page--dark.ml-card-style-game .ml-btn-tools {
  border-color: rgba(104, 236, 156, 0.62);
  background: linear-gradient(180deg, rgba(43, 142, 78, 0.42), rgba(9, 52, 31, 0.62));
  color: rgba(201, 255, 220, 0.98);
}
body.library-page--dark.ml-card-style-fantasy .ml-card {
  border-color: rgba(236, 205, 132, 0.34);
  background:
    radial-gradient(circle at 18% 10%, rgba(236, 205, 132, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(49, 35, 20, 0.88), rgba(11, 23, 16, 0.94));
  box-shadow:
    0 20px 54px rgba(0, 0, 0, 0.52),
    inset 0 0 34px rgba(236, 205, 132, 0.07);
}
body.library-page--dark.ml-card-style-fantasy .ml-btn-tools {
  border-color: rgba(255, 226, 156, 0.66);
  background: linear-gradient(135deg, rgba(146, 98, 34, 0.34), rgba(51, 94, 57, 0.25));
}
body.library-page--dark.ml-card-style-bold .ml-card {
  border-color: rgba(246, 216, 148, 0.36);
  background:
    linear-gradient(112deg, rgba(3, 8, 7, 0.98) 0 56%, rgba(56, 92, 62, 0.72) 56% 100%);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(246, 216, 148, 0.04);
}
body.library-page--dark.ml-card-style-bold .ml-btn-tools {
  border-color: rgba(246, 216, 148, 0.76);
  background: rgba(246, 216, 148, 0.22);
}
body.library-page--dark.ml-card-style-forest-glass .ml-card {
  border-color: oklch(0.74 0.06 142 / 0.22);
  background:
    radial-gradient(140% 70% at 50% 0%,
      oklch(0.62 0.14 var(--light-hue, 132) / calc(0.22 * var(--surface-alpha, 0.62) * var(--surface-tint, 0.55))),
      transparent 55%),
    radial-gradient(120% 80% at 50% 0%,
      oklch(0.34 0.07 152 / calc(0.55 * var(--surface-alpha, 0.62))),
      transparent 60%),
    linear-gradient(160deg,
      oklch(0.27 0.05 152 / var(--surface-alpha, 0.62)) 0%,
      oklch(0.20 0.04 152 / var(--surface-alpha, 0.62)) 55%,
      oklch(0.16 0.03 152 / var(--surface-alpha, 0.62)) 100%);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.10 var(--light-hue, 132) / calc(var(--reveal-edge, 0.60) * 0.7)),
    inset 0 0 0 1px oklch(0.74 0.06 142 / 0.06),
    0 1px 1px oklch(0.04 0.005 150 / 0.4),
    0 12px 30px -10px oklch(0.04 0.005 150 / 0.55);
}
body.library-page--dark.ml-card-style-forest-glass .ml-card:hover {
  border-color: oklch(0.92 0.10 var(--light-hue, 132) / 0.36);
  box-shadow:
    inset 0 1px 0 oklch(0.96 0.12 var(--light-hue, 132) / calc(var(--reveal-edge, 0.60) * 1)),
    inset 0 0 0 1px oklch(0.92 0.10 var(--light-hue, 132) / 0.14),
    0 2px 2px oklch(0.04 0.005 150 / 0.45),
    0 24px 50px -12px oklch(0.04 0.005 150 / 0.7),
    0 0 60px -8px oklch(0.78 0.18 var(--glow-color, 142) / calc(var(--glow-alpha, 0.48) * 1.4));
}
body.library-page--dark.ml-card-style-forest-glass .ml-btn-tools {
  border-color: oklch(0.82 0.10 90 / 0.36);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.86 0.10 90 / calc(0.20 * var(--tools-glow, 0.95))), transparent 70%),
    linear-gradient(180deg, oklch(0.42 0.10 150 / 0.95), oklch(0.30 0.08 152 / 0.95));
  color: oklch(0.96 0.04 142);
}

body.library-page--dark .end-cta__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ベースボタン */
body.library-page--dark .end-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.80rem;
  letter-spacing: 0.06em;
  border: 1px solid rgba(100, 170, 130, 0.28);
  color: rgba(190, 228, 208, 0.82);
  background: rgba(20, 55, 38, 0.28);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s ease;
}
body.library-page--dark .end-cta__btn:hover {
  color: rgba(220, 248, 230, 0.96);
  border-color: rgba(120, 200, 155, 0.45);
  background: rgba(30, 75, 52, 0.38);
  transform: translateY(-1px);
}

/* 主役: 保存リスト — アンバー */
body.library-page--dark .end-cta__btn--primary {
  color: #ffd6a0;
  border-color: rgba(255, 150, 60, 0.48);
  background: rgba(180, 95, 18, 0.16);
  box-shadow:
    0 0 10px rgba(255, 170, 80, 0.22),
    inset 0 0 10px rgba(255, 155, 60, 0.06);
  animation: endCtaPulse 3.0s ease-in-out infinite;
}
body.library-page--dark .end-cta__btn--primary:hover {
  color: #ffe8c0;
  border-color: rgba(255, 170, 70, 0.65);
  background: rgba(200, 110, 20, 0.24);
  box-shadow:
    0 0 14px rgba(255, 190, 100, 0.38),
    0 0 28px rgba(255, 140, 50, 0.18);
  transform: translateY(-2px);
}

@keyframes endCtaPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 170, 80, 0.20), inset 0 0 10px rgba(255, 155, 60, 0.06); }
  50%       { box-shadow: 0 0 18px rgba(255, 195, 110, 0.36), inset 0 0 12px rgba(255, 165, 70, 0.10); }
}

/* ghost: TOP へ */
body.library-page--dark .end-cta__btn--ghost {
  opacity: 0.58;
  border-color: rgba(80, 130, 100, 0.18);
  background: transparent;
}
body.library-page--dark .end-cta__btn--ghost:hover {
  opacity: 0.88;
}

/* モバイル */
@media (max-width: 600px) {
  body.library-page--dark .end-cta {
    padding: 72px 16px 100px;
  }
  body.library-page--dark .end-cta__actions {
    flex-direction: column;
    align-items: center;
  }
  body.library-page--dark .end-cta__btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }
}

body.library-page--dark .btn--ghost {
  border-color: rgba(100, 180, 130, 0.30);
  color: rgba(185, 225, 198, 0.88);
}
body.library-page--dark .btn--ghost:hover {
  background: rgba(60, 130, 80, 0.22);
  border-color: rgba(100, 200, 140, 0.50);
  color: var(--color-green-light);
}

/* ===================================================================
   § 14. Footer
   =================================================================== */

body.library-page--dark .site-footer {
  background: rgba(7, 13, 11, 0.98);
  border-top: 1px solid rgba(80, 140, 100, 0.12);
}

body.library-page--dark .footer-logo   { color: var(--color-green-light); }

body.library-page--dark .footer-tagline,
body.library-page--dark .footer-desc   { color: var(--color-text-dim); }

body.library-page--dark .footer-nav-heading { color: rgba(175, 220, 190, 0.88); }

body.library-page--dark .footer-nav-list a {
  color: rgba(140, 180, 152, 0.75);
}
body.library-page--dark .footer-nav-list a:hover {
  color: var(--color-green-light);
}

/* コピーライト: WCAG AA 対応でコントラスト強化 */
body.library-page--dark .footer-copy {
  color: rgba(130, 165, 140, 0.75);
}

/* ===================================================================
   § 15. Scroll Reveal アニメーション
   [data-reveal] は必ず body.library-page--dark スコープに閉じる
   ベースCSSの ml-card-appear アニメーションとの競合を防ぐため
   .ml-card への animation: none 上書きと組み合わせて使用
   =================================================================== */

body.library-page--dark [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

body.library-page--dark [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

body.library-page--dark [data-reveal="d1"] { transition-delay: 0.06s; }
body.library-page--dark [data-reveal="d2"] { transition-delay: 0.12s; }
body.library-page--dark [data-reveal="d3"] { transition-delay: 0.18s; }
body.library-page--dark [data-reveal="d4"] { transition-delay: 0.24s; }
body.library-page--dark [data-reveal="d5"] { transition-delay: 0.30s; }

/* Hero 要素: ページロード時にアニメーション */
body.library-page--dark .music-library-hero__inner > * {
  animation: darkHeroReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.library-page--dark .music-library-hero__eyebrow    { animation-delay:  60ms; }
body.library-page--dark .music-library-hero__title      { animation-delay: 160ms; }
body.library-page--dark .music-library-hero__lead       { animation-delay: 280ms; }
body.library-page--dark .music-library-hero__sublead    { animation-delay: 380ms; }
body.library-page--dark .music-library-hero__search-wrap  { animation-delay: 480ms; }
body.library-page--dark .music-library-hero__quick-tags   { animation-delay: 580ms; }

@keyframes darkHeroReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ===================================================================
   § 16. アクセシビリティ
   =================================================================== */

/* フォーカスリング */
body.library-page--dark :focus-visible {
  outline: 2px solid rgba(126, 203, 149, 0.85);
  outline-offset: 3px;
  border-radius: 3px;
}

body.library-page--dark .ml-btn-play:focus-visible,
body.library-page--dark .ml-btn-fav:focus-visible,
body.library-page--dark .ml-btn-dl:focus-visible {
  outline-offset: 2px;
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.library-page--dark [data-reveal],
  body.library-page--dark [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.library-page--dark .music-library-hero__inner > * {
    animation: none !important;
  }
}

/* mobile: GPU コスト抑制 */
@media (hover: none) and (pointer: coarse) {
  body.library-page--dark #scene-bg {
    background-attachment: scroll;
  }
}

/* ===================================================================
   § 17. タグ別ボーダーアクセント
   カードの色はすべて深緑で統一し、個性はボーダーの色だけで表現する。
   opacity は控えめに保ち背景世界観との調和を優先。
   =================================================================== */

/* 和風・神社・東洋 → ランタン金 */
body.library-page--dark .ml-card[data-tag-primary="japanese"],
body.library-page--dark .ml-card[data-tag-primary="oriental"],
body.library-page--dark .ml-card[data-tag-primary="shrine"]  {
  border-color: rgba(196, 160, 65, 0.38);
}
body.library-page--dark .ml-card[data-tag-primary="japanese"]:hover,
body.library-page--dark .ml-card[data-tag-primary="oriental"]:hover,
body.library-page--dark .ml-card[data-tag-primary="shrine"]:hover  {
  border-color: rgba(215, 180, 80, 0.58);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.68),
    0 0 22px rgba(196, 160, 65, 0.14),
    inset 0 1px 0 rgba(255, 230, 160, 0.06);
}

/* 戦闘・ボス → 熾火の赤 */
body.library-page--dark .ml-card[data-tag-primary="battle"],
body.library-page--dark .ml-card[data-tag-primary="boss"]   {
  border-color: rgba(200, 90, 65, 0.32);
}
body.library-page--dark .ml-card[data-tag-primary="battle"]:hover,
body.library-page--dark .ml-card[data-tag-primary="boss"]:hover   {
  border-color: rgba(220, 110, 80, 0.52);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.68),
    0 0 22px rgba(200, 80, 60, 0.14),
    inset 0 1px 0 rgba(255, 180, 160, 0.05);
}

/* ホラー・神秘・暗い → 紫煙 */
body.library-page--dark .ml-card[data-tag-primary="horror"],
body.library-page--dark .ml-card[data-tag-primary="mysterious"],
body.library-page--dark .ml-card[data-tag-primary="dark"]     {
  border-color: rgba(145, 80, 185, 0.30);
}
body.library-page--dark .ml-card[data-tag-primary="horror"]:hover,
body.library-page--dark .ml-card[data-tag-primary="mysterious"]:hover,
body.library-page--dark .ml-card[data-tag-primary="dark"]:hover     {
  border-color: rgba(160, 95, 205, 0.50);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.68),
    0 0 22px rgba(145, 80, 185, 0.14),
    inset 0 1px 0 rgba(200, 160, 255, 0.05);
}

/* 勇壮・幻想・中世・ケルト → 月光青 */
body.library-page--dark .ml-card[data-tag-primary="epic"],
body.library-page--dark .ml-card[data-tag-primary="fantasy"],
body.library-page--dark .ml-card[data-tag-primary="celtic"],
body.library-page--dark .ml-card[data-tag-primary="medieval"] {
  border-color: rgba(80, 115, 200, 0.30);
}
body.library-page--dark .ml-card[data-tag-primary="epic"]:hover,
body.library-page--dark .ml-card[data-tag-primary="fantasy"]:hover,
body.library-page--dark .ml-card[data-tag-primary="celtic"]:hover,
body.library-page--dark .ml-card[data-tag-primary="medieval"]:hover {
  border-color: rgba(95, 130, 220, 0.50);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.68),
    0 0 22px rgba(80, 115, 200, 0.14),
    inset 0 1px 0 rgba(160, 190, 255, 0.05);
}

/* 悲しい・記憶 → 鋼青 */
body.library-page--dark .ml-card[data-tag-primary="sad"],
body.library-page--dark .ml-card[data-tag-primary="memory"]  {
  border-color: rgba(75, 118, 195, 0.28);
}

/* ===================================================================
   § 18. お気に入りカード — 静かな特別感
   :has() で .ml-btn-fav.is-fav を持つカードに暖色アクセントを付与
   =================================================================== */

body.library-page--dark .ml-card:has(.ml-btn-fav.is-fav) {
  border-color: rgba(220, 145, 50, 0.38);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(200, 120, 30, 0.12),
    0 0 40px rgba(180, 90, 20, 0.06),
    inset 0 1px 0 rgba(255, 210, 130, 0.07);
}

/* カード上部の琥珀ライン — "光が宿った曲" の印 */
body.library-page--dark .ml-card:has(.ml-btn-fav.is-fav)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 165, 55, 0.80) 0%,
    rgba(255, 140, 40, 0.40) 45%,
    transparent 80%
  );
  border-radius: 24px 24px 0 0;
  z-index: 3;
  pointer-events: none;
}

body.library-page--dark .ml-card:has(.ml-btn-fav.is-fav):hover {
  border-color: rgba(255, 160, 55, 0.55);
}

/* ===================================================================
   § 19. 呼吸アニメーション — 「ここは、音楽が眠る場所。」
   .ml-intro が is-revealed になった後、ごく静かに呼吸する。
   opacity: 0.92↔1.0 / scale: 1.000↔1.013 / translateY: 0↔-2px
   =================================================================== */

@keyframes breatheText {
  0%, 100% {
    opacity:   0.92;
    transform: scale(1.000) translateY(0px);
  }
  50% {
    opacity:   1.00;
    transform: scale(1.013) translateY(-2px);
  }
}

body.library-page--dark .ml-intro.is-revealed .ml-intro__main {
  animation: breatheText 5.5s ease-in-out 0.9s infinite;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* ===================================================================
   § 20. レスポンシブグリッド
   =================================================================== */

/* 1200px: 3列がデフォルトになったため個別指定不要 */

@media (max-width: 820px) {
  body.library-page--dark .ml-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;   /* 小画面はフル幅を使う */
    gap: 1rem;
  }
}

@media (max-width: 500px) {
  body.library-page--dark .ml-grid {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
}

/* reduced-motion 追加: 呼吸・精霊アニメーション無効 */
@media (prefers-reduced-motion: reduce) {
  body.library-page--dark .ml-intro.is-revealed .ml-intro__main {
    animation: none;
  }
}

/* ===================================================================
   § 12. お気に入りモーダル → fav-modal.css に移管（TOP/Library共用）
   music-library.html は fav-modal.css を <link> で読み込むこと
   =================================================================== */

/* ── ユーザータグ（旅人が曲に付けたタグ）─────────────────
   公式58タグ＝「どんな音か」／ユーザータグ＝「どこで鳴ったか」。
   別の軸であることが一目で分かるよう、足あとと同じ金の系統で分ける。 */
body.library-page--dark .ml-filter-group--user .ml-filter-group-icon { color: rgba(209, 184, 122, 0.9); }

body.library-page--dark .ml-usertag-note {
  flex-basis: 100%;
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(200, 190, 165, 0.55);
}
body.library-page--dark .ml-usertag-note a {
  color: rgba(226, 206, 156, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 184, 122, 0.3);
}
body.library-page--dark .ml-usertag-note a:hover { color: #f0d99a; border-bottom-color: rgba(240, 217, 154, 0.8); }

body.library-page--dark .ml-chip--user {
  background: rgba(36, 30, 18, 0.9);
  border-color: rgba(209, 184, 122, 0.3);
  color: rgba(226, 206, 156, 0.9);
}
body.library-page--dark .ml-chip--user:hover {
  background: rgba(90, 72, 34, 0.5);
  border-color: rgba(226, 196, 124, 0.6);
  color: #f2e2b6;
}
body.library-page--dark .ml-chip--user.active,
body.library-page--dark .ml-chip--user[aria-pressed="true"] {
  background: rgba(150, 118, 50, 0.26);
  border-color: rgba(232, 200, 128, 0.65);
  color: #f6e8bf;
  box-shadow: 0 0 12px rgba(214, 178, 100, 0.22);
}
body.library-page--dark .ml-chip--user .ml-chip-count {
  margin-left: 6px;
  font-size: 0.68em;
  opacity: 0.6;
}

/* 左レール側のユーザータグ（表示されているのはこちら） */
body.library-page--dark .ml-left-tag-group[data-category="usertag"] .ml-left-tag-group__icon { color: rgba(209, 184, 122, 0.9); }
body.library-page--dark .ml-left-tag-group[data-category="usertag"] .ml-chip {
  background: rgba(36, 30, 18, 0.9);
  border-color: rgba(209, 184, 122, 0.3);
  color: rgba(226, 206, 156, 0.9);
}
body.library-page--dark .ml-left-tag-group[data-category="usertag"] .ml-chip:hover {
  background: rgba(90, 72, 34, 0.5);
  border-color: rgba(226, 196, 124, 0.6);
  color: #f2e2b6;
}
body.library-page--dark .ml-left-tag-group[data-category="usertag"] .ml-chip.active,
body.library-page--dark .ml-left-tag-group[data-category="usertag"] .ml-chip.is-active,
body.library-page--dark .ml-left-tag-group[data-category="usertag"] .ml-chip[aria-pressed="true"] {
  background: rgba(150, 118, 50, 0.28);
  border-color: rgba(232, 200, 128, 0.7);
  color: #f6e8bf;
}

/* /assets/css/scene-icons.css */
/*
  H/MIX GALLERY — Scene Icons CSS v1.0
  Quick Scene Navigation のSVGアイコンスタイル
  テーマ: 和風 × 幻想 × RPG UI — 細線の紋章風アイコン
*/

/* ===== アイコン本体 ===== */
.scene-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  color: var(--color-green-mid, #3d7a54);
  opacity: 0.80;
  transition:
    color 0.28s ease,
    opacity 0.28s ease,
    transform 0.28s ease,
    filter 0.28s ease;
}

/* SVG要素のサイズ統一 */
.scene-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== カードホバー・アクティブ時の演出 ===== */

/* 浮き上がり + 色が深くなる */
.ml-qs-card:hover .scene-icon,
.ml-qs-card:focus-visible .scene-icon {
  color: var(--color-green, #2d5a3d);
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 4px 8px rgba(45, 90, 61, 0.22));
}

/* アクティブ（選択中）: 深緑 + 光彩 */
.ml-qs-card.active .scene-icon {
  color: var(--color-green, #2d5a3d);
  opacity: 1;
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 2px 6px rgba(45, 90, 61, 0.30));
}

/* ===== カード全体のトランジション強化 ===== */
.ml-qs-card {
  transition:
    border-color 0.28s ease,
    background 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

.ml-qs-card:hover {
  border-color: var(--color-green-mid, #3d7a54);
  background: var(--color-surface-2, #f2ede4);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(45, 90, 61, 0.14);
}

.ml-qs-card.active {
  border-color: var(--color-green, #2d5a3d);
  background: rgba(45, 90, 61, 0.07);
}

/* ===== ラベルのホバー演出 ===== */
.ml-qs-card:hover .ml-qs-label,
.ml-qs-card.active .ml-qs-label {
  color: var(--color-green, #2d5a3d);
}

.ml-qs-card:hover .ml-qs-label-jp,
.ml-qs-card.active .ml-qs-label-jp {
  color: var(--color-text-muted, #5a5248);
}

/* ===== レスポンシブ: モバイルでアイコンサイズを縮小 ===== */
@media (max-width: 768px) {
  .scene-icon {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .scene-icon {
    width: 28px;
    height: 28px;
  }
}

/* /assets/css/scenic-bg.css */
/* ================================================================
   SCENIC BG — 再生連動の背景演出
   再生中のカテゴリに応じて背景に情景画像をフェードイン/アウト。
   ================================================================ */

#scene-bg {
  position: fixed;
  inset: 0;
  z-index: 1;                         /* body背景の上・コンテンツの下 */
  pointer-events: none;               /* クリック・スクロール阻害しない */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;               /* GPUレイヤー昇格でちらつき防止 */
}

/* idle: 図書館背景（無音時） */
#scene-bg.is-idle {
  opacity: 0.25;
}

/* playing: カテゴリ背景（再生時） — 情景をやや前に出す */
#scene-bg.is-visible {
  opacity: 0.34;
}

/* アクセシビリティ: 動きを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
  #scene-bg {
    transition: none;
  }
}

/* モバイル: GPUコストを抑えるため固定背景をスクロール追従に変更 */
@media (hover: none) and (pointer: coarse) {
  #scene-bg {
    background-attachment: scroll;
  }
}

/* /assets/css/player-panel.css?v=20260924tools1 */
/* ============================================================
   PLAYER EXTENSION PANEL — 音の劇場ツールボックス
   高さを安定させた制作パネル
   ============================================================ */

/* ── トグルボタン（プレイヤー内） ── */
:root {
  --toolbox-bg-0: #04100c;
  --toolbox-bg-1: #071a13;
  --toolbox-bg-2: #0d2a1d;
  --toolbox-metal-0: #07130f;
  --toolbox-metal-1: #10291f;
  --toolbox-metal-2: #1a3f31;
  --toolbox-glass: rgba(10, 31, 24, 0.68);
  --toolbox-glass-strong: rgba(7, 24, 18, 0.86);
  --toolbox-glass-clear: rgba(20, 58, 44, 0.38);
  --toolbox-line: rgba(158, 222, 181, 0.18);
  --toolbox-line-strong: rgba(187, 239, 203, 0.34);
  --toolbox-gold: #d9b566;
  --toolbox-gold-soft: rgba(217, 181, 102, 0.26);
  --toolbox-mint: #9adfb4;
  --toolbox-mint-bright: #bdf4cb;
  --toolbox-cyan: #72d7c3;
  --toolbox-text: rgba(241, 249, 236, 0.94);
  --toolbox-muted: rgba(194, 223, 202, 0.66);
  --toolbox-faint: rgba(194, 223, 202, 0.42);
  --toolbox-danger: #ff8f8f;
  --toolbox-radius-xs: 7px;
  --toolbox-radius-sm: 10px;
  --toolbox-radius-md: 14px;
  --toolbox-radius-lg: 18px;
  --toolbox-blur: blur(24px) saturate(1.25);
  --toolbox-shadow-panel: 0 -24px 70px rgba(0, 0, 0, 0.66);
  --toolbox-shadow-card: 0 16px 42px rgba(0, 0, 0, 0.30);
  --toolbox-shadow-active: 0 0 0 1px rgba(189, 244, 203, 0.12), 0 0 28px rgba(154, 223, 180, 0.18);
  --toolbox-metal-sheen: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035) 22%, rgba(0,0,0,0.22) 58%, rgba(154,223,180,0.12));
  --toolbox-scanline: linear-gradient(90deg, transparent, rgba(189, 244, 203, 0.55), transparent);
  --toolbox-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --toolbox-fast: 160ms var(--toolbox-ease);
  --toolbox-normal: 260ms var(--toolbox-ease);
}

.player-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.10), rgba(60, 140, 90, 0.10)),
    rgba(10, 20, 16, 0.82);
  border: 1px solid rgba(217, 181, 102, 0.30);
  color: rgba(255, 234, 184, 0.88);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.player-tool-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.16), rgba(60, 140, 90, 0.16)),
    rgba(10, 20, 16, 0.92);
  border-color: rgba(255, 227, 160, 0.56);
  color: #ffe9b0;
}
.player-tool-btn.is-open {
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.24), rgba(74, 135, 116, 0.20)),
    rgba(14, 24, 20, 0.96);
  border-color: rgba(255, 227, 160, 0.66);
  color: #ffe9b0;
  box-shadow: 0 0 18px rgba(217, 181, 102, 0.16), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── パネル本体 ── */
.player-panel {
  position: fixed;
  bottom: 88px;
  left: 0;
  right: 0;
  z-index: 1301;
  height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.player-panel.is-open {
  height: min(640px, calc(100vh - 112px));
  max-height: min(640px, calc(100vh - 112px));
}

/* タブコンテンツの高さを統一 */
.player-panel__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(640px, calc(100vh - 112px));
  min-height: 390px;
  background:
    radial-gradient(circle at 16% 0%, rgba(217, 181, 102, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 27, 24, 0.98), rgba(5, 13, 11, 0.985));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(217, 181, 102, 0.34);
  box-shadow:
    0 -18px 55px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 238, 190, 0.09);
  overflow: hidden;
}
.player-panel__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.32;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.player-panel__inner::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 160, 0.48), transparent);
}

/* ── 音の劇場ヘッダー ── */
.pp-panel-toast {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 8;
  max-width: min(360px, calc(100vw - 44px));
  padding: 10px 14px;
  border: 1px solid rgba(217, 181, 102, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.20), rgba(154, 223, 180, 0.10)),
    rgba(5, 14, 11, 0.94);
  color: #fff0bd;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pp-panel-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

.player-panel__stage-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(156px, auto) minmax(180px, 1fr) auto minmax(304px, 304px);
  align-items: center;
  gap: 12px;
  padding: 16px 22px 10px;
  border-bottom: 1px solid rgba(255, 227, 160, 0.10);
}
.player-panel__stage-head::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 227, 160, 0.36), rgba(120, 176, 142, 0.18), transparent);
}
.player-panel__stage-mark {
  display: grid;
  grid-template-columns: repeat(3, 8px);
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 227, 160, 0.22);
  border-radius: 999px;
  background: rgba(255, 227, 160, 0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.player-panel__stage-mark span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(120, 176, 142, 0.58);
  box-shadow: 0 0 12px rgba(120, 176, 142, 0.24);
}
.player-panel__stage-mark span:nth-child(2) {
  background: rgba(255, 227, 160, 0.78);
  box-shadow: 0 0 16px rgba(255, 227, 160, 0.30);
}
.player-panel__stage-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.player-panel__stage-kicker {
  color: rgba(255, 227, 160, 0.70);
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: 0.68rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.player-panel__stage-title strong {
  color: rgba(250, 244, 218, 0.96);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.player-panel__stage-copy {
  justify-self: end;
  min-width: 220px;
  color: rgba(205, 226, 199, 0.66);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}
.player-panel__video-launch {
  justify-self: end;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 227, 160, 0.46);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.20), rgba(126, 236, 169, 0.12)),
    rgba(8, 23, 17, 0.72);
  color: #fff0bd;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.10), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-panel__video-launch:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 227, 160, 0.70);
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.28), rgba(126, 236, 169, 0.18)),
    rgba(8, 23, 17, 0.84);
}
.player-panel__stage-status {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 304px;
  min-width: 304px;
}
.pp-stage-pill {
  display: grid;
  grid-template-columns: auto;
  gap: 1px;
  width: 92px;
  min-width: 92px;
  padding: 6px 9px;
  border: 1px solid rgba(154, 180, 150, 0.16);
  border-radius: 9px;
  background: rgba(5, 14, 11, 0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.pp-stage-pill span {
  color: rgba(205, 226, 199, 0.56);
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  white-space: nowrap;
}
.pp-stage-pill strong,
.pp-stage-pill em {
  color: rgba(235, 247, 230, 0.90);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-stage-pill--peak {
  grid-template-columns: 52px 38px;
  column-gap: 6px;
  align-items: end;
  width: 106px;
  min-width: 106px;
}
.pp-stage-pill--peak span {
  grid-column: 1 / -1;
}
.pp-stage-pill--peak strong {
  display: block;
  width: 52px;
  overflow: hidden;
  text-align: right;
}
.pp-stage-pill em {
  justify-self: end;
  width: 38px;
  min-width: 38px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #aee6bc;
  background: rgba(154, 223, 180, 0.12);
  text-align: center;
}
.pp-stage-pill.is-on {
  border-color: rgba(255, 227, 160, 0.38);
  background: rgba(217, 181, 102, 0.10);
}
.pp-stage-pill.is-on strong {
  color: #ffe9b0;
}
.pp-stage-pill.is-muted strong {
  color: rgba(205, 226, 199, 0.60);
}
.pp-stage-pill.is-warn {
  border-color: rgba(255, 227, 160, 0.44);
  background: rgba(217, 181, 102, 0.12);
}
.pp-stage-pill.is-warn em {
  color: #ffe3a0;
  background: rgba(217, 181, 102, 0.18);
}
.pp-stage-pill.is-clip {
  border-color: rgba(255, 130, 130, 0.52);
  background: rgba(225, 111, 111, 0.12);
}
.pp-stage-pill.is-clip em {
  color: #ffb2b2;
  background: rgba(225, 111, 111, 0.22);
}

/* ── タブバー ── */
.player-panel__tabs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(217, 181, 102, 0.16);
  padding: 12px 18px 12px;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.045), rgba(4, 10, 8, 0.16)),
    rgba(3, 8, 7, 0.18);
}
.player-panel__tab {
  min-height: 40px;
  padding: 9px 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(230, 238, 219, 0.72);
  cursor: pointer;
  border: 1px solid rgba(154, 180, 150, 0.18);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02)),
    rgba(5, 14, 11, 0.58);
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.player-panel__tab:hover {
  color: rgba(255, 242, 201, 0.92);
  border-color: rgba(217, 181, 102, 0.34);
  background: rgba(217, 181, 102, 0.08);
}
.player-panel__tab.is-active {
  color: #fff1bc;
  border-color: rgba(255, 227, 160, 0.62);
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.26), rgba(80, 145, 118, 0.18)),
    rgba(12, 22, 18, 0.88);
  text-shadow: 0 0 14px rgba(217, 181, 102, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 227, 160, 0.08), 0 8px 22px rgba(0,0,0,0.18);
}
.player-panel__tab.is-active::after {
  content: '';
  display: block;
  height: 2px;
  margin: 7px 4px -5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 227, 160, 0.92), transparent);
  box-shadow: 0 0 12px rgba(255, 227, 160, 0.34);
}
.player-panel__tab.is-beta::after,
.player-panel__video-launch.is-beta::after {
  content: 'Beta';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  margin: 0 0 0 7px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(126, 236, 169, 0.30);
  background: rgba(126, 236, 169, 0.12);
  color: rgba(205, 255, 218, 0.94);
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  vertical-align: middle;
  box-shadow: none;
}
.player-panel__tab.is-mobile-disabled,
.player-panel__video-launch.is-mobile-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.55);
}
.player-panel__tab.is-mobile-disabled:hover,
.player-panel__video-launch.is-mobile-disabled:hover {
  transform: none;
  color: rgba(230, 238, 219, 0.62);
  border-color: rgba(154, 180, 150, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

/* タブとアクションの間のスペーサー */
.player-panel__tabs-spacer {
  flex: 1;
}

.pp-tab-video {
  min-height: 320px;
}

.player-panel__video-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* DL / 詳細 アクションボタン */
.player-panel__action {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 13px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(230, 238, 219, 0.76);
  text-decoration: none;
  border: 1px solid rgba(154, 180, 150, 0.14);
  border-radius: 9px;
  background: rgba(5, 14, 11, 0.36);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.player-panel__action:hover {
  color: #ffe9b0;
  background: rgba(217, 181, 102, 0.10);
  border-color: rgba(217, 181, 102, 0.34);
}

/* ── タブコンテンツ ── */
.player-panel__content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: none;
  padding: 22px 24px 24px;
  max-height: none;
  overflow-y: auto;
  color: rgba(230, 238, 219, 0.9);
}
.player-panel__content.is-active {
  display: block;
}

.player-panel__content > *:first-child {
  margin-top: 0;
}

/* ── Tab 1: 使える？ ── */
.pp-license-list {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid rgba(217, 181, 102, 0.16);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.035), transparent 38%),
    rgba(3, 9, 8, 0.32);
}
.pp-license-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(217, 181, 102, 0.075);
  font-size: 0.92rem;
}
.pp-license-item:last-child { border-bottom: none; }
.pp-license-item:nth-child(even) { background: rgba(255, 227, 160, 0.025); border-radius: 6px; }
.pp-license-icon { font-size: 0.95rem; flex-shrink: 0; width: 22px; text-align: center; }
.pp-license-name { flex: 1; color: rgba(220, 245, 228, 0.90); }
.pp-license-status { font-size: 0.84rem; letter-spacing: 0.04em; }
.pp-license-status--free { color: #aee6bc; }
.pp-license-status--paid { color: #ffe3a0; }
.pp-license-status--warn { color: rgba(200, 180, 120, 0.85); font-size: 0.7rem; }
.pp-license-status--no { color: rgba(220, 100, 100, 0.80); }
.pp-license-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: rgba(180, 220, 195, 0.55);
  line-height: 1.7;
}
.pp-license-note a { color: #9adfb4; text-decoration: none; }
.pp-license-note a:hover { text-decoration: underline; }

/* ── Tab 2: 表記コピー ── */
.pp-credit-block {
  margin-bottom: 12px;
  border: 1px solid rgba(217, 181, 102, 0.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(3, 9, 8, 0.34);
}
.pp-credit-label {
  padding: 6px 12px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(255, 227, 160, 0.72);
  background: rgba(255, 227, 160, 0.055);
  border-bottom: 1px solid rgba(217, 181, 102, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pp-credit-label .pp-rec {
  font-size: 0.6rem;
  background: rgba(154, 223, 180, 0.12);
  color: #9adfb4;
  border: 1px solid rgba(154, 223, 180, 0.25);
  border-radius: 99px;
  padding: 1px 8px;
}
.pp-credit-body {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pp-credit-text {
  flex: 1;
  font-family: monospace;
  font-size: 0.9rem;
  color: rgba(235, 247, 230, 0.92);
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-all;
}
.pp-copy-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(154, 223, 180, 0.30);
  background: rgba(154, 223, 180, 0.08);
  color: #9adfb4;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.pp-copy-btn:hover { background: rgba(154, 223, 180, 0.18); }
.pp-copy-btn.copied {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
}

/* ── Tab 3: シェア ── */
.pp-share-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(270px, 0.82fr);
  grid-template-areas:
    "post kit"
    "post visual";
  gap: 12px;
}
.pp-share-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(217, 181, 102, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.055), rgba(154, 223, 180, 0.035)),
    rgba(4, 12, 10, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}
.pp-share-card--post { grid-area: post; }
.pp-share-card--kit { grid-area: kit; }
.pp-share-card--visual { grid-area: visual; }
.pp-share-card--tags { grid-area: tags; }
.pp-share-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(217, 181, 102, 0.11);
  background: rgba(255, 227, 160, 0.035);
}
.pp-share-card-head span {
  color: rgba(255, 227, 160, 0.84);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.pp-share-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(235, 247, 230, 0.86);
  font-size: 0.8rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-post {
  min-height: 116px;
  padding: 14px 15px;
  color: rgba(235, 247, 230, 0.92);
  font-size: 0.94rem;
  line-height: 1.72;
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 181, 102, 0.09), transparent 34%),
    rgba(0, 0, 0, 0.18);
}
.pp-share-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 10px 170px 0 12px;
}
.pp-share-preset,
.pp-share-reset {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.07);
  color: rgba(226, 247, 235, 0.78);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: 0.16s ease;
}
.pp-share-preset:hover,
.pp-share-reset:hover,
.pp-share-preset.is-active {
  border-color: rgba(217, 181, 102, 0.42);
  background: rgba(217, 181, 102, 0.13);
  color: #ffe9b0;
}
.pp-share-editor {
  display: block;
  width: calc(100% - 24px);
  min-height: 112px;
  margin: 8px 12px 0;
  padding: 11px 13px;
  border: 1px solid rgba(217, 181, 102, 0.20);
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0%, rgba(217, 181, 102, 0.09), transparent 34%),
    rgba(0, 0, 0, 0.24);
  color: rgba(235, 247, 230, 0.94);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  line-height: 1.54;
  resize: vertical;
}
.pp-share-editor:focus {
  outline: none;
  border-color: rgba(255, 227, 160, 0.48);
  box-shadow: 0 0 0 2px rgba(217, 181, 102, 0.10);
}
.pp-share-editor-meta {
  position: absolute;
  top: 52px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  color: rgba(205, 226, 199, 0.54);
  font-size: 0.68rem;
}
.pp-share-editor-meta span::after {
  content: ' chars';
  color: rgba(205, 226, 199, 0.36);
}
.pp-share-primary-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 8px 12px 9px;
}
.pp-share-social-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 10px;
}
.pp-share-social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid rgba(154, 223, 180, 0.22);
  border-radius: 8px;
  background: rgba(154, 223, 180, 0.08);
  color: rgba(226, 247, 235, 0.88);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  transition: 0.16s ease;
}
.pp-share-social strong,
.pp-share-social span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-social strong {
  color: rgba(184, 240, 197, 0.92);
  font-size: 0.82rem;
  font-weight: 850;
}
.pp-share-social span {
  margin-top: 2px;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.pp-share-social:hover {
  border-color: rgba(255, 227, 160, 0.46);
  background: rgba(217, 181, 102, 0.12);
  color: #ffe9b0;
  transform: translateY(-1px);
}
.pp-share-big,
.pp-share-action,
.pp-share-image,
.pp-share-tag {
  position: relative;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.pp-share-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 48px;
  padding: 8px 13px;
  border: 1px solid rgba(154, 223, 180, 0.24);
  border-radius: 9px;
  background: rgba(154, 223, 180, 0.08);
  color: rgba(226, 247, 235, 0.90);
  text-align: left;
  transition: 0.16s ease;
}
.pp-share-big--primary {
  border-color: rgba(217, 181, 102, 0.44);
  background:
    linear-gradient(135deg, rgba(217, 181, 102, 0.20), rgba(154, 223, 180, 0.08)),
    rgba(9, 20, 16, 0.74);
  color: #fff0bd;
}
.pp-share-big span {
  display: block;
  width: 100%;
  padding-right: 52px;
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-big em {
  display: block;
  width: 100%;
  padding-right: 52px;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(205, 226, 199, 0.62);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-big:hover,
.pp-share-action:hover,
.pp-share-image:hover,
.pp-share-tag:hover {
  border-color: rgba(255, 227, 160, 0.48);
  background-color: rgba(217, 181, 102, 0.12);
  color: #ffe9b0;
  transform: translateY(-1px);
}
.pp-share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.pp-share-kit-group {
  padding: 12px 12px 0;
}
.pp-share-kit-group + .pp-share-kit-group {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px dashed rgba(217, 181, 102, 0.13);
}
.pp-share-kit-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 227, 160, 0.72);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.pp-share-kit-label::before {
  content: 'COPY';
  min-width: 42px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(217, 181, 102, 0.14);
  color: rgba(255, 227, 160, 0.84);
  font-size: 0.54rem;
  letter-spacing: 0.10em;
  text-align: center;
}
.pp-share-kit-label--open {
  color: rgba(184, 240, 197, 0.72);
}
.pp-share-kit-label--open::before {
  content: 'OPEN';
  background: rgba(154, 223, 180, 0.12);
  color: rgba(184, 240, 197, 0.84);
}
.pp-share-kit-label--compose::before {
  content: 'SET';
  background: rgba(130, 176, 255, 0.12);
  color: rgba(190, 212, 255, 0.86);
}
.pp-share-kit-group .pp-share-actions {
  padding: 8px 0 0;
}
.pp-share-actions--open {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pp-share-compose-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 8px;
}
.pp-share-compose-option {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(130, 176, 255, 0.18);
  border-radius: 8px;
  background: rgba(130, 176, 255, 0.06);
  color: rgba(226, 247, 235, 0.86);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: 0.16s ease;
}
.pp-share-compose-option strong,
.pp-share-compose-option span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-compose-option strong {
  color: rgba(214, 226, 255, 0.92);
  font-size: 0.84rem;
  font-weight: 850;
}
.pp-share-compose-option span {
  margin-top: 2px;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}
.pp-share-compose-option:hover,
.pp-share-compose-option.is-active {
  border-color: rgba(190, 212, 255, 0.44);
  background: rgba(130, 176, 255, 0.14);
  color: #e9f0ff;
  transform: translateY(-1px);
}
.pp-share-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.20);
  color: rgba(226, 247, 235, 0.86);
  text-align: left;
  transition: 0.16s ease;
}
.pp-share-action strong {
  display: block;
  width: 100%;
  padding-right: 48px;
  overflow: hidden;
  color: rgba(255, 227, 160, 0.88);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-action span {
  display: block;
  width: 100%;
  padding-right: 48px;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-big::before,
.pp-share-action::before {
  content: attr(data-mode);
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 40px;
  padding: 2px 6px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(205, 226, 199, 0.62);
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}
.pp-share-big[data-mode="copy"]::before,
.pp-share-action[data-mode="copy"]::before {
  border-color: rgba(217, 181, 102, 0.26);
  color: rgba(255, 227, 160, 0.76);
}
.pp-share-big[data-mode="open"]::before,
.pp-share-action[data-mode="open"]::before {
  border-color: rgba(154, 223, 180, 0.25);
  color: rgba(184, 240, 197, 0.74);
}
.pp-share-images {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.pp-share-image {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(235, 247, 230, 0.82);
  overflow: hidden;
  transition: 0.16s ease;
}
.pp-share-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pp-share-image span {
  display: block;
  overflow: hidden;
  padding: 6px 8px;
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-share-image.is-active {
  border-color: rgba(217, 181, 102, 0.42);
  box-shadow: 0 0 0 1px rgba(255, 227, 160, 0.08);
}
.pp-share-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 124px;
  padding: 10px;
  overflow: auto;
}
.pp-share-tag {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(154, 223, 180, 0.20);
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.07);
  color: rgba(226, 247, 235, 0.82);
  font-size: 0.78rem;
  font-weight: 750;
  transition: 0.16s ease;
}
.pp-share-big.is-copied::after,
.pp-share-action.is-copied::after,
.pp-share-image.is-copied::after,
.pp-share-tag.is-copied::after {
  content: attr(data-copied-label);
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.22);
  color: #b8f0c5;
  font-size: 0.62rem;
  font-weight: 800;
  pointer-events: none;
}

/* ── 波形表示 ── */
.pp-waveform-wrap {
  position: relative;
  width: 100%;
  height: 80px;
  margin-bottom: 14px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.045) 0%, rgba(6, 14, 10, 0.84) 100%),
    rgba(2, 8, 7, 0.38);
  border: 1px solid rgba(217, 181, 102, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 160, 0.06),
    0 2px 12px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pp-waveform-wrap:hover {
  border-color: rgba(255, 227, 160, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 160, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.4);
}
.pp-waveform-wrap:active {
  cursor: col-resize;
}
#pp-waveform {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 時間ツールチップ */
.pp-waveform-tooltip {
  position: absolute;
  top: -28px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(12, 19, 15, 0.94);
  border: 1px solid rgba(217, 181, 102, 0.34);
  color: rgba(255, 227, 160, 0.94);
  font-family: 'Cinzel', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 5;
}

@media (max-width: 768px) {
  .player-panel { bottom: 90px; }
  .pp-waveform-wrap { height: 48px; }
  .pp-waveform-tooltip { display: none; }
}

/* 波形操作ヒント */
.pp-waveform-hint {
  font-size: 0.8rem;
  color: rgba(205, 226, 199, 0.58);
  text-align: center;
  margin: 4px 0 10px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* ===== 範囲コントロールパネル (範囲アクティブ時表示) ===== */
.pp-range-controls {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.1fr) minmax(150px, 0.8fr);
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.8rem;
  padding: 0.6rem 0.8rem;
  background: rgba(220, 190, 100, 0.06);
  border: 1px solid rgba(220, 190, 100, 0.32);
  border-radius: 6px;
  animation: pp-range-fade-in 0.25s ease;
}
.pp-range-controls[hidden] { display: none; }
.pp-range-info,
.pp-range-buttons {
  grid-column: 2;
}
.pp-range-fade-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  flex-wrap: wrap;
}
.pp-range-fade-side--in {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.pp-range-fade-side--out {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.pp-range-fade-side span {
  width: 100%;
  color: rgba(220, 200, 150, 0.76);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}
.pp-range-fade-side button {
  min-height: 25px;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(220, 190, 100, 0.3);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(230, 220, 170, 0.82);
  font-size: 0.72rem;
  cursor: pointer;
}
.pp-range-fade-side button:hover,
.pp-range-fade-side button.is-active {
  border-color: rgba(255, 230, 160, 0.72);
  background: rgba(220, 190, 100, 0.18);
  color: rgba(255, 245, 200, 1);
}
@keyframes pp-range-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pp-range-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.92rem;
  color: rgba(255, 220, 140, 0.95);
  letter-spacing: 0.02em;
}
.pp-range-time {
  background: rgba(0,0,0,0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  border: 1px solid rgba(220, 190, 100, 0.25);
}
.pp-range-arrow {
  color: rgba(220, 190, 100, 0.55);
  font-size: 0.95rem;
}
.pp-range-duration {
  color: rgba(220, 190, 100, 0.7);
  font-size: 0.82rem;
}
.pp-range-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pp-range-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(220, 190, 100, 0.4);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 230, 160, 0.92);
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.18s ease;
  border-radius: 4px;
}
.pp-range-btn:hover, .pp-range-btn:focus-visible {
  background: rgba(220, 190, 100, 0.16);
  border-color: rgba(255, 230, 160, 0.85);
  color: rgba(255, 245, 200, 1);
  outline: none;
  box-shadow: 0 0 12px rgba(220, 190, 100, 0.25);
}
.pp-range-btn--primary {
  background: rgba(220, 190, 100, 0.22);
  font-weight: 500;
}
.pp-range-btn--primary:hover, .pp-range-btn--primary:focus-visible {
  background: rgba(220, 190, 100, 0.34);
  box-shadow: 0 0 16px rgba(220, 190, 100, 0.4);
}
@media (max-width: 480px) {
  .pp-range-info { font-size: 0.82rem; gap: 0.35rem; flex-wrap: wrap; }
  .pp-range-btn { font-size: 0.76rem; padding: 0.35rem 0.7rem; }
}

/* ハイコントラスト対応 */
@media (prefers-contrast: more) {
  .pp-range-controls { border-color: rgba(255, 220, 140, 0.7); }
  .pp-range-btn { border-color: rgba(255, 230, 160, 0.85); }
}

/* ===== ループ制作機能 (Phase 1 + 2) ===== */
.pp-range-btn--loop {
  background: rgba(140, 200, 240, 0.18);
  border-color: rgba(160, 220, 250, 0.55);
  color: rgba(200, 235, 255, 0.98);
  font-weight: 500;
}
.pp-range-btn--loop:hover {
  background: rgba(140, 200, 240, 0.30);
  box-shadow: 0 0 14px rgba(140, 200, 240, 0.35);
}
.pp-range-btn.is-active {
  background: rgba(220, 190, 100, 0.30);
  color: rgba(255, 250, 220, 1);
}

/* オプション行（ゼロクロス・クロスフェード・タイプ・BPM） */
.pp-loop-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.85rem;
  padding: 0.45rem 0.5rem 0.3rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(220, 190, 100, 0.18);
  font-size: 0.78rem;
}
.pp-loop-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(220, 200, 150, 0.78);
}
.pp-loop-opt input[type="checkbox"] {
  margin: 0;
  accent-color: rgba(140, 200, 240, 0.85);
}
.pp-loop-opt select, .pp-loop-opt input[type="number"] {
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(220, 190, 100, 0.32);
  background: rgba(0,0,0,0.4);
  color: rgba(255, 230, 160, 0.95);
  font-size: 0.78rem;
  border-radius: 3px;
}

/* 小節吸着プリセット */
.pp-loop-bars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem 0.4rem;
  font-size: 0.76rem;
}
.pp-loop-bars__label {
  color: rgba(220, 190, 100, 0.75);
  margin-right: 0.3rem;
}
.pp-loop-bars-btn {
  min-width: 30px;
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(220, 190, 100, 0.32);
  background: rgba(0,0,0,0.3);
  color: rgba(255, 230, 160, 0.85);
  font-size: 0.76rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.pp-loop-bars-btn:hover {
  background: rgba(220, 190, 100, 0.18);
  border-color: rgba(255, 230, 160, 0.7);
  color: rgba(255, 245, 200, 1);
}
.pp-loop-bars__hint {
  color: rgba(180, 160, 110, 0.5);
  font-size: 0.7rem;
  margin-left: 0.3rem;
}

/* シームレス度スコア表示 */
.pp-seamless-display {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  margin-top: 0.4rem;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  font-size: 0.76rem;
}
.pp-seamless-label {
  color: rgba(220, 200, 150, 0.78);
  white-space: nowrap;
}
.pp-seamless-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pp-seamless-fill {
  height: 100%;
  width: 0%;
  background: rgba(220, 190, 100, 0.6);
  transition: width 0.2s ease, background 0.2s ease;
}
.pp-seamless-score {
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  color: rgba(255, 230, 160, 0.95);
  min-width: 56px;
  text-align: right;
  font-size: 0.78rem;
}

/* 繋ぎ目拡大表示 */
.pp-seam-zoom-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.pp-seam-zoom__label {
  color: rgba(220, 200, 150, 0.78);
  font-size: 0.74rem;
  white-space: nowrap;
}
.pp-seam-zoom-canvas {
  flex: 1;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 3px;
}

/* Intro / Loop / Outro マーカーボタン */
.pp-loop-regions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.5rem;
  margin-top: 0.4rem;
  border-top: 1px solid rgba(220, 190, 100, 0.18);
  font-size: 0.78rem;
}
.pp-loop-regions__label {
  color: rgba(220, 200, 150, 0.78);
  margin-right: 0.3rem;
}
.pp-loop-region-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(220, 190, 100, 0.32);
  background: rgba(0,0,0,0.3);
  color: rgba(255, 230, 160, 0.85);
  font-size: 0.78rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.pp-loop-region-btn:hover {
  background: rgba(220, 190, 100, 0.16);
  color: rgba(255, 245, 200, 1);
}
.pp-loop-region-btn--intro.is-set {
  border-color: rgba(140, 200, 240, 0.85);
  background: rgba(120, 180, 230, 0.20);
  color: rgba(200, 235, 255, 1);
}
.pp-loop-region-btn--loop.is-set {
  border-color: rgba(255, 220, 130, 0.85);
  background: rgba(220, 190, 100, 0.30);
  color: rgba(255, 245, 200, 1);
}
.pp-loop-region-btn--outro.is-set {
  border-color: rgba(255, 160, 140, 0.85);
  background: rgba(230, 130, 130, 0.20);
  color: rgba(255, 220, 200, 1);
}
.pp-loop-region-btn--zip {
  background: rgba(120, 180, 230, 0.20);
  border-color: rgba(140, 200, 240, 0.55);
  color: rgba(200, 235, 255, 0.98);
  margin-left: auto;
}
.pp-loop-region-btn--zip:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.pp-loop-region-btn--auto {
  background: rgba(180, 140, 220, 0.18);
  border-color: rgba(200, 160, 240, 0.55);
  color: rgba(220, 190, 250, 0.95);
}
.pp-loop-region-btn--auto:hover {
  background: rgba(200, 160, 240, 0.30);
  box-shadow: 0 0 14px rgba(200, 160, 240, 0.35);
}

/* 自動ループ点検出 候補表示 */
.pp-auto-loop {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.4rem 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.76rem;
}
.pp-auto-loop__hint {
  color: rgba(180, 160, 110, 0.55);
  font-size: 0.72rem;
  display: inline-flex; gap: 0.35rem; flex-wrap: wrap;
}
.pp-auto-loop-candidate {
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(200, 160, 240, 0.45);
  background: rgba(180, 140, 220, 0.16);
  color: rgba(220, 190, 250, 0.95);
  font-size: 0.72rem;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
}
.pp-auto-loop-candidate:hover {
  background: rgba(200, 160, 240, 0.28);
  border-color: rgba(220, 180, 250, 0.85);
}

/* ============================================================
   尺で試聴タブ: 機能グルーピング + 2 列レイアウト
   ============================================================
   設計思想:
   - 上段: 波形 + 範囲コントロール（タイムコード/操作ボタン）= 全幅の主役
   - 中段: 左 = 解析・視覚化（シームレス度 + 繋ぎ目拡大）
           右 = 編集オプション（ゼロクロス・クロスフェード・タイプ・BPM・小節）
   - 下段: 構造マーカー(Intro/Loop/Outro + ZIP) と 自動検出 = 全幅
   - 最下段: 既存の尺プリセット + フェード + 速度 = 折りたたみ
   ============================================================ */

/* 範囲コントロール全体を CSS Grid 化 */
.pp-range-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.7rem;
  padding: 0.7rem 0.85rem;
  margin: 0.5rem 0 0.6rem;
  background: rgba(220, 190, 100, 0.05);
  border: 1px solid rgba(220, 190, 100, 0.30);
  border-radius: 6px;
}

/* 全幅セクション */
.pp-range-info,
.pp-range-buttons,
.pp-loop-regions,
.pp-auto-loop {
  grid-column: 1 / -1;
}

/* 左列・右列の振り分け */
.pp-seamless-display { grid-column: 1; align-self: start; }
.pp-seam-zoom-wrap   { grid-column: 2; align-self: start; }
.pp-loop-options     { grid-column: 1; align-self: start; }
.pp-loop-bars        { grid-column: 2; align-self: start; }

/* 余白のリセット（grid gap 統一のため） */
.pp-range-controls > * { margin: 0 !important; }

/* 細部の整え */
.pp-range-info { gap: 0.5rem; font-size: 0.92rem; justify-content: center; flex-wrap: wrap; }
.pp-range-time { padding: 0.18rem 0.5rem; }
.pp-range-buttons { gap: 0.4rem; }
.pp-range-btn {
  min-height: 34px;
  padding: 0.32rem 0.85rem;
  font-size: 0.8rem;
}
.pp-loop-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
}
.pp-loop-options::before {
  content: '⚙️ 編集オプション';
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.7);
  text-transform: uppercase;
  display: block;
  padding-bottom: 0.2rem;
  border-bottom: 1px dashed rgba(220, 190, 100, 0.18);
}
.pp-loop-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.76rem;
}
.pp-loop-bars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  position: relative;
  padding-top: 1.4rem;
}
.pp-loop-bars::before {
  content: '🎼 小節吸着 (要BPM)';
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.7);
  text-transform: uppercase;
  position: absolute;
  top: 0.4rem;
  left: 0.6rem;
}
.pp-loop-bars__label { display: none; }
.pp-loop-bars__hint { display: none; }

.pp-seamless-display {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  font-size: 0.78rem;
}
.pp-seamless-bar { height: 8px; flex: 1; }
.pp-seamless-score { font-size: 0.8rem; min-width: 56px; }

.pp-seam-zoom-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
}
.pp-seam-zoom__label {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.7);
  text-transform: uppercase;
}
.pp-seam-zoom-canvas { height: 50px; }

.pp-loop-regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  border-top: 1px solid rgba(220, 190, 100, 0.18);
  font-size: 0.78rem;
}
.pp-loop-regions__label {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(220, 190, 100, 0.78);
  text-transform: uppercase;
  margin-right: 0.3rem;
}

.pp-auto-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(220, 190, 100, 0.18);
  border-radius: 4px;
  background: rgba(0,0,0,0.18);
  font-size: 0.76rem;
}

/* スマートフォン: 1列レイアウトに自動切替 */
@media (max-width: 720px) {
  .pp-range-controls {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .pp-seamless-display, .pp-seam-zoom-wrap,
  .pp-loop-options, .pp-loop-bars { grid-column: 1; }
}

/* 既存の尺プリセット・フェード・速度行は <details> で折りたたみ可能に
   （HTML を変えずに CSS のみで「Advanced 設定」っぽい雰囲気を出す） */
.pp-duration-presets,
.pp-fade-row,
.pp-speed-row,
.pp-controls-grid {
  border-top: 1px dashed rgba(220, 190, 100, 0.18);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}
.pp-duration-presets { border-top-color: rgba(220, 190, 100, 0.32); }

/* 細部の調整 */
.pp-waveform-hint {
  font-size: 0.8rem;
  margin: 7px 0 10px;
  color: rgba(205, 226, 199, 0.62);
}
.pp-duration-desc {
  font-size: 0.86rem;
  color: rgba(205, 226, 199, 0.60);
  margin: 0.3rem 0;
}
.pp-duration-status { font-size: 0.74rem; margin-top: 0.3rem; }

/* ── Tab 4: 尺で試聴 ── */
.pp-duration-desc {
  font-size: 0.86rem;
  color: rgba(205, 226, 199, 0.62);
  margin-bottom: 14px;
  line-height: 1.6;
}

/* 尺プリセット行 */
.pp-duration-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(217, 181, 102, 0.10);
}
.pp-duration-btn {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(217, 181, 102, 0.20);
  background: rgba(255, 227, 160, 0.055);
  color: rgba(235, 247, 230, 0.86);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-duration-btn:hover {
  background: rgba(255, 227, 160, 0.12);
  border-color: rgba(255, 227, 160, 0.45);
  color: #ffe9b0;
}
.pp-duration-btn.is-active {
  background: linear-gradient(135deg, rgba(217, 181, 102, 0.24), rgba(80, 145, 118, 0.20));
  border-color: rgba(255, 227, 160, 0.58);
  color: #ffe9b0;
  box-shadow: 0 0 14px rgba(217, 181, 102, 0.18);
}
.pp-duration-btn--full {
  border-color: rgba(180, 150, 80, 0.22);
  color: rgba(220, 200, 150, 0.75);
}
.pp-duration-btn--full:hover {
  border-color: rgba(200, 170, 80, 0.45);
  color: rgba(240, 220, 160, 0.95);
}
.pp-climax-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(200, 140, 180, 0.25);
  color: rgba(220, 160, 200, 0.75);
  background: rgba(200, 140, 180, 0.06);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-climax-btn:hover {
  border-color: rgba(220, 160, 200, 0.50);
  color: rgba(240, 180, 220, 0.95);
  background: rgba(200, 140, 180, 0.15);
}
.pp-duration-status {
  font-size: 0.72rem;
  color: rgba(154, 223, 180, 0.60);
  min-height: 1.2em;
  margin-top: 6px;
}
/* コントロール2段 */
.pp-controls-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}

/* フェード設定 */
.pp-fade-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pp-fade-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid rgba(180, 150, 80, 0.15);
  background: rgba(180, 150, 80, 0.04);
  color: rgba(220, 200, 150, 0.55);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-fade-btn:hover {
  border-color: rgba(200, 170, 80, 0.35);
  color: rgba(220, 200, 150, 0.90);
}
.pp-fade-btn.is-active {
  background: rgba(200, 170, 80, 0.18);
  border-color: rgba(220, 190, 90, 0.50);
  color: rgba(240, 220, 140, 0.95);
}
/* フェードイン用ボタン（フェードアウトと同スタイル） */
.pp-fadein-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid rgba(110, 170, 220, 0.18);
  background: rgba(110, 170, 220, 0.05);
  color: rgba(180, 215, 240, 0.6);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-fadein-btn:hover {
  border-color: rgba(140, 200, 240, 0.4);
  color: rgba(200, 230, 250, 0.95);
}
.pp-fadein-btn.is-active {
  background: rgba(140, 200, 240, 0.18);
  border-color: rgba(160, 220, 250, 0.55);
  color: rgba(200, 235, 255, 0.98);
}

/* 再生速度 */
.pp-speed-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pp-speed-label {
  font-size: 0.7rem;
  color: rgba(180, 220, 195, 0.62);
  margin-right: 2px;
  white-space: nowrap;
  font-weight: 500;
}
.pp-speed-btn {
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid rgba(100, 180, 130, 0.15);
  background: rgba(100, 180, 130, 0.04);
  color: rgba(200, 230, 215, 0.60);
  font-family: 'Cinzel', monospace;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pp-speed-btn:hover {
  border-color: rgba(100, 200, 140, 0.35);
  color: rgba(200, 230, 215, 0.90);
}
.pp-speed-btn.is-active {
  background: rgba(100, 180, 130, 0.20);
  border-color: rgba(126, 203, 149, 0.50);
  color: #9adfb4;
}

.pp-duration-loop {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(180, 220, 195, 0.60);
  cursor: pointer;
}
.pp-duration-loop input[type="checkbox"] {
  accent-color: #5aaa72;
}

/* ── メモタブ ── */
.pp-memo-toolbar {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.pp-memo-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(100, 180, 130, 0.18);
  background: rgba(100, 180, 130, 0.05);
  color: rgba(226, 247, 235, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.pp-memo-btn:hover {
  border-color: rgba(100, 200, 140, 0.40);
  color: #9adfb4;
  background: rgba(100, 180, 130, 0.12);
}
.pp-memo-btn--eq {
  color: rgba(255, 227, 160, 0.82);
  border-color: rgba(217, 181, 102, 0.28);
  background: rgba(217, 181, 102, 0.07);
}
.pp-memo-btn--eq:hover {
  color: #ffe3a0;
  border-color: rgba(217, 181, 102, 0.55);
  background: rgba(217, 181, 102, 0.14);
}
.pp-memo-btn--log {
  color: rgba(255, 227, 160, 0.86);
  border-color: rgba(217, 181, 102, 0.30);
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.06), rgba(0, 0, 0, 0.02)),
    rgba(217, 181, 102, 0.08);
}
.pp-memo-btn--log:hover {
  color: #fff0bd;
  border-color: rgba(217, 181, 102, 0.58);
  background: rgba(217, 181, 102, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 227, 160, 0.05), 0 8px 18px rgba(0, 0, 0, 0.18);
}
.pp-memo-btn--clear { color: rgba(220, 100, 100, 0.55); border-color: rgba(220, 100, 100, 0.15); }
.pp-memo-btn--clear:hover { color: rgba(240, 120, 120, 0.90); border-color: rgba(220, 100, 100, 0.35); background: rgba(220, 100, 100, 0.08); }
.pp-memo-spacer { flex: 1; }
.pp-memo-tag-input {
  width: 150px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(200, 170, 80, 0.20);
  background: rgba(200, 170, 80, 0.05);
  color: rgba(240, 220, 160, 0.85);
  font-size: 0.82rem;
}
.pp-memo-tag-input::placeholder { color: rgba(200, 170, 80, 0.35); }
.pp-memo-tag-input:focus { outline: none; border-color: rgba(200, 170, 80, 0.45); }
.pp-memo-area {
  width: 100%;
  min-height: 210px;
  height: clamp(210px, 34vh, 320px);
  background:
    linear-gradient(180deg, rgba(255, 227, 160, 0.035), transparent 38%),
    rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(217, 181, 102, 0.18);
  border-radius: 10px;
  padding: 14px 15px;
  color: rgba(235, 247, 230, 0.94);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.96rem;
  line-height: 1.7;
  resize: vertical;
}
.pp-memo-area:focus {
  outline: none;
  border-color: rgba(100, 200, 140, 0.35);
}
.pp-memo-area::placeholder { color: rgba(180, 220, 195, 0.30); }
.pp-memo-footer {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pp-memo-status {
  font-size: 0.82rem;
  color: rgba(154, 223, 180, 0.68);
  flex: 1;
}
/* メモ一覧 */
.pp-memo-list {
  margin-top: 8px;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid rgba(100, 180, 130, 0.10);
  border-radius: 6px;
}
.pp-memo-group-label {
  padding: 4px 10px;
  font-size: 0.65rem;
  color: rgba(200, 170, 80, 0.70);
  background: rgba(200, 170, 80, 0.06);
  border-bottom: 1px solid rgba(100, 180, 130, 0.06);
  letter-spacing: 0.06em;
}
.pp-memo-list-item {
  padding: 5px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(100, 180, 130, 0.05);
  transition: background 0.1s;
}
.pp-memo-list-item:hover { background: rgba(100, 180, 130, 0.06); }
.pp-memo-list-title {
  font-size: 0.75rem;
  color: rgba(220, 245, 228, 0.85);
  margin-right: 8px;
}
.pp-memo-list-preview {
  font-size: 0.68rem;
  color: rgba(180, 220, 195, 0.40);
}

/* ── メモヘルプ ── */
.pp-memo-btn--help {
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: rgba(180, 220, 195, 0.50);
  border-color: rgba(180, 220, 195, 0.15);
}
.pp-memo-btn--help:hover { color: #9adfb4; }
.pp-memo-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.pp-memo-help-panel {
  background: rgba(12, 24, 18, 0.98);
  border: 1px solid rgba(100, 180, 130, 0.22);
  border-radius: 14px;
  max-width: 600px;
  width: 92%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
}
.pp-memo-help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(100, 180, 130, 0.10);
  font-size: 1rem;
  color: #9adfb4;
  font-weight: 600;
}
.pp-memo-help-close {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 1.2rem; cursor: pointer; padding: 0 4px;
}
.pp-memo-help-close:hover { color: #fff; }
.pp-memo-help-body {
  padding: 20px 24px;
  font-size: 0.88rem;
  color: rgba(220, 245, 228, 0.85);
  line-height: 1.9;
}
.pp-memo-help-body h3 {
  font-size: 0.85rem;
  color: rgba(200, 170, 80, 0.85);
  margin: 14px 0 6px;
  letter-spacing: 0.06em;
}
.pp-memo-help-body p { margin: 0 0 8px; }
.pp-memo-help-intro {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.92rem;
  color: rgba(200, 230, 215, 0.80);
  margin-bottom: 14px;
}
.pp-memo-help-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.pp-memo-help-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(100, 180, 130, 0.06);
  font-size: 0.85rem;
}
.pp-memo-help-table td:first-child { white-space: nowrap; color: #9adfb4; width: 90px; }
.pp-memo-help-body code {
  background: rgba(100, 180, 130, 0.10);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.72rem;
  color: rgba(154, 223, 180, 0.90);
}
.pp-memo-help-example {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(100, 180, 130, 0.10);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(200, 240, 215, 0.80);
  white-space: pre-line;
  margin: 8px 0;
}
.pp-memo-help-note {
  font-size: 0.68rem;
  color: rgba(180, 220, 195, 0.40);
  margin-top: 12px;
}

/* ── 未再生時のヒント ── */
.pp-empty-hint {
  text-align: center;
  color: rgba(180, 220, 195, 0.40);
  font-size: 0.82rem;
  padding: 24px 0;
  font-style: italic;
}

/* ── スクロールバー ── */
.player-panel__content::-webkit-scrollbar { width: 4px; }
.player-panel__content::-webkit-scrollbar-track { background: transparent; }
.player-panel__content::-webkit-scrollbar-thumb { background: rgba(100, 180, 130, 0.2); border-radius: 2px; }

/* ── レスポンシブ ── */
@media (max-width: 768px) {
  .player-panel {
    bottom: max(76px, calc(72px + env(safe-area-inset-bottom)));
  }
  .player-panel.is-open {
    max-height: min(560px, calc(100vh - 98px - env(safe-area-inset-bottom)));
  }
  .player-panel__inner {
    max-width: 100%;
    height: min(560px, calc(100vh - 98px - env(safe-area-inset-bottom)));
    min-height: 340px;
  }
  .player-panel__stage-head {
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding: 12px 14px 8px;
  }
  .player-panel__stage-mark {
    grid-template-columns: repeat(3, 7px);
    gap: 4px;
    padding: 6px 7px;
  }
  .player-panel__stage-mark span {
    width: 7px;
    height: 7px;
  }
  .player-panel__stage-kicker { font-size: 0.58rem; }
  .player-panel__stage-title strong { font-size: 0.88rem; }
  .player-panel__stage-copy { display: none; }
  .player-panel__stage-status {
    grid-column: 1 / -1;
    justify-self: stretch;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .player-panel__stage-status::-webkit-scrollbar { display: none; }
  .pp-stage-pill {
    min-width: 74px;
    padding: 5px 8px;
  }
  .pp-stage-pill span { font-size: 0.56rem; }
  .pp-stage-pill strong,
  .pp-stage-pill em { font-size: 0.76rem; }
  .player-panel__tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 10px 12px 9px;
  }
  .player-panel__tabs::-webkit-scrollbar { display: none; }
  .player-panel__tab { min-height: 38px; padding: 8px 11px; font-size: 0.78rem; }
  /* モバイルではパネル内のDL/詳細を非表示（プレイヤー本体にあるため） */
  .player-panel__action { display: none; }
  .player-panel__tabs-spacer { min-width: 4px; flex: 0; }
  .player-panel__content.is-active { min-height: 0; padding: 14px; }
  .pp-share-lab {
    grid-template-columns: 1fr;
    grid-template-areas:
      "post"
      "kit"
      "visual";
  }
  .pp-share-primary-row,
  .pp-share-actions { grid-template-columns: 1fr; }
  .pp-share-presets { padding-right: 12px; }
  .pp-share-editor-meta {
    position: static;
    width: 100%;
    justify-content: space-between;
    padding-top: 4px;
  }
  .pp-share-social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-share-compose-options,
  .pp-share-actions--open { grid-template-columns: 1fr; }
  .pp-share-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-credit-body { flex-direction: column; }
  .pp-copy-btn { align-self: flex-end; }
  .pp-controls-grid { gap: 6px; flex-wrap: wrap; }
  .pp-duration-btn { padding: 7px 12px; font-size: 0.82rem; }
  .pp-fade-btn, .pp-speed-btn { padding: 6px 10px; font-size: 0.78rem; }
  /* メモのフッターを折り返し */
  .pp-memo-footer { flex-wrap: wrap; }
  .pp-memo-btn { font-size: 0.78rem; padding: 6px 10px; }
  .pp-memo-toolbar { gap: 5px; }
  .pp-memo-tag-input { width: 120px; font-size: 0.78rem; }
  .pp-memo-area { min-height: 160px; height: clamp(160px, 32vh, 240px); font-size: 0.9rem; }
}



/* ============================================================
   EQ・コンプ タブ (preset-first design)
   - プリセット中心。詳細パラメータは折りたたみ。
   - 動画制作者向けに直感的な日本語ラベル。
   ============================================================ */

#pp-tab-eqcomp.player-panel__content.is-active {
  display: block;
  padding: 20px 24px 22px;
}

.pp-eqcomp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.pp-eqcomp-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-eqcomp-title strong {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: rgba(255, 243, 200, 0.9);
}
.pp-eqcomp-badge {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(217, 181, 102, 0.42);
  color: #d9b566;
  background: rgba(217, 181, 102, 0.10);
}
.pp-eqcomp-actions-top {
  display: flex;
  gap: 6px;
}
.pp-eqcomp-mini {
  border: 1px solid rgba(154, 223, 180, 0.26);
  background: rgba(154, 223, 180, 0.08);
  color: rgba(226, 247, 235, 0.86);
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 13px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
  font-family: inherit;
}
.pp-eqcomp-mini:hover {
  border-color: rgba(154, 223, 180, 0.5);
  background: rgba(154, 223, 180, 0.14);
  transform: translateY(-1px);
}
.pp-eqcomp-mini.is-active {
  background: rgba(217, 181, 102, 0.22);
  border-color: rgba(217, 181, 102, 0.6);
  color: #ffe1a0;
}
.pp-eqcomp-mini.is-copied {
  background: rgba(154, 223, 180, 0.22);
  border-color: rgba(154, 223, 180, 0.6);
}

.pp-eqcomp-note {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: rgba(205, 226, 199, 0.7);
}

/* ── プリセット行 (音色 / 質感) ── */
.pp-eqcomp-preset-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: start;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px dashed rgba(100, 180, 130, 0.14);
}
.pp-eqcomp-preset-row:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.pp-eqcomp-preset-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding-top: 6px;
  border-right: 1px solid rgba(100, 180, 130, 0.12);
  background: rgba(217, 181, 102, 0.035);
  border-radius: 6px 0 0 6px;
  padding-right: 12px;
  min-height: 44px;
}
.pp-eqcomp-preset-row-label strong {
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: #ffe3a0;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(217, 181, 102, 0.32);
}
.pp-eqcomp-preset-sub {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(180, 220, 195, 0.7);
  text-transform: uppercase;
}

.pp-eqcomp-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-eqcomp-chip {
  border: 1px solid rgba(154, 223, 180, 0.22);
  background: rgba(154, 223, 180, 0.06);
  color: rgba(226, 247, 235, 0.82);
  border-radius: 999px;
  min-height: 36px;
  padding: 8px 15px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}
.pp-eqcomp-chip:hover {
  border-color: rgba(154, 223, 180, 0.5);
  background: rgba(154, 223, 180, 0.16);
  transform: translateY(-1px);
}
.pp-eqcomp-chip.is-active {
  background: linear-gradient(135deg, rgba(154, 223, 180, 0.32), rgba(217, 181, 102, 0.22));
  border-color: rgba(154, 223, 180, 0.62);
  color: #ffe9b0;
  box-shadow: 0 0 14px rgba(217, 181, 102, 0.18);
}

/* ── メーター行 (縦バー、JSは style.height で制御) ── */
.pp-eqcomp-meter-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(217, 181, 102, 0.18);
  border-radius: 10px;
  background: rgba(8, 18, 12, 0.58);
}
.pp-eqcomp-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(180, 220, 195, 0.6);
}
.pp-eqcomp-meter-bar {
  position: relative;
  width: 9px;
  height: 48px;
  background: rgba(154, 223, 180, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.pp-eqcomp-meter-bar i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(180deg, #d9b566, #9adfb4);
  transition: height 0.05s linear;
}
.pp-eqcomp-meter-bar--gr i {
  background: linear-gradient(180deg, #f0a45d, #e16f6f);
}
.pp-eqcomp-gr {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: #e16f6f;
  align-self: center;
}
.pp-eqcomp-peak {
  display: grid;
  grid-template-columns: 86px 64px 38px;
  align-items: center;
  column-gap: 8px;
  margin-left: auto;
  padding: 9px 12px;
  border: 1px solid rgba(154, 223, 180, 0.18);
  border-radius: 7px;
  background: rgba(154, 223, 180, 0.055);
  color: rgba(226, 247, 235, 0.86);
  font-size: 0.84rem;
}
.pp-eqcomp-peak span {
  display: block;
  width: 86px;
  overflow: hidden;
  color: rgba(180, 220, 195, 0.78);
  letter-spacing: 0.04em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-eqcomp-peak strong {
  display: block;
  width: 64px;
  overflow: hidden;
  color: #ffe3a0;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pp-eqcomp-peak em {
  display: block;
  min-width: 38px;
  width: 38px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(154, 223, 180, 0.16);
  color: #9adfb4;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.pp-eqcomp-peak em.is-warn {
  background: rgba(217, 181, 102, 0.20);
  color: #ffe3a0;
}
.pp-eqcomp-peak em.is-clip {
  background: rgba(225, 111, 111, 0.22);
  color: #ff9b9b;
}

/* ── 詳細セクション (折りたたみ) ── */
.pp-eqcomp-details {
  margin-top: 14px;
  border: 1px solid rgba(100, 180, 130, 0.14);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.35);
  overflow: hidden;
}
.pp-eqcomp-details-summary {
  list-style: none;
  cursor: pointer;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.66);
  background: rgba(8, 18, 12, 0.5);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-eqcomp-details-summary::-webkit-details-marker { display: none; }
.pp-eqcomp-details-summary::before {
  content: '▶';
  font-size: 0.6rem;
  color: rgba(154, 223, 180, 0.5);
  transition: transform 0.2s ease;
  display: inline-block;
}
.pp-eqcomp-details[open] > .pp-eqcomp-details-summary::before {
  transform: rotate(90deg);
}
.pp-eqcomp-details-summary:hover {
  color: rgba(226, 247, 235, 0.85);
  background: rgba(8, 18, 12, 0.62);
}
.pp-eqcomp-details-body {
  padding: 14px;
  border-top: 1px solid rgba(100, 180, 130, 0.12);
}

.pp-eqcomp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}

/* ── 詳細: EQ カーブ + バンドスライダー ── */
.pp-eqcomp-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pp-eqcomp-canvas-wrap {
  position: relative;
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(4, 10, 7, 0.7), rgba(8, 18, 12, 0.85));
  padding: 10px 10px 22px 30px;
  overflow: hidden;
}
.pp-eqcomp-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
}
.pp-eqcomp-axis-x {
  position: absolute;
  left: 30px; right: 10px; bottom: 4px;
  display: flex; justify-content: space-between;
  font-size: 0.55rem; letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.4);
  pointer-events: none;
}
.pp-eqcomp-axis-y {
  position: absolute;
  left: 4px; top: 10px; bottom: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 0.55rem; letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.4);
  pointer-events: none;
}

.pp-eqcomp-bands {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pp-eqcomp-band {
  border: 1px solid rgba(100, 180, 130, 0.14);
  border-radius: 6px;
  background: rgba(8, 18, 12, 0.5);
  padding: 7px 8px 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.pp-eqcomp-band-head {
  display: flex; flex-direction: column; gap: 1px;
  text-align: center;
  font-size: 0.6rem; letter-spacing: 0.05em;
}
.pp-eqcomp-band-name { color: rgba(180, 220, 195, 0.78); font-weight: 600; }
.pp-eqcomp-band-freq { color: rgba(180, 220, 195, 0.5); font-size: 0.55rem; }
.pp-eqcomp-band-val {
  color: #d9b566;
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  margin-top: 2px;
}
.pp-eqcomp-band-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(154, 223, 180, 0.18);
  border-radius: 999px; outline: none;
}
.pp-eqcomp-band-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffe1a0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(217, 181, 102, 0.4);
  cursor: pointer;
}
.pp-eqcomp-band-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffe1a0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ── 詳細: コンプノブ ── */
.pp-eqcomp-controls {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.pp-eqcomp-section {
  border: 1px solid rgba(100, 180, 130, 0.16);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.5);
  padding: 9px 10px 10px;
}
.pp-eqcomp-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem; letter-spacing: 0.04em;
  color: rgba(180, 220, 195, 0.78);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px dashed rgba(100, 180, 130, 0.14);
}
.pp-eqcomp-comp {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.pp-eqcomp-comp-row { display: flex; flex-direction: column; gap: 3px; }
.pp-eqcomp-comp-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.6rem; letter-spacing: 0.05em;
  color: rgba(180, 220, 195, 0.66);
}
.pp-eqcomp-comp-val {
  color: #9adfb4;
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.pp-eqcomp-comp-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: rgba(154, 223, 180, 0.18);
  border-radius: 999px; outline: none;
}
.pp-eqcomp-comp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #9adfb4;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.pp-eqcomp-comp-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #9adfb4;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.pp-eqcomp-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ── モバイル対応 ── */
@media (max-width: 720px) {
  .pp-eqcomp-preset-row { grid-template-columns: 1fr; gap: 6px; }
  .pp-eqcomp-preset-row-label {
    border-right: 0;
    border-bottom: 1px solid rgba(100, 180, 130, 0.12);
    padding-right: 0; padding-bottom: 4px;
    min-height: auto;
  }
  .pp-eqcomp-chip { font-size: 0.8rem; padding: 7px 11px; }
  .pp-eqcomp-grid { grid-template-columns: 1fr; }
  .pp-eqcomp-bands { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .pp-eqcomp-band { padding: 5px 4px 7px; }
  .pp-eqcomp-band-name { font-size: 0.62rem; }
  .pp-eqcomp-comp { grid-template-columns: 1fr; }
  .pp-eqcomp-meter-row { gap: 8px; padding: 8px; flex-wrap: wrap; }
  .pp-eqcomp-meter-bar { width: 50px; }
  .pp-eqcomp-peak {
    width: 100%;
    margin-left: 0;
    grid-template-columns: minmax(86px, 1fr) 64px 38px;
  }
}


/* ============================================================
   WAV書き出し行 (波形プレビュータブ・常時表示)
   ============================================================ */
.pp-wav-export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px;
  padding: 10px 12px;
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.45);
}
.pp-wav-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(154, 223, 180, 0.36);
  background: rgba(154, 223, 180, 0.10);
  color: rgba(226, 247, 235, 0.88);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.15s ease;
}
.pp-wav-export-btn svg { flex-shrink: 0; opacity: 0.8; }
.pp-wav-export-btn:hover:not(:disabled) {
  border-color: rgba(154, 223, 180, 0.62);
  background: rgba(154, 223, 180, 0.18);
  color: #ffe9b0;
  transform: translateY(-1px);
}
.pp-wav-export-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}
.pp-wav-export-btn--range:not(:disabled) {
  border-color: rgba(217, 181, 102, 0.56);
  background: rgba(217, 181, 102, 0.12);
  color: #ffe1a0;
}

.pp-export-check {
  margin: 10px 0 10px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(217, 181, 102, 0.20);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.075), rgba(154, 223, 180, 0.035)),
    rgba(5, 14, 11, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.16);
}
.pp-export-check__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.pp-export-check__head span {
  color: rgba(255, 227, 160, 0.90);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pp-export-check__head strong {
  min-width: 64px;
  padding: 3px 9px;
  border: 1px solid rgba(154, 223, 180, 0.34);
  border-radius: 999px;
  color: #b8f0c5;
  background: rgba(154, 223, 180, 0.11);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: center;
}
.pp-export-check__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pp-export-check__grid div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(154, 180, 150, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.20);
}
.pp-export-check__grid span {
  display: block;
  margin-bottom: 3px;
  color: rgba(205, 226, 199, 0.58);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.10em;
}
.pp-export-check__grid strong {
  display: block;
  overflow: hidden;
  color: rgba(235, 247, 230, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-export-check.is-warn {
  border-color: rgba(255, 227, 160, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 227, 160, 0.10), rgba(154, 223, 180, 0.035)),
    rgba(5, 14, 11, 0.58);
}
.pp-export-check.is-warn .pp-export-check__head strong {
  border-color: rgba(217, 181, 102, 0.46);
  color: #ffe3a0;
  background: rgba(217, 181, 102, 0.16);
}
.pp-export-check.is-clip {
  border-color: rgba(255, 130, 130, 0.48);
  background:
    linear-gradient(135deg, rgba(225, 111, 111, 0.12), rgba(255, 227, 160, 0.04)),
    rgba(5, 14, 11, 0.58);
}
.pp-export-check.is-clip .pp-export-check__head strong {
  border-color: rgba(255, 130, 130, 0.52);
  color: #ffb8b8;
  background: rgba(225, 111, 111, 0.18);
}

/* ============================================================
   ループ制作 (折りたたみ)
   ============================================================ */
.pp-loop-advanced {
  margin: 10px 0 14px;
  border: 1px solid rgba(100, 180, 130, 0.16);
  border-radius: 8px;
  background: rgba(8, 18, 12, 0.35);
  overflow: hidden;
}
.pp-loop-advanced-summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(180, 220, 195, 0.7);
  background: rgba(8, 18, 12, 0.5);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-loop-advanced-summary::-webkit-details-marker { display: none; }
.pp-loop-advanced-summary::before {
  content: '▶';
  font-size: 0.6rem;
  color: rgba(154, 223, 180, 0.55);
  transition: transform 0.2s ease;
  display: inline-block;
}
.pp-loop-advanced[open] > .pp-loop-advanced-summary::before {
  transform: rotate(90deg);
}
.pp-loop-advanced-summary:hover {
  color: rgba(226, 247, 235, 0.9);
  background: rgba(8, 18, 12, 0.62);
}
.pp-loop-advanced-body {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(100, 180, 130, 0.12);
}
.pp-loop-advanced-note {
  margin: 0 0 12px;
  font-size: 0.66rem;
  line-height: 1.6;
  color: rgba(180, 220, 195, 0.65);
}
.pp-loop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/* range-controls の余白を新構造に合わせて控えめに */
.pp-range-controls:not([hidden]) {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: rgba(8, 18, 12, 0.35);
  border: 1px dashed rgba(217, 181, 102, 0.4);
  border-radius: 6px;
}

@media (max-width: 720px) {
  .pp-wav-export-row { gap: 6px; padding: 8px 10px; }
  .pp-wav-export-btn { font-size: 0.68rem; padding: 6px 11px; }
  .pp-export-check__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-export-check__grid strong { font-size: 0.74rem; }
  .pp-loop-advanced-body { padding: 10px; }
}


/* ============================================================
   ループ制作セクション: 弁当箱グリッド (bento layout)
   旧設計は .pp-range-controls 配下を前提にしていたが、
   新構造では .pp-loop-advanced-body の下にぶら下がるので、
   ここで上書きして 2 カラムの綺麗なグリッドに詰め直す。
   ============================================================ */

.pp-loop-advanced-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(100, 180, 130, 0.12);
}

/* 全幅カード */
.pp-loop-advanced-note,
.pp-loop-actions,
.pp-loop-regions,
.pp-auto-loop {
  grid-column: 1 / -1;
}

/* 2カラム配置 */
.pp-loop-options     { grid-column: 1; }
.pp-loop-bars        { grid-column: 2; }
.pp-seamless-display { grid-column: 1; }
.pp-seam-zoom-wrap   { grid-column: 2; }    /* シームレス度の右隣に並べる */

/* 余白リセット (旧 grid CSS との競合解消) */
.pp-loop-advanced-body > * { margin: 0 !important; }

/* ── 説明文 ── */
.pp-loop-advanced-note {
  font-size: 0.66rem;
  line-height: 1.55;
  color: rgba(180, 220, 195, 0.6);
  margin: 0 0 2px !important;
}

/* ── アクション (繋ぎ目プレビュー / ループWAV) ── */
.pp-loop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-loop-actions .pp-range-btn {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.74rem;
}

/* ── カード共通スタイル (各機能ブロック) ── */
.pp-loop-options,
.pp-loop-bars,
.pp-seamless-display,
.pp-seam-zoom-wrap,
.pp-loop-regions,
.pp-auto-loop {
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 6px;
  background: rgba(8, 18, 12, 0.45);
  padding: 8px 10px;
  margin: 0;
  position: relative;
}

/* カードの上に小ラベル(神殿風アイコン+カテゴリ) */
.pp-loop-options::before,
.pp-loop-bars::before,
.pp-seamless-display::before,
.pp-seam-zoom-wrap::before,
.pp-loop-regions::before,
.pp-auto-loop::before {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(217, 181, 102, 0.65);
  display: block;
  margin-bottom: 5px;
  border-bottom: 1px dashed rgba(100, 180, 130, 0.18);
  padding-bottom: 4px;
}

.pp-loop-options::before  { content: '⚙ オプション'; }
.pp-loop-bars::before     { content: '𝄫 小節吸着 (要 BPM)'; }
.pp-seamless-display::before { content: '◐ シームレス度'; }
.pp-seam-zoom-wrap::before  { content: '🔍 繋ぎ目拡大'; }
.pp-loop-regions::before  { content: '◆ 構造マーカー'; }
.pp-auto-loop::before     { content: '✦ 自動検出'; }

/* ── オプション (ゼロクロス・クロスフェード・種別・BPM) ── */
.pp-loop-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  border-top: none !important;
  font-size: 0.7rem;
}
.pp-loop-options .pp-loop-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(220, 200, 150, 0.78);
}
.pp-loop-options .pp-loop-opt span:first-child:not(:only-child) {
  flex-shrink: 0;
}
.pp-loop-options select,
.pp-loop-options input[type="number"] {
  padding: 1px 4px;
  font-size: 0.68rem;
  max-width: 76px;
}

/* ── 小節吸着 ── */
.pp-loop-bars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px !important;
}
.pp-loop-bars__label,
.pp-loop-bars__hint { display: none; }
.pp-loop-bars-btn {
  min-width: 26px;
  padding: 3px 7px;
  font-size: 0.7rem;
}

/* ── シームレス度 (短く詰める) ── */
.pp-seamless-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  font-size: 0.7rem;
}
.pp-seamless-display::before {
  /* ラベルを横並びに変えるため上に出さず、左の本文と一緒の段に */
  display: none;
}
.pp-seamless-display .pp-seamless-label {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(217, 181, 102, 0.65);
  white-space: nowrap;
  flex-shrink: 0;
}
.pp-seamless-display .pp-seamless-bar {
  flex: 1;
  min-width: 60px;
  height: 6px;
}
.pp-seamless-display .pp-seamless-score {
  font-size: 0.72rem;
  min-width: 40px;
  text-align: right;
}

/* ── 繋ぎ目拡大 (canvas を小さく) ── */
.pp-seam-zoom-wrap {
  padding: 8px 10px !important;
}
.pp-seam-zoom__label { display: none; }
.pp-seam-zoom-canvas {
  width: 100% !important;
  height: 42px !important;          /* 旧 60px → 42px に短縮 */
  max-height: 42px !important;
  display: block;
  border-radius: 3px;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(100, 180, 130, 0.14);
}

/* ── 構造マーカー ── */
.pp-loop-regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 10px !important;
  border-top: none !important;
}
.pp-loop-regions__label { display: none; }
.pp-loop-region-btn {
  padding: 4px 9px;
  font-size: 0.7rem;
}
.pp-loop-region-btn--zip {
  margin-left: auto;
}

/* ── 自動検出 ── */
.pp-auto-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  font-size: 0.68rem;
}
.pp-auto-loop .pp-loop-region-btn {
  padding: 4px 11px;
}
.pp-auto-loop__hint {
  font-size: 0.65rem;
  color: rgba(180, 160, 110, 0.55);
}

/* ── モバイル: 1列に折り返す ── */
@media (max-width: 720px) {
  .pp-loop-advanced-body {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .pp-loop-options,
  .pp-loop-bars,
  .pp-seamless-display { grid-column: 1; }
  .pp-loop-options { grid-template-columns: 1fr; }
  .pp-seam-zoom-canvas { height: 32px; }
}

/* Video Workbench: Pjaxプレイヤー常駐の制作中動画 */
.pp-video-workbench {
  display: none;
  position: fixed;
  right: clamp(14px, 2.3vw, 32px);
  bottom: 104px;
  z-index: 1201;
  width: min(390px, calc(100vw - 28px));
  color: rgba(236, 255, 241, 0.95);
  font-family: 'Noto Sans JP', sans-serif;
  pointer-events: auto;
  transform-origin: 100% 100%;
  transition: width 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), right 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), bottom 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-video-workbench--focus {
  display: block;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
  transform: none;
  z-index: 1;
}
.pp-vw-shell {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 94px;
  overflow: hidden;
  border: 1px solid rgba(196, 255, 204, 0.20);
  border-radius: 14px;
  background: radial-gradient(circle at 18% 0%, rgba(126, 236, 169, 0.18), transparent 42%), linear-gradient(135deg, rgba(255, 225, 146, 0.12), rgba(72, 154, 112, 0.12)), rgba(4, 14, 11, 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 28px rgba(102, 236, 159, 0.10);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}
.pp-vw-shell::before,
.pp-vw-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pp-vw-shell::before {
  background: linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,0.10) 42%, transparent 58%), radial-gradient(circle at 88% 16%, rgba(255, 225, 146, 0.12), transparent 28%);
  opacity: 0.62;
  mix-blend-mode: screen;
}
.pp-vw-shell::after {
  opacity: 0.18;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, #000, transparent 80%);
}
.pp-video-workbench.is-attention .pp-vw-shell { animation: ppVideoWorkbenchArrive 0.8s ease both; }
@keyframes ppVideoWorkbenchArrive {
  0% { transform: translateY(18px) scale(0.96); filter: brightness(1.5); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
.pp-video-workbench--focus .pp-vw-shell {
  grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
  min-height: clamp(330px, 44vh, 500px);
  align-items: stretch;
  border-radius: 16px;
  border-color: rgba(255, 225, 146, 0.28);
}
.pp-vw-preview {
  position: relative;
  z-index: 1;
  min-height: 94px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(126, 236, 169, 0.12), transparent 42%), rgba(0, 0, 0, 0.30);
}
.pp-video-workbench--focus .pp-vw-preview { min-height: 188px; }
.pp-video-workbench--focus:not(.pp-video-workbench--empty) .pp-vw-preview {
  aspect-ratio: var(--vw-aspect, 16 / 9);
  min-height: 0;
  align-self: start;
  height: auto;
  max-height: min(48vh, 520px);
}
.pp-video-workbench--focus .pp-vw-preview {
  display: block;
  padding: 0;
  border-right: 1px solid rgba(255, 225, 146, 0.16);
}
.pp-video-workbench--focus .pp-vw-video {
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
}
.pp-vw-video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.58);
}
.pp-vw-hero-play {
  display: none;
}
.pp-video-workbench--focus .pp-vw-hero-play {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(154, 255, 186, 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 40%, rgba(154,255,186,0.50), rgba(18,96,54,0.25) 58%, rgba(0,0,0,0.58)),
    rgba(0, 0, 0, 0.42);
  color: #f4ffe9;
  font-size: 0.78rem;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(154,255,186,0.18), 0 0 36px rgba(126,236,169,0.42), 0 16px 40px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.20);
  backdrop-filter: blur(8px);
}
.pp-video-workbench--focus .pp-vw-hero-play::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid currentColor;
}
.pp-video-workbench--focus .pp-vw-hero-play span {
  display: none;
}
.pp-video-workbench--focus.is-playing .pp-vw-hero-play {
  opacity: 0;
  pointer-events: none;
}
.pp-video-workbench--empty .pp-vw-video { opacity: 0; }
.pp-video-workbench--empty .pp-vw-hero-play { display: none; }
.pp-vw-empty {
  position: absolute;
  inset: 78px 12px 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: radial-gradient(circle at 50% 25%, rgba(126, 236, 169, 0.18), transparent 46%), rgba(8, 24, 18, 0.82);
  color: rgba(230, 255, 235, 0.90);
  cursor: pointer;
  text-align: center;
}
.pp-video-workbench:not(.pp-video-workbench--empty) .pp-vw-empty {
  opacity: 0;
  pointer-events: none;
}
.pp-vw-empty__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: rgba(126, 236, 169, 0.92);
  background: rgba(126, 236, 169, 0.10);
  border: 1px solid rgba(126, 236, 169, 0.24);
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.12);
}
.pp-vw-empty__icon svg { width: 19px; height: 19px; }
.pp-vw-empty strong { font-size: 0.76rem; letter-spacing: 0.05em; }
.pp-vw-empty span:last-child { font-size: 0.63rem; color: rgba(189, 226, 196, 0.70); }
.pp-vw-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border-left: 1px solid rgba(196, 255, 204, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 236, 169, 0.10), transparent 36%),
    linear-gradient(90deg, rgba(8, 22, 16, 0.96), rgba(8, 22, 16, 0.82));
}
.pp-video-workbench--focus .pp-vw-body { padding: 16px 17px 14px; gap: 11px; }
.pp-vw-preview .pp-vw-head {
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.pp-vw-head { display: flex; align-items: flex-start; gap: 10px; }
.pp-vw-titlewrap { min-width: 0; flex: 1; }
.pp-vw-kicker {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 225, 146, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.pp-vw-title {
  display: block;
  color: #f4ffe9;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.88rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 18px rgba(126, 236, 169, 0.18);
}
.pp-video-workbench--focus .pp-vw-title { font-size: 1.05rem; }
.pp-vw-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(126, 236, 169, 0.16);
  border-radius: 999px;
  background: rgba(4, 16, 11, 0.46);
}
.pp-vw-preview .pp-vw-mode-switch {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
.pp-vw-mode-btn {
  min-height: 24px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(224, 248, 228, 0.68);
  font-size: 0.61rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.pp-vw-mode-btn:hover,
.pp-vw-mode-btn.is-active {
  color: #fff0bd;
  background: rgba(255, 225, 146, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 146, 0.22);
}
.pp-vw-mode-btn--qpoint.is-active {
  color: #a9ffd1;
  background: rgba(126, 236, 169, 0.14);
  box-shadow: inset 0 0 0 1px rgba(126, 236, 169, 0.28);
}
.pp-vw-meta {
  min-height: 1.2em;
  color: rgba(197, 226, 204, 0.72);
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-vw-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(205, 255, 215, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(220, 244, 224, 0.72);
  cursor: pointer;
}
.pp-vw-icon:hover {
  color: #fff0bd;
  border-color: rgba(255, 225, 146, 0.32);
  background: rgba(255, 225, 146, 0.08);
}
.pp-vw-icon svg { width: 15px; height: 15px; }
.pp-vw-close {
  width: auto;
  min-width: 72px;
  padding: 0 9px;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}
.pp-vw-progress {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
}
.pp-video-workbench--focus .pp-vw-progress {
  display: grid;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 56px;
  z-index: 6;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}
.pp-vw-time {
  color: rgba(223, 246, 228, 0.65);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}
.pp-vw-seek { width: 100%; accent-color: #8ceca7; }
.pp-vw-transport {
  display: none;
  grid-template-columns: repeat(4, minmax(0, auto));
  align-items: center;
  justify-content: start;
  gap: 7px;
}
.pp-video-workbench--focus .pp-vw-transport {
  display: grid;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 7;
  align-self: auto;
  grid-template-columns: repeat(4, minmax(0, auto));
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
.pp-vw-transport button {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid rgba(126, 236, 169, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(126, 236, 169, 0.18), rgba(23, 70, 46, 0.10)),
    rgba(8, 23, 17, 0.78);
  color: rgba(238, 255, 240, 0.94);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.20);
}
.pp-video-workbench--focus .pp-vw-transport button {
  min-height: 34px;
  padding: 7px 12px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.pp-video-workbench--focus .pp-vw-transport button:first-child {
  min-width: 64px;
  border-color: rgba(126, 236, 169, 0.56);
  background:
    linear-gradient(180deg, rgba(126, 236, 169, 0.32), rgba(18, 94, 55, 0.34)),
    rgba(0, 0, 0, 0.50);
  color: #f4ffe9;
  box-shadow: 0 0 20px rgba(126, 236, 169, 0.24), 0 8px 22px rgba(0,0,0,0.35);
}
.pp-vw-transport button:hover,
.pp-vw-transport button.is-active {
  border-color: rgba(255, 225, 146, 0.45);
  color: #fff0bd;
  background: rgba(255, 225, 146, 0.11);
}
.pp-vw-timeline-board {
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(126, 236, 169, 0.14);
  background: rgba(0, 0, 0, 0.18);
}
.pp-video-workbench--focus .pp-vw-timeline-board {
  display: grid;
}
.pp-vw-lane {
  display: grid;
  gap: 4px;
}
.pp-vw-lane-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: rgba(221, 247, 226, 0.70);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.pp-video-workbench--focus .pp-vw-lane-head {
  min-height: 36px;
  gap: 12px;
}
.pp-video-workbench--focus .pp-vw-lane-head > span {
  color: rgba(236, 255, 241, 0.92);
  font-size: 0.95rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}
.pp-vw-lane-head strong {
  min-width: 76px;
  text-align: right;
  color: rgba(255, 225, 146, 0.78);
  font-variant-numeric: tabular-nums;
}
.pp-video-workbench--focus .pp-vw-lane-head strong {
  min-width: 104px;
  text-align: left;
  color: rgba(255, 225, 146, 0.86);
  font-size: 0.72rem;
}
.pp-vw-lane-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px;
  border: 1px solid rgba(255, 225, 146, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.17), transparent 46%),
    rgba(4, 16, 11, 0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.18);
}
.pp-vw-lane-transport button {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(205, 255, 215, 0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(236, 255, 241, 0.9);
  font-size: 0.66rem;
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
}
.pp-vw-lane-transport button:hover,
.pp-vw-lane-transport button.is-active {
  border-color: rgba(255, 225, 146, 0.46);
  background: rgba(255, 225, 146, 0.16);
  color: #fff0bd;
}
.pp-vw-transport button.pp-vw-control-btn,
.pp-vw-lane-transport button.pp-vw-control-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 1;
}
.pp-vw-transport button.pp-vw-control-btn--play,
.pp-vw-lane-transport button.pp-vw-control-btn--play {
  min-width: 44px;
  width: 44px;
  height: 40px;
  border-color: rgba(126, 236, 169, 0.72);
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,0.28), transparent 28%),
    linear-gradient(180deg, rgba(126, 236, 169, 0.50), rgba(18, 111, 63, 0.58)),
    rgba(0, 0, 0, 0.55);
  color: #f8ffed;
  box-shadow: 0 0 0 1px rgba(126,236,169,0.12), 0 0 28px rgba(126,236,169,0.34), 0 12px 26px rgba(0,0,0,0.38);
}
.pp-vw-lane-transport button.pp-vw-control-btn--play {
  min-width: 38px;
  width: 38px;
  height: 34px;
}
.pp-vw-transport button.pp-vw-control-btn--repeat,
.pp-vw-lane-transport button.pp-vw-control-btn--repeat {
  width: auto;
  min-width: 52px;
  grid-template-columns: auto auto;
  gap: 4px;
  padding: 0 9px;
}
.pp-vw-control-symbol {
  display: inline-grid;
  place-items: center;
  min-width: 1em;
  font-size: 1rem;
  line-height: 1;
}
.pp-vw-control-btn--play .pp-vw-control-symbol {
  margin-left: 2px;
  font-size: 1.16rem;
}
.pp-vw-control-btn--pause .pp-vw-control-symbol {
  font-size: 0.82rem;
  letter-spacing: -0.12em;
}
.pp-vw-control-state {
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(248, 255, 237, 0.92);
  font-size: 0.52rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.03em;
}
.pp-vw-control-btn--repeat.is-active .pp-vw-control-state {
  background: rgba(126, 236, 169, 0.22);
  color: #f5ffe7;
}
.pp-vw-transport button.pp-vw-control-btn:hover,
.pp-vw-lane-transport button.pp-vw-control-btn:hover {
  transform: translateY(-1px);
}
.pp-vw-qmenu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pp-vw-qmenu__panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(300px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(126, 236, 169, 0.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 16% 0%, rgba(126, 236, 169, 0.20), transparent 44%),
    rgba(5, 18, 12, 0.96);
  color: rgba(232, 255, 236, 0.88);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 18px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-vw-qmenu__panel strong {
  min-width: 0;
  color: #a9ffd1;
  font-size: 0.78rem;
  text-align: left;
}
.pp-vw-qmenu:hover .pp-vw-qmenu__panel,
.pp-vw-qmenu:focus-within .pp-vw-qmenu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.pp-vw-qmenu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-vw-qmenu__actions button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(126, 236, 169, 0.30);
  border-radius: 999px;
  background: rgba(126, 236, 169, 0.11);
  color: rgba(232, 255, 236, 0.96);
  font-size: 0.66rem;
  font-weight: 1000;
  cursor: pointer;
}
.pp-vw-qmenu__actions button:hover {
  border-color: rgba(255, 225, 146, 0.46);
  background: rgba(255, 225, 146, 0.16);
  color: #fff0bd;
}
.pp-vw-lane-head .pp-vw-insert-menu {
  margin-left: auto;
}
.pp-video-workbench--focus .pp-vw-lane-head .pp-vw-insert-menu {
  filter: drop-shadow(0 12px 24px rgba(255, 225, 146, 0.10));
}
.pp-video-workbench--focus .pp-vw-lane-head .pp-vw-btn--insert {
  min-width: 184px;
  min-height: 38px;
}
.pp-video-workbench--focus .pp-vw-lane-head .pp-vw-btn--insert-toggle {
  min-height: 38px;
  min-width: 38px;
}
.pp-vw-lane-track {
  position: relative;
  height: 58px;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid rgba(196, 255, 204, 0.13);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(126, 236, 169, 0.08), rgba(0,0,0,0.12));
  background-size: 10% 100%, 100% 100%;
  cursor: pointer;
}
.pp-vw-lane--music .pp-vw-lane-track {
  overflow: visible;
}
.pp-vw-video-thumbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  opacity: 0.46;
  pointer-events: none;
}
.pp-vw-video-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(0.92) brightness(0.74);
}
.pp-vw-lane--video .pp-vw-lane-track::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 18, 11, 0.24), rgba(4, 18, 11, 0.06), rgba(4, 18, 11, 0.24));
}
.pp-vw-lane--video .pp-vw-playhead,
.pp-vw-lane--video .pp-vw-qpoint-marker,
.pp-vw-lane--video .pp-vw-goal-marker {
  z-index: 2;
}
.pp-vw-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff0bd;
  box-shadow: 0 0 12px rgba(255, 225, 146, 0.70);
}
.pp-vw-playhead--music {
  z-index: 6;
  background: #8ceca7;
  box-shadow: 0 0 14px rgba(126, 236, 169, 0.72);
}
.pp-vw-clip {
  position: absolute;
  top: 6px;
  bottom: 6px;
  min-width: 42px;
  overflow: visible;
  border: 1px solid rgba(255, 225, 146, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 225, 146, 0.25), rgba(126, 236, 169, 0.18)),
    rgba(11, 28, 19, 0.88);
  color: #fff7cd;
  cursor: grab;
  text-align: left;
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.12), inset 0 1px 0 rgba(255,255,255,0.10);
}
.pp-vw-clip--tone-1 { --clip-a: rgba(255, 225, 146, 0.36); --clip-b: rgba(126, 236, 169, 0.20); }
.pp-vw-clip--tone-2 { --clip-a: rgba(128, 214, 255, 0.34); --clip-b: rgba(126, 236, 169, 0.18); }
.pp-vw-clip--tone-3 { --clip-a: rgba(255, 151, 179, 0.32); --clip-b: rgba(255, 225, 146, 0.16); }
.pp-vw-clip--tone-4 { --clip-a: rgba(174, 151, 255, 0.32); --clip-b: rgba(126, 236, 169, 0.18); }
.pp-vw-clip--tone-5 { --clip-a: rgba(255, 180, 104, 0.34); --clip-b: rgba(255, 244, 190, 0.15); }
.pp-vw-clip--tone-6 { --clip-a: rgba(116, 255, 210, 0.30); --clip-b: rgba(109, 166, 255, 0.17); }
.pp-vw-clip[class*="pp-vw-clip--tone-"] {
  background:
    linear-gradient(90deg, var(--clip-a), var(--clip-b)),
    rgba(11, 28, 19, 0.88);
}
.pp-vw-clip-order,
.pp-vw-clip-remove {
  position: absolute;
  z-index: 12;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}
.pp-vw-clip-order {
  left: 12px;
  color: rgba(6, 18, 12, 0.9);
  background: rgba(255, 240, 189, 0.86);
}
.pp-vw-clip-remove {
  right: 6px;
  color: rgba(255, 232, 226, 0.95);
  background: rgba(150, 42, 34, 0.78);
  border: 1px solid rgba(255, 195, 176, 0.48);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(190, 52, 42, 0.28), 0 4px 12px rgba(0,0,0,0.28);
}
.pp-vw-clip-remove:hover {
  color: #fff;
  background: rgba(220, 62, 48, 0.96);
  transform: translateY(-50%) scale(1.08);
}
.pp-vw-clip.is-selected {
  border-color: rgba(255, 240, 189, 0.86);
  box-shadow: 0 0 24px rgba(255, 225, 146, 0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
.pp-vw-clip:active { cursor: grabbing; }
.pp-vw-clip--mute {
  border-color: rgba(126, 236, 169, 0.54);
}
.pp-vw-clip-title,
.pp-vw-clip-meta {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.pp-vw-clip-title {
  padding-top: 8px;
  font-size: 0.64rem;
  font-weight: 900;
}
.pp-vw-clip-meta {
  margin-top: -1px;
  color: rgba(232, 255, 236, 0.70);
  font-size: 0.52rem;
}
.pp-vw-clip-wavehint {
  position: absolute;
  left: 50px;
  right: 44px;
  bottom: 4px;
  z-index: 13;
  display: block;
  min-height: 14px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(126, 236, 169, 0.24);
  background: rgba(4, 17, 11, 0.72);
  color: rgba(232, 255, 236, 0.88);
  font-size: 0.52rem;
  font-weight: 1000;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.74;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.pp-vw-clip:hover .pp-vw-clip-wavehint,
.pp-vw-clip.is-selected .pp-vw-clip-wavehint {
  opacity: 1;
  border-color: rgba(255, 225, 146, 0.40);
  background: rgba(10, 34, 21, 0.88);
  color: #fff0bd;
}
.pp-vw-clip-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.pp-vw-clip-fade--in {
  left: 0;
  background: linear-gradient(90deg, rgba(4,14,11,0.82), transparent);
}
.pp-vw-clip-fade--out {
  right: 0;
  background: linear-gradient(270deg, rgba(4,14,11,0.82), transparent);
}
.pp-vw-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: 28px;
  cursor: ew-resize;
  background: rgba(255, 240, 189, 0.32);
  border-color: rgba(255, 240, 189, 0.55);
}
.pp-vw-clip-fade-handle {
  position: absolute;
  z-index: 9;
  top: 4px;
  bottom: 4px;
  width: 32px;
  border-radius: 999px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 240, 189, 0.58);
  box-shadow: 0 0 16px rgba(255, 225, 146, 0.24), inset 0 1px 0 rgba(255,255,255,0.12);
}
.pp-vw-clip-fade-handle--in {
  left: clamp(28px, var(--fade-in-pos, 16%), 44%);
}
.pp-vw-clip-fade-handle--out {
  right: clamp(28px, var(--fade-out-pos, 16%), 44%);
}
.pp-vw-clip-fade-handle::after {
  content: '';
  position: absolute;
  inset: 4px 7px;
  border-left: 1px solid rgba(255, 240, 189, 0.72);
  border-right: 1px solid rgba(255, 240, 189, 0.35);
}
.pp-vw-clip-fade-handle::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 18;
  min-width: 112px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 225, 146, 0.42);
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.24), transparent 52%),
    rgba(5, 18, 12, 0.94);
  color: #fff0bd;
  font-size: 0.62rem;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-vw-clip-fade-handle:hover::before,
.pp-vw-clip-fade-handle:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.pp-vw-clip-handle--start {
  left: 0;
  border-right: 1px solid rgba(255, 240, 189, 0.55);
}
.pp-vw-clip-handle--end {
  right: 0;
  border-left: 1px solid rgba(255, 240, 189, 0.55);
}
.pp-vw-clip-handle::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  border-left: 1px solid rgba(255,255,255,0.7);
  border-right: 1px solid rgba(255,255,255,0.34);
  width: 3px;
}
.pp-vw-music-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 46px;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: rgba(232, 255, 236, 0.76);
  font-size: 0.64rem;
  font-weight: 900;
}
.pp-vw-music-volume input {
  width: 100%;
  accent-color: #8ceca7;
}
.pp-vw-music-volume strong {
  color: rgba(255, 225, 146, 0.78);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pp-vw-video-volume {
  display: none;
  grid-template-columns: auto minmax(96px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: rgba(232, 255, 236, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
}
.pp-vw-video-volume input {
  width: 100%;
  accent-color: #8ceca7;
}
.pp-vw-video-volume strong {
  color: rgba(255, 225, 146, 0.86);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pp-video-workbench--focus .pp-vw-video-volume {
  display: grid;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 7;
  width: min(190px, 42%);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
.pp-vw-mute {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 29px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(126, 236, 169, 0.07);
  border: 1px solid rgba(126, 236, 169, 0.13);
  color: rgba(232, 255, 236, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
}
.pp-video-workbench--focus .pp-vw-mute {
  display: flex;
}
.pp-vw-mute input {
  accent-color: #8ceca7;
}
.pp-vw-mute em {
  margin-left: auto;
  color: rgba(255, 225, 146, 0.62);
  font-size: 0.58rem;
  font-style: normal;
}
.pp-vw-statusbar {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-height: 28px;
}
.pp-video-workbench--focus .pp-vw-statusbar {
  display: grid;
}
.pp-vw-qpoint,
.pp-vw-goal {
  display: none;
  grid-template-columns: auto auto repeat(2, minmax(0, auto));
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(189,244,203,0.16);
  border-radius: 10px;
  background: rgba(4, 16, 12, 0.48);
  color: rgba(232, 255, 236, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
}
.pp-vw-qpoint strong,
.pp-vw-goal strong {
  min-width: 56px;
  color: #fff0bd;
  font-variant-numeric: tabular-nums;
}
.pp-vw-qpoint button,
.pp-vw-goal button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(217,181,102,0.30);
  border-radius: 8px;
  background: rgba(217,181,102,0.10);
  color: rgba(255,244,198,0.92);
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
}
.pp-vw-qpoint button:disabled,
.pp-vw-goal button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.pp-vw-qpoint {
  border-color: rgba(126,236,169,0.24);
  background: rgba(6, 28, 19, 0.54);
}
.pp-vw-qpoint strong {
  color: #a9ffd1;
}
.pp-vw-qpoint button {
  border-color: rgba(126,236,169,0.32);
  background: rgba(126,236,169,0.12);
  color: rgba(226,255,236,0.94);
}
.pp-vw-qpoint-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 18px;
  transform: translateX(-50%);
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.pp-vw-qpoint-marker::before {
  content: 'Q';
  position: absolute;
  left: 50%;
  top: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  transform: translateX(-50%);
  border: 1px solid rgba(126,236,169,0.55);
  border-radius: 999px;
  background: rgba(7, 30, 21, 0.94);
  color: #a9ffd1;
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 14px rgba(126,236,169,0.48);
}
.pp-vw-qpoint-marker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: #8cffc1;
  box-shadow: 0 0 16px rgba(126,236,169,0.62);
}
.pp-vw-qpoint-marker:hover::before,
.pp-video-workbench.is-dragging-qpoint .pp-vw-qpoint-marker::before {
  background: rgba(12, 52, 35, 0.98);
  border-color: rgba(255, 225, 146, 0.58);
  color: #fff0bd;
}
.pp-vw-goal,
.pp-vw-goal-marker {
  display: none !important;
}
.pp-vw-goal-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 2px;
  transform: translateX(-1px);
  background: #fff0bd;
  box-shadow: 0 0 16px rgba(217,181,102,0.52);
}
.pp-vw-goal-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
  background: #fff0bd;
  box-shadow: 0 0 14px rgba(217,181,102,0.42);
}
.pp-vw-statusbar span {
  overflow: hidden;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(126, 236, 169, 0.14);
  border-radius: 9px;
  background: rgba(7, 22, 16, 0.58);
  color: rgba(232, 255, 236, 0.78);
  font-size: 0.64rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-vw-editor {
  display: none;
  grid-template-columns: repeat(5, minmax(84px, 1fr));
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 225, 146, 0.16);
  background: rgba(3, 14, 10, 0.36);
}
.pp-video-workbench--focus .pp-vw-editor:not([hidden]) {
  display: grid;
}
.pp-vw-editor__head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 240, 189, 0.86);
  font-size: 0.68rem;
  font-weight: 900;
}
.pp-vw-editor__head span {
  min-width: 0;
  overflow: hidden;
  color: rgba(232, 255, 236, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-vw-editor label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  color: rgba(232, 255, 236, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
}
.pp-vw-editor input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(126, 236, 169, 0.20);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(244, 255, 236, 0.96);
  font: inherit;
  font-size: 0.72rem;
  padding: 6px 7px;
}
.pp-vw-editor label span {
  display: none;
}
.pp-vw-fav-picker {
  position: absolute;
  z-index: 8;
  right: 14px;
  top: 54px;
  width: min(360px, calc(100% - 28px));
  max-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 146, 0.25);
  border-radius: 14px;
  background: rgba(5, 18, 12, 0.96);
  box-shadow: 0 24px 58px rgba(0,0,0,0.48), 0 0 26px rgba(126,236,169,0.13);
}
.pp-vw-fav-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: #fff0bd;
  font-size: 0.72rem;
  font-weight: 900;
}
.pp-vw-fav-picker__head button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
}
.pp-vw-fav-list {
  max-height: 244px;
  overflow: auto;
  padding: 0 8px 10px;
}
.pp-vw-fav-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(126, 236, 169, 0.16);
  border-radius: 10px;
  background: rgba(126, 236, 169, 0.07);
  color: rgba(232, 255, 236, 0.88);
  cursor: pointer;
  text-align: left;
}
.pp-vw-fav-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-vw-fav-item span {
  color: rgba(255, 225, 146, 0.72);
  font-variant-numeric: tabular-nums;
}
.pp-vw-fav-empty {
  padding: 0 12px 14px;
  color: rgba(232, 255, 236, 0.7);
  font-size: 0.72rem;
}
.pp-vw-fav-section + .pp-vw-fav-section {
  border-top: 1px solid rgba(202, 164, 78, 0.18);
  margin-top: 4px;
  padding-top: 6px;
}
.pp-vw-fav-section__title {
  padding: 8px 12px 4px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: #e7ca7c;
  font-weight: 700;
}
.pp-vw-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pp-vw-decision {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 8, 5, 0.58);
  backdrop-filter: blur(10px);
}
.pp-vw-decision__panel {
  width: min(440px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid rgba(255, 225, 146, 0.26);
  border-radius: 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(126, 236, 169, 0.18), transparent 42%),
    rgba(5, 18, 12, 0.94);
  color: rgba(236, 255, 241, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pp-vw-decision__kicker {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 225, 146, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.pp-vw-decision__panel strong {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
}
.pp-vw-decision__panel p {
  margin: 10px 0 0;
  color: rgba(209, 236, 215, 0.82);
  font-size: 0.82rem;
  line-height: 1.75;
}
.pp-vw-decision__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.pp-vw-decision__actions button {
  min-width: 92px;
  min-height: 38px;
  border: 1px solid rgba(205, 255, 215, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(236, 255, 241, 0.9);
  font-weight: 900;
  cursor: pointer;
}
.pp-vw-decision__actions button.is-primary {
  border-color: rgba(255, 225, 146, 0.52);
  background: linear-gradient(180deg, rgba(255, 225, 146, 0.22), rgba(126, 236, 169, 0.11));
  color: #fff0bd;
}
.pp-vw-decision__actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.pp-vw-head .pp-vw-btn--video-menu {
  margin-left: auto;
  min-height: 30px;
  padding: 6px 10px;
}
.pp-vw-insert-menu {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu {
  align-self: start;
  margin: 2px 0 2px;
  filter: drop-shadow(0 12px 24px rgba(255, 225, 146, 0.10));
}
.pp-vw-insert-menu > .pp-vw-btn--insert {
  border-radius: 8px 0 0 8px;
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu > .pp-vw-btn--insert {
  min-height: 46px;
  padding: 10px 22px;
  border-color: rgba(255, 225, 146, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 225, 146, 0.28), rgba(116, 91, 38, 0.22)),
    rgba(33, 53, 28, 0.86);
  color: #fff2bf;
  font-size: 0.88rem;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px rgba(255,225,146,0.12), 0 14px 34px rgba(0,0,0,0.22);
}
.pp-vw-btn--insert-toggle {
  min-width: 32px;
  padding-inline: 8px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu > .pp-vw-btn--insert-toggle {
  min-width: 44px;
  min-height: 46px;
  border-color: rgba(255, 225, 146, 0.58);
  background: rgba(35, 54, 28, 0.88);
  color: #fff2bf;
}
.pp-vw-insert-menu__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: min(280px, 70vw);
  padding: 7px;
  border: 1px solid rgba(255, 225, 146, 0.30);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(44, 82, 50, 0.96), rgba(8, 22, 14, 0.96)),
    rgba(8, 18, 12, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-video-workbench--focus .pp-vw-body > .pp-vw-insert-menu .pp-vw-insert-menu__panel {
  top: calc(100% + 8px);
  bottom: auto;
  z-index: 30;
}
.pp-vw-insert-menu__panel[hidden] {
  display: none;
}
.pp-vw-insert-menu__panel button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(237, 255, 238, 0.92);
  text-align: left;
  cursor: pointer;
}
.pp-vw-insert-menu__panel button:hover {
  background: rgba(126, 236, 169, 0.12);
}
.pp-vw-insert-menu__panel strong {
  font-size: 0.78rem;
  color: #fff0bd;
}
.pp-vw-insert-menu__panel span {
  font-size: 0.68rem;
  color: rgba(217, 238, 220, 0.68);
}
.pp-vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(126, 236, 169, 0.24);
  background: linear-gradient(180deg, rgba(126, 236, 169, 0.13), rgba(43, 99, 70, 0.10)), rgba(8, 23, 17, 0.62);
  color: rgba(231, 255, 237, 0.90);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pp-vw-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 225, 146, 0.48);
  color: #fff0bd;
  box-shadow: 0 0 18px rgba(126, 236, 169, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pp-vw-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}
.pp-vw-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pp-vw-btn--tool,
.pp-vw-play,
.pp-vw-btn--insert,
.pp-vw-btn--update,
.pp-vw-btn--memo,
.pp-vw-btn--fav {
  border-color: rgba(255, 225, 146, 0.34);
  background: linear-gradient(135deg, rgba(255, 225, 146, 0.18), rgba(126, 236, 169, 0.12)), rgba(10, 24, 17, 0.68);
  color: #fff0bd;
}
.pp-vw-btn--insert {
  min-width: 178px;
}
.pp-vw-btn--delete {
  border-color: rgba(255, 154, 137, 0.28);
  color: rgba(255, 220, 212, 0.86);
}
.pp-vw-drag-handle {
  display: none;
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 4;
  width: 82px;
  height: 14px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 225, 146, 0.38), transparent),
    rgba(255,255,255,0.04);
  cursor: move;
}
.pp-video-workbench--focus .pp-vw-shell {
  cursor: default;
}
.pp-video-workbench--focus .pp-vw-shell button,
.pp-video-workbench--focus .pp-vw-shell input,
.pp-video-workbench--focus .pp-vw-shell video {
  cursor: auto;
}
.pp-video-workbench--focus .pp-vw-clip { cursor: grab; }
.pp-video-workbench--focus .pp-vw-clip-handle { cursor: ew-resize; }
.pp-vw-drag-handle::before {
  content: '';
  position: absolute;
  inset: 5px 18px;
  border-top: 1px solid rgba(236,255,241,0.42);
  border-bottom: 1px solid rgba(236,255,241,0.20);
}
.pp-vw-resize-handle {
  display: none;
  position: absolute;
  z-index: 4;
  width: 24px;
  height: 24px;
  opacity: 0.82;
}
.pp-vw-resize-handle--nw {
  left: 5px;
  top: 5px;
  cursor: nwse-resize;
  border-left: 2px solid rgba(255, 225, 146, 0.55);
  border-top: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 7px 0 0 0;
}
.pp-vw-resize-handle--ne {
  right: 5px;
  top: 5px;
  cursor: nesw-resize;
  border-right: 2px solid rgba(255, 225, 146, 0.55);
  border-top: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 0 7px 0 0;
}
.pp-vw-resize-handle--sw {
  left: 5px;
  bottom: 5px;
  cursor: nesw-resize;
  border-left: 2px solid rgba(255, 225, 146, 0.55);
  border-bottom: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 0 0 0 7px;
}
.pp-vw-resize-handle--se {
  right: 5px;
  bottom: 5px;
  cursor: nwse-resize;
  border-right: 2px solid rgba(255, 225, 146, 0.55);
  border-bottom: 2px solid rgba(255, 225, 146, 0.55);
  border-radius: 0 0 7px 0;
}
.pp-vw-resize-handle--se::after {
  content: 'サイズ';
  position: absolute;
  right: 8px;
  bottom: 12px;
  color: rgba(255, 225, 146, 0.62);
  font-size: 0.56rem;
  font-weight: 900;
  white-space: nowrap;
}
.pp-video-workbench.is-moving .pp-vw-shell,
.pp-video-workbench.is-resizing .pp-vw-shell {
  border-color: rgba(255, 225, 146, 0.52);
  box-shadow: 0 22px 58px rgba(0,0,0,0.50), 0 0 32px rgba(126,236,169,0.18);
}
.pp-video-workbench--compact.pp-video-workbench--empty { width: 256px; }
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-shell { grid-template-columns: 86px minmax(0, 1fr); }
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-progress,
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-play,
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-btn--tool,
.pp-video-workbench--compact.pp-video-workbench--empty .pp-vw-close { display: none; }
.pp-video-workbench--hidden {
  display: none !important;
}
.pp-video-workbench--focus {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  max-height: none;
}
.pp-video-workbench--focus .pp-vw-shell {
  height: auto;
  grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
  min-height: 0;
}
.pp-video-workbench--focus .pp-vw-body {
  min-height: 0;
  overflow: hidden;
}
.pp-video-workbench--focus .pp-vw-preview {
  min-height: 0;
  align-self: start;
  aspect-ratio: var(--vw-aspect, 16 / 9);
  height: auto;
  max-height: min(48vh, 520px);
}
.pp-video-workbench--focus:not(.pp-video-workbench--empty) .pp-vw-preview {
  align-self: start;
  aspect-ratio: var(--vw-aspect, 16 / 9);
}
.pp-video-workbench--focus .pp-vw-timeline-board {
  min-height: 0;
}
.pp-video-workbench--small {
  display: block;
  left: 50%;
  right: auto;
  bottom: calc(88px + min(640px, calc(100vh - 112px)) + 10px);
  width: min(960px, calc(100vw - 28px));
  height: 318px;
  transform: translateX(-50%);
  z-index: 1202;
}
.pp-video-workbench--small .pp-vw-shell {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(140px, 0.94fr) minmax(132px, 1fr);
  height: 100%;
  min-height: 0;
}
.pp-video-workbench--small .pp-vw-preview {
  min-height: 0;
  align-self: stretch;
  border-right: 0;
  border-bottom: 1px solid rgba(255, 225, 146, 0.16);
}
.pp-video-workbench--small .pp-vw-meta,
.pp-video-workbench--small .pp-vw-timeline-board,
.pp-video-workbench--small .pp-vw-mute,
.pp-video-workbench--small .pp-vw-statusbar,
.pp-video-workbench--small .pp-vw-editor,
.pp-video-workbench--small .pp-vw-actions {
  display: none !important;
}
.pp-video-workbench--small .pp-vw-body {
  min-height: 0;
  justify-content: center;
}
.pp-video-workbench--small .pp-vw-transport {
  display: grid;
}
.pp-video-workbench--resident {
  display: block;
  left: auto;
  right: clamp(12px, 2vw, 28px);
  bottom: 104px;
  width: min(390px, calc(100vw - 24px));
  height: auto;
  transform: none;
  z-index: 1203;
}
.pp-video-workbench--resident-medium {
  width: min(760px, calc(100vw - 36px));
}
.pp-video-workbench--resident-large {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  z-index: 1600;
}
.pp-video-workbench--resident .pp-vw-shell {
  display: block;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 14px;
}
.pp-video-workbench--resident-large .pp-vw-shell {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}
.pp-video-workbench--resident .pp-vw-meta,
.pp-video-workbench--resident .pp-vw-timeline-board,
.pp-video-workbench--resident .pp-vw-mute,
.pp-video-workbench--resident .pp-vw-statusbar,
.pp-video-workbench--resident .pp-vw-editor,
.pp-video-workbench--resident .pp-vw-insert-menu,
.pp-video-workbench--resident .pp-vw-actions {
  display: none !important;
}
.pp-video-workbench--resident .pp-vw-preview {
  display: block !important;
  position: absolute;
  inset: 0;
  min-height: 0;
  aspect-ratio: auto;
  border-bottom: 0;
  padding: 0;
}
.pp-video-workbench--resident .pp-vw-preview .pp-vw-head {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.pp-video-workbench--resident .pp-vw-body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0;
  padding: 10px;
  border-left: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.66), transparent 34%, transparent 58%, rgba(0,0,0,0.72));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.pp-video-workbench--resident:hover .pp-vw-body,
.pp-video-workbench--resident.is-moving .pp-vw-body,
.pp-video-workbench--resident.is-resizing .pp-vw-body {
  opacity: 1;
}
.pp-video-workbench--resident .pp-vw-head {
  width: 100%;
  align-items: flex-start;
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}
.pp-video-workbench--resident .pp-vw-title {
  max-width: 210px;
  color: #fff7d8;
  text-shadow: 0 2px 12px rgba(0,0,0,0.78);
}
.pp-video-workbench--resident .pp-vw-mode-switch {
  margin-left: auto;
  background: rgba(0,0,0,0.42);
}
.pp-video-workbench--resident .pp-vw-mode-btn--edit {
  min-width: 86px;
  height: 28px;
  padding: 0 10px;
  font-size: 0.66rem;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident,
.pp-video-workbench--resident .pp-vw-mode-btn--resident-medium,
.pp-video-workbench--resident .pp-vw-mode-btn--resident-large,
.pp-video-workbench--resident .pp-vw-mode-btn--hidden {
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 0;
  font-size: 0;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident::before {
  content: '常';
  font-size: 0.76rem;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident-medium::before {
  content: '中';
  font-size: 0.76rem;
}
.pp-video-workbench--resident .pp-vw-mode-btn--resident-large::before {
  content: '□';
  font-size: 0.9rem;
  line-height: 1;
}
.pp-video-workbench--resident .pp-vw-mode-btn--hidden::before {
  content: '_';
  font-size: 1rem;
  line-height: 0.7;
}
.pp-video-workbench--resident .pp-vw-progress {
  display: none;
}
.pp-video-workbench--resident .pp-vw-transport {
  display: grid;
  position: absolute;
  left: 10px;
  bottom: 42px;
  z-index: 5;
  grid-template-columns: repeat(5, minmax(0, auto));
  justify-content: start;
  width: auto;
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-video-volume {
  display: grid;
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  width: min(220px, 100%);
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-qpoint {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 82px;
  z-index: 6;
  align-items: center;
  gap: 6px;
  max-width: min(320px, calc(100% - 20px));
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid rgba(126, 236, 169, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: auto;
}
.pp-video-workbench--resident .pp-vw-qpoint > span {
  color: rgba(220, 255, 226, 0.76);
  font-size: 0.62rem;
  font-weight: 900;
  white-space: nowrap;
}
.pp-video-workbench--resident .pp-vw-qpoint strong {
  min-width: 42px;
  color: #a9ffd1;
  font-size: 0.68rem;
  text-align: center;
}
.pp-video-workbench--resident .pp-vw-qpoint button {
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  white-space: nowrap;
}
.pp-video-workbench--resident-large .pp-vw-transport {
  left: clamp(18px, 3vw, 44px);
  bottom: calc(clamp(18px, 3vw, 44px) + 44px);
}
.pp-video-workbench--resident-large .pp-vw-video-volume {
  left: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
}
.pp-video-workbench--resident-large .pp-vw-qpoint {
  right: clamp(18px, 3vw, 44px);
  bottom: clamp(18px, 3vw, 44px);
}
.pp-video-workbench--resident .pp-vw-transport button {
  background: rgba(0,0,0,0.58);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.pp-video-workbench--resident .pp-vw-close,
.pp-video-workbench--resident .pp-vw-btn--video-menu {
  display: none;
}
.pp-video-workbench--resident .pp-vw-drag-handle,
.pp-video-workbench--resident .pp-vw-resize-handle {
  display: block;
}
.player.video-workbench-locked .player-center {
  position: relative;
  opacity: 0.46;
  filter: grayscale(0.85) saturate(0.55);
}
.player.video-workbench-locked .player-center::after {
  content: none;
  display: none;
}
.player.video-workbench-locked .player-controls,
.player.video-workbench-locked .seekbar {
  pointer-events: none;
  cursor: not-allowed;
}
.player.video-workbench-locked .btn-play,
.player.video-workbench-locked .btn-prev,
.player.video-workbench-locked .btn-next {
  position: relative;
  box-shadow: none;
  transform: none;
}
.player.video-workbench-locked .btn-play::after {
  content: '動画再生中';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  min-width: 84px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 225, 146, 0.42);
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.22), transparent 52%),
    rgba(5, 18, 12, 0.94);
  color: #fff0bd;
  font-size: 0.64rem;
  font-weight: 1000;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 24px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-video-lock-notice {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 1550;
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 14px;
  border: 1px solid rgba(255, 225, 146, 0.36);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 0%, rgba(126, 236, 169, 0.20), transparent 48%),
    rgba(5, 18, 12, 0.94);
  color: #fff0bd;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 16px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-video-lock-notice.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Mac handoff integration: Emerald Glass / Sound Atelier. */
.player-panel.is-open .player-panel__inner {
  background:
    radial-gradient(circle at 12% -10%, rgba(189, 244, 203, 0.15), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(114, 215, 195, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(13, 42, 29, 0.94), rgba(4, 16, 12, 0.985));
  border-top-color: var(--toolbox-line-strong);
  box-shadow: var(--toolbox-shadow-panel), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: var(--toolbox-blur);
  -webkit-backdrop-filter: var(--toolbox-blur);
}
.player-panel__inner::before {
  background:
    linear-gradient(90deg, rgba(189,244,203,0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(189,244,203,0.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(217,181,102,0.10), transparent 46%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  opacity: 0.42;
}
.player-panel__inner::after {
  height: 2px;
  background: var(--toolbox-scanline);
  box-shadow: 0 0 22px rgba(189,244,203,0.22);
}
.player-panel__stage-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.06)),
    rgba(7, 24, 18, 0.28);
}
.player-panel__stage-mark {
  border-color: var(--toolbox-line-strong);
  background: rgba(189,244,203,0.08);
}
.player-panel__stage-mark span {
  background: var(--toolbox-mint);
  box-shadow: 0 0 14px rgba(154,223,180,0.34);
}
.player-panel__stage-mark span:nth-child(2) {
  background: var(--toolbox-gold);
  box-shadow: 0 0 18px rgba(217,181,102,0.36);
}
.player-panel__stage-kicker {
  color: var(--toolbox-gold);
}
.player-panel__stage-title strong {
  color: var(--toolbox-text);
  text-shadow: 0 0 22px rgba(154,223,180,0.14);
}
.player-panel__tabs {
  background:
    linear-gradient(180deg, rgba(189,244,203,0.055), rgba(0,0,0,0.08)),
    rgba(4, 16, 12, 0.36);
  border-bottom-color: var(--toolbox-line);
}
.player-panel__tab,
.player-panel__action,
.pp-vw-btn,
.pp-memo-btn,
.pp-copy-btn,
.pp-share-big,
.pp-share-action,
.pp-range-btn,
.pp-wav-export-btn,
.pp-eqcomp-chip {
  border-color: var(--toolbox-line);
  background:
    var(--toolbox-metal-sheen),
    rgba(7, 24, 18, 0.58);
  color: var(--toolbox-muted);
  transition: border-color var(--toolbox-fast), background var(--toolbox-fast), color var(--toolbox-fast), transform var(--toolbox-fast), box-shadow var(--toolbox-fast);
}
.player-panel__tab::before {
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  margin-right: 0.45em;
  border-radius: 999px;
  background: rgba(189,244,203,0.08);
  color: var(--toolbox-mint-bright);
  font-size: 0.76em;
  vertical-align: -0.05em;
}
.player-panel__tab[data-tab="license"]::before { content: "?"; }
.player-panel__tab[data-tab="credit"]::before { content: "C"; }
.player-panel__tab[data-tab="share"]::before { content: "S"; }
.player-panel__tab[data-tab="video"]::before { content: "V"; }
.player-panel__tab[data-tab="duration"]::before { content: "W"; }
.player-panel__tab[data-tab="eqcomp"]::before { content: "EQ"; width: 2em; }
.player-panel__tab[data-tab="memo"]::before { content: "M"; }
.player-panel__tab:hover,
.player-panel__action:hover,
.pp-vw-btn:hover,
.pp-memo-btn:hover,
.pp-copy-btn:hover,
.pp-share-big:hover,
.pp-share-action:hover,
.pp-range-btn:hover,
.pp-wav-export-btn:hover,
.pp-eqcomp-chip:hover {
  color: var(--toolbox-text);
  border-color: var(--toolbox-line-strong);
  box-shadow: var(--toolbox-shadow-active);
  transform: translateY(-1px);
}
.player-panel__tab.is-mobile-disabled,
.player-panel__video-launch.is-mobile-disabled,
.player-panel__tab.is-mobile-disabled:hover,
.player-panel__video-launch.is-mobile-disabled:hover {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.55);
  color: rgba(230,238,219,0.58);
  border-color: var(--toolbox-line);
  box-shadow: none;
  transform: none;
}
.player-panel__tab.is-active,
.pp-eqcomp-chip.is-active,
.pp-range-btn--primary,
.pp-wav-export-btn--range,
.pp-vw-btn--insert {
  color: #fff4c6;
  border-color: rgba(217,181,102,0.62);
  background:
    linear-gradient(135deg, rgba(217,181,102,0.28), rgba(154,223,180,0.16)),
    rgba(13, 42, 29, 0.88);
  box-shadow: 0 0 0 1px rgba(217,181,102,0.10), 0 0 30px rgba(154,223,180,0.14);
}
.pp-stage-pill,
.pp-license-list,
.pp-credit-block,
.pp-share-card,
.pp-export-check,
.pp-loop-advanced,
.pp-memo-area,
.pp-memo-list,
.pp-eqcomp-head,
.pp-eqcomp-details,
.pp-vw-shell,
.pp-vw-timeline-board,
.pp-vw-editor {
  border-color: var(--toolbox-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.06)),
    var(--toolbox-glass);
  box-shadow: var(--toolbox-shadow-card), inset 0 1px 0 rgba(255,255,255,0.055);
}
.pp-waveform-wrap {
  border-color: rgba(189,244,203,0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(114,215,195,0.12), transparent 36%),
    linear-gradient(180deg, rgba(9,31,23,0.90), rgba(2,10,8,0.82));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 16px 44px rgba(0,0,0,0.30);
}
.pp-waveform-wrap::before {
  opacity: 0.48;
}
.pp-range-controls:not([hidden]),
.pp-range-fade-side,
.pp-eqcomp-meter-row,
.pp-eqcomp-canvas-wrap,
.pp-eqcomp-band,
.pp-eqcomp-comp,
.pp-vw-lane-track,
.pp-vw-mute,
.pp-vw-statusbar {
  border-color: rgba(189,244,203,0.16);
  background: rgba(4, 16, 12, 0.48);
}
.pp-panel-toast {
  border-color: rgba(217,181,102,0.48);
  background:
    linear-gradient(135deg, rgba(217,181,102,0.22), rgba(154,223,180,0.12)),
    rgba(4,16,12,0.95);
}

@media (max-width: 920px) {
  .pp-video-workbench { right: 10px; bottom: 98px; width: min(330px, calc(100vw - 20px)); }
  .pp-video-workbench--focus { bottom: auto; width: 100%; }
  .pp-vw-shell,
  .pp-video-workbench--focus .pp-vw-shell { grid-template-columns: 1fr; min-height: 96px; }
  .pp-video-workbench--focus .pp-vw-preview { min-height: 112px; }
  .pp-vw-meta { display: none; }
}
@media (max-width: 560px) {
  .pp-video-workbench { left: 10px; right: 10px; width: auto; }
  .pp-vw-shell,
  .pp-video-workbench--focus .pp-vw-shell { grid-template-columns: 1fr; }
  .pp-vw-body { padding: 10px; }
  .pp-vw-actions { gap: 5px; }
  .pp-vw-btn { min-height: 28px; padding: 6px 8px; font-size: 0.66rem; }
  .pp-vw-title { font-size: 0.78rem; }
}

/* Range controls with fade tools beside the selected range. */
.pp-range-controls:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(154px, 0.8fr) minmax(240px, 1.1fr) minmax(154px, 0.8fr);
  align-items: center;
  gap: 8px 10px;
}
.pp-range-controls:not([hidden]) > .pp-range-info,
.pp-range-controls:not([hidden]) > .pp-range-buttons {
  grid-column: 2;
}
.pp-range-controls:not([hidden]) > .pp-range-fade-side--in {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.pp-range-controls:not([hidden]) > .pp-range-fade-side--out {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.pp-controls-grid .pp-fade-row {
  display: none;
}
@media (max-width: 860px) {
  .pp-range-controls:not([hidden]) {
    grid-template-columns: 1fr;
  }
  .pp-range-controls:not([hidden]) > .pp-range-info,
  .pp-range-controls:not([hidden]) > .pp-range-buttons,
  .pp-range-controls:not([hidden]) > .pp-range-fade-side--in,
  .pp-range-controls:not([hidden]) > .pp-range-fade-side--out {
    grid-column: 1;
    grid-row: auto;
  }
}

.pp-video-workbench .pp-vw-meta,
.pp-video-workbench .pp-vw-statusbar {
  display: none !important;
}

.pp-video-workbench .pp-vw-progress {
  display: none !important;
}

.pp-video-workbench:not(.pp-video-workbench--resident) .pp-vw-lane--video > .pp-vw-video-volume {
  display: grid !important;
  position: static !important;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  width: auto !important;
  margin-top: 7px;
  padding: 4px 0 0;
  border: 0;
  border-top: 1px solid rgba(154, 223, 180, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* OSの動き軽減設定では装飾的な登場演出だけを省略する。 */
@media (prefers-reduced-motion: reduce) {
  .pp-range-controls,
  .pp-video-workbench.is-attention .pp-vw-shell {
    animation: none;
  }
}

/* Match the actual compact/expanded player height, including safe area and keyboard. */
@media (max-width: 768px) {
  body.hmix-mobile-player .player-panel { bottom: calc(var(--hmix-player-height, 100px) + var(--hmix-keyboard-inset, 0px)); }
  body.hmix-mobile-player .player-panel.is-open,
  body.hmix-mobile-player .player-panel.is-open .player-panel__inner {
    height: min(640px, calc(var(--hmix-visual-height, 100dvh) - var(--hmix-player-height, 100px) - 12px));
    max-height: min(640px, calc(var(--hmix-visual-height, 100dvh) - var(--hmix-player-height, 100px) - 12px));
    min-height: 0;
  }
}

/* A first shelf for using the music; sound shaping opens without leaving the toolbox. */
.pp-tool-path { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 18px 10px; border-bottom: 1px solid var(--toolbox-line); }
.pp-tool-path__hint { color: var(--toolbox-muted); font-size: .76rem; line-height: 1.6; }
.player-panel .player-panel__tab[hidden],
.player-panel .player-panel__stage-status[hidden],
.player-panel .player-panel__video-launch[hidden] { display: none !important; }
@media (max-width: 768px) {
  .pp-tool-path { padding: 4px 12px 8px; gap: 8px; }
  .pp-tool-path__hint { font-size: .7rem; }
}

/* Closed tools must also be absent in WebViews without native inert support. */
.player-panel:not(.is-open) { visibility: hidden; pointer-events: none; }
.player-panel.is-open { visibility: visible; }

.pp-tool-path__hint { flex: 1 1 0; min-width: 0; }
.pp-tool-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--toolbox-line); border-radius: var(--toolbox-radius-sm); background: var(--toolbox-metal-sheen), rgba(7,24,18,.58); color: var(--toolbox-muted); font: inherit; font-size: 1.5rem; cursor: pointer; }
.pp-tool-close:focus-visible { outline: 2px solid var(--toolbox-gold); outline-offset: 3px; }

/* A long video action must span both columns, never widen the signal-mark column. */
@media (max-width: 768px) {
  .player-panel__stage-head { grid-template-columns: max-content minmax(0, 1fr); }
  .player-panel__stage-mark { grid-column: 1; grid-row: 1; justify-self: start; width: max-content; }
  .player-panel__stage-title { grid-column: 2; grid-row: 1; min-width: 0; }
  .player-panel__video-launch { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; white-space: normal; }
  .player-panel__stage-status { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
}

/* Readable basic tools and generous touch controls retain the brass/green materials. */
.player-panel .pp-tool-path__hint {font-size:12px;color:#c6d9c9;}
.player-panel .pp-license-note,.player-panel .pp-empty-hint,.player-panel .pp-share-hint {font-size:13px;line-height:1.85;color:#c6d9c9;}
.player-panel .player-panel__tab,.player-panel .pp-copy-btn,.player-panel .pp-memo-btn {min-height:44px;font-size:13px;}
.player-panel .pp-credit-label,.player-panel .pp-share-kit-label {font-size:12px;}
.player-panel .pp-license-note a {display:inline-flex;align-items:center;min-height:44px;}
@media(max-width:768px){
 .player-panel input[type="text"],.player-panel textarea {font-size:16px;}
 .player-panel .pp-memo-toolbar,.player-panel .pp-memo-footer {flex-wrap:wrap;}
 .player-panel .pp-tool-path {flex-wrap:wrap;}
 .player-panel .player-panel__tab {white-space:normal;}
}
/* Keep every tool entrance visible without horizontal tab scrolling. */
.player-panel .player-panel__tabs { flex-wrap: wrap; overflow: visible; }
.player-panel .player-panel__tablist { display: flex !important; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; }
@media (max-width: 768px) {
  .player-panel .player-panel__tablist { display: grid !important; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .player-panel .player-panel__tab { padding: 7px 6px; font-size: 12px; line-height: 1.4; }
  .player-panel .player-panel__tabs-spacer { display: none; }
}

/* /assets/css/player.css?v=20260924tools1 */
/* ================================================================
   GLOBAL PLAYER — 神殿の祭壇
   深緑の闇 × 翡翠の光 × 和風紋様 × 粒子 × 呼吸アニメーション
   Dark Theme Tokens: var(--dark-*) from style.css :root
   ================================================================ */

/* ===== レイアウト固定 ===== */
/* プレイヤーがフッターコンテンツを隠さないよう body に余白を確保 */
body { padding-bottom: 104px; } /* 88px(player) + 16px(余白) */

/* Shared shell labels must not change when the PJAX body class changes. */
#global-player :is(.lb,.cnt,.new,.time),
.player-panel__stage-kicker { font-size: 11px !important; }

.player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 1200;
  overflow: hidden;
}

/* ===== 背景レイヤー① 深緑の闇（ジャパニーズファンタジー） ===== */
.player-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14, 28, 20, 0.97) 0%,
      rgba(10, 22, 16, 0.99) 100%);
  border-top: 1px solid rgba(60, 140, 90, 0.30);
  box-shadow:
    0 -2px 40px rgba(40, 120, 70, 0.20),
    0 -1px 8px rgba(20, 80, 40, 0.30);
}

/* ===== 背景レイヤー② 翡翠の光（上から神々しく） ===== */
.player-glow {
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 220%;
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(60, 180, 100, 0.12) 0%,
      rgba(40, 140, 80, 0.06) 40%,
      transparent 65%);
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.player.playing .player-glow {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(80, 210, 120, 0.22) 0%,
      rgba(50, 160, 90, 0.10) 40%,
      transparent 65%);
  animation: glowPulse 3.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1; }
}

/* ===== 背景レイヤー③ 和風円形紋様 ===== */
.player-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url('/assets/images/pattern-circle.svg');
  background-repeat: repeat;
  background-size: 120px 120px;
  pointer-events: none;
}

/* ===== 背景レイヤー④ 粒子（::before） ===== */
.player::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(80, 200, 120, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 1s ease;
}

.player.playing::before {
  opacity: 0.22;
  animation: particleDrift 8s linear infinite;
}

@keyframes particleDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* ===== 上辺の光ライン ===== */
.player::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(80, 200, 120, 0.00) 10%,
    rgba(100, 220, 140, 0.60) 30%,
    rgba(120, 240, 160, 0.90) 50%,
    rgba(100, 220, 140, 0.60) 70%,
    rgba(80, 200, 120, 0.00) 90%,
    transparent 100%
  );
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.player.playing::after {
  animation: topLineGlow 3s ease-in-out infinite;
}

@keyframes topLineGlow {
  0%, 100% { opacity: 0.70; }
  50%       { opacity: 1; box-shadow: 0 0 8px rgba(100, 220, 140, 0.60); }
}

/* ===== 呼吸アニメーション（再生中） ===== */
.player.playing {
  animation: playerBreathe 4.5s ease-in-out infinite;
}

@keyframes playerBreathe {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.006); }
}

/* ===== 曲変更フェード ===== */
.player.track-changing .player-left {
  animation: trackFade 0.6s ease;
}

@keyframes trackFade {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  70%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ===== 内部レイアウト ===== */
.player-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 24px;
}

/* ===== 左: 曲情報 ===== */
.player-left {
  flex: 0 0 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.track-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dark-text-bright);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  text-shadow: 0 0 12px rgba(80, 200, 120, 0.40);
}

.track-tags {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.player-tag {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: rgba(120, 210, 150, 0.80);
  background: rgba(60, 160, 90, 0.12);
  border: 1px solid rgba(80, 180, 110, 0.28);
  border-radius: 100px;
  padding: 1px 7px;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ===== 中央: コントロール ===== */
.player-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 前・次ボタン */
.btn-prev,
.btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(40, 100, 60, 0.20);
  border: 1px solid rgba(80, 180, 110, 0.22);
  color: rgba(120, 210, 150, 0.70);
  cursor: pointer;
  transition: all 0.22s ease;
}

.btn-prev:hover,
.btn-next:hover {
  background: rgba(60, 140, 80, 0.30);
  border-color: rgba(100, 210, 140, 0.50);
  color: rgba(160, 240, 190, 0.95);
  transform: scale(1.10);
  box-shadow: 0 0 10px rgba(80, 200, 120, 0.25);
}

/* 再生ボタン（核） */
.btn-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(145deg,
    rgba(50, 130, 75, 0.90) 0%,
    rgba(30, 90, 55, 0.95) 100%);
  border: 1.5px solid rgba(100, 210, 140, 0.45);
  color: rgba(200, 245, 220, 0.98);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow:
    0 2px 16px rgba(40, 120, 70, 0.40),
    0 0 0 0 rgba(80, 200, 120, 0),
    inset 0 1px 0 rgba(140, 240, 170, 0.20);
}

.btn-play:hover {
  background: linear-gradient(145deg,
    rgba(65, 155, 90, 0.95) 0%,
    rgba(40, 110, 65, 0.98) 100%);
  transform: scale(1.08);
  box-shadow:
    0 4px 24px rgba(50, 150, 90, 0.50),
    0 0 28px rgba(80, 210, 120, 0.30),
    inset 0 1px 0 rgba(160, 255, 190, 0.25);
}

.player.playing .btn-play {
  background: linear-gradient(145deg,
    rgba(55, 145, 80, 0.95) 0%,
    rgba(35, 100, 60, 0.98) 100%);
  animation: playBtnGlow 2.8s ease-in-out infinite;
}

@keyframes playBtnGlow {
  0%, 100% {
    box-shadow:
      0 2px 16px rgba(40, 120, 70, 0.40),
      0 0 20px rgba(80, 200, 120, 0.35),
      inset 0 1px 0 rgba(140, 240, 170, 0.20);
  }
  50% {
    box-shadow:
      0 2px 20px rgba(50, 140, 80, 0.55),
      0 0 40px rgba(90, 220, 130, 0.55),
      0 0 60px rgba(70, 180, 110, 0.20),
      inset 0 1px 0 rgba(160, 255, 190, 0.30);
  }
}

/* ===== シークバー ===== */
.seekbar {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 4px;
  background: rgba(60, 140, 80, 0.18);
  border-radius: 100px;
  cursor: pointer;
  transition: height 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30);
}

.seekbar:hover {
  height: 6px;
}

.seek-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(40, 140, 80, 0.90) 0%,
    rgba(70, 200, 120, 0.95) 50%,
    rgba(100, 230, 150, 1.00) 100%
  );
  border-radius: 100px;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow:
    0 0 6px rgba(80, 210, 120, 0.60),
    0 0 14px rgba(60, 180, 100, 0.35);
}

/* 再生中はシークバーが光る */
.player.playing .seek-progress {
  animation: seekGlow 2.5s ease-in-out infinite;
}

@keyframes seekGlow {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(80, 210, 120, 0.60),
      0 0 14px rgba(60, 180, 100, 0.35);
  }
  50% {
    box-shadow:
      0 0 10px rgba(100, 230, 140, 0.85),
      0 0 22px rgba(70, 200, 120, 0.55),
      0 0 36px rgba(50, 160, 90, 0.25);
  }
}

/* シークバー先端の光点 */
.seek-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(160, 255, 190, 1.00) 0%,
    rgba(100, 220, 140, 0.90) 60%,
    rgba(60, 170, 100, 0.70) 100%);
  border: 1.5px solid rgba(200, 255, 220, 0.80);
  box-shadow:
    0 0 8px rgba(100, 230, 140, 0.80),
    0 0 16px rgba(70, 200, 120, 0.50);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.seekbar:hover .seek-thumb {
  opacity: 1;
}

/* ===== 時間表示 ===== */
.time {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(100, 200, 130, 0.55);
}

/* ===== 右: モード・音量 ===== */
.player-right {
  flex: 0 0 auto; /* V2.3: 三つの扉が収まるよう固定幅を解除 */
  align-self: stretch; /* V2.3: 扉をプレイヤー縦幅いっぱいに */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ===== お気に入りボタン — 灯火 / アンバー ===== */
.btn-fav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(210, 148, 62, 0.38);
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-fav:hover {
  color: rgba(255, 184, 88, 0.85);
  border-color: rgba(255, 150, 50, 0.30);
  background: rgba(160, 100, 20, 0.12);
}
.btn-fav.is-fav {
  color: rgba(255, 159, 58, 0.96);
  border-color: rgba(255, 140, 50, 0.52);
  background: rgba(180, 100, 18, 0.16);
  box-shadow:
    0 0 6px  rgba(255, 180, 80, 0.48),
    0 0 16px rgba(255, 130, 40, 0.24),
    0 0 32px rgba(255, 110, 30, 0.10);
}
.btn-fav.is-fav:hover {
  color: rgba(255, 200, 110, 1);
  background: rgba(190, 110, 20, 0.22);
  box-shadow:
    0 0 8px  rgba(255, 190, 90, 0.55),
    0 0 22px rgba(255, 140, 50, 0.30),
    0 0 40px rgba(255, 110, 30, 0.14);
}
.btn-fav:disabled {
  color: rgba(160, 120, 55, 0.18);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
}

/* 保存リストボタン (モーダルトリガー) — 灯火 / アンバー */
.fav-list-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(140, 90, 18, 0.12);
  border: 1px solid rgba(200, 130, 45, 0.24);
  border-radius: 3px;
  padding: 0 8px;
  height: 26px;
  cursor: pointer;
  white-space: nowrap;
  color: rgba(210, 148, 62, 0.70);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  line-height: 1;
  transition: all 0.18s ease;
  user-select: none;
}
.fav-list-btn svg {
  flex-shrink: 0;
  opacity: 0.75;
}
.fav-list-btn__count {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(230, 165, 70, 0.65);
}
.fav-list-btn:hover {
  color: rgba(255, 184, 88, 0.95);
  border-color: rgba(255, 148, 45, 0.45);
  background: rgba(160, 100, 20, 0.20);
  box-shadow: 0 0 8px rgba(255, 160, 60, 0.18);
}
.fav-list-btn:hover .fav-list-btn__count {
  color: rgba(255, 184, 88, 0.90);
}
.fav-list-btn:hover svg {
  opacity: 1;
}

/* ===== V2.3 三つの扉 — 深緑の物理ボタン（音楽手帖・制作ツール・曲を持ち込む） =====
   オーディオ機器のパネル質感。緑=最暗トーン・文字/アイコンは金・押すと沈む。
   （.fav-list-btn 系は backups 内の旧ページが参照するため温存） */
.player-doors {
  display: flex;
  align-items: stretch;
  gap: 0; /* 隙間なく連結（segmented） */
  margin: 0 6px;
  align-self: stretch; /* プレイヤー縦幅いっぱい */
  border-left: 1px solid rgba(0, 0, 0, 0.55);
  border-right: 1px solid rgba(90, 180, 120, 0.35);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}
.pdoor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  padding: 0 13px;
  cursor: pointer;
  border: none;
  border-radius: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #f0d68f; /* ゴールドの刻印 */
  /* 深緑（最暗トーン・Hiro確定 2026-07-07） */
  background: linear-gradient(180deg, #2a5f3e 0%, #1a4428 44%, #183f26 58%, #0c2415 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow:
    inset 1px 1px 0 rgba(150, 235, 180, 0.4),
    inset 0 -3px 5px rgba(0, 0, 0, 0.42),
    inset -1px 0 0 rgba(120, 210, 150, 0.15);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 7px rgba(120, 220, 150, 0.18);
  transition: box-shadow 0.07s linear, background 0.16s, color 0.16s;
}
.pdoor:first-child {
  border-left: 1px solid rgba(120, 210, 150, 0.2);
}
.pdoor:last-child {
  border-right: none;
}
.pdoor::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0; /* 天面のツヤ */
  background: linear-gradient(180deg, rgba(190, 255, 210, 0.22), rgba(190, 255, 210, 0));
  pointer-events: none;
}
.pdoor:hover {
  color: #ffe9a8;
  background: linear-gradient(180deg, #356e49 0%, #205334 44%, #1d4b2d 58%, #0f2c1a 100%);
}
.pdoor:active,
.pdoor.is-open {
  /* カチッと沈む＝内側に凹む（is-open はツールパネル展開中） */
  background: linear-gradient(180deg, #164026 0%, #12351f 60%, #0d2917 100%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(150, 235, 180, 0.12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* V2.3.1 翡翠の灯（案B・Hiro採用 2026-07-07）— 触れると敷居が灯り、開いている扉は灯りっぱなし */
.pdoor::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, transparent, #7ecb95, transparent);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.pdoor:hover::after,
.pdoor.is-open::after {
  opacity: 0.85;
}
.pdoor.is-open::after {
  opacity: 1;
}
.pdoor:not(.is-open):hover {
  box-shadow:
    inset 1px 1px 0 rgba(150, 235, 180, 0.4),
    inset 0 -3px 5px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(110, 220, 150, 0.18);
}
.pdoor.is-open {
  color: #ffe9a8;
}
/* キーボード操作にも金の輪 */
.pdoor:focus-visible {
  outline: 2px solid rgba(255, 207, 110, 0.85);
  outline-offset: -2px;
}
.pdoor svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.pdoor .lb {
  line-height: 1.2;
}
/* 音楽手帖のカウント＝LED風の金バッジ（右上） */
.pdoor .cnt {
  position: absolute;
  top: 6px;
  right: 7px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px;
  line-height: 1;
  color: #14200f;
  background: linear-gradient(180deg, #ffe6a2, #c9a44e);
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* NEW! バッジ — オレンジ（Hiro確定 2026-07-07） */
.pdoor .new {
  position: absolute;
  top: 5px;
  right: -9px;
  z-index: 3;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: #401104;
  background: linear-gradient(180deg, #ffaa4d, #ff7a1e);
  border: 1px solid rgba(140, 50, 0, 0.6);
  border-radius: 5px;
  padding: 2px 5px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  transform: rotate(7deg);
  animation: pdoor-newpulse 1.8s ease-in-out infinite;
}
@keyframes pdoor-newpulse {
  0%, 100% { transform: rotate(7deg) scale(1); }
  50% { transform: rotate(7deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pdoor .new { animation: none; }
}
@media (max-width: 768px) {
  .player-right { align-self: auto; }
  .player-doors { margin: 0 4px; align-self: auto; }
  .pdoor { min-width: 48px; padding: 6px 7px; font-size: 8.5px; gap: 3px; }
  .pdoor svg { width: 15px; height: 15px; }
  .pdoor .cnt { top: 3px; right: 4px; min-width: 13px; height: 13px; font-size: 8.5px; }
  .pdoor .new { top: 2px; right: -6px; font-size: 9.5px; padding: 2px 5px; }
}

/* リピート・シャッフルボタン */
.btn-repeat,
.btn-shuffle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(80, 180, 110, 0.40);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-repeat:hover,
.btn-shuffle:hover {
  color: rgba(120, 220, 150, 0.80);
  border-color: rgba(80, 180, 110, 0.30);
  background: rgba(50, 140, 80, 0.12);
}

.btn-repeat[data-mode="one"],
.btn-repeat[data-mode="all"],
.btn-shuffle[data-active="true"] {
  color: rgba(120, 230, 155, 0.95);
  border-color: rgba(80, 200, 120, 0.45);
  background: rgba(50, 160, 90, 0.15);
  box-shadow: 0 0 8px rgba(80, 200, 120, 0.25);
}

/* DL / 詳細 ボタン */
.player-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: rgba(180, 220, 195, 0.60);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  flex-shrink: 0;
}
.player-action-btn:hover {
  color: #9adfb4;
  background: rgba(100, 180, 130, 0.12);
}

/* 音量 */
.volume-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.volume-icon {
  color: rgba(80, 180, 110, 0.50);
  flex-shrink: 0;
}

.volume {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 3px;
  background: rgba(60, 140, 80, 0.22);
  border-radius: 100px;
  outline: none;
  border: none;
  cursor: pointer;
  box-shadow: none;
}

.volume:focus {
  outline: none;
  box-shadow: none;
}

.volume:focus-visible {
  outline: none;
  box-shadow: none;
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(140, 230, 170, 1.00) 0%,
    rgba(80, 180, 110, 0.90) 100%);
  border: 1.5px solid rgba(200, 255, 220, 0.70);
  box-shadow: 0 0 6px rgba(80, 200, 120, 0.50);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.volume::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(100, 220, 140, 0.70);
}

.volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(100, 200, 130, 0.90);
  border: 1.5px solid rgba(200, 255, 220, 0.70);
  cursor: pointer;
}

/* ===== ページ下部のpadding（プレイヤー分） ===== */
body {
  padding-bottom: 88px;
}

/* ===== モバイル対応 ===== */
@media (max-width: 768px) {
  .player {
    height: auto;
  }

  body {
    padding-bottom: 90px;
  }

  .player-inner {
    padding: 6px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .player-left {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .track-title {
    font-size: 0.75rem;
  }
  .track-tags {
    display: none;
  }

  .player-center {
    flex: 0 0 100%;
    order: 3;
    gap: 6px;
  }

  .player-right {
    flex: 0 0 auto;
    order: 2;
    gap: 4px;
  }
  .player-right .btn-fav {
    width: 26px;
    height: 26px;
  }
  .player-right .fav-list-btn {
    padding: 2px;
  }

  .btn-repeat,
  .btn-shuffle,
  .player-action-btn {
    display: none;
  }

  .fav-list-btn__label,
  .fav-list-btn__count {
    display: none;
  }

  .volume-wrap {
    display: none;
  }

  /* ツールボタン：右側に確実に表示 */
  .player-tool-btn {
    padding: 3px 8px;
    font-size: 0.62rem;
  }
  .player-tool-btn svg {
    width: 10px;
    height: 10px;
  }

  .player-controls {
    gap: 4px;
  }
  .btn-play {
    width: 36px;
    height: 36px;
  }
  .btn-prev,
  .btn-next {
    width: 24px;
    height: 24px;
  }
  .seekbar {
    height: 3px;
  }
  .time {
    font-size: 0.7rem;
  }

  .seekbar {
    max-width: 100%;
  }

  .time {
    font-size: 0.68rem;
  }
}

@media (max-width: 480px) {
  .player-left {
    flex: 0 0 120px;
  }

  .track-title {
    font-size: 0.72rem;
  }

  .player-inner {
    gap: 8px;
  }
}

/* ===== プレイヤー 足跡ボタン ===== */
.player-btn-footprint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(154, 218, 180, 0.45);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.22s ease;
}
.player-btn-footprint:hover {
  color: rgba(154, 218, 180, 0.9);
  border-color: rgba(100, 180, 130, 0.35);
  background: rgba(45, 90, 61, 0.18);
}

/* ===== プレイヤー 足跡ポップアップ ===== */
.player-fp-popup {
  position: fixed;
  bottom: calc(72px + 0.5rem); /* プレイヤーの高さ分上 */
  right: 1rem;
  width: 300px;
  background: rgba(8, 18, 14, 0.96);
  border: 1px solid rgba(100, 180, 130, 0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  z-index: 9000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(154,218,180,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.player-fp-popup[hidden] { display: none; }

.player-fp-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
}
.player-fp-popup__track {
  font-size: 0.78rem;
  color: rgba(154, 218, 180, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.player-fp-popup__close {
  background: transparent;
  border: none;
  color: rgba(154, 218, 180, 0.5);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  flex-shrink: 0;
  transition: color 0.2s;
}
.player-fp-popup__close:hover { color: rgba(154, 218, 180, 0.9); }

.player-fp-popup__fields {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.player-fp-popup__nick,
.player-fp-popup__body,
.player-fp-popup__tag {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(100, 180, 130, 0.22);
  border-radius: 6px;
  color: rgba(220, 235, 225, 0.9);
  font-size: 0.8rem;
  padding: 0.4rem 0.55rem;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  resize: none;
  transition: border-color 0.2s;
}
.player-fp-popup__nick::placeholder,
.player-fp-popup__body::placeholder,
.player-fp-popup__tag::placeholder { color: rgba(154, 218, 180, 0.3); }
.player-fp-popup__nick:focus,
.player-fp-popup__body:focus,
.player-fp-popup__tag:focus { border-color: rgba(100, 180, 130, 0.55); }

.player-fp-popup__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.55rem;
}
.player-fp-popup__count {
  font-size: 0.72rem;
  color: rgba(154, 218, 180, 0.4);
}
.player-fp-popup__submit {
  background: rgba(45, 90, 61, 0.55);
  border: 1px solid rgba(100, 180, 130, 0.4);
  border-radius: 5px;
  color: rgba(154, 218, 180, 0.9);
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.player-fp-popup__submit:hover {
  background: rgba(45, 90, 61, 0.85);
  border-color: rgba(100, 180, 130, 0.7);
}
.player-fp-popup__note {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  min-height: 1em;
  color: transparent;
}
.player-fp-popup__note--success { color: rgba(100, 200, 140, 0.85); }
.player-fp-popup__note--error   { color: rgba(220, 100, 80, 0.85); }

@media (max-width: 768px) {
  .player-fp-popup {
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-width: none;
    padding: 1.1rem 1.1rem 1rem;
  }
}

/* ============================================================
   Phase2 「ひとつの心臓」の脈拍: お気に入り件数バッジ/♥の鼓動演出
   favorites:updated で件数が変わると脈打ち、追加時は♥に金の灯が灯る。
   ============================================================ */
@keyframes favPulse {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.4); }
  55%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes favGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,110,.6); }
  100% { box-shadow: 0 0 0 14px rgba(255,200,110,0); }
}
.fav-pulse { animation: favPulse .65s cubic-bezier(.22,1,.36,1); will-change: transform; }
#player-fav-count.fav-pulse { color: #ffcf6e; text-shadow: 0 0 8px rgba(255,200,110,.7); }
#player-btn-fav.fav-pulse { animation: favPulse .65s cubic-bezier(.22,1,.36,1), favGlow .7s ease-out; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .fav-pulse, #player-btn-fav.fav-pulse { animation: none !important; }
}

/* Before a track is chosen, the mobile player becomes a slim launcher. */
@media (max-width: 768px) {
  #global-player:has(#player-btn-fav:disabled) {
    height: 58px;
  }
  #global-player:has(#player-btn-fav:disabled) .player-inner {
    min-height: 58px;
    padding: 5px 10px;
    flex-wrap: nowrap;
  }
  #global-player:has(#player-btn-fav:disabled) .player-center,
  #global-player:has(#player-btn-fav:disabled) .btn-fav,
  #global-player:has(#player-btn-fav:disabled) .btn-repeat,
  #global-player:has(#player-btn-fav:disabled) .btn-shuffle,
  #global-player:has(#player-btn-fav:disabled) .volume-wrap,
  #global-player:has(#player-btn-fav:disabled) .player-action-btn,
  #global-player:has(#player-btn-fav:disabled) #player-tool-btn {
    display: none;
  }
  #global-player:has(#player-btn-fav:disabled) .player-left {
    order: 1;
    flex: 1 1 auto;
  }
  #global-player:has(#player-btn-fav:disabled) .player-right {
    order: 2;
    flex: 0 0 auto;
  }
  #global-player:has(#player-btn-fav:disabled) .player-doors {
    margin: 0;
  }
  #global-player:has(#player-btn-fav:disabled) .pdoor {
    min-width: 54px;
    min-height: 46px;
  }

}

/* ── プレイヤーの足跡ポップアップ: タグ欄 ──────────────
   足あとは「ひとこと」と「自由に書けるタグ」の2種類。
   語彙は閉じない。既存タグをワンタップ候補＋件数つきサジェストで出し、
   表記ゆれは閉じ込めずに収束させる。 */
/* ── 足あとカードの拡大 ────────────────────────────────
   小さすぎて読めない・書きにくいという指摘を受け、全体を約2倍に。
   z-index は右下の浮遊ボタン(#hmix-fav-hub / z=2147483500)より上に置く。 */
.player-fp-popup {
  width: 560px;
  max-width: calc(100vw - 2rem);
  z-index: 2147483600;
  padding: 1.35rem 1.5rem 1.2rem;
  border-radius: 12px;
  bottom: calc(72px + 1rem);
}
.player-fp-popup__header { margin-bottom: 0.8rem; }
.player-fp-popup__track  { font-size: 1.02rem; letter-spacing: 0.03em; }
.player-fp-popup__close  { font-size: 1.45rem; padding: 0 0.35rem; }
.player-fp-popup__fields { gap: 0.7rem; }
.player-fp-popup__nick,
.player-fp-popup__body,
.player-fp-popup__tag {
  font-size: 0.98rem;
  line-height: 1.8;
  padding: 0.7rem 0.85rem;
  border-radius: 7px;
}
.player-fp-popup__body { min-height: 5.6em; }
.player-fp-popup__count  { flex: none; font-size: 0.82rem; color: rgba(154, 218, 180, 0.55); }
.player-fp-popup__note   { font-size: 0.85rem; }


.player-fp-tagfield { position: relative; margin-top: 0.15rem; }

/* 誘い文 */
/* ── 足あとの2つの投稿（コメント／ユーザータグ） ──────────
   どちらを残そうとしているかが分かるよう、対等な2セクションに分け、
   それぞれに同じ重みの投稿ボタンを置く。 */
.fp-sec { padding: 0.9rem 0 0.2rem; }
.fp-sec + .fp-sec { border-top: 1px solid rgba(100, 180, 130, 0.18); margin-top: 0.5rem; }
.fp-sec__title {
  margin: 0 0 0.3rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(226, 245, 232, 0.95);
}
.fp-sec__lead {
  margin: 0 0 0.6rem;
  font-size: 0.86rem; line-height: 1.8;
  color: rgba(200, 226, 210, 0.72);
}
.fp-sec__lead span {
  display: block; font-size: 0.8rem; color: rgba(154, 218, 180, 0.58);
}
.fp-sec .player-fp-popup__nick,
.fp-sec .player-fp-popup__body { margin-bottom: 0.5rem; }
.fp-sec__foot {
  display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem;
}
.fp-sec__msg { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.6; color: rgba(232, 238, 230, .5); }
.fp-sec__msg.is-ok  { color: rgba(120, 210, 150, 0.95); }
.fp-sec__msg.is-err { color: rgba(226, 130, 110, 0.95); }
.fp-sec__submit {
  flex: none;
  background: rgba(154, 223, 180, 0.14);
  border: 1px solid rgba(154, 223, 180, 0.45);
  border-radius: 6px;
  color: #e9f6ec;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.92rem; letter-spacing: 0.08em;
  padding: 0.55rem 1.25rem; min-width: 11em; text-align: center; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.fp-sec__submit:hover:not([disabled]) {
  background: rgba(154, 223, 180, 0.26); border-color: rgba(154, 223, 180, 0.85);
}
.fp-sec__submit[disabled] { opacity: 0.45; cursor: default; }

/* ワンタップ候補（実タグ優先／無ければ例） */
.player-fp-tagpick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.4rem; }
.player-fp-tagpick button {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(154, 218, 180, 0.3);
  border-radius: 999px;
  color: rgba(200, 226, 210, 0.85);
  font-family: inherit; font-size: 0.82rem; letter-spacing: 0.02em;
  padding: 5px 13px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.player-fp-tagpick button:hover {
  background: rgba(154, 223, 180, 0.16);
  border-color: rgba(154, 223, 180, 0.7);
  color: #eafaf0;
}
.player-fp-tagpick button i {
  font-style: normal; opacity: 0.55; margin-left: 4px; font-size: 0.62rem;
}
.player-fp-tagpick { align-items: center; gap: 6px; margin-bottom: 0.5rem; }
.player-fp-tagpick .lb {
  width: 100%; font-size: 0.74rem; letter-spacing: 0.1em;
  color: rgba(154, 218, 180, 0.5); margin: 0 0 2px;
}

/* 選んだタグ */
.player-fp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.35rem; }
.player-fp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 7px 5px 13px; border-radius: 999px;
  background: rgba(154, 223, 180, .16); border: 1px solid rgba(154, 223, 180, .45);
  font-size: 0.86rem; letter-spacing: .02em; color: #e2f5e8; max-width: 100%;
}
.player-fp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-fp-chip button {
  background: none; border: none; cursor: pointer; padding: 0 3px;
  color: rgba(216, 236, 221, .6); font-size: 15px; line-height: 1;
}
.player-fp-chip button:hover { color: #f0c987; }

/* 入力中の候補 */
.player-fp-sugg {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 5px;
  max-height: 230px; overflow-y: auto;
  background: rgba(10, 18, 13, .99);
  border: 1px solid rgba(120, 210, 150, .28); border-radius: 6px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
}
.player-fp-sugg[hidden] { display: none; }
.player-fp-sugg button {
  display: flex; width: 100%; align-items: baseline; gap: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 10px 13px; color: rgba(232, 238, 230, .86); font: inherit; font-size: 0.9rem;
}
.player-fp-sugg button:hover { background: rgba(154, 223, 180, .14); color: #fff; }
.player-fp-sugg .n {
  margin-left: auto; flex: none; font-size: 0.78rem; color: rgba(154, 223, 180, .6);
}
.player-fp-sugg .new {
  margin-left: auto; flex: none; font-size: 0.78rem; color: rgba(209, 184, 122, .9);
  white-space: nowrap;
}

/* ── 「先に音楽を再生してください」の吹き出し ────────────── */
#hmix-needtrack-tip {
  position: fixed;
  z-index: 2147483640;
  padding: 7px 12px;
  background: rgba(10, 20, 15, 0.97);
  border: 1px solid rgba(154, 218, 180, 0.4);
  border-radius: 6px;
  color: rgba(226, 245, 232, 0.95);
  font-family: 'Noto Serif JP', serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.8);
}
#hmix-needtrack-tip.on { opacity: 1; transform: translateY(0); }
#hmix-needtrack-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 8px; height: 8px; margin-left: -4px;
  background: rgba(10, 20, 15, 0.97);
  border-right: 1px solid rgba(154, 218, 180, 0.4);
  border-bottom: 1px solid rgba(154, 218, 180, 0.4);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) { #hmix-needtrack-tip { transition: none; } }

/* Compact mobile altar: the same controls are moved into a summary and drawer. */
@media (max-width: 768px) {
  body.hmix-mobile-player { padding-bottom: calc(var(--hmix-player-height, 100px) + 16px); }
  #global-player.player--mobile { height: auto; bottom: var(--hmix-keyboard-inset, 0px); }
  #global-player.player--mobile .player-inner {
    display: block; height: auto; min-height: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  #global-player.player--mobile .player-mobile-summary {
    display: flex; align-items: center; gap: 8px; min-height: 76px;
  }
  #global-player.player--mobile .player-mobile-summary .player-left { flex: 1 1 0; min-width: 0; max-width: none; order: 0; }
  #global-player.player--mobile .track-title { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; font-size: .82rem; line-height: 1.5; }
  #global-player.player--mobile .player-mobile-summary .btn-play,
  #global-player.player--mobile .player-mobile-summary .btn-fav { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; }
  #global-player.player--mobile .player-mobile-expand { flex: 0 0 52px; min-width: 52px; min-height: 48px; margin: 0; font-size: .68rem; }
  #global-player.player--mobile.player--expanded .player-mobile-expand svg { transform: rotate(180deg); }
  #global-player.player--mobile .player-mobile-drawer[hidden] { display: none !important; }
  #global-player.player--mobile .player-mobile-drawer {
    max-height: min(300px, calc(var(--hmix-visual-height, 100dvh) * .45)); overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid rgba(217,181,102,.22); padding: 10px 0 4px;
  }
  #global-player.player--mobile .player-mobile-drawer .player-center { display: flex; width: 100%; flex: none; gap: 10px; }
  #global-player.player--mobile .player-mobile-drawer .player-controls { display: flex; gap: 4px; }
  #global-player.player--mobile .player-mobile-drawer .btn-prev,
  #global-player.player--mobile .player-mobile-drawer .btn-next { width: 40px; height: 44px; }
  #global-player.player--mobile .player-mobile-drawer .player-right { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; }
  #global-player.player--mobile .player-mobile-drawer .player-doors { width: 100%; justify-content: center; gap: 8px; }
  #global-player.player--mobile .player-mobile-drawer .pdoor { min-height: 48px; min-width: 70px; font-size: .68rem; }
  #global-player.player--mobile .player-mobile-drawer .player-action-btn,
  #global-player.player--mobile .player-mobile-drawer .btn-repeat,
  #global-player.player--mobile .player-mobile-drawer .btn-shuffle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
  #global-player.player--mobile .player-mobile-drawer .volume-wrap { display: flex; min-height: 44px; }
}

@media (max-width: 768px) {
  #global-player.player--mobile { overflow: clip; }
  #global-player.player--mobile .player-inner { position: relative; top: auto; bottom: auto; transform: none; }
}

/* Quiet, keyboard-accessible entry to the library when no track is selected. */
#player-track-title a { color: inherit; font: inherit; text-decoration: none; border-bottom: 1px solid rgba(225,215,176,.35); padding-bottom: 2px; }
#player-track-title a:hover { color: #f0dfae; border-bottom-color: currentColor; }
#player-track-title a:focus-visible { outline: 2px solid #e1ce91; outline-offset: 3px; border-radius: 2px; }

/* /assets/css/fav-modal.css?v=20260629c */
/**
 * H/MIX GALLERY — fav-modal.css
 * お気に入りリストモーダル（共通スタイル）
 * TOP / Music Library 両ページで読み込む
 */

/* スクロールロック */
body.fav-modal-open {
  overflow: hidden;
}

/* モーダルルート — 非表示状態は hidden 属性 */
/* bottom: 88px でプレイヤー（height:88px / z-index:1200）を常に露出させる */
/* CSS変数をここで上書き → どのページから開いても Library dark と完全同一 */
.fav-modal {
  position: fixed;
  inset: 0 0 88px 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ── Library dark テーマ変数をモーダルスコープに固定 ── */
  --color-text:         #e8f5ec;
  --color-text-muted:   #b0c8b8;
  --color-text-dim:     #6e8f76;
  --color-green:        #7ecb95;
  --color-green-light:  #9adfb4;
  --color-green-pale:   rgba(100, 200, 140, 0.12);
  --color-border:       rgba(100, 180, 130, 0.18);
}
.fav-modal[hidden] {
  display: none;
}

/* バックドロップ */
.fav-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 7, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* パネル */
.fav-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 2rem));
  height: min(580px, calc(100vh - 88px - 3rem));
  display: flex;
  flex-direction: column;
  background: rgba(14, 26, 18, 0.97);
  border: 1px solid rgba(100, 180, 130, 0.25);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(60, 140, 90, 0.08),
    0 12px 60px rgba(0, 0, 0, 0.72),
    0 0 40px rgba(40, 110, 70, 0.14);
  animation: favModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes favModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ヘッダー */
.fav-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(100, 180, 130, 0.12);
  flex-shrink: 0;
}

.fav-modal__title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: var(--color-green-light, #9adfb4);
  font-weight: 400;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.fav-modal__total {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.70rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dim, #6e8f76);
  font-weight: 400;
}

.fav-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(140, 180, 155, 0.50);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.fav-modal__close:hover {
  color: rgba(180, 220, 195, 0.90);
  border-color: rgba(100, 180, 130, 0.28);
  background: rgba(60, 140, 90, 0.12);
}
.fav-modal__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ボディ — スクロール可能 */
.fav-modal__body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 160, 110, 0.30) transparent;
}
.fav-modal__body::-webkit-scrollbar { width: 4px; }
.fav-modal__body::-webkit-scrollbar-track { background: transparent; }
.fav-modal__body::-webkit-scrollbar-thumb {
  background: rgba(80, 160, 110, 0.30);
  border-radius: 2px;
}

/* リスト */
.fav-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* アイテム */
.fav-modal__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.60rem 1.5rem;
  border-bottom: 1px solid rgba(80, 140, 100, 0.08);
  transition: background 0.15s ease;
}
.fav-modal__item:last-child { border-bottom: none; }
.fav-modal__item:hover { background: rgba(60, 120, 85, 0.10); }

/* 削除アニメーション */
.fav-modal__item--removing {
  overflow: hidden;
  animation: favItemOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes favItemOut {
  from { opacity: 1; max-height: 60px; padding-top: 0.60rem; padding-bottom: 0.60rem; }
  to   { opacity: 0; max-height: 0;    padding-top: 0;       padding-bottom: 0;       }
}

/* 再生ボタン */
.fav-modal__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(60, 130, 85, 0.18);
  border: 1px solid rgba(80, 160, 110, 0.28);
  color: rgba(120, 210, 155, 0.85);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.fav-modal__play:hover {
  background: rgba(70, 150, 100, 0.30);
  border-color: rgba(100, 190, 140, 0.50);
  color: rgba(160, 230, 185, 1);
  box-shadow: 0 0 10px rgba(80, 180, 120, 0.22);
}
.fav-modal__play svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  margin-left: 1px;
}

/* トラック情報 */
.fav-modal__info {
  flex: 1 1 0;
  min-width: 0;
}
.fav-modal__track-title {
  font-size: 0.82rem;
  color: var(--color-text, #e8f5ec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.fav-modal__track-tags {
  font-size: 0.65rem;
  color: var(--color-text-dim, #6e8f76);
  margin-top: 0.18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.03em;
}

/* 削除ボタン */
.fav-modal__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(200, 138, 50, 0.35);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.fav-modal__remove:hover {
  color: rgba(255, 168, 60, 0.88);
  border-color: rgba(255, 145, 45, 0.28);
  background: rgba(180, 100, 18, 0.14);
  box-shadow: 0 0 6px rgba(255, 160, 55, 0.20);
}
.fav-modal__remove svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* 空状態 */
.fav-modal__empty {
  text-align: center;
  color: var(--color-text-dim, #6e8f76);
  font-size: 0.80rem;
  padding: 3rem 2rem;
  margin: 0;
  letter-spacing: 0.06em;
}
.fav-modal__empty[hidden] { display: none; }

/* フッター */
.fav-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(100, 180, 130, 0.10);
  flex-shrink: 0;
}
.fav-modal__footer[hidden] { display: none; }

.fav-modal__footer-play {
  display: flex;
  gap: 0.5rem;
}

/* 再生・シャッフル・シアター再生ボタン */
.fav-modal__play-all,
.fav-modal__shuffle-all,
.fav-modal__play-theater {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(120, 210, 155, 0.80);
  background: rgba(40, 100, 65, 0.15);
  border: 1px solid rgba(80, 160, 110, 0.28);
  border-radius: 3px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.fav-modal__play-all:hover,
.fav-modal__shuffle-all:hover,
.fav-modal__play-theater:hover {
  color: rgba(160, 235, 190, 0.95);
  border-color: rgba(100, 190, 140, 0.50);
  background: rgba(50, 120, 80, 0.25);
  box-shadow: 0 0 8px rgba(80, 180, 120, 0.15);
}
.fav-modal__play-all:disabled,
.fav-modal__shuffle-all:disabled,
.fav-modal__play-theater:disabled {
  color: rgba(80, 120, 95, 0.35);
  border-color: rgba(60, 100, 75, 0.18);
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* まとめてDLボタン */
.fav-modal__dl-all {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(210, 148, 62, 0.78);
  background: rgba(140, 90, 18, 0.12);
  border: 1px solid rgba(200, 130, 45, 0.28);
  border-radius: 3px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.fav-modal__dl-all:hover {
  color: rgba(255, 184, 88, 0.96);
  border-color: rgba(255, 148, 45, 0.48);
  background: rgba(160, 100, 18, 0.20);
  box-shadow:
    0 0 8px  rgba(255, 170, 60, 0.28),
    0 0 18px rgba(255, 120, 35, 0.12);
}
.fav-modal__dl-all:disabled {
  color: rgba(160, 120, 55, 0.28);
  border-color: rgba(160, 110, 40, 0.14);
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.fav-modal__clear {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(190, 130, 50, 0.55);
  background: transparent;
  border: 1px solid rgba(200, 130, 45, 0.20);
  border-radius: 3px;
  padding: 0.4rem 1.25rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.fav-modal__clear:hover {
  color: rgba(255, 168, 60, 0.88);
  border-color: rgba(255, 145, 45, 0.40);
  background: rgba(180, 100, 18, 0.12);
}

/* ── アイテム内レイアウト（チェックボックス対応） ── */
.fav-modal__item {
  gap: 0; /* innerDivに任せる */
  padding: 0;
}
.fav-modal__item-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.60rem 1.5rem 0.60rem 0.5rem;
  flex: 1 1 0;
  min-width: 0;
}

/* チェックボックス（申請選択） */
.fav-modal__select {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0 0 0 1.5rem;
  cursor: pointer;
  accent-color: var(--color-green, #7ecb95);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.fav-modal__select:hover,
.fav-modal__select:focus-visible {
  opacity: 1;
  outline: 1px solid rgba(100, 200, 140, 0.5);
  outline-offset: 2px;
}
.fav-modal__select:checked {
  opacity: 1;
}

/* チェック済みアイテムの背景 */
.fav-modal__item:has(.fav-modal__select:checked) {
  background: rgba(60, 120, 85, 0.08);
}
.fav-modal__item:has(.fav-modal__select:checked) .fav-modal__track-title {
  color: var(--color-green-light, #9adfb4);
}

/* ── フッター：ライセンス申請行 ── */
.fav-modal__footer {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.fav-modal__footer-license {
  width: 100%;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(100, 180, 130, 0.10);
}

.fav-modal__apply-license {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  color: rgba(200, 158, 72, 0.90);
  background: rgba(130, 88, 18, 0.14);
  border: 1px solid rgba(200, 148, 50, 0.32);
  border-radius: 3px;
  padding: 0.50rem 1rem;
  cursor: pointer;
  transition: all 0.18s ease;
}
.fav-modal__apply-license:hover:not(:disabled) {
  color: rgba(255, 200, 100, 1);
  border-color: rgba(255, 175, 70, 0.55);
  background: rgba(160, 105, 20, 0.24);
  box-shadow: 0 0 10px rgba(255, 180, 70, 0.18);
}
.fav-modal__apply-license:disabled {
  color: rgba(150, 118, 58, 0.32);
  border-color: rgba(160, 120, 45, 0.16);
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.fav-modal__apply-license svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fav-modal__apply-count {
  font-size: 0.68rem;
  opacity: 0.75;
  letter-spacing: 0.04em;
}

/* 心臓→ライセンスの血管: 選択があると脈動＋矢印（消えていた導線の正式版） */
.fav-modal__apply-license.is-ready {
  color: rgba(255, 205, 110, 1);
  border-color: rgba(255, 180, 80, 0.55);
  background: rgba(160, 105, 20, 0.22);
  animation: favLicensePulse 2.4s ease-in-out infinite;
}
.fav-modal__apply-license.is-ready::after {
  content: "\2192"; /* → */
  margin-left: 0.15em;
  font-weight: 600;
  transition: transform 0.18s ease;
}
.fav-modal__apply-license.is-ready:hover::after { transform: translateX(3px); }
@keyframes favLicensePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 70, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 180, 70, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .fav-modal__apply-license.is-ready { animation: none; }
}

/* パック誘導バナー（4曲以上で表示） */
.fav-modal__packhint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1.5rem;
  padding: 0.55rem 0.75rem;
  background: rgba(150, 110, 30, 0.12);
  border: 1px solid rgba(212, 164, 76, 0.28);
  border-radius: 4px;
  flex-shrink: 0;
}
.fav-modal__packhint[hidden] { display: none; }
.fav-modal__packhint-text {
  flex: 1 1 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: rgba(220, 180, 110, 0.92);
}
.fav-modal__packhint-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: rgba(220, 180, 110, 0.55);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.fav-modal__packhint-close:hover {
  color: rgba(255, 205, 120, 0.95);
  background: rgba(150, 110, 30, 0.20);
}

/* レスポンシブ */
@media (max-width: 600px) {
  .fav-modal__panel {
    height: calc(100vh - 88px - 0.5rem);
    border-radius: 6px 6px 0 0;
    align-self: flex-end;
  }
}

/* ============================================================
   「ひとつの心臓」常駐ハート・ハブ ＋ 飛ぶハート ＋ 初回オンボーディング
   お気に入りをサイトの主役に。世界観(深緑×金)で常駐・脈打つ。
   ============================================================ */
/* ポケットの心臓: HERO中央紋章と同意匠の円形メダリオン */
#hmix-fav-hub{
  position: fixed; right: clamp(12px,2vw,26px); bottom: clamp(76px,12vh,104px);
  z-index: 2147483500; display: grid; place-items: center; padding: 0;
  width: clamp(50px,6vw,58px); height: clamp(50px,6vw,58px);
  border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: rgba(10,18,13,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(202,164,78,.40); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  color: #e7ca7c; font-family: 'Noto Sans JP', system-ui, sans-serif;
  transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
#hmix-fav-hub:hover, #hmix-fav-hub:focus-visible{
  transform: translateY(-2px) scale(1.06); outline: none;
  border-color: rgba(230,200,122,.78); background: rgba(16,26,19,.7);
  box-shadow: 0 14px 38px -10px rgba(0,0,0,.7), 0 0 20px rgba(202,164,78,.35);
}
#hmix-fav-hub .hfh-crest{ grid-area: 1/1; display: block; width: 86%; height: 86%; }
#hmix-fav-hub .hfh-crest svg{ width: 100%; height: 100%; display: block; transition: filter .35s ease; }
#hmix-fav-hub.has-fav .hfh-crest svg{ filter: drop-shadow(0 0 5px rgba(255,200,110,.6)); }
/* 0件は輪郭ハート＝「これから集める」余白（中央と同じ作法） */
#hmix-fav-hub:not(.has-fav) .hfh-heart-shape{ fill: rgba(231,202,124,.12); }
#hmix-fav-hub .hfh-count{
  grid-area: 1/1; z-index: 2; transform: translateY(1px);
  font-weight: 600; font-size: clamp(13px,1.5vw,15px); text-align: center;
  color: #3a2c10; text-shadow: 0 1px 0 rgba(255,245,200,.5);
}
#hmix-fav-hub:not(.has-fav) .hfh-count{ color: rgba(245,236,220,.9); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
#hmix-fav-hub.has-fav{ animation: hfhBreathe 3.6s ease-in-out infinite; }
@keyframes hfhBreathe{
  0%,100%{ box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), 0 0 0 0 rgba(255,200,110,0); }
  50%    { box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), 0 0 0 7px rgba(255,200,110,.10); }
}
@keyframes hfhPulse{ 0%{transform:scale(1);} 28%{transform:scale(1.28);} 55%{transform:scale(.93);} 100%{transform:scale(1);} }
#hmix-fav-hub.hfh-pulse{ animation: hfhPulse .65s cubic-bezier(.22,1,.36,1); }

/* 飛ぶハート */
.hfh-fly{ position: fixed; z-index: 2147483600; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
  transition: transform .85s cubic-bezier(.5,0,.35,1), opacity .85s ease; }
.hfh-fly svg{ width: 100%; height: 100%; fill: #ff6f8c; filter: drop-shadow(0 0 6px rgba(255,150,170,.85)); }

/* 初回オンボーディング吹き出し */
.hfh-tip{ position: fixed; right: clamp(12px,2vw,26px); bottom: calc(clamp(76px,12vh,104px) + 58px);
  z-index: 2147483550; max-width: 244px; padding: 11px 15px; border-radius: 13px;
  background: rgba(12,20,15,.93); color: #eef0ea; border: 1px solid rgba(202,164,78,.42);
  font-family: 'Noto Sans JP', sans-serif; font-size: 12.5px; line-height: 1.65;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.72); opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.hfh-tip.on{ opacity: 1; transform: translateY(0); }

@media print{ #hmix-fav-hub, .hfh-tip, .hfh-fly{ display: none !important; } }
@media (prefers-reduced-motion: reduce){
  #hmix-fav-hub.has-fav, #hmix-fav-hub.hfh-pulse{ animation: none; }
  .hfh-fly{ transition: opacity .3s ease; }
}

/* /assets/css/theater.css */
/* ============================================================
   THEATER MODE (FEATURED MUSIC IMPERSIVE EXPERIENCE)
   ============================================================ */

/* INP改善: theater open時のbody固定をクラスで一括適用 */
body.theater-body-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: var(--theater-scroll-y, 0px);
}

.theater-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  /* visibility:hidden で非表示中は一切描画しない（bg-journey フラッシュ防止）*/
  visibility: hidden;
  transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}

.theater-modal.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease, visibility 0s linear 0s;
}

.theater-bg {
  position: absolute;
  inset: 0;
  /* 微かな星の光 — 完全な闇ではなく宇宙的な空間 */
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(154, 223, 180, 0.15), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(154, 223, 180, 0.10), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(200, 230, 210, 0.12), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(154, 223, 180, 0.08), transparent),
    radial-gradient(1.5px 1.5px at 65% 45%, rgba(200, 230, 210, 0.10), transparent),
    radial-gradient(1px 1px at 35% 90%, rgba(154, 223, 180, 0.12), transparent),
    radial-gradient(0.8px 0.8px at 92% 15%, rgba(180, 240, 200, 0.10), transparent),
    radial-gradient(1px 1px at 45% 65%, rgba(154, 223, 180, 0.08), transparent),
    #030403;
  z-index: 1;
  transition: background 1.5s ease;
}

.theater-window {
  position: relative;
  z-index: 2;
  width: min(94vw, 1300px);
  aspect-ratio: 16 / 9;
  transform: scale(0.95);
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.theater-modal.is-open .theater-window {
  transform: scale(1);
}

/* Removed hard glass border for seamless portal effect */

.theater-scenery {
  position: absolute;
  inset: -15%; /* 枠をさらに広げ、フェードの距離を十分に確保 */
  background-color: #030403;
  background-image: none;
  background-size: cover;
  background-position: center;
  filter: brightness(0.8) contrast(1.1);
  transition: filter 2s ease;
  /* 複数のポイントで透明度をコントロールし、圧倒的に滑らかなグラデーションを作る */
  mask-image: radial-gradient(ellipse at center, 
    rgba(0,0,0,1) 15%, 
    rgba(0,0,0,0.8) 35%, 
    rgba(0,0,0,0.3) 55%, 
    rgba(0,0,0,0) 72%
  );
  -webkit-mask-image: radial-gradient(ellipse at center, 
    rgba(0,0,0,1) 15%, 
    rgba(0,0,0,0.8) 35%, 
    rgba(0,0,0,0.3) 55%, 
    rgba(0,0,0,0) 72%
  );
}

/* scenery 周縁のリムライト — 窓枠が光る */
.theater-scenery::after {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(100, 180, 130, 0.03) 52%,
    rgba(80, 160, 110, 0.06) 56%,
    rgba(60, 140, 90, 0.03) 62%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 1;
}

/* Particles layer (fireflies) */
.theater-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* UI Layer */
.theater-ui {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 3rem;
  opacity: 0;
  pointer-events: none; /* Let clicks pass through the invisible parts */
  transition: opacity 1.2s ease 0.5s;
}

.theater-modal.is-open .theater-ui {
  opacity: 1;
}

.theater-top, .theater-bottom {
  pointer-events: auto; /* Buttons remain clickable */
}

.theater-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.theater-controls-top {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ── 帰還 + 全画面のペア ─────────────────────────────── */
.theater-controls-top-pair {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.theater-controls-top-pair__sep {
  display: block;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.theater-return-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.4rem 1.4rem;
  font-family: var(--font-serif-jp, serif);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 0;
}

.theater-return-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  letter-spacing: 0.32em;
}

.theater-fullscreen-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.4rem 1.1rem;
  font-family: var(--font-serif-jp, serif);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 0;
  white-space: nowrap;
}

.theater-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  letter-spacing: 0.28em;
}

.theater-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 6px 14px 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}
.theater-close__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.theater-close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.90);
}

/* 全画面ボタン：物語性 */
.theater-fullscreen-btn--story {
  position: relative;
}
.theater-fullscreen-btn--story::after {
  content: '— すりガラスの向こうへ';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Serif JP', serif;
  font-size: 0.62rem;
  color: rgba(200, 220, 210, 0.40);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.theater-fullscreen-btn--story:hover::after {
  opacity: 1;
}

.theater-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}

.theater-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theater-title {
  font-family: var(--font-serif-jp, serif);
  font-size: 2rem;
  font-weight: 300;
  color: rgba(255, 250, 240, 0.95);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  margin: 0;
}

.theater-composer {
  font-family: var(--font-display, sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.theater-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all 0.4s ease;
  backdrop-filter: blur(8px);
}
.theater-play-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.1);
}

.theater-controls {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.theater-sub-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-decoration: none;
}
.theater-sub-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.theater-btn-fav.is-fav {
  color: #e25555;
}
.theater-btn-fav.is-fav .icon-fav-off { display: none; }
.theater-btn-fav.is-fav .icon-fav-on { display: block !important; }

/* Navigation Arrows */
@keyframes nav-float-prev {
  0%, 100% { transform: translateY(-50%) translateX(0); box-shadow: 0 0 0 rgba(255,255,255,0); opacity: 0.6; }
  50%      { transform: translateY(-50%) translateX(-10px); box-shadow: 0 0 20px rgba(255,255,255,0.15); opacity: 1; }
}
@keyframes nav-float-next {
  0%, 100% { transform: translateY(-50%) translateX(0); box-shadow: 0 0 0 rgba(255,255,255,0); opacity: 0.6; }
  50%      { transform: translateY(-50%) translateX(10px); box-shadow: 0 0 20px rgba(255,255,255,0.15); opacity: 1; }
}

.theater-nav {
  position: absolute;
  top: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  z-index: 20;
}
.theater-nav-prev {
  left: 3vw;
  animation: nav-float-prev 3s ease-in-out infinite;
}
.theater-nav-next {
  right: 3vw;
  animation: nav-float-next 3s ease-in-out infinite;
}
.theater-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  animation-play-state: paused;
  transform: translateY(-50%) scale(1.15) !important;
  box-shadow: 0 0 30px rgba(255,255,255,0.3) !important;
  opacity: 1 !important;
}

/* Feature Music entry point (Theater Gate) */
.featured-music {
  padding: 8rem 0 4rem;
  position: relative;
  overflow: hidden;
  background: #030403;
}

/* 奥からの光漏れ — 深緑の呼吸する光 */
.featured-music::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 80%;
  height: 70%;
  background: radial-gradient(
    ellipse 50% 40% at 50% 50%,
    rgba(100, 180, 130, 0.06) 0%,
    rgba(80, 160, 110, 0.03) 40%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: gateGlowDrift 12s ease-in-out infinite;
}

/* 上下ビネット + 中央の微かな光 */
.featured-music::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 60% at 50% 60%, rgba(60, 140, 90, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 80% 20% at 50% 0%, rgba(4, 12, 8, 0.90) 0%, transparent 60%),
    radial-gradient(ellipse 80% 20% at 50% 100%, rgba(4, 12, 8, 0.90) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

@keyframes gateGlowDrift {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1.08); }
}

/* Updated Gate Design */
.fm-card {
  position: relative;
  width: min(100%, 1000px);
  margin: 4rem auto 0;
  aspect-ratio: 21 / 9;
  min-height: 380px;
  cursor: pointer;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 40px 100px rgba(0,0,0,0.9);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

/* リムライト — 門の縁が微かに光る */
.fm-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    rgba(100, 180, 130, 0.12) 0%,
    transparent 15%,
    transparent 85%,
    rgba(100, 180, 130, 0.08) 100%
  );
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 1s ease;
}

.fm-card:hover::before {
  opacity: 1;
}

.fm-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(100, 180, 130, 0.15);
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 1),
    0 0 40px rgba(100, 180, 130, 0.08),
    0 0 100px rgba(60, 140, 90, 0.04);
}

.fm-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  filter: grayscale(0.5) brightness(0.6);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fm-card:hover .fm-card-bg {
  opacity: 0.6;
  filter: grayscale(0.2) brightness(0.8);
  transform: scale(1.05);
}

.fm-card-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

.fm-card-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  pointer-events: none; /* Make clicks pass to .fm-card */
}

.fm-tag {
  font-family: var(--font-display, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: rgba(154, 223, 180, 0.50);
  text-transform: uppercase;
  margin: 0;
}

.fm-title {
  font-family: var(--font-serif-jp, serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 200;
  color: #fff;
  letter-spacing: 0.2em;
  margin: 0;
  text-shadow: 0 0 30px rgba(0,0,0,0.5);
  transition: all 0.8s ease;
}

.fm-card:hover .fm-title {
  letter-spacing: 0.25em;
  text-shadow: 0 0 40px rgba(100, 180, 130, 0.25);
}

.fm-composer {
  font-family: var(--font-display, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

.fm-play-indicator {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.5s ease;
}

.fm-play-indicator svg {
  opacity: 0.5;
  transition: all 0.5s ease;
}

.fm-card:hover .fm-play-indicator {
  color: #fff;
}
.fm-card:hover .fm-play-indicator svg {
  opacity: 1;
  transform: translateX(4px);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}


/* Fullscreen Special States */
.theater-modal.is-fullscreen .theater-window {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  transform: scale(1) !important;
}

.theater-modal.is-fullscreen .theater-scenery {
  inset: 0;
  mask-image: none;
  -webkit-mask-image: none;
  filter: brightness(0.9) contrast(1.1);
}

.theater-modal.is-fullscreen .theater-ui {
  padding: clamp(2rem, 8vh, 6rem) clamp(2rem, 8vw, 8rem);
}

.theater-modal.is-fullscreen .theater-title {
  font-size: clamp(2rem, 6vh, 4rem);
}

.theater-modal.is-fullscreen .theater-nav-prev { left: 5vw; }
.theater-modal.is-fullscreen .theater-nav-next { right: 5vw; }

/* 全画面中：縮小ボタンをグレーアウト（帰還が主アクション） */
.theater-modal.is-fullscreen .theater-fullscreen-btn {
  color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  cursor: default;
}
.theater-modal.is-fullscreen .theater-controls-top-pair__sep {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Scene button (top-left) ───────────────────────────── */
.theater-controls-top-left {
  display: flex;
  align-items: center;
}

.theater-scene-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
  padding: 0.4rem 1.2rem;
  font-family: var(--font-serif-jp, serif);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 1px;
  backdrop-filter: blur(4px);
}
.theater-scene-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ── Info area (left column of theater-bottom) ─────────── */
.theater-info-area {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  max-width: 55%;
}

/* ── Seekbar ───────────────────────────────────────────── */
.theater-seekbar-area {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.theater-time {
  font-family: var(--font-display, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  min-width: 2.4em;
  text-align: center;
  flex-shrink: 0;
}

.theater-seekbar {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  transition: height 0.2s ease;
}
.theater-seekbar:hover {
  height: 5px;
}
.theater-seekbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  transition: transform 0.15s ease;
}
.theater-seekbar:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}
.theater-seekbar::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  border: none;
}
.theater-seekbar::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

/* ── License area ──────────────────────────────────────── */
.theater-license-area {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.theater-license-text {
  font-family: var(--font-display, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
}

.theater-license-link {
  font-family: var(--font-display, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(209, 184, 122, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 184, 122, 0.3);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.theater-license-link:hover {
  color: rgba(209, 184, 122, 1);
  border-bottom-color: rgba(209, 184, 122, 0.8);
}

/* ── Loop / Share buttons ──────────────────────────────── */
.theater-btn-loop {
  color: rgba(255, 255, 255, 0.35);
}
.theater-btn-loop.is-active {
  color: rgba(140, 210, 170, 0.9);
  background: rgba(140, 210, 170, 0.08);
}

.theater-btn-share {
  color: rgba(255, 255, 255, 0.4);
}

/* ── Ken Burns effect ──────────────────────────────────── */
@keyframes kenburns {
  0%   { background-position: 50% 50%; transform: scale(1.00); }
  25%  { background-position: 48% 52%; transform: scale(1.05); }
  50%  { background-position: 52% 48%; transform: scale(1.07); }
  75%  { background-position: 49% 51%; transform: scale(1.04); }
  100% { background-position: 50% 50%; transform: scale(1.00); }
}

.theater-modal.is-playing .theater-scenery {
  animation: kenburns 35s ease-in-out infinite;
}

/* 再生中: 底部に音楽の光が灯る */
.theater-modal.is-playing .theater-bottom::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 120px;
  background: radial-gradient(
    ellipse 60% 80% at 50% 100%,
    rgba(100, 180, 130, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: playGlow 4s ease-in-out infinite;
}

@keyframes playGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ── Scene Picker — Left Side Panel ─────────────────────── */
.theater-scene-picker {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 3, 0.92);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.theater-scene-picker[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}
.theater-scene-picker.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.theater-scene-picker__header {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.theater-scene-picker__title {
  font-family: var(--font-serif-jp, serif);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  flex: 1;
}

.theater-scene-picker__close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
  flex-shrink: 0;
}
.theater-scene-picker__close:hover { color: rgba(255, 255, 255, 0.8); }

.theater-scene-picker__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.theater-scene-picker__body::-webkit-scrollbar { width: 3px; }
.theater-scene-picker__body::-webkit-scrollbar-track { background: transparent; }
.theater-scene-picker__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* カテゴリグループ */
.theater-scene-group {
  padding: 0.5rem 0 0.3rem;
}
.theater-scene-group + .theater-scene-group {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.theater-scene-group__label {
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.25);
  padding: 0.3rem 1.2rem 0.4rem;
  text-transform: uppercase;
}

.theater-scene-group__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.2rem 1rem 0.4rem;
}

.theater-scene-tag {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  padding: 0.3rem 0.75rem;
  font-family: var(--font-serif-jp, serif);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 1px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.theater-scene-tag:hover {
  background: rgba(209, 184, 122, 0.1);
  border-color: rgba(209, 184, 122, 0.4);
  color: rgba(209, 184, 122, 0.95);
}

/* ── Controls top-left gap ───────────────────────────────── */
.theater-controls-top-left {
  gap: 0.7rem;
}

/* ── Volume bar ──────────────────────────────────────────── */
.theater-volume-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.4rem;
}

.theater-volume-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  transition: height 0.15s ease;
}
.theater-volume-bar:hover {
  height: 5px;
}
.theater-volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  transition: transform 0.15s ease;
}
.theater-volume-bar:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}
.theater-volume-bar::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  cursor: pointer;
}
.theater-volume-bar::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

/* ── Auto-hide controls (cinema mode) ───────────────────── */
.theater-top,
.theater-bottom {
  transition: opacity 0.5s ease;
}

.theater-modal.controls-hidden .theater-top,
.theater-modal.controls-hidden .theater-bottom {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.theater-modal.controls-hidden .theater-nav {
  opacity: 0 !important;
  pointer-events: none;
  animation: none !important;
  transition: opacity 0.8s ease !important;
}

.theater-modal.controls-hidden {
  cursor: none;
}

/* ── UI非表示時：曲名と作曲者名を残す ── */
.theater-breath-light {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 10001;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.theater-modal.controls-hidden .theater-breath-light {
  opacity: 1;
}
.theater-modal:not(.controls-hidden) .theater-breath-light,
.theater-modal.theater-opening .theater-breath-light {
  opacity: 0;
}
.theater-breath-light__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(230, 245, 235, 0.90);
  text-shadow:
    0 0 20px rgba(200, 230, 210, 0.40),
    0 0 40px rgba(154, 223, 180, 0.25),
    0 0 80px rgba(154, 223, 180, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.60);
  animation: theaterTitleGlow 4s ease-in-out infinite;
}
.theater-breath-light__composer {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: rgba(180, 210, 190, 0.45);
  margin-top: 6px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
}
@keyframes theaterTitleGlow {
  0%, 100% {
    text-shadow:
      0 0 15px rgba(200, 230, 210, 0.30),
      0 0 30px rgba(154, 223, 180, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.60);
  }
  50% {
    text-shadow:
      0 0 25px rgba(200, 230, 210, 0.55),
      0 0 50px rgba(154, 223, 180, 0.30),
      0 0 100px rgba(154, 223, 180, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.60);
  }
}

/* ── 開場シーケンス中：UIを完全に隠す ── */
.theater-modal.theater-opening .theater-top,
.theater-modal.theater-opening .theater-bottom,
.theater-modal.theater-opening .theater-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}
.theater-modal.theater-opening {
  cursor: default;
}

/* ══════════════════════════════════════════════════════════
   Mobile — Portrait (〜768px)
   PC版を縮小するのではなく、モバイル専用レイアウトとして再設計
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── ウィンドウをビューポート全体に ── */
  .theater-window {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    transform: none !important;
    border-radius: 0;
  }
  .theater-modal.is-open .theater-window {
    transform: none !important;
  }
  .theater-scenery {
    inset: 0;
    mask-image: none;
    -webkit-mask-image: none;
    filter: brightness(0.72) contrast(1.05);
  }

  /* ── UI レイヤー：パディングをゼロにして各セクションが管理 ── */
  .theater-ui {
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* ══ TOP BAR ══
     左: 情景ボタンのみ（小）
     右: 帰還 + × 閉じる                    */
  .theater-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    min-height: 52px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
    flex-shrink: 0;
  }

  /* 左側：情景ボタンのみ表示。お気に入り・足跡ボタンは非表示 */
  .theater-controls-top-left {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-shrink: 0;
  }
  .theater-fav-list-btn,
  .theater-footprints-btn {
    display: none;
  }
  .theater-scene-btn {
    font-size: 0.63rem;
    padding: 0.28rem 0.6rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  /* お気に入りボタンだけモバイルでも表示 */
  .theater-fav-list-btn {
    display: flex;
  }

  /* 右側：帰還ボタン + × */
  .theater-controls-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .theater-controls-top-pair {
    display: flex;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 1px;
    overflow: hidden;
  }
  /* モバイルは全画面ボタン・セパレータを非表示（iOS Fullscreen API非対応） */
  .theater-fullscreen-btn,
  .theater-controls-top-pair__sep {
    display: none;
  }
  .theater-fullscreen-btn--story::after {
    display: none;
  }
  .theater-return-btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
    letter-spacing: 0.12em;
    border: none;
  }
  /* 閉じるボタン：モバイルではラベルを隠してアイコンのみ */
  .theater-close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .theater-close__label {
    display: none;
  }

  /* ══ NAV 矢印：両端に寄せ、コンテンツと干渉しないサイズに ══ */
  .theater-nav {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    animation-play-state: paused; /* モバイルはフロートアニメ停止 */
  }
  .theater-nav svg {
    width: 22px;
    height: 22px;
  }
  .theater-nav-prev {
    left: 0;
    animation: none;
  }
  .theater-nav-next {
    right: 0;
    animation: none;
  }

  /* ══ BOTTOM：曲情報 → シークバー → ボタン群（縦積み） ══ */
  .theater-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 12px 20px max(16px, env(safe-area-inset-bottom, 16px));
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    flex-shrink: 0;
  }

  /* 曲情報エリア：全幅 */
  .theater-info-area {
    max-width: 100%;
    gap: 0.3rem;
  }
  .theater-info {
    gap: 0.2rem;
  }
  .theater-title {
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .theater-composer {
    font-size: 0.67rem;
    letter-spacing: 0.12em;
  }
  .theater-seekbar-area {
    gap: 0.4rem;
    margin-top: 0.1rem;
  }
  .theater-time {
    font-size: 0.6rem;
    min-width: 2em;
  }
  .theater-license-area { display: none; }
  .theater-volume-area  { display: none; }

  /* コントロールボタン行：アイコンのみ、中央寄せ */
  .theater-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex-wrap: nowrap;
  }
  .theater-sub-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  /* 「足跡を残す」テキスト非表示、アイコンのみ */
  .theater-btn-footprint span { display: none; }

  /* 再生ボタン：少し大きめ */
  .theater-play-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
  }

  /* ══ パネル類 ══ */

  /* お気に入りパネル：画面右全幅 */
  .theater-fav-panel {
    width: 100%;
    max-width: 100%;
  }

  /* 情景ピッカー：下からのシートに変更 */
  .theater-scene-picker {
    width: 100%;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    transform: translateY(100%);
  }
  .theater-scene-picker.is-open {
    transform: translateY(0);
  }

  /* シェアポップアップ：右上に出る */
  .theater-share-popup {
    right: 0;
    left: auto;
    bottom: calc(100% + 6px);
  }
}

/* ══════════════════════════════════════════════════════════
   Mobile — Landscape（横画面 / max-height 500px）
   ══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .theater-window {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    transform: none !important;
  }
  .theater-modal.is-open .theater-window {
    transform: none !important;
  }
  .theater-scenery {
    inset: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .theater-ui {
    padding: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .theater-top {
    padding: 6px 16px;
    min-height: 44px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
    flex-shrink: 0;
  }
  .theater-fav-list-btn,
  .theater-footprints-btn { display: none; }
  .theater-fav-list-btn { display: flex; }
  .theater-fullscreen-btn,
  .theater-controls-top-pair__sep { display: none; }
  .theater-return-btn {
    font-size: 0.65rem;
    padding: 0.25rem 0.7rem;
  }
  .theater-close { width: 36px; height: 36px; }

  .theater-nav { width: 36px; height: 36px; animation: none; }
  .theater-nav-prev { left: 0; }
  .theater-nav-next { right: 0; }

  /* 横画面は左右並列でコンパクトに */
  .theater-bottom {
    flex-direction: row;
    align-items: flex-end;
    padding: 8px 16px max(10px, env(safe-area-inset-bottom, 10px));
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    gap: 1rem;
    flex-shrink: 0;
  }
  .theater-info-area {
    max-width: 55%;
    gap: 0.2rem;
    flex: 1;
  }
  .theater-title { font-size: 0.95rem; }
  .theater-composer { font-size: 0.6rem; }
  .theater-time { font-size: 0.58rem; }
  .theater-play-btn { width: 44px; height: 44px; }
  .theater-sub-btn { width: 38px; height: 38px; }
  .theater-btn-footprint span { display: none; }
  .theater-controls { gap: 0.1rem; flex-wrap: nowrap; }
  .theater-license-area { display: none; }
  .theater-volume-area  { display: none; }

  .theater-scene-picker {
    width: 100%;
    top: auto;
    left: 0; right: 0; bottom: 0;
    height: 75%;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    transform: translateY(100%);
  }
  .theater-scene-picker.is-open { transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   Share Popup
   ══════════════════════════════════════════════════════════ */
.theater-share-wrap {
  position: relative;
}

.theater-share-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  right: -4px;
  background: rgba(6, 6, 5, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  backdrop-filter: blur(12px);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  z-index: 50;
  animation: share-popup-in 0.18s ease;
}
.theater-share-popup[hidden] { display: none; }

@keyframes share-popup-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.theater-share-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  border: none;
  color: rgba(255, 250, 240, 0.65);
  cursor: pointer;
  font-family: var(--font-display, sans-serif);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem;
  border-radius: 1px;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  text-align: left;
}
.theater-share-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 250, 240, 1);
}
.theater-share-item--copy {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 2px;
  color: rgba(209, 184, 122, 0.7);
}
.theater-share-item--copy:hover {
  color: rgba(209, 184, 122, 1);
  background: rgba(209, 184, 122, 0.06);
}

/* ══════════════════════════════════════════════════════════
   Favorites Panel
   ══════════════════════════════════════════════════════════ */
.theater-fav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 3, 0.9);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(209, 184, 122, 0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.theater-fav-panel[hidden] {
  display: flex !important;   /* hidden でも transform アニメを使う */
  visibility: hidden;
  pointer-events: none;
}
.theater-fav-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* ── ヘッダー ─────────────────────────────────────────── */
.theater-fav-panel__header {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: 0.6rem;
  flex-shrink: 0;
}

.theater-fav-panel__title {
  font-family: var(--font-serif-jp, serif);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  color: rgba(209, 184, 122, 0.8);
  margin: 0;
  flex: 1;
}

.theater-fav-panel__count {
  font-family: var(--font-display, sans-serif);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
}

.theater-fav-panel__close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
  flex-shrink: 0;
}
.theater-fav-panel__close:hover { color: rgba(255, 255, 255, 0.8); }

/* ── リスト ───────────────────────────────────────────── */
.theater-fav-panel__list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(209, 184, 122, 0.2) transparent;
}
.theater-fav-panel__list::-webkit-scrollbar { width: 4px; }
.theater-fav-panel__list::-webkit-scrollbar-track { background: transparent; }
.theater-fav-panel__list::-webkit-scrollbar-thumb { background: rgba(209, 184, 122, 0.2); border-radius: 2px; }

.theater-fav-panel__hint {
  font-family: var(--font-display, sans-serif);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.2);
  padding: 0.45rem 1.2rem 0.35rem;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.theater-fav-panel__empty {
  padding: 2rem 1.2rem;
  font-family: var(--font-serif-jp, serif);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  letter-spacing: 0.1em;
}

/* ── 各アイテム ───────────────────────────────────────── */
.theater-fav-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  cursor: default;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  user-select: none;
}
.theater-fav-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.theater-fav-item.is-playing {
  background: rgba(209, 184, 122, 0.05);
}
.theater-fav-item.is-dragging {
  opacity: 0.4;
}
.theater-fav-item.drag-over {
  border-top: 2px solid rgba(209, 184, 122, 0.5);
}

.theater-fav-item__drag {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  cursor: grab;
  padding: 0.7rem 0;
  line-height: 1;
}
.theater-fav-item__drag:active { cursor: grabbing; }

.theater-fav-item__index {
  flex-shrink: 0;
  width: 20px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0;
  text-align: right;
}

.theater-fav-item__name {
  flex: 1;
  font-family: var(--font-serif-jp, serif);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(255, 250, 240, 0.7);
  padding: 0.7rem 0.5rem 0.7rem 0.6rem;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theater-fav-item__name:hover { color: rgba(255, 250, 240, 1); }
.theater-fav-item.is-playing .theater-fav-item__name {
  color: rgba(209, 184, 122, 0.95);
}

.theater-fav-item__playing {
  flex-shrink: 0;
  font-size: 0.55rem;
  color: rgba(209, 184, 122, 0.8);
  padding-right: 0.3rem;
  animation: fp-playing-pulse 1.4s ease-in-out infinite;
}
@keyframes fp-playing-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.theater-fav-item__remove {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(209, 184, 122, 0.3);
  cursor: pointer;
  padding: 0.7rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}
.theater-fav-item__remove:hover {
  color: rgba(220, 80, 80, 0.8);
  transform: scale(1.2);
}

/* ── フッター ─────────────────────────────────────────── */
.theater-fav-panel__footer {
  padding: 0.9rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.theater-fav-panel__play-all {
  width: 100%;
  background: rgba(209, 184, 122, 0.08);
  border: 1px solid rgba(209, 184, 122, 0.3);
  border-radius: 1px;
  color: rgba(209, 184, 122, 0.8);
  font-family: var(--font-serif-jp, serif);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  padding: 0.55rem;
  cursor: pointer;
  transition: all 0.3s;
}
.theater-fav-panel__play-all:hover {
  background: rgba(209, 184, 122, 0.15);
  border-color: rgba(209, 184, 122, 0.6);
  color: rgba(209, 184, 122, 1);
}

/* チェックボックス */
.theater-fav-item__check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(209, 184, 122, 0.3);
  border-radius: 3px;
  background: rgba(209, 184, 122, 0.05);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.theater-fav-item__check:checked {
  background: rgba(209, 184, 122, 0.25);
  border-color: rgba(209, 184, 122, 0.7);
}
.theater-fav-item__check:checked::after {
  content: '✓';
  position: absolute;
  top: -1px;
  left: 2px;
  font-size: 12px;
  color: rgba(209, 184, 122, 0.95);
}

/* 商用ライセンスボタン */
.theater-fav-panel__license {
  width: 100%;
  margin-top: 0.5rem;
  background: rgba(100, 160, 120, 0.08);
  border: 1px solid rgba(100, 160, 120, 0.3);
  border-radius: 1px;
  color: rgba(140, 200, 160, 0.8);
  font-family: var(--font-serif-jp, serif);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}
.theater-fav-panel__license:hover:not(:disabled) {
  background: rgba(100, 160, 120, 0.18);
  border-color: rgba(100, 160, 120, 0.6);
  color: rgba(160, 220, 180, 1);
}
.theater-fav-panel__license:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── モバイル ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .theater-fav-panel {
    width: 100%;
    top: auto;
    height: 65%;
    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid rgba(209, 184, 122, 0.15);
  }
  .theater-fav-panel.is-open {
    transform: translateY(0);
  }
}

/* ═══ 蛍パーティクル — CSS animation版（INP改善: setInterval不使用）═══ */
.window-firefly {
  background: rgba(255, 255, 200, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 200, 0.5);
  animation:
    firefly-drift var(--ff-dur, 8s) ease-in-out var(--ff-delay, 0s) infinite alternate,
    firefly-glow  calc(var(--ff-dur, 8s) * 0.7) ease-in-out var(--ff-delay, 0s) infinite alternate;
  will-change: transform, opacity;
}

@keyframes firefly-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(calc(var(--ff-dx, 8%) * -0.5), calc(var(--ff-dy, 8%) * 0.8)); }
  66%  { transform: translate(var(--ff-dx, 8%), calc(var(--ff-dy, 8%) * -0.3)); }
  100% { transform: translate(calc(var(--ff-dx, 8%) * -0.3), var(--ff-dy, 8%)); }
}

@keyframes firefly-glow {
  0%   { opacity: 0.2; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .window-firefly {
    animation: firefly-glow 4s ease-in-out infinite alternate;
  }
}

/* /assets/css/info-page.css?v=20260614-fonts */
/**
 * H/MIX GALLERY — info-page.css
 * 情報ページ共通スタイル（Terms / Composer / Contact / History）
 * 演出より可読性・信頼感を優先する
 */

/* ─── ダークテーマ変数スコープ（library-page--dark 依存）─── */
body.library-page--dark {
  background-color: var(--color-bg, #0b1510);
  color: var(--color-text, #e8f5ec);
}

/* ─── ページヒーロー ─── */
.info-hero {
  padding: 5rem 1.5rem 3rem;
  text-align: center;
  border-bottom: 1px solid rgba(100, 180, 130, 0.12);
}

.info-hero__eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--color-text-dim, #6e8f76);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.info-hero__title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-green-light, #9adfb4);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.info-hero__title-ja {
  display: block;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--color-text-dim, #6e8f76);
  margin-top: 0.4rem;
}

.info-hero__updated {
  font-size: 0.68rem;
  color: var(--color-text-dim, #6e8f76);
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
}

/* ─── コンテンツレイアウト ─── */
.info-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

/* ─── パンくず ─── */
.info-breadcrumb {
  font-size: 0.70rem;
  color: var(--color-text-dim, #6e8f76);
  letter-spacing: 0.06em;
  margin-bottom: 2.5rem;
}
.info-breadcrumb a {
  color: var(--color-text-dim, #6e8f76);
  text-decoration: none;
}
.info-breadcrumb a:hover {
  color: var(--color-green-light, #9adfb4);
}
.info-breadcrumb span {
  margin: 0 0.5em;
  opacity: 0.45;
}

/* ─── セクション ─── */
.info-section {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(100, 180, 130, 0.08);
}
.info-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.info-section__heading {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-green-light, #9adfb4);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  position: relative;
  padding-left: 1rem;
}

.info-section__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  background: linear-gradient(to bottom, rgba(154, 223, 180, 0.6), rgba(100, 180, 130, 0.15));
  border-radius: 1px;
}

.info-section__title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-text, #e8f5ec);
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.info-section__body {
  font-size: 1.0rem;
  line-height: 1.9;
  color: var(--color-text-muted, #b0c8b8);
}

.info-section__body p {
  margin-bottom: 1em;
}
.info-section__body p:last-child {
  margin-bottom: 0;
}

/* ─── h3 小見出し ─── */
.info-h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--color-text, #e8f5ec);
  letter-spacing: 0.06em;
  margin: 1.75rem 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-green, #7ecb95);
}

/* ─── リスト ─── */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}
.info-list li {
  font-size: 1.0rem;
  color: var(--color-text-muted, #b0c8b8);
  line-height: 1.8;
  padding-left: 1.25rem;
  position: relative;
}
.info-list li::before {
  content: '·';
  position: absolute;
  left: 0.3rem;
  color: var(--color-green, #7ecb95);
}

/* ─── 注記ボックス ─── */
.info-note {
  background: rgba(100, 200, 140, 0.06);
  border: 1px solid rgba(100, 180, 130, 0.18);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: 0.94rem;
  color: var(--color-text-dim, #6e8f76);
  line-height: 1.8;
  margin: 1.25rem 0;
}
.info-note strong {
  color: var(--color-green-light, #9adfb4);
  font-weight: 500;
}

/* ─── 料金テーブル ─── */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.info-table th {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 0.70rem;
  letter-spacing: 0.08em;
  color: var(--color-text-dim, #6e8f76);
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(100, 180, 130, 0.18);
}
.info-table td {
  padding: 0.65rem 0.75rem;
  color: var(--color-text-muted, #b0c8b8);
  border-bottom: 1px solid rgba(100, 180, 130, 0.06);
  line-height: 1.6;
}
.info-table td:last-child {
  color: var(--color-green-light, #9adfb4);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.info-table tr:last-child td {
  border-bottom: none;
}

/* ─── フォームフレーム ─── */
.info-form-block {
  background: rgba(14, 26, 18, 0.80);
  border: 1px solid rgba(100, 180, 130, 0.16);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1.25rem 0;
}

.info-form-row {
  margin-bottom: 0.75rem;
  font-size: 0.94rem;
  color: var(--color-text-muted, #b0c8b8);
  line-height: 1.7;
}
.info-form-row strong {
  color: var(--color-text, #e8f5ec);
  font-weight: 500;
}

/* ─── ボタン ─── */
.info-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: rgba(120, 210, 155, 0.88);
  background: rgba(40, 100, 65, 0.15);
  border: 1px solid rgba(80, 160, 110, 0.30);
  border-radius: 3px;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
  margin-top: 1rem;
}
.info-btn:hover {
  color: rgba(160, 235, 190, 0.96);
  border-color: rgba(100, 190, 140, 0.55);
  background: rgba(50, 120, 80, 0.25);
  box-shadow: 0 0 10px rgba(80, 180, 120, 0.15);
  text-decoration: none;
}
.info-btn--amber {
  color: rgba(210, 148, 62, 0.88);
  background: rgba(140, 90, 18, 0.12);
  border-color: rgba(200, 130, 45, 0.30);
}
.info-btn--amber:hover {
  color: rgba(255, 184, 88, 0.96);
  border-color: rgba(255, 148, 45, 0.50);
  background: rgba(160, 100, 18, 0.22);
  box-shadow: 0 0 10px rgba(255, 160, 60, 0.18);
}

/* ─── 区切り線 ─── */
.info-divider {
  border: none;
  border-top: 1px solid rgba(100, 180, 130, 0.08);
  margin: 2rem 0;
}

/* ─── プロフィール専用 ─── */
.composer-profile {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.composer-profile__emblem {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(100, 180, 130, 0.25);
  background: rgba(14, 26, 18, 0.90);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

.composer-profile__emblem-text {
  font-family: 'Cinzel', serif;
  font-size: 0.90rem;
  letter-spacing: 0.10em;
  color: var(--color-green-light, #9adfb4);
}

.composer-profile__emblem-year {
  font-size: 0.55rem;
  letter-spacing: 0.10em;
  color: var(--color-text-dim, #6e8f76);
  font-family: 'Noto Sans JP', sans-serif;
}

.composer-profile__info {
  flex: 1;
  min-width: 0;
}

.composer-profile__name {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-text, #e8f5ec);
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.composer-profile__name-en {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-text-dim, #6e8f76);
  margin-bottom: 1rem;
}

.composer-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.composer-profile__tag {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--color-green, #7ecb95);
  background: rgba(100, 200, 140, 0.08);
  border: 1px solid rgba(100, 180, 130, 0.20);
  border-radius: 2px;
  padding: 0.2rem 0.55rem;
}

/* ─── 更新履歴テーブル ─── */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.history-list__item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(100, 180, 130, 0.06);
  font-size: 0.96rem;
  line-height: 1.7;
}
.history-list__item:last-child {
  border-bottom: none;
}
.history-list__date {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dim, #6e8f76);
  padding-top: 0.2rem;
}
.history-list__desc {
  color: var(--color-text-muted, #b0c8b8);
}
.history-list__desc strong {
  color: var(--color-text, #e8f5ec);
  font-weight: 500;
  display: block;
  margin-bottom: 0.1rem;
}

/* ─── 年グループ見出し ─── */
.history-year {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--color-green, #7ecb95);
  text-transform: uppercase;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(100, 180, 130, 0.14);
}
.history-year:first-child {
  margin-top: 0;
}

/* ─── SNSリンク ─── */
.info-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ─── レスポンシブ ─── */
@media (max-width: 560px) {
  .info-hero {
    padding: 4rem 1.25rem 2rem;
  }
  .info-body {
    padding: 2rem 1.25rem 5rem;
  }
  .composer-profile {
    flex-direction: column;
    gap: 1.5rem;
  }
  .info-table th,
  .info-table td {
    padding: 0.5rem 0.5rem;
    font-size: 0.80rem;
  }
  .history-list__item {
    grid-template-columns: 5rem 1fr;
  }
}

/* /assets/css/ornaments.css */
/* ============================================================
   H/MIX GALLERY — Ornamental Decorations
   European classical scrollwork × Forest fantasy
   ============================================================ */

/* ─── Section Divider Ornament ─── */
.orn-divider {
  display: block;
  width: min(95%, 580px);
  height: 52px;
  margin: 0.5rem auto;
  background: url('/images/ornaments/divider.svg') center / contain no-repeat;
  border: none;
  opacity: 0.9;
}

/* ─── Corner-framed Sections ─── */
.orn-framed {
  position: relative;
  padding: 2.5rem 3rem;
}

.orn-framed::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 90px;
  height: 90px;
  background: url('/images/ornaments/corner-tl.svg') top left / contain no-repeat;
  pointer-events: none;
}

.orn-framed::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 90px;
  height: 90px;
  background: url('/images/ornaments/corner-tr.svg') top right / contain no-repeat;
  pointer-events: none;
}

/* Bottom corners via inner wrapper */
.orn-framed-bottom::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 90px;
  height: 90px;
  background: url('/images/ornaments/corner-bl.svg') bottom left / contain no-repeat;
  pointer-events: none;
}

.orn-framed-bottom::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 90px;
  height: 90px;
  background: url('/images/ornaments/corner-br.svg') bottom right / contain no-repeat;
  pointer-events: none;
}

/* ─── Hero Title Ornamental Frame ─── */
.orn-hero-frame {
  position: relative;
  display: inline-block;
}

.orn-hero-frame::before,
.orn-hero-frame::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  transform: translateY(-50%);
}

.orn-hero-frame::before {
  right: calc(100% + 1.5rem);
  background: linear-gradient(90deg, transparent, #9adfb4);
  opacity: 0.3;
}

.orn-hero-frame::after {
  left: calc(100% + 1.5rem);
  background: linear-gradient(90deg, #9adfb4, transparent);
  opacity: 0.3;
}

/* ─── Decorative Vine Border (top/bottom of sections) ─── */
.orn-vine-top {
  position: relative;
}

.orn-vine-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 600px);
  height: 3px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(154, 223, 180, 0.15) 15%,
      rgba(154, 223, 180, 0.30) 50%,
      rgba(154, 223, 180, 0.15) 85%,
      transparent 100%
    );
  pointer-events: none;
}

/* ─── Gold accent line ─── */
.orn-gold-line {
  display: block;
  width: 40px;
  height: 1px;
  margin: 1rem auto;
  background: linear-gradient(90deg, transparent, #d4a44c, transparent);
  border: none;
  opacity: 0.4;
}

/* ─── Subtle pattern overlay for info-hero ─── */
.orn-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(154, 223, 180, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(212, 164, 76, 0.02) 1px, transparent 1px);
  background-size: 60px 60px, 80px 80px;
  pointer-events: none;
}

/* ─── Override: remove default section border when ornamental dividers are used ─── */
#page-content .info-section {
  border-bottom: none;
}

/* ─── Override: TOC padding for corner ornaments ─── */
.terms-toc.orn-framed {
  padding: 2.5rem 3rem;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .orn-framed {
    padding: 2rem;
  }
  .orn-framed::before,
  .orn-framed::after {
    width: 60px;
    height: 60px;
  }
  .orn-framed-bottom::before,
  .orn-framed-bottom::after {
    width: 60px;
    height: 60px;
  }
}

/* /assets/css/license-pages.css?v=20260921contrast1 */
/* ============================================================
   H/MIX — License / Info pages "beige" THEME OVERRIDE (V4 redesign)
   現行のダークなヘッダー/プレイヤー/フッターはそのまま。
   `body.lp-page` の本文領域だけを V4 ベージュ・デザインに上書きする。
   JS（license-request.js 等）は無改変。既存クラスを再スタイルするだけ。
   このファイルは license-request.css 等の "後" に読み込むこと。
   ============================================================ */

body.lp-page {
  --lp-bg:#F4F0E6; --lp-ink:#211E18; --lp-soft:#4A453C; --lp-muted:#6E665A;
  --lp-faint:#71695D; --lp-line:#E6DFCF; --lp-line2:#EFE9DB; --lp-green:#16382A;
  --lp-green2:#2E6B4F; --lp-gold:#80651F; --lp-gold-lt:#D8BC6A; --lp-navy:#2C3E5C; --lp-card:#fff;
  --lp-serif:'Shippori Mincho','Noto Serif JP',serif;
  --lp-sans:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  background: var(--lp-bg);
}

/* 本文コンテナをベージュに（ダーク背景/装飾を打ち消す） */
body.lp-page #page-content { background: var(--lp-bg); color: var(--lp-ink); font-family: var(--lp-sans); }
body.lp-page #page-content::before,
body.lp-page #page-content::after { display:none !important; }
.lr-quick-steps { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.lr-quick-steps a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid #CFC6B2; border-radius:8px; color:#16382A; font-size:14px; font-weight:600; }
#lr-info-heading, #lr-license-heading { scroll-margin-top:90px; }
body.lp-page #page-content .license-request-actions .license-request-note { color:#DBE6D5 !important; opacity:1; font-size:12px; line-height:1.8; }
body.lp-page .license-request-actions .lr-price-amount small { opacity:1 !important; font-size:12px; }
body.lp-page .scenic-bg, body.lp-page #scenic-bg { display:none !important; }
body.lp-page ::selection { background: var(--lp-green); color: var(--lp-bg); }

/* ── HERO（情報ページ共通） ── */
body.lp-page .info-hero {
  background: var(--lp-bg) !important; color: var(--lp-ink);
  border:none; box-shadow:none; padding: 64px 40px 26px; text-align:left; max-width:920px; margin:0 auto;
}
body.lp-page .info-hero::before, body.lp-page .info-hero::after { display:none !important; }
body.lp-page .info-hero__eyebrow { color: var(--lp-gold); font-family: var(--lp-serif); font-style:italic; letter-spacing:.08em; }
body.lp-page .info-hero__title { font-family: var(--lp-serif); color: var(--lp-ink); font-weight:700; }
body.lp-page .info-hero__title-ja { color: var(--lp-ink); }
body.lp-page .info-hero__updated { color: var(--lp-soft) !important; opacity:1 !important; }
body.lp-page .info-hero__updated strong { color: var(--lp-green); }
body.lp-page .lp-hero-fav {
  background:#fff !important; border:1px solid #CFC6B2 !important; color: var(--lp-green) !important;
  border-radius:999px; padding:.2rem .8rem; font-weight:700; cursor:pointer;
}

/* ── BODY / breadcrumb / note ── */
body.lp-page .info-body { max-width: 920px; margin:0 auto; padding: 8px 40px 70px; background:transparent; }
@media (max-width:760px){ body.lp-page .info-hero, body.lp-page .info-body { padding-left:22px; padding-right:22px; } }
body.lp-page .info-breadcrumb { color: var(--lp-faint); }
body.lp-page .info-breadcrumb a { color: var(--lp-faint); }
body.lp-page .info-note {
  background:#fff !important; border:1px solid var(--lp-line) !important; border-radius:12px;
  color: var(--lp-soft) !important; padding:16px 20px;
}
body.lp-page .info-note a { color: var(--lp-green2) !important; font-weight:600; }
body.lp-page .info-btn {
  background: var(--lp-green) !important; color: var(--lp-bg) !important; border:1px solid var(--lp-green) !important;
  border-radius:999px; font-weight:700;
}
body.lp-page .info-btn:hover { background:#1d4a37 !important; }

/* ── 見出し系（lr-section） ── */
body.lp-page .lr-section { background:transparent; border:none; padding:0; margin-bottom:26px; }
body.lp-page .lr-section__heading { color: var(--lp-faint); font-size:11px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; }

/* ── 選択中の曲リスト ── */
body.lp-page .selected-tracks { background:transparent; border:none; padding:0; margin-bottom:26px; }
body.lp-page .selected-tracks__heading { color: var(--lp-faint); font-size:11px; letter-spacing:.14em; font-weight:700; }
body.lp-page .selected-tracks__count { color: var(--lp-muted); }
body.lp-page .selected-track-card {
  background:#fff; border:1px solid var(--lp-line); border-radius:10px; padding:10px 14px;
}
body.lp-page .selected-track-card__preview {
  background: var(--lp-green); color: var(--lp-bg); border:none; border-radius:50%;
}
body.lp-page .selected-track-card__title { color: var(--lp-ink); font-weight:600; }
body.lp-page .selected-track-card__tags { color: var(--lp-faint); }
body.lp-page .selected-track-card__remove { color:#A8593A; }
body.lp-page .selected-tracks__placeholder {
  background:#fff; border:1px dashed #CFC6B2; color: var(--lp-faint);
}

/* ── 曲名で追加 ＋ 予測候補 ── */
body.lp-page .lr-add-track__box { background:#fff; border:1px solid #CFC6B2; border-radius:10px; }
body.lp-page .lr-add-track__box svg { color: var(--lp-faint); }
body.lp-page .lr-add-track__input { color: var(--lp-ink); }
body.lp-page .lr-add-track__input::placeholder { color: var(--lp-faint); }
body.lp-page .lr-suggest {
  background:#fff; border:1px solid var(--lp-line); border-radius:12px;
  box-shadow:0 18px 50px -18px rgba(33,30,24,.4);
}
body.lp-page .lr-suggest__item:hover { background:#EAF0EC; }
body.lp-page .lr-suggest__title { color: var(--lp-ink); }
body.lp-page .lr-suggest__tags  { color: var(--lp-faint); }
body.lp-page .lr-suggest__empty { color: var(--lp-faint); }

/* ── ライセンス種別カード ── */
body.lp-page .lr-license-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:760px){ body.lp-page .lr-license-cards { grid-template-columns:1fr; } }
body.lp-page .lr-license-card {
  background:#fff; border:1px solid var(--lp-line); border-radius:14px; color: var(--lp-ink);
}
body.lp-page .lr-license-card:hover { border-color:#CFC6B2; }
body.lp-page .lr-license-card--selected { background:#EAF0EC !important; border-color: var(--lp-green) !important; box-shadow:0 0 0 2px var(--lp-green) inset; }
body.lp-page .lr-license-card--selected, body.lp-page .lr-license-card--selected * { color: var(--lp-ink) !important; }
body.lp-page .lr-license-card--selected .lr-license-card__badge { color: var(--lp-gold) !important; }
body.lp-page .lr-license-card--selected .lr-license-card__price { color: var(--lp-green) !important; }
body.lp-page .lr-license-card--recommended { border-color: var(--lp-gold); }
body.lp-page .lr-license-card__badge { color: var(--lp-navy); background:transparent; padding:0; font-size:10.5px; letter-spacing:.1em; font-weight:700; }
body.lp-page .lr-license-card--pro .lr-license-card__badge,
body.lp-page .lr-license-card--store .lr-license-card__badge,
body.lp-page .lr-license-card__badge--pro { color: var(--lp-gold); }
body.lp-page .lr-license-card__name { color: var(--lp-ink); font-weight:700; font-size:16px; }
body.lp-page .lr-license-card__price { color: var(--lp-ink); font-family: var(--lp-serif); font-weight:700; }
body.lp-page .lr-license-card__features { color: var(--lp-muted); }
body.lp-page .lr-license-card__features li { color: var(--lp-muted); }

/* ── Professional 用途 / 店舗ブロック（パネル） ── */
body.lp-page .lr-store-block { background:#fff; border:1px solid var(--lp-line); border-radius:14px; padding:20px; }
/* Professional 用途は「必須・UIが変わった」と気づけるよう金枠＋左アクセントで強調 */
body.lp-page .lr-pro-usage {
  background: linear-gradient(180deg, #FBF2DC, #FCF8EE);
  border: 1.5px solid #C8A24A;
  border-left: 5px solid #C8A24A;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px -16px rgba(176, 134, 38, 0.5);
}
body.lp-page .lr-pro-usage__title { color: #9A7B26; }
body.lp-page .lr-pro-usage__mark { color: #C8A24A; }
body.lp-page .lr-label { color:#39352D; font-weight:700; }
body.lp-page .lr-select, body.lp-page .lr-input {
  background:#fff; border:1px solid #CFC6B2; color: var(--lp-ink); border-radius:10px;
}
body.lp-page .lr-select:focus, body.lp-page .lr-input:focus { border-color: var(--lp-green); }
body.lp-page .lr-hint { color: var(--lp-muted); }
body.lp-page .lr-hint a { color: var(--lp-green2) !important; }
body.lp-page .lr-store-plan { background:#fff; border:1px solid var(--lp-line); }
body.lp-page .lr-store-plan--selected { background:#EAF0EC; border-color: var(--lp-green); }
body.lp-page .lr-store-plan__name { color: var(--lp-green); }
body.lp-page .lr-store-plan__desc { color:#8A8273; }
body.lp-page .lr-store-count__hint { color:#8A8273; }
body.lp-page .lr-pack-hint { color: var(--lp-green2); }

/* ── 購入者情報フォーム ── */
body.lp-page .license-request-field .lr-label { color:#39352D; }
body.lp-page .lr-error { color:#A8593A; }
body.lp-page .lr-field-invalid .lr-input,
body.lp-page .lr-field-invalid .lr-select { border-color:#A8593A; }
body.lp-page .lr-error-msg { color:#A8593A; }

/* ── 価格＋決済（ダークグリーン帯） ── */
body.lp-page .license-request-actions {
  background: var(--lp-green); border-radius:16px; padding:24px 26px; border:none;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
}
body.lp-page .lr-price-display { color: var(--lp-bg); }
body.lp-page .lr-price-label { color:#9FB29A; }
body.lp-page .lr-price-amount { color: var(--lp-gold-lt); font-family: var(--lp-serif); }
body.lp-page .lr-price-prompt { color:#9FB29A; }
body.lp-page .lr-submit-btn {
  background: var(--lp-gold-lt); color: var(--lp-green); border:none; border-radius:12px; font-weight:700;
}
body.lp-page .lr-submit-btn:disabled { opacity:.45; }
body.lp-page .license-request-note { color: var(--lp-faint); }

/* ── 空状態 ── */
body.lp-page .lr-empty__title { color: var(--lp-ink); font-family: var(--lp-serif); }
body.lp-page .lr-empty__desc { color: var(--lp-soft); }
body.lp-page .lr-empty__or { color: var(--lp-faint); }

/* ── 静的情報ページ（特商法/規約/プライバシ等）共通 ── */
body.lp-page .lp__wrap { max-width: 960px; margin: 0 auto; padding: 0 40px; }
@media (max-width:760px){ body.lp-page .lp__wrap { padding: 0 22px; } }
body.lp-page .lp-hero { padding: 56px 0 8px; }
body.lp-page .lp-crumb { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--lp-faint); margin-bottom:22px; }
body.lp-page .lp-crumb a { text-decoration:none; color:var(--lp-faint); }
body.lp-page .lp-crumb .here { color: var(--lp-navy); }
body.lp-page .lp-h1 { font-family: var(--lp-serif); font-weight:700; margin:0; font-size:clamp(31px,5vw,46px); line-height:1.25; color: var(--lp-ink); }
body.lp-page .lp-back { display:inline-block; margin-top:26px; text-decoration:none; color:var(--lp-navy); font-weight:700; font-size:14px; }
/* 定義リスト（特商法など） */
body.lp-page .lp-dl { margin:0; background:#fff; border:1px solid var(--lp-line); border-radius:16px; overflow:hidden; }
body.lp-page .lp-dl__row { display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid var(--lp-line2); }
body.lp-page .lp-dl__row:last-child { border-bottom:none; }
body.lp-page .lp-dl__row dt { padding:18px 26px; font-weight:700; font-size:15px; background:#FBF9F3; color:#39352D; margin:0; }
body.lp-page .lp-dl__row dd { padding:18px 26px; font-size:15.5px; color:#39352D; margin:0; line-height:1.85; }
body.lp-page .lp-dl a { color: var(--lp-navy); font-weight:600; }
@media (max-width:640px){ body.lp-page .lp-dl__row { grid-template-columns:1fr; } body.lp-page .lp-dl__row dt { padding-bottom:4px; } body.lp-page .lp-dl__row dd { padding-top:0; } }

/* 言語切替（サイトの body.lang-en に追従。本文の lang="ja"/lang="en" を出し分け） */
body.lp-page #page-content [lang="en"] { display:none; }
body.lp-page.lang-en #page-content [lang="ja"] { display:none; }
body.lp-page.lang-en #page-content [lang="en"] { display:revert; }

/* /assets/css/fav-notebook.css?v=20260707g */
/* =====================================================================
 * fav-notebook.css ── 音楽手帖（お気に入りボックス）見開きUI
 * 深緑×金／夜の森／綴じ目。ClaudeDesign ハンドオフのデザイントークン準拠。
 * 装丁テーマ: data-binding="forest|gilt|plain"（既定 forest）
 * モーション基調: cubic-bezier(.22,1,.36,1)
 * ===================================================================== */

#hmix-notebook,
#hmix-notebook * { box-sizing: border-box; }

/* ---- 器（オーバーレイ） ---- */
#hmix-notebook{
  --gold:#e7ca7c; --gold-bright:#ffcf6e;
  --rule:rgba(202,164,78,.30); --rule-strong:rgba(202,164,78,.55);
  --ink:#eef0ea; --ink-dim:#a8bcb0;
  --green:#7ecb95; --green-soft:#9adfb4;
  --page-a:rgba(16,28,20,.96); --page-b:rgba(10,18,13,.98);
  --ease:cubic-bezier(.22,1,.36,1);
  /* ガラス調: ぼかし量と下地ティント（背景の光を宿す半透明） */
  --glass-blur:16px; --glass-tint-a:rgba(15,27,19,.56); --glass-tint-b:rgba(9,17,12,.68);
  position:fixed; inset:0; z-index:2147483600;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px,3vh) 16px;
  /* 背景(コンテンツ)を透かしつつ、周囲だけ軽く沈めてガラスを引き立てる */
  background:radial-gradient(120% 120% at 50% 0%, rgba(6,12,8,.38), rgba(2,5,3,.56));
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease);
}
#hmix-notebook[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
#hmix-notebook[hidden]{ display:none; }

/* ---- 手帖シェル（見開き） ---- */
.hmix-notebook{
  position:relative;
  width:min(1100px,92vw); height:min(88vh,760px); min-height:540px;
  display:grid; grid-template-columns:220px 1fr 300px; grid-template-rows:auto 1fr auto;
  /* 透明なガラス素材: 背景のコンテンツと世界の光をぼんやり宿す */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%),
    linear-gradient(150deg, var(--glass-tint-a), var(--glass-tint-b));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.18);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.18);
  border-radius:5px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(202,164,78,.18), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  overflow:hidden;
  transform:perspective(1800px) rotateY(-14deg) scale(.96); transform-origin:left center;
  opacity:0; transition:transform .72s var(--ease), opacity .5s var(--ease);
}
#hmix-notebook[aria-hidden="false"] .hmix-notebook{ transform:none; opacity:1; }
/* 金の二重細罫枠 */
.hmix-notebook::before{
  content:""; position:absolute; inset:7px; border:1px solid var(--rule);
  border-radius:3px; pointer-events:none; z-index:5;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 3px rgba(10,18,13,.6), inset 0 0 0 4px var(--rule);
}
/* 四隅の金L字飾り（gilt で濃く / plain で消す） */
.hmix-notebook::after{
  content:""; position:absolute; inset:7px; pointer-events:none; z-index:6; opacity:.55;
  background:
    linear-gradient(var(--gold),var(--gold)) left  top    /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left  top    /1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top    /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top    /1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left  bottom /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left  bottom /1px 18px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom /18px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom /1px 18px no-repeat;
}
#hmix-notebook[data-binding="gilt"] .hmix-notebook::after{ opacity:1; }
#hmix-notebook[data-binding="plain"] .hmix-notebook::after{ opacity:0; }
#hmix-notebook[data-binding="gilt"]{ --gold:#f0d595; --rule:rgba(202,164,78,.5); }
#hmix-notebook[data-binding="plain"]{ --rule:rgba(202,164,78,.5); --ink-dim:#c2d2c6; }

/* ---- ヘッダー（スティッキー相当・全幅） ---- */
.hnb-head{
  grid-column:1 / -1; display:flex; align-items:center; gap:16px;
  padding:16px 22px 14px; border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(14,24,17,.7), transparent);
}
.hnb-head__title{ font-family:'Noto Serif JP',serif; font-weight:700; font-size:18px; letter-spacing:.02em; }
.hnb-head__kicker{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.34em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:2px; }
.hnb-head__count{ font-family:'Bebas Neue',sans-serif; color:var(--gold); font-size:15px; letter-spacing:.06em; margin-left:8px; }
.hnb-head__spacer{ flex:1; }
.hnb-search{
  background:rgba(255,255,255,.04); border:1px solid var(--rule); border-radius:999px;
  color:var(--ink); font:400 13px/1 'Noto Sans JP',sans-serif; padding:9px 14px; width:200px;
}
.hnb-search::placeholder{ color:var(--ink-dim); }
.hnb-sync{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green-soft);
  border:1px solid rgba(126,203,149,.32); background:rgba(126,203,149,.08); border-radius:999px; padding:6px 12px;
}
.hnb-sync::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.hnb-close{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--rule);
  background:transparent; color:var(--ink-dim); font-size:16px; cursor:pointer; line-height:1;
}
.hnb-close:hover{ color:var(--gold); border-color:var(--rule-strong); }

/* ---- 左：背表紙ナビ（本棚＝章） ---- */
.hnb-spine{
  grid-column:1; grid-row:2 / 3; overflow-y:auto; padding:16px 12px;
  border-right:1px solid var(--rule);
  background:
    linear-gradient(90deg, transparent, rgba(0,0,0,.35) 96%),
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(202,164,78,.05) 9px 10px);
  box-shadow:inset -8px 0 16px -10px rgba(0,0,0,.6);
}
.hnb-spine__h{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.3em; color:var(--ink-dim); text-transform:uppercase; padding:0 8px 10px; }
.hnb-chapter{
  position:relative; width:100%; text-align:left; display:block;
  padding:11px 12px 11px 16px; margin-bottom:6px; border-radius:4px;
  background:transparent; border:1px solid transparent; color:var(--ink); cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.hnb-chapter::before{ /* 左端の状態色帯 */
  content:""; position:absolute; left:4px; top:8px; bottom:8px; width:4px; border-radius:2px;
  background:var(--rule-strong);
}
.hnb-chapter[data-lic="confirmed"]::before{ background:var(--gold); }
.hnb-chapter[data-lic="licensed"]::before{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 0 8px rgba(231,202,124,.5); }
.hnb-chapter:hover{ background:rgba(202,164,78,.06); }
.hnb-chapter.is-active{ background:rgba(202,164,78,.1); border-color:var(--rule); }
.hnb-chapter__name{ font-family:'Noto Serif JP',serif; font-size:14px; display:flex; align-items:center; gap:6px; }
.hnb-chapter__lock{ width:12px; height:12px; opacity:.85; }
.hnb-chapter__meta{ font-family:'Bebas Neue',sans-serif; font-size:13px; color:var(--ink-dim); letter-spacing:.05em; margin-top:3px; }
.hnb-chapter__meta b{ color:var(--gold); font-weight:400; }
.hnb-newchapter{
  width:100%; text-align:left; padding:11px 16px; margin-top:6px; border-radius:4px;
  background:transparent; border:1px dashed var(--rule); color:var(--ink-dim);
  font-size:13px; cursor:pointer;
}
.hnb-newchapter:hover{ color:var(--gold); border-color:var(--rule-strong); }

/* ---- 中央：曲リスト（台帳） ---- */
.hnb-pages{
  grid-column:2; grid-row:2 / 3; overflow-y:auto; position:relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 55px, rgba(202,164,78,.06) 55px 56px),
    radial-gradient(140% 100% at 50% 0%, rgba(20,34,24,.4), transparent);
}
.hnb-select-tools{
  position:sticky; top:0; z-index:2;
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px;
  min-height:44px; padding:8px 18px; border-bottom:1px solid rgba(202,164,78,.16);
  background:linear-gradient(180deg, rgba(11,20,14,.98), rgba(11,20,14,.88));
  backdrop-filter:blur(10px);
}
.hnb-select-tools__label{
  font-family:'Noto Serif JP',serif; font-size:13px; color:var(--gold);
}
.hnb-select-tools__btn{
  min-height:30px; padding:0 11px; border-radius:999px;
  border:1px solid var(--rule); background:rgba(255,255,255,.03);
  color:var(--ink); font-size:12px; cursor:pointer;
}
.hnb-select-tools__btn:hover{ border-color:var(--rule-strong); color:var(--gold); }
.hnb-row{
  display:grid; grid-template-columns:26px 28px 28px 1fr auto auto; align-items:center; gap:10px;
  min-height:56px; padding:.6rem 18px; border-bottom:1px solid rgba(202,164,78,.08);
  cursor:pointer; transition:background .18s var(--ease);
}
.hnb-row:hover{ background:rgba(202,164,78,.05); }
.hnb-row.is-active{ background:rgba(202,164,78,.1); }
.hnb-row.is-playing .hnb-row__title{ color:var(--green-soft); }
.hnb-row.is-playing .hnb-row__title::after{ content:"♪"; margin-left:8px; color:var(--green); font-size:.85em; }
.hnb-check{ width:18px; height:18px; accent-color:var(--gold); cursor:pointer; }
.hnb-iconbtn{
  width:28px; height:28px; min-width:28px; display:grid; place-items:center;
  background:transparent; border:none; color:var(--ink-dim); cursor:pointer; font-size:16px; border-radius:50%;
}
.hnb-iconbtn:hover{ color:var(--gold); background:rgba(202,164,78,.1); }
.hnb-fav.is-on{ color:var(--gold); }
.hnb-row__main{ min-width:0; }
.hnb-row__title{ font-family:'Noto Serif JP',serif; font-size:1rem; line-height:1.5; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hnb-row__tags{ font-size:.78rem; color:var(--ink-dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hnb-row__dur{ font-family:'Bebas Neue',sans-serif; font-size:14px; color:var(--ink-dim); letter-spacing:.06em; }
.hnb-badge{
  font-size:10.5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--rule); color:var(--ink-dim);
}
.hnb-badge[data-lic="draft"]{ color:#cdb579; border-color:rgba(202,164,78,.35); }
.hnb-badge[data-lic="confirmed"]{ color:var(--gold); border-color:var(--rule-strong); }
.hnb-badge[data-lic="licensed"]{ color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }

/* ---- 右：プレビュー／メモ ---- */
.hnb-preview{
  grid-column:3; grid-row:2 / 3; overflow-y:auto; padding:18px; border-left:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(12,22,15,.24), rgba(8,15,10,.4));
  display:flex; flex-direction:column; gap:14px;
}
.hnb-preview__empty{ color:var(--ink-dim); font-size:13px; line-height:1.8; margin:auto 0; text-align:center; }
.hnb-preview__title{ font-family:'Noto Serif JP',serif; font-size:17px; line-height:1.4; }
.hnb-preview__tags{ font-size:.8rem; color:var(--ink-dim); line-height:1.6; }
.hnb-wave{ height:46px; display:flex; align-items:flex-end; gap:2px; opacity:.85; }
.hnb-wave span{ flex:1; background:linear-gradient(180deg,var(--gold),rgba(126,203,149,.5)); border-radius:1px; }
.hnb-preview__sect{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.28em; color:var(--ink-dim); text-transform:uppercase; }
.hnb-memo{
  width:100%; min-height:64px; resize:vertical; background:rgba(255,255,255,.03);
  border:1px solid var(--rule); border-radius:6px; color:var(--ink); padding:10px;
  font:400 13px/1.6 'Noto Sans JP',sans-serif;
}
.hnb-apply-one{
  margin-top:auto; padding:11px; border-radius:8px; border:1px solid var(--rule-strong);
  background:transparent; color:var(--gold); font-weight:700; font-size:13px; cursor:pointer;
}
.hnb-apply-one:hover{ background:rgba(202,164,78,.1); }
.hnb-preview__row{ display:flex; align-items:center; gap:10px; }
/* A/B 聴き比べ */
.hnb-ab{ display:flex; flex-direction:column; gap:6px; }
.hnb-ab__btn{
  display:flex; align-items:center; gap:8px; text-align:left; padding:8px 11px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--ink); cursor:pointer;
  font-size:12.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.hnb-ab__btn:hover{ border-color:var(--rule-strong); }
.hnb-ab__btn b{ color:var(--gold); font-family:'Bebas Neue',sans-serif; font-size:14px; }
.hnb-ab__hint{ font-size:11.5px; color:var(--ink-dim); padding:4px 2px; }
/* シート用ハンドル/閉じる（モバイルのみ可視） */
.hnb-sheet-handle{ display:none; }
.hnb-sheet-close{ display:none; }

/* ---- フッター（金CTA＋一括バー） ---- */
.hnb-foot{
  grid-column:1 / -1; grid-row:3 / 4; padding:14px 22px; border-top:1px solid var(--rule);
  background:linear-gradient(0deg, rgba(8,15,10,.85), transparent); position:relative;
}
.hnb-apply-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.hnb-cta{
  width:100%; padding:15px; border-radius:8px; cursor:pointer;
  color:#0a140d; font-weight:700; font-size:15px; border:1px solid transparent;
  font-family:'Noto Serif JP',serif; letter-spacing:.02em;
  box-shadow:0 8px 24px -10px rgba(231,202,124,.6);
}
.hnb-cta--selected{
  background:linear-gradient(135deg, rgba(255,207,110,.95), rgba(126,203,149,.82));
  border-color:rgba(126,203,149,.34);
}
.hnb-cta--download{
  background:linear-gradient(135deg, rgba(207,230,242,.95), rgba(143,224,200,.78));
  border-color:rgba(207,230,242,.42);
}
.hnb-cta:hover{ filter:brightness(1.05); }
.hnb-cta:disabled{ cursor:not-allowed; filter:saturate(.75); }
.hnb-cta__sub{ display:block; text-align:center; margin-top:8px; font-size:11px; color:var(--ink-dim); }
/* 一括バー */
.hnb-bulk{
  position:absolute; left:22px; right:22px; bottom:calc(100% + 8px);
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px;
  background:rgba(12,22,15,.96); border:1px solid var(--rule-strong);
  box-shadow:0 12px 36px -14px rgba(0,0,0,.7);
  opacity:0; transform:translateY(8px); pointer-events:none; transition:.22s var(--ease);
}
.hnb-bulk.is-on{ opacity:1; transform:none; pointer-events:auto; }
.hnb-bulk__n{ font-family:'Bebas Neue',sans-serif; color:var(--gold); font-size:16px; letter-spacing:.05em; }
.hnb-bulk__btn{ background:transparent; border:1px solid var(--rule); border-radius:6px; color:var(--ink); padding:7px 12px; font-size:12.5px; cursor:pointer; }
.hnb-bulk__btn:hover{ border-color:var(--rule-strong); color:var(--gold); }

/* ---- 空状態 ---- */
.hnb-empty{
  grid-column:2 / 4; grid-row:2 / 3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center; padding:40px;
}
.hnb-empty[hidden]{ display:none !important; }
.hnb-empty__mark{ font-size:40px; color:var(--gold); opacity:.7; }
.hnb-empty__lead{ font-family:'Noto Serif JP',serif; font-size:18px; line-height:1.7; }
.hnb-empty__sub{ color:var(--ink-dim); font-size:13px; line-height:1.8; max-width:340px; }
.hnb-empty__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---- スクロールバー ---- */
.hnb-spine::-webkit-scrollbar,.hnb-pages::-webkit-scrollbar,.hnb-preview::-webkit-scrollbar{ width:8px; }
.hnb-spine::-webkit-scrollbar-thumb,.hnb-pages::-webkit-scrollbar-thumb,.hnb-preview::-webkit-scrollbar-thumb{ background:rgba(202,164,78,.2); border-radius:4px; }

/* ---- モバイル（簡易・後続スライスで全画面シート化） ---- */
@media (max-width:760px){
  #hmix-notebook{ padding:0; align-items:flex-end; }
  .hmix-notebook{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto; height:92vh; width:100vw; border-radius:18px 18px 0 0; transform:translateY(8%); }
  #hmix-notebook[aria-hidden="false"] .hmix-notebook{ transform:none; }
  .hmix-notebook::before{ inset:5px; }
  /* ヘッダー：2段（上=情報、下=検索） */
  .hnb-head{ grid-column:1; grid-row:1 / 2; flex-wrap:wrap; gap:8px 10px; padding:12px 14px; }
  .hnb-head__kicker{ display:none; }
  .hnb-head__spacer{ display:none; }
  .hnb-search{ order:5; width:100%; }
  /* 背表紙：水平スワイプ帯 */
  .hnb-spine{ grid-row:2 / 3; grid-column:1; border-right:none; border-bottom:1px solid var(--rule); display:flex; gap:8px; overflow-x:auto; padding:10px 12px; box-shadow:none; background:rgba(10,18,13,.4); }
  .hnb-spine__h{ display:none; }
  .hnb-chapter{ flex:0 0 auto; margin-bottom:0; white-space:nowrap; padding:9px 14px 9px 18px; }
  .hnb-chapter__meta{ display:none; }
  .hnb-newchapter{ flex:0 0 auto; margin-top:0; white-space:nowrap; }
  /* 曲リスト */
  .hnb-pages{ grid-row:3 / 4; grid-column:1; }
  .hnb-select-tools{ grid-template-columns:1fr auto auto; padding:8px 14px; }
  .hnb-select-tools__label{ font-size:12px; }
  .hnb-select-tools__btn{ padding:0 9px; font-size:11.5px; }
  .hnb-row{ grid-template-columns:24px 28px 1fr auto; }
  .hnb-row .hnb-play{ display:none; }
  .hnb-row__tags{ display:none; }
  /* プレビュー＝行タップでせり上がる詳細シート */
  .hnb-preview{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:20;
    grid-column:auto; grid-row:auto; height:auto; max-height:74vh; padding:10px 18px 24px;
    border-left:none; border-top:1px solid var(--rule-strong); border-radius:18px 18px 0 0;
    background:linear-gradient(180deg, rgba(14,24,17,.62), rgba(8,15,10,.74));
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.18); backdrop-filter:blur(var(--glass-blur)) saturate(1.18);
    box-shadow:0 -16px 40px -12px rgba(0,0,0,.7);
    transform:translateY(102%); transition:transform .34s var(--ease); pointer-events:auto;
  }
  .hnb-preview.is-open{ transform:none; }
  .hnb-sheet-handle{ display:block; width:40px; height:4px; border-radius:2px; background:var(--rule-strong); margin:0 auto 10px; }
  .hnb-sheet-close{ display:grid; place-items:center; position:absolute; top:10px; right:14px; width:44px; height:44px; background:transparent; border:none; color:var(--ink-dim); font-size:18px; cursor:pointer; }
  .hnb-empty{ grid-column:1; grid-row:3 / 4; }
  /* フッターを最下段に固定（重なり解消） */
  .hnb-foot{ grid-column:1; grid-row:4 / 5; padding:12px 14px; }
  .hnb-apply-actions{ gap:8px; }
  .hnb-cta{ font-size:14px; padding:13px; }
}

/* ---- プレビューのボタン列（章へ入れる / 申請） ---- */
.hnb-preview__btns{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.hnb-addch-one{ padding:11px; border-radius:8px; border:1px solid var(--rule); background:rgba(202,164,78,.06); color:var(--gold); font-weight:700; font-size:13px; cursor:pointer; }
.hnb-addch-one:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.12); }
.hnb-cta--ghost{ background:transparent !important; color:var(--gold) !important; border:1px solid var(--rule-strong); box-shadow:none !important; }

/* ---- 章ピッカー（選択/単曲 → 既存章 or 新規へ・既定コピー） ---- */
.hnb-picker{ position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .18s var(--ease); }
.hnb-picker.is-open{ opacity:1; pointer-events:auto; }
.hnb-picker__backdrop{ position:absolute; inset:0; background:rgba(3,6,4,.66); }
.hnb-picker__panel{ position:relative; width:min(360px,86%); max-height:78%; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(155deg, rgba(13,23,16,.72), rgba(7,13,9,.82)); border:1px solid var(--rule-strong); border-radius:10px; padding:16px;
  -webkit-backdrop-filter:blur(18px) saturate(1.18); backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(202,164,78,.16); transform:translateY(8px); transition:transform .2s var(--ease); }
.hnb-picker.is-open .hnb-picker__panel{ transform:none; }
.hnb-picker__head{ font-family:'Noto Serif JP',serif; font-size:15px; color:var(--ink); padding-bottom:4px; }
.hnb-picker__list{ display:flex; flex-direction:column; gap:6px; }
.hnb-picker__item{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:11px 13px 11px 16px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--ink); cursor:pointer; position:relative; }
.hnb-picker__item::before{ content:""; position:absolute; left:5px; top:9px; bottom:9px; width:3px; border-radius:2px; background:var(--rule-strong); }
.hnb-picker__item[data-lic="confirmed"]::before{ background:var(--gold); }
.hnb-picker__item[data-lic="licensed"]::before{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); }
.hnb-picker__item:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.08); }
.hnb-picker__name{ font-family:'Noto Serif JP',serif; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hnb-picker__n{ font-family:'Bebas Neue',sans-serif; color:var(--ink-dim); font-size:13px; flex:0 0 auto; }
.hnb-picker__none{ color:var(--ink-dim); font-size:12.5px; padding:6px 4px; }
.hnb-picker__new{ padding:11px; border-radius:6px; border:1px dashed var(--rule-strong); background:transparent; color:var(--gold); font-weight:700; font-size:13px; cursor:pointer; }
.hnb-picker__new:hover{ background:rgba(202,164,78,.08); }
.hnb-picker__move{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); padding:2px; cursor:pointer; }
.hnb-picker__move input{ accent-color:var(--gold); width:16px; height:16px; }
.hnb-picker__close{ padding:9px; border-radius:6px; border:none; background:transparent; color:var(--ink-dim); font-size:13px; cursor:pointer; }
.hnb-picker__close:hover{ color:var(--gold); }

/* ---- 空の章ヘルパー ---- */
.hnb-empty-chapter{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:48px 30px; min-height:60%; }
.hnb-empty-chapter__mark{ font-size:34px; color:var(--gold); opacity:.6; }
.hnb-empty-chapter__lead{ font-family:'Noto Serif JP',serif; font-size:17px; color:var(--ink); }
.hnb-empty-chapter__sub{ color:var(--ink-dim); font-size:13px; line-height:1.8; max-width:320px; }
.hnb-empty-chapter__cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ---- ドラッグ＆ドロップ（曲→章へ移動） ---- */
.hnb-row[draggable="true"]{ cursor:grab; }
.hnb-row--dragging{ opacity:.45; }
.hnb-chapter.hnb-drop-hover,.hnb-newchapter.hnb-drop-hover{ background:rgba(202,164,78,.18) !important; border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) inset; }

/* ---- トースト ---- */
.hnb-toast{ position:absolute; left:50%; bottom:84px; transform:translate(-50%,8px); z-index:50; opacity:0; pointer-events:none;
  background:rgba(12,22,15,.96); color:var(--ink); border:1px solid var(--rule-strong); border-radius:999px; padding:9px 18px; font-size:13px;
  box-shadow:0 12px 36px -14px rgba(0,0,0,.7); transition:opacity .2s var(--ease), transform .2s var(--ease); white-space:nowrap; max-width:90%; }
.hnb-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---- 質素装丁: ぼかし弱め＋不透明寄り（可読性優先） ---- */
#hmix-notebook[data-binding="plain"]{ --glass-blur:7px; --glass-tint-a:rgba(13,23,16,.85); --glass-tint-b:rgba(8,15,10,.92); }

/* ---- ガラスOFF（data-glass="0"）/ 透明度を抑える設定 → 不透明フォールバック ---- */
#hmix-notebook[data-glass="0"]{ --glass-tint-a:rgba(10,20,13,.97); --glass-tint-b:rgba(7,13,9,.99); }
#hmix-notebook[data-glass="0"] .hmix-notebook,
#hmix-notebook[data-glass="0"] .hnb-picker__panel,
#hmix-notebook[data-glass="0"] .hnb-preview{ -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (prefers-reduced-transparency: reduce){
  #hmix-notebook{ --glass-tint-a:rgba(10,20,13,.97); --glass-tint-b:rgba(7,13,9,.99);
    background:radial-gradient(120% 120% at 50% 0%, rgba(6,12,8,.82), rgba(2,5,3,.92)); }
  .hmix-notebook, .hnb-picker__panel, .hnb-preview{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ---- reduced-motion（金罫・色変化は残す） ---- */
@media (prefers-reduced-motion: reduce){
  #hmix-notebook, .hmix-notebook{ transition:opacity .08s linear !important; }
  .hmix-notebook{ transform:none !important; }
  .hnb-picker, .hnb-toast, .hnb-wizard{ transition:opacity .08s linear !important; }
  .hnb-wizard.is-open .hnb-wizard__panel{ transform:none !important; }
}

/* ===================================================================
 * 申請ウィザード（4ステップ：曲→ライセンス→情報→確認→決済）
 * =================================================================== */
.hnb-wizard{ position:absolute; inset:0; z-index:48; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s var(--ease); }
.hnb-wizard.is-open{ opacity:1; pointer-events:auto; }
.hnb-wizard__backdrop{ position:absolute; inset:0; background:rgba(3,6,4,.72); }
.hnb-wizard__panel{ position:relative; width:min(560px,92%); max-height:88%; display:flex; flex-direction:column;
  background:linear-gradient(155deg, rgba(13,23,16,.78), rgba(7,13,9,.88)); border:1px solid var(--rule-strong); border-radius:12px;
  -webkit-backdrop-filter:blur(18px) saturate(1.18); backdrop-filter:blur(18px) saturate(1.18);
  box-shadow:0 36px 90px -22px rgba(0,0,0,.82), 0 0 0 1px rgba(202,164,78,.16);
  transform:translateY(10px); transition:transform .2s var(--ease); }
.hnb-wizard.is-open .hnb-wizard__panel{ transform:none; }

/* ヘッダ：ステップインジケータ */
.hnb-wizard__head{ display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--rule); }
.hnb-wizard__steps{ display:flex; align-items:center; gap:4px; flex:1 1 auto; flex-wrap:wrap; }
.hnb-wizard__step{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-dim); white-space:nowrap; }
.hnb-wizard__step b{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--rule-strong); font-family:'Bebas Neue',sans-serif; font-size:12px; color:var(--ink-dim); }
.hnb-wizard__step.is-on{ color:var(--gold); }
.hnb-wizard__step.is-on b{ border-color:var(--gold); color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); }
.hnb-wizard__step.is-done b{ border-color:var(--rule-strong); color:var(--gold); }
.hnb-wizard__arrow{ color:var(--rule-strong); font-size:13px; }
.hnb-wizard__x{ flex:0 0 auto; background:transparent; border:1px solid var(--rule); color:var(--ink-dim); width:30px; height:30px;
  border-radius:6px; cursor:pointer; font-size:14px; }
.hnb-wizard__x:hover{ color:var(--gold); border-color:var(--rule-strong); }

/* 本文 */
.hnb-wizard__body{ flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.wz-lead{ color:var(--ink-dim); font-size:13px; line-height:1.7; margin:0; }

/* Step1: 曲リスト */
.wz-tracklist{ display:flex; flex-direction:column; gap:4px; }
.wz-trackrow{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:7px; cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); min-height:48px; }
.wz-trackrow:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.06); }
.wz-trk{ width:18px; height:18px; accent-color:var(--gold); cursor:pointer; flex:0 0 auto; }
.wz-trackrow__title{ font-family:'Noto Serif JP',serif; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Step2: ライセンスカード */
.wz-cards{ display:flex; flex-direction:column; gap:9px; }
.wz-card{ position:relative; text-align:left; display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:9px;
  background:rgba(255,255,255,.03); border:1px solid var(--rule); color:var(--ink); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease); }
.wz-card:hover{ border-color:var(--rule-strong); background:rgba(202,164,78,.06); }
.wz-card.is-sel{ border-color:var(--gold); background:rgba(202,164,78,.1); box-shadow:0 0 0 1px var(--gold) inset; }
.wz-card__badge{ position:absolute; top:-9px; right:12px; font-size:10px; letter-spacing:.05em; padding:2px 9px; border-radius:10px;
  color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); font-weight:700; }
.wz-card__name{ font-family:'Noto Serif JP',serif; font-size:15px; }
.wz-card__price{ font-family:'Bebas Neue',sans-serif; font-size:21px; letter-spacing:.02em; color:var(--gold); }
.wz-card__price small{ font-family:'Noto Sans JP',sans-serif; font-size:11px; color:var(--ink-dim); letter-spacing:0; }
.wz-card__desc{ font-size:12px; color:var(--ink-dim); line-height:1.6; }
.wz-exit{ font-size:11.5px; color:var(--ink-dim); line-height:1.7; margin:2px 0 0; }
.wz-exit a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.wz-usage{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.wz-usage__label{ font-size:12px; color:var(--ink-dim); }
.wz-usage__sel, .wz-input{ width:100%; box-sizing:border-box; padding:11px 12px; border-radius:7px; background:rgba(5,10,7,.6);
  border:1px solid var(--rule-strong); color:var(--ink); font-size:14px; font-family:inherit; }
.wz-usage__sel:focus, .wz-input:focus{ outline:none; border-color:var(--gold); }

/* Step3: フォーム */
.wz-field{ display:flex; flex-direction:column; gap:6px; }
.wz-field__lbl{ font-size:12.5px; color:var(--ink-dim); }
.wz-field__lbl i{ color:var(--gold); font-style:normal; }

/* Step4: サマリ */
.wz-sum{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--rule); border-radius:9px; overflow:hidden; }
.wz-sum__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; background:rgba(255,255,255,.025); }
.wz-sum__row span{ font-size:12.5px; color:var(--ink-dim); flex:0 0 auto; }
.wz-sum__row b{ font-family:'Noto Serif JP',serif; font-size:14px; color:var(--ink); font-weight:400; text-align:right; }
.wz-sum__total{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px;
  background:rgba(202,164,78,.1); border-top:1px solid var(--rule-strong); }
.wz-sum__total span{ font-size:13px; color:var(--gold); }
.wz-sum__total b{ font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:.02em; color:var(--gold); }
.wz-note{ font-size:12px; color:var(--ink-dim); line-height:1.7; margin:0; }
.wz-err{ font-size:12.5px; color:#f0a8a0; line-height:1.6; padding:10px 12px; border:1px solid rgba(240,120,110,.4); border-radius:7px; background:rgba(60,16,12,.4); }

/* フッタ：戻る / 合計 / 次へ */
.hnb-wizard__foot{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--rule); }
.hnb-wizard__back{ flex:0 0 auto; background:transparent; border:1px solid var(--rule); color:var(--ink-dim); padding:11px 16px;
  border-radius:7px; cursor:pointer; font-size:13px; font-family:inherit; }
.hnb-wizard__back:hover{ color:var(--gold); border-color:var(--rule-strong); }
.hnb-wizard__total{ flex:1 1 auto; text-align:right; font-family:'Bebas Neue',sans-serif; font-size:18px; color:var(--gold); letter-spacing:.02em; }
.hnb-wizard__total .wz-total__lbl{ font-family:'Noto Sans JP',sans-serif; font-size:11px; color:var(--ink-dim); letter-spacing:0; margin-right:4px; }
.hnb-wizard__next{ flex:0 0 auto; padding:12px 22px; border-radius:8px; border:1px solid var(--gold); cursor:pointer;
  color:#0a140d; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); font-weight:700; font-size:14px; font-family:inherit;
  box-shadow:0 6px 20px -8px rgba(231,202,124,.6); }
.hnb-wizard__next:hover{ filter:brightness(1.06); }
.hnb-wizard__next:disabled{ cursor:default; box-shadow:none; }

/* モバイル：全画面ボトムシート */
@media (max-width:760px){
  .hnb-wizard{ align-items:flex-end; }
  .hnb-wizard__panel{ width:100%; max-height:94%; border-radius:16px 16px 0 0; transform:translateY(100%); }
  .hnb-wizard.is-open .hnb-wizard__panel{ transform:none; }
  .hnb-wizard__foot{ padding-bottom:calc(13px + env(safe-area-inset-bottom)); }
  .hnb-wizard__total{ font-size:16px; }
  .hnb-wizard__next{ padding:13px 18px; }
}
@media (prefers-reduced-transparency: reduce){
  .hnb-wizard__panel{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:linear-gradient(155deg, rgba(11,20,14,.98), rgba(6,12,8,.99)); }
}

/* ===== 持ち込んだ曲（PCからのアップロード・この端末に保存） ===== */
.hnb-spine__h--local{ margin-top:18px; }
.hnb-chapter--local .hnb-chapter__name::before{ content:"♪ "; color:var(--gold); }
.hnb-upload{
  margin:14px 18px 10px; padding:22px 18px; text-align:center; border-radius:12px;
  border:1.5px dashed rgba(231,202,124,.5); background:rgba(202,164,78,.04);
  transition:border-color .2s, background .2s;
}
.hnb-upload.is-drag{ border-color:var(--gold-bright,#ffcf6e); background:rgba(202,164,78,.12); }
.hnb-upload.is-full{ border-style:solid; border-color:rgba(202,164,78,.22); }
.hnb-upload__mark{ font-size:20px; color:var(--gold); margin-bottom:6px; }
.hnb-upload__lead{ font-family:'Noto Serif JP',serif; font-size:.98rem; color:var(--ink); margin-bottom:10px; }
.hnb-upload__btn{
  font-family:inherit; font-size:13px; font-weight:700; color:#0a140d; cursor:pointer;
  background:linear-gradient(180deg,var(--gold-bright,#ffcf6e),var(--gold,#caa44e));
  border:1px solid var(--gold,#caa44e); border-radius:8px; padding:9px 20px;
  box-shadow:0 6px 18px -8px rgba(231,202,124,.55);
}
.hnb-upload__btn:hover{ filter:brightness(1.06); }
.hnb-upload__sub{ font-size:11.5px; color:var(--ink-dim,#a8bcb0); margin-top:9px; line-height:1.8; }
.hnb-upload__empty{ padding:26px 18px; text-align:center; font-size:13px; color:var(--ink-dim,#a8bcb0); }
.hnb-row--local{ display:grid; grid-template-columns:38px 1fr auto; gap:12px; cursor:default; }
.hnb-row--local .hnb-row__play{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(202,164,78,.4); cursor:pointer;
  background:rgba(202,164,78,.08); color:var(--gold,#caa44e); font-size:12px; display:grid; place-items:center;
}
.hnb-row--local .hnb-row__play:hover{ background:rgba(202,164,78,.2); }
.hnb-row--local .hnb-row__del{
  width:30px; height:30px; border-radius:50%; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--ink-dim,#a8bcb0); font-size:13px;
}
.hnb-row--local .hnb-row__del:hover{ color:#ff9c8a; border-color:rgba(255,120,100,.4); }

/* ===== タグ付けデスク（持ち込んだ曲・H/MIX語彙は無料／一般タグはスタジオパス） ===== */
.hnb-ltags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; align-items:center; }
.hnb-ltag{ font-size:10.5px; line-height:1; color:var(--gold,#caa44e); border:1px solid rgba(202,164,78,.35);
  border-radius:999px; padding:4px 9px; background:rgba(202,164,78,.07); }
.hnb-ltag--empty{ color:var(--ink-dim,#a8bcb0); border-color:rgba(255,255,255,.12); background:transparent; }
.hnb-ltag--edit{ cursor:pointer; color:var(--ink,#eef0ea); border-style:dashed; background:transparent;
  font-family:inherit; transition:border-color .2s, background .2s; }
.hnb-ltag--edit:hover{ border-color:var(--gold,#caa44e); background:rgba(202,164,78,.1); }
.hnb-tagdesk{ margin:0 18px 10px; padding:14px 16px 16px; border:1px solid rgba(202,164,78,.25); border-radius:12px;
  background:rgba(8,16,11,.5); }
.hnb-tagdesk__cat{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.26em; color:var(--gold,#caa44e);
  margin:10px 0 7px; display:flex; align-items:center; gap:10px; }
.hnb-tagdesk__cat:first-child{ margin-top:0; }
.hnb-tagdesk__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.hnb-tchip{ font-family:inherit; font-size:12px; line-height:1; color:var(--ink-soft,#cdd6cc); cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 12px; background:rgba(255,255,255,.03);
  transition:color .18s, border-color .18s, background .18s; }
.hnb-tchip:hover{ border-color:rgba(202,164,78,.55); color:var(--ink,#eef0ea); }
.hnb-tchip.on{ color:#10231a; background:linear-gradient(180deg,var(--gold-bright,#ffcf6e),var(--gold,#caa44e));
  border-color:var(--gold,#caa44e); font-weight:700; }
.hnb-tagdesk__cat--locked{ color:var(--ink-dim,#a8bcb0); }
.hnb-lock{ font-family:'Noto Sans JP',sans-serif; font-size:10.5px; letter-spacing:.04em; color:var(--ink-dim,#a8bcb0); }
.hnb-tchip--locked{ opacity:.45; cursor:pointer; border-style:dashed; }
.hnb-tchip--locked:hover{ opacity:.7; border-color:rgba(202,164,78,.4); color:var(--ink-soft,#cdd6cc); }
.hnb-tagbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 18px 8px; padding:12px 16px;
  border:1px solid rgba(202,164,78,.2); border-radius:10px; background:rgba(202,164,78,.04); }
.hnb-tagbar__lbl{ font-size:12px; color:var(--ink,#eef0ea); margin-right:2px; }
.hnb-tagbar button{ font-family:inherit; font-size:11.5px; font-weight:600; color:var(--gold,#caa44e); cursor:pointer;
  border:1px solid rgba(202,164,78,.4); border-radius:8px; padding:6px 13px; background:transparent; transition:.2s; }
.hnb-tagbar button:hover{ background:rgba(202,164,78,.12); }
.hnb-tagbar__note{ flex-basis:100%; font-size:10.5px; color:var(--ink-dim,#a8bcb0); }

/* スタジオパス導線・鍵ボタン */
.hnb-tagbar__locked{ opacity:.55; border-style:dashed !important; }
.hnb-tagbar__pass{ flex-basis:100%; font-size:11.5px; color:var(--gold,#caa44e); text-decoration:none;
  letter-spacing:.03em; margin-top:2px; transition:opacity .2s; }
.hnb-tagbar__pass:hover{ opacity:.8; text-decoration:underline; }

/* /assets/css/fav-notebook-herbarium.css?v=20260906journey1 */
/*
 * Music Notebook — Herbarium production theme
 * Load after fav-notebook.css. The production DOM/API stays intact; this file
 * supplies the approved leather, parchment, botanical and alchemy visual layer.
 */

#hmix-notebook {
  --gold: #a87921;
  --gold-bright: #d3aa4d;
  --rule: rgba(92, 75, 44, .24);
  --rule-strong: rgba(139, 102, 35, .48);
  --ink: #2d2a20;
  --ink-dim: #716b58;
  --green: #54785f;
  --green-soft: #436b51;
  --paper: #f4edd5;
  --paper-light: #fbf7e8;
  --leather: #324533;
  --leather-dark: #1f3026;
  --leather-warm: #594b32;
  --wax: #8f3a36;
  background:
    radial-gradient(circle at 50% 18%, rgba(37, 69, 52, .35), transparent 46%),
    linear-gradient(135deg, rgba(4, 13, 10, .92), rgba(10, 27, 21, .88));
}

#hmix-notebook .hmix-notebook {
  width: min(1440px, 94vw);
  height: min(88vh, 900px);
  min-height: 610px;
  grid-template-columns: 230px minmax(440px, 1fr) 330px;
  grid-template-rows: auto 1fr auto;
  color: var(--ink);
  background:
    linear-gradient(rgba(249, 244, 226, .91), rgba(239, 228, 196, .94)),
    url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  border: 1px solid rgba(184, 148, 70, .7);
  border-radius: 20px 20px 14px 14px;
  box-shadow:
    0 42px 120px -26px rgba(0, 0, 0, .78),
    0 0 0 1px rgba(244, 225, 157, .14),
    inset 0 0 70px rgba(90, 63, 25, .12);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

#hmix-notebook .hmix-notebook::before {
  inset: 7px;
  border: 1px solid rgba(123, 94, 39, .42);
  border-radius: 14px 14px 9px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 226, .48),
    inset 0 0 0 4px rgba(79, 63, 35, .13);
}

#hmix-notebook .hmix-notebook::after {
  inset: 12px;
  opacity: .72;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 1px 42px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 42px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 1px 42px no-repeat;
}

/* Leather header */
#hmix-notebook .hnb-head {
  position: relative;
  padding: 17px 24px 15px;
  color: #f6efd9;
  border-bottom: 1px solid rgba(215, 187, 112, .4);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 36%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #42543b, #263c2e 58%, #314635);
  box-shadow: inset 0 -10px 22px rgba(10, 24, 17, .18);
}

#hmix-notebook .hnb-head__kicker {
  color: #d8bc72;
  font-family: Georgia, "Times New Roman", serif;
}

#hmix-notebook .hnb-head__title {
  color: #fff8e3;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

#hmix-notebook .hnb-head__count { color: #e1c274; }

#hmix-notebook .hnb-search {
  width: min(310px, 28vw);
  color: #fff9e9;
  background: rgba(18, 35, 25, .46);
  border-color: rgba(221, 198, 132, .4);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .2);
}

#hmix-notebook .hnb-search::placeholder { color: rgba(248, 239, 214, .7); }
#hmix-notebook .hnb-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #f8edd2;
  border-color: rgba(225, 202, 139, .42);
}

/* Leather index */
#hmix-notebook .hnb-spine {
  padding: 18px 13px 20px;
  color: #eee4c8;
  border-right: 1px solid rgba(79, 60, 29, .5);
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 28%, rgba(0,0,0,.17)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #455740, #2e432f 58%, #263a2b);
  box-shadow: inset -14px 0 25px -18px #0f1c13;
}

#hmix-notebook .hnb-spine__h { color: #cbbf97; }

#hmix-notebook .hnb-chapter {
  width: calc(100% - 4px);
  margin: 0 4px 8px 0;
  padding: 12px 12px 12px 18px;
  color: #f3ead0;
  border: 1px solid rgba(226, 207, 152, .15);
  border-radius: 4px 12px 12px 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 45%),
    rgba(55, 50, 36, .36);
  box-shadow: inset -8px 0 18px rgba(0,0,0,.1);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

#hmix-notebook .hnb-chapter::before {
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 4px;
  background: #81775b;
}

#hmix-notebook .hnb-chapter:hover {
  transform: translateX(3px);
  background: rgba(105, 90, 54, .38);
}

#hmix-notebook .hnb-chapter.is-active {
  transform: translateX(5px);
  color: #fff8df;
  border-color: rgba(221, 183, 90, .54);
  background: linear-gradient(90deg, rgba(170, 126, 43, .3), rgba(72, 69, 45, .48));
  box-shadow: inset 4px 0 0 #bd9139, 0 7px 18px rgba(12, 24, 16, .18);
}

#hmix-notebook .hnb-chapter__name {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

#hmix-notebook .hnb-chapter__meta { color: #c6bea4; }
#hmix-notebook .hnb-chapter__meta b { color: #e2c878; }

#hmix-notebook .hnb-newchapter {
  color: #dfd5b9;
  border-color: rgba(222, 199, 132, .32);
}

/* Studio Pass — visible value proposition, but quieter than the main task */
#hmix-notebook .hnb-studio-pass {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 20px 3px 2px;
  padding: 13px 13px 12px;
  color: #f5ead0;
  text-decoration: none;
  border: 1px solid rgba(216, 179, 81, .38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 15%, rgba(214, 177, 80, .18), transparent 38%),
    linear-gradient(145deg, rgba(30, 47, 34, .9), rgba(70, 57, 36, .78));
  box-shadow: 0 12px 26px rgba(11, 22, 15, .18), inset 0 1px rgba(255,255,255,.06);
}

#hmix-notebook .hnb-studio-pass__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#hmix-notebook .hnb-studio-pass__top b { font: 600 10px/1 Georgia, serif; letter-spacing: .16em; color: #dec57e; }
#hmix-notebook .hnb-studio-pass__top em { padding: 4px 7px; color: #2b2a1f; background: #ead893; border-radius: 999px; font: 700 10px/1 sans-serif; font-style: normal; }
#hmix-notebook .hnb-studio-pass strong { font: 600 13px/1.5 "Yu Mincho", serif; }
#hmix-notebook .hnb-studio-pass ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
#hmix-notebook .hnb-studio-pass li { position: relative; padding-left: 13px; color: #e5dcc2; font-size: 10.5px; line-height: 1.55; }
#hmix-notebook .hnb-studio-pass li::before { content: "✦"; position: absolute; left: 0; top: 0; color: #d9ba68; font-size: 8px; }
#hmix-notebook .hnb-studio-pass > span:not(.hnb-studio-pass__top) { color: #d9d0b8; font-size: 10.5px; line-height: 1.7; }
#hmix-notebook .hnb-studio-pass i { color: #e5cc83; font-size: 11px; font-style: normal; }
#hmix-notebook .hnb-studio-pass:hover { border-color: rgba(232, 202, 117, .7); transform: translateY(-1px); }

/* Paper pages */
#hmix-notebook .hnb-pages {
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(rgba(250, 246, 229, .74), rgba(244, 235, 208, .78)),
    url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  box-shadow: inset 18px 0 28px -28px rgba(62, 46, 20, .6);
}

#hmix-notebook .hnb-pages::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: 4%;
  width: min(32vw, 330px);
  aspect-ratio: 1;
  border: 1px solid rgba(104, 82, 43, .13);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 17%, rgba(105, 83, 43, .12) 17.5% 18%, transparent 18.5% 33%, rgba(105,83,43,.1) 33.5% 34%, transparent 34.5%),
    repeating-conic-gradient(from 15deg, rgba(105,83,43,.09) 0 1deg, transparent 1deg 30deg);
  opacity: .75;
  pointer-events: none;
}

#hmix-notebook .hnb-pages::after {
  content: "FIELD NOTES   ·   FOLIO 04";
  position: absolute;
  z-index: -1;
  right: 28px;
  bottom: 12px;
  color: rgba(69, 59, 40, .42);
  font: 9px/1 Georgia, serif;
  letter-spacing: .24em;
  pointer-events: none;
}

#hmix-notebook .hnb-select-tools {
  color: #403b2d;
  border-bottom-color: rgba(91, 72, 37, .22);
  background: rgba(247, 240, 216, .92);
  box-shadow: 0 7px 18px rgba(84, 64, 28, .08);
}

#hmix-notebook .hnb-select-tools__label { color: #6f5423; }
#hmix-notebook .hnb-select-tools__btn { color: #3c392e; background: rgba(255,255,255,.46); border-color: rgba(91,72,37,.3); }

#hmix-notebook .hnb-row {
  position: relative;
  z-index: 1;
  min-height: 62px;
  color: var(--ink);
  border-bottom-color: rgba(87, 70, 39, .13);
}

#hmix-notebook .hnb-row:hover { background: rgba(94, 121, 91, .085); }
#hmix-notebook .hnb-row.is-active { background: rgba(80, 116, 86, .11); }
#hmix-notebook .hnb-row.is-selected {
  background: rgba(177, 132, 47, .095);
  box-shadow: inset 4px 0 0 #b6862f, inset 0 0 0 1px rgba(169, 126, 43, .2);
}
#hmix-notebook .hnb-row.is-playing { background: rgba(80, 120, 89, .13); }
#hmix-notebook .hnb-row.is-playing .hnb-row__title { color: #2e6846; }

#hmix-notebook .hnb-check {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin: 0;
  border: 2px solid #817b67;
  border-radius: 6px;
  background: rgba(255, 253, 242, .84);
  box-shadow: inset 0 1px 2px rgba(52, 42, 24, .08);
}

#hmix-notebook .hnb-check::after {
  content: "✓";
  color: #fff9e8;
  font: 800 15px/1 sans-serif;
  transform: scale(0);
  transition: transform .12s ease;
}

#hmix-notebook .hnb-check:checked { background: #aa7926; border-color: #805812; }
#hmix-notebook .hnb-check:checked::after { transform: scale(1); }
#hmix-notebook .hnb-check:focus-visible { outline: 3px solid rgba(40, 104, 69, .28); outline-offset: 2px; }

#hmix-notebook .hnb-row__title { color: #29271f; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
#hmix-notebook .hnb-row__tags, #hmix-notebook .hnb-row__dur { color: #756f5d; }
#hmix-notebook .hnb-iconbtn { color: #716b59; }
#hmix-notebook .hnb-fav.is-on { color: #a37526; }

#hmix-notebook .hnb-badge { color: #6d6653; border-color: rgba(91,72,37,.3); background: rgba(255,255,255,.32); }
#hmix-notebook .hnb-badge[data-lic="licensed"] {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #f7e7ce;
  background: radial-gradient(circle at 35% 30%, #b1584e, var(--wax) 60%, #6e2828);
  border: 2px solid #73312f;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(52, 29, 20, .25), inset 0 0 0 2px rgba(255, 214, 178, .12);
  font-size: 0;
}
#hmix-notebook .hnb-badge[data-lic="licensed"]::after { content: "済"; font: 700 11px/1 "Yu Mincho", serif; }

/* Specimen detail */
#hmix-notebook .hnb-preview {
  gap: 13px;
  color: var(--ink);
  border-left-color: rgba(92, 75, 44, .24);
  background:
    linear-gradient(rgba(250, 246, 230, .86), rgba(239, 229, 203, .9)),
    url("/assets/images/music-notebook-herbarium-v1.webp") 78% center / cover;
  box-shadow: inset 16px 0 25px -26px rgba(68, 48, 22, .58);
}

#hmix-notebook .hnb-preview::before {
  content: "SELECTED TRACK  /  選択中の曲";
  color: #82724e;
  font: 9px/1.2 Georgia, "Yu Mincho", serif;
  letter-spacing: .18em;
}

#hmix-notebook .hnb-preview__title { color: #28261e; font-family: "Yu Mincho", serif; font-size: 19px; }
#hmix-notebook .hnb-preview__tags, #hmix-notebook .hnb-preview__empty, #hmix-notebook .hnb-preview__sect { color: #746d59; }
#hmix-notebook .hnb-wave span { background: linear-gradient(180deg, #a37b2d, rgba(66, 108, 77, .62)); }
#hmix-notebook .hnb-memo { color: #322f25; background: rgba(255, 252, 238, .56); border-color: rgba(91, 72, 37, .3); }
#hmix-notebook .hnb-ab__btn, #hmix-notebook .hnb-addch-one { color: #373328; background: rgba(255,255,255,.36); border-color: rgba(91,72,37,.27); }
#hmix-notebook .hnb-apply-one { color: #775820; border-color: rgba(145, 104, 31, .5); }

/* Footer: restrained brass hierarchy */
#hmix-notebook .hnb-foot {
  color: #f3ead1;
  border-top-color: rgba(209, 179, 103, .36);
  background:
    linear-gradient(0deg, rgba(22, 42, 29, .98), rgba(48, 69, 49, .95)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px);
}

#hmix-notebook .hnb-apply-actions { grid-template-columns: 1fr 1fr; }
#hmix-notebook .hnb-download-one, #hmix-notebook .hnb-usage-one { min-height:44px; padding:10px; color:var(--ink); background:rgba(192,159,82,.12); border:1px solid rgba(140,112,60,.4); border-radius:8px; cursor:pointer; }
#hmix-notebook .hnb-cta { min-height: 48px; padding: 12px 14px; border-radius: 10px; font-size: 13px; box-shadow: none; }
#hmix-notebook .hnb-cta--download { color: #f1ead8; background: rgba(255,255,255,.06); border-color: rgba(229, 214, 173, .25); }
#hmix-notebook .hnb-cta--cue { color: #f0e4c3; background: rgba(192, 159, 82, .12); border-color: rgba(219, 190, 111, .36); }
#hmix-notebook .hnb-cta--selected { color: #2e2a1e; background: linear-gradient(180deg, #ddc06f, #b68832); border-color: #e2c875; }
#hmix-notebook .hnb-cta__sub { color: #d2c8ab; }
#hmix-notebook .hnb-bulk { color: #f6ecd2; background: rgba(38, 55, 39, .98); border-color: rgba(219,190,111,.48); }
#hmix-notebook .hnb-bulk__btn { color: #f4ead0; }

/* Production child surfaces inherit the paper/leather palette */
#hmix-notebook .hnb-picker__panel,
#hmix-notebook .hnb-wizard__panel {
  color: var(--ink);
  background:
    linear-gradient(rgba(249, 244, 225, .95), rgba(238, 227, 198, .97)),
    url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  border-color: rgba(129, 91, 26, .5);
}
#hmix-notebook .hnb-picker__head,
#hmix-notebook .hnb-picker__item,
#hmix-notebook .wz-card,
#hmix-notebook .wz-trackrow,
#hmix-notebook .wz-sum__row { color: #302d23; background: rgba(255,255,255,.35); }
#hmix-notebook .wz-input,
#hmix-notebook .wz-usage__sel { color: #302d23; background: rgba(255,252,238,.65); }

@media (max-width: 960px) and (min-width: 761px) {
  #hmix-notebook .hmix-notebook { grid-template-columns: 205px minmax(390px, 1fr) 285px; }
}

@media (max-width: 760px) {
  #hmix-notebook { background: linear-gradient(180deg, rgba(13, 34, 25, .9), rgba(7, 19, 14, .96)); }
  #hmix-notebook .hmix-notebook {
    width: 100vw;
    height: 94dvh;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    border-radius: 18px 18px 0 0;
    background: #f5eed7;
  }
  #hmix-notebook .hnb-head { padding: 12px 14px; }
  #hmix-notebook .hnb-search { width: 100%; }
  #hmix-notebook .hnb-spine {
    padding: 9px 11px;
    gap: 7px;
    background: linear-gradient(90deg, #334936, #263d2e);
  }
  #hmix-notebook .hnb-chapter { width: auto; margin: 0; padding: 9px 13px 9px 17px; border-radius: 7px 12px 12px 7px; }
  #hmix-notebook .hnb-chapter.is-active { transform: none; }
  #hmix-notebook .hnb-newchapter { color: #e2d7b8; }
  #hmix-notebook .hnb-studio-pass {
    flex: 0 0 210px;
    margin: 0;
    padding: 9px 11px;
    gap: 3px;
    border-radius: 9px;
  }
  #hmix-notebook .hnb-studio-pass > span:not(.hnb-studio-pass__top),
  #hmix-notebook .hnb-studio-pass ul,
  #hmix-notebook .hnb-studio-pass i { display: none; }
  #hmix-notebook .hnb-studio-pass strong { font-size: 11.5px; }
  #hmix-notebook .hnb-pages {
    background:
      linear-gradient(rgba(250, 246, 231, .9), rgba(241, 232, 207, .92)),
      url("/assets/images/music-notebook-herbarium-v1.webp") center / cover;
  }
  #hmix-notebook .hnb-pages::before { width: 210px; opacity: .38; right: -40px; }
  #hmix-notebook .hnb-pages::after { display: none; }
  #hmix-notebook .hnb-select-tools { padding: 7px 11px; }
  #hmix-notebook .hnb-row { min-height: 58px; padding: 9px 12px; gap: 8px; }
  #hmix-notebook .hnb-check { width: 22px; height: 22px; }
  #hmix-notebook .hnb-badge[data-lic="licensed"] { width: 30px; height: 30px; }
  #hmix-notebook .hnb-preview {
    color: var(--ink);
    background:
      linear-gradient(rgba(250,246,230,.95), rgba(239,229,203,.97)),
      url("/assets/images/music-notebook-herbarium-v1.webp") 70% center / cover;
    border-top-color: rgba(129, 91, 26, .54);
  }
  #hmix-notebook .hnb-foot { padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  #hmix-notebook .hnb-apply-actions { grid-template-columns: 1fr 1.08fr; }
  #hmix-notebook .hnb-cta--download { display: block; }
  #hmix-notebook .hnb-cta { min-height: 45px; padding: 10px 8px; font-size: 12px; }
  #hmix-notebook .hnb-cta__sub { margin-top: 5px; font-size: 11px; white-space:normal; overflow-wrap:anywhere; line-height:1.6; }
}

@media (prefers-reduced-motion: reduce) {
  #hmix-notebook .hnb-chapter,
  #hmix-notebook .hnb-studio-pass { transition: none; }
}