/* 經脈圖譜頁（zhenjiu/meridian-atlas.html）樣式
   設計目標：一眼看清「一條經嘅樣」＋「氣血點樣流入下一條」。
   圖片全部來自 assets/zhenjiu-meridian/（已在 Pages 側，零新增資產）。 */

.atlas-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ---------- 開場說明 ---------- */
.atlas-intro {
  background: #fff;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.atlas-intro h2 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--ink, #2E2A25);
}
.atlas-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-2, #4A4239);
}
.atlas-legend { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.atlas-legend .lg {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #E0D7C8);
  background: var(--paper-2, #FBF6EC);
  color: var(--ink-2, #4A4239);
}
.atlas-legend .lg-start { border-color: #2E6F6B; color: #2E6F6B; background: #EAF3F2; }
.atlas-legend .lg-end   { border-color: #A83E2E; color: #A83E2E; background: #FBEDEA; }
.atlas-legend .lg-pair  { border-color: #6B5B95; color: #6B5B95; background: #F1EEF8; }

/* ---------- 流注次序 ---------- */
.atlas-flow {
  background: var(--paper-2, #FBF6EC);
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 24px;
}
.atlas-flow h3 { margin: 0 0 10px; font-size: 16px; color: var(--ink, #2E2A25); }
.atlas-flow-line {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent, #A83E2E);
  letter-spacing: .04em;
  line-height: 2;
}
.atlas-flow-line i { font-style: normal; color: var(--ink-3, #6D6358); margin: 0 4px; }
.atlas-flow-line b { color: var(--ink, #2E2A25); }
.atlas-flow-note { margin: 0; font-size: 13.5px; color: var(--ink-2, #4A4239); line-height: 1.8; }

/* ---------- 卡片網格：2 欄 ---------- */
.atlas-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 20px;
}
.atlas-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-3, #6D6358);
  padding: 40px 0;
}

/* ---------- 單張經脈卡 ---------- */
.atlas-card {
  background: #fff;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 14px;
  overflow: hidden;
  break-inside: avoid;
}
.atlas-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border, #E0D7C8);
  background: var(--paper-2, #FBF6EC);
}
.atlas-no {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: #fff;
  background: var(--accent, #A83E2E);
  border-radius: 6px;
  padding: 1px 8px;
  flex: 0 0 auto;
}
.atlas-name { font-size: 18px; font-weight: 700; color: var(--ink, #2E2A25); }
.atlas-alias { font-size: 13px; color: var(--ink-3, #6D6358); }

.atlas-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
}
.atlas-chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border, #E0D7C8);
  background: var(--paper-3, #F1E9DA);
  color: var(--ink-2, #4A4239);
}
.atlas-chip b { color: var(--ink, #2E2A25); }
.atlas-chip.is-pair { border-color: #6B5B95; background: #F1EEF8; color: #53447A; }
.atlas-chip.is-dir  { border-color: #2E6F6B; background: #EAF3F2; color: #245E5A; }

/* ---------- 循行文字 ---------- */
.atlas-route { padding: 12px 18px 0; margin: 0; list-style: none; }
.atlas-route li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2, #4A4239);
}
.atlas-route li::before {
  content: "";
  position: absolute;
  left: 2px; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent, #A83E2E);
}
.atlas-route li:last-child { color: var(--accent, #A83E2E); font-weight: 600; }
.atlas-route li:last-child::before { background: var(--accent, #A83E2E); }

/* ---------- 圖區：循行圖 + 動畫 ---------- */
.atlas-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 18px 0;
}
.atlas-fig { margin: 0; text-align: center; }
.atlas-fig .fh {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3, #6D6358);
  margin-bottom: 5px;
}
.atlas-fig img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 10px;
  background: #fff;
  display: block;
  margin: 0 auto;
}
/* 動畫較高，限制高度避免卡片過長 */
.atlas-fig--anim img { max-height: 260px; object-fit: contain; }

/* ---------- 首末穴實拍 ---------- */
.atlas-ends {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 18px 16px;
  border-top: 1px dashed var(--border, #E0D7C8);
  margin-top: 14px;
}
.atlas-end { margin: 0; text-align: center; }
.atlas-end .eh {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 5px;
  padding: 2px 8px;
  margin-bottom: 6px;
}
.atlas-end--start .eh { background: #EAF3F2; color: #2E6F6B; }
.atlas-end--end   .eh { background: #FBEDEA; color: #A83E2E; }
.atlas-end img {
  max-width: 100%;
  max-height: 210px;
  height: auto;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 10px;
  background: #fff;
  display: block;
  margin: 0 auto;
}
.atlas-end .en { font-size: 13px; font-weight: 600; color: var(--ink, #2E2A25); margin-top: 6px; }
.atlas-end .ep { font-size: 12px; color: var(--ink-3, #6D6358); line-height: 1.6; margin-top: 2px; }

/* ---------- 任督二脈（折叠） ---------- */
.atlas-extra {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--border, #E0D7C8);
  border-radius: 14px;
  padding: 16px 20px;
}
.atlas-extra summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #2E2A25);
}
.atlas-extra summary::marker { color: var(--accent, #A83E2E); }
.atlas-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.atlas-extra-item { border: 1px solid var(--border, #E0D7C8); border-radius: 12px; overflow: hidden; }
.atlas-extra-item img { width: 100%; max-height: 300px; object-fit: contain; background: #fff; display: block; }
.atlas-extra-cap { padding: 10px 14px 14px; }
.atlas-extra-cap .t { font-size: 15px; font-weight: 700; color: var(--ink, #2E2A25); margin-bottom: 4px; }
.atlas-extra-cap .n { font-size: 13px; color: var(--ink-2, #4A4239); line-height: 1.7; }

/* ---------- 響應式 ---------- */
@media (max-width: 1080px) {
  .atlas-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .atlas-main { padding: 18px 14px 60px; }
  .atlas-figs, .atlas-ends { grid-template-columns: 1fr; }
  .atlas-flow-line { font-size: 15px; }
}

/* ---------- 列印 ---------- */
@media print {
  .atlas-card, .atlas-flow, .atlas-intro { break-inside: avoid; }
  .atlas-extra { display: none; }   /* 任督為補充內容，列印時省略 */
  .atlas-fig--anim img { max-height: 200px; }
}