/*
====================================================================
《無大過》公共视觉语义规范 · V0.5.3（全站约束）

一、字体按【内容性质】分类，不按所在页面、组件或视觉位置分类。
  楷体：古典文献原文（卦辞、爻辞、彖传、大小象传、序卦传等）；
        卦序诗、传统卦名及八卦名称。
  宋体：非原文的结构性说明（如“上坎水 · 下坤地”）；
        “卦辞 / 彖曰 / 象曰”等【栏目标题】；网站中文主标题。
  无衬线：导航、按钮、操作提示、考核进度、统计等现代界面文字。

二、同一经典原文在识象、绘象、读典及未来页面中始终使用楷体。
    任何页面专属 CSS 不得擅自覆盖公共组件的字体语义。
    修改字体归属须先修改本规范，并同步审查全部调用页面。

三、组件契约：
  .wdg-classic-text / .wdg-classic-name  → 楷体
  .wdg-structural-text                  → 宋体
  .wdg-ui-text                          → 无衬线
  既有类名继续受公共样式管理，兼容原有页面；禁止用 !important 补丁。

四、字体与色彩变量统一在下面 :root 定义；组件不得另建冲突变量。
    本规范不改变既有字号、行距、卦画几何、动画或业务逻辑。
====================================================================
*/
:root{
--paper:#f7f4ed;--surface:#fffdf9;--ink:#372f29;--ink-deep:#372f29;--brown:#40362f;--brown-soft:#91694e;
--red:#91694e;--line:#d9cbbd;--muted:#756b60;--shadow:0 5px 18px rgba(92,58,32,.10);
--page:min(1020px,92vw);--content:min(800px,calc(100% - 36px));--function-band-h:56px;--core-gap:10px;--standard-card-viewport-h:340px;--relation-h:29px;--relation-px:12px;--relation-gap:9px;--relation-radius:7px;
--yao-w:276px;--yao-h:16px;--row-h:40px;--yao-gap:calc(var(--row-h) - var(--yao-h));--yao-side:calc((var(--yao-w) - var(--yao-gap))/2);--trigram-gap:8px;
--font-song:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;--font-kai:"Kaiti SC","STKaiti","KaiTi","楷体",serif;--font-ui:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--song:var(--font-song);--kai:var(--font-kai);--ui-font:var(--font-ui);--classic-font:var(--font-kai)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--kai)}button,a{font:inherit}
.site-shell{width:100%;padding:24px 18px 34px}.site-header{text-align:center}
.brand{display:inline-flex;align-items:baseline;justify-content:center;font-size:34px;font-weight:700;letter-spacing:.12em;color:var(--brown)}
.brand-sub{font-size:14px;font-weight:500;letter-spacing:.13em;color:#9a6741;margin-left:7px;position:relative;top:.36em;white-space:nowrap}
.site-nav{display:flex;justify-content:center;gap:24px;margin:11px auto 0;font-size:14px;letter-spacing:.08em}
.site-nav a{position:relative;color:#8a725f;text-decoration:none;padding:3px 1px}.site-nav a:hover{color:var(--red)}
.site-nav a[aria-current="page"]{color:var(--brown);font-weight:700}.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:15%;right:15%;bottom:-3px;height:1px;background:var(--brown-soft)}
.guaxu-scroll{position:relative;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));direction:rtl;width:var(--page);max-width:var(--page);margin:19px auto 4px;padding:14px 0 12px;min-height:151px;align-items:stretch}
.guaxu-scroll::before,.guaxu-scroll::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(122,77,41,.10)}.guaxu-scroll::before{top:0}.guaxu-scroll::after{bottom:0}
.guaxu-column{direction:ltr;width:100%;display:grid;grid-template-rows:repeat(7,1.62em);align-items:center;justify-items:center;border-left:1px solid rgba(105,82,58,.16)}.guaxu-column:last-child{border-left:0}
.guaxu-char{display:flex;width:100%;height:1.62em;align-items:center;justify-content:center;line-height:1;border-radius:2px;font-size:17px;cursor:pointer;transition:.15s}
.guaxu-char[data-no]:hover{color:#a34732;background:rgba(163,71,50,.07)}.guaxu-char.plain{cursor:default;pointer-events:none;user-select:none}.guaxu-char.active{color:var(--red);font-weight:700;text-shadow:0 0 10px rgba(163,71,50,.10)}
.gua-card{position:relative;width:min(530px,92%);height:320px;background:var(--surface);border:1px solid #dccab7;border-radius:10px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:24px 28px 48px}
.gua-diagram{position:relative;display:grid;grid-template-columns:48px 34px var(--yao-w) 58px;grid-template-rows:var(--row-h) var(--row-h) var(--row-h) var(--trigram-gap) var(--row-h) var(--row-h) var(--row-h);column-gap:10px;align-items:center;width:max-content}
.gua-row{display:contents}.gua-row:nth-of-type(1)>*{grid-row:1}.gua-row:nth-of-type(2)>*{grid-row:2}.gua-row:nth-of-type(3)>*{grid-row:3}.gua-row:nth-of-type(4)>*{grid-row:5}.gua-row:nth-of-type(5)>*{grid-row:6}.gua-row:nth-of-type(6)>*{grid-row:7}
.tri-name{grid-column:1;text-align:center;font-size:26px;line-height:1;color:#7a4d29;font-weight:600}.polarity{grid-column:2;text-align:center;font-family:var(--song);font-size:14px;font-weight:700}.yang-word{color:var(--red)}.yin-word{color:#302b27}
.yao{grid-column:3;width:var(--yao-w);height:var(--yao-h);background:#3f3730}.yao.yin{background:linear-gradient(to right,#3f3730 0,#3f3730 var(--yao-side),transparent var(--yao-side),transparent calc(var(--yao-side) + var(--yao-gap)),#3f3730 calc(var(--yao-side) + var(--yao-gap)),#3f3730 var(--yao-w))}
.vertical-name{grid-column:4;grid-row:1/8;justify-self:center;align-self:center;writing-mode:vertical-rl;text-orientation:upright;font-size:30px;line-height:1.15;letter-spacing:.12em;color:var(--red);font-weight:600}
.card-formula{position:absolute;left:20px;right:20px;bottom:13px;text-align:center;border-top:1px solid #eadfd3;padding-top:8px;font-size:18px;color:var(--brown);letter-spacing:.04em}.card-formula b{color:#a34732;font-size:20px}.nature-sub{font-size:.68em;color:var(--brown-soft);vertical-align:sub;margin:0 1px}
.section{width:var(--content);margin:48px auto 0}.section-title{margin:0 0 14px;font-size:21px;font-weight:600;letter-spacing:.08em;color:var(--ink-deep)}
.classic-scroll{margin-top:54px;margin-bottom:82px;padding-top:28px;border-top:1px solid #e4d8ca}.classic-head{max-width:760px;margin:0 auto 30px;text-align:center}.classic-head h2{margin:0 0 8px;font-family:var(--classic-font);font-size:28px;font-weight:600;color:var(--red)}.classic-formula{color:#887565;font-size:14px;letter-spacing:.08em}
.classic-block,.line-item{max-width:760px;margin:0 auto;padding:15px 0;border-bottom:1px solid #eee4d8}.classic-label,.line-title{margin:0 0 7px;font-size:18px;font-weight:600;color:#8c4c32}
.classic-body{font-size:16px;line-height:2;color:#3f3934;white-space:pre-line}.gua-jing .jing-body,.line-jing{font-family:var(--kai);font-size:18px;color:#6f4428}
.zhuan-label{margin:0 0 5px;font-family:var(--song);font-size:15px;font-weight:600;color:#786d64}.zhuan-body,.line-xiang{font-size:15px;line-height:1.95;color:#5f5750;white-space:pre-line}.line-xiang{margin-top:6px}.line-xiang b{color:#8d7563;font-weight:500}
@media(max-width:700px){:root{--page:94vw}.site-shell{padding:15px 8px 26px}.brand{font-size:28px}.brand-sub{font-size:12px}.site-nav{gap:17px;font-size:13px}.guaxu-scroll{padding:12px 0 10px;min-height:125px}.guaxu-char{font-size:14px}}
@media(max-width:600px){:root{--yao-w:200px;--yao-h:12px;--row-h:34px;--trigram-gap:7px}.gua-card{width:min(410px,94%);height:278px;padding:20px 12px 43px}.gua-diagram{grid-template-columns:38px 28px var(--yao-w) 45px;column-gap:6px}.tri-name{font-size:22px}.vertical-name{font-size:25px}.polarity{font-size:12px}.card-formula{font-size:15px;bottom:10px}.card-formula b{font-size:17px}.section{width:calc(100% - 24px)}}
@media(max-width:390px){:root{--yao-w:170px;--yao-h:11px;--row-h:31px}.gua-card{width:96%;height:248px}.gua-diagram{grid-template-columns:32px 24px var(--yao-w) 40px;column-gap:5px}.tri-name{font-size:20px}.vertical-name{font-size:22px}}


/* ===== 公共组件边界（V0.1.9）=====
   guaxu/poem：卦序诗公共组件
   gua-card / gua-diagram / yao / tri-name / vertical-name：标准大卦牌公共视觉
   hex-index / idx-*：六十四卦矩阵公共视觉
   具体3D舞台、左右翻页、交卦、取互/清互仍归页面专属控制。
*/


/* V0.1.9.1 经传正文字体纠正：只改字体，不改既有颜色 */
.tuan-text,
.xiang-text,
.classic-text,
.classic-body{
  font-family:var(--classic-font);
}


/* V0.1.9.2：彖传、大象传正文。
   zhuanBlock() 的真实正文容器就是 .zhuan-body。
   仅修正字体；现有灰色、字号、行距全部继承不动。 */
.zhuan-body{
  font-family:var(--classic-font) ;
}


/* ===== V0.1.10 全站文献结构标签统一 =====
   卦辞 / 彖曰 / 大象“象曰” / 初六九二… / 用九用六
   统一为同一级块级结构标签。
*/
.classic-label,
.zhuan-label,
.line-title{
  font-family:var(--font-song);
  font-size:18px ;
  font-weight:600 ;
  line-height:1.45 ;
  color:#9a4b34 ;
  margin:0 0 12px ;
  letter-spacing:.02em ;
}

/* 小象中的“象曰：”属于行内结构提示，不抬升为块级标题 */
.line-xiang b{
  font-family:var(--font-song);
  font-size:inherit;
  font-weight:600;
}


/* ===== V0.4.0 三页公共页面骨架 =====
   卦序诗 → 固定高度功能带 → 页面核心工作区。
   功能带外框只允许在公共层定义；各页面 CSS 只负责内部排布。 */
.page-function-bar{
  width:var(--page);
  max-width:var(--page);
  height:var(--function-band-h);
  min-height:var(--function-band-h);
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  align-items:center;
  color:#907d6d;
  font-family:var(--ui-font);
  font-size:12px;
  letter-spacing:.04em;
}

/* 识卦、画卦共用弹窗基础视觉。页面只保留确有业务差异的 modifier。 */
.quiz-dialog-backdrop{
  position:fixed;inset:0;z-index:10000;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(48,38,29,.22);
}
.quiz-dialog-backdrop.show{display:flex}
.quiz-dialog{
  width:min(540px,92vw);max-height:76vh;overflow:auto;
  background:var(--surface);border:1px solid #dccab7;border-radius:10px;
  box-shadow:0 12px 38px rgba(65,45,30,.16);padding:16px 18px;
}
.quiz-dialog-head{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ui-font);font-size:18px;color:#7d4d2c;
  padding-bottom:10px;border-bottom:1px solid #eadfd3;
}
.quiz-dialog-head button{
  border:0;background:transparent;color:#8d725d;font-size:24px;cursor:pointer;
}
.quiz-mistake-item{padding:11px 2px;border-top:1px solid rgba(126,88,54,.12)}
.quiz-mistake-item:first-child{border-top:0}
.quiz-mistake-name{font-family:var(--ui-font);font-size:16px;margin-bottom:4px}
.quiz-mistake-detail{font-family:var(--classic-font);font-size:14px;line-height:1.7;color:#816e5d}

@media(max-width:700px){
  :root{--function-band-h:56px}
  .page-function-bar{width:94vw;max-width:94vw}
}


/* V0.4.1 公共骨架第二边界：
   功能带高度相同还不够，功能带结束到核心工作区开始的净空也必须唯一。
   三页核心工作区统一从功能带底边后 10px 开始。 */
.page-core-work-area{
  margin-top:0;
  padding-top:10px;
  box-sizing:border-box;
}



/* =========================================================
   V0.5.0 · 周易魔方公共设计系统（等价重构）
   原则：公共化只改变定义位置，不重新设计已经确认的视觉。
   ========================================================= */

/* A-B-C 公共纵向骨架
   A = 卦序诗下横线
   B = 功能带内容中心线
   C = 核心可见卡片顶部
*/
.page-function-bar{
  width:var(--page);
  max-width:var(--page);
  height:var(--function-band-h);
  min-height:var(--function-band-h);
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  align-items:center;
  color:#907d6d;
  font-family:var(--ui-font);
  font-size:12px;
  letter-spacing:.04em;
}
.page-core-work-area{
  margin-top:0;
  padding-top:var(--core-gap);
  box-sizing:border-box;
}

/* 拨卦与识卦都用标准大卦牌。
   viewport 高度统一后，320px 卦牌在其中上下各留 10px，
   因而实际可见卦牌顶部 C 锚点完全一致。 */
.standard-card-viewport{
  height:var(--standard-card-viewport-h);
}

/* 画卦不是标准大卦牌 viewport，直接把工作卡顶部补到同一个 C 锚点。 */
.core-panel-anchor{
  margin-top:var(--core-gap);
}

/* 关系卦：全站唯一组件。
   识卦与画卦共同使用，不允许页面 CSS 再定义尺寸。 */
.relation-switch{
  display:flex;
  justify-content:center;
  gap:var(--relation-gap);
  flex-wrap:wrap;
}
.relation-btn{
  height:var(--relation-h);
  padding:2px var(--relation-px);
  border-radius:var(--relation-radius);
  border:1px solid rgba(151,112,76,.30);
  background:rgba(255,250,243,.50);
  color:#8b6748;
  cursor:pointer;
}
.relation-btn:hover:not(:disabled){
  background:rgba(231,212,191,.34);
}
.relation-btn.active{
  background:rgba(218,191,160,.50);
  color:#70451f;
  border-color:rgba(151,105,65,.58);
}
.relation-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

/* 已定稿文字语义：结构说明=宋体；《周易》原文=楷体。 */
.site-nav,
.brand-sub,
.page-function-bar,
.classic-label,
.zhuan-label,
.line-title,
.line-xiang b{
  font-family:var(--font-song);
}
.classic-body,
.jing-body,
.zhuan-body,
.line-jing,
.line-xiang{
  font-family:var(--classic-font) ;
}
.line-xiang b{
  font-family:var(--font-song);
  font-weight:600 ;
}

@media(max-width:700px){
  :root{--standard-card-viewport-h:305px}
}
@media(max-width:390px){
  :root{--standard-card-viewport-h:275px;--relation-px:9px}
}


/* V0.5.2 · 全站键盘聚焦语言；不改变鼠标与触摸视觉。 */
.nav-arrow:focus-visible,
.relation-btn:focus-visible,
.tri-choice:focus-visible,
.idx-hex:focus-visible,
.guaxu-char:focus-visible,
button:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

/* ================================================================
   無大過 V0.4.2 · 统一样式语义表
   视觉令牌只在文件开头 :root 定义；此处仅规定组件的字体归属。
   经典名称/卦序诗/经传原文 → 楷体；结构性解释 → 宋体；操作 → 无衬线。
   原有字号、行距、几何、动画及响应式规则保持不变。
   ================================================================ */

body{font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
/* 网站识别与操作界面 */
.brand{font-family:var(--font-song);font-weight:500;letter-spacing:.18em;color:var(--brown)}
.brand-sub{font-family:var(--font-ui);color:var(--muted);font-weight:400;letter-spacing:.025em}
.site-nav,.page-function-bar,.quiz-instruction,.quiz-stats,
.draw-controls,.draw-stats,.draw-progress{font-family:var(--font-ui)}
.site-nav a{color:var(--muted)}
.site-nav a[aria-current="page"]{color:var(--red)}
.site-nav a[aria-current="page"]::after{background:var(--red)}
/* 原文及专有卦名：识象、绘象、读典共用 */
.guaxu-scroll,.guaxu-column,.guaxu-char,
.gua-card .tri-name,.gua-card .vertical-name,.gua-card .card-formula b,
.idx-name,.classic-head h2,.draw-classic-title,.draw-answer b,
.classic-body,.jing-body,.zhuan-body,.line-jing,.line-xiang{font-family:var(--font-kai)}
.draw-classic-text{font-family:var(--font-kai)}
/* 结构说明：卦牌阴阳、上下经卦公式、经传栏目标签 */
.gua-card .polarity,.gua-card .card-formula,.gua-card .card-formula .nature-sub,
.classic-formula,.draw-classic-label{font-family:var(--font-song)}
.classic-label,.zhuan-label,.line-title,.line-xiang b{
  font-family:var(--font-song);
}
/* 沿用新版首页纸色与轻边框；不触碰卦画及版式几何 */
.gua-card,.draw-card,.quiz-dialog{background:var(--surface);border-color:var(--line);box-shadow:0 3px 16px rgba(55,47,41,.06)}
.classic-label,.zhuan-label,.line-title,.draw-classic-label{color:var(--red)}
.subsite-footer{text-align:center;margin:30px auto 24px;font:12px/1.8 var(--font-ui);color:#8c8076}
.subsite-footer a{color:inherit;text-decoration:none}
.subsite-footer a:hover{text-decoration:underline;color:var(--red)}

/* V0.5.3：字体语义唯一权威入口。此段仅决定字体，不改变排版参数。 */
.wdg-classic-text,.wdg-classic-name,
.guaxu-scroll,.guaxu-column,.guaxu-char,
.gua-card .tri-name,.gua-card .vertical-name,.gua-card .card-formula b,
.idx-name,.classic-head h2,.draw-classic-title,.draw-answer b,
.classic-body,.jing-body,.zhuan-body,.line-jing,.line-xiang,
.draw-classic-text,.tuan-text,.xiang-text,.classic-text{
  font-family:var(--font-kai);
}
.wdg-structural-text,
.gua-card .polarity,.gua-card .card-formula,.gua-card .card-formula .nature-sub,
.classic-formula,.classic-label,.zhuan-label,.line-title,.line-xiang b,
.draw-classic-label{
  font-family:var(--font-song);
}
.wdg-ui-text{font-family:var(--font-ui)}