/* 麻豆 MADOU FILMS - Official Site Styles */
/* Base Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#000000;
--bg-deep:#050505;
--bg-content:#0B0B0B;
--bg-sub:#121212;
--bg-hover:#1A1A1A;
--white:#FFFFFF;
--title:#F7F7F7;
--text:#DDDDDD;
--text-sec:#A5A5A5;
--text-mute:#727272;
--silver:#C7C7C7;
--gray-deep:#2A2A2A;
--border:rgba(255,255,255,0.12);
--border-strong:rgba(255,255,255,0.40);
--shadow:0 18px 46px rgba(0,0,0,0.48);
--glow:0 12px 34px rgba(255,255,255,0.08);
--max-w:1320px;
--nav-h:64px;
--info-h:36px;
--channel-h:48px;
--radius:8px;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html{scroll-behavior:smooth;font-size:16px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}
body{
font-family:var(--font);
background:var(--bg);
color:var(--text);
line-height:1.7;
min-height:100vh;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Layout */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 20px}
@media(max-width:768px){.container{padding:0 14px}}
.section{padding:72px 0}
@media(max-width:768px){.section{padding:48px 0}}
.section-title{
font-size:1.75rem;
font-weight:700;
color:var(--title);
letter-spacing:0.04em;
margin-bottom:12px;
}
.section-desc{
color:var(--text-sec);
font-size:0.95rem;
max-width:640px;
margin-bottom:36px;
}
.section-header{margin-bottom:40px}
.section-header .more-link{
display:inline-flex;
align-items:center;
gap:6px;
color:var(--silver);
font-size:0.9rem;
margin-top:8px;
transition:color .2s;
}
.section-header .more-link:hover{color:var(--white)}

/* Buttons */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:0 24px;
font-size:0.95rem;
font-weight:600;
letter-spacing:0.02em;
border-radius:var(--radius);
transition:background .2s,color .2s,border-color .2s,transform .15s;
white-space:nowrap;
}
.btn-primary{
background:var(--white);
color:#000;
}
.btn-primary:hover{background:#E8E8E8}
.btn-secondary{
background:transparent;
color:var(--white);
border:1px solid var(--border-strong);
}
.btn-secondary:hover{border-color:var(--white);background:rgba(255,255,255,0.06)}
.btn-group{display:flex;flex-wrap:wrap;gap:12px}

/* Top Info Bar */
.top-info{
background:#000;
border-bottom:1px solid var(--border);
height:var(--info-h);
font-size:0.8rem;
color:var(--text-sec);
position:relative;
z-index:100;
}
.top-info-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:100%;
max-width:var(--max-w);
margin:0 auto;
padding:0 20px;
}
.top-info-left{flex-shrink:0}
.top-info-center{display:flex;gap:24px}
.top-info-center a{color:var(--text-sec);transition:color .2s}
.top-info-center a:hover{color:var(--white)}
.top-info-right{display:flex;gap:18px;align-items:center}
.top-info-right a,.top-info-right button{color:var(--text-sec);transition:color .2s;font-size:0.8rem}
.top-info-right a:hover,.top-info-right button:hover{color:var(--white)}
@media(max-width:900px){
.top-info-center{display:none}
.top-info-left span{display:none}
.top-info-left::after{content:"麻豆 · 原创影像"}
}

/* Brand Nav */
.brand-nav{
background:rgba(0,0,0,0.92);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:90;
height:var(--nav-h);
}
.brand-nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:100%;
max-width:var(--max-w);
margin:0 auto;
padding:0 20px;
gap:16px;
}
.nav-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.nav-menu-btn{
display:flex;
align-items:center;
gap:8px;
min-height:44px;
padding:0 12px;
color:var(--text);
font-size:0.9rem;
border-radius:var(--radius);
transition:background .2s;
}
.nav-menu-btn:hover{background:var(--bg-hover)}
.nav-menu-btn svg{width:20px;height:20px;flex-shrink:0}
.nav-channel-name{color:var(--text-mute);font-size:0.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-logo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
flex-shrink:0;
}
.nav-logo img{height:32px;width:auto;object-fit:contain}
.nav-logo-text{font-size:1.25rem;font-weight:800;letter-spacing:0.12em;color:var(--white);line-height:1.1}
.nav-logo-en{font-size:0.65rem;letter-spacing:0.2em;color:var(--silver);margin-top:2px}
.nav-right{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end;min-width:0}
.nav-right .btn{min-height:40px;padding:0 16px;font-size:0.85rem}
@media(max-width:768px){
.nav-channel-name{display:none}
.nav-right .btn-secondary{display:none}
.nav-logo-text{font-size:1.1rem}
}

/* Channel Nav */
.channel-nav{
background:var(--bg-deep);
border-bottom:1px solid var(--border);
height:var(--channel-h);
position:relative;
z-index:80;
}
.channel-nav-inner{
display:flex;
align-items:center;
height:100%;
max-width:var(--max-w);
margin:0 auto;
padding:0 20px;
gap:4px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.channel-nav-inner::-webkit-scrollbar{display:none}
.channel-link{
display:inline-flex;
align-items:center;
height:100%;
padding:0 14px;
font-size:0.9rem;
color:var(--text-sec);
white-space:nowrap;
position:relative;
transition:color .2s;
flex-shrink:0;
}
.channel-link:hover{color:var(--white)}
.channel-link.active{color:var(--white);font-weight:600}
.channel-link.active::after{
content:"";
position:absolute;
bottom:0;left:14px;right:14px;
height:2px;
background:var(--white);
}
.channel-more{position:relative;margin-left:auto;flex-shrink:0}
.channel-more-btn{
display:inline-flex;
align-items:center;
gap:4px;
height:100%;
padding:0 14px;
font-size:0.9rem;
color:var(--text-sec);
}
.channel-more-btn:hover{color:var(--white)}
.channel-more-menu{
display:none;
position:absolute;
top:100%;
right:0;
background:var(--bg-sub);
border:1px solid var(--border);
border-radius:var(--radius);
min-width:180px;
padding:8px 0;
box-shadow:var(--shadow);
z-index:100;
}
.channel-more-menu.open{display:block}
.channel-more-menu a{
display:block;
padding:10px 18px;
font-size:0.9rem;
color:var(--text-sec);
transition:background .15s,color .15s;
}
.channel-more-menu a:hover{background:var(--bg-hover);color:var(--white)}
@media(max-width:768px){
.channel-nav{height:auto}
.channel-nav-inner{padding:0 14px;height:44px}
.channel-link{padding:0 12px;font-size:0.85rem}
}

/* Side Panel */
.side-panel{
position:fixed;
top:0;left:0;
width:520px;
max-width:90vw;
height:100%;
background:var(--bg-content);
z-index:200;
transform:translateX(-100%);
transition:transform .3s ease,visibility .3s;
visibility:hidden;
pointer-events:none;
display:flex;
flex-direction:column;
box-shadow:var(--shadow);
}
.side-panel.open{
transform:translateX(0);
visibility:visible;
pointer-events:auto;
}
.side-panel-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 24px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.side-panel-brand{display:flex;align-items:center;gap:12px}
.side-panel-brand img{height:28px;width:auto}
.side-panel-brand span{font-size:1.1rem;font-weight:700;letter-spacing:0.08em}
.side-panel-close{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
color:var(--text-sec);
transition:background .2s,color .2s;
}
.side-panel-close:hover{background:var(--bg-hover);color:var(--white)}
.side-panel-body{
flex:1;
overflow-y:auto;
padding:24px;
-webkit-overflow-scrolling:touch;
}
.panel-group{margin-bottom:32px}
.panel-group-title{
font-size:0.75rem;
letter-spacing:0.12em;
color:var(--text-mute);
text-transform:uppercase;
margin-bottom:14px;
padding-bottom:8px;
border-bottom:1px solid var(--border);
}
.panel-item{
display:block;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,0.06);
transition:background .15s;
}
.panel-item:hover{background:rgba(255,255,255,0.03)}
.panel-item-name{font-size:1rem;font-weight:600;color:var(--title);margin-bottom:4px}
.panel-item-desc{font-size:0.85rem;color:var(--text-mute);line-height:1.5}

/* Search Panel */
.search-panel{
position:fixed;
inset:0;
background:rgba(0,0,0,0.96);
z-index:210;
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
visibility:hidden;
pointer-events:none;
opacity:0;
transition:opacity .25s,visibility .25s;
}
.search-panel.open{
visibility:visible;
pointer-events:auto;
opacity:1;
}
.search-panel-close{
position:absolute;
top:20px;right:20px;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
color:var(--text-sec);
border-radius:50%;
}
.search-panel-close:hover{background:var(--bg-hover);color:var(--white)}
.search-box{
width:100%;
max-width:560px;
margin-top:60px;
}
.search-input{
width:100%;
height:56px;
background:var(--bg-sub);
border:1px solid var(--border-strong);
border-radius:var(--radius);
padding:0 20px;
font-size:1.05rem;
color:var(--white);
}
.search-input::placeholder{color:var(--text-mute)}
.search-input:focus{outline:none;border-color:var(--white)}
.search-results{margin-top:32px;width:100%;max-width:560px}
.search-section{margin-bottom:28px}
.search-section-title{font-size:0.8rem;color:var(--text-mute);letter-spacing:0.1em;margin-bottom:12px}
.search-tags{display:flex;flex-wrap:wrap;gap:10px}
.search-tag{
display:inline-block;
padding:8px 16px;
background:var(--bg-sub);
border:1px solid var(--border);
border-radius:20px;
font-size:0.9rem;
color:var(--text-sec);
transition:background .15s,color .15s,border-color .15s;
}
.search-tag:hover{background:var(--bg-hover);color:var(--white);border-color:var(--border-strong)}
.search-links a{
display:block;
padding:10px 0;
color:var(--text);
border-bottom:1px solid rgba(255,255,255,0.06);
font-size:0.95rem;
}
.search-links a:hover{color:var(--white)}

/* Overlay */
.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
z-index:190;
visibility:hidden;
pointer-events:none;
opacity:0;
transition:opacity .25s,visibility .25s;
}
.overlay.open{
visibility:visible;
pointer-events:auto;
opacity:1;
}

/* Mobile Bottom Nav */
.mobile-bottom-nav{
display:none;
position:fixed;
bottom:0;left:0;right:0;
background:rgba(0,0,0,0.95);
border-top:1px solid var(--border);
z-index:80;
padding-bottom:env(safe-area-inset-bottom);
}
.mobile-bottom-inner{
display:flex;
height:56px;
}
.mobile-bottom-item{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
font-size:0.7rem;
color:var(--text-mute);
min-height:48px;
}
.mobile-bottom-item.active{color:var(--white)}
.mobile-bottom-item svg{width:22px;height:22px}
@media(max-width:768px){
.mobile-bottom-nav{display:block}
body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* Hero */
.hero{
padding:48px 0 64px;
background:var(--bg-deep);
}
.hero-grid{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:40px;
align-items:center;
}
.hero-visual{
aspect-ratio:16/10;
background:var(--bg-sub);
border-radius:var(--radius);
overflow:hidden;
position:relative;
border:1px solid var(--border);
}
.hero-visual img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%) contrast(1.05)}
.hero-placeholder{
width:100%;height:100%;
background:linear-gradient(135deg,#0B0B0B 0%,#1A1A1A 50%,#0B0B0B 100%);
display:flex;align-items:center;justify-content:center;
}
.hero-placeholder span{
font-size:4rem;font-weight:800;letter-spacing:0.15em;color:rgba(255,255,255,0.08);
}
.hero-content h1{
font-size:2.4rem;
font-weight:800;
color:var(--title);
letter-spacing:0.03em;
line-height:1.25;
margin-bottom:16px;
}
.hero-content p{
color:var(--text-sec);
font-size:1.05rem;
line-height:1.8;
margin-bottom:28px;
max-width:480px;
}
.hero-news{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.hero-news-item{
padding:14px 0;
border-top:1px solid var(--border);
}
.hero-news-item:last-child{border-bottom:1px solid var(--border)}
.hero-news-cat{font-size:0.75rem;color:var(--silver);letter-spacing:0.08em;margin-bottom:4px}
.hero-news-text{font-size:0.9rem;color:var(--text-sec);line-height:1.6}
.hero-news-item a:hover .hero-news-text{color:var(--white)}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:28px}
.hero-content{order:1}
.hero-visual{order:2}
.hero-news{order:3}
.hero-content h1{font-size:1.8rem}
}

/* Cards Grid */
.cards-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
@media(max-width:1000px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cards-grid{grid-template-columns:1fr;gap:20px}}
.card{
background:var(--bg-content);
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
transition:border-color .2s,background .2s;
}
.card:hover{border-color:var(--border-strong);background:var(--bg-sub)}
.card-media{
aspect-ratio:16/9;
background:var(--bg-sub);
overflow:hidden;
position:relative;
}
.card-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%)}
.card-placeholder{
width:100%;height:100%;
background:linear-gradient(145deg,#121212,#1A1A1A);
display:flex;align-items:center;justify-content:center;
}
.card-placeholder span{font-size:1.5rem;font-weight:700;color:rgba(255,255,255,0.1);letter-spacing:0.1em}
.card-body{padding:20px}
.card-tag{
display:inline-block;
font-size:0.7rem;
letter-spacing:0.08em;
color:var(--silver);
margin-bottom:8px;
}
.card-title{
font-size:1.1rem;
font-weight:700;
color:var(--title);
margin-bottom:8px;
line-height:1.4;
}
.card-desc{
font-size:0.9rem;
color:var(--text-sec);
line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.card-link{display:block}

/* Feature List */
.feature-list{display:flex;flex-direction:column;gap:0}
.feature-item{
display:grid;
grid-template-columns:80px 1fr;
gap:20px;
padding:28px 0;
border-bottom:1px solid var(--border);
align-items:start;
}
.feature-item:first-child{border-top:1px solid var(--border)}
.feature-num{
font-size:1.5rem;
font-weight:800;
color:rgba(255,255,255,0.15);
letter-spacing:0.05em;
line-height:1;
}
.feature-content h3{font-size:1.15rem;font-weight:700;color:var(--title);margin-bottom:8px}
.feature-content p{font-size:0.95rem;color:var(--text-sec);line-height:1.7}
@media(max-width:600px){.feature-item{grid-template-columns:56px 1fr;gap:14px}}

/* Two Col */
.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}
@media(max-width:800px){.two-col{grid-template-columns:1fr;gap:28px}}

/* Content Block */
.content-block{
background:var(--bg-content);
border:1px solid var(--border);
border-radius:var(--radius);
padding:32px;
margin-bottom:24px;
}
.content-block h2,.content-block h3{color:var(--title);margin-bottom:14px}
.content-block p{margin-bottom:14px;color:var(--text);line-height:1.8}
.content-block p:last-child{margin-bottom:0}
.content-block ul{margin:12px 0 12px 20px;list-style:disc}
.content-block li{margin-bottom:8px;color:var(--text-sec)}

/* Page Header */
.page-header{
padding:48px 0 32px;
border-bottom:1px solid var(--border);
margin-bottom:40px;
}
.page-header h1{
font-size:2.2rem;
font-weight:800;
color:var(--title);
letter-spacing:0.03em;
margin-bottom:12px;
}
.page-header p{
color:var(--text-sec);
font-size:1.05rem;
max-width:680px;
line-height:1.7;
}
@media(max-width:768px){.page-header h1{font-size:1.7rem}}

/* Article */
.article-meta{font-size:0.85rem;color:var(--text-mute);margin-bottom:20px}
.article-body p{margin-bottom:18px;line-height:1.85;color:var(--text)}
.article-body h2{font-size:1.35rem;color:var(--title);margin:32px 0 14px;font-weight:700}
.article-body h3{font-size:1.15rem;color:var(--title);margin:24px 0 10px;font-weight:600}
.note-box{
background:var(--bg-sub);
border-left:3px solid var(--border-strong);
padding:16px 20px;
margin:24px 0;
font-size:0.9rem;
color:var(--text-sec);
}

/* FAQ */
.faq-list details{
border-bottom:1px solid var(--border);
padding:18px 0;
}
.faq-list summary{
font-weight:600;
color:var(--title);
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
min-height:44px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.3rem;color:var(--text-mute);flex-shrink:0}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{
margin-top:12px;
color:var(--text-sec);
line-height:1.75;
font-size:0.95rem;
}

/* Footer */
.site-footer{
background:#000;
border-top:1px solid var(--border);
padding:56px 0 32px;
margin-top:64px;
}
.footer-grid{
display:grid;
grid-template-columns:1.4fr repeat(4,1fr);
gap:32px;
margin-bottom:48px;
}
.footer-brand img{height:28px;width:auto;margin-bottom:12px}
.footer-brand .logo-text{font-size:1.2rem;font-weight:800;letter-spacing:0.1em;color:var(--white);margin-bottom:4px}
.footer-brand .logo-en{font-size:0.7rem;letter-spacing:0.15em;color:var(--silver);margin-bottom:16px}
.footer-brand p{font-size:0.85rem;color:var(--text-mute);line-height:1.7;max-width:280px}
.footer-col h4{
font-size:0.8rem;
letter-spacing:0.1em;
color:var(--silver);
margin-bottom:16px;
font-weight:600;
}
.footer-col a{
display:block;
font-size:0.9rem;
color:var(--text-sec);
padding:6px 0;
transition:color .15s;
}
.footer-col a:hover{color:var(--white)}
.footer-bottom{
border-top:1px solid var(--border);
padding-top:24px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:16px;
font-size:0.8rem;
color:var(--text-mute);
}
.footer-notice{
font-size:0.8rem;
color:var(--text-mute);
line-height:1.7;
max-width:720px;
margin-bottom:20px;
}
@media(max-width:900px){
.footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:500px){
.footer-grid{grid-template-columns:1fr}
}

/* Utility */
.text-center{text-align:center}
.mt-24{margin-top:24px}
.mt-40{margin-top:40px}
.mb-24{margin-bottom:24px}
.mb-40{margin-bottom:40px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tag{
display:inline-block;
padding:4px 12px;
background:var(--bg-sub);
border:1px solid var(--border);
border-radius:4px;
font-size:0.8rem;
color:var(--text-sec);
}
.divider{height:1px;background:var(--border);margin:40px 0}
.lead{font-size:1.1rem;color:var(--text);line-height:1.8;margin-bottom:24px}

/* Body lock when panel open */
body.panel-open{overflow:hidden}

/* Ensure main content not covered */
main{position:relative;z-index:1}