/* =========================================================
   URATEN BGM ページ（bgm.html／bgm-dl.html で共用）
   css/base.css（色の変数・ヘッダー・見出し・ボタン・フッター）のあとに読み込む。
   一覧・絞り込み・試聴の部品（.bgm-*）は js/bgm.js、合言葉ゲートと DL ボタンは js/bgm-dl.js が組み立てる。
========================================================= */

/* ---------- ページの枠 ---------- */
.bgm-top{margin-top:30px}
.bgm-catch{margin:-4px 0 12px;font-size:clamp(18px,2.2vw,24px);font-weight:700;letter-spacing:.12em;line-height:1.5}
/* 一覧・ゲートを載せる板 */
.bgm-panel{padding:20px 24px 24px;border-radius:16px;border:1px solid var(--line);background:rgba(14,14,28,.7)}

/* ---- 用途の切替（CM用／トーク用）---- */
.bgm-tabs{display:flex;gap:8px}
.bgm-tab{
  flex:1 1 0;min-height:46px;padding:12px 14px;
  border-radius:99px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--dim);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line2);
  transition:color .18s,background .18s,border-color .18s,box-shadow .18s;
}
.bgm-tab:hover{color:var(--ink);border-color:rgba(255,62,165,.6)}
.bgm-tab.is-on{
  color:#fff;border-color:var(--pink);
  background:rgba(255,62,165,.2);
  box-shadow:0 0 16px rgba(255,62,165,.3);
}

/* ---- タグ絞り込み ---- */
.bgm-filter{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.bgm-fgroup{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.bgm-flabel{
  flex:none;min-width:44px;padding-top:8px;
  font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--violet);
}
.bgm-fchips{flex:1 1 200px;display:flex;flex-wrap:wrap;gap:7px}
.bgm-chip-btn{
  min-height:36px;padding:7px 14px;border-radius:99px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--dim);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line2);
  transition:color .18s,background .18s,border-color .18s,box-shadow .18s;
}
.bgm-chip-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.bgm-chip-btn.is-on{
  color:var(--cyan);
  background:rgba(63,227,255,.12);
  border-color:rgba(63,227,255,.55);
  box-shadow:0 0 14px rgba(63,227,255,.16);
}

/* ---- 件数表示・解除 ---- */
.bgm-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:13px;
  border-top:1px solid var(--line);
}
.bgm-count{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--dim);font-variant-numeric:tabular-nums}
.bgm-count b{color:var(--ink);font-family:var(--display);font-size:16px;font-weight:500;margin-right:2px}
.bgm-clear{
  flex:none;min-height:34px;padding:6px 14px;border-radius:99px;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--dim);
  background:transparent;
  border:1px solid var(--line2);
  transition:color .18s,border-color .18s;
}
.bgm-clear:hover{color:var(--cyan);border-color:var(--cyan)}

.bgm-excerpt{margin-top:11px;font-size:11.5px;line-height:1.8;color:var(--dim)}

/* ---- 一覧 ---- */
.bgm-list{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.bgm-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(5,5,12,.45);
  transition:border-color .18s,box-shadow .18s;
}
.bgm-row.is-playing{
  border-color:rgba(255,62,165,.55);
  box-shadow:0 0 22px rgba(255,62,165,.14);
}
.bgm-play{
  flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  font-family:inherit;font-size:14px;line-height:1;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--violet));
  border:1px solid transparent;
  box-shadow:0 0 16px rgba(255,62,165,.3);
  transition:filter .18s,transform .18s;
}
.bgm-play:hover{filter:brightness(1.1)}
.bgm-play:active{transform:scale(.96)}
.bgm-row.is-playing .bgm-play{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#05050c;box-shadow:0 0 16px rgba(63,227,255,.35)}
.bgm-row.is-loading .bgm-play{
  background:rgba(255,255,255,.10);color:var(--dim);
  border-color:var(--line2);box-shadow:none;
  animation:bgmPulse 1.1s ease-in-out infinite;
}
@keyframes bgmPulse{0%,100%{opacity:.55}50%{opacity:1}}

.bgm-info{flex:1;min-width:0}
.bgm-name{font-size:13.5px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bgm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.bgm-chip{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:2px 9px;border-radius:99px;white-space:nowrap;
  color:var(--dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.bgm-state{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--cyan)}
.bgm-state.is-error{color:#ff8aa8}
.bgm-time{flex:none;font-family:var(--display);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--dim)}

.bgm-msg{margin-top:14px;font-size:12.5px;line-height:1.9;color:var(--dim)}
.bgm-msg.is-error{color:#ff8aa8}

/* ---- お申込みについて・注意書き ---- */
.bgm-notes{list-style:none;display:flex;flex-direction:column;gap:6px;padding:18px 24px;border-radius:16px;border:1px solid var(--line);background:rgba(14,14,28,.7)}
.bgm-notes li{position:relative;padding-left:16px;font-size:13px;line-height:1.9}
.bgm-notes li::before{content:"";position:absolute;left:2px;top:.8em;width:6px;height:6px;border-radius:50%;border:1px solid var(--violet)}
.bgm-note{margin-top:14px;padding:12px 16px;border-radius:12px;border:1px dashed var(--line2);font-size:12.5px;line-height:1.9;color:var(--dim)}
.bgm-note b{color:var(--ink)}
.bgm-note a,.bgm-gate-help a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.bgm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

@media(max-width:860px){
  .bgm-top{margin-top:22px}
  .bgm-panel{padding:16px 14px 18px}
  .bgm-notes{padding:14px 18px}
}
@media(max-width:400px){
  .bgm-tab{font-size:12px;letter-spacing:.04em}
  .bgm-flabel{min-width:100%;padding-top:0}
  .bgm-row{gap:10px;padding:9px 11px}
  .bgm-play{width:44px;height:44px}
  .bgm-name{font-size:13px}
}

/* =========================================================
   ここから下は bgm-dl.html（原本ダウンロード）専用。
   bgm.html には該当する要素がないため、試聴ページには影響しない。
========================================================= */

/* ---- 合言葉ゲート ---- */
.bgm-gate-label{
  display:block;margin-bottom:8px;
  font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--violet);
}
.bgm-gate-row{display:flex;flex-wrap:wrap;gap:10px}
.bgm-gate-input{
  flex:1 1 220px;min-width:0;min-height:48px;
  padding:12px 16px;border-radius:12px;
  font-family:inherit;letter-spacing:.02em;
  /* 16px 未満だと iOS Safari がフォーカス時に画面を拡大する */
  font-size:16px;
  color:var(--ink);
  background:rgba(5,5,12,.6);
  border:1px solid var(--line2);
  transition:border-color .18s,box-shadow .18s;
}
.bgm-gate-input:focus{
  outline:none;
  border-color:rgba(63,227,255,.55);
  box-shadow:0 0 0 3px rgba(63,227,255,.14);
}
.bgm-gate-btn{flex:none;justify-content:center;min-height:48px;padding:0 24px;font-family:inherit}
.bgm-gate-btn:disabled{opacity:.6;cursor:default}
.bgm-gate-help{margin-top:12px;font-size:12px;line-height:1.9;color:var(--dim)}
.bgm-gate-msg{
  margin-top:12px;
  font-size:12.5px;line-height:1.9;font-weight:700;
  color:#ff8aa8;
}
.bgm-gate-msg.is-ok{color:var(--cyan);font-weight:400}

/* ---- ダウンロードボタン（行内・再生ボタンの隣）---- */
.bgm-dl{
  flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  font-family:inherit;font-size:15px;line-height:1;
  color:var(--cyan);
  background:rgba(63,227,255,.08);
  border:1px solid rgba(63,227,255,.45);
  transition:background .18s,transform .18s,color .18s;
}
.bgm-dl:hover{background:rgba(63,227,255,.18)}
.bgm-dl:active{transform:scale(.96)}
.bgm-dl:disabled{cursor:default}
.bgm-dl.is-busy{
  color:var(--dim);
  background:rgba(255,255,255,.10);
  border-color:var(--line2);
  animation:bgmPulse 1.1s ease-in-out infinite;
}
/* 再生ボタンと隣り合うため、誤タップ防止に間隔を足す */
.bgm-play + .bgm-dl{margin-left:2px}

.bgm-dlstate{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--cyan)}
.bgm-dlstate.is-error{color:#ff8aa8}

@media(max-width:400px){
  .bgm-dl{width:44px;height:44px}
  .bgm-play + .bgm-dl{margin-left:4px}
  .bgm-gate-btn{width:100%}
}