/* 印历 —— 月白纸、玄青墨、印泥色。颜色语义与 core/src/palette.ts 一致（同值，改那边要同步改这里；
   web/src/main.ts 启动时会用 core 的 COLOR 覆盖这些变量，所以这里只是首屏兜底）。 */
:root {
  --paper: #edf0ee; /* 月白 */
  --paper-2: #e3e8e5;
  --ink: #1e2a30; /* 玄青 */
  --ink-2: #55636a;
  --ink-3: #8b979c;
  --rule: #c9d1cd;
  --tianshe: #c8352b;
  --gengshen: #7b3f98;
  --fo: #c98a12;
  --dao: #2b5ba8;
  --jieqi: #2f8f6b;
  --holiday: #b8322a;
  --song: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  --sans: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --num: "Iowan Old Style", "Baskerville", "Palatino", var(--song);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--song); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--dao); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── 顶栏 ─────────────────────────────────────────── */
.top { display: flex; align-items: center; gap: 18px; padding: 18px 32px 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .2em; }
.brand .seal { width: 26px; height: 26px; font-size: 16px; }
.nav { display: flex; gap: 4px; margin-left: auto; font-family: var(--sans); font-size: 13px; }
.nav button, .yearbar button, .tool button, .tool a {
  border: 1px solid var(--rule); background: transparent; padding: 6px 12px; border-radius: 4px; cursor: pointer; text-decoration: none;
}
.nav button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.yearbar { display: flex; align-items: baseline; gap: 14px; padding: 0 32px; font-family: var(--sans); font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.yearbar h1 { font-family: var(--num); font-size: 46px; font-weight: 400; margin: 0; color: var(--ink); letter-spacing: .04em; }
.yearbar .gz { font-family: var(--song); font-size: 18px; color: var(--ink-2); }
.yearbar button { padding: 2px 10px; }
.regions { display: inline-flex; gap: 4px; margin-left: auto; }
.regions label { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--rule); padding: 3px 8px; border-radius: 4px; cursor: pointer; }
.status-badge { font-size: 11px; color: var(--ink-3); }

/* ── 印章 ─────────────────────────────────────────── */
.seal {
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--song); font-weight: 700;
  line-height: 1; border-radius: 3px; color: #fff; white-space: nowrap;
}
.seal.fill { background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 0 2.5px var(--c); }
.seal.outline { color: var(--c); border: 1.5px solid var(--c); background: transparent; }
.seal.bare { color: var(--ink-2); font-weight: 400; }

/* ── 年 · 十二月 ────────────────────────────────────── */
.year12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 30px; padding: 22px 32px 40px; }
@media (max-width: 1100px) { .year12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .year12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .year12 { grid-template-columns: 1fr; } }
.mini { cursor: pointer; border-radius: 6px; padding: 6px; transition: background .2s; }
.mini:hover { background: var(--paper-2); }
.mini h3 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-weight: 400; font-size: 24px; font-family: var(--num); }
.mini h3 small { font-family: var(--song); font-size: 13px; }
.mini h3 em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); font-family: var(--song); }
.mini .wk, .mini .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini .wk span { font-family: var(--sans); font-size: 10px; color: var(--ink-3); text-align: center; }
.mini .wk span:nth-child(n+6) { color: var(--holiday); }
.mini .d { height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 3px; position: relative; }
.mini .d b { font-family: var(--num); font-weight: 400; font-size: 13px; }
.mini .d i { font-style: normal; font-size: 9.5px; color: var(--ink-3); }
.mini .d.fill { background: var(--c); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 2.5px var(--c); }
.mini .d.fill i { color: #fff; font-weight: 700; }
.mini .d.outline i { color: var(--c); font-weight: 700; }
.mini .d.off b { color: var(--holiday); }
.mini .d.today { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.mini .d .hd { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.mini .d .hd u { width: 3px; height: 3px; border-radius: 50%; background: var(--holiday); }

.legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 32px 28px; font-family: var(--sans); font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -2px; }

/* ── 年 · 节气长卷（手卷，横向滚动；底层是香港昼长曲线） ─────── */
.scroll-wrap { overflow-x: auto; padding: 18px 0 8px; }
.scroll { display: flex; padding: 0 32px; width: max-content; position: relative; }
.scroll .curve { position: absolute; left: 32px; top: 0; pointer-events: none; }
.scroll .curve .jqt { font-family: var(--song); font-size: 12px; font-weight: 700; fill: var(--jieqi); }
.col { width: 30px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; border-left: 1px solid transparent; position: relative; padding-top: 30px; height: 320px; }
.col.m1 { border-left-color: var(--rule); }
.col .mo { position: absolute; top: 0; left: 5px; font-family: var(--num); font-size: 18px; white-space: nowrap; }
.col .mo small { font-family: var(--song); font-size: 11px; color: var(--ink-3); }
.col .n { font-family: var(--num); font-size: 12px; color: var(--ink-2); }
.col.we .n { color: var(--holiday); }
.col .ln { writing-mode: vertical-rl; font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.col .seal { writing-mode: vertical-rl; padding: 4px 2px; font-size: 13px; letter-spacing: .1em; }
.col .hk { position: absolute; bottom: 0; font-family: var(--sans); font-size: 10px; color: var(--holiday); writing-mode: vertical-rl; }
.col.today { background: var(--paper-2); border-radius: 4px; }
.col.today .n { background: var(--ink); color: var(--paper); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; }
.col.off .n { color: var(--holiday); font-weight: 700; }
.caption { padding: 0 32px; margin: 0 0 14px; font-family: var(--sans); font-size: 12px; color: var(--ink-2); }

/* ── 月历纸（屏幕与打印共用；字号按纸宽 cqw 缩放，所以 A3/A4 版式一致） ───── */
.sheet-host { padding: 10px 32px 40px; }
.sheet {
  --k: 1; container-type: inline-size; background: #fff; color: var(--ink); width: 100%; aspect-ratio: 420 / 297;
  display: grid; grid-template-columns: 6.2cqw 1fr 21cqw; box-shadow: 0 1px 0 var(--rule), 0 12px 40px rgba(30, 42, 48, .08);
  overflow: hidden; position: relative;
}
.sheet.a4 { --k: 1.12; }
.sheet + .sheet { margin-top: 28px; }

/* 签条：竖排，挂轴题签 */
.label { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; padding: 2.2cqw 0 1.6cqw; gap: 1.2cqw; }
.label .ym { writing-mode: vertical-rl; font-size: calc(2.4cqw * var(--k)); letter-spacing: .25em; font-weight: 700; }
.label .sub { writing-mode: vertical-rl; font-size: calc(.95cqw * var(--k)); letter-spacing: .3em; color: #c5cfcc; }
.label .seal { margin-top: auto; width: 3.2cqw; height: 3.2cqw; font-size: calc(1.6cqw * var(--k)); --c: var(--tianshe); }

.mgrid { display: grid; grid-template-rows: 2.6cqw repeat(var(--rows), 1fr); grid-template-columns: repeat(7, 1fr); padding: 1.6cqw 1.4cqw 1.4cqw; min-height: 0; }
.mgrid .wh { font-family: var(--sans); font-size: calc(.85cqw * var(--k)); color: var(--ink-3); display: flex; align-items: center; padding-left: .5cqw; border-bottom: 1.5px solid var(--ink); letter-spacing: .2em; }
.mgrid .wh.we { color: var(--holiday); }
.cell { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .45cqw .5cqw .3cqw; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.cell:nth-child(7n + 7) { border-right: 0; }
.cell.we { background: #f6f8f7; }
.cell.pad { background: transparent; }
.cell.off { background: #fbf0ee; }
.cell .hdr { display: flex; align-items: flex-start; gap: .4cqw; }
.cell .num { font-family: var(--num); font-size: calc(2.15cqw * var(--k)); line-height: .9; }
.cell.off .num, .cell.we .num { color: var(--holiday); }
.cell .ln { font-size: calc(.82cqw * var(--k)); color: var(--ink-2); line-height: 1.25; }
.cell .ln b { color: var(--jieqi); }
.cell .seal { margin-left: auto; font-size: calc(.95cqw * var(--k)); padding: .25cqw .35cqw; letter-spacing: .08em; }
.cell .sp { display: flex; gap: .25cqw; flex-wrap: wrap; margin-top: .15cqw; }
.cell .sp span { font-family: var(--sans); font-size: calc(.62cqw * var(--k)); border: 1px solid currentColor; padding: 0 .2cqw; border-radius: 2px; }
.cell .ev { list-style: none; margin: .25cqw 0 0; padding: 0; font-family: var(--kai); font-size: calc(.7cqw * var(--k)); line-height: 1.28; flex: 1; min-height: 0; }
.cell .ev li { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cell .ev li.fo { color: #8a5d05; }
.cell .ev li.dao { color: var(--dao); }
.cell .ev li.fn { color: var(--ink-3); font-family: var(--sans); font-size: calc(.6cqw * var(--k)); }
.cell .ev li sup, .side sup { font-family: var(--sans); color: var(--ink-3); }
.cell .hol { display: flex; flex-wrap: wrap; gap: .2cqw; margin-top: .15cqw; }
.cell .hol span { font-family: var(--sans); font-size: calc(.6cqw * var(--k)); color: var(--holiday); border: 1px solid var(--holiday); border-radius: 2px; padding: 0 .2cqw; white-space: nowrap; }
.cell .hol span.work { color: var(--ink); border-color: var(--ink); }
.cell .hol span.pred { border-style: dashed; }
.cell .disp { font-family: var(--sans); font-size: calc(.55cqw * var(--k)); color: var(--tianshe); }

.side { border-left: 1px solid var(--rule); padding: 1.6cqw 1.3cqw 1.2cqw; font-size: calc(.78cqw * var(--k)); display: flex; flex-direction: column; gap: 1cqw; min-height: 0; overflow: hidden; background: #fbfcfb; }
.side h4 { margin: 0 0 .35cqw; font-size: calc(.85cqw * var(--k)); letter-spacing: .3em; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: .2cqw; font-weight: 700; }
.side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .22cqw; }
.side li { display: grid; grid-template-columns: 3.4cqw 1fr; gap: .4cqw; align-items: baseline; line-height: 1.3; }
.side li .dt { font-family: var(--num); color: var(--ink-2); }
.side li .seal { font-size: calc(.7cqw * var(--k)); padding: .12cqw .25cqw; margin-right: .3cqw; }
.side .notes li { font-family: var(--kai); grid-template-columns: 3.4cqw 1fr; }
.side li .dt { white-space: nowrap; }
.side .legend-s { display: flex; flex-wrap: wrap; gap: .3cqw .8cqw; font-family: var(--sans); font-size: calc(.65cqw * var(--k)); color: var(--ink-2); margin-top: auto; }
.side .legend-s i { display: inline-block; width: .8cqw; height: .8cqw; border-radius: 1px; margin-right: .25cqw; vertical-align: -.1cqw; }
.side .src { font-family: var(--sans); font-size: calc(.55cqw * var(--k)); color: var(--ink-3); line-height: 1.4; }

.tool { display: flex; gap: 8px; align-items: center; padding: 0 32px; font-family: var(--sans); font-size: 13px; flex-wrap: wrap; }
.tool .grow { flex: 1; }
.tool select { font: inherit; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; }
.tool .primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── 打印：只打印月历纸，每张一页 ─────────────────────── */
@media print {
  html, body { background: #fff; }
  .top, .yearbar, .tool, .legend, .no-print { display: none !important; }
  .sheet-host { padding: 0; }
  .sheet { box-shadow: none; aspect-ratio: auto; break-after: page; margin: 0 !important; }
  .sheet:last-child { break-after: auto; }
  .sheet.a3 { width: 420mm; height: 297mm; }
  .sheet.a4 { width: 297mm; height: 210mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* 实底印章上的数字一律白字（放假红字不能盖过印章色） */
.mini .d.fill b, .mini .d.fill.off b { color: #fff; }