/* ============================================================
   曹国荣星相馆 · 通书择日
   与首页共用 style.css 的变量，保证是同一个产品
   ============================================================ */

.hl-app{ padding-bottom: calc(var(--tabh) + 26px); }

/* ---------------- 馆训横条 ---------------- */
.motto{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin: 2px 18px 14px;
  padding: 9px 0 10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.motto-side{
  font-family: var(--serif);
  font-size:11.5px;
  letter-spacing:.14em;
  color: var(--gold-dim);
  white-space:nowrap;
}
.motto-dot{
  width:3px; height:3px; border-radius:50%;
  background: var(--gold);
  opacity:.55;
  flex:none;
}

/* ---------------- 今日卡 ---------------- */
/* 卡片是一块压过漆的木牌，不是一张贴上去的色块。
   三件事给它厚度：顶边一道受光的薄刃、底边一道托住的暗线、卡下面投的一线影。
   另加一层斜光叠进 background 本身 —— 左上受光、右下背光，
   不另起图层，零合成开销，也不会盖住字。 */
.hero-day{
  position:relative;
  isolation:isolate;
  margin: 0 16px 18px;
  padding: 18px 18px 14px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(118deg, rgba(255,246,228,.050) 0%, rgba(255,246,228,0) 34%, rgba(0,0,0,.085) 100%),
    linear-gradient(160deg, rgba(201,169,97,.07), rgba(201,169,97,.015) 46%, transparent 70%),
    var(--surface);
  border:1px solid var(--line-mid);
  box-shadow:
    inset 0 1px 0 rgba(255,247,232,.075),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 1px 0 rgba(0,0,0,.28);
  overflow:hidden;
}
/* 整张卡都是入口：轻点即进当日详解，给一点按下的回声 */
.hero-day{ cursor:pointer; transition: transform .16s ease, border-color .16s ease; }
.hero-day:active{ transform: translateY(1px); border-color: rgba(201,169,97,.30); }
.hd-glow{
  position:absolute; top:-70px; right:-40px; width:200px; height:200px;
  background: radial-gradient(circle, rgba(201,169,97,.11), transparent 68%);
  pointer-events:none;
}
.hd-top{ display:flex; gap:16px; align-items:flex-start; position:relative; }
.hd-date{ text-align:center; min-width:66px; flex:none; }
.hd-date b{
  display:block;
  font-family: var(--serif);
  font-size:46px; line-height:1;
  font-weight:500;
  color: var(--gold-hi);
  letter-spacing:-.02em;
}
.hd-date span{
  display:block; margin-top:5px;
  font-size:10.5px; letter-spacing:.16em;
  color: var(--text-3);
}
.hd-meta{ flex:1; min-width:0; padding-top:3px; }
.hd-lunar{
  font-family: var(--serif);
  font-size:19px; line-height:1.3;
  color: var(--text);
  letter-spacing:.03em;
}
.hd-gz{
  margin-top:5px;
  font-size:12px; color: var(--text-2);
  letter-spacing:.08em;
}
.hd-tags{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.hd-tag{
  font-size:10.5px; padding:2px 8px; border-radius:3px;
  border:1px solid var(--line-mid);
  color: var(--gold-dim);
  letter-spacing:.06em;
}
.hd-tag.solid{
  background: rgba(201,169,97,.13);
  border-color: rgba(201,169,97,.28);
  color: var(--gold-hi);
}

/* 正冲：这一日冲哪一生肖、多少岁。
   原「日冲」一栏说的也是这件事的另一半（冲X·干支），客户只认岁数与生肖，
   故日冲撤掉，只留正冲，并从标签串里提出来单列一行 ——
   这是全卡唯一一条「与你本人有关」的硬信息。
   三节同号同色（与干支同金），只靠字距分节：正冲略疏、岁数最紧、干支居中。
   与详情页、长图同一副规矩，三处看上去才是同一条。 */
.hd-chong{
  margin-top:11px;
  display:flex; align-items:baseline; gap:9px;
  letter-spacing:.05em;
}
.hd-chong span{
  font-size:13px; letter-spacing:.18em; text-indent:.18em;
  color: var(--gold-hi);
}
.hd-chong em{
  font-style:normal; font-size:13px;
  letter-spacing:.02em; color: var(--gold-hi);
}
.hd-chong b{
  font-family: var(--serif); font-size:13px; font-weight:400;
  letter-spacing:.10em; text-indent:.10em; color: var(--gold-hi);
}

.hd-body{ margin-top:15px; padding-top:13px; border-top:1px solid var(--line); }
.hd-row{ display:flex; gap:10px; align-items:flex-start; }
.hd-row + .hd-row{ margin-top:9px; }
.hd-k{
  flex:none; min-width:19px; height:19px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  padding:0 5px;
  font-family: var(--serif); font-size:11px;
  letter-spacing:.04em; white-space:nowrap;
  background: rgba(201,169,97,.10);
  color: var(--gold-dim);
  border:1px solid rgba(201,169,97,.22);
  margin-top:2px;
}
.hd-v{
  flex:1; min-width:0;
  display:flex; flex-wrap:wrap; gap:5px 7px;
  font-size:13px; line-height:1.7;
  color: var(--text);
}
.hd-v span{
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.hd-v .none{ color: var(--text-3); }

/* 警示条：岁破、重丧、三丧、重日、复日。
   不是「忌」栏 —— 馆里不列忌；这是无条件的一条避险提示，压在宜项之上。
   金只指路，所以这一块用朱砂，不用金。 */
.hd-warn{
  margin-top:9px;
  font-size:11.5px; line-height:1.72;
  color:#C4675A; letter-spacing:.04em;
}
.hd-warn i{ font-style:normal; margin-right:5px; opacity:.72; }
.hd-warn em{
  font-style:normal; margin-right:7px;
  font-size:10.5px; letter-spacing:.16em; color: var(--gold-dim);
}

/* 交节日：卡上先报一句交的什么节、几点交，节前节后各归哪个月建 */
.hd-split{
  margin-top:8px;
  font-size:11px; line-height:1.7;
  color: var(--gold-dim); letter-spacing:.05em;
}
.hd-split b{ font-weight:400; color: var(--gold-hi); letter-spacing:.08em; }
.hd-split s{ text-decoration:none; color: var(--text-3); margin:0 4px; }

.dt-warn{
  margin-top:16px;
  padding:12px 14px 12px 12px;
  border-left:2px solid rgba(196,103,90,.55);
  background:rgba(196,103,90,.055);
  border-radius:0 6px 6px 0;
}
.dt-warn p{
  font-size:13.5px; line-height:1.86; color:#D08A7A; letter-spacing:.03em;
}
.dt-warn p + p{ margin-top:3px; }
.dt-warn i{ font-style:normal; color:rgba(196,103,90,.7); margin-right:6px; }
.dt-warn .tw-seg{
  font-size:11.5px; color:rgba(208,138,122,.66);
  letter-spacing:.06em; margin-right:8px;
}
.dt-warn .tw-none{ color: var(--text-3); }
.dt-warn .dt-warn-note{
  margin-top:8px; font-size:11px; line-height:1.7;
  color: var(--text-3); letter-spacing:.04em;
}

/* 交节日：一天跨两个月建。先报交的哪个节、几点交，再报节前节后各归哪个月。 */
/* 正冲：三柱之下单列一块。
   这一条对得上具体某个人，故给一个框，别让它混在一片名目里。
   框宽与三柱同宽（左齐年柱左框、右齐日柱右框）—— 上下一竖对得住，
   才像从三柱里落下来的一句话，而不是另起一块浮在中间。
   框内三节一律同号同色（与干支同金）：正冲／岁数／干支生肖本是一句话，
   拆成三个字号三样颜色，读的人得先分出主次才拼得成句。 */
.dt-chong{
  width:100%; max-width:308px;
  margin:12px auto 7px;
  padding:7px 12px 8px;
  border:1px solid rgba(201,169,97,.22);
  border-radius:10px;
  background: rgba(201,169,97,.045);
  display:flex; align-items:baseline; justify-content:center; gap:9px;
  text-align:center;
}
/* 字距各自不同、字号颜色一致：靠疏密分节，不靠大小分等 */
.dt-chong span{
  font-size:13.5px; letter-spacing:.18em; text-indent:.18em;
  color: var(--gold);
}
.dt-chong em{
  font-style:normal; font-size:13.5px;
  letter-spacing:.02em; color: var(--gold);
}
.dt-chong b{
  font-family: var(--serif); font-size:13.5px; font-weight:400;
  letter-spacing:.10em; text-indent:.10em; color: var(--gold);
}

.dt-split{
  margin:20px 0 4px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(201,169,97,.14);
  text-align:center;
}
.dt-split-t{
  font-family: var(--serif);
  font-size:17px; letter-spacing:.08em; color: var(--gold-hi);
}
.dt-split-t em{ font-style:normal; margin:0 2px; }
.dt-split-t b{
  font-family: var(--sans); font-weight:400;
  font-size:11.5px; letter-spacing:.10em;
  color: var(--gold-dim); margin-left:10px;
}
.dt-split-row{
  margin-top:9px;
  display:flex; align-items:baseline; justify-content:center; gap:9px;
  font-size:13px; letter-spacing:.06em; color: var(--text-2);
}
.dt-split-row span{
  font-size:10.5px; letter-spacing:.24em; color: var(--gold-dim);
}

/* 两段各是一整天的日课。只靠小标与留白分开，不套盒子。 */
.dt-half{ margin-top:24px; }
.dt-half + .dt-half{
  margin-top:34px; padding-top:26px;
  border-top:1px solid rgba(201,169,97,.10);
}
.dt-half-hd{
  display:flex; align-items:center; gap:10px;
  margin-bottom:6px;
}
.dt-half-hd b{
  font-family: var(--serif);
  font-size:19px; font-weight:500;
  letter-spacing:.16em; color: var(--gold-hi); white-space:nowrap;
}
.dt-half-hd i{ flex:1; height:1px; background:rgba(201,169,97,.16); }
.dt-half-hd span{
  font-size:11px; letter-spacing:.10em;
  color: var(--gold-dim); white-space:nowrap;
}

.hd-more{
  margin-top:6px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:4px;
  padding:9px 0 2px;
  border:0; background:transparent;
  color: var(--gold-dim);
  font-family: var(--sans); font-size:12px; letter-spacing:.12em;
  cursor:pointer;
}
.hd-more:active{ opacity:.6; }

/* 前后一日：左滑前一天，右滑后一天；这排是给不会滑的人留的 */
.hd-nav{
  margin-top:12px; padding-top:9px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.hd-arrow{
  display:inline-flex; align-items:center; gap:3px;
  padding:4px 2px; border:0; background:transparent;
  color: var(--gold-dim);
  font-family: var(--sans); font-size:11.5px; letter-spacing:.08em;
  cursor:pointer;
}
.hd-arrow:active{ opacity:.5; }
.hd-swipe{
  font-size:10px; letter-spacing:.08em; color: var(--text-3);
  white-space:nowrap;
}

@keyframes hdIn{ from{ opacity:.32; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.hero-day.is-sw .hd-top,
.hero-day.is-sw .hd-body,
.hero-day.is-sw .hd-nav{ animation: hdIn .26s ease both; }

/* ---------------- 翻日：跟手 ----------------
   点箭头／点格子是「跳」，滑动是「推」。跳只需淡入，推必须跟手，
   否则手指移了三厘米、卡一动不动，松手才换字 —— 那不叫滑，叫等。

   动的是卡里的字，不是卡本身。牌子不能飞走：这张卡刚立了「压过漆的木牌」
   那层材质（顶光、底暗线、投影），整块平移就成了「一张图在飘」，
   且卡片只有 16px 外边距，一移就顶到屏幕边被视口切掉，像页面破了。
   故位移落在 hd-top／hd-body／hd-nav 三块上，由卡自己的 overflow 与圆角裁边 ——
   读起来是「字从牌面上滑出去」，牌还钉在原地。

   阻尼 0.28、上限 40px：手指走 100px，字只挪 28px，拉不满但看得见；
   封在 40px 是因为再远，卡边就会把字硬切掉一大块，动着看无所谓，
   松手够远（或够快）则停在一侧等新的一天，数据到了再从反侧滑回原位。
   只有 transform，合成层搞定，不重排、不重绘文字，千元机也跟得上。
   横向手势由这里接管（touch-action:pan-y），纵向下滑仍归页面滚动。 */
.hero-day{ --sw: 0px; touch-action: pan-y; }
.hd-top, .hd-body, .hd-nav{
  transform: translateX(var(--sw));
  transition: transform .30s cubic-bezier(.22,.61,.36,1);
}
/* 手指在动时，过渡让位给手指，一毫秒都不要晚 */
.hero-day.dragging .hd-top,
.hero-day.dragging .hd-body,
.hero-day.dragging .hd-nav,
.hero-day.swap .hd-top,
.hero-day.swap .hd-body,
.hero-day.swap .hd-nav{ transition:none; }
/* 拖了不够远：回弹要软 —— 是「没拉动」，不是「弹回去」 */
.hero-day.snap-back .hd-top,
.hero-day.snap-back .hd-body,
.hero-day.snap-back .hd-nav{
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}

/* ---------------- 月历 ---------------- */
/* 与今日卡同一副「釉」，只是淡一档：它是配角，不能与当日那张争光。
   同一族人靠的是同一种边、同一种光，不是同一个亮度。 */
.cal-card{
  position:relative;
  isolation:isolate;
  margin: 0 16px 18px;
  padding: 16px 12px 12px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(118deg, rgba(255,246,228,.032) 0%, rgba(255,246,228,0) 34%, rgba(0,0,0,.07) 100%),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,247,232,.055),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 1px 0 rgba(0,0,0,.24);
  overflow:hidden;
}
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 4px 12px;
}
.cal-nav{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent;
  color: var(--text-2); cursor:pointer;
  transition:.2s;
}
.cal-nav:active{ background: var(--surface-2); color: var(--gold-hi); }
.cal-title{ text-align:center; }
.cal-title b{
  display:block;
  font-family: var(--serif);
  font-size:16.5px; font-weight:500;
  color: var(--text);
  letter-spacing:.05em;
}
.cal-title span{
  display:block; margin-top:2px;
  font-size:10.5px; letter-spacing:.10em;
  color: var(--text-3);
}

.cal-wd{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  padding-bottom:7px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.cal-wd span{
  text-align:center;
  font-size:10.5px; letter-spacing:.10em;
  color: var(--text-3);
}
.cal-wd span:nth-child(6),
.cal-wd span:nth-child(7){ color: var(--gold-dim); }

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

.cal-cell{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  min-height:53px;
  padding:5px 0 6px;
  border:0; border-radius:10px;
  background:transparent;
  font-family:var(--sans);
  cursor:pointer;
  transition: background .18s;
  -webkit-tap-highlight-color:transparent;
}
.cal-cell:active{ background: var(--surface-2); }

.cc-d{
  font-size:15px; line-height:1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cc-l{
  font-size:9.5px; line-height:1.2;
  color: var(--text-3);
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cal-cell.out{ opacity:.26; }
.cal-cell.out .cc-d{ color: var(--text-2); }

.cal-cell.term .cc-l{ color: var(--gold); }
.cal-cell.term .cc-d{ color: var(--gold-hi); }

.cal-cell.today{ background: rgba(201,169,97,.10); box-shadow: inset 0 0 0 1px rgba(201,169,97,.34); }
.cal-cell.today .cc-d{ color: var(--gold-hi); font-weight:500; }

.cal-cell.on{
  background: linear-gradient(160deg, #E9D5A3, #C9A961);
  box-shadow: 0 4px 14px rgba(201,169,97,.24);
}
.cal-cell.on .cc-d,
.cal-cell.on .cc-l{ color:#1A1509; }
.cal-cell.on .cc-l{ opacity:.72; }
.cal-cell.on .cc-dot{ background:#1A1509 !important; opacity:.42; }

.cc-dot{
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background: var(--gold);
  box-shadow:0 0 4px rgba(201,169,97,.45);
}
.cc-dot.lite{ background: rgba(232,211,160,.20); box-shadow:none; }

.cal-legend{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:11px; padding-top:10px;
  border-top:1px solid var(--line);
  font-size:10px; color: var(--text-3);
  letter-spacing:.06em;
}
.cal-legend span{ display:flex; align-items:center; gap:5px; }
.lg{ width:5px; height:5px; border-radius:50%; display:inline-block; }
.lg-ok{ background: var(--gold); opacity:.8; }
.lg-mid{ background: rgba(232,211,160,.30); }
.lg-lite{ background: rgba(232,211,160,.22); }
.lg-term{ background: var(--gold); box-shadow:0 0 0 1.5px rgba(201,169,97,.28); }

/* ---------------- 双入口：对开两扇 ----------------
   旧版是一整条横杠（标题 + 副题 + 箭头），占满一行，读作「一条书目」。
   现在并排两扇，宽度砍半，横排摆不下了 —— 故改竖排：印、题、注三层，
   从上往下读，节奏与月历的「月名 → 干支 → 格」一致。

   两扇之间只留 10px：对开门，缝要窄。缝一宽，就成了两张互不相干的卡；
   缝收窄，中间那道黑才读得出是门缝，而不是页面的空隙。
   两扇同权：流年讲方位，神诞讲人物，都是「这一天之外的另一重索引」，
   不分主次，也就没有一扇该更亮。 */
.entry-pair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin: 0 16px 18px;
}
.entry-card{
  position:relative;
  isolation:isolate;
  display:block;
  padding: 15px 14px 14px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(118deg, rgba(255,246,228,.032) 0%, rgba(255,246,228,0) 34%, rgba(0,0,0,.07) 100%),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,247,232,.055),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 1px 0 rgba(0,0,0,.24);
  overflow:hidden;
  text-decoration:none;
  transition: background .2s, border-color .2s;
}
.entry-card:active{
  background:
    linear-gradient(118deg, rgba(255,246,228,.032) 0%, rgba(255,246,228,0) 34%, rgba(0,0,0,.07) 100%),
    var(--surface-2);
  border-color: rgba(201,169,97,.26);
}
/* 门上的印：与眉心的馆印同一个做法 —— 方寸、一线金边、内里再描一道。
   22px 是那一枚的三分之二，缩小不改比例，读的还是同一方印。
   边框用到 .52、字用到 .92：这一枚只有 24px，暗底上再压暗就只剩一个方点，
   读不出是「历」还是「神」—— 那一枚在眉心是配着 15.5px 的名字一起看的，
   这里没有名字托着，得让它自己立住。 */
.entry-seal{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  margin-bottom:11px;
  border-radius:3px;
  font-family: var(--serif); font-style:normal;
  font-size:14px; line-height:1;
  color: rgba(201,169,97,.92);
  border:1px solid rgba(201,169,97,.52);
  background: linear-gradient(158deg, rgba(201,169,97,.15), rgba(201,169,97,.025));
  position:relative;
}
.entry-seal::after{
  content:'';
  position:absolute; inset:2px;
  border:1px solid rgba(201,169,97,.18);
  border-radius:2px;
  pointer-events:none;
}
.entry-card b{
  display:block;
  font-family: var(--serif);
  font-size:15px; font-weight:500;
  letter-spacing:.10em;
  color: var(--text);
}
.entry-card > span{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  letter-spacing:.05em;
  color: var(--text-3);
}

/* ---------------- 说明 ---------------- */
.hl-note{
  margin: 0 20px 22px;
  font-size:11px; line-height:1.85;
  color: var(--text-3);
  text-align:center;
  letter-spacing:.03em;
}
.hl-note p + p{ margin-top:3px; }

/* ---------------- 页脚 ---------------- */
.hl-foot{
  margin: 6px 16px 24px;
  text-align:center;
}
.hf-line{
  height:1px; width:64px; margin:0 auto;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
/* 治历宗旨：主标一句、副标列所依之书 */
.hf-slogan{
  margin: 13px 0 0;
  font-family: var(--serif);
  font-size:13px;
  color: var(--gold-hi);
  letter-spacing:.20em;
  text-indent:.20em;
}
.hf-src{
  margin: 6px 0 13px;
  font-size:10px;
  line-height:1.95;
  color: var(--gold-dim);
  letter-spacing:0;
  padding: 0 10px;
}
.hf-src span{ display:block; white-space:nowrap; }
.hf-bracket{
  margin: 11px 0;
  font-family: var(--serif);
  font-size:11px;
  color: var(--gold-dim);
  letter-spacing:.22em;
}
.hf-name{
  margin: 5px 0 7px;
  font-family: var(--serif);
  font-size:17px;
  color: var(--gold-hi);
  letter-spacing:.28em;
  text-indent:.28em;
}

/* ---------------- 详情抽屉 ---------------- */
/* ---------------- 浮层：全站唯一一处模糊 ----------------
   模糊在这里只为一件功能服务：把背后的页面推远一档，让眼睛落到这块上。
   故半径克制（14px）、加一层极淡金雾，不至于把背景糊成塑料。
   抽屉本身仍是不透明的 —— 上面是正文，透不得。
   详情与神煞两处浮层共用这一副；页面其余地方一律不模糊。 */
#sheetMask, #godMask{
  background:
    radial-gradient(132% 66% at 50% 100%, rgba(201,169,97,.062), transparent 64%),
    rgba(4,3,7,.54);
  backdrop-filter: blur(14px) saturate(.92);
  -webkit-backdrop-filter: blur(14px) saturate(.92);
}
.hl-sheet, .god-sheet{
  background:
    linear-gradient(180deg, rgba(201,169,97,.055), rgba(201,169,97,0) 20%),
    linear-gradient(180deg, #191520, #0F0D14);
  box-shadow:
    inset 0 1px 0 rgba(255,247,232,.075),
    0 -30px 70px -20px rgba(0,0,0,.9);
}
.hl-sheet{
  max-height: 86vh;
  max-height: 86dvh;
  display:flex; flex-direction:column;
}
.hl-sheet .sheet-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding: 4px 20px calc(28px + env(safe-area-inset-bottom));
}
/* 详情层不跟手（拖它等于拖整页长文，会与纵向滚动打架），
   但换到前一天／后一天时，内容要说明自己从哪边来 ——
   自反侧 12px 滑入，方向与手指一致。 */
@keyframes dtInL{ from{ opacity:.34; transform:translateX(-12px); } to{ opacity:1; transform:none; } }
@keyframes dtInR{ from{ opacity:.34; transform:translateX(12px); } to{ opacity:1; transform:none; } }
#sheetBody.sw-l > *{ animation: dtInL .26s ease both; }
#sheetBody.sw-r > *{ animation: dtInR .26s ease both; }

.dt-head{ text-align:center; padding: 4px 0 16px; }
.dt-date{
  font-family: var(--serif);
  font-size:34px; line-height:1.1;
  color: var(--gold-hi);
  letter-spacing:.02em;
}
.dt-date small{
  font-size:13px; color: var(--text-2);
  margin-left:8px; letter-spacing:.06em;
}
.dt-lunar{
  margin-top:7px;
  font-family: var(--serif);
  font-size:16px; color: var(--text);
  letter-spacing:.05em;
}
.dt-sub{
  margin-top:6px;
  font-size:11.5px; color: var(--text-3);
  letter-spacing:.05em;
}

.dt-gz{
  display:flex; justify-content:center; gap:10px;
  margin: 14px 0 4px;
}
.dt-gz div{
  flex:1; max-width:96px;
  padding: 10px 0 9px;
  border-radius:12px;
  background: var(--surface-2);
  border:1px solid var(--line);
  text-align:center;
}
.dt-gz b{
  display:block;
  font-family: var(--serif);
  font-size:17px; font-weight:500;
  color: var(--gold);
  letter-spacing:.10em;
}
.dt-gz span{
  display:block; margin-top:3px;
  font-size:9.5px; color: var(--text-3);
  letter-spacing:.16em;
}

.dt-sec{ margin-top:20px; }
.dt-sec-hd{
  display:flex; align-items:center; gap:9px;
  margin-bottom:10px;
}
/* 原来这里 13px / 500 / gold / .14em，与运程页一个偏重一个偏松，两页并排看是两套书，
   故与运程页的小节题归到同一档。
   2026-11-10：运程页的小节题抬到 16px（那是一屏一节，抬大有处落），
   这里仍是 12.5px —— 通书卡里一节套一节，抬大了会压住三书并列的正文。 */
.dt-sec-hd b{
  font-family: var(--serif);
  font-size:12.5px; font-weight:400;
  color: var(--gold-hi);
  letter-spacing:.20em;
}
.dt-sec-hd i{
  flex:1; height:1px;
  background: linear-gradient(to right, var(--line-mid), transparent);
}
.dt-sec-hd em{
  font-style:normal; font-size:10px;
  color: var(--text-3); letter-spacing:.06em;
}

/* ---------------- 神明诞辰 ----------------
   这一区全篇唯一在讲「人」的地方，字体上就该与周边的名目分开：
   名用宋体、不折行距，读起来是书名或人名，不是词条。
   体系只用一个字头，不用颜色 —— 六类各上一色就成了标签墙；
   并且这六个字是并列出现的，颜色一分高下，等于替读者排了座次。
   性质退到 10px，它是注，不是第二个名字。
   一行一条，条间只一道极淡的分隔：十二位那天要能一口气读下来，不能成表格。 */
.sn-list{ margin-top:4px; }
/* 一条神名是一道门，故整行做成按钮。
   按钮的默认长相（内框、底色、居中、字体）全部抹掉 —— 它要长得跟旁边几行字一样，
   只是在最右多一个「释」字。可点这件事不必吵，认得出就够。 */
.sn-item{
  display:grid;
  grid-template-columns: 1.2em 1fr auto auto;
  gap:10px;
  align-items:baseline;
  width:100%;
  margin:0; padding: 5.5px 0;
  border:0; border-bottom:1px solid rgba(255,255,255,.032);
  border-radius:0;
  background:none;
  text-align:left;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition: background .18s;
}
.sn-item:last-child{ border-bottom:0; }
.sn-item:active{ background: rgba(201,169,97,.055); }
.sn-item i{
  font-style:normal;
  font-family: var(--serif);
  font-size:11.5px;
  letter-spacing:.02em;
  color: rgba(201,169,97,.64);
}
.sn-item b{
  font-family: var(--serif);
  font-size:13.5px; font-weight:400;
  color: var(--text);
  letter-spacing:.03em;
  line-height:1.55;
}
.sn-item em{
  font-style:normal;
  font-size:10px;
  letter-spacing:.10em;
  color: var(--text-3);
  white-space:nowrap;
}
/* 「释」：全站唯一一处「这里还有话说」的记号。
   10px、淡金、不加圈不带箭头 —— 它是一行小字旁的批注记号，不是一个按钮。
   与左边「圣诞／千秋」之间留一记空白：不留，这两个小字会连读成一个词。 */
.sn-item u{
  text-decoration:none;
  margin-left:7px;
  font-family: var(--serif);
  font-size:10px;
  line-height:1.55;
  letter-spacing:.04em;
  color: rgba(201,169,97,.28);
  transition: color .18s;
}
.sn-item:active u{ color: rgba(201,169,97,.72); }

/* 交节日两段各带一份日辰，神诞跟在第二段之后。
   若不额外让开，会被读成「节后段还有一块」—— 它其实是全天的事，
   两段都讲完了才轮到它。故比别的节多让 4px。 */
.sn-sec{ margin-top:24px; }

/* 详情里通常只有一两条，性质若右对齐，会飘到一行之外，
   像一张登记表空了一整栏。故改为紧跟名字之后：
   读作「下元水官大帝，圣诞」，像古籍里名字后头的旁注。
   总览页仍是右对齐 —— 那里是名录，一列对齐才扫得快。 */
.dt-sec .sn-item{
  grid-template-columns: 1.2em auto auto 1fr;
  gap:9px;
  padding: 8px 0;
  border-bottom:0;
}
.dt-sec .sn-item em{ justify-self:start; }

/* ---------------- 神明解说层 ----------------
   与神煞解说同一副壳子、同一段正文尺寸，只有一处不同：
   这一段是「人」的小传，不是「书」的引文，故小传用正文色，出处用更沉的一档。
   三层各有一条极细的分栏线隔开，不做卡片、不套框 —— 一页注不必再分抽屉。

   别称行用「又称」二字起头，不写「别名：」——
   这一层是书页，不是表单。 */
.sn-alias{
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--text-3);
}
.sn-bio{
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 2.05;
  letter-spacing: .02em;
  color: var(--text-2);
  text-align: justify;
}
/* 栏目名：一个小字加一道横线，与详情页各节同一做法，不另立一套 */
.sn-cap{
  margin: 22px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-mid);
  font-size: 10px;
  letter-spacing: .26em;
  color: rgba(201,169,97,.72);
}
.sn-dates{ margin-top: 2px; }
.sn-dt{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.032);
}
.sn-dt:last-child{ border-bottom: 0; }
.sn-dt b{
  flex: none;
  min-width: 4.6em;
  font-family: var(--serif);
  font-size: 13px; font-weight: 400;
  letter-spacing: .04em;
  color: var(--gold-hi);
}
.sn-dt span{
  flex: none;
  font-size: 10px;
  letter-spacing: .10em;
  color: var(--text-3);
}
.sn-dt em{
  flex: 1;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.75;
  letter-spacing: .02em;
  color: rgba(255,255,255,.38);
}
/* 出处：两笔来源各起一行。字更小、行更松 —— 这一层是给要查证的人看的，
   不是给赶时间的人看的。 */
.sn-src{ margin-top: 10px; }
.sn-src p{
  margin: 0 0 6px;
  font-size: 10.5px;
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--text-3);
  word-break: break-word;
}
.sn-src p:last-child{ margin-bottom: 0; }

.dt-yj{
  display:flex; gap:11px;
}
.dt-yj-col{ flex:1; min-width:0; }
.dt-yj-lab{
  width:23px; height:23px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-size:12px;
  margin-bottom:8px;
}
.dt-yj-lab.yi{ background: rgba(79,191,159,.13); color:#7FD9BC; }
.dt-yj-lab.ji{ background: rgba(217,85,78,.13); color:#E58B86; }

.chip-wrap{ display:flex; flex-wrap:wrap; gap:6px; }
.chip2{
  font-size:12px; line-height:1.5;
  padding: 3px 9px;
  border-radius:3px;
  background: var(--surface-2);
  border:1px solid var(--line);
  color: var(--text);
  letter-spacing:.04em;
}
.chip2.ji{ color: #D9A09C; }
.chip2.good{ color: #C9A961; border-color: rgba(201,169,97,.28); }
.chip2.xiong{ color: #C08A85; border-color: rgba(192,138,133,.22); }
.chip2.dim{ color: var(--text-3); font-size:11px; }

.dt-kv{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.dt-kv div{
  padding: 9px 11px;
  border-radius:10px;
  background: var(--surface-2);
  border:1px solid var(--line);
}
.dt-kv span{
  display:block;
  font-size:10px; color: var(--text-3);
  letter-spacing:.10em;
}
.dt-kv b{
  display:block; margin-top:3px;
  font-size:13px; font-weight:400;
  color: var(--text);
  letter-spacing:.04em;
}
/* 值是「主项 + 附注」时，附注降一档，别与主项同字号挤在一起。
   注意：.dt-kv span 那条通用规则会把它当标签设成 display:block，
   这里必须显式改回 inline，否则附注会被挤到下一行去。 */
.dt-kv b .dt-sub{
  display:inline;
  margin:0 0 0 6px;
  font-size:10.5px; letter-spacing:.04em;
  color: var(--text-3);
  white-space:nowrap;
}

.dt-fold{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.dt-fold summary{
  padding: 11px 13px;
  font-size:12px;
  color: var(--text-2);
  letter-spacing:.06em;
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
}
.dt-fold summary::-webkit-details-marker{ display:none; }
.dt-fold summary::after{
  content:"";
  width:6px; height:6px;
  border-right:1.4px solid var(--text-3);
  border-bottom:1.4px solid var(--text-3);
  transform: rotate(45deg) translate(-1px,-1px);
  transition:.2s;
}
.dt-fold[open] summary::after{
  transform: rotate(225deg) translate(-2px,-2px);
}
.dt-fold .fold-body{
  padding: 0 13px 13px;
}

.hd-foot{
  margin-top:22px;
  text-align:center;
  font-family: var(--serif);
  font-size:11px;
  color: var(--gold-dim);
  letter-spacing:.20em;
  line-height:2;
}

/* ---------------- 骨架屏 ---------------- */
.sk{
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
  animation: skmove 1.4s ease infinite;
  border-radius:6px;
  color:transparent !important;
}
@keyframes skmove{
  0%{ background-position:100% 50%; }
  100%{ background-position:0 50%; }
}
@media (prefers-reduced-motion: reduce){
  .sk{ animation:none; }
  .hero-day.is-sw .hd-top,
  .hero-day.is-sw .hd-body,
  .hero-day.is-sw .hd-nav,
  #sheetBody.sw-l > *,
  #sheetBody.sw-r > *{ animation:none; }
}

@media (max-width:359px){
  .motto-side{ font-size:10px; letter-spacing:.10em; }
  .cal-cell{ min-height:47px; }
  .cc-d{ font-size:14px; }
  .cc-l{ font-size:9px; }
  .hd-date b{ font-size:40px; }
}

/* ---------------- 详情操作区 ---------------- */
.dt-acts{
  margin-top: 20px;
  display: flex;
  gap: 9px;
}
.act-btn{
  flex:1;
  padding: 11px 0;
  border-radius: 12px;
  border:1px solid var(--line-mid);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--sans);
  font-size:12.5px;
  letter-spacing:.08em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
}
.act-btn.on{
  border-color: rgba(201,169,97,.45);
  background: rgba(201,169,97,.12);
  color: var(--gold-hi);
}
.act-btn.gold{
  background: linear-gradient(160deg,#E9D5A3,#C9A961);
  border-color: transparent;
  color:#1A1509;
  font-weight:500;
}
.act-btn:disabled{ opacity:.55; }

.hl-toast{
  position:fixed; left:50%; bottom:104px; transform:translate(-50%,10px);
  z-index:200;
  padding: 9px 18px;
  border-radius: 20px;
  background: rgba(28,24,36,.97);
  border:1px solid var(--line-mid);
  color: var(--text);
  font-size:12.5px;
  letter-spacing:.06em;
  white-space:nowrap;
  opacity:0;
  transition: opacity .25s, transform .25s;
  pointer-events:none;
}
.hl-toast.on{ opacity:1; transform:translate(-50%,0); }

/* 宜一栏的「展开全部」 */
.dt-more{
  display:inline-block;
  margin:2px 0 0;
  padding:5px 11px;
  border-radius:3px;
  border:1px dashed rgba(201,169,97,.34);
  background:transparent;
  color: var(--gold-dim);
  font-family: var(--sans);
  font-size:11.5px;
  letter-spacing:.06em;
  cursor:pointer;
}
.dt-more b{ color: var(--gold-hi); font-weight:600; }

/* 今日卡 · 三书出处小注 */
.hd-src{
  margin:12px 0 0; padding-top:11px;
  border-top:1px dashed var(--line);
  font-size:10.5px; line-height:1.85;
  color: var(--text-3);
  letter-spacing:.03em;
  /* 两条各成一句：三书各注出处，不在中间硬折，免得第二行像个尾注 */
  display:flex; flex-direction:column; gap:1px;
}
.hd-src b{
  font-family: var(--serif); font-weight:500;
  color: var(--gold-dim); letter-spacing:.08em;
  margin-right:1px;
}
.hd-src span{ white-space:nowrap; }

/* 详情 · 三书出处与体例小注 */
.dt-src{
  margin:-4px 0 9px;
  font-size:10.5px; line-height:1.7;
  color: var(--text-3);
  letter-spacing:.04em;
}
.dt-src::before{
  content:"";
  display:inline-block;
  width:3px; height:8px;
  margin-right:6px;
  border-radius:1px;
  background: var(--gold-dim);
  opacity:.5;
  vertical-align:middle;
}
/* 说明段落不再单独围一个盒子：首页的声明块刚拆了框，这里再套一层就对不上。
   统改成左边一根细引线，与四条声明同一套做法。 */
.dt-yinote{
  margin:18px 0 0;
  padding:0 0 0 12px;
  border-left:1px solid rgba(201,169,97,.22);
  background:none;
  font-size:11px; line-height:1.9;
  color: var(--text-3);
}

/* 详情里独占一行的主按钮 */
.act-btn.wide{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:9px;
  padding:13px 0;
}

/* ---------------- 分享长图 ---------------- */
.sh-card{
  position:fixed; inset:0; z-index:300;
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  background: rgba(6,5,9,.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sh-card.on{ display:flex; }
.sh-panel{
  width:100%; max-width:372px; max-height:100%;
  display:flex; flex-direction:column;
}
.sh-scroll{
  flex:1; min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid var(--line-mid);
  background:#0B0A0E;
}
.sh-scroll img{
  display:block; width:100%; height:auto;
  border-radius:11px;
}
.sh-tip{
  margin:11px 0 11px;
  text-align:center;
  font-size:11.5px; letter-spacing:.06em;
  color: var(--text-3);
}
.sh-acts{ display:flex; gap:9px; flex:none; }

/* ---------------- 年月选择（标题可点） ---------------- */
.cal-title .cal-ym{
  display:flex; align-items:center; justify-content:center; gap:1px;
}
.ym-btn{
  font-family: var(--serif);
  font-size:16.5px; font-weight:500;
  color: var(--text);
  letter-spacing:.05em;
  background:transparent; border:0; padding:0 2px;
  border-bottom:1px dashed rgba(201,169,97,.30);
  cursor:pointer; transition:.2s;
}
.ym-btn:active{ color: var(--gold-hi); border-bottom-color: var(--gold); }

.ym-mask{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:flex-end; justify-content:center;
  /* 与详情抽屉同一副遮罩：同一种「推远」，弹层才是同一族人 */
  background:
    radial-gradient(132% 66% at 50% 100%, rgba(201,169,97,.05), transparent 64%),
    rgba(4,3,7,.54);
  backdrop-filter: blur(14px) saturate(.92);
  -webkit-backdrop-filter: blur(14px) saturate(.92);
  opacity:0; transition:opacity .22s;
}
.ym-mask[hidden]{ display:none; }
.ym-mask.on{ opacity:1; }
.ym-sheet{
  width:100%; max-width:520px;
  background:
    linear-gradient(180deg, rgba(201,169,97,.05), rgba(201,169,97,0) 22%),
    var(--surface);
  border-top:1px solid var(--line-mid);
  border-radius:16px 16px 0 0;
  padding:14px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255,247,232,.07),
    0 -24px 60px -18px rgba(0,0,0,.85);
  transform: translateY(14px);
  transition: transform .22s;
}
.ym-mask.on .ym-sheet{ transform:none; }
.ym-hd{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.ym-hd b{
  font-family: var(--serif);
  font-size:14px; font-weight:500;
  color: var(--gold); letter-spacing:.12em;
}
.ym-x{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
  color: var(--text-2); font-size:16px; line-height:1;
  cursor:pointer;
}
.ym-body{
  position:relative;
  max-height:52vh; overflow-y:auto;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:6px; padding-right:2px;
  -webkit-overflow-scrolling:touch;
}
.ym-body.months{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.ym-cell{
  height:38px; border-radius:8px;
  border:1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-size:12.5px; letter-spacing:.02em;
  cursor:pointer;
}
.ym-body.months .ym-cell{ height:46px; font-size:14px; }
.ym-cell:active{ background: var(--surface-3); }
.ym-cell.on{
  border-color: var(--gold);
  color: var(--gold-hi);
  background: rgba(201,169,97,.12);
}

/* ---------------- 神煞解说 ---------------- */

/* 可点的神煞：虚线底暗示「可点」，与宜项区分 */
.chip2.god{
  font-family: inherit;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  text-decoration: underline dotted rgba(201,169,97,.34);
  text-underline-offset: 3px;
  transition: background .18s, border-color .18s;
}
.chip2.god.xiong{ text-decoration-color: rgba(192,138,133,.34); }
.chip2.god:active{ background: rgba(201,169,97,.14); }

.dt-hint{
  margin: 9px 0 16px;
  font-size:10.5px; letter-spacing:.10em;
  color: var(--text-3);
}

.kv-god{
  font-family: inherit; font-size: inherit; line-height: inherit;
  color: var(--gold-hi);
  background:none; border:0; padding:0; margin:0;
  cursor:pointer;
  text-decoration: underline dotted rgba(201,169,97,.40);
  text-underline-offset: 3px;
}

.god-mask{ z-index:96; }
.god-sheet{ z-index:97; max-height:88vh; max-height:88dvh; display:flex; flex-direction:column; }
.god-sheet .god-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 2px 20px calc(26px + env(safe-area-inset-bottom));
}
.god-sheet .god-body::-webkit-scrollbar{ width:0; }

.gd-head{
  display:flex; align-items:baseline; gap:9px;
  padding: 2px 0 4px;
}
.gd-head b{
  font-family: var(--serif);
  font-size: 26px; font-weight: 600;
  letter-spacing:.10em;
  color: var(--gold-hi);
}
.gd-tag{
  font-size:10px; letter-spacing:.10em;
  padding: 2px 7px; border-radius:6px;
  border:1px solid var(--line);
  color: var(--text-3);
}
.gd-tag.good{ color:#C9A961; border-color: rgba(201,169,97,.30); background: rgba(201,169,97,.08); }
.gd-tag.xiong{ color:#C08A85; border-color: rgba(192,138,133,.26); background: rgba(192,138,133,.07); }
.gd-tag.zhi{ color:#8FA6C4; border-color: rgba(143,166,196,.26); background: rgba(143,166,196,.07); }

.gd-as{
  margin: 2px 0 0;
  font-size:11px; letter-spacing:.04em;
  color: var(--text-3);
}

.gd-sec{
  margin: 18px 0 8px;
  padding-left: 9px;
  border-left: 2px solid rgba(201,169,97,.34);
  font-family: var(--serif);
  font-size: 12.5px; font-weight: 600;
  letter-spacing:.10em;
  color: var(--gold);
}

.gd-p{
  margin: 0 0 9px;
  font-family: var(--serif);
  font-size: 13.8px;
  line-height: 2.05;
  letter-spacing:.02em;
  color: #C4BCCF;
  text-align: justify;
  word-break: break-word;
}


.gd-yi{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin: 10px 0 4px;
  padding-bottom: 12px;
  border-bottom:1px solid var(--line);
}
.gd-yi-l{
  font-size:10.5px; letter-spacing:.14em;
  color: var(--text-3);
  margin-right:2px;
}
.gd-yi .chip2{ font-size:11.5px; }

.gd-none{
  margin: 14px 0 0;
  font-size:12.5px; line-height:1.9;
  color: var(--text-3);
}

/* 馆中补说：与古籍原文分开，另立一边框，不混在原文里 */
.gd-sec.gd-note{
  margin-top: 20px;
  border-left-color: rgba(196,188,207,.34);
  color: var(--text-2);
}
.gd-p.gd-note{
  padding: 8px 12px;
  border-left: 2px solid rgba(196,188,207,.22);
  background: rgba(255,255,255,.022);
  font-size: 13px;
  line-height: 1.95;
  color: #B4ACBF;
}

.gd-foot{
  margin: 22px 0 0;
  text-align:center;
  font-family: var(--serif);
  font-size: 10.5px; line-height:2.0;
  letter-spacing:.10em;
  color: var(--text-3);
}

/* ---------------- 每日五方（喜神·福神·财神·阳贵·阴贵） ---------------- */
.dir-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 10px; margin: 4px 0 2px;
}
/* 五格按两列排，末格孤零零挂在左边，右边空一片。让末格跨两列并居中，收成一条。 */
.dir-cell:last-child:nth-child(odd){
  grid-column: 1 / -1;
  justify-content: center;
}
.dir-cell:last-child:nth-child(odd) .dir-p{ margin-left: 12px; }
.dir-cell{
  display:flex; align-items:center; gap:8px;
  padding: 9px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background: var(--surface-2);
  min-width:0;
}
.dir-ar{
  width:17px; height:17px; flex:0 0 17px;
  color: var(--gold);
  opacity:.88;
}
/* 名目大、方位小：读作「喜神 · 东南」，先说主事的是哪位，
   方位退一档做注脚。名目用正文字、方位用灰字，层级落在字号上。 */
.dir-k{
  font-family: var(--serif);
  font-size:14px; font-weight:500;
  letter-spacing:.08em;
  color: var(--text);
  flex:0 0 auto;
}
.dir-v{
  font-size:11px; letter-spacing:.06em;
  color: var(--text-3);
  white-space:nowrap;
  flex:0 0 auto;
}
.dir-p{
  margin-left:auto;
  font-style:normal;
  font-size:10px; letter-spacing:.04em;
  color: var(--gold-dim);
  flex:0 0 auto;
}

.dir-note{
  margin: 10px 0 0;
  font-size:10.5px; line-height:1.8;
  letter-spacing:.04em;
  color: var(--text-3);
}

/* 值日（黄道·黑道）。须压过 .dt-kv span 的标签样式，否则会被当成小字灰标 */
.dt-kv b .hd-h, .dt-kv b .hd-b{
  display:inline;
  font-size:13px; letter-spacing:.04em;
}
.dt-kv b .hd-h{ color: #C9A961; }
.dt-kv b .hd-b{ color: #C08A85; }

/* ============================================================
   美学宪章 · 黄历页精修
   钱要花在纸上，不要花在框上：这里把重复的方框收成细线，
   把字号字距拉开层级，让"历"这件事自己说话。
   ============================================================ */

.cal-card{ border-radius:16px; }

/* 双入口：由一条横杠改成对开两扇（样式见前文「双入口」一节）。
   此处只留按下的那一下，与当日卡同一副。 */

/* ---------------- 按下的那一下：一道薄光扫过 ----------------
   全站唯一「会动」的材质。峰值 8.5% 的亮度、340 毫秒，
   像光从漆面上走了一趟 —— 不是缩放、不是发光，是把光挪了个位置。
   只给「门」：当日卡与两扇入口。月历是工具不是门，
   点日期都扫一道光，光就贱了。
   只在 :active 时建层，松手即散；常驻成本只有一层透明的空壳。
   高光带落在 50% 那一档，整层上下平移，扫过即收，不留痕迹。 */
.hero-day::after,
.entry-card::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg,
    rgba(255,248,232,0) 38%,
    rgba(255,248,232,.085) 50%,
    rgba(255,248,232,0) 62%);
  opacity:0;
  transform: translateY(-100%);
  pointer-events:none;
}
.hero-day:active::after,
.entry-card:active::after{
  animation: glazeSweep .34s ease-out;
}
@keyframes glazeSweep{
  0%  { opacity:0; transform: translateY(-100%); }
  16% { opacity:1; }
  100%{ opacity:0; transform: translateY(100%); }
}
/* 不耐动效的人：光扫整段撤掉，按压只留一点微亮，不作位移 */
@media (prefers-reduced-motion: reduce){
  .hero-day:active::after,
  .entry-card:active::after{
    animation:none;
    opacity:.045; transform:none;
  }
}

/* 详情里的分节题：字距收紧一点，题与内容才分得开 */
.dt-sec-hd b{ font-size:12.5px; letter-spacing:.18em; font-weight:500; }

/* 页底那几行声明：让它像跋，不像免责条款 */
.hl-note{
  font-size:11.5px;
  line-height:1.95;
  letter-spacing:.05em;
  color:rgba(109,102,121,.92);
}

/* 大日子：46px 的衬线，字距归零才立得住 */
.hd-date b{ letter-spacing:0; }