/* =========================================================
   arnold.css — Arnold 共通／Members／Bio／Discography
   2025-10-11 compact-fix
   ========================================================= */

/* 0) 変数 */
:root{
  --page-max: 1100px;
  --side-pad: 16px;
  --gap: 18px;
  --border: #ffffff22;
  --glass: #0006;
}

/* 1) 背景 */
body.arnold.arnold-bg{
  background:#0b0f18 url("../img/arnold-bg.png") center center / cover fixed no-repeat !important;
  color:#fff;
}

/* 2) レイアウト（ヘッダーはフル幅／本文だけ中央） */
body.arnold .container{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0;
  box-sizing:border-box;
}
body.arnold main.members-wrap{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding:18px var(--side-pad);
  box-sizing:border-box;
}

/* 3) Hero */
.hero{
  margin:10px 0 16px;
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
}
.hero h1{ font:600 32px/1.2 "Shippori Mincho B1", serif; margin:0; }
.muted{ opacity:.75; font-weight:400; font-size:.9em; }

/* 4) バッジ／UI */
.badge{
  display:inline-block; padding:6px 10px; border-radius:10px;
  border:1px solid #fff3; background:#0007;
  font:600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.badge.updated{ border-color:#6cf; background:#0b2238; }

.subnav{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:8px; border:1px solid #fff2; background:#000a; color:#fff; text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  font-size:14px; line-height:1;
  transition:transform .18s, filter .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 8px 20px rgba(0,0,0,.45); }
.btn.is-active{ border-color:#8cf; filter:brightness(1.06); }
.btn-sm{ padding:6px 10px; font-size:13px; border-radius:7px; }

/* 5) Members（既存） */
.member-row{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:var(--gap); align-items:center;
  margin:18px 0; padding:14px;
  border:1px solid var(--border); border-radius:12px;
  background:var(--glass); backdrop-filter:blur(3px);
}
.member-row.reverse{ grid-template-columns:.9fr 1.1fr; }
.member-media img{
  display:block; width:100%; height:auto;
  border-radius:14px; border:1px solid var(--border); background:#000;
}
.member-bio{ font-size:15px; line-height:1.9; }
.member-bio h2{ font:700 22px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; margin:.2rem 0 .5rem; }
.tagline{ opacity:.85; margin:.25rem 0 .75rem; }
.meta{ display:flex; gap:10px; flex-wrap:wrap; margin:.25rem 0 1rem; }
.chip{ display:inline-block; padding:.25rem .55rem; border:1px solid #ffffff33; border-radius:999px; font-size:12px; opacity:.9; }
.note{ opacity:.75; font-size:13px; }

/* 6) Bio（既存） */
.bio-hero-img{
  display:block; width:100%; max-width:var(--page-max);
  margin:8px auto 20px; border-radius:14px;
  border:1px solid var(--border); background:#000; box-sizing:border-box;
}
.bio-content{
  width:min(100%, 940px);
  margin:0 auto;
  padding:30px 40px;
  background:#0006;
  border:1px solid #ffffff22;
  border-radius:12px;
  font-size:16px; line-height:1.95;
  box-sizing:border-box;
}
.bio-content h2{
  font:700 24px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  margin-top:2.2rem; margin-bottom:1rem;
  padding-bottom:5px; border-bottom:1px solid #ffffff33;
}
.bio-content h2:first-child{ margin-top:0; }
.bio-content p{ margin:.7rem 0 1.5rem; }

/* 7) Discography（カードを常に小型で） */
.discog-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  justify-items:start;             /* 伸びない＝カード幅を維持 */
  align-items:start;
  margin-top:6px;
}
.discog-card{
  /* ★小型カード：画面に応じて 240–320px の幅を維持（1枚でも巨大化しない） */
  width:clamp(240px, 30vw, 320px);
  max-width:100%;
  border:1px solid var(--border); border-radius:12px;
  background:var(--glass); backdrop-filter:blur(3px);
  overflow:visible;                /* ★ポップオーバーを切らない */
  justify-self:start;              /* グリッドの列幅より小さくても左寄せ */
}
.discog-cover{ aspect-ratio:1/1; background:#000; overflow:hidden; }
.discog-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.discog-meta{ padding:10px 12px 12px; }
.discog-title{
  font:700 16px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; margin:2px 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.discog-type{ opacity:.85; font-size:12px; margin:0 0 6px; }
.discog-credits{
  opacity:.78; font-size:12px; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.discog-links{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* Listen メニュー（JS不要／アクセシブル） */
details.listen-menu{ position:relative; }
details.listen-menu > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:7px; border:1px solid #fff2; background:#000a;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  font-size:13px; line-height:1; color:#fff;
  user-select:none;
}
details.listen-menu > summary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 8px 20px rgba(0,0,0,.45); }
summary::-webkit-details-marker{ display:none; } /* Safari/Chrome の▼消し */

/* ポップオーバー本体 */
.listen-popover{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:180px; max-width:260px;
  background:#0a0f1a; border:1px solid var(--border); border-radius:10px;
  padding:8px; box-shadow:0 12px 28px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:20;
}
details.listen-menu[open] .listen-popover{ opacity:1; transform:none; pointer-events:auto; }
.listen-popover a{
  display:block; text-decoration:none; color:#fff; font-size:13px; line-height:1.25;
  padding:8px 10px; border:1px solid #ffffff1f; border-radius:7px;
}
.listen-popover a + a{ margin-top:6px; }
.listen-popover a:hover{ filter:brightness(1.06); border-color:#ffffff33; }

/* 8) レスポンシブ */
@media (max-width:960px){
  .hero h1{ font-size:28px; }
  .member-row,
  .member-row.reverse{ display:flex; flex-direction:column; gap:12px; }
  .member-row.reverse .member-media{ order:-1; }
  .bio-content{ width:100%; padding:20px; font-size:15.5px; }
}
@media (max-width:560px){
  .discog-grid{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
  .discog-card{ width:100%; }                         /* SPはカード幅=列幅でOK */
  /* モバイルは下に展開（はみ出し防止） */
  .listen-popover{ position:static; margin-top:8px; width:100%; box-shadow:0 8px 16px rgba(0,0,0,.45); }
  details.listen-menu > summary{ width:100%; justify-content:center; }
}

/* 9) ToTop／Footer */
.to-top{
  position:fixed; right:1rem; bottom:3rem; z-index:1000;
  width:42px; height:42px; font:600 14px/42px system-ui;
  border:1px solid #fff2; border-radius:10px;
  background:#0007; backdrop-filter:blur(2px); color:#fff;
  box-shadow:0 4px 10px #0005; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform:translateY(-2px); }
footer{
  background:rgba(0,0,0,.7);
  padding:20px 0;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.2);
}
.footer-inner{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:center; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.footer-copy{ font-size:.9rem; color:#ccc; margin:0; }
.to-top-btn{
  display:inline-block; font-size:1rem; color:#ccc; text-decoration:none;
  border:1px solid rgba(255,255,255,.4); padding:6px 10px; border-radius:4px;
  transition:background .3s ease, color .3s ease;
}
.to-top-btn:hover{ background:rgba(255,255,255,.15); color:#fff; }