@charset "utf-8";
/* ==========================================================================
   万年历 · 单日黄历  —  样式表
   方向：铅字黄历 / Letterpress Almanac
   宣纸暖白 · 墨黑 · 朱砂（青黛仅用于节气语义）
   ========================================================================== */

/* ------------------------------------------------------------ 设计令牌 */

:root {
  color-scheme: light;

  --paper:   #f7f2e8;
  --paper-2: #efe8d9;
  --paper-3: #e5dbc6;

  --ink:     #120e0b;
  --ink-2:   #57504a;
  --ink-3:   #857d72;
  --ink-4:   #ada59a;

  --line:    #ded5c6;
  --line-2:  #c9bfae;

  --cinnabar:      #b8402d;
  --cinnabar-deep: #8d2c1d;
  --cinnabar-tint: #f7e6e0;

  --indigo:      #3c4a6b;
  --indigo-tint: #e6e8f0;

  --moss:      #34624c;
  --moss-tint: #e3ece6;

  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STZhongsong",
           "SimSun", Georgia, "Times New Roman", serif;
  --sans:  "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
           "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --shell: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------ 基础 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, rgba(0,0,0,0.35) 46%, transparent 76%);
          mask-image: radial-gradient(130% 78% at 50% 0%, #000 0%, rgba(0,0,0,0.35) 46%, transparent 76%);
}

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--cinnabar); color: var(--paper); }

:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) 0;
}

/* ------------------------------------------------------------ 报头 */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0 15px;
  border-bottom: 1px solid var(--line-2);
}

.brand { display: flex; align-items: center; gap: 11px; }

.seal {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  background: var(--cinnabar);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  border-radius: 3px;
  transform: rotate(-2.5deg);
  line-height: 1;
  user-select: none;
}

.seal--small { width: 24px; height: 24px; font-size: 0.8rem; border-radius: 2px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: 0.08em; }
.brand-text i {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.mast-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 0.86rem;
}
.mast-nav .nav-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.mast-nav .nav-top:hover { border-color: var(--line-2); color: var(--ink); }
.mast-nav .nav-top.is-active { background: var(--ink); color: var(--paper); }

.nav-num {
  font-family: var(--serif);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--ink-4);
}
.nav-top.is-active .nav-num { color: var(--paper); opacity: 0.72; }

.nav-caret {
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.4;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* ---------------------------------------------- 能力域下拉 */

.nav-dom { position: relative; }

.nav-dom:hover > .nav-top,
.nav-dom:focus-within > .nav-top,
.nav-dom.is-open > .nav-top {
  border-color: var(--line-2);
  color: var(--ink);
  background: var(--paper-2);
}
.nav-dom.is-current > .nav-top { color: var(--ink); border-color: var(--line-2); }

.nav-dom:hover .nav-caret,
.nav-dom:focus-within .nav-caret,
.nav-dom.is-open .nav-caret { transform: rotate(225deg); opacity: 0.75; }

.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  width: max-content;
  min-width: 300px;
  max-width: min(90vw, 620px);
  margin-top: 7px;
  padding: 14px 16px 15px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: 0 16px 36px -20px rgba(43, 38, 34, 0.45), 0 1px 0 var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}

/* 面板与导航之间的隐形「桥」，鼠标下移时不断开 */
.nav-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 9px;
}

/* 面板顶部一道朱砂短线，呼应印章语言 */
.nav-drop::after {
  content: "";
  position: absolute;
  left: 16px;
  top: -1px;
  width: 26px;
  height: 2px;
  background: var(--cinnabar);
}

.nav-dom:hover .nav-drop,
.nav-dom:focus-within .nav-drop,
.nav-dom.is-open .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 首尾两个域靠边，面板改为贴边对齐，避免溢出视口 */
.nav-dom:first-of-type .nav-drop { left: 0; transform: translate(0, -6px); }
.nav-dom:last-of-type .nav-drop { left: auto; right: 0; transform: translate(0, -6px); }
.nav-dom:first-of-type:hover .nav-drop,
.nav-dom:first-of-type:focus-within .nav-drop,
.nav-dom:first-of-type.is-open .nav-drop,
.nav-dom:last-of-type:hover .nav-drop,
.nav-dom:last-of-type:focus-within .nav-drop,
.nav-dom:last-of-type.is-open .nav-drop { transform: translate(0, 0); }

.nd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.nd-head span {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.nd-head i {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.nd-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(188px, 1fr));
  gap: 1px 16px;
}
.nd-list li { min-width: 0; }
.nd-list a {
  display: block;
  padding: 6px 8px;
  border-left: 2px solid transparent;
  border-radius: 0 2px 2px 0;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.nd-list a:hover { background: var(--paper-2); border-left-color: var(--cinnabar); }
.nd-list a.is-active { background: var(--cinnabar-tint); border-left-color: var(--cinnabar); }
/* 下拉第一项「本域概览」：指向能力域页面，比工具项略重 */
.nd-list a.nd-all { background: var(--paper-2); border-left-color: var(--line-2); }
.nd-list a.nd-all:hover { border-left-color: var(--cinnabar); }
.nd-list a.nd-all b { color: var(--ink); }
.nd-list b { display: block; font-size: 0.86rem; font-weight: 600; line-height: 1.5; }
.nd-list span {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ 日期导航 */

.daynav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 30px 0 6px;
}

.dn-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--ink-2);
  transition: color 0.18s var(--ease);
}
.dn-btn:hover { color: var(--cinnabar); }
.dn-btn--next { justify-content: flex-end; }
.dn-arrow { font-size: 1rem; color: var(--ink-4); transition: transform 0.22s var(--ease); }
.dn-btn:hover .dn-arrow { transform: translateX(-3px); color: var(--cinnabar); }
.dn-btn--next:hover .dn-arrow { transform: translateX(3px); }
.dn-body { display: flex; flex-direction: column; line-height: 1.3; }
.dn-btn--next .dn-body { align-items: flex-end; }
.dn-body b { font-weight: 500; }
.dn-body i { font-style: normal; font-size: 0.74rem; color: var(--ink-4); }

.dn-title { text-align: center; }
.dn-title h1 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.dn-week {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.42em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  vertical-align: middle;
}
.dn-sub { margin-top: 6px; font-size: 0.86rem; color: var(--ink-3); letter-spacing: 0.03em; }

.lede {
  max-width: 62ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ 撕历速览 */

.hero {
  display: grid;
  grid-template-columns: minmax(210px, 260px) 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  margin-top: clamp(34px, 6vw, 58px);
}

.leaf {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 22px 20px 16px;
  text-align: center;
  box-shadow: 0 18px 40px -26px rgba(43, 38, 34, 0.4);
}

.leaf-bind {
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--ink-4) 0 2px, transparent 2px 6px);
  opacity: 0.55;
}

.leaf-month {
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.3em;
  color: var(--cinnabar);
  text-indent: 0.3em;
}

.leaf-day {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.leaf-num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 9vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.leaf-week { font-size: 0.8rem; color: var(--ink-3); }

.leaf-foot { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.lf-lunar { color: #B8864E; font-family: "Noto Serif SC", "SimSun", "宋体", serif; font-size:1.2rem; font-weight:bold; }
.lf-gz { color: var(--ink-4); font-size: 0.74rem; letter-spacing: 0.08em; }
.lf-mark {
  align-self: center;
  margin: 2px 0;
  padding: 1px 9px;
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  color: var(--cinnabar);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.lf-mark--work { border-color: var(--ink-3); color: var(--ink-3); }

/* 撕历脚部一行小注：生肖 · 星座 · 季 · 月相，用间隔点连排 */
.lf-gg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.lf-gg i { font-style: normal; }
.lf-gg i + i::before {
  content: "·";
  margin: 0 0.45em;
  color: var(--ink-4);
  opacity: 0.7;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: flex;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.facts > div:nth-child(odd) { padding-right: 18px; }
.facts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.facts dt {
  flex: 0 0 auto;
  min-width: 4.6em;
  font-size: 0.78rem;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}
.facts dd { font-size: 0.88rem; color: var(--ink); }

/* ------------------------------------------------------------ 区块 */

.sec { margin-top: clamp(48px, 8vw, 86px); }

.sec-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.sec-num {
  font-family: var(--serif);
  font-size: 0.84rem;
  color: var(--cinnabar);
  letter-spacing: 0.1em;
}
.sec-title {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2.6vw, 1.38rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.sec-en {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--ink-4);
  letter-spacing: 0.14em;
}

/* ------------------------------------------------------------ 宜忌 */

.yj { display: grid; gap: 18px; }

.yj-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }

.yj-key {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--paper);
  user-select: none;
}
.yj-key--yi { background: var(--cinnabar); }
.yj-key--ji { background: var(--ink); }

.yj-list { display: flex; flex-wrap: wrap; gap: 7px 8px; padding-top: 6px; }
.yj-list li {
  padding: 3px 12px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-size: 0.88rem;
  background: var(--paper-2);
}
.yj-list--ji li { background: transparent; color: var(--ink-2); }
.yj-list li.is-empty { border-style: dashed; color: var(--ink-3); }

.yj-line{
  color: var(--ink-3);
    font-size: 0.78rem;padding: 7px 14px;
    letter-spacing: 0.02em;border: 1px solid var(--line);
    border-radius: 2px;background: var(--paper);margin-top: -1px;
}
.yj-line>span{color: var(--ink-2);}
.gods {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
  display: grid;
  gap: 10px;
}
.god-row { display: grid; grid-template-columns: 5.6em 1fr; gap: 14px; align-items: baseline; }
.god-key { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; }
.god-key--good { color: var(--moss); }
.god-key--bad { color: var(--cinnabar-deep); }
.god-val { font-size: 0.86rem; color: var(--ink-2); line-height: 1.8; }

/* ------------------------------------------------------------ 面板 */

.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panels--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel {
  padding: 20px 20px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.panel-h {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.panel-big {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.panel-dl { display: grid; gap: 7px; }
.panel-dl > div { display: flex; gap: 10px; font-size: 0.85rem; }
.panel-dl dt { flex: 0 0 5.4em; color: var(--ink-4); font-size: 0.78rem; }
.panel-dl dd { color: var(--ink); }

.panel-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-2);
  font-size: 0.8rem;
  color: var(--cinnabar);
}

.tag {
  padding: 1px 8px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.tag--good { background: var(--moss-tint); color: var(--moss); }
.tag--bad { background: var(--cinnabar-tint); color: var(--cinnabar-deep); }

.term-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
}
.t-prev, .t-next { font-size: 0.86rem; color: var(--ink-4); }
.t-cur { font-size: 1.2rem; font-weight: 600; color: var(--indigo); }

.fest-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fest {
  padding: 4px 14px;
  border-radius: 2px;
  font-size: 0.85rem;
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
}
.fest--solar { border-color: var(--indigo); color: var(--indigo); }

/* ------------------------------------------------------------ 十二时辰 */

/* 加了宜忌之后每个时辰变高，四列太挤 —— 宽屏两列、窄屏一列 */
.hours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 700px) {
  .hours { grid-template-columns: 1fr; }
}

.hour {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 2px;
}
.hour.is-good { border-left-color: var(--moss); }
.hour.is-bad { border-left-color: var(--line-2); }

.h-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.h-mid { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.h-name { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; }
.h-gz { font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.08em; }
.h-star { font-size: 0.84rem; color: var(--ink-2); }
.h-luck { font-size: 0.72rem; letter-spacing: 0.1em; }
.hour.is-good .h-luck { color: var(--moss); }
.hour.is-bad .h-luck { color: var(--ink-4); }
.h-range { font-size: 0.72rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* 时辰宜忌：与右栏卡片同一套「色块 + 文字」的写法 */
.h-yj { display: flex; gap: 8px; }
.h-k {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 2px;
  color: #fff;
}
.h-k--yi { background: var(--cinnabar); }
.h-k--ji { background: var(--ink); }
.h-v { font-size: 0.78rem; color: var(--ink-2); line-height: 1.55; }

/* 黄历详情里的独立 panel（不在 .panels 两栏里时补上间距） */
.sec > .panel { margin-top: 12px; }

/* ------------------------------------------------------------ 黄历详情键值网格 */

/* 标签左、值右，列数随宽度自适应；行列之间靠发丝线分隔，不打卡片。
   窄列里「吉神宜趋」这类长列表自然折行。 */
.alm-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  column-gap: 20px;
  margin-top: -1px;
  padding: 2px 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
}

.alm-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.7;
}
.alm-row dt {
  flex: 0 0 68px;
  color: var(--ink-3);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.alm-row dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-2);
  word-break: break-word;
}
/* 值后面的小字补充：黑道 · 凶日 / 南方朱雀 · 凶 / 寒露 初候 */
.alm-row dd em {
  margin-left: 4px;
  font-style: normal;
  font-size: 0.74rem;
  color: var(--ink-4);
}
/* 吉神宜趋＝朱砂（与「宜」同义），凶煞宜忌＝纯墨（压重） */
.alm-row.is-luck dd { color: var(--cinnabar); }
.alm-row.is-bad dd { color: var(--ink); }

/* 通栏行：星宿歌诀 / 纪念日 —— 占满整行，正文小一号、行距放松 */
.alm-row.is-full { grid-column: 1 / -1; }
.alm-row.is-full dd {
  font-size: 0.8rem;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------ 日历 */

.cal { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }

.cal-head, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-head {
  background: var(--paper-3);
  border-bottom: 1px solid var(--line-2);
}
.cal-head span {
  padding: 9px 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}

.cal-grid { background: var(--line); gap: 1px; }

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 66px;
  padding: 9px 4px;
  background: var(--paper);
  transition: background 0.16s var(--ease);
}
.cal-cell:hover { background: var(--paper-2); }
.cal-cell b {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.cal-cell i {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.cal-cell.is-weekend i { color: var(--ink-3); }
.cal-cell.is-current { background: var(--cinnabar-tint); }
.cal-cell.is-current b { color: var(--cinnabar-deep); }
.cal-cell.is-current i { color: var(--cinnabar); }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--cinnabar); }

/* ------------------------------------------------------- 月相日历 */

/* 复用 .cal-head / .cal-grid 的 7 列骨架，格子换成带图标的竖向排布 */
.moon-cal { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }

.moon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 92px;
  padding: 8px 4px 7px;
  background: var(--paper);
  text-align: center;
  transition: background 0.16s var(--ease);
}
.moon-cell:hover { background: var(--paper-2); }

.mc-day {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* 图标本体：暗面用极淡的墨色描边做「月盘」，亮面为实色 */
.mc-icon { display: block; line-height: 0; }
.mph-i { display: block; }
.mph-disc { fill: var(--paper-3); stroke: var(--line-2); stroke-width: 0.8; }
.mph-lit { fill: var(--ink); }

.mc-phase {
  font-size: 0.72rem;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
/* 四个主要相位加重：朱砂色，与表格里的行首名一致 */
.mc-phase.is-main { color: var(--cinnabar); font-weight: 600; }

.mc-lunar,
.mc-mark {
  font-size: 0.66rem;
  color: var(--ink-4);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
/* 有精确时刻的格子用青黛，和农历日区分开 */
.mc-mark { color: var(--indigo); }

.moon-cell.is-weekend .mc-day { color: var(--ink-3); }
.moon-cell.is-main { background: var(--cinnabar-tint); }
.moon-cell.is-main:hover { background: var(--cinnabar-tint); }
.moon-cell.is-main .mc-day { color: var(--cinnabar-deep); }
.moon-cell.is-today { box-shadow: inset 0 0 0 2px var(--cinnabar); }

/* 补位的相邻月日期（月首前 / 月末后）：只给日号与农历日名，文字压淡。
   与万年历 .cal-cell.is-out 同口径；写在 is-weekend 之后才能盖住它的配色。 */
.moon-cell.is-out .mc-day { color: var(--ink-4); font-weight: 400; }
.moon-cell.is-out .mc-lunar { color: var(--ink-4); opacity: 0.6; }

/* 八相图例 */
.moon-key {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.moon-key li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 9px;
  background: var(--paper);
}
.mk-icon { display: block; line-height: 0; flex: none; }
.mk-body { display: flex; flex-direction: column; min-width: 0; }
.mk-body b {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mk-body i {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--ink-4);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .moon-key { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .moon-cell { min-height: 84px; }
}

@media (max-width: 560px) {
  .moon-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moon-cell { min-height: 74px; padding: 6px 2px 5px; gap: 1px; }
  .mc-day { font-size: 0.86rem; }
  .mc-phase { font-size: 0.66rem; letter-spacing: 0; }
  .mc-lunar, .mc-mark { font-size: 0.6rem; }
  .mph-i { width: 17px; height: 17px; }
}

/* ------------------------------------------- 全年放假月历（法定节假日） */

/* 一年 12 张迷你月历：桌面一行 4 张，窄屏退到 3 / 2 张。
   格子三种状态 —— 假期（浅红底 + 深红字）、已经过去的假期（浅灰底，字仍是深红）、
   调休上班（不铺底，只用虚线下划线点一下）。 */
.year-cal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) { .year-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .year-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.yc-card {
  padding: 9px 9px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
}

.yc-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.yc-head b {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.yc-head i {
  min-width: 0;
  font-style: normal;
  font-size: 0.66rem;
  color: var(--cinnabar);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yc-week, .yc-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.yc-week span {
  text-align: center;
  font-size: 0.6rem;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.yc-days { margin-top: 3px; }

.yc-d {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.yc-d.is-blank { visibility: hidden; }

/* 假期（还没到的）：红底白字 —— 底色取的就是原来那格字体的朱砂深色 */
.yc-d.is-rest { background: var(--cinnabar-deep); color: var(--paper); font-weight: 700; }
/* 已经过去的假期：底色换浅灰，字色回到朱砂深色 */
.yc-d.is-rest.is-past { background: #e7e4de; color: var(--cinnabar-deep); }
/* 调休上班：整格压深底 + 反白。
   虚线下划线太轻，扫一眼根本看不出哪些周末要上班；这里改用与万年历格子
   右上角「班」角标同一套墨色（--ink-2 底 / 纸白字），一眼可辨。 */
.yc-d.is-work {
  background: var(--ink-2);
  color: var(--paper);
  font-weight: 700;
}

.yc-foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 7px 0 0;
  padding-top: 5px;
  border-top: 1px solid var(--line);
  font-size: 0.66rem;
  color: var(--ink-3);
}
.yc-foot b { font-weight: 600; color: var(--cinnabar); }
.yc-foot i { font-style: normal; }
.yc-none { color: var(--ink-4); }

.yc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  color: var(--ink-3);
}
.yc-legend li { display: flex; align-items: center; gap: 6px; }
.yc-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
}
.yc-key.is-rest { background: var(--cinnabar-deep); color: var(--paper); }
.yc-key.is-past { background: #e7e4de; color: var(--cinnabar-deep); }
.yc-key.is-work { background: var(--ink-2); color: var(--paper); }

/* ------------------------------------------------------------ 错误页 */

.err {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 58vh;
  text-align: center;
  padding: 40px 0;
}
.err-code {
  font-family: var(--serif);
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--line-2);
  letter-spacing: 0.06em;
}
.err-h { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.err-msg { color: var(--ink-3); font-size: 0.92rem; }
.err-act { margin-top: 12px; }

.btn {
  display: inline-block;
  padding: 9px 22px;
  background: var(--cinnabar);
  color: var(--paper);
  border-radius: 2px;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  transition: background 0.18s var(--ease);
}
.btn:hover { background: var(--cinnabar-deep); }

/* ------------------------------------------------------------ 页脚 */

.colophon {
  /*display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;*/
  margin-top: clamp(56px, 9vw, 100px);
  padding: 26px 0 44px;
  border-top: 1px solid var(--line-2); text-align: center;
}
.colo-note p { font-size: 0.78rem; line-height: 1.9; color: var(--ink-3);   }
.colo-note b { color: var(--ink-2); font-weight: 500; }
.colo-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--ink-4);
  letter-spacing: 0.1em;
  justify-content: center;
  padding: 15px 0 15px;
}
.colo-mark>p{color: #333}
.ulink{ color:#111; font-size:12px; text-align:left }

/* ------------------------------------------------------------ 响应式 */

/* 导航项较多，窄一些就换行占满整行 */
@media (max-width: 1080px) {
  .masthead { flex-wrap: wrap; row-gap: 12px; }
  .mast-nav { position: relative; width: 100%; }

  /* 下拉改为相对整条导航居中，宽度与内容区一致。
     下拉即使 visibility:hidden 也仍占布局，若相对各自的域按钮居中，
     靠右那几个会撑出横向滚动条（实测 390px 下溢出 73px）。 */
  .nav-dom { position: static; }
  .nav-drop,
  .nav-dom:first-of-type .nav-drop,
  .nav-dom:last-of-type .nav-drop {
    left: 50%;
    right: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    transform: translate(-50%, -6px);
  }
  .nav-dom:hover .nav-drop,
  .nav-dom:focus-within .nav-drop,
  .nav-dom.is-open .nav-drop,
  .nav-dom:first-of-type:hover .nav-drop,
  .nav-dom:first-of-type:focus-within .nav-drop,
  .nav-dom:first-of-type.is-open .nav-drop,
  .nav-dom:last-of-type:hover .nav-drop,
  .nav-dom:last-of-type:focus-within .nav-drop,
  .nav-dom:last-of-type.is-open .nav-drop { transform: translate(-50%, 0); }

  /* 单列后项数多的域会很长，限高内滚（加在 .nd-list 上，
     免得裁掉 .nav-drop 的 ::before「桥」和顶部朱砂线） */
  .nd-list {
    grid-template-columns: 1fr;
    max-height: min(62vh, 460px);
    overflow-y: auto;
    padding-right: 2px;
  }
}

@media (max-width: 980px) {
  .panels--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .leaf { max-width: 280px; margin: 0 auto; }
  .panels, .panels--three { grid-template-columns: 1fr; }
  .hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: 1fr; }
  .facts > div:nth-child(even) { padding-left: 2px; border-left: 0; }
  .facts > div:nth-child(odd) { padding-right: 2px; }
  .daynav { grid-template-columns: 1fr 1fr; }
  .dn-title { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
  .colophon { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hours { grid-template-columns: 1fr; }
  .cal-cell { min-height: 56px; }
  .sec-en { display: none; }
}

@media print {
  body::before { display: none; }
  .daynav, .mast-nav, .cal, .picker, .crumb, .chips, .cards, .toolgrid, .festlist, .syslist { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop, .nav-caret, .mast-nav .nav-top, .nd-list a { transition: none; }
}

/* ==========================================================================
   工具箱：首页与通用工具页
   ========================================================================== */

/* ------------------------------------------------------------ 首页 */

/* 首屏不是横幅，是「本年节日倒计时」—— 来日历站最常见的诉求是「下一个节还有几天」 */

.home-intro { padding: 28px 0 2px; }

.home-h {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.home-sub {
  max-width: 68ch;
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--ink-2);
}
.home-sub b { font-weight: 600; color: var(--ink); }

.home-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.home-stat b {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--cinnabar);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 放假安排 */

.holbox { margin-top: clamp(26px, 4.4vw, 42px); }

.hol-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 13px 18px;
  background: var(--cinnabar-tint);
  border-left: 3px solid var(--cinnabar);
  border-radius: 0 2px 2px 0;
}
.hol-next.is-done { background: var(--paper-2); border-left-color: var(--line-2); }

.hn-label { font-size: 0.74rem; color: var(--cinnabar-deep); letter-spacing: 0.12em; }
.hol-next.is-done .hn-label { color: var(--ink-3); }
.hol-next b {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.hn-span { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hol-next em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--cinnabar-deep);
  font-variant-numeric: tabular-nums;
}
.hol-next.is-done em { color: var(--ink-3); }

.hol-sum { margin-top: 12px; font-size: 0.8rem; color: var(--ink-3); }
.hol-sum b {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 与 .festlist 同一套做法：grid + outline，末行留白是纸色 */
.hollist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  margin-top: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.hol-item {
  min-width: 0;
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.hol-item a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px 14px 13px;
  transition: background 0.16s var(--ease);
}

.hi-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hi-name { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; }
.hi-gap {
  flex: none;
  font-size: 0.72rem;
  color: var(--cinnabar);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.hi-span { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hi-foot { font-size: 0.7rem; line-height: 1.6; color: var(--ink-4); }

/* 还没到：高亮 —— 朱砂淡底 + 左侧朱砂条 */
.hol-item.is-soon { background: var(--cinnabar-tint); }
.hol-item.is-soon a { box-shadow: inset 3px 0 0 var(--cinnabar); }
.hol-item.is-soon .hi-name { color: var(--cinnabar-deep); }
.hol-item.is-soon .hi-span { color: var(--ink); }
.hol-item.is-soon a:hover { background: #f2dcd3; }

/* 正在放假：朱砂实底反白，是全页最重的一块 */
.hol-item.is-now,
.hol-item.is-now a { background: var(--cinnabar); }
.hol-item.is-now .hi-name,
.hol-item.is-now .hi-gap,
.hol-item.is-now .hi-span { color: #fff; }
.hol-item.is-now .hi-foot { color: rgba(255, 255, 255, 0.74); }
.hol-item.is-now a:hover { background: var(--cinnabar-deep); }

/* 已休完：标灰 */
.hol-item.is-past a { opacity: 0.5; }
.hol-item.is-past .hi-gap { color: var(--ink-4); }
.hol-item.is-past .hi-name { font-weight: 500; }

.hol-sep {
  margin-top: 16px;
  padding-left: 2px;
  font-size: 0.72rem;
  color: var(--ink-4);
  letter-spacing: 0.16em;
}

.hol-note { margin-top: 14px; font-size: 0.78rem; line-height: 1.9; color: var(--ink-3); }
.hol-note a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.hol-note a:hover { color: var(--cinnabar); border-bottom-color: var(--cinnabar); }

/* -------------------------------------------------------- 节日倒计时 */

.festbox { margin-top: clamp(26px, 4.4vw, 42px); }

.fest-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding: 13px 18px;
  background: var(--cinnabar-tint);
  border-left: 3px solid var(--cinnabar);
  border-radius: 0 2px 2px 0;
}
.fn-label {
  font-size: 0.74rem;
  color: var(--cinnabar-deep);
  letter-spacing: 0.12em;
}
.fest-next b {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.fn-date { font-size: 0.8rem; color: var(--ink-3); }
.fest-next em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--cinnabar-deep);
  font-variant-numeric: tabular-nums;
}

/* 与 .toolgrid 同一套做法：grid + outline，末行留白是纸色 */
.festlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  margin-top: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.fest-item {
  min-width: 0;
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.fest-item a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 11px 13px 12px;
  transition: background 0.16s var(--ease);
}
.fest-item a:hover { background: var(--paper-2); }

.fi-gap {
  font-size: 0.72rem;
  color: var(--cinnabar);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.fi-name {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.fest-item a:hover .fi-name { color: var(--cinnabar-deep); }
.fi-date { font-size: 0.76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fi-lunar { font-size: 0.7rem; color: var(--ink-4); }

/* 「未到」与「已过」是两个独立网格，中间用一行小字分隔 */
.fest-sep {
  margin-top: 16px;
  padding-left: 2px;
  font-size: 0.72rem;
  color: var(--ink-4);
  letter-spacing: 0.16em;
}
.fest-item.is-passed a { opacity: 0.5; }
.fest-item.is-passed .fi-gap { color: var(--ink-4); }
.fest-item.is-today { box-shadow: inset 0 0 0 2px var(--cinnabar); }
.fest-item.is-today .fi-gap { font-weight: 600; }

.fest-note {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--ink-3);
}
.fest-note a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.fest-note a:hover { color: var(--cinnabar); border-bottom-color: var(--cinnabar); }

/* 域标题右侧的「本域概览」（紧跟在 .sec-en 之后） */
.sec-more {
  font-size: 0.74rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  transition: color 0.16s var(--ease);
}
.sec-more:hover { color: var(--cinnabar); }

.dom { margin-top: clamp(44px, 7vw, 74px); }

.dom-desc {
  margin: -8px 0 20px;
  font-size: 0.86rem;
  color: var(--ink-3);
}

/* 网格统一用 outline 画格线（outline 不占布局，相邻格自然重叠成一条线）。
   容器底色是纸色而不是线色 —— 末行填不满时，空格处就是纸色留白；
   若把容器铺成线色，那些空格会变成一块灰底，看起来像内容缺失。 */

.toolgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper);
}

.toolgrid > li {
  min-width: 0;
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

/* 单条目的置顶入口（百科总览页的「历法词典」）—— 占满整行，不做成半空的网格 */
.toolgrid--lead { grid-template-columns: 1fr; }

.toolcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--paper);
  transition: background 0.16s var(--ease);
}
.toolcard:hover { background: var(--paper-2); }

.tc-name {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.toolcard:hover .tc-name { color: var(--cinnabar-deep); }

.tc-desc {
  flex: 1;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--ink-3);
}

.tc-go {
  font-size: 0.74rem;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  transition: color 0.16s var(--ease);
}
.toolcard:hover .tc-go { color: var(--cinnabar); }

/* ------------------------------------------------------------ 能力域页面 */

/* 本域涉及的历法体系（链到词典锚点）。同样 grid + outline */
.syslist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.syslist li {
  min-width: 0;
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.syslist a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 13px 15px;
  transition: background 0.16s var(--ease);
}
.syslist a:hover { background: var(--paper-2); }

.syslist b {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.07em;
}
.syslist a:hover b { color: var(--cinnabar-deep); }

.syslist i {
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-4);
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------ 面包屑 */

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 22px 0 0;
  font-size: 0.78rem;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.crumb a { color: var(--ink-3); transition: color 0.16s var(--ease); }
.crumb a:hover { color: var(--cinnabar); }
.crumb-cur { color: var(--ink-2); }

/* ------------------------------------------------------------ 工具页头 */

.tool-head { padding: 18px 0 4px; }

.tool-domain {
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--cinnabar);
  letter-spacing: 0.16em;
}

.tool-h {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.tool-desc {
  max-width: 66ch;
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ 参数选择器 */

.picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pk-label {
  font-size: 0.78rem;
  color: var(--ink-4);
  letter-spacing: 0.08em;
}

.picker input {
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.picker input:focus { outline: 2px solid var(--cinnabar); outline-offset: 1px; }
.picker input[type="number"] { width: 8.5em; }

.picker select {
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.picker select:focus { outline: 2px solid var(--cinnabar); outline-offset: 1px; }

.picker--form { gap: 12px 16px; }
.pk-field { display: flex; align-items: center; gap: 7px; }

.pk-today {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--line-2);
  transition: color 0.16s var(--ease);
}
.pk-today:hover { color: var(--cinnabar); }

.btn--sm { padding: 7px 18px; font-size: 0.82rem; border: 0; cursor: pointer; font-family: var(--sans); }

.alert {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--cinnabar-tint);
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  font-size: 0.86rem;
  color: var(--cinnabar-deep);
}

/* ------------------------------------------------------------ 大数字 */

.hero-num {
  margin-top: clamp(28px, 4vw, 42px);
  padding: clamp(22px, 3vw, 32px) 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cinnabar);
  border-radius: 2px;
  text-align: center;
}
.hn-label { font-size: 0.78rem; color: var(--ink-4); letter-spacing: 0.16em; }
.hn-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 8vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hn-value i { font-style: normal; font-size: 0.34em; font-weight: 400; color: var(--ink-3); }
.hn-sub { margin-top: 6px; font-size: 0.82rem; color: var(--ink-3); }

/* ------------------------------------------------------------ 区块微调 */

.sec--tight { margin-top: clamp(28px, 4vw, 44px); }

/* 互链区：一页可能有四五组，按常规区块的间距排会拖出一大片空白 */
.sec--rel { margin-top: clamp(24px, 3.4vw, 36px); }
.sec--rel .chips li { padding: 4px 12px; font-size: 0.84rem; }
.sec--rel .sec-title { font-size: clamp(1rem, 2vw, 1.12rem); }

.lede--left {
  margin: 26px 0 0;
  max-width: 70ch;
  text-align: left;
}

/* ------------------------------------------------------------ 标签云 */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 5px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-size: 0.88rem;
}
.chips li.is-empty { border-style: dashed; color: var(--ink-3); }
.chips li a { transition: color 0.16s var(--ease); }
.chips li a:hover { color: var(--cinnabar); }

.chips--yi li { background: var(--cinnabar-tint); border-color: var(--cinnabar); color: var(--cinnabar-deep); }
.chips--ji li { background: transparent; color: var(--ink-2); }
.chips--good li { background: var(--moss-tint); border-color: var(--moss); color: var(--moss); }
.chips--bad li { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.chips--plain li { background: transparent; }

/* ------------------------------------------------------------ 表格 */

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 2px; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.tbl th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: var(--paper-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--paper-2); }
.tbl tr.is-hl td { background: var(--cinnabar-tint); color: var(--cinnabar-deep); }
.tbl tr.is-hl:hover td { background: var(--cinnabar-tint); }
.tbl td:first-child { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 卡片 */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.card { padding: 15px 16px; background: var(--paper); }

.card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.card-sub { margin-top: 5px; font-size: 0.76rem; color: var(--ink-4); line-height: 1.7; }

/* ------------------------------------------------------------ 口径说明 */

.note-box {
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 2px;
}
.note-box p { font-size: 0.82rem; line-height: 1.9; color: var(--ink-2); }
.note-box p + p { margin-top: 8px; }

/* ------------------------------------------------------------ 响应式 */

@media (max-width: 980px) {
  .toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .toolgrid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker { gap: 8px; }
  .pk-today { margin-left: 0; }
  .tbl { font-size: 0.8rem; }
  .tbl th, .tbl td { padding: 8px 9px; }
}

@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .home-stat { gap: 8px 18px; }
}

/* ---------------------------------------------- 历法百科下拉（捌）

   面板里第一项是「历法词典」（/wiki，本身是个工具），后六项是子分类。
   词典那项的描述比子分类长，让它独占一整行，六项子分类正好排成 3 行 × 2 列。 */

.nav-drop--baike { min-width: 340px; max-width: min(90vw, 560px); }
.nav-drop--baike .nd-list li:first-child { grid-column: 1 / -1; }

/* 百科下拉里描述允许折两行 —— 6 个子分类的名字本身就是并列关系，
   截成一行「农历公历、阳历阴历、闰月闰年、时…」看不出区别。 */
.nav-drop--baike .nd-list span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------------------------------------------- 首页「最新文章」（捌）

   40 篇，4 列 × 10 行。与 .toolgrid 同一套：容器纸色 + outline 画格线，
   避免末行填不满时出现灰底。这里比工具卡更轻 —— 只有分类、标题、日期三行。 */

.latest { margin-top: clamp(44px, 7vw, 74px); }

.latestgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper);
}

.latestgrid > li {
  min-width: 0;
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.latestcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 15px 13px;
  background: var(--paper);
  transition: background 0.16s var(--ease);
}
.latestcard:hover { background: var(--paper-2); }

.lc-cat {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--cinnabar-deep);
}

.lc-title {
  flex: 1;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latestcard:hover .lc-title { color: var(--cinnabar-deep); }

.lc-date {
  font-size: 0.7rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1080px) {
  .latestgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .latestgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .latestgrid { grid-template-columns: 1fr; }
}

/* ==================================================================
   万年历首屏：左今日日期卡片 + 右月历
   ------------------------------------------------------------------
   月历从原来的「伍」号章节提到首屏，日期卡片收起原 hero 的内容。
   全部用 .daytop / .daycard 作用域下的新类，不改 .cal-cell / .facts /
   .leaf 的基础样式 —— 它们还被 tool.php、time.php、zeri-scene.php 共用。
   卡片固定 336px 放左，月历吃掉剩余宽度；DOM 顺序与视觉顺序一致。
   ================================================================== */

.daytop {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: clamp(18px, 3vw, 28px);
}
@media (max-width: 900px) {
  .daytop { grid-template-columns: 1fr; }
}

/* ── 右：月历 ── */

.daytop-cal .cal { border-color: var(--line-2); }

.cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-3);
}
.cal-title { display: flex; align-items: center; gap: 10px; }
.cal-title h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.cal-nav {
  min-width: 26px;
  padding: 2px 7px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.cal-nav:hover {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: #fff;
}
.cal-tip { font-size: 0.74rem; color: var(--ink-3); }

/* 格子加高一点容纳角标；角标只出现在有放假安排的日子 */
.daytop-cal .cal-cell { position: relative; min-height: 72px; }

/* 补位的相邻月日期：日号去掉字重、连同农历一起压淡，只留「这天是几号」。
   必须排在 .cal-cell.is-weekend 之后，否则周末配色会把压淡盖回去。 */
.daytop-cal .cal-cell.is-out b { color: var(--ink-4); font-weight: 400; }
.daytop-cal .cal-cell.is-out i { color: var(--ink-4); opacity: 0.6; }
.cc-mark {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}
.cc-mark--rest { background: var(--cinnabar); }
.cc-mark--work { background: var(--ink-3); }

/* 节气用青黛、节日用朱砂；农历日名保持原色（不覆盖 is-current 的朱砂） */
.cal-cell i.cc-term { color: var(--indigo); font-weight: 600; }
.cal-cell i.cc-fest { color: var(--cinnabar); font-weight: 600; }

/* ── 左：今日日期卡片 ── */

.daycard {
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
}
.dc-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-3); text-align: center;
}
.dc-head h1 { margin: 0; font-size: 0.92rem; font-weight: 900; letter-spacing: 0.1em; }
.dc-head span { font-size: 0.74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 卡片已经自带外框，撕历去掉自己的框与投影，改成卡片内的一个横条 */
.daycard .leaf {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 14px 12px;
}
.daycard .leaf-bind { top: 0; background: var(--cinnabar); opacity: 0.75; }
.daycard .leaf-num { font-size: clamp(5.2rem, 14vw, 6.4rem); color:var(--cinnabar); }

.dc-yiji {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.dc-yj { display: flex; gap: 8px; margin-bottom: 7px; }
.dc-yj:last-child { margin-bottom: 0; }
.dc-k {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
  border-radius: 2px;
  color: #fff;
}
.dc-yj--yi .dc-k { background: var(--cinnabar); }
.dc-yj--ji .dc-k { background: var(--ink); }
.dc-v { font-size: 0.8rem; color: var(--ink-2); line-height: 1.55; }

/* 速览在右栏窄列里改成单列（基础 .facts 是两列带中缝） */
.daycard .facts {
  grid-template-columns: 1fr;
  border-top: 0;
  padding: 4px 14px 10px;
}
.daycard .facts > div { padding: 6px 0; }
.daycard .facts > div:nth-child(odd) { padding-right: 0; }
.daycard .facts > div:nth-child(even) { padding-left: 0; border-left: 0; }