@charset "UTF-8";
/* ==========================================================================
   design.css — 设计系统
   只定义「变量 / 重置 / 排版 / 通用原子类」，不针对任何具体区块。
   改全站主色调、圆角、间距，改这一个文件就够了。
   ========================================================================== */

:root{
  /* ---- 品牌色：深青绿主色 + 暖橙点缀，医疗康复专业感 ---- */
  --brand:        #0F6E56;
  --brand-hover:  #0C5846;
  --brand-2:      #1D9E75;
  --brand-soft:   #E1F5EE;
  --accent:       #D85A30;
  --accent-soft:  #FAECE7;

  /* ---- 文字层级 ---- */
  --ink:          #12211C;
  --ink-2:        #4A5C55;
  --ink-3:        #7C8C85;
  --ink-invert:   #FFFFFF;

  /* ---- 背景层级 ---- */
  --paper:        #FFFFFF;
  --paper-2:      #F7F6F3;
  --paper-3:      #FBFAF8;

  /* ---- 描边 ---- */
  --line:         rgba(18,33,28,.10);
  --line-2:       rgba(18,33,28,.18);

  /* ---- 圆角 ---- */
  --r-sm:         6px;
  --r:            10px;
  --r-lg:         14px;
  --r-pill:       999px;

  /* ---- 阴影（仅两档，克制使用）---- */
  --sh-1:         0 1px 2px rgba(18,33,28,.04);
  --sh-2:         0 2px 8px rgba(18,33,28,.06), 0 8px 24px rgba(18,33,28,.05);

  /* ---- 容器宽度：与父主题 .container 对齐思路，稍放宽 ---- */
  --w:            1200px;

  /* ---- 字体：系统字体栈，零网络请求、无 FOUT ---- */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ==========================================================================
   1. 重置与基线
   ========================================================================== */

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

html{
  /* 平滑滚动；尊重系统「减弱动态效果」设置 */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 防止长英文/ISBN 串撑破窄屏容器 */
  overflow-wrap: break-word;
  word-break: break-word;
}

img, svg, video{ max-width: 100%; height: auto; display: block; }
img{ border-radius: var(--r-sm); }

a{ color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover{ color: var(--brand); }

/* 键盘可见性：无障碍要求，不要删除 */
:focus-visible{
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 3px;
}

button, input, select, textarea{
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   2. 排版
   ========================================================================== */

h1, h2, h3, h4, h5, h6{
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 .6em;
}

h1{ font-size: 28px; letter-spacing: -.02em; }
h2{ font-size: 22px; }
h3{ font-size: 18px; }
h4{ font-size: 16px; }
h5, h6{ font-size: 15px; }

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

ul, ol{ margin: 0 0 1em 1.4em; }
li{ margin-bottom: .35em; }

blockquote{
  margin: 1.2em 0;
  padding: 12px 18px;
  border-left: 3px solid var(--brand-2);
  background: var(--brand-soft);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink-2);
}

code, kbd, pre{ font-family: var(--mono); font-size: .92em; }
code{
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--brand);
}
pre{
  background: var(--paper-2);
  padding: 14px 16px;
  border-radius: var(--r);
  overflow-x: auto;
  border: 1px solid var(--line);
}

hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

/* 表格（正文里偶尔出现） */
table{
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 14px;
}
th, td{
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
}
th{ background: var(--paper-2); font-weight: 600; }

/* ==========================================================================
   3. 通用原子类
   父主题结构无法改 HTML 时，可用这些类在「外观 → 小工具 / 自定义 HTML」里直接调用
   ========================================================================== */

.ptb-wrap{ max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* 卡片 */
.ptb-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh-1);
}

/* 按钮 */
.ptb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.ptb-btn:hover{ border-color: var(--brand-2); color: var(--brand); }
.ptb-btn--primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.ptb-btn--primary:hover{
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

/* 标签 / 徽标 */
.ptb-tag{
  display: inline-block;
  font-size: 12px;
  line-height: 1.8;
  padding: 1px 9px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink-2);
}
.ptb-tag--brand{ background: var(--brand-soft); color: var(--brand); }
.ptb-tag--accent{ background: var(--accent-soft); color: var(--accent); }

/* 区块标题（可用于自定义 HTML 小工具） */
.ptb-sec-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ptb-sec-title h2{ margin: 0; font-size: 20px; }
.ptb-sec-title .more{ font-size: 13px; color: var(--brand); font-weight: 500; }

/* 无障碍：仅屏幕阅读器可见 */
.ptb-sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}