/* ==========================================================================
   components.css —— 组件层
   依据：docs/design-spec.md § 5 组件样式（每组件四态：默认/悬停/按下/禁用）
   硬性：所有可点击元素命中区 ≥ 44×44px（视觉可小，用 padding/伪元素撑开）
   ========================================================================== */

/* ==========================================================================
   5.1 按钮
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body-ui);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms var(--ease-std),
              border-color 200ms var(--ease-std),
              color 200ms var(--ease-std),
              box-shadow 200ms var(--ease-std),
              transform 200ms var(--ease-std);
}

/* --- 主按钮 --- */
.btn--primary {
  background-color: var(--primary-deep);
  color: var(--on-primary);
  border-color: var(--primary);          /* 1px 提亮边，让暗底上的按钮发光 */
}
.btn--primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-light);
  box-shadow: var(--glow-primary);
  color: var(--on-primary);
}
.btn--primary:active {
  background-color: var(--primary-active);
  box-shadow: none;
  transform: translateY(1px);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background-color: var(--neutral-500);
  color: var(--disabled-fg);
  border-color: var(--neutral-400);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* --- 次按钮 --- */
.btn--secondary {
  background-color: transparent;
  color: var(--primary-light);
  border-color: var(--neutral-300);      /* 控件边框下限 4.77:1 */
}
.btn--secondary:hover {
  background-color: var(--primary-tint-10);
  border-color: var(--primary-light);
  color: var(--primary-light);
}
.btn--secondary:active {
  background-color: var(--primary-tint-18);
  border-color: var(--primary);
  transform: translateY(1px);
}
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
  color: var(--neutral-200);
  border-color: var(--neutral-400);
  background-color: transparent;
  transform: none;
  cursor: not-allowed;
}

/* --- 文字按钮 --- */
.btn--text {
  background: none;
  border: none;
  padding: var(--sp-3) var(--sp-2);
  color: var(--primary-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--neutral-350);
  text-underline-offset: 4px;
}
.btn--text:hover {
  color: var(--neutral-050);
  text-decoration-color: var(--primary-light);
  background: none;
  box-shadow: none;
}
.btn--text:active { color: var(--primary); text-decoration-color: var(--primary); }
.btn--text:disabled,
.btn--text[aria-disabled="true"] {
  color: var(--neutral-200);
  text-decoration-color: var(--neutral-400);
  cursor: not-allowed;
}

/* --- 朱红按钮（仅仪式性动作：发动第五魔法） --- */
.btn--accent {
  background-color: var(--accent-deep);
  color: var(--on-primary);
  border-color: var(--accent);
}
.btn--accent:hover {
  background-color: var(--accent-hover);
  box-shadow: var(--glow-accent);
  color: var(--on-primary);
}
.btn--accent:active {
  background-color: var(--accent-active);
  box-shadow: none;
  transform: translateY(1px);
}
.btn--accent:disabled,
.btn--accent[aria-disabled="true"] {
  background-color: var(--neutral-500);
  color: var(--disabled-fg);
  border-color: var(--neutral-400);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* --- 尺寸档 --- */
.btn--lg {
  min-height: 52px;
  padding: var(--sp-4) var(--sp-6);
  font-size: 18px;
}
.btn--sm {
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-caption);
}
/* 小档：视觉 36px，命中区补到 44px（§ 5.1） */
.btn--sm::after {
  content: "";
  position: absolute;
  inset: -4px 0;
  min-height: 44px;
}
.btn--block { width: 100%; }

/* --- 图标按钮（灯箱关闭、四季暂停）视觉 40×40 / 命中 44×44 --- */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-full);
  background-color: var(--overlay-icon-btn);
  border: 1px solid var(--neutral-300);
  color: var(--neutral-050);
  cursor: pointer;
  transition: background-color 200ms var(--ease-std), border-color 200ms var(--ease-std);
}
/* 命中区撑到 44×44 */
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.icon-btn:hover { background-color: var(--neutral-550); border-color: var(--primary-light); color: var(--neutral-050); }
.icon-btn:active { background-color: var(--neutral-500); }
.icon-btn svg { width: 20px; height: 20px; display: block; }
.icon-btn[disabled] { color: var(--disabled-fg); border-color: var(--neutral-400); cursor: not-allowed; }

/* ==========================================================================
   5.2 表单（三态：默认 / 聚焦 / 错误，另含禁用）
   ========================================================================== */
.field { margin-bottom: var(--sp-5); }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  letter-spacing: 0;
  color: var(--neutral-150);
}
.field__req { color: var(--accent); margin-left: 2px; }

.field__control,
.input,
.textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--neutral-750);
  border: 1px solid var(--neutral-300);     /* 4.77:1，控件边框下限 */
  border-radius: var(--r-md);
  color: var(--neutral-100);
  font-family: var(--font-sans);
  font-size: var(--fs-body-ui);
  line-height: var(--lh-body-ui);
  transition: border-color 200ms var(--ease-std), box-shadow 200ms var(--ease-std);
}
.textarea { min-height: 128px; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--neutral-200); }   /* 5.95:1 on neutral-750 */

.input:hover,
.textarea:hover { border-color: var(--neutral-200); }

.input:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--primary-glow);
  outline-offset: 2px;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint-28);
}

.input:disabled,
.textarea:disabled {
  background-color: var(--neutral-550);
  border-color: var(--neutral-400);
  color: var(--disabled-fg);
  cursor: not-allowed;
}

/* 错误态：边框 + 左侧 4px 竖条 + 图标 + 文字（不只靠颜色，§ 5.2 / § 2.3） */
.field.is-error .input,
.field.is-error .textarea {
  border-color: var(--danger);
  box-shadow: inset 4px 0 0 var(--danger);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--danger-on-bg-light, var(--danger));
}
.field__error::before {
  content: "⚠";
  flex: none;
  font-size: 14px;
}

/* 提交状态提示条（加载中 / 成功 / 失败三态） */
.status {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.6;
}
.status[hidden] { display: none; }
.status__icon { flex: none; font-weight: var(--fw-bold); }
.status--success { background: var(--success-bg); color: var(--success-on-bg); border-color: var(--success); }
.status--error   { background: var(--danger-bg);  color: var(--danger-on-bg);  border-color: var(--danger); }
.status--info    { background: var(--info-bg);    color: var(--info-on-bg);    border-color: var(--info); }
.status--loading { background: var(--neutral-550); color: var(--neutral-150); border-color: var(--neutral-300); }

/* 加载指示（旋转环，reduce-motion 下 CSS 全局会停用，改为静态） */
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--neutral-300);
  border-top-color: var(--primary);
  border-radius: var(--r-full);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   5.3 卡片
   ========================================================================== */
.card {
  position: relative;
  display: block;
  padding: var(--card-pad);
  background-color: var(--neutral-600);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  color: var(--neutral-100);
  text-decoration: none;
}
.card--hoverable {
  transition: background-color 200ms var(--ease-std),
              border-color 200ms var(--ease-std),
              box-shadow 200ms var(--ease-std),
              transform 200ms var(--ease-std);
}
.card--hoverable:hover {
  background-color: var(--neutral-550);
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  color: var(--neutral-100);
}
.card--hoverable:focus-visible { outline-offset: 3px; }
.card--hoverable:hover .card__title { color: var(--primary-light); }

.card__title { margin-bottom: var(--sp-2); color: var(--neutral-050); transition: color 200ms var(--ease-std); }
.card__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--neutral-100); margin: 0; }

/* 档案数据卡（§ 5.3，左侧 4px 铜色竖条） */
.datacard {
  background-color: var(--neutral-700);
  border-left: 4px solid var(--copper);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
}
.datacard__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--neutral-400);
}
.datacard__row:last-child { border-bottom: none; }
.datacard__key {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--neutral-200);
}
.datacard__val {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--neutral-050);
  text-align: right;
}

/* 图片卡（画廊缩略图，同 § 5.5） */
.imgcard {
  position: relative;
  display: block;
  background-color: var(--neutral-700);
  border: none;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  padding: 0;
  width: 100%;
  cursor: pointer;
  color: inherit;
}
.imgcard--16x9 { aspect-ratio: 16 / 9; }
.imgcard--1x1  { aspect-ratio: 1 / 1; }

.imgcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}
.imgcard:hover .imgcard__img { transform: scale(1.04); }
.imgcard:active .imgcard__img { transform: scale(1.0); }

.imgcard__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-none);
  transition: background-color 400ms ease-out;
  pointer-events: none;
}
.imgcard:hover .imgcard__scrim { background: var(--scrim-hover); }
.imgcard:active .imgcard__scrim { background: var(--scrim-press); }

/* 标题压在下沿渐变遮罩上（§ 8.1-4 禁止无遮罩压字） */
.imgcard__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-8) var(--sp-3) var(--sp-3);
  background: linear-gradient(to top, var(--scrim-caption) 0%, transparent 100%);
  color: var(--neutral-050);
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
}
.imgcard__caption-title { display: block; color: var(--neutral-050); }

/* 左上角分类角标：#01 */
.imgcard__badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--overlay-icon-btn);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--neutral-050);
  backdrop-filter: blur(4px);
}
.imgcard__badge .t-num { font-size: 11px; color: var(--primary-light); }

/* 右下角放大镜图标 */
.imgcard__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: 24px;
  height: 24px;
  color: var(--neutral-050);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  pointer-events: none;
}
.imgcard:hover .imgcard__zoom,
.imgcard:focus-visible .imgcard__zoom { opacity: 1; transform: translateY(0); }

/* 骨架屏（neutral-700 底 + 横向扫光 1.4s，reduce 下静态） */
.skeleton { position: relative; overflow: hidden; background: var(--neutral-600); }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--neutral-600) 0%, var(--neutral-400) 50%, var(--neutral-600) 100%);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 纸上卡片（C 基调，§ 5.3） */
.paper-card {
  position: relative;
  display: block;
  padding: var(--card-pad);
  background-color: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
}
.paper-card::after {                       /* 0.5% 噪点纹理（CSS，非图片叠加） */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, var(--paper-3d) 0.5px, transparent 0.5px),
    radial-gradient(circle at 70% 65%, var(--paper-3d) 0.5px, transparent 0.5px);
  background-size: 7px 7px, 11px 11px;
}
.paper-card__title { color: var(--ink); }
.paper-card__text { color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.paper-card--hoverable { transition: transform 200ms var(--ease-std), box-shadow 200ms var(--ease-std), border-color 200ms var(--ease-std); }
.paper-card--hoverable:hover {
  transform: translateY(-2px);
  border-color: var(--copper);
  box-shadow: 0 8px 32px rgba(61, 46, 31, 0.28);
  color: var(--ink);
}
.paper-card--hoverable:hover .paper-card__title { color: var(--paper-link); }

/* ==========================================================================
   5.4 导航
   ========================================================================== */

/* --- 顶部条（移动 <1024 为主形态，桌面转横向导航） --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--nav-h);
  background-color: var(--overlay-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms var(--ease-std), border-color 300ms var(--ease-std);
}
/* 滚动 > 80px 后改为不透明 + 底部分隔线（§ 5.4） */
.site-nav.is-scrolled {
  background-color: var(--neutral-000);
  border-bottom-color: var(--neutral-400);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--safe-x);
}
@supports (backdrop-filter: none) {
  .site-nav { background-color: var(--overlay-nav); }
}

/* Logo：高 32px（桌面）/ 28px（移动）的字符标识 */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding-inline: var(--sp-1);
  text-decoration: none;
  color: var(--neutral-050);
  flex: none;
}
.logo__mark {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--neutral-050);
}
.logo__romaji {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  color: var(--neutral-200);
}
@media (min-width: 640px) {
  .logo__mark { font-size: 24px; }
  .logo__romaji { display: block; }
}

/* --- 桌面导航菜单（≥1024） --- */
.nav-menu { display: none; }
.nav-menu__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);         /* 间距 4px，靠 padding 撑开 */
  margin: 0;
}
.nav-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--neutral-150);
  text-decoration: none;
  transition: color 200ms var(--ease-std);
}
.nav-menu__link::after {                 /* 底部 2px 指示条 */
  content: "";
  position: absolute;
  inset-inline: var(--sp-4);
  bottom: 6px;
  height: 2px;
  background: transparent;
  transition: background-color 200ms var(--ease-std);
}
.nav-menu__link:hover { color: var(--neutral-050); }
.nav-menu__link:hover::after { background: var(--primary); }
.nav-menu__link[aria-current="page"] { color: var(--primary-light); }
.nav-menu__link[aria-current="page"]::after { background: var(--primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
.nav-actions .btn--sm + .btn--sm { margin-left: var(--sp-1); }

/* <1024px：顶栏只保留 logo + 汉堡。
   两个 CTA（画廊 / 第五魔法）在窄屏会撑破 375px 顶栏（实测 409px > 375px），
   且这两条路径在窄屏已有等价入口：
     · 「发动第五魔法」→ 首屏 CTA、能力设定区按钮、抽屉菜单
     · 「图片画廊」    → 底部 Tab Bar 第二项
   因此窄屏隐藏不损失任何功能可达性。 */
@media (max-width: 1023px) {
  .nav-actions .btn { display: none; }
}

/* 进度条（阅读进度，3px，朱红→青蓝） */
.progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  transform-origin: left center;
}

/* 汉堡按钮：视觉 40×40 / 命中 44×44 */
.burger {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  color: var(--neutral-050);
  cursor: pointer;
}
.burger::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.burger:hover { border-color: var(--neutral-300); background-color: var(--neutral-550); }
.burger__line {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 300ms var(--ease-std), opacity 300ms var(--ease-std);
}
/* 三横线 → ✕：上下各旋 ±45° 并向中间平移 5px，中间条 opacity:0 */
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav-menu { display: block; }
  .burger { display: none; }
  .site-nav__inner { gap: var(--sp-5); }
}

/* --- 全屏抽屉（<1024） --- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-000);
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-std), opacity 320ms var(--ease-std), visibility 320ms;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer[hidden] { display: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  flex: none;
  padding-inline: var(--safe-x);
  border-bottom: 1px solid var(--neutral-400);
}
.drawer__body { padding: var(--sp-4) var(--safe-x) var(--sp-8); }
.drawer__list { margin: 0; }
.drawer__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--neutral-400);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  color: var(--neutral-100);
  text-decoration: none;
}
.drawer__link:hover { color: var(--neutral-050); background-color: var(--neutral-600); }
/* 当前项左侧 4px 青蓝竖条 */
.drawer__link[aria-current="page"] {
  color: var(--primary-light);
  box-shadow: inset 4px 0 0 var(--primary);
}
.drawer__num {
  margin-right: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--neutral-200);
}
.drawer__foot {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
}
.drawer__note { margin-top: var(--sp-6); }

/* --- 底部 Tab Bar（≤640 常驻） --- */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--overlay-tabbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--neutral-400);
}
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-1);
  color: var(--neutral-200);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__item[aria-current="page"],
.tabbar__item.is-active { color: var(--primary-light); }
.tabbar__item:hover { color: var(--neutral-050); }

/* Tab Bar 仅 ≤640 显示；主内容 padding-bottom 72px 避开遮挡（§ 0 基线 8） */
@media (min-width: 641px) {
  .tabbar { display: none; }
}
@media (max-width: 640px) {
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ==========================================================================
   5.5 画廊：筛选条 + 网格
   ========================================================================== */
.filterbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  padding-block: var(--sp-3);
  margin-bottom: var(--sp-5);
  background-color: var(--neutral-000);
  border-bottom: 1px solid var(--neutral-400);
}
.filterbar__scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-inline: var(--safe-x);
  padding-bottom: var(--sp-1);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-400) transparent;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 639px) {
  .filterbar__scroll { scroll-snap-type: x mandatory; }
}
.filterbar__scroll::-webkit-scrollbar { height: 4px; }
.filterbar__scroll::-webkit-scrollbar-thumb { background: var(--neutral-400); border-radius: 2px; }

/* chip（§ 5.7） */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  min-height: 44px;                 /* 命中区达标（视觉靠 padding 控制） */
  padding: var(--sp-3) var(--sp-3);
  background-color: var(--neutral-600);
  color: var(--neutral-150);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 200ms var(--ease-std), border-color 200ms var(--ease-std), color 200ms var(--ease-std);
  scroll-snap-align: start;
}
.chip:hover { color: var(--neutral-050); border-color: var(--neutral-300); background-color: var(--neutral-550); }
.chip[aria-pressed="true"],
.chip.is-active {
  background-color: var(--primary-tint-14);
  color: var(--primary-light);
  border-color: var(--primary);
}
.chip__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--neutral-200);
}
.chip[aria-pressed="true"] .chip__count { color: var(--primary-light); }

/* 静态标签变体（§ 5.7） */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--neutral-600);
  color: var(--neutral-150);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.tag--blue   { background-color: var(--primary-tint-14); color: var(--primary-light); border-color: var(--primary); }
.tag--red    { background-color: var(--accent-tint-12); color: var(--accent-bright); border-color: var(--accent-deep); }
.tag--gold   { background-color: var(--gold-tint-12); color: var(--gold); border-color: var(--copper); }
.tag--violet { background-color: var(--violet-tint-14); color: var(--violet-light); border-color: var(--violet); }
.tag--s1 { background-color: var(--chip-s1-bg); color: var(--chip-s1-fg); border-color: transparent; }
.tag--s2 { background-color: var(--chip-s2-bg); color: var(--chip-s2-fg); border-color: transparent; }
.tag--s3 { background-color: var(--chip-s3-bg); color: var(--chip-s3-fg); border-color: transparent; }
.tag--s4 { background-color: var(--chip-s4-bg); color: var(--chip-s4-fg); border-color: transparent; }

/* 画廊网格 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);      /* 移动 2 列 */
  gap: 12px;
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }   /* 平板 3 列 */
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }                     /* 桌面 4 列 */
}
/* 混合模式的整齐度：用 1:1 方形裁切（§ 5.5） */
.gallery-grid--mixed .imgcard { aspect-ratio: 1 / 1; }

/* 空态（§ 5.10 空态规范复用） */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.empty__icon { width: 48px; height: 48px; color: var(--neutral-200); }
.empty__text { color: var(--neutral-150); font-size: var(--fs-body); margin: 0; }

/* ==========================================================================
   5.6 灯箱
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background-color: var(--overlay-lightbox);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-std), visibility 200ms;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox[hidden] { display: none; }

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: var(--sp-3) var(--sp-4);
}
.lightbox__counter {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--neutral-100);
}
.lightbox__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-inline: var(--sp-3);
}
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: 82vh;
}
.lightbox__img {
  max-width: min(92vw, 1600px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--lightbox-border);
  box-shadow: var(--lightbox-glow);
  border-radius: var(--r-sm);
  background-color: var(--neutral-700);
}
/* FLIP 放大：从缩略图位置放大到居中，360ms */
.lightbox.is-animating .lightbox__img { animation: lb-pop 360ms var(--ease-out) both; }
@keyframes lb-pop {
  from { transform: scale(0.86); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.lightbox__nav--prev { left: var(--sp-3); }
.lightbox__nav--next { right: var(--sp-3); }
.lightbox__nav .icon-btn { width: 48px; height: 48px; }
.lightbox__nav .icon-btn::before { width: 48px; height: 48px; }
.lightbox__nav .icon-btn svg { width: 22px; height: 22px; }

/* 底部信息条 64px（移动 56px） */
.lightbox__bottom {
  flex: none;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  background: linear-gradient(to top, var(--overlay-lightbox) 0%, rgba(4, 6, 12, 0) 100%);
  text-align: center;
}
.lightbox__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--neutral-050);
  margin: 0 0 var(--sp-1);
}
.lightbox__caption {
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--neutral-150);
  margin: 0;
  max-width: var(--measure);
  margin-inline: auto;
}

/* 移动端隐藏左右箭头，改用滑动手势 */
@media (min-width: 640px) {
  .lightbox__nav { display: block; }
  .lightbox__bottom { min-height: 64px; }
}
/* 平板起箭头距边 16px */
@media (min-width: 640px) and (max-width: 1023px) {
  .lightbox__nav--prev { left: var(--sp-4); }
  .lightbox__nav--next { right: var(--sp-4); }
}
/* 桌面距边 24px */
@media (min-width: 1024px) {
  .lightbox__nav--prev { left: var(--sp-5); }
  .lightbox__nav--next { right: var(--sp-5); }
}

/* ==========================================================================
   5.7 引用块（全站视觉重音）
   ========================================================================== */
.quote {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background-color: var(--neutral-700);
  border-left: 4px solid var(--accent);   /* 朱红竖条 —— 青子口吻 */
  border-radius: 0;
  max-width: calc(var(--measure) + var(--sp-6) + var(--sp-5));
}
.quote__text {
  font-family: var(--font-serif);
  font-size: 22px;                        /* 移动 22px，桌面升到 28px */
  line-height: 1.6;
  font-weight: var(--fw-medium);
  color: var(--neutral-050);
  margin: 0;
  max-width: var(--measure);
}
.quote__trans {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--neutral-100);
  max-width: var(--measure);
}
.quote__source {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--neutral-350);
  font-family: var(--font-serif);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--neutral-150);
  text-align: right;
  max-width: var(--measure);
}
/* 装饰引号：不在正文层内 */
.quote__decor {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-family: var(--font-serif);
  font-size: 96px;
  line-height: 1;
  color: var(--accent-tint-14);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.quote__inner { position: relative; z-index: 1; }

@media (min-width: 1024px) {
  .quote { padding: var(--sp-6) var(--sp-6) var(--sp-6) 40px; }
  .quote__text { font-size: 28px; }
}

/* 可跳转台词卡：悬停竖条变暖 + 辉光 */
a.quote {
  display: block;
  text-decoration: none;
  transition: box-shadow 200ms var(--ease-std), border-color 200ms var(--ease-std);
}
a.quote:hover { border-left-color: var(--accent-bright); box-shadow: 0 0 20px rgba(255, 106, 106, 0.3); }
a.quote:hover .quote__source { color: var(--primary-light); }

/* ==========================================================================
   5.8 时间线节点
   ========================================================================== */
.timeline { position: relative; }
.timeline__list {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding-left: 40px;                     /* 轴线靠左 16px + 节点余量 */
}
.timeline__list::before {                 /* 轴：1px */
  content: "";
  position: absolute;
  left: 16px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--neutral-400);
}
.timeline__item { position: relative; }
/* 节点实体：主节点 16px 圆 + 3px 挖空外圈 + 青蓝魔法辉光。
   轴线在 left:16px（线宽 1px，即 16–17px），节点中心也对齐到 16.5px：
   item 的 padding-left 为 40px → 节点相对 item 左移 40px 再右移 16px = -24px，
   减去自身半宽 8px，中心正好落在 16.5px 附近。 */
.timeline__node {
  position: absolute;
  left: -24px;                             /* 见上方注释：中心对齐 left:16px 的轴线 */
  top: 24px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-full);
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--neutral-000), 0 0 16px rgba(90, 169, 255, 0.55);
}
/* 次节点 */
.timeline__node--minor {
  width: 10px;
  height: 10px;
  left: -21px;
  top: 27px;
  background: var(--neutral-300);
  box-shadow: 0 0 0 3px var(--neutral-000);
}
/* 里程碑：菱形（形状差异，不只靠颜色 —— § 8.4-9） */
.timeline__node--milestone {
  width: 14px;
  height: 14px;
  left: -23px;
  top: 25px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--neutral-000), 0 0 16px rgba(255, 106, 106, 0.55);
  transform: rotate(45deg);
}
/* 连接线：节点到卡片 1px 水平短线 40px */
.timeline__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 31px;
  width: 24px;
  height: 1px;
  background: var(--neutral-350);
}

.timeline__card {
  background-color: var(--neutral-600);
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
  padding: var(--card-pad);
}
.timeline__year {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--primary-light);
  margin-bottom: var(--sp-1);
}
.timeline__title { margin-bottom: var(--sp-2); color: var(--neutral-050); }
.timeline__text { margin: 0; color: var(--neutral-100); font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
/* 未点亮状态（IntersectionObserver 逐个点亮） */
.timeline__node { opacity: 0; transition: opacity 300ms var(--ease-std), box-shadow 300ms var(--ease-std); }
.timeline__item.is-lit .timeline__node { opacity: 1; }

/* 桌面：轴居中，奇偶交替（左卡右对齐 / 右卡左对齐） */
@media (min-width: 1024px) {
  .timeline__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-7);            /* 卡片与轴线间距 40px */
    padding-left: 0;
  }
  .timeline__list::before { left: 50%; transform: translateX(-50%); }
  .timeline__item:nth-child(odd) { grid-column: 1; text-align: right; }
  .timeline__item:nth-child(even) { grid-column: 2; }
  .timeline__item:nth-child(odd) .timeline__text,
  .timeline__item:nth-child(odd) .timeline__title { margin-left: auto; }
  .timeline__item:nth-child(odd) .timeline__year { text-align: right; }
  /* 桌面：节点贴轴线两侧（轴线居中，卡片列间距 48px，节点落在缝里） */
  .timeline__node { left: -56px; }
  .timeline__node--minor { left: -53px; }
  .timeline__node--milestone { left: -55px; }
  .timeline__item::after { left: auto; right: 0; width: 40px; }
  .timeline__item:nth-child(even) .timeline__node { left: -56px; right: auto; }
  .timeline__item:nth-child(even) .timeline__node--minor { left: -53px; }
  .timeline__item:nth-child(even) .timeline__node--milestone { left: -55px; }
  .timeline__item:nth-child(even)::after { left: 0; right: auto; }
}

/* ==========================================================================
   5.9 表格（作品年表 / 数据对照）
   ========================================================================== */
.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--neutral-400);
  border-radius: var(--r-md);
}
/* 右侧渐隐遮罩提示可滑 */
@media (max-width: 1023px) {
  .table-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
}
.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-family: var(--font-serif);
}
.table caption {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  color: var(--neutral-200);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
}
.table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--neutral-650);
  border-bottom: 1px solid var(--neutral-350);
  color: var(--neutral-100);
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-align: left;
  white-space: nowrap;
}
.table td {
  padding: var(--sp-4);
  min-height: 52px;
  border-bottom: 1px solid var(--neutral-400);
  color: var(--neutral-100);
  font-size: var(--fs-body);
  line-height: 1.7;
  vertical-align: top;
}
.table tbody tr:nth-child(even) { background-color: var(--neutral-800); }   /* 斑马行 */
.table tbody tr:hover { background-color: var(--neutral-550); }
.table tr:last-child td { border-bottom: none; }
.table .num,
.table td.num {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  color: var(--neutral-050);
}
/* 移动端首列冻结 */
@media (max-width: 1023px) {
  .table td:first-child,
  .table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--neutral-700);
    box-shadow: 1px 0 0 var(--neutral-400);
  }
  .table tbody tr:nth-child(even) td:first-child { background-color: var(--neutral-800); }
  .table th:first-child { background-color: var(--neutral-650); z-index: 3; }
}

/* ==========================================================================
   5.10 定义列表（档案表，移动两栏 左标签/右数值，行高 44px）
   ========================================================================== */
.dl-rows { margin: 0; }
.dl-rows .dl-row {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  min-height: 44px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--neutral-400);
}
.dl-rows .dl-row:last-child { border-bottom: none; }
.dl-rows dt {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--neutral-200);
}
.dl-rows dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--neutral-100);
}
.dl-rows dd .t-num { color: var(--neutral-050); font-size: var(--fs-body); }

@media (min-width: 640px) {
  .dl-rows .dl-row { grid-template-columns: 9em 1fr; }
}

/* 纸上定义列表（C 基调） */
.on-paper .dl-rows .dl-row { border-bottom-color: var(--paper-line); }
.on-paper .dl-rows dt { color: var(--ink-2); }
.on-paper .dl-rows dd { color: var(--ink); }

/* ==========================================================================
   5.11 面包屑 / 页内目录
   ========================================================================== */
.toc {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: 1.6;
}
.toc__list { display: grid; gap: var(--sp-1); }
.toc__link {
  position: relative;
  display: flex;
  align-items: center;
  /* 命中区底线 44px（§ 8.1-3）—— 8+8 内距 + 行高不足 44，故显式补足 */
  min-height: 44px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  color: var(--neutral-200);
  text-decoration: none;
  border-left: 2px solid transparent;
  letter-spacing: 0.02em;
}
.toc__link:hover { color: var(--neutral-050); border-left-color: var(--neutral-300); }
.toc__link.is-current { color: var(--primary-light); border-left-color: var(--primary); }

/* ==========================================================================
   工具类：栅格辅助
   ========================================================================== */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: var(--sp-6); }
.stack-sm > * + * { margin-top: var(--sp-4); }
.inline-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }