/* ZENN 人類圖 bodygraph 共用樣式（單盤頁 / 合盤頁共用）。
 * 自帶配色（金 #d4b675 主題），不依賴各頁 CSS 變數 → 三頁皆可直接 link。
 * 結構由 frontend/bodygraph.js 的 renderBodygraph() 產生。 */

/* —— 卡片外框（單盤頁用；合盤頁沿用各自 glass-panel 外框） —— */
.bg-card { margin-top: var(--sp-4, 1rem); }
.bg-card__head {
    display: flex; align-items: baseline; gap: 0.6rem;
    flex-wrap: wrap; margin-bottom: 0.7rem;
}
.bg-card__title {
    font-family: 'Outfit', sans-serif; font-size: 0.7rem; letter-spacing: 2px;
    text-transform: uppercase; color: #a89a7d;
}
.bg-card__meta { font-size: 0.78rem; color: #d4b675; letter-spacing: 0.5px; }

/* —— 收合按鈕（個人命盤頁：人類圖／補運皆非主軸，預設收起；左右加寬＋提高辨識度） —— */
.bg-card__toggle {
    margin-left: auto; background: rgba(212, 182, 117, 0.12); color: #d4b675;
    border: 1px solid rgba(212, 182, 117, 0.55); border-radius: 3px;
    padding: 0.38rem 1.5rem; min-width: 7rem; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 1.5px; text-align: center;
    cursor: pointer; font-family: 'Outfit', sans-serif;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bg-card__toggle:hover { color: #ecd9a6; background: rgba(212, 182, 117, 0.22); border-color: #d4b675; }

/* —— SVG 主體 —— */
.bg-svg { width: 100%; height: auto; display: block; max-width: 320px; margin: 0 auto; }

/* 人形輪廓：最底層極淡描邊，讓中心/通道讀成「畫在人身上」，不搶焦點 */
.bg-silhouette { fill: rgba(212, 182, 117, 0.04); stroke: rgba(212, 182, 117, 0.3); stroke-width: 1.4; stroke-linejoin: round; }

/* 通道：全 36 條淡底骨架（對照模板；用偏白冷色調和啟動通道的金色區隔，参考標準人類圖底圖的白線效果）
   ＋啟動高亮（暗色 casing＋亮金，跨填色中心也清楚） */
/* stroke-linejoin: round → 少數帶轉折點的通道（polyline）轉角平滑，不會有尖角 */
.bg-chan      { stroke: rgba(226, 220, 200, 0.2); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.bg-chan--case { stroke: #15151a; stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.bg-chan--on   { stroke: #d4b675; stroke-width: 3;   stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* 9 中心：未定義（描邊）／已定義（填金） */
.bg-center { fill: rgba(255, 255, 255, 0.05); stroke: rgba(212, 182, 117, 0.55); stroke-width: 1.4; }
.bg-center--on { fill: rgba(212, 182, 117, 0.85); stroke: #ecd9a6; stroke-width: 1.3; }

/* 啟動閘門：意識盤（金）／設計盤（紅） */
.bg-gate circle { fill: #15151a; stroke: #d4b675; stroke-width: 1.1; }
.bg-gate text { fill: #ece0c4; font-size: 6px; font-weight: 700; font-family: sans-serif; }
.bg-gate--design circle { stroke: #cc7f6e; }
.bg-gate--design text { fill: #eeb4a8; }

.bg-empty { color: #888; text-align: center; padding: 40px; font-size: 0.8rem; }

/* —— 合盤頁：個人卡內的人體圖外距 —— */
.syn-hd-bodygraph { margin: 0.5rem 0 0.8rem; }

/* —— 圖例 —— */
.bg-legend {
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    margin-top: 0.6rem; font-size: 0.66rem; color: #a89a7d; letter-spacing: 0.5px;
}
.bg-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.bg-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bg-legend .lg-design { background: #15151a; border: 1.5px solid #cc7f6e; }
.bg-legend .lg-person { background: #15151a; border: 1.5px solid #d4b675; }
.bg-legend .lg-center { width: 11px; height: 11px; border-radius: 2px; background: rgba(212, 182, 117, 0.85); }