/* roulang page: index */
:root{--bg:#12100E;--lift:#1C1916;--ivory:#F4EFE6;--muted:#A89B8C;--copper:#C4894A;--copper-deep:#B47E44;--plum:#7A4E6A;--teal:#5E8F84;--line:#3A332C;--radius:4px;--shadow:0 10px 24px rgba(48,32,18,.16);--serif:"Noto Serif SC","Songti SC","STSong",serif;--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:16px;line-height:1.75;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.22;letter-spacing:-.03em;margin:0}
p{margin:0}
::selection{background:var(--copper);color:#12100E}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--copper);color:var(--ivory);padding:.5rem .8rem;z-index:80}
.skip:focus{left:1rem;top:1rem}
.container{width:min(1120px,calc(100% - 2rem));margin-inline:auto}
.measure{max-width:66em}
.site-header{position:sticky;top:0;z-index:40;background:#12100E;border-bottom:1px solid var(--line)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{display:flex;align-items:center;gap:.65rem;min-width:0}
.logo-mark{display:inline-flex;align-items:center;gap:6px;color:var(--copper);flex:0 0 auto}
.playhead{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--copper);animation:playmove 1.2s ease-in-out infinite}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.bars i{display:block;width:2px;background:currentColor;opacity:.4;animation:waveOpacity 1.4s ease-in-out infinite}
.bars i:nth-child(1){height:6px}
.bars i:nth-child(2){height:12px;animation-delay:.12s}
.bars i:nth-child(3){height:8px;animation-delay:.24s}
.bars i:nth-child(4){height:15px;animation-delay:.06s}
.bars i:nth-child(5){height:9px;animation-delay:.3s}
.bars i:nth-child(6){height:5px;animation-delay:.18s}
.bars i:nth-child(7){height:13px;animation-delay:.22s}
.logo-text{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links a{position:relative;color:var(--muted);padding:.35rem 0;font-size:.95rem}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.nav-links a:hover{color:var(--ivory)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ivory)}
.menu-btn{display:none;border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .7rem;color:var(--ivory);background:#1C1916}
.chip-row{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .75rem;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#1C1916;color:var(--ivory);border-radius:4px;padding:.32rem .78rem;font-size:.86rem;transition:border-color .3s ease,color .3s ease}
.chip:hover{border-color:var(--copper);color:var(--copper)}
.hero{padding:3.2rem 0 4.2rem;background:radial-gradient(1200px 420px at 80% 0%,rgba(122,78,106,.18),transparent 60%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:2.4rem;align-items:center}
.eyebrow{color:var(--copper);font-size:.86rem;letter-spacing:.08em;margin-bottom:.8rem}
h1{font-size:clamp(2rem,4.6vw,3.7rem);max-width:11em}
.lead{margin-top:1rem;color:var(--ivory);font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.btn,.btn-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;padding:.65rem 1.15rem .9rem;border-radius:4px;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.btn{background:var(--copper);color:var(--ivory);border:1px solid var(--copper)}
.btn::after,.btn-ghost::after{content:"";position:absolute;left:1.15rem;bottom:.42rem;height:1px;width:.45rem;background:currentColor;transition:width .3s ease}
.btn:hover{background:var(--copper-deep)}
.btn:hover::after,.btn-ghost:hover::after{width:1.2rem}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border:1px solid var(--copper);color:var(--ivory)}
.btn-ghost:hover{background:#241c16}
.mini-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.mini{border:1px solid var(--line);background:#1C1916;border-radius:4px;padding:.45rem .7rem;min-width:6.5rem}
.mini b{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1.2}
.mini span{color:var(--muted);font-size:.8rem}
.stage{background:#1C1916;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);overflow:hidden}
.stage-screen{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#2a211c 0%,#1C1916 46%,#2a2230 78%,#172421 100%);display:flex;align-items:center;justify-content:center}
.stage-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(244,239,230,.025) 18px 19px);pointer-events:none}
.stage-play{position:relative;z-index:1;width:0;height:0;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent var(--ivory);animation:playmove 1.2s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(48,32,18,.25))}
.stage-caption{position:absolute;left:.9rem;bottom:.8rem;z-index:1;color:var(--ivory);font-size:.86rem}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.8rem .9rem 1rem;border-top:1px solid var(--line)}
.progress{flex:1 1 140px;height:3px;background:#3A332C;border-radius:2px;min-width:40%}
.progress span{display:block;height:100%;width:62%;background:var(--copper)}
.time-read{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.86rem}
.q-switch{display:flex;gap:.35rem}
.q-btn{border:1px solid var(--line);border-radius:2px;padding:.2rem .45rem;color:var(--muted);font-size:.78rem}
.q-btn[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:var(--ivory)}
.now-q{color:var(--teal);font-size:.8rem}
.section{padding:4.6rem 0}
.section-alt{background:#1C1916}
.section-head{margin-bottom:1.5rem}
.section-head h2{position:relative;padding-left:.85rem;font-size:clamp(1.55rem,2.4vw,2.15rem)}
.section-head h2::before{content:"";position:absolute;left:0;top:.28em;width:3px;height:.95em;background:var(--copper)}
.section-head p{margin-top:.75rem;color:var(--muted)}
.wave-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.wave-row{display:grid;grid-template-columns:1.4fr auto auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);transition:transform .3s ease}
.wave-row:hover{transform:translateY(-2px)}
.wave-title{font-weight:700}
.wave-meta{color:var(--muted);font-size:.88rem;margin-top:.15rem}
.pin-block{margin-top:1.8rem}
.pin-block h3{font-size:1.25rem;margin-bottom:.6rem}
.feature-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);gap:1rem;align-items:start}
.info-row,.side-card,.scene-card,.region-item,.stat-card,.price-card,.review,.entry-link{background:#1C1916;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.section-alt .info-row,.section-alt .side-card,.section-alt .scene-card,.section-alt .region-item,.section-alt .stat-card,.section-alt .price-card,.section-alt .review,.section-alt .entry-link{background:#12100E}
.info-row,.side-card{padding:1rem 1.05rem;margin-bottom:.75rem;transition:transform .3s ease,border-color .3s ease}
.info-row:hover,.side-card:hover,.scene-card:hover,.region-item:hover,.stat-card:hover,.price-card:hover,.review:hover,.entry-link:hover{transform:translateY(-2px);border-color:#6d5438}
.info-row h3,.side-card h3,.scene-card h3,.region-col h3{font-size:1.12rem;margin-bottom:.35rem}
.info-row p,.side-card p,.scene-card p,.region-item p,.review p,.entry-link p,.news-item p{color:var(--muted);font-size:.95rem}
.tag{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px;padding:.05rem .4rem;font-size:.75rem;color:var(--muted);margin:.15rem .3rem .15rem 0}
.tag.copper{color:#E2C09A;border-color:#8a6236}
.tag.plum{color:#E4C9D8;border-color:var(--plum)}
.tag.teal{color:#B7D5CE;border-color:#3f665e}
.rail{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.4rem;scroll-snap-type:x mandatory}
.scene-card{flex:0 0 280px;scroll-snap-align:start;padding:1rem 1rem 1.1rem}
.kicker{color:var(--teal);font-size:.78rem;letter-spacing:.06em}
.demo-wrap{max-width:920px}
.region-grid{display:grid;grid-template-columns:1.45fr 1.05fr .78fr;gap:.9rem;align-items:start}
.region-col{padding:.2rem}
.region-col h3{margin:0 0 .7rem;padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.region-item{padding:.85rem .9rem;margin-bottom:.65rem}
.region-item strong{display:block;font-weight:700;margin-bottom:.25rem}
.stat-grid{display:grid;grid-template-columns:1.15fr .9fr .95fr;gap:.9rem}
.stat-card{padding:1.15rem 1.1rem 1.25rem}
.stat-num{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--copper);line-height:1;margin:.4rem 0}
.price-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:stretch}
.price-card{padding:1.2rem 1.15rem 1.3rem}
.price-card.is-free{border-color:var(--copper);background:#221c17}
.price-num{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:.45rem 0 .7rem}
.price-card ul{margin-top:.4rem}
.price-card li{color:var(--muted);padding:.55rem 0;border-top:1px solid var(--line);font-size:.94rem}
.review-wall{columns:3;column-gap:.8rem}
.review{break-inside:avoid;margin:0 0 .8rem;padding:1rem}
.review.long{padding-bottom:1.6rem}
.review footer{margin-top:.7rem;color:var(--copper);font-size:.82rem}
.tc-list{border-top:1px solid var(--line)}
.tc-row{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.tc-time{font-variant-numeric:tabular-nums;color:var(--copper);font-family:var(--serif);font-size:1.05rem}
.tc-row p{color:var(--ivory)}
.entry-row{display:flex;flex-wrap:wrap;gap:.8rem}
.entry-link{display:block;min-width:min(100%,280px);padding:1rem 1.05rem;flex:1 1 280px}
.entry-link strong{display:block;font-family:var(--serif);font-size:1.2rem;margin-bottom:.35rem}
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.news-date{color:var(--copper);font-variant-numeric:tabular-nums}
.news-item h3{font-size:1.12rem;margin-bottom:.25rem}
.more-link{position:relative;display:inline-block;margin-top:1rem;color:var(--copper);padding-bottom:.2rem}
.more-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:.6rem;background:var(--copper);transition:width .3s ease}
.more-link:hover::after{width:100%}
.news-ext{margin-top:1rem}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:.85rem 0}
.faq-list summary{cursor:pointer;font-family:var(--serif);font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"＋";color:var(--copper);font-weight:400}
.faq-list details[open] summary::after{content:"－"}
.faq-list details p{margin-top:.55rem;color:var(--muted);max-width:66em}
.cta-section{padding:1.2rem 0 4.5rem;background:#12100E}
.cta-strip{display:flex;justify-content:space-between;align-items:flex-end;gap:1.2rem;border:1px solid var(--line);background:#1C1916;border-radius:6px;padding:1.15rem 1.2rem}
.cta-strip h2{font-size:1.45rem}
.site-footer{border-top:1px solid var(--line);padding:2.4rem 0 2.8rem;background:#0e0c0b}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .8fr;gap:1.5rem}
.site-footer p,.site-footer a{color:var(--muted);font-size:.92rem}
.foot-links{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.site-footer a:hover{color:var(--ivory)}
.foot-brand{margin:.7rem 0;max-width:36em}
@keyframes playmove{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes waveOpacity{0%,100%{opacity:.28}50%{opacity:1}}
@media(max-width:1280px){.container{width:min(1040px,calc(100% - 2rem))}}
@media(max-width:1024px){
.hero-grid,.feature-layout,.price-grid,.footer-grid{grid-template-columns:1fr}
.region-grid{grid-template-columns:1fr 1fr}
.region-col.kr{grid-column:1/-1}
.stat-grid{grid-template-columns:1fr 1fr}
.review-wall{columns:2}
}
@media(max-width:768px){
.menu-btn{display:inline-flex}
.nav-bar{position:relative}
.nav-links{display:none;position:absolute;top:calc(100% + .35rem);left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#1C1916;border:1px solid var(--line);padding:.4rem .8rem .7rem;z-index:45}
.nav-links.is-open{display:flex}
.nav-links a{width:100%;padding:.7rem 0;border-bottom:1px solid var(--line)}
.section{padding:3.4rem 0}
.stat-grid,.review-wall{columns:1;display:block}
.stat-grid{display:grid;grid-template-columns:1fr}
.cta-strip{flex-direction:column;align-items:flex-start}
.logo-text{white-space:normal}
}
@media(max-width:640px){
.region-grid,.wave-row{grid-template-columns:1fr}
.hero{padding-top:2.2rem}
.scene-card{flex-basis:84%}
}
@media(max-width:520px){
.container{width:calc(100% - 1.4rem)}
.tc-row,.news-item{grid-template-columns:1fr;gap:.25rem}
.stage-bar{align-items:flex-start}
h1{font-size:1.85rem}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}

/* roulang page: category2 */
:root{--bg:#12100E;--lift:#1C1916;--ivory:#F4EFE6;--muted:#A89B8C;--copper:#C4894A;--copper-deep:#B47E44;--plum:#7A4E6A;--teal:#5E8F84;--line:#3A332C;--radius:4px;--shadow:0 10px 24px rgba(48,32,18,.16);--serif:"Noto Serif SC","Songti SC","STSong",serif;--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:16px;line-height:1.75;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.28;letter-spacing:-.02em}
p{max-width:42rem}
:focus-visible{outline:1px solid var(--copper);outline-offset:2px}
.container{width:min(1120px,calc(100% - 2rem));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:40;background:#12100E;border-bottom:1px solid var(--line)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{display:flex;align-items:center;gap:.65rem;min-width:0}
.logo-mark{display:inline-flex;align-items:center;gap:6px;color:var(--copper);flex:0 0 auto}
.playhead{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--copper);animation:playmove .9s ease-in-out infinite alternate}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.bars i{display:block;width:2px;background:var(--copper);animation:wave .9s ease-in-out infinite alternate}
.bars i:nth-child(1){height:4px}
.bars i:nth-child(2){height:8px;animation-delay:.1s}
.bars i:nth-child(3){height:12px;animation-delay:.2s}
.bars i:nth-child(4){height:7px;animation-delay:.15s}
.bars i:nth-child(5){height:11px;animation-delay:.05s}
.bars i:nth-child(6){height:5px;animation-delay:.25s}
.bars i:nth-child(7){height:9px;animation-delay:.12s}
.logo-text{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links a{position:relative;color:var(--muted);padding:.35rem 0;font-size:.95rem}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.nav-links a:hover{color:var(--ivory)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ivory)}
.menu-btn{display:none;border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .7rem;color:var(--ivory);background:#1C1916}
.chip-row{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .75rem;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#1C1916;color:var(--ivory);border-radius:4px;padding:.32rem .78rem;font-size:.86rem;transition:border-color .3s ease,color .3s ease}
.chip:hover{border-color:var(--copper);color:var(--copper)}
.section{padding:4.6rem 0}
.section-alt{background:#1C1916}
.section-head{margin-bottom:1.5rem}
.section-head h2{position:relative;padding-left:.85rem;font-size:clamp(1.55rem,2.4vw,2.15rem)}
.section-head h2::before{content:"";position:absolute;left:0;top:.28em;width:3px;height:.95em;background:var(--copper)}
.section-head p{margin-top:.75rem;color:var(--muted)}
.edit-head{padding:1.6rem 0 2.2rem;border-bottom:1px solid var(--line)}
.crumb{display:flex;flex-wrap:wrap;gap:.35rem .55rem;color:var(--muted);font-size:.86rem;margin-bottom:.85rem}
.crumb a:hover{color:var(--copper)}
.crumb span[aria-hidden]{color:#6d6256}
.edit-head h1{font-size:clamp(1.85rem,3.3vw,2.75rem);max-width:18em}
.lead{margin-top:1rem;color:var(--ivory);font-size:1.02rem}
.meta-line{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.tag{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px;padding:.05rem .4rem;font-size:.75rem;color:var(--muted);margin:.15rem .3rem .15rem 0}
.tag.copper{color:var(--copper);border-color:#6d5438}
.tag.teal{color:var(--teal);border-color:#3e615a}
.catalog-wrap{padding-top:2.4rem;padding-bottom:2.8rem}
.catalog-shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:1.25rem;align-items:start}
.index-card,.dir-card,.compare-main,.compare-side,.note-block,.news-item,.week-item{background:#1C1916;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}
.section-alt .index-card,.section-alt .dir-card{background:#12100E}
.index-card,.dir-card{padding:1rem 1.05rem 1.15rem}
.index-card{position:sticky;top:5.6rem}
.index-card h2,.note-block h3,.compare-main h3,.compare-side h3{font-size:1.12rem;margin-bottom:.35rem}
.index-list{display:flex;flex-direction:column;margin-top:.6rem}
.index-list a{display:flex;justify-content:space-between;gap:.6rem;padding:.58rem .1rem;border-bottom:1px solid var(--line);color:var(--muted);font-size:.94rem;transition:color .3s ease}
.index-list a:hover,.index-list a.is-on{color:var(--ivory)}
.index-list a.is-on{box-shadow:inset 0 -1px 0 var(--copper)}
.index-list em{font-style:normal;color:var(--copper);font-size:.78rem}
.dir-row{display:grid;grid-template-columns:108px minmax(0,1fr) auto;gap:.9rem 1rem;align-items:start;padding:1rem 0;border-bottom:1px solid var(--line);transition:transform .3s ease,border-color .3s ease}
.dir-row:hover{transform:translateY(-2px)}
.dir-row.is-feature{padding:1.15rem .2rem 1.2rem}
.dir-kicker{color:var(--copper);font-size:.82rem;letter-spacing:.04em}
.dir-title{font-size:1.18rem;margin-bottom:.25rem}
.dir-row p{color:var(--muted);font-size:.95rem}
.dir-side{text-align:right}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.1rem}
.btn,.btn-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;padding:.65rem 1.15rem .9rem;border-radius:4px;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.btn{background:var(--copper);color:var(--ivory);border:1px solid var(--copper)}
.btn::after,.btn-ghost::after{content:"";position:absolute;left:1.15rem;bottom:.42rem;height:1px;width:.45rem;background:currentColor;transition:width .3s ease}
.btn:hover{background:var(--copper-deep)}
.btn:hover::after,.btn-ghost:hover::after{width:1.2rem}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;border:1px solid var(--copper);color:var(--ivory)}
.btn-ghost:hover{background:#241c16}
.compare{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);gap:1rem;align-items:start}
.compare-main,.compare-side,.note-block,.news-item,.week-item{padding:1rem 1.05rem;transition:transform .3s ease,border-color .3s ease}
.compare-main:hover,.compare-side:hover,.note-block:hover,.news-item:hover,.week-item:hover{transform:translateY(-2px);border-color:#6d5438}
.line-item{display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto;gap:.75rem;padding:.8rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.94rem}
.line-item strong{color:var(--ivory);font-weight:700}
.line-item span:last-child{color:var(--teal)}
.week-list{display:flex;flex-direction:column;border-left:1px solid var(--line);margin-left:.35rem}
.week-item{margin:0 0 .85rem 1rem;position:relative}
.week-item::before{content:"";position:absolute;left:-1.32rem;top:1.15rem;width:7px;height:7px;border-radius:50%;background:var(--copper)}
.time-code{font-variant-numeric:tabular-nums;color:var(--copper);font-size:.86rem}
.week-item h3{font-size:1.08rem;margin:.2rem 0 .3rem}
.week-item p,.note-block p,.news-item p,.compare-main p,.compare-side p{color:var(--muted);font-size:.95rem}
.note-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1rem}
.note-stack{display:flex;flex-direction:column;gap:1rem}
.news-list{display:flex;flex-direction:column;gap:.75rem}
.news-item{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:1rem;align-items:start}
.news-item time{color:var(--muted);font-size:.86rem}
.news-item h3{font-size:1.08rem;margin-bottom:.25rem}
.more-bar{padding:1.3rem 0 2.4rem;border-top:1px solid var(--line)}
.more-bar .container{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.more-bar p{color:var(--muted)}
.more-link{position:relative;color:var(--ivory);padding-bottom:.35rem;white-space:nowrap}
.more-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:.7rem;background:var(--copper);transition:width .3s ease}
.more-link:hover::after{width:100%}
.site-footer{border-top:1px solid var(--line);padding:2.6rem 0;background:#1C1916}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:1.5rem}
.foot-brand,.footer-grid p,.foot-links a{color:var(--muted);font-size:.94rem}
.foot-brand{margin-top:.75rem}
.foot-links{display:flex;flex-direction:column;gap:.35rem;margin-top:.35rem}
.foot-links a:hover{color:var(--copper)}
@keyframes playmove{from{transform:translateX(0)}to{transform:translateX(3px)}}
@keyframes wave{from{opacity:.35}to{opacity:1}}
@media (max-width:1280px){
.container{width:min(1040px,calc(100% - 2rem))}
}
@media (max-width:1024px){
.catalog-shell,.compare,.note-grid,.footer-grid{grid-template-columns:1fr}
.index-card{position:static}
.news-item{grid-template-columns:1fr}
}
@media (max-width:768px){
.menu-btn{display:inline-flex}
.nav-bar{position:relative}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#1C1916;border:1px solid var(--line);padding:.35rem .9rem .7rem;z-index:30}
.nav-links.is-open{display:flex}
.nav-links a{width:100%;padding:.7rem 0}
.dir-row,.line-item{grid-template-columns:1fr}
.dir-side{text-align:left}
.section{padding:3.2rem 0}
.more-bar .container{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
.logo-text{font-size:.92rem}
.container{width:min(100% - 1.4rem,1120px)}
.edit-head h1{font-size:1.65rem}
}
@media (max-width:520px){
.chip{padding:.32rem .62rem}
.dir-title{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.dir-row:hover,.compare-main:hover,.compare-side:hover,.note-block:hover,.news-item:hover,.week-item:hover{transform:none}
}

/* roulang page: category1 */
:root{--bg:#12100E;--lift:#1C1916;--ivory:#F4EFE6;--muted:#A89B8C;--copper:#C4894A;--copper-deep:#B47E44;--plum:#7A4E6A;--teal:#5E8F84;--line:#3A332C;--radius:4px;--shadow:0 10px 24px rgba(48,32,18,.16);--serif:"Noto Serif SC","Songti SC","STSong",serif;--sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:16px;line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:#6d5438;color:var(--ivory)}
.container{width:min(1120px,calc(100% - 2rem));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:40;background:#12100E;border-bottom:1px solid var(--line)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{display:flex;align-items:center;gap:.65rem;min-width:0}
.logo-mark{display:inline-flex;align-items:center;gap:6px;color:var(--copper);flex:0 0 auto}
.playhead{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--copper);animation:playmove 1.2s ease-in-out infinite}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.bars i{display:block;width:2px;background:var(--copper);animation:wave 1.2s ease-in-out infinite}
.bars i:nth-child(1){height:5px}
.bars i:nth-child(2){height:9px;animation-delay:.1s}
.bars i:nth-child(3){height:13px;animation-delay:.2s}
.bars i:nth-child(4){height:7px;animation-delay:.15s}
.bars i:nth-child(5){height:11px;animation-delay:.25s}
.bars i:nth-child(6){height:6px;animation-delay:.05s}
.bars i:nth-child(7){height:10px;animation-delay:.18s}
.logo-text{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap;color:var(--ivory)}
.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links a{position:relative;color:var(--muted);padding:.35rem 0;font-size:.95rem}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
.nav-links a:hover{color:var(--ivory)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ivory)}
.menu-btn{display:none;border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .7rem;color:var(--ivory);background:#1C1916}
.chip-row{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .75rem;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#1C1916;color:var(--ivory);border-radius:4px;padding:.32rem .78rem;font-size:.86rem;transition:border-color .3s ease,color .3s ease}
.chip:hover{border-color:var(--copper);color:var(--copper)}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;line-height:1.28;color:var(--ivory)}
h1{font-size:clamp(1.9rem,4vw,3.05rem);margin:0}
h2{font-size:clamp(1.45rem,2.3vw,2rem);margin:0}
h3{font-size:1.12rem;margin:0}
p{margin:0}
.section{padding:4.2rem 0}
.section-tight{padding:1.35rem 0}
.section-alt{background:#1C1916}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.35rem}
.section-head h2{position:relative;padding-left:.85rem}
.section-head h2::before{content:"";position:absolute;left:0;top:.28em;width:3px;height:.95em;background:var(--copper)}
.section-head p{color:var(--muted);max-width:42rem}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;padding:.65rem 1.15rem .9rem;border-radius:4px;background:var(--copper);color:var(--ivory);border:1px solid var(--copper);transition:background .3s ease,transform .3s ease}
.btn::after{content:"";position:absolute;left:1.15rem;bottom:.42rem;height:1px;width:.45rem;background:currentColor;transition:width .3s ease}
.btn:hover{background:var(--copper-deep)}
.btn:hover::after{width:1.2rem}
.btn:active{transform:translateY(1px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.edit-head{padding:2.2rem 0 1.6rem;background:radial-gradient(900px 280px at 100% 0%,rgba(122,78,106,.16),transparent 62%),var(--bg);border-bottom:1px solid var(--line)}
.crumb{display:flex;flex-wrap:wrap;gap:.45rem;color:var(--muted);font-size:.88rem}
.crumb a:hover{color:var(--copper)}
.batch{color:var(--copper);font-size:.86rem;letter-spacing:.04em}
.dek{margin-top:.85rem;max-width:42rem;color:var(--ivory)}
.edit-side{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.stat-pill{border:1px solid var(--line);background:#1C1916;border-radius:4px;padding:.28rem .6rem;color:var(--muted);font-size:.82rem}
.filter-bar{display:flex;flex-direction:column;gap:.85rem}
.filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.filter-label{color:var(--muted);min-width:4.5rem;font-size:.88rem}
.fbtn{border:1px solid var(--line);background:#12100E;color:var(--ivory);border-radius:4px;padding:.32rem .72rem;font-size:.86rem;transition:border-color .3s ease,background .3s ease,color .3s ease}
.fbtn:hover{border-color:var(--copper);color:var(--copper)}
.fbtn[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:var(--ivory)}
.film{background:#1C1916;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;transition:transform .3s ease,border-color .3s ease}
.section-alt .film{background:#12100E}
.film:hover{transform:translateY(-2px);border-color:#6d5438}
.film-still{position:relative;display:flex;align-items:flex-end;padding:.7rem}
.film-still span{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ivory)}
.still-a{aspect-ratio:16/11;background:linear-gradient(155deg,#3a2a22,#1C1916 55%,#3a2740)}
.still-b{aspect-ratio:16/8;background:linear-gradient(160deg,#243532,#1C1916 50%,#3a2a22)}
.still-c{aspect-ratio:16/12;background:linear-gradient(150deg,#2c2430,#1C1916 48%,#24312e)}
.film-body{padding:.9rem 1rem 1rem}
.film-kicker{color:var(--copper);font-size:.78rem;letter-spacing:.06em;margin-bottom:.3rem}
.film-body p{color:var(--muted);font-size:.94rem;margin-top:.4rem}
.tag{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px;padding:.05rem .4rem;font-size:.75rem;color:var(--muted);margin:.45rem .35rem 0 0}
.tag.pin{color:var(--ivory);border-color:#6d5438}
.empty-note{color:var(--muted);padding:.4rem 0 1rem}
.note-strip{border-block:1px solid var(--line);background:#1C1916}
.note-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center}
.mini-wave{display:inline-flex;align-items:flex-end;gap:2px;height:18px}
.mini-wave i{display:block;width:2px;background:var(--teal);opacity:.45}
.mini-wave i:nth-child(odd){height:8px}
.mini-wave i:nth-child(even){height:15px;opacity:.9}
.note-line p{color:var(--muted)}
.rail{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.35rem;scroll-snap-type:x mandatory;scrollbar-color:#3A332C transparent}
.rail-card{flex:0 0 17.5rem;scroll-snap-align:start;background:#1C1916;border:1px solid var(--line);border-radius:6px;padding:1rem 1rem .9rem;box-shadow:var(--shadow);transition:transform .3s ease,border-color .3s ease}
.rail-card:hover{transform:translateY(-2px);border-color:#6d5438}
.tc{font-family:var(--serif);font-size:1.35rem;color:var(--copper);letter-spacing:.02em}
.rail-card h3{margin:.35rem 0}
.rail-card p{color:var(--muted);font-size:.92rem}
.notice-row{border-top:1px solid var(--line);padding:1rem 0}
.notice-row h3{margin-bottom:.25rem}
.notice-row p{color:var(--muted);max-width:46rem}
.aside-board{background:#12100E;border:1px solid var(--line);border-radius:6px;padding:1rem 1.05rem;box-shadow:var(--shadow)}
.aside-board strong{display:block;font-family:var(--serif);font-size:1.8rem;font-weight:700;color:var(--ivory);line-height:1.2}
.aside-board span{display:block;color:var(--muted);font-size:.86rem;margin-bottom:.85rem}
.news-row{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line);transition:transform .3s ease,color .3s ease}
.news-row:hover{transform:translateY(-2px);color:var(--copper)}
.news-row time{color:var(--muted);font-size:.88rem}
.news-row strong{display:block;font-weight:700;color:var(--ivory)}
.news-row:hover strong{color:var(--copper)}
.news-row em{display:block;font-style:normal;color:var(--muted);font-size:.92rem;margin-top:.15rem}
.more-line{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--line);padding-top:1.2rem}
.more-line p{color:var(--muted)}
.site-footer{border-top:1px solid var(--line);padding:2.5rem 0 2.8rem;background:#1C1916;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:1.6rem}
.foot-brand{margin-top:.8rem;max-width:36rem;color:var(--muted)}
.foot-links{display:flex;flex-direction:column;gap:.35rem;margin-top:.35rem}
.foot-links a:hover{color:var(--ivory)}
.site-footer p{color:var(--muted)}
@keyframes playmove{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@keyframes wave{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:1024px){
.footer-grid{grid-template-columns:1fr 1fr}
.footer-grid div:first-child{grid-column:1/-1}
}
@media(max-width:768px){
.menu-btn{display:inline-flex}
.nav-bar{flex-wrap:wrap}
.nav-links{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding:0 0 .7rem}
.nav-links.open{display:flex}
.nav-links a{width:100%;padding:.7rem 0}
.section{padding:3.2rem 0}
.section-head{flex-direction:column;align-items:flex-start}
.note-line{grid-template-columns:1fr}
.news-row{grid-template-columns:1fr;gap:.2rem}
.footer-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.edit-side .btn{width:100%}
.more-line{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
.logo-text{font-size:.92rem}
.container{width:min(1120px,calc(100% - 1.4rem))}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}