/* ============================================================
   开阳运势 · 全局样式 yunshi.css（P2 定稿 2026-09-21）
   来源：examples/gen_week_h5.py 内联样式整体外置（属相页 + 目录页 .idx 变体）
   铁律：改版只升 ?v=（日期+字母）；画布 400×757，禁媒体查询 / vw / clamp
   属相色：权威数值在本文件 [data-zs] 区块（契约 v0.2 §六附录同源），
           body[data-zs]（属相页）与 .cell[data-zs]（目录页宫格）两级注入
   ============================================================ */

/* ── Design tokens ── */
:root {
  --orange: #fb5c3e;            /* 点睛恒定 */
  --surface: #ffffff;
  --line: #e8e5e0;
  --ink: #171717;
  --ink-soft: #6b6b6b;
  --ink-faint: #999999;
  --paper: #f5f4f2;             /* 纸底 */
  --canvas: #e9e7e3;            /* 页面外底（属相页） */
  --canvas-idx: #eae7e1;        /* 页面外底（目录页） */
  --stage-idx: #fafafa;
  --field: #1d1a17;             /* 目录页暗色场（legacy 兜底，现役=品牌青固定色） */
  --field2: #2b211d;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --font-display: Georgia, "Songti SC", "Source Han Serif SC", "Noto Serif SC", SimSun, serif;
  --font-body: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  /* 属相色默认（兔·木阴支）；由 data-zs 覆盖 */
  --zs-main: #7E9A38; --zs-field: #4C5F20; --zs-field2: #354214; --zs-tint: #EFF2E2; --zs-bg: #DFE5CB;
}

/* ── 12 属相色卡（同五行同色族，阳支亮/阴支沉；土四支同族四层阶梯） ── */
[data-zs="rat"]    { --zs-main:#3E8FC7; --zs-field:#2A6E9B; --zs-field2:#1B4E70; --zs-tint:#EAF3FA; --zs-bg:#D8E8F4; }
[data-zs="pig"]    { --zs-main:#2B6C8F; --zs-field:#1F4E68; --zs-field2:#143748; --zs-tint:#E5EEF4; --zs-bg:#CFDEE9; }
[data-zs="tiger"]  { --zs-main:#9CB550; --zs-field:#6B8030; --zs-field2:#47561F; --zs-tint:#F5F7EA; --zs-bg:#EBF0D8; }
[data-zs="rabbit"] { --zs-main:#7E9A38; --zs-field:#4C5F20; --zs-field2:#354214; --zs-tint:#EFF2E2; --zs-bg:#DFE5CB; }
[data-zs="horse"]  { --zs-main:#E05B47; --zs-field:#B8432F; --zs-field2:#8A2E1F; --zs-tint:#FDF2F0; --zs-bg:#F9E9E5; }
[data-zs="snake"]  { --zs-main:#E83E82; --zs-field:#A8225B; --zs-field2:#77173F; --zs-tint:#FBEDF3; --zs-bg:#F2D8E4; }
[data-zs="monkey"] { --zs-main:#D6B13F; --zs-field:#8F7024; --zs-field2:#614C16; --zs-tint:#FBF6E8; --zs-bg:#F4ECCF; }
[data-zs="rooster"]{ --zs-main:#AE8C2E; --zs-field:#75591A; --zs-field2:#513C10; --zs-tint:#F7F2E3; --zs-bg:#E9E0C2; }
[data-zs="dragon"] { --zs-main:#EBAA45; --zs-field:#A87223; --zs-field2:#714B16; --zs-tint:#FDF6E9; --zs-bg:#F8EDD5; }
[data-zs="dog"]    { --zs-main:#C68833; --zs-field:#82541B; --zs-field2:#583A11; --zs-tint:#FCF2E2; --zs-bg:#F4E4C8; }
[data-zs="ox"]     { --zs-main:#AA7426; --zs-field:#714613; --zs-field2:#4E300B; --zs-tint:#FAF0E1; --zs-bg:#EFDFC0; }
[data-zs="goat"]   { --zs-main:#926523; --zs-field:#5A390E; --zs-field2:#3C2607; --zs-tint:#F6ECDD; --zs-bg:#E7D6B6; }

/* ── 毛笔水印字体：Ma Shan Zheng（马善政楷书）单字子集「运」972B，
      取自课件讲义系统（course-system/jiangyi）同源字体，仅供目录页水印 ── */
@font-face {
  font-family: 'MaShanZheng';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/MaShanZheng-yun.woff2') format('woff2');
}

/* ── 基底 ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body.pm-page {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  display: flex; justify-content: center; align-items: flex-start;
  background: var(--canvas);
}
.pm-stage {
  position: relative; flex: none;
  display: flex; flex-direction: column;
  width: 400px; height: 757px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.15);
}
.pm-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #c3d2d8 transparent;
  display: flex; flex-direction: column;
}

/* ── Hero（属相页：中性留白，属相色只上徽章与巨字水印） ── */
.hero {
  position: relative; overflow: hidden; flex: none;
  color: var(--ink); text-align: center;
  padding: 16px 16px 16px;
}
.hero-mark {
  position: absolute; right: -10px; top: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 130px; line-height: 1; color: var(--zs-main); opacity: 0.09;
  pointer-events: none;
}
.zseal {
  position: relative;
  width: 50px; height: 50px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--zs-main); border-radius: 6px;
}
.zseal span { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; color: var(--zs-main); }
.hero-dates {
  position: relative;
  margin-top: 4px; font-size: 13.5px; line-height: 1.2; letter-spacing: 0.12em;
  transform: translateY(5px);   /* 仅自身下移，不影响后续元素布局 */
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hero-dates > span:first-child { font-weight: 700; }  /* 日期加粗为定稿样式；刷新回顶由页内脚本负责 */
.jieqi {
  display: inline-block; padding: 1.5px 9px;
  background: var(--orange); color: #fff;
  font-size: 11px; letter-spacing: 0.2em; text-indent: 0.2em;
  border-radius: 999px; font-weight: 600;
}
.jieqi[hidden] { display: none; }   /* 类选择器会盖过 UA 的 [hidden] 默认，须显式声明 */

/* ── 七日干支条 ── */
.zdays {
  position: relative;
  margin-top: 12px; display: flex;
  transform: translateY(5px);   /* 仅自身下移，不影响后续元素布局 */
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface);
}
.zday {
  flex: 1; padding: 7px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.zday + .zday { border-left: 1px solid var(--line); }
.zday .w { font-size: 10px; line-height: 1.3; letter-spacing: 0.12em; color: var(--ink-faint); }
.zday .g { font-family: var(--font-display); font-size: 14px; line-height: 1.3; color: var(--ink); font-weight: 700; letter-spacing: 0.07em; }
.zday .t { font-size: 11px; line-height: 1.3; letter-spacing: 0.06em; font-weight: 600; }
.t-xi { color: var(--orange); }

/* ── 内容区 ── */
.body {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  padding: 0 16px;
}
.focus-card {
  flex: none; margin-top: -5px; transform: translateY(2px);   /* 仅自身下移，不影响后续元素布局 */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px 6px;
}
.focus-tag {
  display: inline-block; margin-bottom: 3px; line-height: 1.2;
  background: transparent; color: var(--orange);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-indent: 0.1em;
  padding: 0;
  transform: translateY(-2px);   /* 仅自身上移，不影响后续元素布局 */
}
.focus-text {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--ink); line-height: 1.5; letter-spacing: 0.05em; text-indent: 1em;
}
/* 屉签式分类标签：贴在卡片盒上沿，激活屉与卡体连成一体（白底同框 + 橙红顶边） */
.dims-tabs {
  flex: none; display: flex; gap: 1px;
  padding: 0; margin-top: 4px; margin-bottom: -5px;  /* 配平项：须恒等于 -.body 的 gap，使净压入=0（签条与卡顶平接；负值绝对值大于 gap 即遮盖卡面） */
  position: relative; z-index: 2;
  transform: translateY(2px);   /* 仅自身下移，不影响后续元素布局 */
}
.dtab {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 6px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.08em; text-indent: 0.08em; color: var(--ink-soft); white-space: nowrap;
  background: #eae8e3; border: 0.5px solid var(--line); border-bottom: none;
  border-radius: 8px 8px 0 0; cursor: pointer; transition: all 0.15s;
}
.dtab svg { width: 14px; height: 14px; flex: none; }
.dtab.is-active {
  background: var(--orange); border-color: var(--orange);
  color: #fff; font-weight: 700;
}
.more-link {
  margin-left: auto; align-self: flex-start; padding: 2px 2px 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 500; white-space: nowrap;
  letter-spacing: 0.08em; line-height: 1.2;
  color: var(--ink-soft); text-decoration: none; transition: color 0.15s;
}
.more-link::after { content: "›"; margin-left: 3px; font-size: 13px; }
.more-link:active { color: var(--orange); }
.dims {
  flex: none; display: flex; gap: 10px;
  transform: translateY(2px);   /* 与签条同步下移，保持屉签平接 */
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dims::-webkit-scrollbar { display: none; }
.dim-card {
  flex: 0 0 100%; scroll-snap-align: start;
  background: var(--surface);
  border: 0.5px solid var(--orange);   /* 有色发丝线：DPR≥2 渲染为 1 物理像素 */
  border-radius: 0 8px 8px 8px;        /* 左上直角：屉签贴附处与签条边线连通成一体 */
  padding: 4px 14px 0;
}
.sub { padding: 6px 0 4px; border-bottom: 1px dashed var(--line); }
.sub:last-child { border-bottom: none; }
.sub-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; line-height: 1.45; }
.sub-name {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  color: var(--zs-main); letter-spacing: 0.06em;
}
.sub-name svg { width: 18px; height: 18px; flex: none; color: var(--zs-main); }
.sub-text { font-size: 13px; font-weight: 500; color: #4a4a4a; line-height: 1.55; letter-spacing: 0.05em; text-indent: 1em; text-align: justify; }

.note {
  flex: none; text-align: center;
  font-size: 10px; color: var(--ink-faint); line-height: 1.2;
  padding: 2px 16px 1px;
  transform: translateY(-5px);   /* 仅自身上移，不影响后续元素布局 */
}

/* ── 页脚（属相页：中性收尾，不跟属相色） ── */
.pm-footer {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 16px 4px; line-height: 1.3;
  border-top: 1px solid var(--line);
  transform: translateY(-5px);   /* 仅自身上移，不影响后续元素布局 */
  color: var(--ink);
}
.f-brand { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--zs-main); }
.f-copy { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-faint); }
.idx .f-brand { color: #fff; }

/* ── 目录页变体（body.idx：暗色场） ── */
body.idx { background: var(--canvas-idx); }
.idx .pm-stage { background: var(--stage-idx); box-shadow: 0 12px 44px rgba(0, 0, 0, 0.18); }
.idx .hero {
  color: #fff; padding: 38px 16px 28px;   /* 2026-09-29 加高 20px（28/18→38/28） */
  /* 定稿 2026-09-29：品牌青固定色（--jm-color-brand-cyan #2f748a），不随季节变 */
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    #2f748a;
}
/* 目录页白色水印字（页眉左上，与属相页巨字水印呼应） */
/* 目录页白色水印字（页眉左上、垂直居中；毛笔体 Ma Shan Zheng，100px） */
.idx .hero-mark { right: auto; left: 4px; top: 50%; transform: translateY(-50%); font-family: 'MaShanZheng', var(--font-display); font-size: 100px; color: #fff; opacity: 0.12; }   /* 2026-09-29 右移 10px（-6→4） */
.idx .hero-dates { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }   /* 2026-09-29 12→13 */
.idx .jieqi { padding: 1px 8px; font-size: 10px; }
.hero-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;   /* 2026-09-29 22→24 */
  letter-spacing: 0.16em; text-indent: 0.16em; line-height: 1.3;
}
.grid {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 14px 16px;
  align-content: start;
}
.cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px 0 9px; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cell:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.cell .z { font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.3; color: var(--zs-main); }
.cell .g { font-size: 10px; color: var(--ink-soft); letter-spacing: 0.14em; }
.idx .note { padding: 0 2px 10px; line-height: 1.6; transform: none; }
.idx .pm-footer {
  padding: 11px 16px 12px; border-top: none; transform: none;
  justify-content: center;   /* 目录页页底只剩品牌一行：居中 */
  background: #2f748a;       /* 与页眉同步：品牌青固定色 */
  color: #fff;
}