/* /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; }
}