/* roulang page: index */
:root{--bg:#F3EFE6;--bg-alt:#E8E0D4;--surface:#FFFCF8;--ink:#1A1714;--muted:#5E564E;--line:#E4D9CC;--accent:#9C4E36;--accent-ink:#7A3B28;--pine:#314E49;--tick:#C4A27A;--radius:8px;--radius-sm:6px;--shadow:0 10px 28px rgba(26,23,20,.06);--space:96px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16.5px;line-height:1.75;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
button,input{font-family:inherit}
a{color:var(--ink);text-decoration:none}
h1,h2,h3,h4{font-family:"Noto Serif SC","Songti SC",serif;font-weight:650;letter-spacing:-.03em;color:var(--ink);margin:0}
h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.12}
h2{font-size:clamp(1.75rem,2.4vw,2.15rem);line-height:1.25}
h3{font-size:1.18rem;line-height:1.35;font-weight:650}
p{margin:0}
.skip{position:absolute;left:12px;top:-40px;background:var(--ink);color:#fff;padding:8px 12px;z-index:80;border-radius:6px}
.skip:focus{top:8px}
.container{width:100%!important;max-width:1160px!important;margin-left:auto!important;margin-right:auto!important;padding-left:20px!important;padding-right:20px!important}
.adult-bar{background:var(--surface);color:var(--muted);font-size:12px;letter-spacing:.08em;border-bottom:1px solid var(--line);min-height:28px;display:flex;align-items:center}
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{display:flex;flex-direction:column;gap:1px;min-width:0}
.logo strong{font-family:"Noto Serif SC",serif;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.logo span{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.icon-nav{border-top:1px solid var(--line)}
.icon-row{display:flex;align-items:stretch;justify-content:space-between;gap:4px;overflow-x:auto}
.icon-link{position:relative;flex:1 0 auto;min-width:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px 12px;color:var(--muted);font-size:13px;letter-spacing:.04em;background:transparent;border:0}
.icon-link svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.icon-link:hover{color:var(--accent-ink)}
.icon-link:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.icon-link.is-active{color:var(--ink)}
.icon-link.is-active::after{content:"";position:absolute;left:50%;bottom:0;width:22px;height:2px;background:var(--accent);transform:translateX(-50%)}
.section{padding:var(--space) 0;background:var(--bg)}
.section-alt{background:var(--bg-alt)}
.lead{max-width:68ch;color:var(--muted);margin-top:14px}
.kicker{font-size:12px;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:10px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.subhead{margin-top:18px;font-size:1.12rem;line-height:1.6;color:var(--ink)}
.hero-copy p.lead{color:var(--ink);max-width:62ch}
.check-list{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.check-list li{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink)}
.tick{width:16px;height:16px;border:1px solid var(--pine);color:var(--pine);display:inline-grid;place-items:center;border-radius:3px;flex:0 0 auto;margin-top:3px;font-size:11px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:15px;letter-spacing:.04em;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.btn-main{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-main:hover{background:var(--accent-ink);border-color:var(--accent-ink);transform:translateY(-1px)}
.btn-main:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--surface);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(1px)}
.btn-pine{background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.btn-pine:hover{background:#243b37;transform:translateY(-1px)}
.poster{aspect-ratio:3/4;background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.poster-block{height:42%;background:var(--pine)}
.poster-rule{height:1px;background:var(--tick);width:46%;margin:18px 0 0 22px}
.poster-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.poster-kicker{font-size:12px;letter-spacing:.18em;color:var(--muted)}
.poster-title{font-family:"Noto Serif SC",serif;font-size:1.7rem;line-height:1.25}
.poster-meta{margin-top:auto;font-size:13px;letter-spacing:.08em;color:var(--accent-ink)}
.stat-line{margin-top:18px;padding-top:12px;border-top:1px solid var(--tick);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.head-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:28px}
.head-row .lead{margin-top:10px}
.feature-layout{display:grid;grid-template-columns:minmax(0,8fr) minmax(260px,4fr);gap:22px;align-items:start}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.offset{margin-top:28px}
.card h3{margin-bottom:8px}
.card p,.scene-copy p,.anno p{color:var(--muted);font-size:15px}
.index-card{padding:22px 22px 10px;position:sticky;top:132px}
.index-card ol{list-style:none;margin:16px 0 0;padding:0}
.index-card li{border-top:1px solid var(--line);padding:12px 0}
.index-card a{display:flex;justify-content:space-between;gap:12px;color:var(--pine)}
.index-no{font-size:12px;letter-spacing:.12em;color:var(--muted)}
.entry-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.entry{display:flex;flex-direction:column;min-height:280px;justify-content:space-between;padding:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);transition:transform .2s ease,box-shadow .2s ease}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.entry:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.entry-b{background:#F7F1E8}
.entry-tag{font-size:12px;letter-spacing:.14em;color:var(--accent-ink)}
.entry h3{font-size:clamp(1.6rem,3vw,2.2rem);margin:12px 0}
.scene-band{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.scene-band:last-child{border-bottom:1px solid var(--line)}
.scene-no{font-family:"Noto Serif SC",serif;font-size:2rem;line-height:1;color:var(--accent)}
.points{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;letter-spacing:.06em}
.badge-pine{background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.badge-accent{background:transparent;color:var(--accent-ink);border-color:var(--accent)}
.demo-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(240px,5fr);gap:28px;align-items:center}
.browser{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.browser-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:#F7F3EC}
.dot{width:8px;height:8px;border-radius:50%;background:var(--tick)}
.addr{margin-left:8px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.screen{display:grid;grid-template-columns:1.2fr .8fr;min-height:320px}
.zone{padding:18px;border-right:1px solid var(--line);background:#E7EFEA}
.zone:last-child{border-right:0;background:#F6E7DF}
.zone strong{display:block;font-family:"Noto Serif SC",serif;font-size:1.3rem;margin-bottom:8px}
.anno{display:flex;flex-direction:column;gap:14px}
.floor{display:grid;grid-template-columns:52px 1fr;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--tick)}
.floor b{font-size:12px;letter-spacing:.08em;color:var(--accent-ink)}
.update-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(240px,5fr);gap:28px}
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--tick)}
.timeline li{padding:0 0 22px 18px;position:relative}
.timeline li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);position:absolute;left:-4px;top:8px}
.time{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between}
.metric b{font-family:"Noto Serif SC",serif;font-size:2rem;font-weight:650;line-height:1}
.metric span{font-size:13px;letter-spacing:.08em;color:var(--muted)}
.case-layout{display:grid;grid-template-columns:minmax(0,8fr) minmax(240px,4fr);gap:16px;align-items:start}
.case-side{display:grid;gap:16px}
.case-main{min-height:360px;background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.case-main p,.case-main .meta{color:#E4DDD4}
.case-main h3,.case-main a{color:#F3EFE6}
.text-link{color:var(--pine);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .22s ease}
.text-link:hover{background-size:100% 1px}
.case-main .text-link{color:#F3EFE6}
.meta{font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price{padding:26px;border-radius:8px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:12px;min-height:340px}
.price strong{font-family:"Noto Serif SC",serif;font-size:2.4rem;line-height:1}
.price ul{margin:0;padding:0;list-style:none;color:var(--muted)}
.price li{padding:7px 0;border-top:1px solid var(--line)}
.price-rec{background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.price-rec li{border-color:rgba(243,239,230,.2);color:#E4DDD4}
.price-rec .badge{background:transparent;color:#F3EFE6;border-color:var(--tick)}
.family-bar{margin-top:16px;display:grid;grid-template-columns:1.4fr 2fr auto;gap:18px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-left:1px solid var(--accent);border-radius:8px;background:var(--surface)}
.review-wall{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.review{scroll-snap-align:start;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 16px 18px}
.review header{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.stars{color:var(--accent);letter-spacing:.12em}
.w-a{width:280px}.w-b{width:430px}.w-c{width:310px}.w-d{width:470px}.w-e{width:260px}.w-f{width:390px}
.koubei{display:grid;grid-template-columns:minmax(0,7fr) minmax(240px,5fr);gap:22px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:32px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
.quote q{font-family:"Noto Serif SC",serif;font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.45;quotes:none}
.member-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.member-list li{padding:16px 18px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:6px 12px}
.member-list li:last-child{border-bottom:0}
.topic-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.topic-row{display:grid;grid-template-columns:88px minmax(0,1fr) 120px 72px;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:inherit}
.topic-row:hover{background:rgba(255,252,248,.55)}
.topic-row:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.topic-row h3{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:0}
.topic-row p{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:12px;letter-spacing:.08em;color:var(--accent-ink)}
.talk-row{grid-template-columns:72px 92px minmax(0,1fr) 88px}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{cursor:pointer;list-style:none;padding:18px 4px;font-family:"Noto Serif SC",serif;font-size:1.15rem;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-family:"Noto Sans SC",sans-serif}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.faq details p{padding:0 4px 18px;color:var(--muted);max-width:78ch}
.open-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:start}
.form{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;display:grid;gap:14px}
label{display:grid;gap:6px;font-size:14px}
input[type="text"],input[type="tel"]{width:100%;min-height:44px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 12px;color:var(--ink)}
input:focus{outline:2px solid var(--pine);outline-offset:2px;border-color:var(--pine)}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff}
.form.is-error{border-color:var(--accent)}
.form.is-ok{border-color:var(--pine)}
.msg{font-size:14px;min-height:1.5em}
.msg-err{color:var(--accent-ink)}
.msg-ok{color:var(--pine)}
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding:42px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:22px}
.site-footer a{color:var(--pine)}
.site-footer a:hover{color:var(--accent-ink)}
.fine{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;letter-spacing:.04em}
@media(max-width:1024px){
.hero-grid,.feature-layout,.demo-layout,.update-layout,.case-layout,.koubei,.open-layout,.entry-grid{grid-template-columns:1fr}
.index-card{position:static}
.offset{margin-top:0}
.family-bar{grid-template-columns:1fr}
.poster{max-width:420px}
}
@media(max-width:768px){
:root{--space:56px}
.icon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto}
.icon-link{min-width:0}
.feature-grid,.price-grid,.screen,.badge-grid{grid-template-columns:1fr}
.check-list{grid-template-columns:1fr}
.topic-row,.talk-row{grid-template-columns:1fr;gap:4px;align-items:start}
.topic-row p{white-space:normal}
.foot-grid{grid-template-columns:1fr 1fr}
.head-row{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
.brand-row{min-height:64px}
.foot-grid{grid-template-columns:1fr}
.w-a,.w-b,.w-c,.w-d,.w-e,.w-f{width:min(86vw,420px)}
h1{font-size:2.4rem}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}

/* roulang page: category2 */
:root{--bg:#F3EFE6;--bg-alt:#E8E0D4;--surface:#FFFCF8;--ink:#1A1714;--muted:#5E564E;--line:#E4D9CC;--accent:#9C4E36;--accent-ink:#7A3B28;--pine:#314E49;--tick:#C4A27A;--radius:8px;--radius-sm:6px;--shadow:0 10px 28px rgba(26,23,20,.06);--space:96px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16.5px;line-height:1.75;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
button,input,summary{font-family:inherit}
a{color:var(--ink);text-decoration:none}
h1,h2,h3,p{margin:0}
h1{font-family:"Noto Serif SC",serif;font-weight:650;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.12;letter-spacing:-.03em}
h2{font-family:"Noto Serif SC",serif;font-weight:650;font-size:clamp(1.75rem,3vw,2.2rem);line-height:1.25;letter-spacing:-.02em}
h3{font-family:"Noto Serif SC",serif;font-weight:650;font-size:1.15rem;line-height:1.35}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--ink);padding:8px 12px;z-index:80;border-radius:6px}
.skip:focus{left:12px}
.container{width:100%;max-width:1160px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,239,230,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.1)}
.adult-bar{background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.12em;line-height:1.4}
.adult-bar .container{padding-top:4px;padding-bottom:4px;text-align:center}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{display:flex;flex-direction:column;gap:1px;min-width:0}
.logo strong{font-family:"Noto Serif SC",serif;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
.logo span{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.icon-nav{border-top:1px solid var(--line)}
.icon-row{display:flex;align-items:stretch;justify-content:space-between;gap:4px;overflow-x:auto}
.icon-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:72px;padding:12px 8px 14px;color:var(--ink);font-size:13px;letter-spacing:.06em;background:transparent;flex:1 0 auto}
.icon-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-link:hover{color:var(--accent-ink)}
.icon-link:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.icon-link.is-active{color:var(--accent-ink)}
.icon-link.is-active::after{content:"";position:absolute;left:50%;bottom:6px;width:18px;height:2px;background:var(--accent);transform:translateX(-50%)}
.section{padding:var(--space) 0;background:var(--bg)}
.section-alt{background:var(--bg-alt)}
.mast{padding:52px 0 36px;background:var(--bg);border-bottom:1px solid var(--line)}
.mast-grid{display:grid;grid-template-columns:64px minmax(0,1fr);gap:28px;align-items:stretch}
.vlabel{writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;letter-spacing:.32em;font-size:13px;color:var(--accent-ink);border-left:1px solid var(--tick)}
.mast-copy{min-width:0;padding:8px 0}
.kicker{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.one-line{margin-top:14px;color:var(--ink);font-size:17px;line-height:1.7;max-width:68ch}
.lead{max-width:68ch;color:var(--muted);margin-top:12px}
.head-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:28px}
.head-row .lead{margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:15px;letter-spacing:.04em;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.btn-main{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-main:hover{background:var(--accent-ink);border-color:var(--accent-ink);transform:translateY(-1px)}
.btn-main:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--surface);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(1px)}
.btn-pine{background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.btn-pine:hover{background:#243b37;transform:translateY(-1px)}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;letter-spacing:.06em}
.badge-pine{background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.badge-accent{background:transparent;color:var(--accent-ink);border-color:var(--accent)}
.tag{font-size:12px;letter-spacing:.08em;color:var(--accent-ink)}
.meta{font-size:12px;letter-spacing:.08em;color:var(--muted)}
.text-link{color:var(--pine);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .22s ease}
.text-link:hover{background-size:100% 1px}
.text-link:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.day{display:grid;grid-template-columns:132px minmax(0,1fr);gap:22px;padding:22px 0;border-top:1px solid var(--line)}
.day time{font-family:"Noto Serif SC",serif;font-size:1.35rem;line-height:1.2;color:var(--pine)}
.day time small{display:block;margin-top:6px;font-family:"Noto Sans SC",sans-serif;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.cover-mini{display:grid;grid-template-columns:168px minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:10px}
.poster{position:relative;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,#E7D3C4 0%,#F7F1E8 42%,#D5E0DB 100%);overflow:hidden;display:flex;align-items:flex-end;min-height:120px}
.poster::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.poster-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.poster-title{font-family:"Noto Serif SC",serif;font-size:1.2rem;line-height:1.3}
.poster-meta{font-size:12px;letter-spacing:.08em;color:var(--accent-ink)}
.ratio-wide{aspect-ratio:16/9;width:100%}
.floor{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:inherit}
.floor:hover{background:rgba(255,252,248,.7)}
.floor:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.floor h3{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:1.02rem}
.floor p{color:var(--muted);font-size:14px}
.more-row{display:flex;justify-content:flex-end;padding-top:18px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery .poster{min-height:0}
.scale-board{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px 28px 22px}
.scale-track{position:relative;height:4px;background:var(--line);margin:54px 12px 46px;border-radius:4px}
.scale-track i{position:absolute;top:0;height:4px;width:68%;background:var(--pine);border-radius:4px}
.tick{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center;width:88px}
.tick b{display:block;width:11px;height:11px;border-radius:2px;background:var(--surface);border:2px solid var(--pine);margin:0 auto 8px}
.tick span{display:block;font-size:12px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tick.is-now b{background:var(--accent);border-color:var(--accent)}
.tick.is-now span{color:var(--accent-ink)}
.scale-foot{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.reply-stack{display:flex;flex-direction:column;gap:12px}
.reply{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;max-width:100%}
.reply:hover{box-shadow:var(--shadow)}
.reply header{display:flex;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.reply:nth-child(2){margin-left:7%;max-width:93%}
.reply:nth-child(3){margin-right:10%;max-width:78%}
.reply:nth-child(4){margin-left:14%;max-width:86%}
.log-list{border-top:1px solid var(--line)}
.log-item{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.log-item strong{font-weight:700}
.log-item p{color:var(--muted);font-size:15px}
.acc{border-top:1px solid var(--line);background:var(--surface);border-radius:8px;border:1px solid var(--line);overflow:hidden}
.acc details+details{border-top:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:2px solid var(--pine);outline-offset:-2px}
.acc summary::after{content:"＋";color:var(--accent);font-weight:500}
.acc details[open] summary{color:var(--accent-ink)}
.acc details[open] summary::after{content:"－"}
.acc details p{padding:0 20px 18px;color:var(--muted);max-width:70ch}
.join{display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,5fr);gap:28px;align-items:center}
.join-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px}
.join-panel li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.join-panel ul{list-style:none;margin:0 0 16px;padding:0}
.join-panel li:last-child{border-bottom:0}
.site-footer{border-top:1px solid var(--line);background:var(--bg);padding:48px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:24px}
.site-footer a{color:var(--pine)}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer a:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.fine{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);letter-spacing:.04em}
@media (max-width:1024px){
  :root{--space:72px}
  .cover-mini{grid-template-columns:140px minmax(0,1fr)}
  .join,.mast-grid{gap:20px}
}
@media (max-width:768px){
  :root{--space:56px}
  .icon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto}
  .icon-link{min-width:0;padding:10px 4px 12px;font-size:12px}
  .mast-grid,.day,.cover-mini,.join,.log-item,.foot-grid,.gallery{grid-template-columns:1fr}
  .vlabel{writing-mode:horizontal-tb;letter-spacing:.18em;border-left:0;border-bottom:1px solid var(--tick);min-height:36px;align-items:flex-end;justify-content:flex-start}
  .floor{grid-template-columns:72px minmax(0,1fr)}
  .floor .badge{display:none}
  .reply:nth-child(n){margin:0;max-width:100%}
  .scale-foot{flex-direction:column;align-items:flex-start}
  .head-row{flex-direction:column;align-items:flex-start}
  h1{font-size:clamp(2rem,9vw,2.8rem)}
}
@media (max-width:640px){
  :root{--space:48px}
  .brand-row{min-height:64px}
  .logo strong{font-size:1rem}
  .day time{font-size:1.15rem}
  .scale-board{padding:20px 14px 14px}
  .tick{width:64px}
  .tick span{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* roulang page: category1 */
:root{--bg:#F3EFE6;--bg-alt:#E8E0D4;--surface:#FFFCF8;--ink:#1A1714;--muted:#5E564E;--line:#E4D9CC;--accent:#9C4E36;--accent-ink:#7A3B28;--pine:#314E49;--tick:#C4A27A;--radius:8px;--radius-sm:6px;--shadow:0 10px 28px rgba(26,23,20,.06);--space:96px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:16.5px;line-height:1.75;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;display:block}
button,input{font-family:inherit}
a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
h1,h2,h3{font-family:"Noto Serif SC",serif;font-weight:650;letter-spacing:-.03em;line-height:1.2;margin:0}
h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.12}
h2{font-size:clamp(1.75rem,3vw,2.2rem);line-height:1.25}
h3{font-size:1.15rem;line-height:1.35}
p{margin:0}
.skip{position:absolute;left:12px;top:-48px;background:var(--ink);color:#fff;padding:8px 12px;z-index:80;border-radius:6px}
.skip:focus{top:8px}
.container{width:100%!important;max-width:1160px!important;margin-left:auto!important;margin-right:auto!important;padding-left:20px!important;padding-right:20px!important}
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,239,230,.96);border-bottom:1px solid var(--line);backdrop-filter:none}
.adult-bar{background:var(--ink);color:#F3EFE6;font-size:12px;letter-spacing:.14em;text-align:center;line-height:1.4}
.adult-bar .container{padding-top:5px;padding-bottom:5px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{display:flex;flex-direction:column;gap:1px;min-width:0}
.logo strong{font-family:"Noto Serif SC",serif;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.logo span{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.icon-nav{border-top:1px solid var(--line)}
.icon-row{display:flex;align-items:stretch;justify-content:space-between;gap:4px;overflow-x:auto;scrollbar-width:thin}
.icon-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:72px;padding:12px 8px 10px;color:var(--ink);font-size:13px;letter-spacing:.08em;white-space:nowrap}
.icon-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.icon-link:hover{color:var(--accent-ink)}
.icon-link.is-active{color:var(--accent-ink)}
.icon-link.is-active::after{content:"";position:absolute;left:50%;bottom:0;width:22px;height:2px;background:var(--accent);transform:translateX(-50%)}
.section{padding:var(--space) 0;background:var(--bg)}
.section-alt{background:var(--bg-alt)}
.kicker{font-size:12px;letter-spacing:.16em;color:var(--muted)}
.lead{max-width:68ch;color:var(--muted);margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:15px;letter-spacing:.04em;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}
.btn:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.btn-main{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-main:hover{background:var(--accent-ink);border-color:var(--accent-ink);transform:translateY(-1px)}
.btn-main:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--surface);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(1px)}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;letter-spacing:.06em}
.badge-pine{background:var(--pine);color:#F3EFE6;border-color:var(--pine)}
.badge-accent{background:transparent;color:var(--accent-ink);border-color:var(--accent)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);letter-spacing:.06em}
.crumb a{color:var(--pine);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .22s ease}
.crumb a:hover{background-size:100% 1px}
.head-split{display:grid;grid-template-columns:minmax(0,8fr) minmax(220px,4fr);gap:28px;align-items:end;margin-top:18px}
.result-box{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--tick)}
.metrics li{padding:16px 8px 14px;border-right:1px solid var(--line)}
.metrics li:last-child{border-right:0}
.metrics b{display:block;font-family:"Noto Serif SC",serif;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.metrics span{display:block;margin-top:4px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center}
.chip{min-height:36px;padding:0 12px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:13px;letter-spacing:.06em;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.chip:hover{border-color:var(--accent)}
.chip:active{transform:translateY(1px)}
.chip.is-on{border-color:var(--accent);color:var(--accent-ink);background:#F8EFEA}
.sort-note{margin-left:auto;font-size:13px;color:var(--muted);letter-spacing:.06em}
.catalog{display:grid;grid-template-columns:minmax(230px,3fr) minmax(0,9fr);gap:22px;align-items:start}
.filter-col{position:sticky;top:132px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 18px 8px}
.filter-col h2{font-size:1.35rem}
.filters{margin-top:8px}
.filters fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:12px 0 8px}
.filters legend{padding:0;font-size:12px;letter-spacing:.14em;color:var(--accent-ink)}
.filters label{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:7px 0;font-size:14px;cursor:pointer}
.filters input{accent-color:var(--pine);width:16px;height:16px}
.filters em{font-style:normal;color:var(--muted);font-size:12px}
.mag-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(220px,.75fr);gap:16px;align-items:stretch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.lead-card,.mini-card{padding:0;overflow:hidden}
.lead-card{display:grid;grid-template-columns:minmax(160px,.86fr) minmax(0,1.14fr);min-height:100%}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card-body p,.quote-side p{color:var(--muted);font-size:15px}
.meta{font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.tag{font-size:12px;letter-spacing:.08em;color:var(--accent-ink)}
.poster{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;color:#F3EFE6;background:var(--pine);min-height:180px}
.poster strong{font-family:"Noto Serif SC",serif;font-size:1.35rem;line-height:1.25;font-weight:700}
.poster span,.poster small{letter-spacing:.08em;font-size:12px}
.poster.ratio-169{aspect-ratio:16/9;min-height:0}
.poster.ratio-34{aspect-ratio:3/4;min-height:0}
.poster.accent{background:var(--accent)}
.poster.ink{background:#1A1714}
.poster.paper{background:var(--bg-alt);color:var(--ink);border-right:1px solid var(--line)}
.side-stack{display:flex;flex-direction:column;gap:16px}
.mini-card{display:grid;grid-template-columns:96px minmax(0,1fr)}
.mini-card .poster{border-radius:0}
.line-list{display:flex;flex-direction:column;margin-top:16px;border-top:1px solid var(--line)}
.line-item{display:grid;grid-template-columns:52px 72px minmax(0,1fr) 72px;gap:12px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line);color:inherit}
.line-item:hover{background:rgba(255,252,248,.7)}
.line-item strong{display:block;font-size:1.02rem}
.line-item em{display:block;font-style:normal;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.floor{font-family:"Noto Serif SC",serif;color:var(--accent-ink);font-size:1.05rem}
.reply{font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:right}
.more-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:8px}
.scene-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scene-line a{display:flex;flex-direction:column;gap:8px;padding:22px 18px;border-right:1px solid var(--line);min-height:148px;color:inherit}
.scene-line a:last-child{border-right:0}
.scene-line a:hover{background:var(--surface)}
.scene-line b{font-family:"Noto Serif SC",serif;font-size:1.25rem;font-weight:650;letter-spacing:-.03em}
.scene-line span{color:var(--muted);font-size:14px}
.idx{font-size:12px;letter-spacing:.14em;color:var(--accent-ink)}
.rank{list-style:none;margin:18px 0 0;padding:0}
.rank li{border-bottom:1px solid var(--line)}
.rank a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;color:inherit}
.rank a:hover .rank-title{color:var(--accent-ink)}
.rank-no{font-family:"Noto Serif SC",serif;font-size:1.25rem;color:var(--accent)}
.rank-title{font-weight:700}
.rank time{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.wide-quote{margin:0;padding:36px 40px;background:var(--pine);color:#F3EFE6;border-radius:8px;display:grid;grid-template-columns:minmax(0,8fr) minmax(180px,4fr);gap:24px;align-items:end}
.wide-quote p{font-family:"Noto Serif SC",serif;font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.45;font-weight:650}
.quote-side{font-size:13px;letter-spacing:.08em;color:#E4DDD4}
.topic-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:12px}
.topic-row{display:grid;grid-template-columns:88px minmax(0,1fr) 128px 72px;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:inherit}
.topic-row:hover{background:rgba(255,252,248,.55)}
.topic-row h3{font-family:"Noto Sans SC",sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:0}
.topic-row p{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.open-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 28px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px}
.open-bar p{color:var(--muted);margin-top:8px;max-width:62ch}
.site-footer{border-top:1px solid var(--line);padding:48px 0 28px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr;gap:24px}
.site-footer a{color:var(--pine)}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.fine{margin-top:28px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.text-link{color:var(--pine);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .22s ease}
.text-link:hover{background-size:100% 1px}
@media (max-width:1024px){
.mag-top{grid-template-columns:1fr}
.wide-quote{grid-template-columns:1fr;padding:28px}
.head-split{grid-template-columns:1fr}
.result-box{justify-content:flex-start}
}
@media (max-width:860px){
.catalog{grid-template-columns:1fr}
.filter-col{position:static}
.lead-card{grid-template-columns:1fr}
.poster.ratio-169{aspect-ratio:16/9}
}
@media (max-width:768px){
:root{--space:56px}
.icon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow-x:auto}
.icon-link{min-width:0;padding:10px 4px}
.foot-grid{grid-template-columns:1fr 1fr}
.metrics{grid-template-columns:1fr 1fr}
.metrics li:nth-child(2){border-right:0}
.scene-line{grid-template-columns:1fr}
.scene-line a{border-right:0;border-bottom:1px solid var(--line)}
.topic-row,.line-item{grid-template-columns:1fr auto;align-items:start}
.topic-row p,.line-item em{white-space:normal}
.reply{text-align:left}
.sort-note{margin-left:0;width:100%}
.more-head,.open-bar{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
.brand-row{min-height:64px}
.foot-grid{grid-template-columns:1fr}
.mini-card{grid-template-columns:78px minmax(0,1fr)}
h1{font-size:2.15rem}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important}
}