/* roulang page: index */
:root {
  --paper: #F3EBDD;
  --card: #FBF6EE;
  --ink: #241C16;
  --sub: #5C5148;
  --cin: #B84332;
  --cindeep: #8C2E22;
  --dusk: #5E4468;
  --tea: #6E7A55;
  --marker: #F0D7A4;
  --line: #E2D5C3;
  --radius: 12px;
  --shadow: 0 8px 16px rgba(36, 28, 22, 0.06);
  --space: 4.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(36, 28, 22, 0.035) 32px
  );
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  line-height: 1.85;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: 16px; }
a { color: var(--dusk); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tea);
  outline-offset: 2px;
}
::selection { background: var(--marker); color: var(--ink); }
.container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.section { padding: 2rem 0; }
.band { background: rgba(251, 246, 238, 0.72); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.3;
}
.logo:hover { text-decoration: none; color: var(--cin); }
.logo::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--marker) 50%, transparent 50%);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.nav-link:hover { background: rgba(240, 215, 164, 0.55); text-decoration: none; }
.nav-link.active { color: var(--cin); box-shadow: inset 0 -2px 0 var(--cin); }
.chip-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
}
.chip-scroll::-webkit-scrollbar { height: 6px; }
.chip-scroll::-webkit-scrollbar-thumb { background: #d9cbb8; border-radius: 999px; }
.chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.chip:hover { background: var(--marker); text-decoration: none; transform: translateY(-1px); }
.chip.current { color: var(--cin); background: #f8e7c8; }
.h-serif { font-family: "Noto Serif SC", "Songti SC", "STSong", serif; }
.mark {
  background-image: linear-gradient(transparent 62%, var(--marker) 62%);
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.05rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--cin);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--cindeep); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); background: var(--cindeep); }
.btn-ghost {
  background: transparent;
  color: var(--cin);
  border-color: var(--cin);
}
.btn-ghost:hover { background: rgba(184, 67, 50, 0.08); color: var(--cindeep); }
.metric b { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Sarasa Mono SC", monospace; font-size: 1.35rem; font-weight: 700; }
.swatch {
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(184, 67, 50, 0.18), transparent 42%),
    repeating-linear-gradient(90deg, rgba(110, 122, 85, 0.16) 0 8px, transparent 8px 16px),
    #f6efe4;
  border: 1px solid var(--line);
  min-height: 92px;
}
.row-link { color: var(--dusk); }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.2rem 0.8rem;
  margin: 0.3rem 0.35rem 0.3rem 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--dusk);
  text-decoration: none;
}
.tag:hover { background: var(--marker); text-decoration: none; color: var(--ink); }
.time-line { border-left: 2px solid var(--line); margin-left: 0.55rem; }
.dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--cin);
  box-shadow: 0 0 0 4px rgba(184, 67, 50, 0.12);
}
details.qa {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 0.35rem 1rem;
}
details.qa + details.qa { margin-top: 0.75rem; }
details.qa summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 650;
  list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "＋"; margin-left: auto; color: var(--cin); }
details.qa[open] summary::after { content: "－"; }
details.qa p { margin: 0 0 0.85rem; color: var(--sub); }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.field span { color: var(--ink); }
.field input, .field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf9;
  color: var(--ink);
  padding: 0.45rem 0.75rem;
}
.field input:user-invalid, .field select:user-invalid { border-color: var(--cin); }
.err { color: var(--cin); font-size: 0.92rem; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; }
.check input { width: 1.05rem; height: 1.05rem; margin-top: 0.35rem; accent-color: var(--cin); }
.notice { border: 1px solid var(--tea); background: rgba(110, 122, 85, 0.1); border-radius: 10px; padding: 0.75rem 0.9rem; }
@media (min-width: 640px) {
  body { font-size: 17px; }
  .section { padding: 2.4rem 0; }
}
@media (min-width: 768px) {
  .section { padding: 3.4rem 0; }
}
@media (min-width: 1024px) {
  .section { padding: 4.25rem 0; }
}
@media (max-width: 520px) {
  .container { width: min(1180px, calc(100% - 1.25rem)); }
  .logo { font-size: 0.98rem; }
}

/* roulang page: category1 */
:root {
 --paper: #F3EBDD;
 --card: #FBF6EE;
 --ink: #241C16;
 --sub: #5C5148;
 --cin: #B84332;
 --cindeep: #8C2E22;
 --dusk: #5E4468;
 --tea: #6E7A55;
 --marker: #F0D7A4;
 --line: #E2D5C3;
 --radius: 12px;
 --shadow: 0 8px 16px rgba(36, 28, 22, 0.06);
 --space: 4.25rem;
}
/* roulang page: index */
:root {
 --paper: #F3EBDD;
 --card: #FBF6EE;
 --ink: #241C16;
 --sub: #5C5148;
 --cin: #B84332;
 --cindeep: #8C2E22;
 --dusk: #5E4468;
 --tea: #6E7A55;
 --marker: #F0D7A4;
 --line: #E2D5C3;
 --radius: 12px;
 --shadow: 0 8px 16px rgba(36, 28, 22, 0.06);
 --space: 4.25rem;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 color: var(--ink);
 background-color: var(--paper);
 background-image: repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent 31px,
 rgba(36, 28, 22, 0.035) 32px
 );
 font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
 font-size: 17px;
 line-height: 1.85;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: 16px; }
a { color: var(--dusk); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
 outline: 2px solid var(--tea);
 outline-offset: 2px;
}
.container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.section { padding: 2rem 0; }
.logo {
 position: relative;
 display: inline-flex;
 align-items: center;
 color: var(--ink);
 font-family: "Noto Serif SC", "Songti SC", serif;
 font-weight: 700;
 letter-spacing: 0.01em;
 text-decoration: none;
 line-height: 1.3;
}
.logo:hover { text-decoration: none; color: var(--cin); }
.logo::after {
 content: "";
 position: absolute;
 right: -10px;
 top: -6px;
 width: 12px;
 height: 12px;
 background: linear-gradient(135deg, var(--marker) 50%, transparent 50%);
 border-top: 1px solid var(--line);
 border-right: 1px solid var(--line);
}
.nav-link {
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 padding: 0 0.85rem;
 border-radius: 8px;
 color: var(--ink);
 text-decoration: none;
}
.nav-link:hover { background: rgba(240, 215, 164, 0.55); text-decoration: none; }
.nav-link.active { color: var(--cin); box-shadow: inset 0 -2px 0 var(--cin); }
.chip-scroll {
 display: flex;
 flex-wrap: nowrap;
 gap: 0.6rem;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 0.35rem;
}
.chip-scroll::-webkit-scrollbar { height: 6px; }
.chip-scroll::-webkit-scrollbar-thumb { background: #d9cbb8; border-radius: 999px; }
.chip {
 scroll-snap-align: start;
 flex: 0 0 auto;
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 padding: 0 1rem;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: var(--card);
 color: var(--ink);
 text-decoration: none;
 transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.chip:hover { background: var(--marker); text-decoration: none; transform: translateY(-1px); }
.chip.current { color: var(--cin); background: #f8e7c8; }
.card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.btn {
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0.55rem 1.05rem;
 border-radius: 8px;
 border: 1px solid transparent;
 background: var(--cin);
 color: #fff;
 text-decoration: none;
 transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--cindeep); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); background: var(--cindeep); }
.btn-ghost {
 background: transparent;
 color: var(--cin);
 border-color: var(--cin);
}
.btn-ghost:hover { background: rgba(184, 67, 50, 0.08); color: var(--cindeep); }
.row-link { color: var(--dusk); }
.tag {
 display: inline-flex;
 align-items: center;
 min-height: 40px;
 padding: 0.2rem 0.8rem;
 margin: 0.3rem 0.35rem 0.3rem 0;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--card);
 color: var(--dusk);
 text-decoration: none;
}
.tag:hover { background: var(--marker); text-decoration: none; color: var(--ink); }
details.qa {
 border: 1px solid var(--line);
 border-radius: 12px;
 background: var(--card);
 padding: 0.35rem 1rem;
}
details.qa + details.qa { margin-top: 0.75rem; }
details.qa summary {
 cursor: pointer;
 min-height: 44px;
 display: flex;
 align-items: center;
 font-weight: 650;
 list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "＋"; margin-left: auto; color: var(--cin); }
details.qa[open] summary::after { content: "－"; }
details.qa p { margin: 0 0 0.85rem; color: var(--sub); }
.field input, .field select {
 width: 100%;
 min-height: 46px;
 border: 1px solid var(--line);
 border-radius: 8px;
 background: #fffdf9;
 color: var(--ink);
 padding: 0.45rem 0.75rem;
}
.field input:user-invalid, .field select:user-invalid { border-color: var(--cin); }
.check input { width: 1.05rem; height: 1.05rem; margin-top: 0.35rem; accent-color: var(--cin); }
body { font-size: 17px; }
.section { padding: 2.4rem 0; }
.section { padding: 3.4rem 0; }
.section { padding: 4.25rem 0; }
.container { width: min(1180px, calc(100% - 1.25rem)); }
.logo { font-size: 0.98rem; }
@media (min-width: 640px) {
 body { font-size: 17px; }
 .section { padding: 2.4rem 0; }
}
@media (min-width: 768px) {
 .section { padding: 3.4rem 0; }
}
@media (min-width: 1024px) {
 .section { padding: 4.25rem 0; }
}
@media (max-width: 520px) {
 .container { width: min(1180px, calc(100% - 1.25rem)); }
 .logo { font-size: 0.98rem; }
}
.h-serif { font-family: "Noto Serif SC", "Songti SC", serif; font-weight: 700; line-height: 1.35; }
.mark { background: linear-gradient(transparent 62%, var(--marker) 62%); }
.muted { color: var(--sub); }
.band { background: rgba(251, 246, 238, 0.78); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.crumb { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; color: var(--sub); font-size: 0.95rem; }
.crumb a { color: var(--dusk); }
.crumb .now { color: var(--ink); }
.filter {
 scroll-snap-align: start;
 flex: 0 0 auto;
 min-height: 44px;
 padding: 0 1rem;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--card);
 color: var(--ink);
 cursor: pointer;
 transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.filter:hover { background: var(--marker); transform: translateY(-1px); }
.filter.is-on { color: var(--cin); background: #f8e7c8; }
.entry {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.9rem;
 padding: 0.9rem;
 transition: transform 0.2s ease, border-color 0.2s ease;
}
.entry + .entry { margin-top: 0.9rem; }
.entry:hover { transform: translateY(-1px); border-color: #d8b5ac; }
.swatch {
 min-height: 92px;
 border-radius: 10px;
 border: 1px solid var(--line);
}
.swatch-a { background: linear-gradient(160deg, #f6ead8, #e7d3b8); }
.swatch-b { background: linear-gradient(160deg, #f4e7e2, #e4cfc8); }
.swatch-c { background: linear-gradient(160deg, #efe8da, #d9d3c4); }
.swatch-d { background: linear-gradient(160deg, #f3eadc, #e4d7c4); }
.swatch-e { background: linear-gradient(160deg, #eee4d6, #ddd0c2); }
.swatch-f { background: linear-gradient(160deg, #f7f0e4, #e9dcc8); }
.meta-date { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 0.92rem; }
.entry h2 { font-size: 1.2rem; margin: 0.15rem 0 0.35rem; }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--cin); text-decoration: underline; }
.clamp-2 { margin: 0; color: var(--sub); }
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pager span {
 min-width: 44px;
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 1px solid var(--line);
 border-radius: 8px;
 background: var(--card);
 color: var(--sub);
}
.pager span.on { color: var(--cin); background: #f8e7c8; border-color: #efd7a4; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
 display: grid;
 grid-template-columns: 3.2rem 1fr;
 gap: 0.75rem;
 padding: 0.95rem 0;
 border-bottom: 1px solid var(--line);
}
.num { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--cin); font-weight: 700; padding-top: 0.15rem; }
.side-note {
 border-left: 3px solid var(--cin);
 background: #fbf3e2;
 border-radius: 0 12px 12px 0;
 padding: 1rem 1rem 1rem 1.1rem;
}
.mini-q { padding: 0.95rem 1rem; }
.mini-q + .mini-q { margin-top: 0.75rem; }
.mini-q h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.mini-q p { margin: 0; color: var(--sub); }
.strip {
 display: grid;
 grid-template-columns: 1fr;
 gap: 0.75rem;
 padding: 0.9rem 1rem;
}
.strip + .strip { margin-top: 0.75rem; }
.strip h3 { margin: 0.1rem 0 0.3rem; font-size: 1.08rem; }
.strip h3 a { color: var(--ink); }
.strip h3 a:hover { color: var(--cin); }
.dot {
 width: 100%;
 min-height: 44px;
 border-radius: 8px;
 background: repeating-linear-gradient(90deg, #f0d7a4 0 10px, #f7efe3 10px 18px);
 border: 1px solid var(--line);
}
@media (min-width: 768px) {
 .entry { grid-template-columns: 168px 1fr; align-items: stretch; }
 .swatch { min-height: 100%; }
 .strip { grid-template-columns: 120px 1fr; align-items: center; }
 .dot { min-height: 72px; }
}
@media (max-width: 520px) {
 .section { padding: 1.75rem 0; }
 .entry h2 { font-size: 1.08rem; }
}