/* ========================================
  CSS Variables & Reset
  ======================================== */
:root {
  /* Colors */
  --color-bg-page: #eeeaec;
  --color-bg-content: #eeeeec;
  --color-bg-white: #fff;
  --color-bg-tab: #e5e1d9;
  --color-bg-tab-gray: #d3d4cc;
  --color-bg-tab-active: #7c6f3a;
  --color-bg-tab-inactive: #e5e5e5;
  --color-text-primary: #514e44;
  --color-text-light: #fefef7;
  --color-label-gold: #a29672;
  --color-label-olive: #7c6f3a;
  --color-label-brown: #462a01;
  --color-border-tab: #b4b5af;

  /* Typography */
  --font-kai: 'HYJinKaiJ', 'KaiTi', 'STKaiti', serif;
  --font-hei: 'HYQiHei', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Spacing */
  --page-width: 978px;
  --page-padding: 48px;
  --card-padding: 40px;

  /* Header Tabs */
  --tab-height: 62px;
  --tab-inactive-pad-x: 40px;   /* 非激活标签右侧内边距 */
  --tab-overlap: 126px;         /* 非激活标签与激活标签的重叠量（负边距 + JS 碰撞检测共用） */
  --tab-text-offset: 20px;      /* 非激活标签文字相对激活标签右缘的净偏移 */
  --tab-title-size: 34px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-pill: 50px;
}

/* ---------- 字体内嵌 ---------- */
@font-face {
  font-family: 'HYJinKaiJ';
  src: url('https://itdesign-static.woa.com/fonts/HYJinKaiJ.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

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

body {
  background: var(--color-bg-page);
  display: flex;
  justify-content: center;
}

/* ========================================
    Page Container
    ======================================== */
/* .page 为缩放/居中的外层容器，.page__inner 为内容列容器；
    二者共享的布局/背景/裁剪属性合并声明，避免重复。
    .page__inner 作为列向 flex 子项默认拉伸，宽度自动填满 .page，无需额外差异化。 */
.page,
.page__inner {
  display: flex;
  flex-direction: column;
  width: var(--page-width);
  background: var(--color-bg-content);
  overflow: hidden;
}

.page {
  margin: 0 auto;
}

/* ========================================
    Header
    ======================================== */
.header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header__banner {
  width: 100%;
  height: 500px;
  background: url('https://itdesign-static.woa.com/zhongqi-poster/banner.png') center / cover no-repeat;
}

.header__tab-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 46px var(--page-padding) 0;
}

.header__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.header__tab--active {
  padding: 10px 20px;
  background: var(--color-bg-tab-active);
  z-index: 1;
}

/* 说明：非激活标签整体左移 --tab-overlap，藏到激活标签（z-index:1）之下，
    左内边距在重叠量基础上再加 --tab-text-offset，使文字露出在激活标签右缘。
    此处保留负边距而非 transform/绝对定位：adaptive.js 依赖 offsetLeft 做碰撞
    检测，而 transform 不影响布局坐标，改用它会破坏该逻辑。 */
.header__tab--inactive {
  height: var(--tab-height);
  margin-left: calc(-1 * var(--tab-overlap));
  padding: 0 var(--tab-inactive-pad-x) 0
    calc(var(--tab-overlap) + var(--tab-text-offset));
  background: var(--color-bg-tab-inactive);
  outline: 1px solid var(--color-border-tab);
  outline-offset: -1px;
  font-family: var(--font-kai);
  font-size: var(--tab-title-size);
  color: var(--color-bg-tab-active);
}

.header__tab-text {
  color: var(--color-text-light);
  font-family: var(--font-kai);
  font-size: 33.5px;
  line-height: 42px;
  white-space: nowrap;
}

.interactive-card {
  position: absolute;
  right: 39px;
  top: 477px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.interactive-card__image {
  position: relative;

  /* 固定容器尺寸，内部图片居中裁剪填满（见下方 img 规则） */
  width: 136px;
  height: 136px;
  overflow: hidden;
  z-index: 1;
  border-radius: var(--radius-sm);
}

/* 图片填满容器、保持比例、居中裁剪，兼容非正方形输入 */
.interactive-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.interactive-card__image,
.footer__icon {
  background-color: #E1E1E1;
}


.interactive-card__badge {
  position: relative;
  margin-top: -16px;
  z-index: 2;
}

/* ========================================
    Body (Main Content)
    ======================================== */
.body {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 54px var(--page-padding) 0;
  width: 100%;
}

/* ========================================
    Card - Base
    ======================================== */
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card--intro {
  padding: var(--card-padding);
  gap: 16px;
  background: var(--color-bg-white);
  border-radius: var(--radius-sm);
}

/* Card Tab Header */
.card__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px 8px;
  background: var(--color-bg-tab);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  align-self: flex-start;
  min-width: 100%;
}

.card__tab--gray {
  background: var(--color-bg-tab-gray);
}

.card__tab-title {
  color: var(--color-text-primary);
  font-family: var(--font-kai);
  font-size: 28.5px;
  line-height: 36px;
  white-space: nowrap;
}

/* Card Body */
.card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--card-padding);
  background: var(--color-bg-white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ========================================
    Card Text
    ======================================== */
.card__text {
  color: var(--color-text-primary);
  font-family: var(--font-hei);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  width: 100%;
}

.card__text--kai {
  font-family: var(--font-kai);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

/* 首行缩进：忠实还原原文档段落缩进（全角两字符） */
.card__text--indent {
  text-indent: 2em;
}


/* ========================================
    Card List (无序/有序列表)
    ======================================== */
.card__list {
  width: 100%;
  margin: 0;
  padding-left: 2em;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style-position: outside;
}

.card__list-item {
  color: var(--color-text-primary);
  font-family: var(--font-hei);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}

/* 嵌套子列表：与父项保持适当间距，并略微缩小字号区分层级 */
.card__list-item > .card__list {
  width: auto;
  margin-top: 10px;
  padding-left: 1.5em;
}


/* ========================================
    Card Table (Markdown 表格)
    ======================================== */
.card__table {
  width: calc(100% - 32px);
  border-collapse: collapse;
  margin: 8px 16px;
  border: 0.5px solid #514e44;
}

.card__table th,
.card__table td {
  min-width: 120px;
  height: 56px;
  padding: 8px 18px;
  border: 0.5px solid #514e44;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: break-word;
  color: #514e44;
  font-family: 'HYQiHei', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* 表头：背景使用配色方案的 badge_fill（由 --table-head-bg 内联变量传入），
    其余单元格无背景色 */
.card__table thead th {
  background: var(--table-head-bg, var(--color-bg-tab));
  color: #514e44;
  font-family: 'HYJinKaiJ', serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* 表格标题（整行加粗 **文字**）：水平居中 */
.card__table-title {
  width: 100%;
  text-align: center;
  color: var(--color-text-primary);
  font-family: var(--font-hei);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
}


/* ========================================
    Tree Diagram (> tree 标记的横向树状图)
    ======================================== */

/* 整体容器：多个根（第一层节点）自上而下排列 */
.card__tree {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 0;
  overflow-x: auto;
}

/* 树根行：左侧竖向徽章 + 右侧子节点列，水平展开 */
.tree-root {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 30px;
}

/* 竖向徽章容器：SVG 自带 40px 宽、按字数自适应高，无需旋转 */
.tree-root__badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 竖向徽章：仅 SVG 内的背景六角形旋转，文本竖排正立，故此处不再旋转整体 */
.card__badge--vertical {
  display: flex;
}

/* 竖向徽章 SVG：宽固定 40px、高按 SVG 自身尺寸自适应，
    覆盖横向徽章的 height: 40px，避免被等比压缩变小 */
.card__badge--vertical .card__badge-svg {
  width: 40px;
  height: auto;
}

/* 子节点列：同级节点垂直排列，整体相对父节点垂直居中 */
.tree-children {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;

  /* 28px 中：brace 竖脊 + 连接线占 18px，连接线末端再留 10px 不触碰节点 */
  padding-left: 28px;
  position: relative;
  min-width: 0;
}

/* 同级节点之间的竖向连接线：竖脊 + 上下两端圆角臂，形似大括号。
    臂宽与节点连接线一致（28px），上下两端直接连接首/末 tree-node__label。 */
.tree-children::before {
  content: "";
  position: absolute;
  left: 0;

  /* top/bottom 由 adaptive.js 渲染后测量首/末节点中点写入，
      使上下圆角臂正好收口到第一个和最后一个 tree-node__label 的中间位置。
      无 JS 时回退为 0（跨整个子节点列）。 */
  top: var(--brace-top, 0);
  bottom: var(--brace-bottom, 0);
  width: 13px;
  border: 1px solid var(--tree-line, #c9c4bc);
  border-right: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* 从父节点指向子节点列竖线的横向连接线（宽度与节点连接线一致） */
.tree-children::after {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 28px;
  border-top: 1px solid var(--tree-line, #c9c4bc);
}

/* 树节点：自身标签 + 其子节点列，水平展开 */
.tree-node {
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  min-width: 0;
}

/* 从竖向连接线指向每个节点的横向连接线：
    从 brace 竖脊（左 -28px）出发，宽 18px，末端停在节点左侧 10px 处，不触碰节点 */
.tree-children > .tree-node::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 12px;
  border-top: 1px solid var(--tree-line, #c9c4bc);
}

/* 第一项和最后一项不画横向连接线，由大括号上下圆角臂收尾 */
.tree-children > .tree-node:first-child::before,
.tree-children > .tree-node:last-child::before {
  display: none;
}

/* 下一层只有一个节点时，无需大括号（::before）与父节点引出线（::after），
    改为从父节点直接引出一条横向连接线连到该唯一节点 */
.tree-children--single::before,
.tree-children--single::after {
  display: none;
}

.tree-children--single > .tree-node:first-child::before {
  display: block;
  left: -56px;
  width: 46px;
}

.tree-node__label {
  flex: none;
}

.tree-node:not(:has(> .tree-children)) > .tree-node__label {
  flex: 1 1 0;
  min-width: 0;
}

/* 节点卡片（中间列 / 最后一列通用）：文本直接置于本元素 */
.list-item {
  display: inline-block;
  padding: 14px 24px;
  background-color: var(--tree-item-bg, #efeff9);
  border-radius: 4px;
  color: #514e44;
  text-align: justify;
  font-family: var(--font-hei);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  overflow-wrap: anywhere;
  max-width: 620px;
}

/* 中间列：限宽 180px，超出换行；无背景填充，仅用 badge_fill 描边线框 */
.list-item--mid {
  max-width: 180px;
  background-color: transparent;
  border: 1px solid var(--tree-item-bg, #efeff9);
}

.list-item:not(.list-item--mid) {
  max-width: 100%;
}


/* ========================================
    Card Block (label + text group)
    ======================================== */
.card__block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========================================
    Card Label
    ======================================== */
.card__label {
  font-family: var(--font-hei);
  font-size: 17px;
  line-height: 21px;
  white-space: nowrap;
}

.card__label--gold {
  color: var(--color-label-gold);
}

.card__label--olive {
  color: var(--color-label-olive);
}

.card__label--brown {
  color: var(--color-label-brown);
}

/* ========================================
    Card Subsection (表寒证/表热证/里寒证/里热证)
    ======================================== */
.card__subsection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========================================
    Card Heading (### 小节标题，居中标题)
    ======================================== */
.card__heading {
  width: 100%;
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-kai);
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px;
  color: var(--color-text-primary);
}

/* card__heading 作为 card__body 首个子节点时不加顶部间距 */
.card__body > .card__heading:first-child {
  margin-top: 0;
}

/* ========================================
    Card Badge (小节标题徽章)
    ======================================== */
.card__badge {
  flex-shrink: 0;
  margin: 8px 0;
}

.card__badge-svg {
  display: block;
  height: 40px;
}

/* ========================================
    Card Illustration
    ======================================== */
.card__illustration {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.card__illustration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44.64% -0.35%;
}

/* ========================================
    Card Image (文档中间插图，按原比例展示)
    ======================================== */
.card__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ========================================
    Footer
    ======================================== */
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px var(--page-padding) 60px;
  width: 100%;
}

.footer__bg-image {
  width: 882px;
  height: 360px;
  background: url('https://itdesign-static.woa.com/zhongqi-poster/qrcode-bg.png') center / cover no-repeat;
}

.footer__icon {
  position: absolute;
  left: 405px;
  top: 111px;

  /* 固定容器尺寸，内部图片居中裁剪填满（见下方 img 规则） */
  width: 168px;
  height: 168px;
  overflow: hidden;
  z-index: 1;
}

/* 图片填满容器、保持比例、居中裁剪，兼容非正方形输入 */
.footer__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.footer__decoration {
  width: 691px;
  aspect-ratio: 2181 / 432;
  background: url('https://itdesign-static.woa.com/zhongqi-poster/luokuan.png') center / contain no-repeat;
  margin: 48px 0 0;
}