/* ============================================================
   紫微斗數全書 · 古籍閱讀
   ------------------------------------------------------------
   這裡的主角是經文，不是介面。所有介面元素（標籤、字數、麵包屑）
   都壓在 12–13px 並降彩度，讓 17–19px 的經文自己站出來。

   經文行高刻意放大到 2.0 —— 古籍斷句密集，行距不足會整段糊成一片。
   手機優先：320px 起即可讀，不依賴桌機寬度。
   ============================================================ */

.zc-wrap {
  padding-top: 26px;
  padding-bottom: 56px;
  max-width: 860px;
}

/* ── 頁首 ── */
.zc-head { margin-bottom: 24px; }

.zc-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .34em;
  color: #a8946a;
}

.zc-head h1 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 14px;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .12em;
  color: #efe2c4;
}
/* 短金線：與解夢、梅花、排盤頁同一個收尾語彙 */
.zc-head h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 196, 130, .9), rgba(224, 196, 130, .05));
}

.zc-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #a99c86;
  max-width: 40em;
}

.zc-stats {
  margin: 12px 0 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #8f8677;
}

/* ── 檢索 ── */
.zc-search {
  margin: 0 0 26px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(224, 196, 130, .22);
  border-radius: 13px;
  background: rgba(18, 13, 26, .62);
}

.zc-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zc-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.zc-search input[type="search"] {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 13px;
  font-size: 15.5px;
  font-family: inherit;
  color: #f2e6cc;
  background: rgba(10, 8, 16, .74);
  border: 1px solid rgba(224, 196, 130, .26);
  border-radius: 9px;
  -webkit-appearance: none;
  appearance: none;
}
.zc-search input[type="search"]::placeholder { color: #7d7568; }
.zc-search input[type="search"]:focus {
  outline: none;
  border-color: rgba(224, 196, 130, .55);
  box-shadow: 0 0 0 3px rgba(224, 196, 130, .1);
}

.zc-search select {
  flex: 1 1 46%;
  min-height: 46px;
  padding: 8px 34px 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #ded4c2;
  background-color: rgba(10, 8, 16, .74);
  background-image: linear-gradient(45deg, transparent 50%, #a08a5c 50%),
                    linear-gradient(135deg, #a08a5c 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid rgba(224, 196, 130, .26);
  border-radius: 9px;
  -webkit-appearance: none;
  appearance: none;
}

.zc-btn {
  flex: 1 1 100%;
  min-height: 46px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .22em;
  color: #f4dfa4;
  background: linear-gradient(180deg, rgba(224, 196, 130, .2), rgba(224, 196, 130, .07));
  border: 1px solid rgba(224, 196, 130, .5);
  border-radius: 9px;
  cursor: pointer;
}
.zc-btn:hover { background: linear-gradient(180deg, rgba(224, 196, 130, .3), rgba(224, 196, 130, .12)); }
.zc-btn:active { transform: translateY(1px); }

.zc-search-note {
  margin: 10px 2px 0;
  font-size: 12.5px;
  color: #9b9182;
}

/* ── 檢索結果 ── */
.zc-hit-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.zc-hit {
  padding: 12px 14px;
  border: 1px solid rgba(224, 196, 130, .14);
  border-radius: 11px;
  background: rgba(14, 10, 20, .55);
}

.zc-hit-title {
  display: inline;
  font-size: 16px;
  color: #ecdcb8;
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 196, 130, .3);
}
.zc-hit-title:hover { color: #fff2cd; border-bottom-color: rgba(224, 196, 130, .7); }

.zc-hit-vol {
  margin-right: 6px;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: #8f7a52;
}

.zc-hit-tag {
  display: inline-block;
  margin: 6px 0 0 6px;
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: .05em;
  color: #a99c86;
  border: 1px solid rgba(169, 156, 134, .3);
  border-radius: 999px;
}
.zc-hit-star { color: #b79a63; border-color: rgba(183, 154, 99, .34); }

.zc-hit-snip {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: #bdb3a2;
}

mark {
  padding: 0 2px;
  color: #1a1206;
  background: rgba(238, 205, 122, .82);
  border-radius: 3px;
}

/* ── 單段閱讀 ── */
.zc-read {
  padding: 18px 15px 6px;
  border: 1px solid rgba(224, 196, 130, .2);
  border-radius: 14px;
  background: rgba(18, 13, 26, .55);
  margin-bottom: 26px;
}

.zc-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #8f8677;
  margin-bottom: 14px;
}
.zc-crumb a {
  color: #a8946a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.zc-crumb a:hover { border-bottom-color: rgba(168, 148, 106, .6); }

.zc-read-head { margin-bottom: 18px; }

.zc-read-head h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
  color: #f2e3bc;
}

.zc-read-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: #8f8677;
}

.zc-text {
  margin: 0 0 24px;
}
.zc-text p {
  margin: 0 0 .55em;
  font-size: 17px;
  line-height: 2;
  letter-spacing: .045em;
  color: #e6dcc8;
  text-align: justify;
  text-justify: inter-ideograph;
  overflow-wrap: break-word;
}
/* 兩行以上成句的段落之間多留一點，避免整段黏成一面牆 */
.zc-text p + p { margin-top: .2em; }

/* ── 前後段 ── */
.zc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 0 12px;
  border-top: 1px solid rgba(224, 196, 130, .14);
}

.zc-pager-item {
  display: block;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid rgba(224, 196, 130, .18);
  border-radius: 10px;
  text-decoration: none;
  background: rgba(10, 8, 16, .4);
}
.zc-pager-item small {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: #8f7a52;
  margin-bottom: 3px;
}
.zc-pager-item span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #dcd0ba;
  overflow-wrap: break-word;
}
.zc-pager-item:hover { border-color: rgba(224, 196, 130, .42); }
.zc-pager-next { text-align: right; }

/* ── 目錄 ── */
.zc-index { margin-bottom: 30px; }

.zc-vol-title {
  margin: 0 0 3px;
  padding-bottom: 8px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .18em;
  color: #e8d9b4;
  border-bottom: 1px solid rgba(224, 196, 130, .24);
}

.zc-vol-meta {
  margin: 0 0 18px;
  font-size: 12px;
  color: #8f8677;
}

.zc-group { margin-bottom: 22px; }

.zc-group-title {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .2em;
  color: #a8946a;
}

.zc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zc-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 5px 2px;
  border-bottom: 1px dashed rgba(169, 156, 134, .13);
}
.zc-list li:last-child { border-bottom: 0; }

.zc-list a {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  min-height: 34px;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.6;
  color: #ddd1bb;
  text-decoration: none;
  overflow-wrap: break-word;
}
.zc-list a:hover { color: #fff0c8; }

.zc-list-star {
  font-size: 11.5px;
  color: #b79a63;
  white-space: nowrap;
}

.zc-list-cc {
  margin-left: auto;
  font-size: 11.5px;
  color: #7d7568;
  white-space: nowrap;
}

/* ── 其他 ── */
.zc-empty {
  padding: 16px 16px;
  border: 1px dashed rgba(169, 156, 134, .28);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: #a99c86;
}

.zc-back {
  margin: 30px 0 0;
  font-size: 13.5px;
}
.zc-back a {
  color: #a8946a;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 148, 106, .35);
}
.zc-back a:hover { border-bottom-color: rgba(168, 148, 106, .8); }

/* ── 寬螢幕：只在有空間時放大，不改變資訊密度 ── */
@media (min-width: 640px) {
  .zc-wrap { padding-top: 34px; }
  .zc-head h1 { font-size: 31px; }
  .zc-search-row { flex-wrap: nowrap; }
  .zc-search input[type="search"] { flex: 1 1 auto; }
  .zc-search select { flex: 0 0 11em; }
  .zc-btn { flex: 0 0 auto; }
  .zc-read { padding: 26px 30px 10px; }
  .zc-text p { font-size: 18px; line-height: 2.05; }
  .zc-read-head h2 { font-size: 25px; }
  .zc-hit-list { gap: 12px; }
}

@media (min-width: 900px) {
  .zc-text p { font-size: 19px; }
}

/* ============================================================
   API 文件頁（沿用古籍頁的字體節奏，但程式碼區塊優先）
   ============================================================ */

.za-sec {
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(224, 196, 130, .12);
}
.za-sec:last-of-type { border-bottom: 0; }

.za-h2 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 15px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #e8d9b4;
}
/* 小菱格：古籍頁與排盤頁共用的分節記號 */
.za-h2::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 5px;
  height: 5px;
  background: rgba(224, 196, 130, .55);
  transform: rotate(45deg);
}

.za-h3 {
  margin: 18px 0 8px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .18em;
  color: #a8946a;
}

.za-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: #a99c86;
}

.za-note code,
.za-list code {
  padding: 1px 5px;
  font-size: 12.5px;
  color: #e2cf9f;
  background: rgba(224, 196, 130, .1);
  border-radius: 4px;
  word-break: break-all;
}

.za-code {
  margin: 0 0 10px;
  padding: 14px 13px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(8, 6, 13, .82);
  border: 1px solid rgba(224, 196, 130, .16);
  border-radius: 11px;
}
.za-code code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.75;
  color: #cfc4b0;
  white-space: pre;
  tab-size: 2;
}

/* 表格：窄螢幕可橫向滑動，不撐破版面 */
.za-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(224, 196, 130, .14);
  border-radius: 11px;
  margin-bottom: 6px;
}

.za-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}
.za-table th,
.za-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  border-bottom: 1px solid rgba(169, 156, 134, .12);
}
.za-table th {
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: #a8946a;
  background: rgba(224, 196, 130, .05);
  white-space: nowrap;
}
.za-table td { color: #cfc4b0; }
.za-table tr:last-child td { border-bottom: 0; }
.za-table code {
  padding: 1px 5px;
  font-size: 12px;
  color: #e2cf9f;
  background: rgba(224, 196, 130, .1);
  border-radius: 4px;
  word-break: break-all;
}
.za-table strong { color: #e8d9b4; font-weight: 500; }

.za-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 13.5px;
  line-height: 1.95;
  color: #bdb3a2;
}
.za-list li { margin-bottom: 7px; }
.za-list strong { color: #e8d9b4; font-weight: 500; }

.za-sep {
  margin: 0 8px;
  color: #6d6558;
}

@media (min-width: 640px) {
  .za-code code { font-size: 12.5px; }
  .za-table { font-size: 13.5px; min-width: 560px; }
}
.zc-sep { margin: 0 8px; color: #6d6558; }