/* ============ レイアウト ============ */
.members-layout{
  display:grid;
  grid-template-columns: 1fr minmax(280px,560px) 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:980px){
  .members-layout{ grid-template-columns:1fr; }
  .color-wheel{ order:1; margin-bottom:12px; }
  .side.left,.side.right{ order:2; }
}

/* ============ 中央画像＆ドット ============ */
.color-wheel{ position:relative; width:100%; max-width:560px; margin:0 auto; }
.color-wheel>img{ width:100%; height:auto; display:block; }
.dot{
  position:absolute; width:18px; height:18px;
  transform:translate(-50%,-50%); transform-origin:center;
  border:2px solid #fff; border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  background:transparent; cursor:pointer; z-index:20;
}
.dot:hover{ transform:translate(-50%,-50%) scale(1.1); }

/* ============ 左右列（ミニカード縦積み） ============ */
.side{ display:flex; flex-direction:column; gap:0; } /* 隙間ゼロ */

/* ミニカード（1行帯） */
.mini-card{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  width:100%; min-height:56px; padding:10px 14px 10px 12px; margin:0;
  border:none; border-radius:0; color:#fff; text-align:left; cursor:pointer;
  position:relative; overflow:hidden;
  clip-path:polygon(0% 0,90% 0,100% 100%,10% 100%); /* 平行四辺形 */
  transform-origin:center;
  background-size:cover; background-position: center var(--bg-y, 50%); background-repeat:no-repeat;
  isolation:isolate;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}
@media (max-width:980px){
  .mini-card{ clip-path:polygon(0% 0,95% 0,100% 100%,5% 100%); }
}

/* 背景グラデで可読性UP */
.mini-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.20));
  z-index:-1;
}

/* 左のカラーバー */
.mini-card .colordot{
  width:24px; height:3px; margin-right:10px; grid-column:1;
}

/* テキスト */
.mini-card .txt{
  color:#fff; font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; grid-column:2;
}
.mini-card strong{ color:#fff; font-weight:800; }

/* ホバー/フォーカス */
.mini-card:hover,
.mini-card:focus-visible,
.mini-card.hover-sync{
  transform:scale(1.2);
  filter:brightness(1.5);
  z-index:3;
}
.mini-card:active{ transform:scale(1.02); }
.mini-card:focus-visible{
  box-shadow:0 0 0 2px rgba(0,0,0,.5) inset, 0 0 0 2px var(--acc);
}
.side .mini-card:last-child{ border-bottom:none; }

/* ============ モーダル（詳細カード） ============ */
.member-card{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(1);
  width:min(760px,92vw); max-height:min(90vh,100dvh - 40px); overflow-y:auto;
  background:transparent; border:0; box-shadow:none; padding:0; z-index:200;
}
.member-card.hidden{ display:none; }

.member-card .card-body{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }

/* アイコン */
.member-card .avatar{
  width:180px; height:180px; object-fit:cover; border:none; background:none; border-radius:10px;
}

/* 区切り線 */
.member-card .hp-rule{ height:2px; background:var(--mcolor,#fff); width:180px; margin:10px auto 8px; }
.member-card .hp-rule.long{ width:100%; height:2px; margin:12px 0; }

/* 名前＋カラーコード */
.member-card .hp-name-row{ display:flex; justify-content:center; align-items:baseline; gap:10px; margin-bottom:6px; }
.member-card .hp-name-row strong{ font-size:20px; font-weight:800; }
.member-card .hp-color code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#cbd5e1; }

/* ソーシャル */
.member-card .hp-social{ display:flex; justify-content:center; gap:12px; margin:6px 0; font-size:1.15rem; }
.member-card .hp-social a{ color:#fff; opacity:.9; }
.member-card .hp-social a:hover{ color:var(--mcolor,#fff); opacity:1; }

/* スタイルタグ（bare） */
.member-card .style-tags.bare{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:2px 0 0; }
.member-card .style-tags.bare .tag{ background:none; border:0; color:#e2e8f0; font-size:13px; padding:0; line-height:1.2; }
.member-card .style-tags.bare .tag + .tag{ position:relative; padding-left:12px; margin-left:12px; }
.member-card .style-tags.bare .tag + .tag::before{
  content:""; position:absolute; left:0; top:.1em; width:2px; height:.95em; background:var(--mcolor,#fff);
}

/* 自己紹介 */
.member-card .hp-desc{ margin:8px 0; color:#cbd5e1; font-size:14px; line-height:1.8; white-space:pre-line; }

/* Works */
.member-card .hp-subttl{ margin:8px 0 6px; font-size:14px; font-weight:800; color:#e2e8f0; }
.member-card .hp-works-list{ list-style:disc; margin:0 0 0 1.2em; padding:0; display:grid; gap:4px; }
.member-card .hp-works-list a{ color:#fff; text-decoration:none; }
.member-card .hp-works-list a:hover{ text-decoration:underline; color:var(--mcolor,#fff); }

/* 右上の × */
.member-card .close{
  position:absolute; top:10px; right:12px; font-size:56px; line-height:1;
  background:transparent; border:0; color:#fff; opacity:.9; cursor:pointer;
}
.member-card .close:hover{ opacity:1; transform:scale(1.08); }

/* ============ ステージと配線 ============ */
.members-stage{ position:relative; }
.link-layer{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.link-layer line{ stroke:#fff; stroke-width:2; stroke-linecap:round; opacity:0; transition:opacity .15s ease; }
.link-layer line.active{ opacity:.95; }

/* ============ 右サイド：ホバープレビュー ============ */
.hidden{ display:none !important; }

.hover-preview{
  position:sticky; top:12px; background:transparent; border:0; border-radius:0; padding:0;
  color:#fff; text-align:center; opacity:0; visibility:hidden;
  transition:opacity .14s ease, visibility .14s ease;
  --mcolor:#fff;
}
.hover-preview.is-open{ opacity:1; visibility:visible; }
@media (max-width:980px){ .hover-preview{ display:none; } }

.hp-figure{ margin:0 auto 10px; display:flex; justify-content:center; }
.hover-preview .hp-icon{
  width:160px; height:160px; object-fit:cover; border-radius:10px; border:none; background:none;
}

/* 区切り線（ホバー用） */
.hp-rule{ height:2px; background:var(--mcolor); width:180px; margin:10px auto 8px; }
.hp-rule.long{ width:100%; height:2px; margin:12px 0; }

/* 名前/カラー（ホバー用） */
.hp-name-row{ display:flex; justify-content:center; align-items:baseline; gap:10px; margin-bottom:8px; }
.hp-name-row strong{ font-size:18px; font-weight:800; }
.hp-color code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#cbd5e1; }

/* ソーシャル（ホバー用） */
.hp-social{ display:flex; justify-content:center; gap:12px; margin:8px 0 6px; font-size:1.15rem; }
.hp-social a{ color:#fff; opacity:.9; }
.hp-social a:hover{ color:var(--mcolor); opacity:1; }

/* 得意ジャンル（ホバー用 bare） */
.style-tags.bare{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:4px 0 2px; }
.style-tags.bare .tag{ background:none; border:0; color:#e2e8f0; font-size:13px; padding:0; line-height:1.2; }
.style-tags.bare .tag + .tag{ position:relative; padding-left:12px; margin-left:12px; }
.style-tags.bare .tag + .tag::before{
  content:""; position:absolute; left:-2px; top:.1em; width:2px; height:.95em; background:var(--mcolor);
}

/* 自己紹介（ホバー用） */
.hp-desc{ margin:10px 0; color:#cbd5e1; font-size:13px; line-height:1.7; white-space:pre-line; }

/* Works（ホバー用） */
.hp-subttl{ margin:8px 0 6px; font-size:14px; font-weight:800; color:#e2e8f0; }
.hp-works-list{ text-align:left; list-style:disc; margin:0 0 0 1.2em; padding:0; display:grid; gap:4px; }
.hp-works-list a{ color:#fff; text-decoration:none; }
.hp-works-list a:hover{ text-decoration:underline; color:var(--mcolor); }

/* 左列の余白（任意） */
@media (min-width:981px){ .side.left{ margin-right:8px; } }

/* 画面全体オーバーレイ */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px) saturate(120%); z-index:190; }
.overlay.hidden{ display:none; }

/* リンクなし表示 */
.hp-works-list .nolink{ color:#fff; cursor:default; }
.hp-works-list .nolink:hover{ color:#fff; text-decoration:none; }