/* ================================================================
 * 日历核心.css — 书页卡片皮肤（设计台 / 翻阅台共用）
 * 自 日历书.html <style> 前段切出。设计 token + 书页 + 打印规则。
 * 各页自己的界面壳（控制条 / 侧栏表单 / body 背景）仍内联在各自文件。
 * ================================================================ */
:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #898781;
  --hairline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --s-hab: #2a78d6;
  --s-stu: #eb6834;
  --s-fam: #1baf7a;
  --s-cha: #eda100;
  --accent: #2a78d6;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --kai: "KaiTi", "楷体", "DFKai-SB", "STKaiti", serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.06%200'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 30px 34px 20px;
  box-shadow: 0 1px 2px rgba(11,11,11,.05), 0 2px 8px rgba(11,11,11,.04),
              0 18px 44px -20px rgba(11,11,11,.18);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.page ::selection { background: #e3edfa; }
.page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page::before { /* 纸张肌理 */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--noise); opacity: .55; pointer-events: none;
}
.page::after { /* 内衬细线框（书页装帧感） */
  content: ""; position: absolute; inset: 10px; border: 1px solid var(--hairline);
  border-radius: 9px; pointer-events: none;
}
.ribbon { /* 顶部书签缎带：标注农历月 */
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 31px; height: 62px; background: var(--accent); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  display: grid; place-items: center; padding-top: 3px; z-index: 1;
  writing-mode: vertical-rl; font-family: var(--kai); font-size: 12.5px;
  letter-spacing: .22em; filter: drop-shadow(0 3px 5px rgba(42,120,214,.30));
}
.p-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.theme-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  letter-spacing: .05em; white-space: nowrap;
}
.theme-chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,120,214,.14);
}
.pnum { text-align: right; font-size: 12px; color: var(--ink-3); line-height: 1.4; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pnum b { color: var(--ink); font-size: 14px; }
.pnum .ck-count { display: block; }

/* 日期区：左侧大日期 + 中间农历星期 + 右侧装饰 */
.date-area { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; align-items: flex-start; }
.date-left { display: flex; gap: 20px; align-items: flex-start; }
.dnum-col { flex: none; }
.dmonth { font-size: 10.5px; color: var(--ink-3); letter-spacing: .3em; margin: 0 0 2px 3px; font-weight: 500; }
.dnum {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(76px, 15vw, 118px); line-height: .9;
}
.dnum-rule { width: 36px; height: 2px; background: var(--ink); opacity: .8; margin: 12px 0 0 3px; }
.dmeta { padding-top: 17px; min-width: 0; }
.lunar { font-family: var(--kai); font-size: 21px; letter-spacing: .08em; }
.dweek { font-size: 12.5px; color: var(--ink-2); letter-spacing: .22em; margin-top: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chipb {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
  letter-spacing: .03em;
}
.chipb svg { width: 13px; height: 13px; }
.chipb.term { color: var(--accent); background: #eef4fc; border: 1px solid rgba(42,120,214,.18); }
.chipb.fest {
  color: color-mix(in srgb, var(--s-stu) 78%, var(--ink));
  background: color-mix(in srgb, var(--s-stu) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--s-stu) 22%, var(--surface));
}
.chipb.custom {
  color: color-mix(in srgb, var(--s-cha) 78%, var(--ink));
  background: color-mix(in srgb, var(--s-cha) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--s-cha) 26%, var(--surface));
}
.chipb.today { color: var(--ink-2); border: 1px solid var(--hairline); background: var(--page); }
.chipb.today::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.deco { width: 148px; height: 148px; flex: none; color: #77756f; margin-top: 0; }
.deco svg { width: 100%; height: 100%; display: block; }

/* 每日一句 */
.orn {
  display: flex; align-items: center; gap: 12px; width: 150px; margin: 22px auto 0;
}
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.orn i { width: 5px; height: 5px; background: var(--ink-3); transform: rotate(45deg); flex: none; }
.quote { margin-top: 8px; padding: 12px 24px 2px; text-align: center; }
.quote .q { font-family: var(--kai); font-size: 17.5px; line-height: 2.05; }
.quote .s { margin-top: 8px; font-size: 12px; color: var(--ink-3); letter-spacing: .1em; }

/* 今日约定（轻打卡） */
.agree {
  display: flex; gap: 12px; align-items: center; margin-top: 16px;
  padding-top: 15px; border-top: 1px solid var(--hairline); min-height: 54px;
}
.cb {
  width: 22px; height: 22px; border-radius: 6.5px; border: 1.5px solid var(--ink-3);
  background: transparent; color: #fff; font-size: 13px; cursor: pointer; flex: none;
  display: grid; place-items: center; font-family: inherit; transition: transform .15s, background .15s, border-color .15s;
}
.cb.on { background: var(--s-fam); border-color: var(--s-fam); }
.cb:active { transform: scale(.9); }
.agree-tx { min-width: 0; }
.agree-tx small { display: block; font-size: 10.5px; color: var(--ink-3); letter-spacing: .2em; }
.agree-tx span { font-size: 14px; color: var(--ink-2); }
.agree.done .agree-tx span { text-decoration: line-through; color: var(--ink-3); }
.colophon { /* 页脚小字（版权页式落款） */
  margin-top: 16px; text-align: center; font-size: 9.5px; color: var(--ink-3);
  letter-spacing: .42em; opacity: .85;
}

/* ========== 响应式（书页部分） ========== */
@media (max-width: 640px) {
  .page { padding: 24px 18px 16px; }
  .page::after { inset: 7px; border-radius: 7px; }
  .ribbon { width: 26px; height: 54px; font-size: 11px; }
  .deco { width: 96px; height: 96px; }
  .date-area { flex-wrap: wrap; }
  .date-left { flex: 1; min-width: 0; }
  .dnum-rule { margin-top: 10px; }
  .orn { width: 112px; margin-top: 16px; }
  .quote { padding: 10px 6px 2px; }
  .quote .q { font-size: 16px; }
  .colophon { letter-spacing: .3em; margin-top: 13px; }
  .pnum .ck-count { display: none; }
}

/* ========== 打印：每页即一张日历页 ========== */
@media print {
  .page { border: none; box-shadow: none; }
  .page::before, .ribbon { display: none; }
}