/* ziwei.css — 紫微斗數叢集：傳統 4×4 命盤（外圈十二宮、中宮資訊）＋三方四正高亮＋宮位詳情。
   載在 yongshen.css 之後，沿用其暖象牙 token 與 .ys-* 元件（表單、數字卡、表格、誠實框）。
   配色克制：星名深色、化祿權科忌各一色小標，金色只留命宮框與選取態（見 design-gold-restraint）。 */

:root {
  --lu: #4f8c5f;     /* 化祿 綠 */
  --quan: #7a52b0;   /* 化權 紫 */
  --ke: #5a7fb0;     /* 化科 藍 */
  --huaji: #b45c3f;  /* 化忌 緋 */
}

.zw-form { grid-template-columns: repeat(4, 1fr); }
.zw-form input[type="time"], .zw-form input[type="text"] {
  font: inherit; font-size: 0.98rem; color: var(--text); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; width: 100%; box-sizing: border-box;
}
.zw-form .zw-city { grid-column: span 2; }
.zw-form button { grid-column: span 1; }

/* 命盤：外圈 12 宮，中間 2×2 併成中宮 */
.zw-board {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(128px, auto);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); gap: 1px; margin: 14px 0 10px;
}
.zw-cell {
  background: var(--bg-card); padding: 6px 7px 22px; position: relative; cursor: pointer; font-size: 0.8rem; line-height: 1.45;
  min-width: 0; border: 0; text-align: left; font-family: inherit; color: var(--text);
}
.zw-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.zw-cell.is-ming { box-shadow: inset 0 0 0 2px var(--gold-soft); }
.zw-cell.is-sf { background: #fbf6ec; }
.zw-cell.is-sel { background: #f5ecd9; box-shadow: inset 0 0 0 2px var(--gold); }
.zw-cell .zw-major { display: block; font-weight: 600; font-size: 0.95rem; color: var(--text); }
.zw-cell .zw-major small { font-weight: 400; color: var(--text-dim); font-size: 0.72rem; margin-left: 1px; }
.zw-cell .zw-empty { display: block; color: var(--text-dim); font-size: 0.8rem; }
.zw-cell .zw-minor { display: block; color: var(--text); font-size: 0.78rem; }
.zw-cell .zw-minor .sha { color: var(--huaji); }
.zw-cell .zw-misc { display: block; color: var(--text-dim); font-size: 0.72rem; }
.zw-cell .zw-foot {
  position: absolute; left: 7px; right: 7px; bottom: 4px; display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.72rem; color: var(--text-dim); white-space: nowrap;
}
.zw-cell .zw-foot b { font-weight: 600; color: var(--text); font-size: 0.82rem; }
.zw-cell .zw-foot .shen { color: var(--gold); font-weight: 600; }
.zw-tag { display: block; font-size: 0.68rem; color: var(--gold); letter-spacing: 0.04em; }

.zw-hua { display: inline-block; font-size: 0.66rem; font-weight: 600; color: #fff; border-radius: 4px; padding: 0 3px; margin-left: 2px; line-height: 1.5; vertical-align: 1px; }
.zw-hua.lu { background: var(--lu); } .zw-hua.quan { background: var(--quan); } .zw-hua.ke { background: var(--ke); } .zw-hua.ji { background: var(--huaji); }
.zw-hua.ol { background: transparent; border: 1px solid currentColor; }
.zw-hua.ol.lu { color: var(--lu); } .zw-hua.ol.quan { color: var(--quan); } .zw-hua.ol.ke { color: var(--ke); } .zw-hua.ol.ji { color: var(--huaji); }

.zw-center {
  grid-column: 2 / 4; grid-row: 2 / 4; background: var(--bg-input); padding: 12px 14px; font-size: 0.86rem; line-height: 1.75; cursor: default;
}
.zw-center .c-h { font-family: var(--lux-serif); font-weight: 600; font-size: 1.15rem; margin: 0 0 4px; }
.zw-center p { margin: 0; }
.zw-center .k { color: var(--text-dim); display: inline-block; min-width: 3.4em; }
.zw-center .c-year { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.zw-center select { font: inherit; font-size: 0.86rem; padding: 3px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); }

.zw-detail { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; font-size: 0.94rem; line-height: 1.85; }
.zw-detail h3 { margin: 0 0 6px; font-size: 1.1rem; }
.zw-detail p { margin: 4px 0; }
.zw-detail a { color: var(--gold); }
.zw-legend { font-size: 0.82rem; color: var(--text-dim); margin: 0 0 10px; line-height: 1.8; }
.zw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.zw-actions a { font-size: 0.9rem; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; color: var(--text); text-decoration: none; background: var(--bg-card); }
.zw-actions a:hover { border-color: var(--gold-soft); }

/* 內文用的靜態小盤圖（排盤原理頁） */
.zw-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 12px 0 16px; font-size: 0.86rem; }
.zw-mini div { background: var(--bg-card); padding: 8px 6px; text-align: center; min-height: 52px; }
.zw-mini .on { background: #f5ecd9; font-weight: 600; }
.zw-mini .sf { background: #fbf6ec; }
.zw-mini .mid { grid-column: 2 / 4; grid-row: 2 / 4; background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.82rem; padding: 10px; }

@media (max-width: 640px) {
  .zw-form { grid-template-columns: repeat(2, 1fr); }
  .zw-form .zw-city, .zw-form button { grid-column: 1 / -1; }
  .zw-board { grid-auto-rows: minmax(104px, auto); margin-left: -6px; margin-right: -6px; }
  .zw-cell { padding: 4px 4px 20px; font-size: 0.7rem; }
  .zw-cell .zw-major { font-size: 0.82rem; line-height: 1.35; }
  .zw-cell .zw-major small { display: none; }
  .zw-cell .zw-minor { font-size: 0.68rem; }
  .zw-cell .zw-misc { display: none; }
  .zw-cell .zw-foot { left: 4px; right: 4px; font-size: 0.62rem; }
  .zw-cell .zw-foot b { font-size: 0.72rem; }
  .zw-hua { font-size: 0.58rem; padding: 0 2px; margin-left: 1px; }
  .zw-center { padding: 8px; font-size: 0.72rem; line-height: 1.6; }
  .zw-center .c-h { font-size: 0.95rem; }
  .zw-center .k { min-width: 0; margin-right: 3px; }
  .zw-center .c-extra { display: none; }
}