@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ──────────────────────────────────────────
   ink 皮肤变量（全部限定在 body.skin-ink）
   ────────────────────────────────────────── */
body.skin-ink {
  --ink-bg:      #ffffff;
  --ink-paper:   #f9f8f6;
  --ink-ink:     #1a1a1a;
  --ink-muted:   #706f6b;
  --ink-border:  #e8e4de;
  --ink-accent:  #a83232;
  --ink-nav-w:   220px;
  --content-max-width: 680px;
  --spacing-large: 4rem;
  --font-size-body: 18px;
  --line-height: 1.6;
  --radius-card: 4px;
  --radius-btn: 6px;

  /* 覆盖 theme 变量供公共层兼容 */
  --brand: #a83232;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #706f6b;
  --surface: #f9f8f6;
  --border: #e8e4de;
  --radius: var(--radius-card);

  font-family: 'Noto Sans KR', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  color: var(--ink-ink);
  background: var(--ink-bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body.skin-ink * { box-sizing: border-box; }
body.skin-ink html { scroll-behavior: smooth; }
body.skin-ink img { max-width: 100%; height: auto; display: block; }
body.skin-ink a { color: inherit; text-decoration: none; }

/* 无障碍：跳到主内容链接（键盘用户可见，鼠标用户不见） */
body.skin-ink .ink-skip {
  position: absolute;
  left: -9999px;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: var(--ink-accent);
  color: #fff;
  font-size: 0.9rem;
  border-radius: var(--radius-btn);
  z-index: 9999;
}
body.skin-ink .ink-skip:focus { left: 1rem; }

/* ──────────────────────────────────────────
   布局外壳：左侧固定竖排导航 + 右侧内容区
   ────────────────────────────────────────── */
body.skin-ink .ink-nav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--ink-nav-w);
  background: var(--ink-bg);
  border-right: 1px solid var(--ink-border);
  z-index: 100;
  overflow-y: auto;
}
body.skin-ink .ink-nav-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.5rem 1.5rem 2rem;
}
body.skin-ink .ink-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-ink);
  margin-bottom: 3rem;
  letter-spacing: -0.01em;
}
body.skin-ink .ink-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-accent);
  flex-shrink: 0;
}
body.skin-ink .ink-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
}
body.skin-ink .ink-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.skin-ink .ink-menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-muted);
  border-left: 2px solid transparent;
  transition: color 0.18s cubic-bezier(0.16,1,0.3,1),
              border-color 0.18s cubic-bezier(0.16,1,0.3,1),
              padding-left 0.18s cubic-bezier(0.16,1,0.3,1);
  border-radius: 0 2px 2px 0;
}
body.skin-ink .ink-menu a:hover {
  color: var(--ink-ink);
  border-left-color: var(--ink-border);
  padding-left: 1rem;
}
body.skin-ink .ink-menu a[aria-current="page"] {
  color: var(--ink-accent);
  border-left-color: var(--ink-accent);
  font-weight: 500;
  padding-left: 1rem;
}
body.skin-ink .ink-nav-foot {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-border);
}
body.skin-ink .ink-nav-about {
  font-size: 0.82rem;
  color: var(--ink-muted);
}
body.skin-ink .ink-nav-about:hover { color: var(--ink-ink); }
/* focus-visible on nav links（audit：missing focus ring） */
body.skin-ink .ink-menu a:focus-visible,
body.skin-ink .ink-nav-about:focus-visible,
body.skin-ink .ink-brand:focus-visible {
  outline: 2px solid var(--ink-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 移动端汉堡按钮（桌面隐藏） */
body.skin-ink .ink-mob-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  background: var(--ink-bg);
  border: 1px solid var(--ink-border);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-ink);
  line-height: 1;
}
body.skin-ink .ink-mob-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink-bg);
  padding: 4rem 1.5rem 2rem;
  overflow-y: auto;
}
body.skin-ink .ink-mob-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.skin-ink .ink-mob-menu li { border-bottom: 1px solid var(--ink-border); }
body.skin-ink .ink-mob-menu a {
  display: flex;
  align-items: center;
  padding: 0.85rem 0.5rem;
  min-height: 44px;          /* WCAG 2.5.5 touch target */
  font-size: 1.1rem;
  color: var(--ink-ink);
}
body.skin-ink .ink-mob-menu.open { display: block; }

/* 内容区偏移 */
body.skin-ink .ink-wrap {
  margin-left: var(--ink-nav-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.skin-ink .ink-wrap main { flex: 1; }

/* 通用容器（内容区宽度） */
body.skin-ink .container {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ──────────────────────────────────────────
   Hero：文在上、图在下、居中堆叠
   ────────────────────────────────────────── */
body.skin-ink .ink-hero {
  border-bottom: 1px solid var(--ink-border);
  background: var(--ink-bg);
}
body.skin-ink .ink-hero-text {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 5rem 2rem 3rem;
  text-align: center;
}
body.skin-ink .ink-hero-text h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink-ink);
  margin: 0 0 1rem;
  word-break: keep-all;
}
body.skin-ink .ink-hero-text .lead {
  font-size: 1.1rem;
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0 auto 2rem;
  max-width: 52ch;
}
body.skin-ink .ink-hero-img {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}
body.skin-ink .ink-hero-photo {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-card);
}
body.skin-ink .ink-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
body.skin-ink .page-meta {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 0.75rem 0 0;
}

/* ──────────────────────────────────────────
   共用：eyebrow
   ────────────────────────────────────────── */
body.skin-ink .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-accent);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.4rem;
}
body.skin-ink .eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink-accent);
  opacity: 0.4;
}

/* ──────────────────────────────────────────
   共用：按钮
   ────────────────────────────────────────── */
body.skin-ink .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem 1.5rem;
  min-height: 44px;           /* WCAG 2.5.5 touch target ≥44px */
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 0.95rem;
  background: var(--ink-accent);
  color: #fff;
  border: 1px solid var(--ink-accent);
  cursor: pointer;
  transition: opacity 0.18s cubic-bezier(0.16,1,0.3,1),
              background 0.18s cubic-bezier(0.16,1,0.3,1),
              transform 0.12s cubic-bezier(0.16,1,0.3,1);
  letter-spacing: 0.01em;
  text-decoration: none;
  user-select: none;
}
body.skin-ink .btn:hover {
  opacity: 0.88;
  background: #943030;
}
body.skin-ink .btn:active {
  transform: scale(0.97);
  opacity: 0.95;
}
body.skin-ink .btn:focus-visible {
  outline: 2px solid var(--ink-accent);
  outline-offset: 3px;
}
body.skin-ink .btn-ghost,
body.skin-ink .btn.ghost {
  background: transparent;
  color: var(--ink-ink);
  border-color: var(--ink-border);
}
body.skin-ink .btn-ghost:hover,
body.skin-ink .btn.ghost:hover {
  background: var(--ink-paper);
  opacity: 1;
}
body.skin-ink .btn-ghost:active,
body.skin-ink .btn.ghost:active {
  transform: scale(0.97);
}

/* ──────────────────────────────────────────
   Section 通用
   ────────────────────────────────────────── */
body.skin-ink .section {
  padding: 5rem 0;
}
body.skin-ink .sec-head {
  max-width: var(--content-max-width);
  margin-bottom: 3rem;
}
body.skin-ink .sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body.skin-ink .sec-head h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-ink);
  margin: 0 0 0.5em;
  line-height: 1.25;
}
body.skin-ink .sec-head .lead {
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0;
  max-width: 56ch;
}
body.skin-ink .sec-head.center .lead {
  margin: 0 auto;
}

/* 通用标题 h2 h3 */
body.skin-ink h1, body.skin-ink h2, body.skin-ink h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
body.skin-ink h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; }
body.skin-ink h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 600; }
body.skin-ink h3 { font-size: 1.05rem; font-weight: 500; }
body.skin-ink p  { margin: 0 0 1em; text-wrap: pretty; }

/* ──────────────────────────────────────────
   card（底部强调线，圆角 4px，无阴影）
   ────────────────────────────────────────── */
body.skin-ink .card {
  background: var(--ink-bg);
  border: 1px solid var(--ink-border);
  border-bottom: 2px solid var(--ink-accent);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  transition: opacity 0.2s ease;
}
body.skin-ink .card:hover { opacity: 0.88; }
body.skin-ink .card .ico {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--ink-accent);
  margin-bottom: 1rem;
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-card);
  background: var(--ink-paper);
}
body.skin-ink .card h3 { margin-bottom: 0.35em; }
body.skin-ink .card p  { color: var(--ink-muted); margin: 0; font-size: 0.95rem; }
body.skin-ink .card-img { margin: -1.5rem -1.5rem 1.25rem; border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; }
body.skin-ink .card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* ──────────────────────────────────────────
   grid（通用网格）
   ────────────────────────────────────────── */
body.skin-ink .grid { display: grid; gap: 1.25rem; }
body.skin-ink .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
body.skin-ink .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
body.skin-ink .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  body.skin-ink .grid.cols-3,
  body.skin-ink .grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body.skin-ink .grid.cols-2,
  body.skin-ink .grid.cols-3,
  body.skin-ink .grid.cols-4 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   Features（list 变体）
   ────────────────────────────────────────── */
body.skin-ink .feat-list {
  max-width: var(--content-max-width);
  margin: 0 auto;
}
body.skin-ink .feat-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ink-border);
}
/* quieter：首条不加顶线，仅靠 sec-head 底部间距分隔 */
body.skin-ink .feat-row:first-child { border-top: none; }
body.skin-ink .feat-lead {
  flex-shrink: 0;
  padding-top: 0.15rem;
}
body.skin-ink .feat-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-accent);
  margin-top: 0.4rem;
}
body.skin-ink .feat-body h3 { margin-bottom: 0.25em; font-size: 1rem; font-weight: 500; }
body.skin-ink .feat-body p  { color: var(--ink-muted); margin: 0; font-size: 0.95rem; }

/* ──────────────────────────────────────────
   Stats（cards 变体）
   ────────────────────────────────────────── */
body.skin-ink .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
body.skin-ink .stat-cards .stat {
  background: var(--ink-paper);
  border: 1px solid var(--ink-border);
  border-bottom: 2px solid var(--ink-accent);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  text-align: left;
}
body.skin-ink .stat .num {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--ink-accent);
  line-height: 1;
  margin-bottom: 0.35rem;
}
body.skin-ink .stat .lbl { color: var(--ink-muted); font-size: 0.88rem; }
@media (max-width: 560px) {
  body.skin-ink .stats { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   Prose（content 正文，sidebar 变体）
   ────────────────────────────────────────── */
body.skin-ink .prose {
  max-width: var(--content-max-width);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  color: var(--ink-ink);
}
body.skin-ink .prose h2 { margin-top: 2em; font-weight: 600; }
body.skin-ink .prose h3 { margin-top: 1.5em; font-weight: 500; }
body.skin-ink .prose ul { padding-left: 1.2em; }
body.skin-ink .prose li { margin: 0.4em 0; }
body.skin-ink .prose a { color: var(--ink-accent); text-decoration: underline; text-underline-offset: 3px; }
body.skin-ink .prose a:hover { opacity: 0.8; }
body.skin-ink .prose-cols { column-count: 2; column-gap: 2rem; }
@media (max-width: 640px) {
  body.skin-ink .prose-cols { column-count: 1; }
}

/* content sidebar 变体 */
body.skin-ink .content-side {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}
body.skin-ink .content-aside .sec-head { margin-bottom: 0; }
body.skin-ink .content-aside h2 { font-size: 1.2rem; }
body.skin-ink .content-aside .lead { font-size: 0.9rem; }
@media (max-width: 640px) {
  body.skin-ink .content-side { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ──────────────────────────────────────────
   FAQ（twocol 变体）
   ────────────────────────────────────────── */
body.skin-ink .faq-cols {
  columns: 2;
  column-gap: 2rem;
}
body.skin-ink .faq details {
  break-inside: avoid;
  border-bottom: 1px solid var(--ink-border);
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
  background: none;
}
body.skin-ink .faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 0.97rem;
  padding: 0.9rem 0;
  list-style: none;
  color: var(--ink-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
body.skin-ink .faq summary::-webkit-details-marker { display: none; }
body.skin-ink .faq summary::after {
  content: '+';
  color: var(--ink-accent);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
body.skin-ink .faq details[open] summary::after { content: '−'; }
body.skin-ink .faq details p {
  color: var(--ink-muted);
  font-size: 0.93rem;
  padding: 0 0 1rem;
  margin: 0;
  line-height: 1.65;
}
body.skin-ink .faq-list dl { max-width: var(--content-max-width); }
body.skin-ink .faq-item { padding: 1rem 0; border-bottom: 1px solid var(--ink-border); }
body.skin-ink .faq-item dt {
  font-weight: 500;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
body.skin-ink .faq-item dt .n {
  color: var(--ink-accent);
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 1.5rem;
}
body.skin-ink .faq-item dd { color: var(--ink-muted); margin: 0; font-size: 0.94rem; padding-left: 2.25rem; }
@media (max-width: 640px) {
  body.skin-ink .faq-cols { columns: 1; }
}

/* ──────────────────────────────────────────
   Gallery（grid 变体）
   ────────────────────────────────────────── */
body.skin-ink .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}
body.skin-ink .gallery figure {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: var(--ink-paper);
}
body.skin-ink .gallery img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}
body.skin-ink .gallery figure:hover img { opacity: 0.9; }
body.skin-ink .gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.82rem;
  background: linear-gradient(0deg, rgba(26,26,26,.75) 0%, transparent 100%);
}
@media (max-width: 640px) {
  body.skin-ink .gallery { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────
   Split（media-left 变体）
   ────────────────────────────────────────── */
body.skin-ink .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
body.skin-ink .split.reverse .split-media { order: 2; }
body.skin-ink .split-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-card);
}
body.skin-ink .split-body { padding: 0; }
body.skin-ink .split-body h2 { margin-top: 0; }
body.skin-ink .split-body ul { padding-left: 1.1em; color: var(--ink-muted); }
body.skin-ink .split-body li { margin: 0.5em 0; font-size: 0.95rem; }
body.skin-ink .split-body .eyebrow { text-align: left; }
@media (max-width: 760px) {
  body.skin-ink .split { grid-template-columns: 1fr; }
  body.skin-ink .split.reverse .split-media { order: 0; }
}

/* ──────────────────────────────────────────
   Steps（cards 变体）
   ────────────────────────────────────────── */
body.skin-ink .steps {
  counter-reset: ink-step;
  display: grid;
  gap: 1rem;
  max-width: var(--content-max-width);
  margin: 0 auto;
}
body.skin-ink .steps.cols {
  grid-template-columns: repeat(2, 1fr);
  max-width: 100%;
}
body.skin-ink .step {
  counter-increment: ink-step;
  position: relative;
  padding: 1.4rem 1.5rem 1.4rem 4rem;
  border: 1px solid var(--ink-border);
  border-bottom: 2px solid var(--ink-accent);
  border-radius: var(--radius-card);
  background: var(--ink-bg);
}
body.skin-ink .step::before {
  content: counter(ink-step, decimal-leading-zero);
  position: absolute;
  left: 1.25rem;
  top: 1.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-accent);
  letter-spacing: 0.04em;
}
body.skin-ink .step .n { display: none; } /* steps 的 n 由 ::before 接管 */
body.skin-ink .step h3 { margin: 0 0 0.3em; font-size: 0.97rem; font-weight: 500; }
body.skin-ink .step p  { margin: 0; color: var(--ink-muted); font-size: 0.92rem; }

/* timeline 变体 */
body.skin-ink .timeline { list-style: none; padding: 0; margin: 0; }
body.skin-ink .timeline .step {
  padding-left: 4rem;
  background: none;
  border: none;
  border-left: 2px solid var(--ink-border);
  border-bottom: none;
  border-radius: 0;
  margin-left: 1.25rem;
  padding-bottom: 2rem;
}
body.skin-ink .timeline .step::before {
  left: -1.75rem;
  background: var(--ink-bg);
  border: 2px solid var(--ink-accent);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 1rem;
}

/* steps-row 变体 */
body.skin-ink .steps-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
body.skin-ink .steps-row .step { min-width: 180px; flex: 1; }

@media (max-width: 640px) {
  body.skin-ink .steps.cols { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   CTA（split 变体）
   ────────────────────────────────────────── */
body.skin-ink .cta-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--ink-paper);
  border: 1px solid var(--ink-border);
  border-left: 3px solid var(--ink-accent);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3rem);
}
body.skin-ink .cta-split h2 { margin: 0 0 0.4em; font-size: clamp(1.2rem, 2vw, 1.6rem); }
body.skin-ink .cta-split .lead { margin: 0; font-size: 0.97rem; color: var(--ink-muted); }
body.skin-ink .cta-act { flex-shrink: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
body.skin-ink .cta-band {
  background: var(--ink-paper);
  border: 1px solid var(--ink-border);
  border-bottom: 2px solid var(--ink-accent);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
body.skin-ink .cta-band h2 { margin-bottom: 0.35em; }
body.skin-ink .cta-band .lead { margin: 0 auto 1.75rem; max-width: 52ch; color: var(--ink-muted); }
body.skin-ink .cta-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
body.skin-ink .cta-inline h2 { margin: 0; }
@media (max-width: 640px) {
  body.skin-ink .cta-split { flex-direction: column; align-items: flex-start; }
  body.skin-ink .cta-inline { flex-direction: column; align-items: flex-start; }
}

/* ──────────────────────────────────────────
   Footer（四栏 + 版权条）
   ────────────────────────────────────────── */
body.skin-ink .ink-footer {
  background: #1a1a1a;
  color: rgba(255,255,255,0.82);
  padding: 4rem 2rem 2rem;
  margin-left: 0;
}
body.skin-ink .ink-footer-grid {
  max-width: 840px;
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
body.skin-ink .ink-footer-brand {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
body.skin-ink .ink-footer-col p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
body.skin-ink .ink-footer-col h4 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 1rem;
}
body.skin-ink .ink-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.skin-ink .ink-footer-col li { margin: 0.5rem 0; }
body.skin-ink .ink-footer-col a {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  transition: color 0.2s;
}
body.skin-ink .ink-footer-col a:hover { color: #fff; }
body.skin-ink .ink-footer-bottom {
  max-width: 840px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 760px) {
  body.skin-ink .ink-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  body.skin-ink .ink-footer-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   Bento / feat-num（其它 features 变体，覆盖）
   ────────────────────────────────────────── */
body.skin-ink .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
body.skin-ink .bento .card.span2 { grid-column: span 2; }
@media (max-width: 640px) {
  body.skin-ink .bento { grid-template-columns: 1fr 1fr; }
  body.skin-ink .bento .card.span2 { grid-column: span 1; }
}
body.skin-ink .feat-num { list-style: none; padding: 0; margin: 0; }
body.skin-ink .feat-num li {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ink-border);
}
body.skin-ink .feat-num .n {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-accent);
  min-width: 2rem;
  padding-top: 0.2rem;
}

/* ──────────────────────────────────────────
   Stat variants（row / cards）
   ────────────────────────────────────────── */
body.skin-ink .stats:not(.stat-cards) {
  text-align: center;
}
body.skin-ink .stats:not(.stat-cards) .stat {
  padding: 1.25rem;
  background: none;
  border: none;
}

/* ──────────────────────────────────────────
   滚动渐显（Scroll Reveal · Standard）
   纯 CSS + IntersectionObserver；400ms slide-up 12px；power2.out ≈ cubic-bezier(.25,.46,.45,.94)
   Stagger List · Standard：staggered scale from 0.97 → 1.0；300ms；back.out(1.4) ≈ cubic-bezier(.34,1.56,.64,1)
   prefers-reduced-motion 下全部关闭
   ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.skin-ink.js-reveal .section {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s cubic-bezier(.25,.46,.45,.94),
                transform 0.4s cubic-bezier(.25,.46,.45,.94);
  }
  body.skin-ink.js-reveal .section.in {
    opacity: 1;
    transform: none;
  }
  /* Stagger：feat-row / .step / .stat / .gallery figure 子元素 */
  body.skin-ink.js-reveal .section.in .feat-row,
  body.skin-ink.js-reveal .section.in .step,
  body.skin-ink.js-reveal .section.in .stat,
  body.skin-ink.js-reveal .section.in .gallery figure {
    /* back.out 极轻微 overshoot（quieter：降弹性） */
    animation: ink-stagger-in 0.35s cubic-bezier(.34,1.06,.64,1) both;
  }
  body.skin-ink.js-reveal .section.in .feat-row:nth-child(1),
  body.skin-ink.js-reveal .section.in .step:nth-child(1),
  body.skin-ink.js-reveal .section.in .stat:nth-child(1),
  body.skin-ink.js-reveal .section.in .gallery figure:nth-child(1) { animation-delay: 0ms; }
  body.skin-ink.js-reveal .section.in .feat-row:nth-child(2),
  body.skin-ink.js-reveal .section.in .step:nth-child(2),
  body.skin-ink.js-reveal .section.in .stat:nth-child(2),
  body.skin-ink.js-reveal .section.in .gallery figure:nth-child(2) { animation-delay: 60ms; }
  body.skin-ink.js-reveal .section.in .feat-row:nth-child(3),
  body.skin-ink.js-reveal .section.in .step:nth-child(3),
  body.skin-ink.js-reveal .section.in .stat:nth-child(3),
  body.skin-ink.js-reveal .section.in .gallery figure:nth-child(3) { animation-delay: 120ms; }
  body.skin-ink.js-reveal .section.in .feat-row:nth-child(4),
  body.skin-ink.js-reveal .section.in .step:nth-child(4),
  body.skin-ink.js-reveal .section.in .gallery figure:nth-child(4) { animation-delay: 180ms; }
  body.skin-ink.js-reveal .section.in .feat-row:nth-child(5),
  body.skin-ink.js-reveal .section.in .step:nth-child(5),
  body.skin-ink.js-reveal .section.in .gallery figure:nth-child(5) { animation-delay: 240ms; }
  body.skin-ink.js-reveal .section.in .feat-row:nth-child(n+6),
  body.skin-ink.js-reveal .section.in .step:nth-child(n+6),
  body.skin-ink.js-reveal .section.in .gallery figure:nth-child(n+6) { animation-delay: 300ms; }
}
@keyframes ink-stagger-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ──────────────────────────────────────────
   移动端响应式：nav 折叠，内容区全宽
   ────────────────────────────────────────── */
@media (max-width: 900px) {
  body.skin-ink .ink-nav { display: none; }
  body.skin-ink .ink-mob-toggle { display: block; }
  body.skin-ink .ink-wrap { margin-left: 0; }
  body.skin-ink .container { padding: 0 1.25rem; }
  body.skin-ink .ink-hero-text { padding: 4rem 1.25rem 2.5rem; }
  body.skin-ink .ink-hero-img { padding: 0 1.25rem 2.5rem; }
  body.skin-ink .section { padding: 3.5rem 0; }
}

/* ──────────────────────────────────────────
   移动汉堡菜单开关（原生 JS 在 renderPage 底部内联）
   ────────────────────────────────────────── */


/* ---- variants: shared layout (pipeline/lib/variants.js) ---- */
.sec-head.center{text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
/* features=list */
.feat-list{display:grid;gap:0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.feat-row{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent);align-items:start}
.feat-row .feat-lead{font-size:1.8rem;line-height:1}
.feat-row .feat-dot{display:block;width:12px;height:12px;border-radius:50%;background:currentColor;margin-top:10px;opacity:.6}
.feat-row h3{margin:0 0 .35em}
.feat-row p{margin:0;opacity:.8}
/* features=bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;grid-auto-flow:dense}
.bento .card.span2{grid-column:span 2}
/* features=numbered */
.feat-num{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px;counter-reset:fn}
.feat-num li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.feat-num .n{font-size:1.6rem;font-weight:800;line-height:1;opacity:.35;font-variant-numeric:tabular-nums}
.feat-num h3{margin:0 0 .3em}
.feat-num p{margin:0;opacity:.8}
/* steps=timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 34px;position:relative;max-width:720px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:color-mix(in srgb,currentColor 18%,transparent)}
.timeline .step{position:relative;padding:0 0 34px 18px;background:none;border:0;box-shadow:none}
.timeline .step:last-child{padding-bottom:0}
.timeline .step::before{content:"";position:absolute;left:-34px;top:8px;width:20px;height:20px;border-radius:50%;background:currentColor;opacity:.85}
.timeline .step::after{content:"";position:absolute;left:-28px;top:14px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.timeline .n{display:block;font-size:.8rem;letter-spacing:.12em;opacity:.5;margin-bottom:6px;font-variant-numeric:tabular-nums}
.timeline h3{margin:0 0 .3em}
.timeline p{margin:0;opacity:.8}
/* steps=row */
.steps-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:22px;position:relative}
.steps-row::before{content:"";position:absolute;left:0;right:0;top:17px;height:2px;background:color-mix(in srgb,currentColor 16%,transparent)}
.steps-row .step{position:relative;padding:54px 0 0;background:none;border:0;box-shadow:none;border-radius:0}
.steps-row .n{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;border:2px solid currentColor;font-variant-numeric:tabular-nums}
.steps-row h3{margin:0 0 .3em}
.steps-row p{margin:0;opacity:.8}
/* faq=twocol */
.faq.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start;max-width:none}
/* faq=list */
.faq-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.faq-list .faq-item{padding:0 0 22px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.faq-list dt{font-weight:700;font-size:1.05rem;margin:0 0 .4em;display:flex;gap:12px;align-items:baseline}
.faq-list dt .n{font-size:.78rem;letter-spacing:.1em;opacity:.45;font-variant-numeric:tabular-nums}
.faq-list dd{margin:0;opacity:.82}
/* cta=split */
.cta-split{display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;padding:34px 38px;border:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.cta-split h2{margin:0 0 .25em}
.cta-split .lead{margin:0}
/* cta=inline */
.cta-inline{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.cta-inline h2{margin:0;font-size:clamp(1.2rem,2.4vw,1.7rem)}
/* content=columns */
.prose.prose-cols{column-count:2;column-gap:48px;max-width:none}
.prose.prose-cols>*{break-inside:avoid}
.prose.prose-cols h2,.prose.prose-cols h3{column-span:all}
/* content=sidebar */
.content-side{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:48px;align-items:start}
.content-side .content-aside{position:sticky;top:90px}
.content-side .sec-head{text-align:left;margin:0}
/* gallery=masonry */
.gallery.gallery-masonry{display:block;column-count:3;column-gap:16px}
.gallery.gallery-masonry figure{break-inside:avoid;margin:0 0 16px}
/* gallery=strip */
.gallery.gallery-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;grid-template-columns:none}
.gallery.gallery-strip figure{flex:0 0 min(70vw,420px);scroll-snap-align:start;margin:0}
/* stats=cards */
.stats.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.stats.stat-cards .stat{padding:26px 20px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);text-align:center}
@media(max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .bento .card.span2{grid-column:span 2}
  .feat-num,.faq.faq-cols,.faq-list,.content-side{grid-template-columns:1fr}
  .feat-row{grid-template-columns:48px 1fr;gap:14px}
  .steps-row{grid-auto-flow:row}
  .steps-row::before{display:none}
  .cta-split{grid-template-columns:1fr;padding:26px}
  .cta-inline{flex-direction:column;align-items:flex-start}
  .prose.prose-cols{column-count:1}
  .gallery.gallery-masonry{column-count:2}
  .content-side .content-aside{position:static}
}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento .card.span2{grid-column:auto}}


/* 滚动渐显：仅在 JS 就绪(js-reveal) + 允许动效时隐藏，无 JS 或 reduce-motion 时正常显示，防止内容看不见 */
@media (prefers-reduced-motion:no-preference){
  body.js-reveal.fx-reveal .section{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
  body.js-reveal.fx-reveal .section.in{opacity:1;transform:none}
}
/* 图片 lightbox */
body.fx-lightbox .gallery img{cursor:zoom-in}
.lb-overlay{position:fixed;inset:0;background:rgba(8,10,14,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:24px;cursor:zoom-out}
.lb-overlay.open{display:flex}
.lb-overlay img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.5)}