/* ============================================================
   公元前干支 · 古典中国风 / 新中式极简  v3
   重写于 2026-07-11 — 设计原则：
   1) 宋体衬线承载书卷气，标题楷体增雅
   2) 全程零边框：靠留白、底色块、柔光阴影分层，不用线条装饰
   3) 宣纸晕染背景，朱砂点睛
   4) 卡片柔光悬浮（抬升 + 多层阴影）
   仅升级外壳，不改动任何 JS 逻辑 / HTML 结构。
   与英文版差异：仅字距（中文 .02em / 表格 .01em）。
   ============================================================ */

:root {
  /* —— 宣纸色系（温润，非死白） —— */
  --paper:    #FBF7EF;   /* 宣纸暖白：页面底 */
  --paper-2:  #F3ECDD;   /* 区块/表头底：略深一档 */
  --paper-3:  #ECE3CF;   /* 更深的纸：交互态 */
  /* —— 墨色（正文与点缀） —— */
  --ink:      #1F1E1B;   /* 浓墨：正文 */
  --ink-soft: #57544C;   /* 淡墨：次要 */
  --ink-faint:#8C887E;   /* 飞白：注解 */
  /* —— 点睛色（克制使用） —— */
  --cinnabar: #9E2B25;   /* 朱砂：主强调 */
  --cinnabar-deep:#7E201C;
  --gold:     #B08D57;   /* 描金：极少点缀 */
  /* —— 字体 —— */
  --font-serif: "Noto Serif SC","Source Han Serif SC","Songti SC",STSong,"SimSun","宋体",serif;
  --font-kai:  "Kaiti SC",STKaiti,"KaiTi","楷体",serif;
  --font-num:  "Noto Serif SC",Georgia,"Times New Roman",serif;
  /* —— 圆角 —— */
  --radius:    14px;
  --radius-md: 11px;
  --radius-sm: 8px;
  /* —— 柔光阴影（多层、低透明、大模糊） —— */
  --shadow-1: 0 1px 2px rgba(31,30,27,.05), 0 6px 18px rgba(31,30,27,.06);
  --shadow-2: 0 8px 20px rgba(31,30,27,.10), 0 18px 48px rgba(31,30,27,.12);
  --shadow-red: 0 6px 18px rgba(158,43,37,.22);
  /* —— 字号节奏（clamp 自适应） —— */
  --fs-title: clamp(1.55rem, 1.1rem + 2vw, 2.35rem);
  --fs-h2:    clamp(1.25rem, 1rem + 1.2vw, 1.7rem);
  --fs-h3:    clamp(1.08rem, .95rem + .6vw, 1.3rem);
  --fs-body:  1.0625rem;
}

* { box-sizing: border-box; }

/* 所有图片强制自适应，避免撑破容器导致整页横向溢出 */
img { max-width: 100%; height: auto; display: block; }

/* 兜底：即使有元素溢出，也不让页面整体横向滚动 */
html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
  font: var(--fs-body)/1.85 var(--font-serif);
  color: var(--ink);
  /* 宣纸晕染：两团极淡水墨，营造意境而不抢内容 */
  background:
    radial-gradient(130% 90% at 12% -12%, rgba(158,43,37,.030), transparent 46%),
    radial-gradient(130% 90% at 92% 112%, rgba(176,141,87,.035), transparent 46%),
    var(--paper);
  margin: 0;
  padding: 36px 28px;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

div#wrapper  { margin: 0 auto; max-width: 1180px; }
div#wrapper0 { margin: 0 auto; max-width: 980px; }

/* —— 全局链接：朱砂统一 —— */
a { color: var(--cinnabar); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--cinnabar-deep); opacity: .85; }

/* —— 通用表格：零边框，留白 + 隔行淡底 + 悬浮高亮 —— */
table  { width: 100%; border-collapse: collapse; color: var(--ink); }
th, td {
  padding: 11px 13px;
  text-align: center;
  font-family: var(--font-serif);
  letter-spacing: .01em;
}
thead th, th {
  background: var(--paper-2);
  color: var(--cinnabar);
  font-weight: 600;
}
tbody tr:nth-child(even) td { background: rgba(31,30,27,.022); }
tbody tr:hover td           { background: rgba(158,43,37,.045); }

#calendar table, #table table { width: 100%; min-width: 660px; }
#calendar th, #calendar td,
#table th,   #table td       { padding: 9px 10px; min-width: 92px; }
/* 日历表头：纸色底 + 朱砂字，无底线 */
#calendar th { background: var(--paper-2); color: var(--cinnabar); font-weight: 600; }
#calendar tr:nth-child(even) td { background: rgba(31,30,27,.022); }
#calendar tr:hover td           { background: rgba(158,43,37,.045); }
#calendar th.noborder { background: transparent; border: none; padding: 0; width: 75%; }

/* 日历单元格内：日期/农历/干支紧凑竖排（修复“离得远”） */
#calendar td { vertical-align: top; }
#calendar td h3 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 700; }
#calendar td p  { margin: 2px 0 0; font-size: 12px; line-height: 1.3; }
#calendar th h2 { margin: 0; padding-left: 0; font-size: 15px; line-height: 1.3; }
#calendar th h2::before { display: none; }
#calendar th h3 { margin: 0; font-size: 11px; line-height: 1.3; font-weight: 400; color: var(--ink-soft); }
/* 日历表格外的月相 / 节气说明（</table> 之后独立 <p>，非 td 内）：收紧字号与颜色，避免继承 17px 正文 */
#calendar p { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

/* —— 标题层级：楷体 + 朱砂印章点 —— */
h1 { font: 700 var(--fs-title)/1.35 var(--font-kai); margin: 6px 0 16px; color: var(--ink); }
h2 {
  font: 700 var(--fs-h2)/1.45 var(--font-kai); margin: 22px 0 12px; color: var(--ink);
  position: relative; padding-left: 16px;
}
h2::before {
  content: ''; position: absolute; left: 0; top: .22em; bottom: .22em;
  width: 5px; background: var(--cinnabar); border-radius: 3px;
}
h3 { font: 600 var(--fs-h3)/1.5 var(--font-serif); margin: 16px 0 8px; color: var(--ink); }
h4 { font-size: 1.05rem; margin: 14px 0; color: var(--ink); }

/* —— 年历头部信息块（#calendar 直接子元素，位于各月表格之外）——
   公历年 / 农历年 标签(h1) + 干支详情(h2) 包成一张「宣纸卡」：
   柔光悬浮 + 朱砂印章点睛，月相/节气(p) 同步收紧字号 */
#calendar > h1 {
  background: var(--paper-2); box-shadow: var(--shadow-1);
  margin: 0 auto; max-width: 820px;
  padding: 12px 18px 4px;
  font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--ink);
}
#calendar > h1:first-of-type {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding-top: 16px; padding-bottom: 0;
}
#calendar > h1:first-of-type::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  margin-right: .6em; background: var(--cinnabar); border-radius: 2px;
  vertical-align: .1em; box-shadow: var(--shadow-red);
}
#calendar > h1:last-of-type { padding-top: 2px; padding-bottom: 6px; }
#calendar > h2 {
  font-size: .95rem; font-weight: 600; line-height: 1.6; color: var(--ink-soft);
}
#calendar > h2:first-of-type {
  background: var(--paper-2); box-shadow: var(--shadow-1);
  margin: 0 auto; max-width: 820px;
  padding: 0 18px 16px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
#calendar > p  { font-size: .9rem;  margin: 2px 0 16px;  line-height: 1.5;  color: var(--ink-soft); letter-spacing: normal; }

/* —— 主标题（hero）：居中 + 朱砂渐隐短横，立门面 —— */
#wrapper0 > h1 { text-align: center; letter-spacing: .03em; }
#wrapper0 > h1::after {
  content: ''; display: block; width: 64px; height: 3px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--cinnabar), transparent);
  border-radius: 2px;
}

p {
  font: var(--fs-body)/1.9 var(--font-serif);
  margin: 0 0 12px; letter-spacing: .02em; color: var(--ink);
}
ul { font: 1rem/1.85 var(--font-serif); margin: 12px 0 12px 20px; }
li { margin-bottom: 8px; }

.ref { color: var(--cinnabar); }
.nowrap { white-space: nowrap; }
.greek { font-family: var(--font-num); font-size: 130%; }

/* —— 顶部导航（原 <table width="100%">，不去 HTML，纯 CSS 重做） —— */
table[width="100%"] { width: 100% !important; border-collapse: collapse; margin-bottom: 22px; }
table[width="100%"] td {
  background: transparent; border: none; padding: 4px 12px;
  font-family: var(--font-serif); font-size: .95rem;
}
table[width="100%"] td a {
  color: var(--cinnabar); text-decoration: none; font-weight: 600;
  position: relative; transition: color .2s ease;
}
table[width="100%"] td a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 2px; background: var(--gold); border-radius: 2px; transition: right .25s ease;
}
table[width="100%"] td a:hover { color: var(--cinnabar-deep); }
table[width="100%"] td a:hover::after { right: 0; }

/* —— 主菜单（JS 生成 #menu）：素雅纸色药丸，悬浮抬升 —— */
#menu ul {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
#menu ul li {
  display: block; padding: 9px 18px;
  background: var(--paper-2); color: var(--ink);
  font-family: var(--font-serif); font-size: .95rem; font-weight: 600;
  border-radius: 999px; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
#menu ul li a { display: block; color: inherit; text-decoration: none; }
#menu ul li:hover  { transform: translateY(-2px); box-shadow: var(--shadow-2); background: #fff; color: var(--cinnabar); }
#menu ul li.active { background: var(--cinnabar); color: #fff; box-shadow: var(--shadow-red); }

/* —— 日历选择按钮：纸色 + 柔光，选中朱砂 —— */
button.calendars {
  background: var(--paper-2); color: var(--ink); cursor: pointer; min-width: 104px;
  padding: 10px 16px; border: none; border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font-serif);
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
button.calendars:hover  { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--cinnabar); }
button.calendars.active { background: var(--cinnabar); color: #fff; box-shadow: var(--shadow-red); }

/* —— 年份输入 & 提交：无边框，柔光底，聚焦朱砂描边 —— */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] {
  width: 96px; padding: 9px 12px; font: 16px var(--font-num);
  border: none; border-radius: var(--radius-sm); background: var(--paper-2);
  box-shadow: var(--shadow-1); color: var(--ink); transition: box-shadow .2s ease;
}
input[type=number]:focus { outline: none; box-shadow: 0 0 0 3px rgba(158,43,37,.20); }
input[type=button] {
  background: var(--cinnabar); color: #fff; border: none; padding: 10px 24px;
  border-radius: var(--radius-sm); font: 600 15px var(--font-serif); cursor: pointer;
  box-shadow: var(--shadow-red); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
input[type=button]:hover { transform: translateY(-2px); background: var(--cinnabar-deep); box-shadow: 0 10px 24px rgba(158,43,37,.32); }
p.select {
  font: 600 20px var(--font-serif); background: transparent; cursor: pointer;
  padding: 10px; border: none; outline: none; text-decoration: underline; color: var(--cinnabar);
}
button.return {
  background: var(--paper-2); cursor: pointer; padding: 7px 16px; font: 600 18px var(--font-serif);
  margin: 2px; border: none; border-radius: var(--radius-sm); color: var(--cinnabar);
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease;
}
button.return:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* —— 折叠面板（JS accordion）：纸色卡 + 柔光，悬浮抬升 —— */
button.accordion {
  background: var(--paper-2); color: var(--ink); cursor: pointer;
  padding: 14px 18px; width: 100%; border: none; border-radius: var(--radius-md);
  text-align: left; font: 600 16px/1.4 var(--font-serif); margin-bottom: 10px;
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
button.accordion.active, button.accordion:hover { background: #fff; box-shadow: var(--shadow-2); transform: translateY(-1px); }
button.accordion:before { content: '\2795'; font-size: 16px; color: var(--cinnabar); margin-left: .5em; float: right; transition: transform .2s ease; }
button.accordion.active:before { content: '\2796'; }
div.panel { padding: 4px 18px 16px; background: transparent; max-height: 0; overflow: hidden; }
.panel th, .panel td { letter-spacing: .01em; }

/* —— 纯 CSS 折叠（checkbox + label） —— */
input.accordion { display: none; }
label {
  display: block; margin: 0 0 10px; cursor: pointer; background: var(--paper-2);
  padding: 14px 18px; border: none; border-radius: var(--radius-md);
  font: 600 16px/1.4 var(--font-serif); box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
label:before { content: '\2795'; font-size: 16px; color: var(--cinnabar); margin-left: .5em; float: right; }
label:hover { background: #fff; box-shadow: var(--shadow-2); transform: translateY(-1px); }
.content { background: var(--paper-2); padding: 14px 22px; margin: 0 0 1px; border-radius: 0 0 var(--radius-md) var(--radius-md); }
input.accordion + label + .content { display: none; }
input.accordion:checked + label + .content { display: block; }
input.accordion:checked + label:before { content: '\2796'; }
input.accordion:checked + label { background: #fff; box-shadow: var(--shadow-2); }

/* —— 小标题 sect / subsect：朱砂方印 + 楷体，去底线 —— */
sect {
  display: block; font: 700 1.45rem/1.5 var(--font-kai); margin: 24px 0 14px; color: var(--ink);
}
sect::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: .55em;
  background: var(--cinnabar); border-radius: 2px; vertical-align: .04em;
}
sect::after { display: none; }
subsect { display: block; font: 700 1.18rem/1.5 var(--font-serif); margin: 16px 0 8px; color: var(--ink); }
subsect::after { display: none; }

/* —— 下拉菜单 dropdown：浮层柔光，无边框 —— */
.dropbtn {
  background: var(--paper-2); color: var(--ink); padding: 11px 18px; margin: 5px;
  font: 700 15px var(--font-serif); border: none; border-radius: var(--radius-sm);
  cursor: pointer; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
  display: none; position: absolute; background: #fff; min-width: 184px;
  box-shadow: var(--shadow-2); border-radius: var(--radius-sm); z-index: 10; overflow: hidden;
}
.dropdown-content p {
  color: var(--ink); margin: 0; cursor: pointer; padding: 11px 18px;
  text-align: left; letter-spacing: 0; border-bottom: 1px solid rgba(31,30,27,.05);
  transition: background .15s ease, color .15s ease;
}
.dropdown-content p:last-child { border-bottom: none; }
.dropdown-content p:hover { background: var(--paper-2); color: var(--cinnabar); }
.dropdown:hover .dropdown-content,
.dropdown.showdropdown .dropdown-content { display: block; }
.dropdown:hover .dropbtn,
.dropdown.showdropdown .dropbtn { background: #fff; color: var(--cinnabar); transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* —— 横向滚动容器：手机端日历 / 朔闰表格 —— */
#calendar, #table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 桌面：限制日历最大宽度，避免 7 列被拉过宽导致星期标题间距过大 */
#calendar table { max-width: 820px; margin: 0 auto; }

/* 星期标题：全局收紧（宽屏离线打开也能看到缩小，不依赖 480 断点；顶部年月/lunar 行用 :not([colspan]) 排除） */
#calendar th:not([colspan]) { font-size: 12px !important; letter-spacing: 0; line-height: 1.15; padding: 4px 0; text-align: center; }

/* 月份标题（colspan 表头）上方：一抹朱砂渐隐细线，作新中式分隔，立月份节奏 */
#calendar th[colspan]::before {
  content: ''; display: block; width: 42px; height: 2px; margin: 0 auto 10px;
  background: linear-gradient(90deg, transparent, var(--cinnabar), transparent);
  border-radius: 2px;
}

/* —— 内联说明色修正（原 color:red / color:brown 直接覆盖） —— */
p[style*="color:red"],   #err { color: var(--cinnabar) !important; }
p[style*="color:brown"]       { color: var(--ink-soft) !important; }

/* ============================================================
   响应式断点
   ============================================================ */
@media (max-width: 768px) {
  body { padding: 24px 16px; font-size: 1rem; }
  h1 { margin-bottom: 12px; }
  h2 { margin: 18px 0 10px; }
  #menu ul { gap: 8px; }
  #menu ul li { font-size: .9rem; padding: 8px 15px; }
  /* 顶部菜单（JS 生成的 .dropdown 块）：手机端强制单行不换行；过窄时菜单内横向滚动 */
  #menu { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  #menu .dropdown { flex: 0 0 auto; }
  .dropbtn { margin: 0; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  /* 关键修复：窄屏强制固定布局 + 清零 min-width，彻底消除表格撑破导致的右侧裁切 */
  #calendar, #table { overflow-x: hidden !important; }
  #calendar table, #table table { min-width: 0 !important; width: 100% !important; max-width: 100% !important; table-layout: fixed !important; }
  #calendar th, #calendar td,
  #table th,   #table td { padding: 8px 7px; min-width: 0 !important; word-wrap: break-word; overflow-wrap: break-word; white-space: normal !important; }
  /* 7 列均分（排除顶部 colspan 行）—— !important 覆盖全局 min-width */
  #calendar th:not([colspan]), #calendar td:not([colspan]),
  #table th:not([colspan]),   #table td:not([colspan]) { width: 14.28% !important; min-width: 0 !important; }
  #calendar th[colspan], #table th[colspan] { white-space: normal; word-break: break-word; overflow-wrap: break-word; }
  /* 顶部表头（年月 / 月相 / 节气）：收紧字号，避免在窄屏显得过大 */
  #calendar th h2 { font-size: 14px; line-height: 1.3; }
  #calendar th h3 { font-size: 10px; line-height: 1.3; }
  /* 表格外月相 / 节气说明：同步收紧 */
  #calendar p { font-size: 11px; line-height: 1.5; }
  /* 年历头部信息随屏宽进一步收紧 */
  #calendar > h1 { font-size: 1rem; }
  #calendar > h2 { font-size: .9rem; }
  #calendar > p  { font-size: .85rem; }
  table[width="100%"] td { font-size: .9rem; padding: 4px 9px; }
  button.calendars { min-width: 88px; font-size: 14px; padding: 9px 12px; }
  /* 输入区（年份提示 / 括号注释 / 儒略日数单选行）：手机端同步收紧，与紧凑日历协调 */
  #wrapper0 > h3 { font-size: 15px; line-height: 1.4; }
  #wrapper0 > p  { font-size: 12px; line-height: 1.5; }
}

@media (max-width: 480px) {
  body { padding: 18px 12px; }
  /* 顶部导航：链接自然换行 */
  table[width="100%"] td { white-space: normal; word-break: keep-all; line-height: 2; text-align: center; padding: 4px 7px; }
  #menu ul { gap: 6px; }
  #menu ul li { font-size: .85rem; padding: 7px 13px; }
  /* 顶部菜单进一步收紧，确保四个分类在 320px 屏宽内单行容纳 */
  #menu { gap: 3px; }
  .dropbtn { padding: 7px 8px; font-size: 13px; }
  input[type=number] { width: 84px; }
  /* 输入区在窄屏进一步收紧字号 */
  #wrapper0 > h3 { font-size: 14px; line-height: 1.4; }
  #wrapper0 > p  { font-size: 11px; line-height: 1.5; }
  /* 整周可见：7 列均分屏宽，全部 !important 覆盖 JS 内联样式与全局 min-width */
  #calendar, #table { overflow-x: hidden !important; }
  #calendar table, #table table { min-width: 0 !important; width: 100% !important; max-width: 100% !important; table-layout: fixed !important; }
  /* 所有单元格：清零最小宽、允许内部换行，杜绝任何 nowrap 撑破表格 */
  #calendar th, #calendar td,
  #table th,   #table td { min-width: 0 !important; padding: 4px 1px !important; word-wrap: break-word; overflow-wrap: break-word; white-space: normal !important; }
  /* 仅非 colspan 的 7 列单元格均分宽度（顶部 colspan 行不参与，避免破坏布局） */
  #calendar th:not([colspan]), #calendar td:not([colspan]),
  #table th:not([colspan]),   #table td:not([colspan]) { width: 14.28% !important; min-width: 0 !important; }
  /* 顶部信息行（colspan=2 / colspan=5）：允许换行，lunar 文本不被裁 */
  #calendar th[colspan] { white-space: normal !important; word-break: break-word; overflow-wrap: break-word; }
  /* 顶部表头字号：年月 / 月相 / 节气一并收紧 */
  #calendar th h2 { font-size: 13px !important; line-height: 1.25 !important; }
  #calendar th h3 { font-size: 9px !important; line-height: 1.3 !important; font-weight: 400 !important; color: var(--ink-soft) !important; }
  /* 表格外月相 / 节气说明：极致紧凑，覆盖内联 letter-spacing:normal 之外的继承字号 */
  #calendar p { font-size: 10px !important; line-height: 1.45 !important; color: var(--ink-soft) !important; }
  /* 年历头部信息：移动端极致紧凑 */
  #calendar > h1 { font-size: .9rem; }
  #calendar > h2 { font-size: .82rem; line-height: 1.45; }
  #calendar > p  { font-size: .8rem;  line-height: 1.45; }
  /* 卡片内边距随屏宽收紧 */
  #calendar > h1:first-of-type,
  #calendar > h1:last-of-type,
  #calendar > h2:first-of-type { padding-left: 14px; padding-right: 14px; }
  #calendar > h1:first-of-type { padding-top: 12px; }
  #calendar > h2:first-of-type { padding-bottom: 12px; }
  /* 星期标题行：覆盖 JS 内联 font-size:120%，极致紧凑 */
  #calendar th { font-size: 11px !important; }
  #calendar th:not([colspan]) { font-size: 13px !important; padding: 1px 0 !important; letter-spacing: 0 !important; word-spacing: 0 !important; line-height: 1.15 !important; text-align: center !important; }
  #calendar td h3 { font-size: 13px; }
  #calendar td p  { font-size: 10px; line-height: 1.2; }
  /* 防御性：覆盖旧版表头 75% 宽度（真实无此元素时无害） */
  #calendar th.noborder { width: auto !important; }
}

/* 触屏设备：下拉菜单点击触发（原 @media (hover:none) 已恢复） */
@media (hover: none) {
  .dropdown.showdropdown .dropdown-content { display: block; }
  .dropdown.showdropdown .dropbtn { background: #fff; color: var(--cinnabar); }
}