/* roulang page: index */
:root{
  --wine:#6B1D3A;
  --lime:#C6F54E;
  --rose:#E85A8C;
  --paper:#F4EFE6;
  --paper-2:#FBF7F1;
  --ink:#1C1917;
  --cream:#F7F3EC;
  --line:#E4D9CC;
  --muted:#5C564E;
  --muted-dark:#E4D9CC;
  --radius:16px;
  --shadow:0 10px 28px rgba(28,25,23,.08);
  --shadow-deep:0 16px 36px rgba(28,25,23,.16);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:500;
  line-height:1.85;
}
body::before{
  content:"";
  position:fixed;
  right:-180px;
  top:120px;
  width:640px;
  height:640px;
  border:1px solid rgba(107,29,58,.12);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
img{max-width:100%;display:block}
a{color:var(--wine);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea{font-family:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-inner,.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-inner{min-height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3}
.brand:hover{text-decoration:none;color:var(--wine)}
.lane-mark{display:inline-flex;flex-direction:column;gap:3px;width:18px}
.lane-mark i{display:block;height:2px;background:var(--lime);border-radius:999px}
.lane-mark i:nth-child(2){width:12px;background:var(--wine)}
.top-tools{display:flex;align-items:center;gap:12px}
.age-pill{font-size:13px;color:var(--wine);border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:4px 10px}
.chipbar{background:var(--paper-2);border-bottom:1px solid var(--line)}
.chip-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding:12px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--wine);padding:8px 16px;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none}
.chip:hover{text-decoration:none;background:#fff;transform:translateY(-1px)}
.chip.is-on,.chip:active{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.section{position:relative;padding:76px 0}
.section::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime)}
.bg-paper{background:var(--paper)}
.bg-soft{background:var(--paper-2)}
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-ink a{color:var(--lime)}
.bg-ink .lead,.bg-ink .quiet{color:var(--muted-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.3;margin:0 0 .7rem}
h1{font-size:40px}
h2{font-size:28px}
h3{font-size:19px}
.lead{max-width:38em;margin:0 0 1rem;color:var(--muted)}
p{margin:0 0 1rem}
.hero-grid,.split,.contact-grid,.kr-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:stretch}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--wine);font-size:13px;margin-bottom:12px}
.kicker em{font-style:normal;background:var(--lime);color:var(--ink);border-radius:999px;padding:2px 8px;font-family:var(--mono);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--wine);font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--wine);color:var(--cream)}
.btn-primary:hover{background:var(--ink);color:var(--lime)}
.btn-ghost{background:transparent;color:var(--wine)}
.btn-ghost:hover{background:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;background:var(--wine);color:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.board{background:var(--ink);color:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:grid;gap:12px}
.board h2{font-size:18px;color:var(--cream)}
.score{border:1px solid rgba(198,245,78,.45);border-radius:12px;padding:12px 14px;background:#241c1a}
.score b{display:block;font-family:var(--mono);font-size:36px;line-height:1;color:var(--lime);font-weight:700}
.score span{display:block;margin-top:6px;color:var(--cream);font-size:14px}
.bib{position:absolute;top:12px;right:12px;background:var(--lime);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:12px;border-radius:999px;padding:3px 8px}
.card,.news-item,.quote,.step,.batch,.pair,.mode,.faq-item,.logo-pill,.editor-card,.partner-note{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--wine);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{position:relative;padding:18px 18px 16px;transition:transform .2s ease,box-shadow .2s ease}
.card:hover,.editor-card:hover,.logo-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-deep)}
.card h3,.editor-card h3{margin:8px 0}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:14px;line-height:1.8;min-height:4.8em}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.span-7{grid-column:span 7}
.span-5{grid-column:span 5}
.span-4{grid-column:span 4}
.span-12{grid-column:span 12}
.cover{border-radius:12px;aspect-ratio:16/9;display:grid;place-items:center;color:var(--cream);font-size:13px;margin-bottom:12px;position:relative;overflow:hidden}
.cover.tall{aspect-ratio:3/4}
.cover small{position:relative;z-index:1;background:rgba(28,25,23,.35);border-radius:999px;padding:4px 8px}
.c1{background:linear-gradient(145deg,#6B1D3A,#3a1020 60%,#1C1917)}
.c2{background:linear-gradient(160deg,#1C1917,#6B1D3A)}
.c3{background:linear-gradient(135deg,#6B1D3A,#E85A8C 180%,#1C1917)}
.c4{background:linear-gradient(180deg,#3d2430,#6B1D3A)}
.stat-row,.mode-row,.badge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.stat b{font-family:var(--mono);font-size:34px;color:var(--wine);font-weight:700;line-height:1}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.track::before{content:"";position:absolute;left:6%;right:6%;top:28px;height:2px;background:var(--lime)}
.step{position:relative;padding:16px;background:var(--paper)}
.step i{font-style:normal;font-family:var(--mono);color:var(--ink);background:var(--lime);border-radius:999px;padding:2px 8px;font-weight:700}
.wall{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.w-a{grid-column:span 6}
.w-b{grid-column:span 3}
.w-c{grid-column:span 3}
.w-d{grid-column:span 4}
.w-e{grid-column:span 8}
.news-list{display:flex;flex-direction:column;gap:0}
.news-item{display:grid;grid-template-columns:92px 1fr auto;gap:16px;align-items:center;padding:14px 16px;border-radius:0;border-left-width:0;border-right:0;border-top:0;box-shadow:none;background:transparent}
.news-item time{font-family:var(--mono);font-size:13px;color:var(--wine)}
.news-item p{margin:0;color:var(--muted);font-size:14px}
.news-item + .news-item{border-top:1px solid var(--line)}
.more{white-space:nowrap;font-weight:700}
.timeline{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--lime);margin-left:10px}
.batch{margin:0 0 14px 18px;padding:14px 16px;position:relative}
.batch::before{content:"";position:absolute;left:-25px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid var(--ink)}
.kr-grid{grid-template-columns:1fr 1fr}
.pair{padding:14px 16px}
.pair + .pair{margin-top:12px}
.tag{display:inline-block;background:var(--lime);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700}
.mode-row{grid-template-columns:repeat(3,1fr);align-items:end}
.mode{padding:16px}
.mode.h-s{min-height:180px}
.mode.h-m{min-height:220px}
.mode.h-l{min-height:260px}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.entry{display:block;padding:22px;border-radius:var(--radius);background:var(--paper-2);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none}
.entry:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-deep)}
.entry strong{display:block;font-family:var(--serif);font-size:24px;color:var(--wine);margin-bottom:8px}
.h-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
.h-scroll::-webkit-scrollbar{display:none}
.logo-pill,.editor-card{scroll-snap-align:start;flex:0 0 auto}
.logo-pill{padding:14px 18px;min-width:160px;border-left-width:3px}
.editor-card{width:230px;padding:14px}
.faq-item{margin-bottom:10px;padding:0 16px;background:var(--paper)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;font-weight:700;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.plus{width:16px;height:16px;position:relative;flex:0 0 auto}
.plus::before,.plus::after{content:"";position:absolute;background:var(--wine);transition:transform .2s ease,opacity .2s ease}
.plus::before{left:7px;top:0;width:2px;height:16px}
.plus::after{left:0;top:7px;width:16px;height:2px}
.faq-item[open] .plus::before{transform:rotate(90deg);opacity:0}
.faq-item p{line-height:1.85;color:var(--muted);padding-bottom:12px}
.badge-row{grid-template-columns:repeat(3,1fr)}
.badge{border:1px solid var(--line);border-radius:999px;padding:12px 14px;background:var(--paper-2);text-align:center;font-weight:700;color:var(--wine)}
label{display:block;font-size:14px;margin-bottom:6px}
input[type="text"],textarea{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:10px 12px;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{border-color:var(--lime);outline:3px solid var(--lime);outline-offset:1px}
.is-error{border-color:var(--rose)!important}
.check{display:flex;gap:8px;align-items:flex-start;margin:12px 0}
.check input{margin-top:6px;accent-color:var(--wine)}
.form-note{min-height:1.5em;color:var(--wine);font-size:14px}
.office{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.read-list{display:flex;flex-direction:column;gap:12px}
.read-list article{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.read-list b{font-family:var(--mono);color:var(--wine)}
.site-footer{background:var(--ink);color:var(--cream);padding:48px 0 28px;position:relative}
.site-footer a{color:var(--cream)}
.site-footer a:hover{color:var(--lime)}
.footer-grid{align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 16px}
.copy{border-top:1px solid rgba(228,217,204,.25);margin-top:22px;padding-top:14px;color:var(--muted-dark);font-size:14px}
.quiet{color:var(--muted);font-size:14px}
@media(max-width:1023px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .span-7,.span-5,.span-4{grid-column:span 6}
  .w-a,.w-e{grid-column:span 12}
  .w-b,.w-c,.w-d{grid-column:span 6}
}
@media(max-width:767px){
  h1{font-size:30px}
  h2{font-size:23px}
  .section{padding:46px 0}
  .container{width:min(1120px,calc(100% - 40px))}
  .topbar-inner{min-height:64px}
  .brand{font-size:16px}
  .stat-row,.track,.mode-row,.badge-row,.entry-grid,.kr-grid,.mosaic,.wall{grid-template-columns:1fr}
  .span-7,.span-5,.span-4,.span-12,.w-a,.w-b,.w-c,.w-d,.w-e{grid-column:span 1}
  .track::before{display:none}
  .news-item{grid-template-columns:72px 1fr}
  .news-item .more{grid-column:2}
  .mode.h-s,.mode.h-m,.mode.h-l{min-height:0}
  .footer-grid{flex-direction:column}
}
@media(min-width:1024px){
  .container{width:min(1120px,calc(100% - 64px))}
}

/* roulang page: category1 */
:root{
 --wine:#6B1D3A;
 --lime:#C6F54E;
 --rose:#E85A8C;
 --paper:#F4EFE6;
 --paper-2:#FBF7F1;
 --ink:#1C1917;
 --cream:#F7F3EC;
 --line:#E4D9CC;
 --muted:#5C564E;
 --muted-dark:#E4D9CC;
 --radius:16px;
 --shadow:0 10px 28px rgba(28,25,23,.08);
 --shadow-deep:0 16px 36px rgba(28,25,23,.16);
 --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
 --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
 --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
/* roulang page: category1 */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--paper);
 color:var(--ink);
 font-family:var(--sans);
 font-size:16.5px;
 font-weight:500;
 line-height:1.85;
 letter-spacing:0;
}
body::before{
 content:"";
 position:fixed;
 right:-180px;
 top:120px;
 width:640px;
 height:640px;
 border:1px solid rgba(107,29,58,.12);
 border-radius:50%;
 pointer-events:none;
 z-index:0;
}
img,svg{max-width:100%;display:block}
a{color:var(--wine);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea{font-family:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:0;line-height:1.35;color:inherit}
h1{font-size:40px;margin:0 0 12px}
h2{font-size:28px;margin:0 0 16px}
h3{font-size:19px;margin:0 0 8px}
p{margin:0 0 .95rem}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto;position:relative;z-index:1}
.topbar{
 position:sticky;
 top:0;
 z-index:50;
 background:var(--paper);
 border-bottom:1px solid var(--line);
}
.topbar-inner,.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-inner{min-height:72px}
.top-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3}
.brand:hover{text-decoration:none;color:var(--wine)}
.lane{width:10px;height:22px;border-radius:999px;background:var(--lime);box-shadow:inset 0 0 0 1px rgba(28,25,23,.18);display:inline-block}
.age-pill{font-size:13px;color:var(--wine);border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:4px 10px}
.chipbar{background:var(--paper-2);border-bottom:1px solid var(--line);position:relative;z-index:2}
.chip-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding:12px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--wine);padding:8px 16px;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease}
.chip:hover{text-decoration:none;background:#fff;transform:translateY(-1px)}
.chip.is-on,.chip:active{background:var(--wine);color:var(--cream);border-color:var(--wine)}
button.chip{appearance:none;-webkit-appearance:none}
.section{position:relative;padding:76px 0}
.section::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime)}
.section-alt{background:var(--paper-2)}
.section-ink{background:var(--ink);color:var(--cream)}
.section-ink .lead,.section-ink .quiet{color:var(--muted-dark)}
.bg-ink a{color:var(--lime)}
.lead{max-width:38em;margin:0 0 1rem;color:var(--muted);line-height:1.85}
.scope p{max-width:38em;color:var(--ink);margin:0 0 .85rem}
.hero-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,300px);gap:28px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--wine);font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;background:transparent;color:var(--wine)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--wine);color:var(--cream)}
.btn-primary:hover{background:var(--ink);color:var(--lime)}
.btn-ghost{background:transparent;color:var(--wine)}
.btn-ghost:hover{background:var(--paper)}
.btn:focus-visible,.chip:focus-visible,.genre-tag:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;background:var(--wine);color:var(--cream)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.card,.news-item,.quote,.step,.batch,.pair,.mode,.faq-item,.logo-pill,.editor-card,.partner-note,.h-card,.def-card,.genre-note{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--wine);border-radius:var(--radius);box-shadow:var(--shadow)}
.card,.h-card,.quote,.def-card,.genre-note{position:relative;padding:18px 18px 16px;transition:transform .2s ease,box-shadow .2s ease}
.h-card:hover,.quote:hover,.def-card:hover,.genre-note:hover,.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-deep)}
.bib,.sec-no{font-family:var(--mono);font-weight:700;background:var(--lime);color:var(--ink);border-radius:999px;font-size:12px;line-height:1.4}
.bib{position:absolute;top:12px;right:12px;padding:2px 8px}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sec-no{padding:3px 9px;flex:0 0 auto}
.h-list{display:flex;flex-direction:column;gap:14px}
.h-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:center;padding-right:54px}
.h-card h3{margin:0 0 6px;font-size:19px}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta-line{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;color:var(--muted);font-size:14px;margin-top:8px}
.meta-line time{font-family:var(--mono);color:var(--wine);font-size:13px}
.tag{display:inline-block;background:var(--lime);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700}
.tag-rose{background:var(--rose);color:#fff}
.cover{position:relative;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 82% 18%, rgba(232,90,140,.95) 0 7px, transparent 8px),linear-gradient(155deg,#6B1D3A 0%,#1C1917 74%);aspect-ratio:16/9;min-height:112px;display:flex;align-items:flex-end;padding:10px 12px;color:var(--cream);font-size:13px}
.cover::before{content:"";position:absolute;left:10%;right:12%;top:46%;height:2px;background:var(--lime);transform:rotate(-8deg);transform-origin:left center}
.cover span{position:relative;z-index:1}
.cover-portrait{aspect-ratio:3/4;min-height:300px;max-width:300px;margin-left:auto}
.batch-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.batch-row::-webkit-scrollbar{display:none}
.genre-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}
.genre-side{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.genre-tag{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;transition:transform .2s ease,background .2s ease}
.genre-tag:hover{transform:translateY(-2px)}
.genre-tag.is-on{background:var(--lime);border-color:var(--lime)}
.genre-main{display:flex;flex-direction:column;gap:12px}
.genre-note h3{font-size:18px}
.genre-note p{margin:0;color:var(--muted);font-size:14px;line-height:1.85}
.genre-main.is-filtering .genre-note{opacity:.38}
.genre-main.is-filtering .genre-note.is-hot{opacity:1}
.quote-list{display:flex;flex-direction:column;gap:14px}
.quote p{margin:0 0 10px;color:var(--ink);line-height:1.85}
.quote a{font-weight:700}
.def-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.def-card h3{color:var(--wine)}
.def-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.85}
.section-ink .def-card{background:var(--paper-2);color:var(--ink)}
.section-ink .def-card p{color:var(--muted)}
.article-list{display:flex;flex-direction:column}
.article-link{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.article-link:hover{color:var(--wine);text-decoration:none}
.article-link b{font-family:var(--mono);color:var(--wine);font-size:13px}
.article-link span{font-size:17px;font-weight:700;font-family:var(--serif)}
.faq-item{margin-bottom:10px;padding:0 16px;background:var(--paper)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;font-weight:700;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{line-height:1.85;color:var(--muted);padding-bottom:12px;margin:0}
.plus{width:22px;height:22px;position:relative;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--wine);border-radius:2px}
.plus::before{width:14px;height:2px;left:4px;top:10px}
.plus::after{width:2px;height:14px;left:10px;top:4px;transition:transform .2s ease,opacity .2s ease}
.faq-item[open] .plus::after{opacity:0;transform:rotate(90deg)}
.back-row{margin-top:18px}
.is-hide{display:none !important}
.quiet{color:var(--muted);font-size:14px}
.site-footer{background:var(--ink);color:var(--cream);padding:48px 0 28px;position:relative;z-index:1}
.site-footer a{color:var(--cream)}
.site-footer a:hover{color:var(--lime)}
.footer-grid{align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 18px}
.site-footer p{max-width:42em}
.copy{color:#E4D9CC;font-size:14px;margin:0}
.site-footer .brand{color:var(--cream)}
@media (min-width:1024px){
 .container{width:min(1120px,calc(100% - 64px))}
}
@media (max-width:1024px){
 .hero-split{grid-template-columns:minmax(0,1fr) 240px}
 .h-card{grid-template-columns:180px minmax(0,1fr)}
}
@media (max-width:768px){
 .section{padding:46px 0}
 h1{font-size:30px}
 h2{font-size:23px}
 h3{font-size:18px}
 .hero-split,.h-card,.genre-layout,.def-grid,.article-link{grid-template-columns:1fr}
 .cover-portrait{margin-left:0;max-width:100%;min-height:0}
 .h-card{padding-right:18px}
 .bib{top:10px}
 .topbar-inner{min-height:64px;align-items:center}
 .brand{font-size:17px}
 .footer-grid{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
 .container{width:min(1120px,calc(100% - 32px))}
 .top-actions .btn{padding:0 12px;min-height:42px;font-size:14px}
 .age-pill{padding:4px 8px}
}

/* roulang page: category2 */
:root{
 --wine:#6B1D3A;
 --lime:#C6F54E;
 --rose:#E85A8C;
 --paper:#F4EFE6;
 --paper-2:#FBF7F1;
 --ink:#1C1917;
 --cream:#F7F3EC;
 --line:#E4D9CC;
 --muted:#5C564E;
 --muted-dark:#E4D9CC;
 --radius:16px;
 --shadow:0 10px 28px rgba(28,25,23,.08);
 --shadow-deep:0 16px 36px rgba(28,25,23,.16);
 --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
 --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
 --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;font-weight:500;line-height:1.85}
body::before{content:"";position:fixed;right:-180px;top:120px;width:640px;height:640px;border:1px solid rgba(107,29,58,.12);border-radius:50%;pointer-events:none;z-index:0}
img,svg{max-width:100%;display:block}
a{color:var(--wine);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea{font-family:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.35;text-align:left;margin:0}
h1{font-size:42px}
h2{font-size:28px;margin-bottom:18px}
h3{font-size:19px}
p{margin:0 0 .95rem}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar-inner,.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-inner{min-height:72px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.3}
.brand:hover{text-decoration:none;color:var(--wine)}
.lane-mark{width:28px;height:3px;background:var(--lime);border-radius:999px;display:inline-block}
.top-actions{display:flex;align-items:center;gap:12px}
.age-pill{font-size:13px;color:var(--wine);border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:4px 10px}
.chipbar{background:var(--paper-2);border-bottom:1px solid var(--line);position:relative;z-index:40}
.chip-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding:12px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--wine);padding:8px 16px;font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease}
.chip:hover{text-decoration:none;background:#fff;transform:translateY(-1px)}
.chip.is-on,.chip:active{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.chip:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
main{position:relative;z-index:1}
.section{position:relative;padding:76px 0}
.section::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lime)}
.bg-soft{background:var(--paper-2)}
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-ink a{color:var(--lime)}
.bg-ink .lead,.bg-ink .quiet,.bg-ink .muted{color:var(--muted-dark)}
.lead{max-width:40em;color:var(--muted)}
.kicker{margin:0 0 8px;color:var(--wine);font-weight:700;font-size:14px}
.bib-inline{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;padding:0 8px;margin-right:8px;border-radius:999px;background:var(--lime);color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:700;vertical-align:middle}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.meta-row span{font-family:var(--mono);font-size:13px;color:var(--wine)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--wine);font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--wine);color:var(--cream)}
.btn-primary:hover{background:var(--ink);color:var(--lime)}
.btn-ghost{background:transparent;color:var(--wine)}
.btn-ghost:hover{background:var(--paper)}
.bg-ink .btn-primary{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.bg-ink .btn-primary:hover{background:var(--cream);color:var(--ink)}
.mag-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-7{grid-column:span 7}
.span-6{grid-column:span 6}
.span-5{grid-column:span 5}
.span-4{grid-column:span 4}
.span-3{grid-column:span 3}
.card{position:relative;background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--wine);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-deep)}
.card h3{margin:8px 0}
.lead-card{display:grid;grid-template-columns:1.15fr .85fr;gap:0;padding:0;overflow:hidden;background:var(--paper)}
.lead-card .copy{padding:22px}
.cover{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#1C1917}
.lead-card .cover{aspect-ratio:auto;height:100%;min-height:240px;border-radius:0}
.cover-label{position:absolute;left:10px;bottom:10px;background:var(--lime);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}
.cover-a{background:radial-gradient(90px 70px at 18% 30%,rgba(198,245,78,.95),transparent 70%),linear-gradient(145deg,#6B1D3A,#1C1917 62%)}
.cover-b{background:radial-gradient(80px 80px at 80% 20%,rgba(232,90,140,.55),transparent 68%),linear-gradient(160deg,#1C1917,#6B1D3A)}
.cover-c{background:linear-gradient(120deg,#6B1D3A 20%,#1C1917 20% 48%,#C6F54E 48% 52%,#1C1917 52%)}
.cover-d{background:repeating-linear-gradient(90deg,#1C1917 0 18px,#6B1D3A 18px 20px),linear-gradient(#1C1917,#6B1D3A)}
.cover-e{background:radial-gradient(circle at 50% 120%,#C6F54E,transparent 46%),linear-gradient(#6B1D3A,#1C1917)}
.cover-f{background:linear-gradient(200deg,#1C1917,#6B1D3A 70%),repeating-linear-gradient(0deg,transparent 0 16px,rgba(198,245,78,.35) 16px 17px)}
.cover-g{background:linear-gradient(135deg,#F4EFE6,#E4D9CC 40%,#6B1D3A 40%)}
.tag{display:inline-block;background:var(--lime);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700;margin-right:6px}
.tag.rose{background:transparent;color:var(--rose);border:1px solid var(--rose)}
.muted{color:var(--muted);font-size:14px;line-height:1.85}
time,.mono{font-family:var(--mono);font-size:13px;color:var(--wine)}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more-row{margin-top:18px}
.slot{display:grid;grid-template-columns:132px 1fr 1fr;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(228,217,204,.35)}
.slot b{font-family:var(--serif);font-size:20px;font-weight:700}
.slot a{display:block;padding:12px 14px;border:1px solid rgba(228,217,204,.4);border-left:3px solid var(--lime);border-radius:16px;color:var(--cream);text-decoration:none;background:rgba(247,243,236,.04)}
.slot a:hover{text-decoration:none;background:rgba(198,245,78,.12);transform:translateY(-2px)}
.slot a small{display:block;color:var(--muted-dark);font-size:13px}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.diff-grid .card ul{margin:0;padding-left:1.1em}
.diff-grid li{margin:.35rem 0}
.quote{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--wine);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 8px;margin:0 0 14px}
.quote p{font-family:var(--serif);font-size:18px;line-height:1.85}
.cloud{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.badge{border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:var(--paper-2);font-weight:700;color:var(--wine)}
.badge.rose{border-color:var(--rose);color:var(--rose);background:#fff}
.order{max-width:820px;display:flex;flex-direction:column}
.order a{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.order a:hover{color:var(--wine);text-decoration:none}
.order b{font-family:var(--mono);color:var(--wine);font-size:18px}
.cta-line{display:flex;align-items:center;justify-content:space-between;gap:18px}
.cta-line h2{margin:0}
.site-footer{background:var(--ink);color:var(--cream);padding:48px 0 28px;position:relative;z-index:1}
.site-footer a{color:var(--cream)}
.site-footer a:hover{color:var(--lime)}
.site-footer .brand:hover{color:var(--lime)}
.footer-grid{align-items:flex-start;margin-bottom:16px}
.foot-links{display:flex;flex-wrap:wrap;gap:12px 18px}
.copy{color:var(--muted-dark);font-size:14px}
@media (max-width:1024px) and (min-width:769px){
 .span-7,.span-5,.span-8,.span-4,.span-3,.span-6{grid-column:span 6}
}
@media (max-width:768px){
 h1{font-size:30px}
 h2{font-size:23px}
 .section{padding:48px 0}
 .lead-card,.diff-grid,.slot,.order a,.cta-line,.footer-grid,.topbar-inner{grid-template-columns:1fr;flex-direction:column;align-items:flex-start}
 .span-12,.span-8,.span-7,.span-6,.span-5,.span-4,.span-3{grid-column:span 12}
 .order a{grid-template-columns:52px 1fr}
 .lead-card .cover{min-height:180px}
}
@media (min-width:1280px){
 .container{width:min(1120px,calc(100% - 64px))}
}