/* roulang page: index */
:root{
  --bg:#14110F;
  --panel:#221C18;
  --paper:#F4EFE6;
  --paper-card:#FFFDF8;
  --ink:#F3EEE6;
  --muted:#A3988C;
  --ink-dark:#2A241F;
  --muted-dark:#5C534A;
  --amber:#D4893A;
  --amber-hover:#E0A15A;
  --amber-deep:#A86520;
  --teal:#3E6B66;
  --brick:#8C3A32;
  --line:#3A322C;
  --line-soft:#D9D0C3;
  --btn:#1A140F;
  --shadow:0 6px 0 rgba(0,0,0,.28);
  --shadow-soft:0 6px 0 rgba(42,36,31,.18);
  --radius:2px;
  --header:64px;
  --gap:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;
  line-height:1.75;
  padding-top:var(--header);
}
body.is-locked{padding-top:0}
html.preok body.is-locked{padding-top:var(--header)}
body.age-ok{padding-top:var(--header)}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.num{font-family:ui-monospace,"PingFang SC","Microsoft YaHei",sans-serif;font-variant-numeric:tabular-nums}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}
body.is-locked header,
body.is-locked main,
body.is-locked footer{display:none}
html.preok body.is-locked header{display:block}
html.preok body.is-locked main{display:block}
html.preok body.is-locked footer{display:block}
html.preok #age-gate{display:none}
body.age-ok #age-gate{display:none}
#age-gate{
  position:fixed;
  inset:0;
  z-index:80;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.age-panel{width:min(440px,100%);text-align:left}
.age-logo{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--ink);font-size:20px;font-weight:700;letter-spacing:.02em}
.age-panel p{color:var(--muted);margin:0 0 18px}
.age-actions{display:flex;flex-direction:column;gap:10px}
.age-stop{color:var(--ink);border-left:3px solid var(--brick);padding-left:12px}
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:40;
  height:var(--header);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.head-bar{height:var(--header);display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;white-space:nowrap;min-height:44px}
.logo svg,.ico{display:block;flex:none}
nav{display:flex;align-items:center;gap:8px;flex:1}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-drop>span{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  color:var(--muted);
  background:transparent;
  border:0;
}
.nav-drop>span{cursor:default}
.nav-links>li>a:hover,.nav-drop:hover>span,.nav-links>li>a:focus-visible{color:var(--ink)}
.nav-links>li>a.is-on{color:var(--amber)}
.submenu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:180px;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:6px;
  z-index:45;
}
.nav-drop:hover .submenu,.nav-drop:focus-within .submenu{display:block}
.submenu a{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink)}
.submenu a:hover{background:#2A241F;color:var(--amber-hover)}
.head-cta{display:flex;gap:8px;margin-left:auto}
.nav-toggle,.nav-close{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);min-width:44px;min-height:44px;border-radius:var(--radius)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .15s ease,transform .15s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;
  font-weight:600;
}
.btn-primary{background:var(--amber);color:var(--btn)}
.btn-primary:hover{background:var(--amber-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--teal)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-hover);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
main{padding:var(--gap) 0 48px;display:flex;flex-direction:column;gap:var(--gap)}
main>section{padding:4px 0}
.paper{background:var(--paper);color:var(--ink-dark);padding:32px 0}
.paper .muted,.paper .lead{color:var(--muted-dark)}
h1{font-size:40px;line-height:1.25;font-weight:700;letter-spacing:.01em;margin:0 0 14px}
h2{font-size:26px;line-height:1.35;font-weight:700;padding-left:12px;border-left:3px solid var(--amber);margin:0 0 16px}
h3{font-size:18px;line-height:1.45;font-weight:700;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 18px;max-width:68em}
.prose p{margin:0 0 .85em}
.prose p:last-child{margin-bottom:0}
.board-head{margin-bottom:18px}
.stat-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.stat{
  grid-column:span 3;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--amber);
  box-shadow:var(--shadow);
  padding:14px 14px 12px;
  min-height:132px;
}
.stat b{display:block;font-size:34px;line-height:1.1;color:var(--amber);font-weight:700;margin-bottom:8px}
.stat span{display:block;color:var(--ink);font-size:14px}
.stat small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 10px;
  border:1px solid var(--teal);
  border-radius:var(--radius);
  color:var(--ink);
  font-size:14px;
}
.tag:hover{border-color:var(--amber);color:var(--amber-hover)}
.split{display:grid;grid-template-columns:8fr 4fr;gap:12px}
.zone{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px 18px 16px;min-height:220px;display:flex;flex-direction:column}
.zone-wide{background:#241C16}
.zone-narrow{background:#1A2422}
.film{height:72px;border:1px solid var(--line);background:#100E0C;position:relative;margin-bottom:14px;display:flex;align-items:flex-end}
.film::before,.film::after{content:"";position:absolute;top:0;bottom:0;width:10px;background:repeating-linear-gradient(to bottom,#14110F 0 6px,transparent 6px 12px)}
.film::before{left:0}.film::after{right:0}
.film i{display:block;height:6px;width:100%}
.bar-amber{background:var(--amber)}
.bar-teal{background:var(--teal)}
.zone p{color:var(--muted);flex:1}
.zone .btn{align-self:flex-start;margin-top:12px}
.matrix{border-top:1px solid var(--line)}
.m-row{display:grid;grid-template-columns:220px 1fr 88px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.m-row strong{font-weight:700}
.m-row em{font-style:normal;color:var(--muted);font-size:14px}
.scale{height:10px;background:#100E0C;border:1px solid var(--line);position:relative}
.scale i{display:block;height:100%;background:var(--amber)}
.scale.teal i{background:var(--teal)}
.scene-list{border-top:1px solid var(--line-soft)}
.scene-list a,.scene-list .row{
  display:grid;
  grid-template-columns:140px 1fr auto;
  gap:12px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  min-height:72px;
}
.scene-list a:hover{color:var(--amber-deep)}
.kicker{color:var(--amber-deep);font-weight:700}
.cmp{border:1px solid var(--line);background:var(--panel)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:120px repeat(3,1fr);gap:10px;align-items:center;padding:12px 14px}
.cmp-head{color:var(--muted);border-bottom:1px solid var(--line);font-size:14px}
.cmp-row{border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.hbar{display:flex;align-items:center;gap:8px;min-height:36px}
.hbar span{flex:1;height:8px;background:#100E0C;border:1px solid var(--line);position:relative}
.hbar span i{position:absolute;left:0;top:0;bottom:0;background:var(--amber)}
.hbar.alt i{background:var(--teal)}
.hbar b{font-weight:600;font-size:13px;min-width:42px}
.ring-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ring-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:16px 12px;display:flex;gap:12px;align-items:center}
.ring{width:76px;height:76px;flex:none}
.ring text{font-family:ui-monospace,"PingFang SC",sans-serif;font-size:16px;fill:var(--ink)}
.ring-card p{color:var(--muted);font-size:14px;margin:0}
.miles{display:flex;gap:0;overflow-x:auto;padding-bottom:6px}
.miles li{min-width:180px;flex:1;padding:14px 14px 8px;border-top:3px solid var(--amber);background:var(--panel);border-right:1px solid var(--line);position:relative}
.miles li:last-child{border-right:0}
.miles b{display:block;font-size:28px;color:var(--amber);line-height:1.1}
.miles span{display:block;margin-top:6px;font-weight:700}
.miles small{display:block;color:var(--muted)}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.score-card{
  scroll-snap-align:start;
  min-width:280px;
  max-width:320px;
  flex:0 0 300px;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  background:var(--paper-card);
  color:var(--ink-dark);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:12px;
}
.score-side{background:#14110F;color:var(--amber);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:96px;border-left:3px solid var(--teal)}
.score-side b{font-size:26px;line-height:1}
.score-side small{color:var(--muted);font-size:12px}
.score-card h3{font-size:16px}
.score-card p{color:var(--muted-dark);font-size:14px;margin:0}
.score-card a:hover{color:var(--amber-deep)}
.meta-line{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{border:1px solid var(--teal);padding:0 6px;min-height:24px;display:inline-flex;align-items:center;font-size:12px;color:var(--teal)}
.news{border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:108px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.news time{color:var(--amber);font-size:14px}
.news a{font-weight:700}
.news a:hover{color:var(--amber-hover)}
.news p{color:var(--muted);margin:4px 0 0;font-size:14px}
.assure{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.assure li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.mark{width:40px;height:40px;border:1px solid var(--teal);display:flex;align-items:center;justify-content:center;color:var(--amber)}
.assure p{color:var(--muted);margin:0}
.qa{display:flex;flex-direction:column;gap:10px}
.qa article{background:var(--panel);border:1px solid var(--line);padding:12px 14px}
.qa h3{font-size:16px;margin-bottom:6px}
.qa p{color:var(--muted);margin:0}
.faq details{border-bottom:1px solid var(--line-soft);padding:8px 0}
.faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg);margin-right:10px;flex:none}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{color:var(--muted-dark);padding:0 0 12px 18px;margin:0}
.picks{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.picks article{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.picks .idx{color:var(--amber);font-size:22px}
.picks a{font-weight:700;font-size:18px}
.picks a:hover{color:var(--amber-hover)}
.picks p{color:var(--muted);margin:6px 0 0}
.form-block{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-weight:700}
input[type="text"],textarea{
  width:100%;
  background:#100E0C;
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-height:44px;
  padding:8px 10px;
  color:var(--ink);
}
textarea{min-height:120px;resize:vertical;line-height:1.75}
input[type="text"]:hover,textarea:hover{border-color:var(--teal)}
input.is-error,textarea.is-error{border-color:var(--brick)}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--line);background:#100E0C}
.radios label:hover{border-color:var(--teal)}
.radios input{accent-color:var(--amber)}
.check{display:flex;align-items:flex-start;gap:8px;min-height:44px}
.check input{margin-top:6px;accent-color:var(--amber);width:16px;height:16px}
.err{color:var(--brick);font-size:13px;min-height:1.2em;margin:0}
.form-done{display:none;border-left:3px solid var(--teal);padding:8px 12px;margin-bottom:12px;color:var(--ink)}
.form-done.show{display:block}
.note-box{border-left:3px solid var(--amber);padding:4px 0 4px 12px;margin-bottom:16px}
footer{border-top:1px solid var(--line);padding:28px 0 36px;background:#100E0C}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr 1fr;gap:18px}
footer h2{font-size:16px;border-left-width:3px;margin-bottom:8px}
footer p,footer a{color:var(--muted);font-size:14px}
footer a{display:inline-flex;min-height:36px;align-items:center}
footer a:hover{color:var(--amber-hover)}
.legal{margin-top:18px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:12px}
@media (max-width:1100px){
  h1{font-size:34px}
  .stat{grid-column:span 6}
  .ring-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gap:16px;--header:56px}
  .container{width:min(1120px,calc(100% - 32px))}
  h1{font-size:28px}
  h2{font-size:22px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  nav{
    display:none;
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:60;
    flex-direction:column;
    align-items:stretch;
    padding:72px 20px 20px;
    overflow:auto;
  }
  nav.open{display:flex}
  .nav-close{display:inline-flex;position:absolute;top:10px;right:16px}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links>li>a,.nav-drop>span{width:100%;padding:0}
  .submenu{display:block;position:static;border:0;box-shadow:none;background:transparent;padding:0 0 8px 12px}
  .head-cta{flex-direction:column;width:100%;margin:auto 0 0}
  .head-cta .btn{width:100%}
  .stat,.ring-card{grid-column:span 12}
  .ring-grid{grid-template-columns:1fr}
  .split,.form-grid,.foot-grid,.picks article,.news li,.m-row,.scene-list a{grid-template-columns:1fr}
  .m-row{gap:8px}
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;gap:8px}
  .scene-list a{gap:4px}
  .score-card{min-width:240px;flex-basis:86%}
  .paper{padding:22px 0}
}
@media (max-width:520px){
  .stat b{font-size:28px}
  .miles li{min-width:150px}
  .logo{font-size:14px}
  .age-logo{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn-primary:hover,.btn-ghost:hover{transition:none;transform:none}
}

/* roulang page: category1 */
:root{
 --bg:#14110F;
 --panel:#221C18;
 --paper:#F4EFE6;
 --paper-card:#FFFDF8;
 --ink:#F3EEE6;
 --muted:#A3988C;
 --ink-dark:#2A241F;
 --muted-dark:#5C534A;
 --amber:#D4893A;
 --amber-hover:#E0A15A;
 --amber-deep:#A86520;
 --teal:#3E6B66;
 --brick:#8C3A32;
 --line:#3A322C;
 --line-soft:#D9D0C3;
 --btn:#1A140F;
 --shadow:0 6px 0 rgba(0,0,0,.28);
 --shadow-soft:0 6px 0 rgba(42,36,31,.18);
 --radius:2px;
 --header:64px;
 --gap:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--bg);
 color:var(--ink);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
 font-size:16px;
 line-height:1.75;
 padding-top:var(--header);
}
body.is-locked{padding-top:0}
html.preok body.is-locked{padding-top:var(--header)}
body.age-ok{padding-top:var(--header)}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 .85em}
h1,h2,h3{font-weight:700;line-height:1.35;text-align:left}
h1{font-size:40px;margin:0 0 14px}
h2{
 font-size:28px;
 margin:0 0 1.15em;
 padding-left:12px;
 border-left:3px solid var(--amber);
}
h3{font-size:18px;margin:0 0 8px}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}
body.is-locked header,
body.is-locked main,
body.is-locked footer{display:none}
html.preok body.is-locked header,
html.preok body.is-locked main,
html.preok body.is-locked footer{display:block}
html.preok #age-gate{display:none}
body.age-ok #age-gate{display:none}
#age-gate{
 position:fixed;
 inset:0;
 z-index:80;
 background:var(--bg);
 display:flex;
 align-items:center;
 justify-content:center;
 padding:24px;
}
.age-box{
 width:min(520px,100%);
 background:var(--panel);
 border:1px solid var(--line);
 box-shadow:var(--shadow);
 border-radius:var(--radius);
 padding:28px 24px 22px;
}
.age-logo,.logo{
 display:flex;
 align-items:center;
 gap:10px;
 color:var(--ink);
 font-weight:700;
 letter-spacing:.02em;
}
.age-logo{font-size:20px;margin-bottom:18px}
.age-box p{color:var(--muted)}
.age-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}
.age-deny{color:var(--brick);min-height:1.5em}
header{
 position:fixed;
 top:0;left:0;right:0;
 z-index:40;
 height:var(--header);
 background:#14110F;
 border-bottom:1px solid var(--line);
}
.head-bar{
 height:100%;
 display:flex;
 align-items:center;
 gap:16px;
}
.logo{font-size:16px;white-space:nowrap;min-height:44px}
.logo svg,.ico{display:block;flex:none}
#site-nav{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-drop>span{
 display:inline-flex;
 align-items:center;
 min-height:44px;
 padding:0 12px;
 color:var(--muted);
 background:transparent;
 border:0;
}
.nav-drop>span{cursor:default}
.nav-links>li>a:hover,.nav-drop:hover>span,.nav-links>li>a:focus-visible,.nav-drop.is-on>span{color:var(--ink)}
.nav-links>li>a.is-on,.nav-drop.is-on>span{color:var(--amber)}
.submenu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 min-width:188px;
 background:var(--panel);
 border:1px solid var(--line);
 box-shadow:var(--shadow);
 padding:6px;
 z-index:45;
}
.nav-drop:hover .submenu,.nav-drop:focus-within .submenu{display:block}
.submenu a{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink)}
.submenu a:hover,.submenu a:focus-visible{background:#2A241F;color:var(--amber-hover)}
.submenu a.is-on{color:var(--amber)}
.head-cta{display:flex;gap:8px;margin-left:auto}
.nav-toggle,.nav-close{
 display:none;
 background:transparent;
 border:1px solid var(--line);
 color:var(--ink);
 min-width:44px;
 min-height:44px;
 border-radius:var(--radius);
 align-items:center;
 justify-content:center;
}
.nav-toggle:hover,.nav-close:hover{border-color:var(--amber);color:var(--amber-hover)}
.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:44px;
 padding:0 16px;
 border-radius:var(--radius);
 border:1px solid transparent;
 transition:background .15s ease,transform .15s ease,color .15s ease,border-color .15s ease;
 white-space:nowrap;
 font-weight:600;
 text-decoration:none;
}
.btn-primary{background:var(--amber);color:var(--btn)}
.btn-primary:hover{background:var(--amber-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--teal)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-hover);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
a:focus-visible,button:focus-visible,input:focus-visible{
 outline:2px solid var(--amber);
 outline-offset:2px;
}
main{
 padding:var(--gap) 0 56px;
 display:flex;
 flex-direction:column;
 gap:var(--gap);
}
main>section{padding:18px 0}
.lead{color:var(--muted);margin:0;max-width:42em}
.cat-head{padding-top:8px}
.split{
 display:grid;
 grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
 gap:22px;
 align-items:end;
}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.chip-btn{
 min-height:44px;
 padding:0 12px;
 background:transparent;
 color:var(--ink);
 border:1px solid var(--teal);
 border-radius:var(--radius);
}
.chip-btn:hover{border-color:var(--amber);color:var(--amber-hover)}
.chip-btn.is-on{background:var(--amber);border-color:var(--amber);color:var(--btn)}
.board-sec{background:transparent}
#list-request{background:var(--panel);padding:26px 0}
.sec-head{margin-bottom:16px}
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.board{
 display:grid;
 grid-template-columns:84px 1fr;
 gap:14px;
 align-items:center;
 background:#1B1714;
 border:1px solid var(--line);
 box-shadow:var(--shadow);
 border-radius:var(--radius);
 padding:14px;
 transition:transform .15s ease;
}
#list-request .board{background:#2A241F}
.board:hover{transform:translateY(-1px)}
.ring{position:relative;width:72px;height:72px;flex:none}
.ring svg{width:72px;height:72px;transform:rotate(-90deg);display:block}
.ring .track{fill:none;stroke:#3A322C;stroke-width:3}
.ring .val{fill:none;stroke:var(--amber);stroke-width:3}
.ring b{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-variant-numeric:tabular-nums;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:16px;
 color:var(--ink);
}
.dur{
 margin:0;
 font-variant-numeric:tabular-nums;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 color:var(--amber);
 font-size:14px;
}
.meta-line{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{
 border:1px solid var(--teal);
 padding:0 6px;
 min-height:24px;
 display:inline-flex;
 align-items:center;
 font-size:12px;
 color:#D5E4E1;
 border-radius:var(--radius);
}
.region-bar{
 display:block;
 height:4px;
 width:72px;
 margin-top:10px;
 background:linear-gradient(90deg,var(--amber) 0 70%,var(--teal) 70% 100%);
}
.film{
 display:flex;
 gap:3px;
 margin-top:8px;
}
.film i{
 width:8px;
 height:10px;
 background:var(--teal);
 display:block;
 box-shadow:inset 0 0 0 1px #1A140F;
}
.empty{color:var(--muted);margin:12px 0 0}
.scale-sec{padding:8px 0 4px}
.scale-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:18px;
 background:var(--panel);
 border:1px solid var(--line);
 box-shadow:var(--shadow);
 padding:16px;
}
.scale strong{display:block;margin-bottom:8px}
.tick{display:grid;grid-template-columns:92px 1fr 48px;gap:8px;align-items:center;margin:8px 0;color:var(--muted);font-size:14px}
.bar{height:8px;background:#3A322C;position:relative}
.bar i{display:block;height:100%;background:var(--amber);width:0}
.bar.teal i{background:var(--teal)}
.tick em{font-style:normal;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);text-align:right}
.time-sec{background:var(--panel);padding:26px 0}
.time-list{list-style:none;margin:0;padding:0 0 0 0;border-left:3px solid var(--amber)}
.time-list li{
 display:grid;
 grid-template-columns:92px 1fr auto;
 gap:14px;
 align-items:center;
 padding:14px 0 14px 16px;
 border-bottom:1px solid var(--line);
 min-height:64px;
}
.time-list time{
 font-variant-numeric:tabular-nums;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 color:var(--amber);
}
.time-list a{font-weight:700}
.time-list a:hover{color:var(--amber-hover)}
.time-list span{color:var(--muted);font-size:14px}
.paper{background:var(--paper);color:var(--ink-dark)}
.paper h2,.paper h3,.paper strong{color:var(--ink-dark)}
.paper .lead,.paper p{color:var(--ink-dark)}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.note-grid p{
 background:var(--paper-card);
 border:1px solid var(--line-soft);
 box-shadow:var(--shadow-soft);
 padding:16px 16px 8px;
 margin:0;
}
#list-more{padding-top:8px}
.more-foot{margin:16px 0 0}
.qa{display:flex;flex-direction:column;gap:10px}
.qa article{
 background:#1B1714;
 border:1px solid var(--line);
 padding:14px 16px 10px;
}
.qa h3{font-size:16px;margin-bottom:6px}
.qa p{color:var(--muted);margin:0}
.form-sec{padding:32px 0 12px}
.form-narrow{max-width:560px}
.field{margin:0 0 14px}
.field label{display:block;margin-bottom:6px;font-weight:700}
.field input[type="text"]{
 width:100%;
 min-height:44px;
 background:#1A1613;
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:0 12px;
 color:var(--ink);
}
.field input[type="text"]:hover{border-color:var(--teal)}
.field.is-error input{border-color:var(--brick)}
.check{
 display:flex;
 align-items:center;
 gap:8px;
 min-height:44px;
 color:var(--ink);
}
.check input{width:18px;height:18px;accent-color:var(--amber)}
.err{color:var(--brick);font-size:13px;min-height:1.4em;margin:4px 0 0}
.form-ok{color:var(--amber-hover);margin-top:10px}
footer{
 border-top:1px solid var(--line);
 padding:28px 0 40px;
 color:var(--muted);
 background:#100E0C;
}
.foot-grid{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.2fr;gap:18px}
footer strong{color:var(--ink);display:block;margin-bottom:8px;font-size:16px}
footer a{display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--amber-hover)}
.copy{margin:18px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:1100px){
 h1{font-size:34px}
 .split{grid-template-columns:1fr}
 .filters{justify-content:flex-start}
 .note-grid,.scale-row{grid-template-columns:1fr}
 .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 :root{--gap:16px;--header:56px}
 .container{width:min(1120px,calc(100% - 28px))}
 h1{font-size:30px}
 h2{font-size:22px}
 .nav-toggle{display:inline-flex;margin-left:auto}
 #site-nav{
 display:none;
 position:fixed;
 inset:0;
 z-index:60;
 background:var(--bg);
 flex-direction:column;
 align-items:stretch;
 padding:12px 16px 20px;
 gap:8px;
 overflow:auto;
 }
 #site-nav.is-open{display:flex}
 .nav-close{display:inline-flex;align-self:flex-end}
 .nav-links{flex-direction:column;align-items:stretch;gap:0}
 .nav-links>li>a,.nav-drop>span{padding:0 4px}
 .submenu{display:block;position:static;border:0;box-shadow:none;background:transparent;padding:0 0 8px 8px;min-width:0}
 .head-cta{margin-top:auto;flex-direction:column;width:100%}
 .head-cta .btn{width:100%}
 .board-grid{grid-template-columns:1fr}
 .time-list li{grid-template-columns:72px 1fr;gap:8px}
 .time-list span{grid-column:2}
 .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
 .chip-btn{flex:none}
 .foot-grid{grid-template-columns:1fr}
 .logo{font-size:14px}
}
@media (max-width:520px){
 h1{font-size:26px}
 .board{grid-template-columns:72px 1fr;padding:12px}
 .ring,.ring svg{width:64px;height:64px}
 .age-actions{flex-direction:column}
 .age-actions .btn{width:100%}
 .tick{grid-template-columns:78px 1fr 42px}
}

/* roulang page: category2 */
:root{
 --bg:#14110F;
 --panel:#221C18;
 --paper:#F4EFE6;
 --paper-card:#FFFDF8;
 --ink:#F3EEE6;
 --muted:#A3988C;
 --ink-dark:#2A241F;
 --muted-dark:#5C534A;
 --amber:#D4893A;
 --amber-hover:#E0A15A;
 --amber-deep:#A86520;
 --teal:#3E6B66;
 --brick:#8C3A32;
 --line:#3A322C;
 --line-soft:#D9D0C3;
 --btn:#1A140F;
 --shadow:0 6px 0 rgba(0,0,0,.28);
 --shadow-soft:0 6px 0 rgba(42,36,31,.18);
 --radius:2px;
 --header:64px;
 --gap:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--bg);
 color:var(--ink);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
 font-size:16px;
 line-height:1.75;
 padding-top:var(--header);
}
body.is-locked{padding-top:0}
html.preok body.is-locked{padding-top:var(--header)}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
p{margin:0 0 .85em}
h1,h2,h3{font-weight:700;line-height:1.35;text-align:left}
h1{font-size:40px;margin:0 0 14px}
h2{
 font-size:26px;
 margin:0 0 18px;
 padding-left:12px;
 border-left:3px solid var(--amber);
}
h3{font-size:18px;margin:0 0 8px}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}
body.is-locked header,body.is-locked main,body.is-locked footer{display:none}
html.preok body.is-locked header,html.preok body.is-locked main,html.preok body.is-locked footer{display:block}
html.preok #age-gate{display:none}
body.age-ok #age-gate{display:none}
.num,time,.bar-row b,.v-scale b,.meta span{
 font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",monospace;
 font-variant-numeric:tabular-nums;
}
header{
 position:fixed;
 top:0;left:0;right:0;
 z-index:40;
 height:var(--header);
 background:var(--bg);
 border-bottom:1px solid var(--line);
}
.head-bar{display:flex;align-items:center;height:100%;gap:16px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;line-height:1.2;white-space:nowrap;min-height:44px}
.logo svg{display:block;flex:none}
nav{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-drop>span{
 display:inline-flex;
 align-items:center;
 min-height:44px;
 padding:0 12px;
 color:var(--muted);
 background:transparent;
 border:0;
 line-height:1.2;
}
.nav-drop>span{cursor:default}
.nav-links>li>a:hover,.nav-drop:hover>span,.nav-links>li>a:focus-visible{color:var(--ink)}
.nav-links>li>a.is-on,.submenu a.is-on{color:var(--amber)}
.submenu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 min-width:180px;
 background:var(--panel);
 border:1px solid var(--line);
 box-shadow:var(--shadow);
 padding:6px;
 z-index:45;
}
.nav-drop:hover .submenu,.nav-drop:focus-within .submenu{display:block}
.submenu a{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink)}
.submenu a:hover,.submenu a:focus-visible{background:#2A241F;color:var(--amber-hover)}
.head-cta{display:flex;gap:8px;margin-left:auto}
.nav-toggle,.nav-close{
 display:none;
 background:transparent;
 border:1px solid var(--line);
 color:var(--ink);
 min-width:44px;
 min-height:44px;
 border-radius:var(--radius);
 align-items:center;
 justify-content:center;
}
.nav-toggle:hover,.nav-close:hover{border-color:var(--amber);color:var(--amber-hover)}
.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-height:44px;
 padding:0 16px;
 border-radius:var(--radius);
 border:1px solid transparent;
 transition:background .15s ease,transform .15s ease,color .15s ease,border-color .15s ease;
 white-space:nowrap;
 font-weight:600;
 line-height:1.2;
 text-align:center;
}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
 outline:2px solid var(--amber);
 outline-offset:2px;
}
.btn-primary{background:var(--amber);color:var(--btn)}
.btn-primary:hover{background:var(--amber-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--teal)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-hover);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.paper .btn-ghost{color:var(--ink-dark)}
main{padding:var(--gap) 0 48px;display:flex;flex-direction:column;gap:var(--gap)}
main>section{padding:22px 0}
.panel-band{background:var(--panel);box-shadow:var(--shadow)}
.paper{background:var(--paper);color:var(--ink-dark)}
.paper .lead,.paper .muted{color:var(--muted-dark)}
.lead{color:var(--muted);margin:0 0 18px;max-width:68em}
.page-head .container{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:stretch}
.head-copy{grid-column:span 8}
.film{
 grid-column:span 4;
 border:1px solid var(--line);
 background:#1A1613;
 min-height:148px;
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:8px;
 padding:12px;
 box-shadow:var(--shadow);
}
.film span{background:#2A241F;border-top:8px solid var(--amber);min-height:120px}
.film span:nth-child(2){border-top-color:var(--teal)}
.film span:nth-child(3){border-top-color:var(--brick)}
.switch{display:flex;gap:8px;margin-top:8px}
.switch button{
 min-width:72px;
 min-height:44px;
 padding:0 16px;
 background:transparent;
 color:var(--ink);
 border:1px solid var(--teal);
 border-radius:var(--radius);
 line-height:1.2;
 transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.switch button:hover{transform:translateY(-1px);border-color:var(--amber)}
.switch button.is-on{background:var(--amber);color:var(--btn);border-color:var(--amber)}
.switch button:active{transform:translateY(0)}
.tl-item{
 display:grid;
 grid-template-columns:92px 1fr;
 gap:16px;
 align-items:start;
 padding:16px 0 16px 18px;
 border-bottom:1px solid var(--line);
 position:relative;
}
.tl-item:last-child{border-bottom:0}
.tl-item::before{
 content:"";
 position:absolute;
 left:0;
 top:24px;
 width:8px;
 height:8px;
 background:var(--amber);
}
.tl-item[data-set="kr"]::before{background:var(--teal)}
.tl-item time{color:var(--amber);font-size:15px;padding-top:2px}
.tl-item[data-set="kr"] time{color:#8FBFB8}
.tl-item h3{font-size:18px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.meta span{
 border:1px solid var(--teal);
 min-height:26px;
 padding:0 8px;
 display:inline-flex;
 align-items:center;
 font-size:13px;
 color:#C9E2DE;
}
.panel-band .meta span{color:#C9E2DE}
.empty{color:var(--muted);border:1px dashed var(--line);padding:16px;margin:0}
.dist-block+.dist-block{margin-top:22px;padding-top:8px}
.bar-row{
 display:grid;
 grid-template-columns:52px 1fr 64px;
 gap:10px;
 align-items:center;
 margin:0 0 12px;
}
.bar-row span{color:var(--muted)}
.track{height:10px;background:#1A1613;border:1px solid var(--line)}
.fill{height:100%;display:block}
.fill-amber{background:var(--amber)}
.fill-teal{background:var(--teal)}
.bar-row b{color:var(--ink);font-weight:700;text-align:right}
.scale-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.scale-card{border-top:1px solid var(--line);padding-top:12px}
.v-scale{
 display:flex;
 align-items:flex-end;
 gap:22px;
 height:200px;
 margin:8px 0 0;
}
.v-scale li{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-end;
 height:100%;
 min-width:64px;
 gap:6px;
}
.v-scale i{display:block;width:28px;background:var(--amber)}
.scale-card.kr i{background:var(--teal)}
.v-scale b{font-size:18px;line-height:1}
.v-scale .tick{color:var(--muted);font-size:13px;font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
.art{
 display:grid;
 grid-template-columns:92px 1fr;
 gap:16px;
 padding:18px 0;
 border-bottom:1px solid var(--line-soft);
}
.art:last-child{border-bottom:0}
.kicker{color:var(--amber-deep);font-size:13px;margin:0}
.art h3{font-size:18px}
.art a:hover{color:var(--amber-deep)}
.art p{margin:0;color:var(--muted-dark)}
.more-wrap{margin:18px 0 0}
.faq details{border-bottom:1px solid var(--line-soft);padding:4px 0 8px}
.faq summary{
 cursor:pointer;
 min-height:52px;
 display:flex;
 align-items:center;
 font-weight:700;
 list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber-deep)}
.faq details p{margin:0 0 .85em;max-width:68em}
.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.note-grid h3{font-size:16px}
.note-grid p{margin:0;color:var(--muted-dark)}
.line-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.line-form label{flex:1 1 100%;font-weight:700}
.line-form input{
 background:#1A1613;
 border:1px solid var(--line);
 color:var(--ink);
 min-height:44px;
 padding:0 12px;
 border-radius:var(--radius);
 width:min(420px,100%);
}
.line-form input.is-error{border-color:var(--brick)}
.field-error{flex:1 1 100%;color:var(--brick);margin:0}
.form-ok{margin:12px 0 0;color:var(--amber-hover)}
footer{
 border-top:1px solid var(--line);
 background:#100E0C;
 padding:28px 0 20px;
}
.foot{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:18px}
.foot strong{display:block;margin-bottom:8px}
.foot p{margin:0;color:var(--muted)}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.foot a:hover{color:var(--amber-hover)}
.copy{width:min(1120px,calc(100% - 40px));margin:18px auto 0;color:var(--muted);font-size:14px}
.age-gate{
 position:fixed;
 inset:0;
 z-index:80;
 background:var(--bg);
 display:flex;
 align-items:center;
 justify-content:center;
 padding:24px;
}
.age-card{
 width:min(520px,100%);
 background:var(--panel);
 border:1px solid var(--line);
 box-shadow:var(--shadow);
 padding:28px 22px;
}
.age-logo{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:20px;font-weight:700;line-height:1.3}
.age-card h1{font-size:28px}
.age-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.deny{color:var(--brick);margin:12px 0 0}
[hidden]{display:none !important}
@media (max-width:1100px){
 .page-head .container{grid-template-columns:1fr}
 .head-copy,.film{grid-column:auto}
 .film{min-height:96px}
 .film span{min-height:72px}
 .scale-grid,.note-grid,.foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
 :root{--header:56px;--gap:16px}
 .nav-toggle{display:inline-flex;margin-left:auto}
 #site-nav{
  display:none;
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(0,0,0,.45);
  padding:0;
 }
 #site-nav.is-open{display:block}
 #site-nav .nav-close{display:inline-flex;position:absolute;top:10px;right:12px;z-index:2}
 #site-nav .nav-links,#site-nav .head-cta{
  background:var(--bg);
 }
 #site-nav .nav-links{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(420px,100%);
  padding:64px 16px 120px;
  border-left:1px solid var(--line);
  overflow:auto;
 }
 .submenu{display:block;position:static;box-shadow:none;border:0;padding:0 0 8px 12px;background:transparent}
 .head-cta{
  position:absolute;
  right:0;bottom:0;
  width:min(420px,100%);
  margin:0;
  padding:12px 16px 16px;
  border-top:1px solid var(--line);
  flex-direction:column;
 }
 .head-cta .btn{width:100%}
 .scale-grid,.note-grid,.foot,.art,.tl-item{grid-template-columns:1fr}
 .art{gap:6px}
 .tl-item{grid-template-columns:72px 1fr}
 h1{font-size:32px}
 h2{font-size:22px}
}
@media (max-width:520px){
 .container,.copy{width:calc(100% - 28px)}
 .logo{font-size:14px}
 h1{font-size:28px}
 .v-scale{gap:12px;overflow-x:auto}
 .bar-row{grid-template-columns:44px 1fr 52px}
 .foot{grid-template-columns:1fr}
 .age-actions .btn{width:100%}
}