.chart-note{margin:12px 0 20px;padding:12px 16px;border-left:2px solid var(--line-strong);line-height:1.85;overflow-wrap:anywhere}
.chart-note h4{margin:0 0 8px;font-size:16px}.chart-note p{margin:8px 0}
.chart-note .caveat{font-size:13px;color:var(--text-faint)}
.chart-tools{margin:20px 0;padding:12px;border-top:1px solid var(--line-warm);font-size:13px}
.chart-basic .chart-focus{border-top:1px solid var(--line-warm)}
.batch-tools{padding:12px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* 인쇄 규칙 — **접힌 것은 사용자가 고른 것이다.**
   편 것은 인쇄하고, 접힌 것은 인쇄하지 않는다. `reader.css` 의 `.reader-chapter`
   와 같은 규칙이다. 앞 판은 `.chart-focus` 를 편 채로 인쇄해도 통째로 지웠다 —
   사용자가 열어 둔 해설이 PDF 에서만 사라졌다. */
@media print{.chart-tools,.chart-more,.batch-tools{display:none!important}.chart-note{border-left:1pt solid var(--line-strong);margin:3mm 0;padding:2mm 3mm;font-size:10pt}.chart-note h4{break-after:avoid;font-size:11pt}.chart-note p{orphans:3;widows:3}.chart-note .evidence{display:none!important}}
@media print{.annual,.monthly,.daeun{break-inside:avoid;page-break-inside:avoid}.annual>div,.monthly>div,.daeun>div{break-inside:avoid;page-break-inside:avoid}}
/* 연관 항목 배지. 실선=원국과 직접 닿는 것, 점선=표에서 판정되는 것. */
.chart-badges{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chart-badge{font-size:12px;padding:2px 9px;border-radius:11px;
  border:1px solid var(--gold-soft);color:var(--text);background:var(--surface);white-space:nowrap}
.chart-badge.is-mark{border-style:dashed;color:var(--mark-ink);background:var(--chip-soft)}
.chart-acts{margin:8px 0;font-size:13px}
.chart-acts>span{font-weight:700;color:var(--text);margin-right:6px}
.chart-acts ul{margin:4px 0 0;padding-left:18px}
.chart-theme{font-weight:600;color:var(--text-strong)}
/* 연결 해설은 접어 둔다. 만세력은 표를 보러 오는 화면이다. */
details.chart-basic{margin:10px 0;border:1px solid var(--line-soft);border-radius:8px;
  background:var(--surface-raised);padding:0 14px}
details.chart-basic>summary{cursor:pointer;padding:10px 0;font-size:14px;
  font-weight:600;color:var(--text);list-style:disclosure-closed}
details.chart-basic[open]>summary{list-style:disclosure-open;
  border-bottom:1px solid var(--chip);margin-bottom:10px}
details.chart-basic>*:last-child{margin-bottom:12px}
@media print{ details.chart-basic:not([open]){display:none} }
@media print{ details.chart-focus:not([open]){display:none} }
/* 운 칸 상자 안의 연결 해설. 기본은 접는다 — 칸을 보러 누른 사람의 화면을 덮지 않게. */
details.chart-focus{margin:12px 0 0;border-top:1px solid var(--chip);padding-top:8px}
details.chart-focus>summary{cursor:pointer;font-size:13px;font-weight:600;
  color:var(--fold-ink);padding:4px 0;list-style:disclosure-closed}
details.chart-focus[open]>summary{list-style:disclosure-open;margin-bottom:8px}


/* A2안 — 산문에서 뺀 표. 오행 항목에만 나온다. */
.chart-sides { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .92em; }
.chart-sides caption { text-align: left; font-weight: 600; padding-bottom: .3rem; opacity: .8; }
.chart-sides th, .chart-sides td { padding: .28rem .5rem; border-bottom: 1px solid rgba(128,128,128,.22);
  text-align: left; font-weight: 400; vertical-align: baseline; }
.chart-sides th { white-space: nowrap; }
.chart-sides th em { font-style: normal; opacity: .6; font-size: .9em; }
.chart-sides td.n { text-align: right; font-variant-numeric: tabular-nums; width: 2.5em; }
.chart-sides td.el { width: 2.5em; opacity: .8; }
.chart-sides td.g { opacity: .72; }
.chart-seats { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .9em; }
.chart-seats caption { text-align: left; font-weight: 600; padding-bottom: .3rem; opacity: .8; }
.chart-seats th, .chart-seats td { padding: .22rem .5rem .22rem 0;
  border-bottom: 1px solid rgba(128,128,128,.18); text-align: left; vertical-align: baseline; }
.chart-seats th { width: 2.5em; font-weight: 600; opacity: .85; white-space: nowrap; }
.chart-seats td span { display: inline-block; border: 1px solid rgba(128,128,128,.3);
  border-radius: .6rem; padding: .02rem .45rem; margin: .1rem .3rem .1rem 0; opacity: .85; }


/* A1+A3+A4안 — 연결 해설을 문단·소제목·접기로 끊는다. */
.chart-blocks { margin: .4rem 0; }
.chart-block { margin: 0 0 .9rem; }
.chart-block:last-child { margin-bottom: 0; }
.chart-block > h5 { margin: 0 0 .25rem; font-size: .88em; font-weight: 700;
  letter-spacing: .02em; opacity: .62; }
.chart-block > p { margin: 0 0 .45rem; }
.chart-block > p:last-child { margin-bottom: 0; }
.chart-more { margin-top: .2rem; }
.chart-more > summary { cursor: pointer; font-size: .88em; opacity: .62; }
.chart-more[open] > summary { margin-bottom: .35rem; }
.chart-more > p { margin: 0 0 .45rem; }

/* 관례 한 줄(B24 안 3). **계산과 눈으로도 구분되어야 한다** — 같은 활자로
   흘리면 같은 무게로 읽히고, 그러면 옛 이름의 길흉이 계산 결과처럼 보인다.
   팝업의 `.gloss .lore` 와 같은 결을 쓴다. */
.chart-lore{
  font-size:12.5px; color:var(--muted); background:var(--surface);
  border-left:3px solid var(--line-soft); padding:8px 10px;
  border-radius:0 6px 6px 0; margin:.5rem 0;
}