/* ============================================================
 * 鬼灭の刃全息图鉴库 · main.css
 * 设计 token（逐字对齐施工说明书 §3.1）+ 布局 + 响应式三档
 * 配色比例纪律：主中性 70% + 柔和次色 20% + 单一深强调 10%
 * ============================================================ */

:root {
  /* 底色与区块 —— 暗色主题：深炭蓝夜幕，四层递进（bg → bg-alt → surface → surface-alt） */
  --bg:           #12161F;   /* 紺鉄 · 页面底 */
  --bg-alt:       #171C27;   /* 藍鉄 · 区块交替底 */
  --surface:      #1E2431;   /* 鉄紺 · 卡片/面板 */
  --surface-alt:  #28303F;   /* 濃藍 · 悬停/次级面 */

  /* 文字 —— 浅色墨，浅底字（对比度实测值见右侧注释，AA 正文线 4.5:1） */
  --ink:          #E9EEF6;   /* 正文（对 --bg 15.5:1） */
  --ink-soft:     #B7C2D2;   /* 次级正文（对 --bg 10.1:1） */
  --ink-faint:    #8B99AE;   /* 弱化文字/描边（对 --surface-alt 4.7:1） */

  /* 品牌与强调 —— 提亮以在暗底上保持可读 */
  --brand:        #4FB0E0;   /* 縹 主色 */
  --accent:       #FF7A33;   /* 朱强调 */
  --accent-2:     #FFC53D;   /* 山吹 */
  --accent-3:     #FF8F5E;   /* 柿 */

  /* 深色阶 —— --deep/-2 作背景，--deep-text 作暗底上的文字/描边 */
  --deep:         #16283D;   /* 深藍 · 横幅/标签底 */
  --deep-2:       #24507A;   /* 中藍 */
  --deep-text:    #7FB4E8;   /* 深藍系文字色（暗底可读） */
  --shadow:       #05070C;   /* 影 */

  /* 角色专属 —— 暗底提亮版 */
  --fuji:         #A79BE8;   /* 藤 · 蝴蝶忍 */
  --sakura:       #FFB4A2;   /* 桜 · 名场面 */
  --sakura-mouse: #D98BA0;   /* 桜鼠 */
  --water:        #6FCFC4;   /* 水色 */
  --light-indigo: #5FD3E0;   /* 浅葱 */

  /* 布局 */
  --km-radius: 10px;
  --km-gap: 16px;
  --km-maxw: 1200px;
  --km-main-pad: 16px;   /* 主区上/内边距：hero 用负值抵消，保证首屏大图置顶无白边 */
  --km-font: "Hiragino Sans GB", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; /* 系统字体栈，禁 Web Font */
}

/* ---------- 基础重置（移动优先） ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--km-font);
  background-color: var(--bg);
  /* 夜空噪点基底：内联 SVG feTurbulence（data URI，不算外链；命名空间已百分号编码）
     暗色主题下用白色低透明噪点，避免黑噪点在深底上吃掉对比度 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http:%2F%2Fwww.w3.org%2F2000%2Fsvg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C%2Ffilter%3E%3Crect width='140' height='140' fill='%23ffffff' filter='url(%23n)' opacity='0.035'/%3E%3C%2Fsvg%3E");
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

a {
  color: var(--brand);
}

h1, h2, h3, h4 {
  line-height: 1.3;
  margin: 0;
}

p {
  margin: 0;
}

/* ---------- 模式横幅 ---------- */

.km-banner {
  background: var(--deep);
  color: var(--ink);
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.04em;
}

.km-banner[hidden] {
  display: none;
}

/* ---------- 导航壳 ---------- */

.km-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
}

.km-nav__toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--km-radius);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.km-nav__item {
  display: flex;
}

.km-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.km-nav__link:hover {
  color: var(--brand);
}

.km-nav__link.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 700;
}

/* ---------- 主区与页脚 ---------- */

.km-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--km-maxw);
  margin: 0 auto;
  padding: var(--km-main-pad);
}

.km-footer {
  border-top: 1px solid var(--ink-faint);
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---------- 卡片墙（自然自适应列宽） ---------- */

.km-card-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--km-gap);
}

/* 瀑布流（仅首页「首屏精选」启用）：多列均分、卡片按列流式排布、不切断、高度错落 */
.km-card-wall--masonry {
  display: block;
  column-gap: var(--km-gap);
  column-count: 1;
}

.km-card-wall--masonry .km-card {
  margin: 0 0 var(--km-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (min-width: 560px)  { .km-card-wall--masonry { column-count: 2; } }
@media (min-width: 880px)  { .km-card-wall--masonry { column-count: 3; } }
@media (min-width: 1240px) { .km-card-wall--masonry { column-count: 4; } }

/* ---------- 区块标题 ---------- */

.km-section-title {
  font-size: 18px;
  margin: 24px 0 12px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
  color: var(--ink);
}

.km-section-title:first-child {
  margin-top: 0;
}

/* ---------- 无障碍 ---------- */

.km-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;
}

/* ---------- 响应式：平板（两档 media query 之一） ---------- */

@media (min-width: 768px) {
  body {
    font-size: 15px;
  }

  .km-nav {
    flex-wrap: nowrap;
  }

  .km-nav__toggle {
    display: none;
  }

  .km-nav__link {
    width: auto;
    border-bottom: 2px solid transparent;
  }

  .km-main {
    --km-main-pad: 24px;
    padding: var(--km-main-pad);
  }
}

/* ---------- 响应式：PC ---------- */

@media (min-width: 1200px) {
  .km-main {
    --km-main-pad: 32px;
    padding: var(--km-main-pad);
  }
}

/* ---------- 降低动效偏好 ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}