body { font-family:sans-serif; display:flex; flex-direction:column; align-items:center; padding:20px; }
h2 { margin-bottom:20px; text-align:center; }
#container { display:flex; gap:20px; width:100%; max-width:1000px; }
.area { border:1px solid #ccc; padding:10px; flex:1; margin:5px; }
#left-area { flex:3; }
#right-area { flex:1; }
h3 { margin-top:0; text-align:center; }
p.center-text {
  text-align: center;
  width: 100%;
}
.list { min-height:300px; max-height:750px; border:1px dashed #aaa; padding:10px; display:flex; flex-wrap:wrap; gap:5px; overflow-y:auto; justify-content:center; }
#right-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 元素從上面開始排 */
  align-items: center;         /* 水平置中每個 block */
  gap: 5px;
  height: 750px;
}
.block {
  width: 100px;
  height: 60px;
  display: flex;           /* 變成 flex 容器 */
  justify-content: center; /* 水平置中 */
  align-items: center;     /* 垂直置中 */
  text-align: center;      /* 文字水平置中 */
  cursor: grab;
  user-select: none;
  background: var(--block-color,#90caf9);
}
.block.disabled { background:#cfd8dc !important; cursor:not-allowed; }

/* ===== 分組顏色 ===== */
.group1 { --block-color: #ffccbc; } /* 成就與資源取向 */
.group2 { --block-color: #c5e1a5; } /* 意義與品格取向 */
.group3 { --block-color: #b3e5fc; } /* 人際關係與影響 */
.group4 { --block-color: #8dc6e0; } /* 家庭與責任取向 */
.group5 { --block-color: #d1c4e9; } /* 自主與生活節奏 */


/* ===== 適用於分布表格 ===== */
#group-table td.group1,
#group-table td.group2,
#group-table td.group3,
#group-table td.group4,
#group-table td.group5 {
  background-color: var(--block-color);
}
/* 只針對分布表格的標題和表格 */
#group-table-container h3 {
  margin-bottom: 0px; /* 調整標題下方間距 */
}
#group-table {
  margin-top: 0; /* 調整表格上方間距 */
}


button { padding:6px 12px; margin-top:10px; cursor:pointer; }
#compare-area { margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:20px; }
#compare-area .compare-buttons { display:flex; justify-content:center; gap:40px; }
#compare-area .compare-buttons button { width:150px; height:50px; font-size:16px; }
table { border-collapse:collapse; margin-top:20px; width:100%; max-width:500px; text-align:center; }
td, th { border:1px solid #aaa; padding:6px 12px; text-align:center; }
.match { background:#c8e6c9; }
.mismatch { background:#ffcdd2; }
.bottom-btns { margin-top:20px; display:flex; gap:20px; justify-content:center; }
#confirmBtn {
  display: block;
  margin: 20px auto 0;
  padding: 6px 12px;
  cursor: pointer;
}
p {
  text-align: center;
  width: 100%;
}

/* ===== Step2 比較畫面 ===== */
.compare-cards {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.compare-card {
  width: 140px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  border-radius: 6px;
  background: var(--block-color, #90caf9);
  transition: transform 0.15s, box-shadow 0.15s;
}

.compare-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 子元素水平置中 */
  gap: 20px;            /* 子元素間距 */
}

#result-table {
  margin: 0 auto;       /* table 置中 */
  text-align: center;
}

#result-table th,
#result-table td {
  text-align: center;   /* 表格文字置中 */
}

.bottom-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}