/**
 * 全站通用样式（原 index.html 内联样式）
 * 主题变量、顶栏、分类、布局、新闻卡片、侧栏排行、页脚等
 *
 * 约定：公共组件内针对子元素的样式均写全父级选择器链（站点顶栏 id 前缀 afs-、挂载点 id 前缀 js-、侧栏 aside.sidebar 等），降低富文本内同名类名的样式污染风险
 *
 * 文本样式：若容器内用 p、span 等承载正文，则字号、文字颜色、对齐方式、行高等优先写在实际承载文字的子标签上，
 * 父级仅保留盒模型相关样式（内边距、边框、背景等），避免样式只挂在空壳父级、子标签未体现完整阅读语义
 */
:root {
  --radius: 6px;
  --radius-lg: 10px;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  /* 头尾全站最上层，高于正文卡片、侧栏 sticky、三方嵌入等 */
  --z-site-chrome: 99999;
}

/* 全站浅色主题（页面浅灰底 + 白卡片分层阴影） */
:root {
  --bg-page: #f0f2f5;
  --bg: #ffffff;
  --bg-sub: #f5f6f8;
  --bg-strip: #eceef2;
  --text: #1a1a1a;
  --text-sub: #5c5c5c;
  --text-muted: #8e8e8e;
  --border: #e2e5ea;
  --border-strong: #cdd2d9;
  --accent: #c41e1e;
  --accent-hover: #a01818;
  --link: #0b57d0;
  --link-visited: #653cad;
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-float: 0 2px 8px rgba(15, 23, 42, 0.07),
    0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06),
    0 4px 14px rgba(15, 23, 42, 0.05);
  --nav-active-bg: #ffffff;
  --badge-bg: #c41e1e;
  --rank-bg: #2d2d2d;
  --header-blur: 12px;
  --sticky-sidebar-top: 92px;
}

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

html {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg-page) !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font);
  background: var(--bg-page) !important;
  color: var(--text);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 主内容语义区域（利于搜索引擎优化与无障碍访问） */
.page-main {
  display: block;
}

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

#afs-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-site-chrome);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.15) blur(var(--header-blur));
  -webkit-backdrop-filter: saturate(1.15) blur(var(--header-blur));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

#afs-site-header #afs-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px clamp(12px, 3vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#afs-site-header #afs-header-inner #afs-brand.afs-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  line-height: 0;
}

#afs-site-header #afs-header-inner #afs-brand .afs-brand-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: min(100vw - 120px, 320px);
  object-fit: contain;
  object-position: left center;
}

#afs-site-header #afs-header-inner #afs-brand .afs-brand-accent {
  color: var(--accent);
}

#afs-site-header #afs-header-inner #afs-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
}

#afs-site-header #afs-header-inner #afs-header-tools img,
#afs-site-header #afs-header-inner #afs-header-tools svg {
  display: block;
  max-height: 40px;
  width: auto;
}

#afs-site-header #afs-header-inner #afs-header-tools a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-sub);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius);
}

#afs-site-header #afs-header-inner #afs-header-tools a:hover {
  background: var(--bg-sub);
  color: var(--text);
}

#afs-site-header #afs-header-inner #afs-header-tools a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#afs-site-header #afs-category-bar {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-sub) 92%, var(--bg));
}

#afs-site-header #afs-category-bar #js-category-scroll {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px clamp(10px, 2vw, 18px);
}

#afs-site-header #afs-category-bar #js-category-scroll::-webkit-scrollbar {
  display: none;
}

#afs-site-header #afs-category-bar #js-category-scroll a {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  border-radius: 999px;
  border-bottom: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#afs-site-header #afs-category-bar #js-category-scroll a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
}

#afs-site-header #afs-category-bar #js-category-scroll a.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

#afs-site-header #afs-category-bar #js-category-scroll a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.layout {
  max-width: 1220px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 32px) clamp(12px, 3vw, 22px) 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 36px);
  column-gap: clamp(20px, 3vw, 36px);
}

@media (min-width: 960px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.layout .main-col {
  min-width: 0;
}

/* 主栏：最新 / 话题 与上一区块间距（配色见 .home-section--*） */
.layout .main-col > section.home-section--latest,
.layout .main-col > section.home-section--topics {
  margin-top: clamp(16px, 2.5vw, 24px);
  padding-top: clamp(18px, 3vw, 28px);
}

.layout .main-col section .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

.layout .main-col section .section-title::before {
  content: "";
  width: 3px;
  height: 1.15em;
  background: linear-gradient(
    180deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 55%, var(--text-muted))
  );
  border-radius: 3px;
}

.layout .main-col section.pickup {
  margin-bottom: clamp(8px, 2vw, 16px);
}

/* ---------- 首页各板块分区配色（仅 home.html：.home-section--*） ---------- */
.layout .main-col section.home-section {
  padding-left: clamp(12px, 2.5vw, 18px);
  padding-right: clamp(12px, 2.5vw, 18px);
  padding-bottom: clamp(10px, 2vw, 16px);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.layout .main-col section.home-section--pickup {
  padding-top: clamp(12px, 2vw, 16px);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-sub));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

.layout .main-col section.home-section--pickup .section-title::before {
  background: linear-gradient(
    180deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 42%, var(--link))
  );
}

.layout .main-col section.home-section--latest {
  background: color-mix(in srgb, var(--link) 9%, var(--bg-sub));
  border: 1px solid color-mix(in srgb, var(--link) 24%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--link) 10%, transparent);
}

.layout .main-col section.home-section--latest .section-title::before {
  background: linear-gradient(
    180deg,
    var(--link),
    color-mix(in srgb, var(--link) 48%, var(--text-muted))
  );
}

.layout .main-col section.home-section--topics {
  background: color-mix(in srgb, var(--link-visited) 10%, var(--bg-sub));
  border: 1px solid color-mix(in srgb, var(--link-visited) 26%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--link-visited) 12%, transparent);
}

.layout .main-col section.home-section--topics .section-title::before {
  background: linear-gradient(
    180deg,
    var(--link-visited),
    color-mix(in srgb, var(--link-visited) 40%, var(--accent))
  );
}

.layout aside.sidebar .rank-box.home-section--rank {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  box-shadow: var(--shadow-card),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.layout aside.sidebar .rank-box.home-section--rank .rank-title {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-sub)),
    color-mix(in srgb, var(--accent) 6%, var(--card))
  );
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

#js-pickup-mount .pickup-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-float);
  transition: box-shadow 0.28s ease, border-color 0.28s ease,
    transform 0.28s ease;
}

#js-pickup-mount .pickup-card:hover {
  border-color: color-mix(in srgb, var(--border-strong) 80%, var(--link));
  box-shadow: var(--shadow-card), 0 12px 40px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

#js-pickup-mount .pickup-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#js-pickup-mount .pickup-card .pickup-media {
  position: relative;
  aspect-ratio: 2 / 1;
  min-height: 200px;
  background: var(--bg-strip);
}

#js-pickup-mount .pickup-card .pickup-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 40%,
    color-mix(in srgb, var(--text) 35%, transparent) 100%
  );
  opacity: 0.85;
}

@media (max-width: 600px) {
  #js-pickup-mount .pickup-card .pickup-media {
    aspect-ratio: 16 / 10;
    min-height: 180px;
  }
}

#js-pickup-mount .pickup-card .pickup-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#js-pickup-mount .pickup-card .pickup-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--badge-bg);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#js-pickup-mount .pickup-card .pickup-body {
  padding: clamp(16px, 3vw, 22px);
}

#js-pickup-mount .pickup-card .pickup-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

#js-pickup-mount .pickup-card .pickup-meta .source {
  color: var(--text-sub);
  font-weight: 500;
}

#js-pickup-mount .pickup-card .pickup-title {
  font-size: clamp(1.28rem, 3.6vw, 1.72rem);
  font-weight: 700;
  line-height: 1.38;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

#js-pickup-mount .pickup-card .pickup-lead {
  font-size: 0.9375rem;
  color: var(--text-sub);
  margin: 0;
  line-height: 1.65;
}

/* 宽屏：头条左图右文（门户资讯站常见 AFS 落地结构） */
@media (min-width: 880px) {
  #js-pickup-mount .pickup-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 280px;
  }

  #js-pickup-mount .pickup-card .pickup-media {
    flex: 0 0 47%;
    width: 47%;
    max-width: 47%;
    min-width: 0;
    min-height: 260px;
    aspect-ratio: auto;
    align-self: stretch;
  }

  #js-pickup-mount .pickup-card .pickup-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  #js-pickup-mount .pickup-card .pickup-media::after {
    background: linear-gradient(
      90deg,
      transparent 38%,
      color-mix(in srgb, var(--card) 35%, transparent) 72%,
      color-mix(in srgb, var(--card) 88%, var(--text)) 100%
    );
    opacity: 0.95;
  }

  #js-pickup-mount .pickup-card .pickup-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 2.8vw, 36px);
    min-width: 0;
  }
}

ul#js-news-list.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 720px) {
  ul#js-news-list.news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

ul#js-news-list.news-list > li {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

ul#js-news-list.news-list > li:hover {
  border-color: color-mix(in srgb, var(--border-strong) 75%, var(--link));
  box-shadow: var(--shadow-card), 0 8px 28px rgba(15, 23, 42, 0.08);
}

ul#js-news-list.news-list > li a.news-row {
  display: flex;
  gap: 14px;
  padding: 16px clamp(14px, 2vw, 18px);
  min-height: 104px;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  transition: background 0.18s ease;
}

ul#js-news-list.news-list > li a.news-row:hover {
  background: color-mix(in srgb, var(--bg-sub) 55%, var(--card));
}

ul#js-news-list.news-list > li a.news-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

ul#js-news-list.news-list > li a.news-row .thumb {
  flex: 0 0 112px;
  width: 112px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-strip);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}

@media (max-width: 480px) {
  ul#js-news-list.news-list > li a.news-row .thumb {
    flex-basis: 96px;
    width: 96px;
  }
}

ul#js-news-list.news-list > li a.news-row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

ul#js-news-list.news-list > li a.news-row .text {
  flex: 1;
  min-width: 0;
}

ul#js-news-list.news-list > li a.news-row .row-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

ul#js-news-list.news-list > li a.news-row .row-meta .cat {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}

ul#js-news-list.news-list > li a.news-row h3 {
  font-size: 0.96875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.015em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

ul#js-news-list.news-list > li a.news-row:hover h3 {
  color: var(--link);
}

#js-topic-grid.subgrid,
#js-type-grid.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

@media (min-width: 960px) {
  #js-topic-grid.subgrid,
  #js-type-grid.subgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

#js-topic-grid.subgrid > a.tile,
#js-type-grid.subgrid > a.tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.22s ease, box-shadow 0.22s ease,
    transform 0.22s ease;
}

#js-topic-grid.subgrid > a.tile:hover,
#js-type-grid.subgrid > a.tile:hover {
  border-color: color-mix(in srgb, var(--border-strong) 75%, var(--link));
  box-shadow: var(--shadow-card), 0 10px 32px rgba(15, 23, 42, 0.09);
  transform: translateY(-3px);
}

#js-topic-grid.subgrid > a.tile:focus-visible,
#js-type-grid.subgrid > a.tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#js-topic-grid.subgrid > a.tile .t-img,
#js-type-grid.subgrid > a.tile .t-img {
  aspect-ratio: 16 / 10;
  background: var(--bg-strip);
  overflow: hidden;
}

#js-topic-grid.subgrid > a.tile .t-img img,
#js-type-grid.subgrid > a.tile .t-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

#js-topic-grid.subgrid > a.tile:hover .t-img img,
#js-type-grid.subgrid > a.tile:hover .t-img img {
  transform: scale(1.03);
}

#js-topic-grid.subgrid > a.tile .t-body,
#js-type-grid.subgrid > a.tile .t-body {
  padding: 12px 14px 14px;
}

#js-topic-grid.subgrid > a.tile .t-meta,
#js-type-grid.subgrid > a.tile .t-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

#js-topic-grid.subgrid > a.tile h4,
#js-type-grid.subgrid > a.tile h4 {
  font-size: 0.90625rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.012em;
  margin: 0;
  transition: color 0.18s ease;
}

#js-topic-grid.subgrid > a.tile:hover h4,
#js-type-grid.subgrid > a.tile:hover h4 {
  color: var(--link);
}

/* ---------- 首页分区内元素背景与分区色相一致（覆盖默认 var(--card)） ---------- */
.layout .main-col section.home-section--pickup #js-pickup-mount .pickup-card {
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.layout .main-col section.home-section--pickup #js-pickup-mount .pickup-card .pickup-media {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-strip));
}

.layout .main-col section.home-section--pickup #js-pickup-mount .home-feed-state {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.layout .main-col section.home-section--latest ul#js-news-list.news-list > li {
  background: color-mix(in srgb, var(--link) 8%, var(--card));
  border-color: color-mix(in srgb, var(--link) 22%, var(--border));
}

.layout .main-col section.home-section--latest ul#js-news-list.news-list > li a.news-row:hover {
  background: color-mix(in srgb, var(--link) 14%, var(--bg-sub));
}

.layout .main-col section.home-section--latest ul#js-news-list.news-list > li a.news-row .thumb {
  background: color-mix(in srgb, var(--link) 14%, var(--bg-strip));
}

.layout
  .main-col
  section.home-section--latest
  ul#js-news-list.news-list
  > li.home-feed-state-row
  .home-feed-state {
  background: color-mix(in srgb, var(--link) 10%, var(--card));
  border-color: color-mix(in srgb, var(--link) 26%, var(--border));
}

.layout .main-col section.home-section--topics #js-topic-grid.subgrid > a.tile {
  background: color-mix(in srgb, var(--link-visited) 8%, var(--card));
  border-color: color-mix(in srgb, var(--link-visited) 24%, var(--border));
}

.layout .main-col section.home-section--topics #js-topic-grid.subgrid > a.tile .t-img {
  background: color-mix(in srgb, var(--link-visited) 14%, var(--bg-strip));
}

.layout .main-col section.home-section--topics #js-topic-grid .home-feed-state {
  background: color-mix(in srgb, var(--link-visited) 10%, var(--card));
  border-color: color-mix(in srgb, var(--link-visited) 28%, var(--border));
}

.layout
  aside.sidebar
  .rank-box.home-section--rank
  ol#js-rank-list.rank-list
  > li
  > a {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border-radius: var(--radius);
}

.layout
  aside.sidebar
  .rank-box.home-section--rank
  ol#js-rank-list.rank-list
  > li
  > a:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-sub));
}

.layout
  aside.sidebar
  .rank-box.home-section--rank
  ol#js-rank-list.rank-list
  > li.home-feed-state-row
  .home-feed-state {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

/* ---------- 首页 blogApiList 失败/空列表占位（home.js 写入 .home-feed-state） ---------- */
#js-pickup-mount .home-feed-state,
#js-topic-grid .home-feed-state,
#js-type-grid .home-feed-state {
  margin: 0;
  padding: clamp(20px, 5vw, 36px) clamp(14px, 3vw, 22px);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-sub);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

#js-pickup-mount .home-feed-state.is-error,
#js-topic-grid .home-feed-state.is-error,
#js-type-grid .home-feed-state.is-error {
  color: var(--accent);
}

ul#js-news-list.news-list > li.home-feed-state-row,
.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li.home-feed-state-row {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul#js-news-list.news-list > li.home-feed-state-row {
  border: none;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 720px) {
  ul#js-news-list.news-list > li.home-feed-state-row {
    grid-column: 1 / -1;
  }
}

ul#js-news-list.news-list > li.home-feed-state-row:hover {
  border: none;
  box-shadow: none;
}

ul#js-news-list.news-list > li.home-feed-state-row .home-feed-state,
.layout
  aside.sidebar
  .rank-box
  ol#js-rank-list.rank-list
  > li.home-feed-state-row
  .home-feed-state {
  margin: 0;
  padding: clamp(20px, 5vw, 36px) clamp(14px, 3vw, 22px);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-sub);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

ul#js-news-list.news-list > li.home-feed-state-row .home-feed-state.is-error,
.layout
  aside.sidebar
  .rank-box
  ol#js-rank-list.rank-list
  > li.home-feed-state-row
  .home-feed-state.is-error {
  color: var(--accent);
}

.layout aside.sidebar {
  min-width: 0;
}

@media (min-width: 960px) {
  .layout aside.sidebar {
    position: sticky;
    top: var(--sticky-sidebar-top);
    align-self: start;
    max-height: calc(100vh - var(--sticky-sidebar-top) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 4px;
  }

  .layout aside.sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .layout aside.sidebar::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
  }
}

.layout aside.sidebar .rank-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.layout aside.sidebar .rank-box .rank-title {
  margin: 0;
  padding: 14px 16px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(
    180deg,
    var(--bg-sub),
    color-mix(in srgb, var(--bg-sub) 88%, var(--card))
  );
  border-bottom: 1px solid var(--border);
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li > a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li > a:hover {
  background: color-mix(in srgb, var(--bg-sub) 70%, var(--card));
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li > a:hover .rank-text {
  color: var(--link);
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li > a .rank-num {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 2px;
  background: var(--rank-bg);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li:nth-child(1) > a .rank-num,
.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li:nth-child(2) > a .rank-num,
.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li:nth-child(3) > a .rank-num {
  background: var(--accent);
  color: #fff;
}

.layout aside.sidebar .rank-box ol#js-rank-list.rank-list > li > a .rank-text {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

.layout aside.sidebar .side-note {
  margin-top: 18px;
  padding: 14px 16px;
  font-size: 0.75rem;
  color: var(--text-sub);
  background: color-mix(in srgb, var(--bg-sub) 92%, var(--card));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  line-height: 1.6;
  box-shadow: var(--shadow);
}

#afs-site-footer {
  position: relative;
  z-index: var(--z-site-chrome);
  padding: 24px 16px 40px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-sub) 94%, var(--bg-page));
}

#afs-site-footer p {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-muted);
}

#afs-site-footer p.afs-footer-legal {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
}

#afs-site-footer p.afs-footer-legal a {
  color: var(--link);
  text-decoration: none;
  font-size: 0.75rem;
}

#afs-site-footer p.afs-footer-legal a:hover {
  color: var(--accent);
  text-decoration: underline;
}

#afs-site-footer p.afs-footer-legal .afs-footer-legal-sep {
  color: var(--text-muted);
  user-select: none;
}

#afs-site-footer p.afs-locale-bar {
  margin-top: 10px;
}

h1.type-page-title {
  font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  font-weight: 700;
  margin: 0 0 clamp(14px, 2.8vw, 22px);
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.35;
}

#afs-site-footer .afs-locale-btn {
  margin: 0;
  padding: 2px 8px;
  font: inherit;
  font-size: 0.75rem;
  color: var(--link);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

#afs-site-footer .afs-locale-btn:hover {
  color: var(--accent);
}

#afs-site-footer .afs-locale-btn.is-active {
  color: var(--text-muted);
  text-decoration: none;
  cursor: default;
  font-weight: 600;
}

#afs-site-footer .afs-locale-sep {
  color: var(--text-muted);
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  #js-pickup-mount .pickup-card,
  #js-topic-grid.subgrid > a.tile,
  #js-type-grid.subgrid > a.tile {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  #js-pickup-mount .pickup-card:hover,
  #js-topic-grid.subgrid > a.tile:hover,
  #js-type-grid.subgrid > a.tile:hover {
    transform: none;
  }

  #afs-site-header #afs-category-bar #js-category-scroll a {
    transition: none;
  }
}

/* ---------- Google AdSense 占位 ---------- */
.afs-ad-slot {
  margin: clamp(12px, 2.5vw, 20px) 0;
  min-height: 90px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  background: #fff4e6;
  border: 2px solid #e2b46a;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.afs-ad-label {
  margin: 0;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #8b5a1a;
}

.afs-ad-slot .adsbygoogle {
  margin: 0 auto;
  display: block;
}

.afs-ad-in-article {
  margin: clamp(16px, 3vw, 28px) 0;
}