/* jiazi.css — 六十甲子支柱頁專用樣式。沿用 style.css 的 :root 變數，須在 style.css / article.css 之後載入。 */

/* 五行配色（暗金主題下的可辨色）*/
:root {
  --el-jin: #c9cdd4; --el-mu: #5fae7e; --el-shui: #5b8fd6; --el-huo: #d97a66; --el-tu: #cba24a;
}

/* 零件 chips（天干/地支/五行）*/
.jz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.jz-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .15s;
}
a.jz-chip:hover { border-color: var(--gold-soft); }
.jz-chip-c { font-family: 'Noto Serif TC', serif; font-size: 1.2rem; line-height: 1.2; color: var(--gold); }
.jz-chip-s { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.jz-chip.el-jin .jz-chip-c { color: var(--el-jin); } .jz-chip.el-mu .jz-chip-c { color: var(--el-mu); }
.jz-chip.el-shui .jz-chip-c { color: var(--el-shui); } .jz-chip.el-huo .jz-chip-c { color: var(--el-huo); }
.jz-chip.el-tu .jz-chip-c { color: var(--el-tu); }

/* 篩選頁籤 */
.jz-hint { color: var(--text-dim); font-size: 0.9rem; margin: 4px 0 12px; }
.jz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jz-tab {
  padding: 7px 14px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; font: inherit; font-size: 0.88rem; cursor: pointer; transition: all .15s;
}
.jz-tab:hover { color: var(--text); }
.jz-tab.is-on { background: var(--gold); color: #14161f; border-color: var(--gold); font-weight: 600; }
.jz-subfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jz-f {
  min-width: 38px; padding: 6px 10px; background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; font: inherit; font-size: 0.95rem; cursor: pointer; transition: all .15s;
}
.jz-f:hover { border-color: var(--gold-soft); }
.jz-f.is-on { border-color: var(--gold); color: var(--gold); font-weight: 600; }

/* 六十甲子九宮格：10 欄（同欄同天干），窄螢幕降到 5 欄 */
.jz-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 4px 0 18px; }
.jz-cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px;
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--border);
  border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); transition: transform .1s, border-color .15s, opacity .15s;
}
.jz-cell:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.jz-cell.el-jin { border-top-color: var(--el-jin); } .jz-cell.el-mu { border-top-color: var(--el-mu); }
.jz-cell.el-shui { border-top-color: var(--el-shui); } .jz-cell.el-huo { border-top-color: var(--el-huo); }
.jz-cell.el-tu { border-top-color: var(--el-tu); }
.jz-num { font-size: 0.62rem; color: var(--text-dim); }
.jz-gz { font-family: 'Noto Serif TC', serif; font-size: 1.1rem; color: var(--text); line-height: 1.1; }
.jz-ny { font-size: 0.6rem; color: var(--text-dim); text-align: center; }
.jz-cell.is-dim { opacity: 0.22; }
.jz-cell.is-hit { border-color: var(--gold-soft); }
.jz-cell.is-sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* 詳情面板 */
.jz-detail {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin: 4px 0 8px; min-height: 60px;
}
.jz-detail-hint { color: var(--text-dim); font-size: 0.9rem; margin: 0; }
.jz-d-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; }
.jz-d-gz { font-family: 'Noto Serif TC', serif; font-size: 1.7rem; color: var(--gold); }
.jz-d-no { font-size: 0.85rem; color: var(--text-dim); }
.jz-d-row { display: flex; gap: 10px; padding: 6px 0; font-size: 0.95rem; line-height: 1.7; }
.jz-d-k { flex: 0 0 4.5em; color: var(--text-dim); font-size: 0.85rem; }
.jz-d-v { flex: 1; color: var(--text); }
.jz-d-v a { color: var(--gold); text-decoration: none; }
.jz-d-v a:hover { text-decoration: underline; }
.jz-d-ny { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.jz-d-cl { font-family: 'Noto Serif TC', serif; color: var(--gold-soft); margin: 0 0 6px; }
.jz-d-gl { color: var(--text-dim); line-height: 1.9; margin: 0; }

/* 循環規律 */
.jz-cycle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0 8px; }
.jz-cyc { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.jz-cyc h3 { margin: 0 0 8px; color: var(--gold); font-size: 1.05rem; }
.jz-cyc p { margin: 0; color: var(--text-dim); line-height: 1.9; font-size: 0.95rem; }
.jz-cyc-lcm { grid-column: 1 / -1; background: linear-gradient(160deg, var(--bg-card), var(--bg-input)); }

/* 納音表 */
.jz-tablewrap { overflow-x: auto; margin: 8px 0 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.jz-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.jz-table th, .jz-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.jz-table thead th { background: var(--bg-input); color: var(--text-dim); font-weight: 500; font-size: 0.82rem; position: sticky; top: 0; }
.jz-table tbody tr:hover { background: var(--bg-input); }
.jz-t-no { color: var(--text-dim); }
.jz-t-gz { font-family: 'Noto Serif TC', serif; color: var(--text); }
.jz-t-void { color: var(--text-dim); }
.jz-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.82rem;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
}
.jz-badge.el-jin { color: var(--el-jin); border-color: var(--el-jin); }
.jz-badge.el-mu { color: var(--el-mu); border-color: var(--el-mu); }
.jz-badge.el-shui { color: var(--el-shui); border-color: var(--el-shui); }
.jz-badge.el-huo { color: var(--el-huo); border-color: var(--el-huo); }
.jz-badge.el-tu { color: var(--el-tu); border-color: var(--el-tu); }

/* 三十納音卡 */
.jz-nygroup { font-size: 1.05rem; margin: 22px 0 10px; padding-left: 10px; border-left: 3px solid var(--border); }
.jz-nygroup.el-jin { border-left-color: var(--el-jin); } .jz-nygroup.el-mu { border-left-color: var(--el-mu); }
.jz-nygroup.el-shui { border-left-color: var(--el-shui); } .jz-nygroup.el-huo { border-left-color: var(--el-huo); }
.jz-nygroup.el-tu { border-left-color: var(--el-tu); }
.jz-nycards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.jz-nycard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.jz-nycard-h { margin-bottom: 8px; }
.jz-nycard-cl { font-family: 'Noto Serif TC', serif; color: var(--gold-soft); margin: 0 0 6px; font-size: 0.95rem; line-height: 1.7; }
.jz-nycard-gl { color: var(--text-dim); margin: 0; line-height: 1.85; font-size: 0.92rem; }

/* 空亡（六旬）*/
.jz-xuns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0; }
.jz-xun { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.jz-xun-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.jz-xun-h b { font-family: 'Noto Serif TC', serif; color: var(--gold); font-size: 1.05rem; }
.jz-xun-void { font-size: 0.82rem; color: var(--el-huo); }
.jz-xms { display: flex; flex-wrap: wrap; gap: 5px; }
.jz-xm { font-size: 0.85rem; padding: 3px 7px; background: var(--bg-input); border-radius: 6px; color: var(--text-dim); }

/* 說明小卡 */
.jz-note { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin: 14px 0; }
.jz-note h3 { margin: 0 0 8px; color: var(--gold); font-size: 1rem; }
.jz-note p { margin: 0; color: var(--text-dim); line-height: 1.9; font-size: 0.93rem; }

@media (max-width: 560px) {
  .jz-grid { grid-template-columns: repeat(5, 1fr); }
  .jz-cycle, .jz-nycards, .jz-xuns { grid-template-columns: 1fr; }
  .jz-gz { font-size: 1rem; }
  .jz-cyc-lcm { grid-column: auto; }
}