/* roulang page: index */
:root {
  --wood: #8C4A2F;
  --plaster: #F3EEE6;
  --linen: #E4D8C8;
  --olive: #5E6A52;
  --ink: #241C18;
  --paper: #FFFDF9;
  --muted: rgba(36, 28, 24, .72);
  --line: rgba(36, 28, 24, .14);
  --shadow: 0 10px 28px rgba(36, 28, 24, .08);
  --radius: 6px;
  --space: 76px;
  --bs-blue: #8C4A2F;
  --bs-primary: #8C4A2F;
  --bs-link-color: #8C4A2F;
  --bs-link-hover-color: #241C18;
  --bs-body-color: #241C18;
  --bs-body-bg: #F3EEE6;
  --bs-border-radius: 6px;
  --bs-accordion-active-bg: #8C4A2F;
  --bs-accordion-active-color: #F3EEE6;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(94, 106, 82, .35);
  --bs-accordion-border-color: rgba(36, 28, 24, .14);
  --bs-navbar-color: #241C18;
  --bs-navbar-hover-color: #241C18;
  --bs-navbar-active-color: #F3EEE6;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--wood); text-decoration: none; }
button, input { font-family: inherit; }
::selection { background: var(--wood); color: var(--plaster); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.container { max-width: 1120px; }
h1, h2, h3, .brand-name, .stage-caption strong, .quote-main blockquote {
  font-family: "Noto Serif SC", serif;
  letter-spacing: 0;
}
h1 { font-size: clamp(1.85rem, 4vw, 3.35rem); line-height: 1.18; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.28; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 1.12rem; line-height: 1.4; font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.site-header {
  background: rgba(243, 238, 230, .96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.1);
}
.nav-shell { min-height: 76px; }
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
  max-width: min(100% - 64px, 280px);
  padding: 8px 0;
}
.brand:hover { color: var(--wood); }
.brand-kicker {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--olive);
  font-weight: 700;
}
.brand-name { font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  box-shadow: none;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(94, 106, 82, .35); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23241C18' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-header .navbar-nav { gap: 4px; }
.site-header .nav-link {
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active {
  background: var(--ink);
  color: var(--plaster);
}
.hero { padding: 36px 0 28px; background: var(--plaster); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 36px;
  align-items: center;
}
.hero-lead { color: var(--muted); font-size: 1.02rem; max-width: 40em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.hero-points li {
  background: var(--linen);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: .92rem;
}
.btn-wood, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.btn-wood { background: var(--wood); color: #fff; box-shadow: var(--shadow); }
.btn-wood:hover, .btn-wood:focus { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn-wood:active { transform: translateY(0); background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(36, 28, 24, .35); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--wood); color: #fff; border-color: var(--wood); transform: translateY(-2px); }
.band-wood :focus-visible, .band-ink :focus-visible, .btn-wood:focus-visible { outline-color: #F3EEE6; }
.stage-frame {
  position: relative;
  aspect-ratio: 16/10;
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(36, 28, 24, .2);
  background: linear-gradient(155deg, #8C4A2F 0%, #A56A45 34%, #5E6A52 68%, #241C18 100%);
  box-shadow: 0 18px 42px rgba(36, 28, 24, .16);
}
.stage-shape { position: absolute; border-radius: 4px; }
.s1 { width: 46%; height: 58%; left: 8%; bottom: 14%; background: rgba(243, 238, 230, .18); border: 1px solid rgba(243, 238, 230, .28); }
.s2 { width: 28%; height: 36%; right: 10%; top: 18%; background: rgba(36, 28, 24, .28); }
.adult-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  background: var(--ink);
  color: var(--plaster);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 700;
  z-index: 2;
}
.stage-chips {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 58px;
  display: flex;
  gap: 8px;
  z-index: 2;
  overflow-x: auto;
}
.stage-chips a {
  flex: 0 0 auto;
  background: rgba(243, 238, 230, .92);
  color: var(--wood);
  border-radius: 999px;
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: .9rem;
}
.stage-chips a:hover { background: var(--ink); color: var(--plaster); }
.stage-play {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  margin-top: -37px;
  border-radius: 50%;
  background: var(--plaster);
  z-index: 2;
  box-shadow: var(--shadow);
}
.stage-play::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 25px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--wood);
}
.stage-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(36, 28, 24, .78);
  color: var(--plaster);
  font-weight: 700;
  font-size: .92rem;
}
.pill-wrap {
  background: var(--linen);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pill-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--wood) transparent;
}
.pill {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--plaster);
  color: var(--wood);
  border: 1px solid rgba(36, 28, 24, .16);
  font-weight: 700;
}
.pill:hover { background: var(--wood); color: #fff; }
.pill.is-active { background: var(--ink); color: var(--plaster); border-color: var(--ink); }
.band { padding: var(--space) 0; }
.band-linen { background: var(--linen); }
.band-plaster { background: var(--plaster); }
.band-paper { background: #EFE7DC; }
.band-ink { background: var(--ink); color: var(--plaster); }
.band-wood { background: var(--wood); color: var(--plaster); }
.section-head { max-width: 760px; margin-bottom: 28px; text-align: left; }
.section-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--olive);
  font-weight: 700;
  font-size: .86rem;
}
.band-ink .section-kicker, .band-wood .section-kicker { color: #E4D8C8; }
.section-lead { color: var(--muted); margin: 0; }
.band-ink .section-lead, .band-wood .section-lead { color: rgba(243, 238, 230, .88); }
.material-board {
  display: grid;
  grid-template-columns: 1.35fr .9fr .85fr;
  grid-template-areas:
    "search search clarity"
    "update fav fav";
  gap: 14px;
}
.mat {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px;
  min-height: 180px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(36, 28, 24, .12); }
.mat-search { grid-area: search; background: var(--wood); color: var(--plaster); min-height: 250px; }
.mat-clarity { grid-area: clarity; background: var(--ink); color: var(--plaster); }
.mat-update { grid-area: update; background: var(--paper); }
.mat-fav { grid-area: fav; background: var(--olive); color: var(--plaster); }
.mat-index { font-size: .8rem; font-weight: 700; opacity: .8; display: block; margin-bottom: 10px; }
.mat p, .scene p, .case-body p, .review p, .topic-card p, .metric p, .news-item p, .tl-item p { margin-bottom: 0; }
.scene-list { display: flex; flex-direction: column; gap: 12px; }
.scene {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.scene-index {
  background: var(--wood);
  color: var(--plaster);
  border-radius: var(--radius);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif SC", serif;
  font-weight: 700;
  text-align: center;
  padding: 8px;
}
.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .7fr);
  gap: 18px;
  align-items: stretch;
}
.player-screen {
  background:
    linear-gradient(180deg, rgba(36, 28, 24, .05), rgba(36, 28, 24, .28)),
    linear-gradient(120deg, #C48662, #8C4A2F 42%, #5E6A52 78%, #241C18);
  border-radius: var(--radius);
  min-height: 360px;
  border: 1px solid var(--line);
  position: relative;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.player-screen .stamp {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--plaster);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px 14px;
  max-width: 260px;
}
.player-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 8px 8px 0;
}
.tc-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.tc-item:last-child { border-bottom: 0; }
.tc-item strong { color: var(--wood); font-size: .92rem; }
.case-list { display: flex; flex-direction: column; gap: 16px; }
.case-row {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 18px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.case-row.reverse { grid-template-columns: 1.22fr .78fr; }
.case-row.reverse .case-visual { order: 2; }
.case-visual {
  min-height: 150px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--wood), var(--olive));
  color: var(--plaster);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.case-row:nth-child(2) .case-visual { background: linear-gradient(145deg, var(--ink), #5c463c); }
.case-row:nth-child(3) .case-visual { background: linear-gradient(145deg, #A56A45, var(--wood)); }
.case-row:nth-child(4) .case-visual { background: linear-gradient(145deg, var(--olive), #3e4636); }
.case-visual b { font-family: "Noto Serif SC", serif; font-size: 1.7rem; line-height: 1; }
.case-body { padding: 8px 8px 8px 4px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--linen);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid var(--line);
}
.more-row { margin-top: 18px; }
.price-stack {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 0;
  align-items: stretch;
}
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  position: relative;
}
.price-card.featured {
  background: var(--ink);
  color: var(--plaster);
  z-index: 1;
  transform: translateY(-16px);
  border-color: var(--ink);
}
.price-card .yen {
  font-family: "Noto Serif SC", serif;
  font-size: 2.4rem;
  line-height: 1;
  margin: 8px 0 12px;
}
.price-card .yen span { font-size: 1rem; margin-left: 4px; }
.price-card ul { padding-left: 18px; margin: 0 0 18px; }
.price-card li { margin: 6px 0; }
.ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--olive);
  color: var(--plaster);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .8rem;
  font-weight: 700;
}
.review-wall {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1fr;
  grid-auto-rows: minmax(120px, auto);
  gap: 14px;
}
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.review:nth-child(1) { grid-row: span 2; background: var(--linen); }
.review:nth-child(4) { grid-column: 2 / 4; }
.stars { color: var(--wood); font-weight: 700; font-size: .86rem; display: block; margin-bottom: 8px; }
.quote-layout {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 28px;
  align-items: start;
}
.quote-main blockquote {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.45;
  font-weight: 700;
}
.quote-main cite { display: block; margin-top: 14px; font-style: normal; color: #E4D8C8; font-family: "Noto Sans SC", sans-serif; font-size: .95rem; }
.metric-list { display: flex; flex-direction: column; gap: 12px; }
.metric {
  background: rgba(243, 238, 230, .08);
  border: 1px solid rgba(243, 238, 230, .16);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.metric strong { display: block; color: #fff; margin-bottom: 4px; }
.news-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.news-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.news-meta { color: var(--wood); font-weight: 700; }
.news-link {
  color: var(--ink);
  font-weight: 700;
  font-family: "Noto Serif SC", serif;
  font-size: 1.15rem;
  border-bottom: 1px solid transparent;
}
.news-link:hover { color: var(--wood); border-bottom-color: var(--wood); }
.topic-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wood) transparent;
}
.topic-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  min-height: 190px;
}
.topic-card em {
  display: block;
  font-style: normal;
  color: var(--olive);
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: 8px;
}
.topic-enter { margin-top: 18px; }
.spec-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.spec-row {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.2fr 1.3fr;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.spec-row:last-child { border-bottom: 0; }
.spec-head { background: var(--ink); color: var(--plaster); font-weight: 700; }
.spec-row span { min-width: 0; }
.timeline { border-left: 3px solid var(--wood); margin: 8px 0 0 8px; }
.tl-item { position: relative; padding: 0 0 26px 24px; }
.tl-item::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--olive);
  border-radius: 50%;
  position: absolute;
  left: -8px;
  top: 8px;
}
.faq-acc .accordion-item {
  background: var(--plaster);
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  margin-bottom: 10px;
}
.faq-acc .accordion-button {
  background: var(--plaster);
  color: var(--ink);
  font-weight: 700;
  min-height: 52px;
  box-shadow: none;
  font-family: "Noto Serif SC", serif;
}
.faq-acc .accordion-button:not(.collapsed) {
  background: var(--wood);
  color: var(--plaster);
}
.faq-acc .accordion-button:not(.collapsed)::after { filter: invert(1) brightness(2); }
.faq-acc .accordion-button:focus { box-shadow: 0 0 0 3px rgba(94, 106, 82, .35); }
.faq-acc .accordion-body { background: var(--paper); color: var(--ink); line-height: 1.75; }
.close-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.close-inner .section-head { margin-bottom: 0; }
.site-footer {
  background: var(--ink);
  color: var(--plaster);
  padding: 36px 0;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
}
.site-footer strong { font-family: "Noto Serif SC", serif; font-size: 1.05rem; display: block; margin-bottom: 8px; }
.site-footer p { margin: 0 0 6px; color: rgba(243, 238, 230, .82); }
.site-footer a {
  color: var(--plaster);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid rgba(243, 238, 230, .4);
  font-weight: 700;
}
.site-footer a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 1200px) {
  .container { max-width: 1040px; }
}
@media (max-width: 992px) {
  .hero-grid, .player-layout, .quote-layout, .price-stack { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .review-wall { grid-template-columns: 1fr 1fr; }
  .review:nth-child(1), .review:nth-child(4) { grid-row: auto; grid-column: auto; }
  .material-board {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "search clarity"
      "update fav";
  }
  .close-inner { align-items: flex-start; }
}
@media (max-width: 768px) {
  :root { --space: 52px; }
  .material-board, .scene, .case-row, .case-row.reverse, .news-item, .spec-row { grid-template-columns: 1fr; }
  .case-row.reverse .case-visual { order: 0; }
  .review-wall { grid-template-columns: 1fr; }
  .spec-head { display: none; }
  .spec-row { padding: 12px 14px; }
  .spec-row span { display: block; padding: 4px 0; }
  .spec-row span::before {
    content: attr(data-label);
    display: block;
    color: var(--wood);
    font-weight: 700;
    font-size: .8rem;
  }
  .foot-grid, .close-inner { flex-direction: column; align-items: flex-start; }
  .brand-name { font-size: .95rem; }
}
@media (max-width: 576px) {
  .hero { padding-top: 22px; }
  .hero-actions, .hero-points { width: 100%; }
  .btn-wood, .btn-ghost { width: 100%; }
  .stage-chips a { min-height: 44px; }
  .player-screen { min-height: 240px; }
  .topic-card { flex-basis: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* roulang page: category1 */
:root {
  --wood: #8C4A2F;
  --plaster: #F3EEE6;
  --linen: #E4D8C8;
  --olive: #5E6A52;
  --ink: #241C18;
  --paper: #FFFDF9;
  --muted: rgba(36, 28, 24, .72);
  --line: rgba(36, 28, 24, .14);
  --shadow: 0 10px 28px rgba(36, 28, 24, .08);
  --radius: 6px;
  --space: 76px;
  --bs-blue: #8C4A2F;
  --bs-primary: #8C4A2F;
  --bs-link-color: #8C4A2F;
  --bs-link-hover-color: #241C18;
  --bs-body-color: #241C18;
  --bs-body-bg: #F3EEE6;
  --bs-border-radius: 6px;
  --bs-accordion-active-bg: #8C4A2F;
  --bs-accordion-active-color: #F3EEE6;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(94, 106, 82, .35);
  --bs-accordion-border-color: rgba(36, 28, 24, .14);
  --bs-navbar-color: #241C18;
  --bs-navbar-hover-color: #241C18;
  --bs-navbar-active-color: #F3EEE6;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--wood); text-decoration: none; }
button, input { font-family: inherit; }
.container { max-width: 1120px; }
h1, h2, h3, .brand-name {
  font-family: "Noto Serif SC", serif;
  letter-spacing: 0;
  color: var(--ink);
}
h1 { font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.25; font-weight: 700; margin: 0 0 10px; }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.35; font-weight: 700; margin: 0 0 18px; }
h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 8px; font-weight: 700; }
p { margin: 0 0 10px; }
.site-header {
  background: rgba(243, 238, 230, .96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.1);
}
.nav-shell { min-height: 76px; }
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
  max-width: min(100% - 64px, 280px);
  padding: 8px 0;
}
.brand:hover { color: var(--wood); }
.brand-kicker {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--olive);
  font-weight: 700;
}
.brand-name { font-size: 1.02rem; line-height: 1.35; font-weight: 700; }
.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  box-shadow: none;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(94, 106, 82, .35); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23241C18' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-header .navbar-nav { gap: 4px; }
.site-header .nav-link {
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active {
  background: var(--ink);
  color: var(--plaster);
}
.btn-wood, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-wood { background: var(--wood); color: #fff; box-shadow: var(--shadow); }
.btn-wood:hover, .btn-wood:focus { background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn-wood:active { transform: translateY(0); background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(36, 28, 24, .35); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--wood); color: #fff; border-color: var(--wood); transform: translateY(-2px); }
:focus-visible { outline: 3px solid rgba(94, 106, 82, .55); outline-offset: 2px; }
.band { padding: 52px 0; }
.band-paper { background: var(--paper); }
.band-plaster { background: var(--plaster); }
.band-linen { background: var(--linen); }
.band + .band { border-top: 1px solid var(--line); }
.cat-head { padding: 34px 0 28px; }
.cat-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 28px;
  align-items: end;
}
.kicker {
  display: inline-block;
  color: var(--olive);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.lead-tight { color: var(--muted); max-width: 40em; margin: 0; }
.meta-board {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.meta-board span {
  display: block;
  font-weight: 700;
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.meta-board span:first-child { border-top: 0; padding-top: 0; }
.meta-board em { font-style: normal; color: var(--wood); margin-right: 8px; }
.scope-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.scope-chip {
  flex: 0 0 auto;
  background: var(--paper);
  color: var(--wood);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 44px;
  padding: 8px 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.scope-chip strong { font-weight: 700; margin-right: 6px; color: var(--ink); }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filter-label { font-weight: 700; margin-right: 4px; }
.filter-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--wood);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.filter-btn:hover, .filter-btn:focus { transform: translateY(-2px); background: var(--linen); color: var(--ink); }
.filter-btn[aria-pressed="true"] { background: var(--ink); color: var(--plaster); border-color: var(--ink); }
.result-note { margin-left: auto; color: var(--muted); font-weight: 700; }
.film-list { display: flex; flex-direction: column; gap: 16px; }
.film-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.film-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(36, 28, 24, .12); }
.film-still {
  position: relative;
  min-height: 168px;
  background: linear-gradient(145deg, #8C4A2F 0%, #C48962 42%, #5E6A52 100%);
}
.still-b { background: linear-gradient(160deg, #241C18 0%, #8C4A2F 46%, #E4D8C8 100%); }
.still-c { background: linear-gradient(150deg, #5E6A52 0%, #8C4A2F 55%, #F3EEE6 100%); }
.still-d { background: linear-gradient(140deg, #A56A45 0%, #241C18 70%); }
.still-e { background: linear-gradient(135deg, #E4D8C8 0%, #8C4A2F 48%, #5E6A52 100%); }
.still-f { background: linear-gradient(155deg, #8C4A2F, #241C18 60%, #C48962); }
.still-time, .adult-pill {
  position: absolute;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
}
.adult-pill { left: 12px; top: 12px; background: var(--ink); color: var(--plaster); padding: 4px 10px; }
.still-time { right: 12px; bottom: 12px; background: rgba(243, 238, 230, .94); color: var(--ink); padding: 4px 10px; }
.film-body { padding: 16px 16px 16px 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.tag {
  background: var(--linen);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .86rem;
  font-weight: 700;
  border: 1px solid var(--line);
}
.film-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.more-row { margin-top: 18px; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--wood); }
.timeline li { position: relative; padding: 0 0 22px 22px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--wood);
  border: 2px solid var(--plaster);
}
.time-name { font-weight: 700; color: var(--wood); }
.spec-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.spec-row {
  display: grid;
  grid-template-columns: 120px 1.1fr 1.4fr;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.spec-row:first-child { border-top: 0; background: var(--linen); font-weight: 700; }
.spec-row b { color: var(--wood); }
.open-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--plaster);
  border-radius: var(--radius);
}
.open-line p { margin: 0; color: var(--plaster); }
.open-line strong { font-family: "Noto Serif SC", serif; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.news-list time { color: var(--olive); font-weight: 700; }
.news-list a { font-weight: 700; color: var(--ink); }
.news-list a:hover { color: var(--wood); }
.accordion { --bs-accordion-bg: var(--paper); --bs-accordion-btn-bg: var(--paper); --bs-accordion-active-bg: var(--wood); --bs-accordion-active-color: var(--plaster); --bs-accordion-btn-color: var(--ink); --bs-accordion-border-color: var(--line); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(94, 106, 82, .35); }
.accordion-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; background: var(--paper); }
.accordion-button {
  font-weight: 700;
  min-height: 52px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: none;
}
.accordion-button:not(.collapsed) { background: var(--wood); color: var(--plaster); }
.accordion-button:not(.collapsed)::after { filter: invert(1); }
.accordion-body { background: var(--paper); color: var(--ink); }
.site-footer { background: var(--ink); color: var(--plaster); padding: 28px 0; }
.foot-grid { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.site-footer p { margin: 4px 0 0; color: rgba(243, 238, 230, .82); }
.site-footer a { color: var(--plaster); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:hover { color: #fff; }
.hidden-card { display: none; }
@media (max-width: 1200px) {
  .container { max-width: 960px; }
}
@media (max-width: 992px) {
  .container { max-width: 100%; }
  .cat-head-grid, .film-card, .spec-row, .news-list li { grid-template-columns: 1fr; }
  .film-body { padding: 14px 16px 16px; }
  .result-note { margin-left: 0; width: 100%; }
  .brand { max-width: calc(100% - 72px); }
}
@media (max-width: 768px) {
  .band { padding: 40px 0; }
  .open-line, .foot-grid { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 1.65rem; }
}
@media (max-width: 576px) {
  .band { padding: 32px 0; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .filter-label, .result-note { flex: 0 0 auto; }
  .news-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}