/* ============================================================
   社恐浓度检测 · 手账本设计系统（编辑风极简 + 铅笔质感）
   纸张暖米色底 + 方格纸纹 / 马克笔粗线框 / 无阴影无渐变 /
   bento 网格 / 便签贴纸 + 胶带 / 铅笔画描画动效（SVG stroke）
   动效只用 transform/opacity/stroke-dashoffset
   ============================================================ */

:root {
  /* 纸张与墨色 */
  --paper: #f6f1e3;
  --paper-light: #fbf7ec;
  --paper-deep: #ece3cd;
  --ink: #33302a;
  --ink-soft: #7a7263;
  --line: rgba(60, 54, 44, 0.14);

  /* 手账强调色（少量点缀） */
  --red: #d9483c;
  --blue: #3b6fb5;
  --yellow: #e3b23c;
  --yellow-light: #f4e3ae;
  --green: #5a8f5c;

  /* 字号阶梯 */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 40px;

  /* 圆角（手账偏圆润） */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --font-hand: "Comic Sans MS", "KaiTi", "楷体", "STKaiti", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-head: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
}

/* ===== 基础重置 + 纸张 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-head);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }

/* ===== 通用组件 ===== */

/* 粗线框面板（马克笔描边，无阴影） */
.panel {
  background: var(--paper-light);
  border: 3px solid var(--ink);
  border-radius: var(--r-md);
}
/* 双线描边（手账贴纸感：外层粗线 + 内层细线） */
.panel--doodle {
  border: 3px solid var(--ink);
  outline: 2px solid var(--paper-light);
  outline-offset: -7px;
  background: var(--paper-light);
  border-radius: var(--r-md);
}

/* 便签贴纸（旋转 + 胶带） */
.note {
  position: relative;
  background: var(--yellow-light);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 10px 16px;
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 rgba(60, 54, 44, 0.12);
}
.note::before { /* 顶部胶带 */
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 76px; height: 22px;
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, 0.65) 0 5px,
    rgba(233, 224, 202, 0.6) 5px 10px);
  border: 1px solid rgba(60, 54, 44, 0.18);
  border-radius: 2px;
}

/* 手账顶部小标签（eyebrow） */
.eyebrow {
  display: inline-block;
  background: var(--ink);
  color: var(--paper-light);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 2px 12px;
  border-radius: 3px;
  transform: rotate(-1deg);
}

/* 按钮（马克笔涂色感：墨底纸字，hover 微摆） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper-light);
  font-family: var(--font-head);
  font-size: var(--fs-18);
  font-weight: 800;
  padding: 12px 30px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover { transform: translateY(-3px) rotate(-1deg); }
.btn:active { transform: translateY(0) rotate(0); }
.btn--red { background: var(--red); border-color: var(--red); color: var(--paper-light); }
.btn--outline { background: var(--paper-light); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper-light); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* 便签 chips */
.chip {
  display: inline-block;
  border: 2px solid var(--ink);
  background: var(--paper-light);
  border-radius: 999px;
  padding: 3px 14px;
  font-size: var(--fs-14);
  font-weight: 700;
  transform: rotate(-1deg);
}
.chip:nth-child(odd) { transform: rotate(1.2deg); }

/* ===== SVG 铅笔画描画：由 Anime.js 编排（index.html 底部脚本） =====
   默认可见（不设 dash 偏移），无 JS 时保留完整线条 */
.pencil { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pencil--soft { stroke-width: 2.5; stroke: var(--ink-soft); }
.pencil--red { stroke: var(--red); }
.pencil--blue { stroke: var(--blue); }
@keyframes pencil-draw { to { stroke-dashoffset: 0; } }

/* ===== 入场动效：由 Anime.js 编排（见各页面底部脚本） =====
   默认可见：无 JS / 降级时内容不隐藏（渐进增强） */
.reveal { }

/* ===== 手绘抖动辅助线（绕圈标注用） ===== */
.scribble {
  position: absolute;
  pointer-events: none;
}

/* 移动端底部固定栏 */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--paper-light);
  border-top: 3px solid var(--ink);
  box-shadow: 0 -6px 0 rgba(60, 54, 44, 0.08);
}
.mobile-bar .btn { flex: 1; font-size: var(--fs-16); padding: 10px 12px; }
.mobile-bar .btn--outline { flex: 0 0 72px; }

/* ===== 响应式 ===== */
@media (max-width: 640px) {
  :root {
    --fs-56: 2.6rem;
    --fs-40: 2.1rem;
    --fs-32: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pencil { animation: none; stroke-dashoffset: 0; }
  .reveal { animation: none; opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}