/* === 1. 變數設定 === */
:root {
    --bg-color: #f8f9fa; --card-bg: #ffffff; --text-main: #333;
    --center-undefined: #ffffff; --stroke-color: #333333;
    --brand-color: #f2ba79;
    --brand-light: #FCE9D0;
    --design-color: #f2ba79;      
    --personality-color: #333333; 
}

body { font-family: 'Helvetica Neue', Arial, sans-serif; background: var(--bg-color); color: var(--text-main); margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; }
h1 { margin-bottom: 20px; color: #444; letter-spacing: 1px; text-align: center; }

/* 佈局容器 */
.app-container {
    display: flex; flex-wrap: wrap; background: var(--card-bg);
    padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 1200px; width: 95%; gap: 40px; box-sizing: border-box; align-items: flex-start;
}

/* 側邊欄 */
.sidebar-group { flex: 4; min-width: 320px; max-width: none; display: flex; flex-direction: column; gap: 20px; }
.controls { display: flex; flex-direction: column; gap: 15px; }

label { font-size: 0.9em; font-weight: bold; color: #666; margin-bottom: 5px; display: block;}
input, select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background: #fff;}
.checkbox-group { display: flex; gap: 15px; margin-top: 5px; }
.checkbox-label { display: flex; align-items: center; font-size: 0.9em; color: #555; cursor: pointer; }
.checkbox-label input { width: auto; margin-right: 8px; cursor: pointer; }
button { width: 100%; padding: 14px; margin-top: 10px; background: #333; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; }
button:hover { background: #000; }

.info-panel { padding: 10px; background: #fcfcfc; border: 1px solid #eee; border-radius: 12px; font-size: 0.95rem; }
.info-item { margin-bottom: 12px; display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; }
.info-label { font-weight: bold; color: #555; white-space: nowrap; margin-right: 15px; }
.info-value { text-align: right; color: #333; font-weight: 500; word-break: break-word; }

/* 視覺區 */
.visualization-area { flex: 6; display: flex; justify-content: center; align-items: flex-start; background: #fff; width: 100%; position: relative; }
.chart-wrapper { flex: 6; display: flex; flex-direction: column; align-items: center; width: 100%; }
.chart-container { width: 100%; max-width: 800px; display: flex; justify-content: center; }
svg { width: 100%; height: auto; display: block;}

/* 行星列表 */
.planet-column { flex: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 0; padding: 20px 0; height: 100%; font-size: clamp(10px, 1.4vw, 14px); font-family: 'Courier New', monospace; transition: opacity 0.5s ease; }
.planet-row { display: flex; align-items: center; padding: 6px 0; gap: 8px; }
.planet-symbol { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 1.1em; flex-shrink: 0; line-height: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.planet-data { font-size: 0.95em; font-weight: 600; color: #555; font-family: 'Helvetica Neue', sans-serif; }

#design-list .planet-symbol { background-color: var(--design-color); }
#personality-list .planet-symbol { background-color: var(--personality-color); }
#personality-list .planet-row { flex-direction: row-reverse; }
#personality-list .planet-data { text-align: right; }

/* === SVG 互動樣式 === */
.center-shape { fill: var(--center-undefined); stroke: var(--stroke-color); stroke-width: 2px; transition: fill 0.5s ease; }
[id^="gate-"], [id^="gate-circle-"] { transition: opacity 0.5s ease, fill 0.3s ease; }

/* 箭頭預設隱藏 */
[id^="arrow-"] { display: none; }

/* 文字樣式：預設隱藏，並設定字體 */
[id^="text-"] { 
    font-family: Georgia, serif; /* 使用通用襯線字體 */
    font-weight: regular;
    opacity: 0; /* 預設看不見 */
    transition: opacity 0.5s ease; /* 淡入效果 */
}

@media screen and (max-width: 900px) {
    body { padding: 10px; } 
    .app-container { padding: 15px; gap: 20px; flex-direction: column; }
    .sidebar-group { display: contents; }
    .controls { order: 1; width: 100%; max-width: 100%; }
    .visualization-area { order: 2; width: 100%; padding: 0; gap: 5px; justify-content: space-between; }
    .planet-column { flex: 1.8; font-size: clamp(10px, 2.5vw, 13px); }
    .chart-wrapper { flex: 6.4; margin-bottom: 20px;}
    .info-panel { order: 3; width: 100%; padding: 10px; box-sizing: border-box; }
}
/* === 新增：說明按鈕與彈窗樣式 === */

/* 說明按鈕 (ℹ︎) */
.info-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #eee;
    color: #666;
    font-size: 12px;
    font-family: serif;
    font-style: italic;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    transition: all 0.2s;
    user-select: none;
}

.info-btn:hover {
    background-color: var(--brand-color);
    color: white;
}

/* 為了讓數值區也能排版按鈕，調整一下容器 */
.value-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* 彈出視窗遮罩 (Modal Overlay) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* 預設隱藏 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

/* 彈出視窗本體 */
.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 彈窗標題與內文 */
.modal-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-color);
    color: #333;
}

.modal-body {
    line-height: 1.6;
    color: #555;
    font-size: 0.95rem;
    white-space: pre-line; /* 讓 \n 可以換行 */
}

/* 關閉按鈕 */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}
.close-modal:hover { color: #333; }
/* === 新增：按鈕組 UI === */

/* 按鈕容器：讓按鈕橫向排列 */
.btn-group-row {
	display: flex;
	gap: 10px;
	margin-top: 5px;
	width: 100%;
}

/* 通用按鈕樣式 */
.toggle-btn, .mode-btn {
	flex: 1; /* 平均分配寬度 */
	padding: 10px;
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	transition: all 0.2s ease;
	text-align: center;
	user-select: none; /* 防止連點反白 */
}

.toggle-btn:hover, .mode-btn:hover {
	background: #f0f0f0;
}

/* 狀態：被選取 / 啟動 (Active) */
.toggle-btn.active, .mode-btn.active {
	background: var(--brand-color); /* 變成品牌色 (橘黃) */
	color: #000; /*文字保持深色*/
	border-color: var(--brand-color);
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 視圖切換區塊的容器微調 */
.view-mode-container {
	width: 100%;
	max-width: 400px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
}

/* === 新增：折疊面板樣式 === */
/* 群組容器 */
.panel-group {
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

/* 最後一個群組不需要底線 */
.panel-group:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* 標題樣式 (Zen Human Design) */
.group-title {
	font-size: 1.1rem; /* 比內文大一點 */
	font-weight: bold;
	color: var(--brand-color); /* 使用品牌色 */
	margin: 10px 0;
	display: flex;
	align-items: center;
	letter-spacing: 0.5px;
}

/* 折疊標籤樣式 (Ra 標籤包) */
details.panel-group summary {
	list-style: none; /* 移除預設的醜醜三角形 */
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: bold;
	color: #888; /* 預設灰色，展開時變色 */
	margin: 10px 0;
	display: flex;
	align-items: center;
	transition: color 0.2s;
	user-select: none;
}

/* 隱藏 Chrome 預設的 marker (保險起見) */
details.panel-group summary::-webkit-details-marker {
	display: none;
}

/* 滑鼠移過去變色 */
details.panel-group summary:hover {
	color: #555;
}

/* 展開時的狀態 */
details.panel-group[open] summary {
	color: var(--brand-color);
	margin-bottom: 15px; /* 展開後標題下方多留點白 */
}

/* 自製小箭頭 */
details.panel-group summary::after {
	content: '▼';
	font-size: 0.8em;
	transition: transform 0.3s ease;
}

/* 展開時箭頭旋轉 180度 */
details.panel-group[open] summary::after {
	transform: rotate(180deg);
}

/* 折疊內容出現的動畫 */
details.panel-group .group-content {
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}