/* roulang page: index */
:root {
  --bg: #F3EFE8;
  --bg-ink: #1E1A22;
  --card: #FFFCF8;
  --primary: #1F6F62;
  --secondary: #6E4A73;
  --accent: #E07A3D;
  --text: #241F24;
  --muted: #5C5560;
  --line: #E4DDD4;
  --shadow: 0 8px 24px rgba(36,31,36,.08);
  --shadow-hover: 0 12px 28px rgba(36,31,36,.14);
  --radius: 14px;
  --radius-btn: 10px;
  --ink-soft: rgba(243,239,232,.78);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  font-size: 16px;
  line-height: 1.75;
  padding-bottom: 84px;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: #184f47; }
p { margin: 0 0 12px; }
h1, h2, h3, h4 {
  font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 12px;
}
h1 { font-size: 40px; letter-spacing: 0; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
.site-header { position: sticky; top: 0; z-index: 60; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.info-strip { background: var(--bg-ink); color: #F3EFE8; height: 36px; overflow: hidden; }
.info-line { height: 36px; align-items: center; }
.info-line .cell { font-size: 12px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #F3EFE8; }
.info-go { text-align: right; }
.info-go a {
  display: inline-block;
  color: #F3EFE8;
  border: 1px solid rgba(243,239,232,.4);
  border-radius: 999px;
  line-height: 22px;
  padding: 0 10px;
  vertical-align: middle;
}
.info-go a:hover { color: #fff; background: rgba(243,239,232,.12); transform: translateY(-1px); }
.brand-bar.title-bar { background: var(--card); color: var(--text); padding: 8px 16px; }
.brand-bar .menu-icon::after { background: var(--text); box-shadow: 0 7px 0 var(--text), 0 14px 0 var(--text); }
.brand-bar .title-bar-title { color: var(--text); font-weight: 700; font-size: 16px; }
.top-bar { background: var(--card); padding: 0; }
.top-bar, .top-bar ul { background: var(--card); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; width: 100%; }
.logo { color: var(--text); font-weight: 700; font-size: 18px; line-height: 1.35; max-width: 420px; }
.logo:hover { color: var(--primary); }
.nav-list { margin: 0; }
.nav-list a { color: var(--text); font-size: 15px; padding: 10px 12px; border-radius: 8px; }
.menu a:hover { background: transparent; color: var(--primary); }
.nav-list .is-current > a { color: var(--secondary); box-shadow: inset 0 -2px 0 var(--secondary); }
.block { padding: 72px 0; scroll-margin-top: 112px; }
.block-warm { background: var(--bg); }
.block-white { background: #FFFCF8; }
.block-ink { background: var(--bg-ink); color: #F3EFE8; }
.block-ink h2, .block-ink h3, .block-ink h4 { color: #F3EFE8; }
.block-lead { color: var(--muted); font-size: 16px; max-width: 820px; margin-bottom: 28px; }
.block-ink .block-lead { color: var(--ink-soft); }
.kicker {
  display: inline-flex;
  align-items: center;
  color: var(--secondary);
  background: rgba(110,74,115,.1);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.block-ink .kicker { color: #F3EFE8; background: rgba(224,122,61,.18); }
.answer-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin: 16px 0 18px;
}
.answer-box b { display: block; font-size: 14px; color: var(--primary); margin-bottom: 4px; }
.answer-box p { margin: 0; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn:active { transform: translateY(0); filter: brightness(.92); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-accent { background: var(--accent); color: var(--bg-ink); }
.btn-accent:hover { color: var(--bg-ink); }
.btn-ghost { background: transparent; color: #F3EFE8; border-color: rgba(243,239,232,.4); }
.btn-ghost:hover { color: #fff; }
.metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.metrics li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: var(--shadow);
  font-size: 14px;
}
.metrics b { color: var(--secondary); margin-right: 6px; }
.monitor {
  background: var(--bg-ink);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-hover);
}
.monitor-top { display: flex; gap: 6px; margin-bottom: 12px; }
.monitor-top i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.monitor-top i:nth-child(1) { background: var(--accent); }
.monitor-top i:nth-child(2) { background: var(--secondary); }
.monitor-top i:nth-child(3) { background: var(--primary); }
.stage {
  background: var(--card);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.ring-wrap { position: relative; width: 128px; height: 128px; flex: 0 0 128px; }
.ring { width: 128px; height: 128px; }
.ring-track, .ring-value { fill: none; stroke-width: 8; }
.ring-track { stroke: var(--line); }
.ring-value {
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 40;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ring-label strong { font-size: 22px; color: var(--text); line-height: 1; }
.ring-label span { font-size: 12px; color: var(--muted); }
.tiers { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tier {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}
.tier b { display: block; font-size: 14px; color: var(--text); }
.tier span { font-size: 13px; color: var(--muted); }
.point { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px; height: 100%; }
.point:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); transition: .18s ease; }
.mark {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  background: #fff;
}
.point h3 { padding-right: 48px; font-size: 22px; }
.point p { color: var(--muted); margin: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.stack .point { flex: 1; }
.scene {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  background: rgba(255,252,248,.06);
  border: 1px solid rgba(243,239,232,.16);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.scene-no { font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1; }
.scene h3 { font-size: 22px; margin-bottom: 4px; }
.scene p { margin: 0; color: var(--ink-soft); }
.mini-steps { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mini-steps span {
  border-radius: 999px;
  border: 1px solid rgba(243,239,232,.3);
  color: #F3EFE8;
  font-size: 12px;
  padding: 2px 8px;
}
.proof-row, .rank-row, .news-item, .entry, .spec-card, .topic-card, .step, .subnote, .node {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.proof-row, .rank-row {
  display: grid;
  grid-template-columns: 92px 1fr 148px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.proof-row:hover, .rank-row:hover, .news-item:hover, .topic-card:hover, .spec-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  transition: .18s ease;
}
.rank-no, .proof-no {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.rank-row.top .rank-no { color: var(--accent); }
.rank-main h3, .proof-row h3 { font-size: 18px; margin-bottom: 4px; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }
.stars { color: var(--accent); letter-spacing: 1px; }
.meter { height: 6px; background: #E4DDD4; border-radius: 999px; margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}
.pill-hd { color: var(--secondary); background: rgba(110,74,115,.08); border-color: transparent; }
.heat { color: var(--accent); font-weight: 700; font-size: 18px; }
.disclaimer { font-size: 14px; color: var(--muted); margin-top: 8px; }
.cmp { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.cmp-row { display: grid; grid-template-columns: 132px 1.2fr 1fr 1fr; }
.cmp-row > div { padding: 14px 12px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); font-size: 14px; }
.cmp-row > div:first-child { border-left: 0; font-weight: 700; }
.cmp-head > div { border-top: 0; background: #F7F3ED; color: var(--secondary); font-weight: 700; font-size: 14px; }
.cmp-row div[data-h]::before { content: attr(data-h); display: none; font-size: 12px; color: var(--secondary); font-weight: 700; }
.news-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center; padding: 16px; margin-bottom: 12px; color: inherit; }
.news-item h3 { font-size: 18px; margin-bottom: 4px; }
.idx { font-size: 22px; font-weight: 700; color: var(--primary); }
.tag { justify-self: end; }
.qa details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.qa summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 700; font-size: 18px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "＋"; float: right; color: var(--primary); font-weight: 700; }
.qa details[open] summary::after { content: "－"; }
.qa details p { padding: 0 18px 16px; color: var(--muted); margin: 0; }
.qa details[open] { box-shadow: var(--shadow-hover); }
.node { padding: 18px; height: 100%; }
.node-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--bg-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-bottom: 10px;
}
.block-ink .node { background: rgba(255,252,248,.06); border-color: rgba(243,239,232,.16); box-shadow: none; }
.block-ink .node p { color: var(--ink-soft); }
.spec-card, .topic-card, .step, .subnote { padding: 18px; height: 100%; }
.spec-card h3, .topic-card h3, .step h3 { font-size: 18px; }
.spec-card p, .topic-card p, .step p, .subnote p { color: var(--muted); margin: 0; }
.topic-card .pill { margin-bottom: 8px; }
.entry {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(255,252,248,.06);
  border: 1px solid rgba(243,239,232,.16);
  border-radius: 14px;
}
.entry-no { font-size: 28px; font-weight: 700; color: var(--accent); }
.entry p { margin: 0; color: var(--ink-soft); }
.step-no { font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: .04em; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.week li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; box-shadow: var(--shadow); }
.week b { display: block; color: var(--secondary); font-size: 14px; }
.week span { display: block; font-size: 13px; color: var(--text); }
.close-band { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; }
.close-band .hero-actions { margin-bottom: 0; }
.site-footer { background: var(--bg-ink); color: var(--ink-soft); padding: 48px 0 36px; }
.site-footer h2, .site-footer h3 { color: #F3EFE8; font-size: 18px; }
.site-footer a { color: #F3EFE8; display: inline-block; padding: 4px 0; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-mark { color: #F3EFE8; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.copyright { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(243,239,232,.16); font-size: 14px; }
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(30,26,34,.96);
  color: #F3EFE8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  box-shadow: 0 -8px 24px rgba(36,31,36,.16);
}
.dock p { margin: 0; font-size: 15px; }
.subnote h3 { font-size: 18px; }
@media (max-width: 1023px) {
  h1 { font-size: 34px; }
  .logo { font-size: 16px; max-width: 240px; }
  .nav-list a { padding: 8px; font-size: 14px; }
  .stage { flex-direction: column; align-items: stretch; }
  .ring-wrap { margin: 0 auto; }
  .close-band { flex-direction: column; align-items: flex-start; }
  .rank-row, .proof-row { grid-template-columns: 72px 1fr; }
  .pills { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; }
}
@media (max-width: 767px) {
  .scene, .entry, .news-item { grid-template-columns: 1fr; }
  .mini-steps, .tag { justify-content: flex-start; }
  .cmp-head { display: none; }
  .cmp { background: transparent; border: 0; box-shadow: none; }
  .cmp-row { grid-template-columns: 1fr; background: var(--card); border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
  .cmp-row > div { border-left: 0; }
  .cmp-row div[data-h]::before { display: block; }
  .week { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .block { padding: 40px 0; }
  .info-line .cell { font-size: 11px; }
  .rank-no, .proof-no, .scene-no, .entry-no {
    display: inline-flex;
    width: auto;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 999px;
    background: rgba(31,111,98,.1);
  }
  .rank-row.top .rank-no { background: rgba(224,122,61,.15); }
  .dock p { display: none; }
  .dock { justify-content: center; }
  #nav-menu .nav-inner { flex-direction: column; align-items: flex-start; padding: 8px 0 14px; }
  #nav-menu .nav-list { display: block; width: 100%; }
  #nav-menu .nav-list li { width: 100%; }
}
@media (max-width: 519px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .hero-actions .btn, .close-band .btn, .entry .btn { width: 100%; }
  .metrics { display: grid; }
  .logo { max-width: 100%; }
}

/* roulang page: category1 */
:root {
 --bg: #F3EFE8;
 --bg-ink: #1E1A22;
 --card: #FFFCF8;
 --primary: #1F6F62;
 --secondary: #6E4A73;
 --accent: #E07A3D;
 --text: #241F24;
 --muted: #5C5560;
 --line: #E4DDD4;
 --shadow: 0 8px 24px rgba(36,31,36,.08);
 --shadow-hover: 0 12px 28px rgba(36,31,36,.14);
 --radius: 14px;
 --radius-btn: 10px;
 --ink-soft: rgba(243,239,232,.78);
}
/* roulang page: category-jpkr-hd */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
 font-size: 16px;
 line-height: 1.75;
 padding-bottom: 0;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: #184f47; }
.site-header { position: sticky; top: 0; z-index: 60; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.info-strip { background: var(--bg-ink); color: #F3EFE8; font-size: 13px; line-height: 36px; min-height: 36px; }
.info-line { align-items: center; }
.info-go { text-align: right; }
.info-go a {
 display: inline-block;
 color: #F3EFE8;
 border: 1px solid rgba(243,239,232,.4);
 border-radius: 999px;
 line-height: 22px;
 padding: 0 10px;
 vertical-align: middle;
}
.info-go a:hover { color: #fff; background: rgba(243,239,232,.12); transform: translateY(-1px); }
.brand-bar.title-bar { background: var(--card); color: var(--text); padding: 8px 16px; }
.brand-bar .menu-icon::after { background: var(--text); box-shadow: 0 7px 0 var(--text), 0 14px 0 var(--text); }
.brand-bar .title-bar-title { color: var(--text); font-weight: 700; font-size: 16px; }
.top-bar, .top-bar ul, .top-bar .menu { background: var(--card); }
.top-bar { padding: 0; border: 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; width: 100%; }
.logo { color: var(--text); font-weight: 700; font-size: 18px; line-height: 1.35; max-width: 420px; }
.logo:hover { color: var(--primary); }
.nav-list { margin: 0; background: transparent; }
.nav-list a { color: var(--text); font-size: 15px; padding: 10px 12px; border-radius: 8px; }
.menu a { color: var(--text); }
.menu a:hover { background: transparent; color: var(--primary); }
.nav-list .is-current > a { color: var(--secondary); box-shadow: inset 0 -2px 0 var(--secondary); }
h1, h2, h3 { font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif; color: var(--text); line-height: 1.35; margin-top: 0; }
h1 { font-size: 40px; font-weight: 700; margin-bottom: 10px; }
h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 18px; font-weight: 700; }
.band { padding: 72px 0; }
.band-plain { background: var(--bg); }
.band-wash { background: #E7E1D7; }
.band-ink { background: var(--bg-ink); color: #F3EFE8; }
.band-ink h2, .band-ink h3 { color: #F3EFE8; }
.block-lead { color: var(--muted); font-size: 16px; max-width: 820px; margin-bottom: 28px; }
.block-ink .block-lead { color: var(--ink-soft); }
.cat-head { padding: 28px 0 22px; background: var(--card); border-bottom: 1px solid var(--line); }
.cat-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.cat-head-grid { align-items: flex-end; }
.cat-metrics { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 18px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 0 18px;
 border-radius: var(--radius-btn);
 border: 1px solid transparent;
 font-weight: 700;
 font-size: 16px;
 line-height: 1;
 cursor: pointer;
 transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
 text-decoration: none;
 background: transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn:active { transform: translateY(0); filter: brightness(.92); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
 outline: 2px solid var(--primary);
 outline-offset: 2px;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { color: #fff; }
.btn-accent { background: var(--accent); color: var(--bg-ink); }
.btn-accent:hover, .btn-accent:focus { color: var(--bg-ink); }
.btn-line { background: var(--card); color: var(--primary); border-color: var(--primary); }
.btn-line:hover { color: var(--primary); }
.pill {
 display: inline-flex;
 align-items: center;
 border-radius: 999px;
 padding: 3px 10px;
 font-size: 13px;
 font-weight: 700;
 border: 1px solid var(--line);
 background: #fff;
 color: var(--text);
}
.pill-hd { color: var(--secondary); background: rgba(110,74,115,.08); border-color: transparent; }
.pill-score { color: var(--bg-ink); background: rgba(224,122,61,.18); border-color: transparent; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-btn {
 min-height: 40px;
 padding: 0 16px;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--card);
 color: var(--text);
 font-weight: 700;
 cursor: pointer;
 transition: .18s ease;
}
.filter-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.filter-btn.is-on { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.filter-note { margin: 0 0 0 auto; color: var(--muted); font-size: 14px; }
.rank-row, .news-item, .scene-bar, .clarity-card, .side-note, .qa details, .close-band {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.rank-row {
 display: grid;
 grid-template-columns: 92px 1fr 148px;
 gap: 14px;
 align-items: center;
 padding: 14px 16px;
 margin-bottom: 12px;
}
.rank-row:hover, .news-item:hover, .scene-bar:hover, .clarity-card:hover {
 transform: translateY(-1px);
 box-shadow: var(--shadow-hover);
 transition: .18s ease;
}
.rank-row.top .rank-no { color: var(--accent); }
.rank-no { font-size: 40px; font-weight: 700; line-height: 1; color: var(--primary); }
.rank-main h3 { font-size: 18px; margin-bottom: 4px; }
.meta { color: var(--muted); font-size: 14px; margin: 0; }
.heat-bar { height: 4px; background: var(--line); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.heat-bar span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.list-more { display: flex; justify-content: flex-end; margin-top: 8px; }
.clarity-card, .side-note, .scene-bar { padding: 18px; height: 100%; }
.clarity-card p, .side-note p, .scene-bar p { color: var(--muted); margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scene-bar { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; margin-bottom: 12px; }
.scene-index { font-size: 28px; font-weight: 700; color: var(--primary); }
.news-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center; padding: 16px; margin-bottom: 12px; color: inherit; }
.news-item h3 { font-size: 18px; margin-bottom: 4px; color: var(--text); }
.tag { justify-self: end; }
.qa details { margin-bottom: 12px; }
.qa summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 700; font-size: 18px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "＋"; float: right; color: var(--primary); font-weight: 700; }
.qa details[open] summary::after { content: "－"; }
.qa details p { padding: 0 18px 16px; color: var(--muted); margin: 0; }
.qa details[open] { box-shadow: var(--shadow-hover); }
.close-band { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--bg-ink); color: #F3EFE8; border-color: transparent; }
.close-band h2 { color: #F3EFE8; font-size: 28px; margin-bottom: 6px; }
.close-band p { margin: 0; color: var(--ink-soft); }
.swatch {
 width: 72px;
 height: 72px;
 border-radius: 14px;
 background:
  linear-gradient(135deg, rgba(31,111,98,.9), rgba(110,74,115,.75)),
  var(--bg-ink);
}
.site-footer { background: var(--bg-ink); color: var(--ink-soft); padding: 48px 0 36px; }
.site-footer h2, .site-footer h3 { color: #F3EFE8; font-size: 18px; }
.site-footer a { color: #F3EFE8; display: inline-block; padding: 4px 0; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-mark { color: #F3EFE8; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.copyright { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(243,239,232,.16); font-size: 14px; }
@media screen and (max-width: 1023px) {
 h1 { font-size: 32px; }
 .scene-bar { grid-template-columns: 72px 1fr; }
 .scene-bar .btn { grid-column: 1 / -1; }
}
@media screen and (max-width: 639px) {
 .band { padding: 40px 0; }
 h1 { font-size: 28px; }
 h2 { font-size: 22px; }
 .info-strip { font-size: 12px; line-height: 1.4; padding: 6px 0; }
 .info-line { display: block; }
 .info-line .cell { width: 100%; text-align: left; }
 .info-go { text-align: left; margin-top: 4px; }
 .brand-bar.title-bar { display: flex; }
 .top-bar { display: none; }
 .nav-inner { flex-direction: column; align-items: flex-start; min-height: 0; padding: 8px 0 14px; }
 .nav-list { display: block; width: 100%; }
 .nav-list li { display: block; }
 .logo { font-size: 16px; max-width: 240px; }
 .nav-list a { padding: 8px; font-size: 14px; }
 .cat-metrics, .filter-note { justify-content: flex-start; margin: 8px 0 0; }
 .rank-row, .news-item { grid-template-columns: 1fr; }
 .rank-no { font-size: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; border-radius: 999px; background: rgba(31,111,98,.1); }
 .pills, .tag { align-items: flex-start; justify-self: start; flex-direction: row; flex-wrap: wrap; }
 .scene-bar { grid-template-columns: 1fr; }
 .close-band { flex-direction: column; align-items: flex-start; }
}
@media screen and (min-width: 640px) {
 .brand-bar.title-bar { display: none; }
}