:root{
  --bg-main:#fffde6;
  --bg-sub:#fdf8cf;
  --bg-card:#fffffb;
  --bg-deep:#fcf5c2;
  --accent:#a97a06;
  --accent-dark:#7a5804;
  --accent-light:#e6ad00;
  --pink:#d9a217;
  --gold:#e6ad00;
  --text-primary:#3a2e0a;
  --text-secondary:#6c5a22;
  --border-color:#f0e3a8;
  --border-strong:#e6d488;
  --shadow-sm:0 4px 12px rgba(169,122,6,.08);
  --shadow-md:0 8px 24px rgba(169,122,6,.12);
  --shadow-lg:0 16px 40px rgba(169,122,6,.16);
  --max-w:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  background-color:var(--bg-main);
  color:var(--text-primary);
  line-height:1.7;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.container{
  width:min(calc(100% - 40px), var(--max-w));
  margin:0 auto;
}
.section-pad{padding:64px 0;}
.bg-sub{background-color:var(--bg-sub);}
.mb-22{margin-bottom:22px;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  height:68px;
  background:rgba(255,253,230,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-size:24px;font-weight:800;color:var(--accent-dark);
  white-space:nowrap;
}
.brand img{height:36px;width:36px;border-radius:8px;object-fit:cover;}
.nav-links{display:flex;align-items:center;gap:8px;}
.nav-links a{
  padding:8px 14px;border-radius:999px;
  font-size:14px;font-weight:700;color:var(--text-secondary);
  transition:all .3s;
}
.nav-links a:hover{color:var(--accent);background:var(--bg-deep);}
.nav-links a.is-current{
  background:linear-gradient(135deg, var(--pink), var(--accent));
  color:#fff;
}

/* Hero */
.hero{
  background:radial-gradient(circle at 80% 20%, #b8860b 0%, transparent 50%),
             linear-gradient(100deg, #5c4204 0%, #8a6505 40%, #b8860b 100%);
  position:relative;
  color:#fff;
  padding:80px 0;
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(92,66,4,.9) 0%, rgba(92,66,4,.6) 40%, transparent 100%);
  z-index:1;
}
.hero-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:48px;
  align-items:center;
}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.hero-badge{
  display:inline-block;
  border:1px solid var(--accent-light);
  padding:4px 16px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--accent-light);
}
.hero-text h1{
  font-size:52px;font-weight:900;letter-spacing:2px;line-height:1.2;
}
.hero-text h1 em{
  font-style:normal;color:var(--accent-light);
}
.hero-sub{
  font-size:18px;font-weight:600;color:var(--border-color);
}
.hero-desc{
  font-size:15px;color:rgba(255,253,230,.85);max-width:520px;
}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;}
.btn-primary{
  background:linear-gradient(135deg, #fde68a, var(--accent-light));
  color:var(--accent-dark);
  padding:12px 28px;border-radius:999px;
  font-size:16px;font-weight:800;
  box-shadow:0 4px 16px rgba(230,173,0,.4);
  transition:transform .2s;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{
  border:1px solid var(--accent-light);
  color:#fff;padding:12px 28px;border-radius:999px;
  font-size:16px;font-weight:700;transition:all .2s;
}
.btn-outline:hover{background:rgba(255,255,255,.1);}

.hero-carousel{
  position:relative;height:420px;width:100%;
}
.hero-carousel figure{
  position:absolute;top:50%;left:50%;
  width:300px;margin:0;
  transform:translate(-50%, -40%) scale(.97);
  opacity:0;
  transition:all .8s ease;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.hero-carousel figure img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
}
.hero-carousel figure.is-active{
  opacity:1;transform:translate(-50%, -50%) scale(1);
}

/* Section Common */
.section-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:40px;flex-wrap:wrap;gap:16px;
}
.section-title-wrap{
  display:flex;align-items:flex-start;gap:12px;
}
.section-bar{
  width:8px;height:34px;border-radius:4px;
  background:linear-gradient(180deg, var(--pink), var(--accent));
  margin-top:4px;
}
.section-title-group{display:flex;flex-direction:column;}
.section-title{
  font-size:32px;font-weight:800;color:var(--accent-dark);line-height:1.2;
}
.section-sub{
  font-size:16px;color:var(--text-secondary);margin-top:4px;
}
.section-link{
  font-size:14px;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:4px;
}
.section-link:hover{text-decoration:underline;}

/* Drama Grid */
.drama-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:22px;
}
.drama-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:all .3s;
}
.drama-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
}
.drama-cover{
  position:relative;aspect-ratio:3/4;overflow:hidden;
}
.drama-cover img{
  width:100%;height:100%;object-fit:cover;
}
.genre-tag{
  position:absolute;top:10px;left:10px;
  background:rgba(58,46,10,.7);
  color:#fff;font-size:12px;
  padding:2px 8px;border-radius:8px;
}
.drama-info{padding:16px;}
.drama-info h3{
  font-size:15px;font-weight:700;margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.drama-info p{
  font-size:12px;color:var(--text-secondary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.5;
}

/* Exclusive Grid */
.exclusive-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:22px;
}
.exc-card{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:var(--shadow-sm);
  transition:all .3s;
}
.exc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.exc-card.large{
  grid-row:span 2;aspect-ratio:auto;
}
.exc-card:nth-child(4){
  grid-column:2 / -1;aspect-ratio:auto;min-height:200px;
}
.exc-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s;
}
.exc-card:hover img{transform:scale(1.03);}
.exc-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 20px 20px;
  background:linear-gradient(180deg, transparent 0%, rgba(58,46,10,.88) 100%);
  color:#fff;
}
.exc-overlay h3{font-size:18px;font-weight:800;margin-bottom:4px;}
.exc-overlay p{font-size:13px;opacity:.9;}

/* AI Horizontal Scroll */
.ai-scroll{
  display:flex;gap:20px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:20px;
  -webkit-overflow-scrolling:touch;
}
.ai-scroll::-webkit-scrollbar{height:6px;}
.ai-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}
.ai-card{
  flex:0 0 220px;
  scroll-snap-align:start;
  border-radius:18px;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
}
.ai-card img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.ai-card-info{padding:12px;}
.ai-card-info h3{font-size:15px;font-weight:700;margin-bottom:4px;}
.ai-card-info p{font-size:12px;color:var(--text-secondary);}
.scroll-hint{
  text-align:center;font-size:13px;color:var(--accent);margin-top:16px;font-weight:700;
}

/* Rank List */
.rank-list{display:flex;flex-direction:column;gap:12px;}
.rank-item{
  display:flex;align-items:center;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:14px;
  padding:13px 18px;
  box-shadow:var(--shadow-sm);
  transition:all .2s;
}
.rank-item:hover{transform:translateY(-2px);border-color:var(--accent);}
.rank-num{
  width:40px;height:40px;flex-shrink:0;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;
  background:var(--bg-deep);color:var(--accent-dark);
}
.rank-item:nth-child(1) .rank-num,
.rank-item:nth-child(2) .rank-num,
.rank-item:nth-child(3) .rank-num{
  background:linear-gradient(135deg, var(--pink), var(--accent));
  color:#fff;
}
.rank-info{flex:1;margin:0 16px;min-width:0;}
.rank-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-genre{font-size:12px;color:var(--text-secondary);}
.rank-score{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.score-num{font-size:14px;font-weight:800;color:var(--accent);}
.score-tag{
  font-size:12px;padding:2px 6px;border-radius:999px;font-weight:700;
}
.score-tag.up{background:#dcfce7;color:#166534;}
.score-tag.down{background:#fee2e2;color:#991b1b;}
.score-tag.flat{background:#f3f4f6;color:#4b5563;}

/* Vote Section */
.vote-layout{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;
}
.vote-rules{display:flex;flex-direction:column;gap:16px;}
.rule-card{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:14px;padding:16px 20px;
  box-shadow:var(--shadow-sm);
}
.rule-num{
  width:34px;height:34px;flex-shrink:0;
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--pink), var(--accent));
  color:#fff;font-size:14px;font-weight:800;
}
.rule-text h3{font-size:15px;font-weight:700;margin-bottom:4px;}
.rule-text p{font-size:14px;color:var(--text-secondary);line-height:1.8;}

.vote-board{
  position:sticky;top:96px;
  background:linear-gradient(180deg, var(--bg-deep), var(--bg-card));
  border:1px solid var(--border-strong);
  border-radius:18px;padding:24px;
  box-shadow:var(--shadow-md);
  align-self:start;
}
.vote-board h3{font-size:18px;font-weight:800;color:var(--accent-dark);margin-bottom:4px;}
.vote-board .sub-tip{font-size:12px;color:var(--text-secondary);margin-bottom:20px;display:block;}
.vote-list{display:flex;flex-direction:column;}
.vote-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px dashed var(--border-color);
}
.vote-row:last-child{border-bottom:none;}
.vote-title-wrap{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.vote-index{
  width:24px;height:24px;flex-shrink:0;
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:var(--bg-deep);color:var(--accent-dark);
}
.vote-row:nth-child(1) .vote-index,
.vote-row:nth-child(2) .vote-index,
.vote-row:nth-child(3) .vote-index{
  background:linear-gradient(135deg, var(--pink), var(--accent));
  color:#fff;
}
.vote-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vote-count{font-size:14px;font-weight:800;color:var(--accent);}
.board-footer{font-size:12px;color:var(--text-secondary);margin-top:20px;text-align:center;}

/* News List */
.news-list{display:flex;flex-direction:column;gap:16px;}
.news-item{
  display:flex;align-items:flex-start;gap:20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:14px;padding:16px 20px;
  box-shadow:var(--shadow-sm);transition:all .2s;
}
.news-item:hover{transform:translateY(-2px);border-color:var(--accent);}
.news-date{
  flex-shrink:0;background:var(--bg-deep);color:var(--accent);
  padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;
}
.news-content h3{font-size:15px;font-weight:700;margin-bottom:4px;}
.news-content p{font-size:14px;color:var(--text-secondary);line-height:1.8;}

/* App Section */
.app-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.app-mockups{display:flex;gap:9px;justify-content:center;}
.mockup-box{
  border:4px solid var(--border-color);border-radius:20px;
  background:#fff;padding:4px;
  box-shadow:var(--shadow-sm);overflow:hidden;flex:1;max-width:150px;
}
.mockup-box img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;}
.app-text h2{font-size:32px;font-weight:800;color:var(--accent-dark);margin-bottom:16px;line-height:1.3;}
.app-text h2 em{font-style:normal;color:var(--accent-light);}
.app-text > p{font-size:15px;color:var(--text-secondary);margin-bottom:24px;line-height:1.8;}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.feature-item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text-primary);}
.feature-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}

/* Download Banner */
.download-banner{
  position:relative;width:100%;
  background:linear-gradient(135deg, #5c4204, #8a6505, #b8860b);
  padding:48px 24px 44px;color:#fff;text-align:center;overflow:hidden;
}
.download-banner::before,
.download-banner::after{
  content:'';position:absolute;top:-45%;width:20%;height:190%;
  transform:skewX(-16deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  pointer-events:none;z-index:1;
}
.download-banner::after{
  width:11%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation-delay:1.15s;
}
@keyframes shine{
  0%{left:-40%;}
  100%{left:130%;}
}
.download-banner::before{left:-40%;animation:shine 4.2s infinite linear;}
.download-banner::after{left:-40%;animation:shine 4.2s infinite linear;animation-delay:1.15s;}

.banner-inner{position:relative;z-index:2;max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px;}
.banner-brand{display:flex;align-items:center;gap:16px;}
.banner-brand img{width:68px;height:68px;border-radius:16px;object-fit:cover;box-shadow:var(--shadow-sm);}
.banner-brand-text{text-align:left;}
.banner-brand-text h3{font-size:22px;font-weight:800;margin-bottom:4px;color:#fff;}
.banner-brand-text p{font-size:13px;color:rgba(255,255,255,.8);}
.banner-btns{display:flex;width:100%;gap:12px;}
.plat-btn{
  flex:1;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:12px 0;border-radius:12px;
  font-size:15px;font-weight:700;white-space:nowrap;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.plat-btn:hover{background:rgba(255,255,255,.25);transform:translateY(-2px);}
.banner-tips{font-size:12px;color:rgba(255,255,255,.7);}
.banner-tips a{color:var(--accent-light);font-weight:700;margin-left:8px;text-decoration:underline;}

/* Install Section */
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.install-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:18px;padding:24px;box-shadow:var(--shadow-sm);}
.install-box h3{font-size:18px;font-weight:800;color:var(--accent-dark);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.install-box h3::before{content:'';display:inline-block;width:4px;height:16px;background:var(--accent);border-radius:2px;}
.info-table{width:100%;border-collapse:collapse;}
.info-table td{padding:8px 0;font-size:14px;border-bottom:1px dashed var(--border-color);}
.info-table td:first-child{color:var(--text-secondary);width:40%;}
.info-table td:last-child{font-weight:700;color:var(--text-primary);text-align:right;}
.info-table tr:last-child td{border-bottom:none;}
.step-list{display:flex;flex-direction:column;gap:16px;}
.step-item{display:flex;gap:14px;align-items:flex-start;}
.step-circle{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--bg-deep);color:var(--accent);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.step-text h4{font-size:15px;font-weight:700;margin-bottom:2px;}
.step-text p{font-size:13px;color:var(--text-secondary);}
.check-list{display:flex;flex-direction:column;gap:10px;}
.check-item{font-size:14px;color:var(--text-secondary);display:flex;align-items:flex-start;gap:8px;}
.check-icon{color:var(--accent);font-weight:800;flex-shrink:0;}

/* Cert Section */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cert-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);
}
.cert-inner{
  border:1px solid var(--border-strong);border-radius:12px;
  padding:24px;position:relative;height:100%;
}
.cert-inner h3{font-size:18px;font-weight:800;color:var(--accent-dark);margin-bottom:16px;text-align:center;}
.cert-field{display:flex;margin-bottom:8px;font-size:13px;}
.cert-field .label{color:var(--text-secondary);width:80px;flex-shrink:0;}
.cert-field .value{color:var(--text-primary);font-weight:700;word-break:break-all;}
.cert-seal{
  position:absolute;bottom:16px;right:16px;
  width:70px;height:70px;border-radius:50%;
  border:2px dashed #dc2626;color:#dc2626;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(-15deg);opacity:.8;
}
.cert-seal .check{font-size:22px;font-weight:900;line-height:1;}
.cert-seal .text{font-size:10px;font-weight:700;margin-top:2px;}
.cert-foot{
  margin-top:20px;padding-top:16px;border-top:1px dashed var(--border-color);
  display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-secondary);
}
.cert-status{color:#166534;font-weight:700;display:flex;align-items:center;gap:4px;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:16px;max-width:860px;margin:0 auto;}
.faq-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:14px;padding:20px;box-shadow:var(--shadow-sm);
}
.faq-q{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.faq-tag{
  background:linear-gradient(135deg, var(--pink), var(--accent));
  color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:6px;
}
.faq-q h3{font-size:15px;font-weight:700;}
.faq-a{font-size:14px;color:var(--text-secondary);line-height:1.85;padding-left:42px;}

/* About */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-img{
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}
.about-img img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.about-text h2{font-size:32px;font-weight:800;color:var(--accent-dark);margin-bottom:20px;line-height:1.3;}
.about-text p{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:16px;}
.about-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.about-tag{
  background:var(--bg-deep);color:var(--accent-dark);font-size:13px;font-weight:700;
  padding:4px 14px;border-radius:999px;
}

/* Footer */
.site-footer{
  background:var(--bg-sub);border-top:1px solid var(--border-color);
  padding:64px 0 24px;margin-top:22px;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px;
}
.footer-brand{display:flex;flex-direction:column;gap:12px;}
.footer-brand .brand{font-size:22px;}
.footer-brand .brand img{height:32px;width:32px;}
.footer-desc{font-size:14px;color:var(--text-secondary);line-height:1.8;}
.footer-col h4{font-size:16px;font-weight:800;color:var(--accent-dark);margin-bottom:16px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--text-secondary);transition:color .2s;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{
  text-align:center;border-top:1px solid var(--border-color);
  padding-top:24px;font-size:12px;color:var(--text-secondary);
  display:flex;flex-direction:column;gap:6px;
}
.footer-time{color:var(--border-strong);font-size:12px;}

/* Floating */
.floating-actions{
  position:fixed;right:24px;bottom:24px;z-index:999;
  display:flex;flex-direction:column;gap:16px;align-items:flex-end;
}
.back-top{
  width:44px;height:44px;border-radius:50%;
  background:var(--bg-card);border:1px solid var(--border-color);
  box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:20px;font-weight:800;
  opacity:0;visibility:hidden;transition:all .3s;cursor:pointer;
}
.back-top.show{opacity:1;visibility:visible;}
.online-video{
  width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle at center, #ef4444, #991b1b);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 0 0 0 rgba(239,68,68,.7);
  animation:video-pulse 2s infinite;
}
.online-video span{font-size:20px;margin-bottom:2px;}
@keyframes video-pulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.7);}
  70%{box-shadow:0 0 0 16px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

/* Modals */
.modal-overlay{
  position:fixed;inset:0;background:rgba(58,46,10,.6);
  backdrop-filter:blur(4px);z-index:2000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:all .3s;
}
.modal-overlay.active{opacity:1;visibility:visible;}
.modal-box{
  background:var(--bg-card);border-radius:18px;padding:32px;width:90%;max-width:480px;
  box-shadow:var(--shadow-lg);position:relative;transform:translateY(20px);transition:all .3s;
}
.modal-overlay.active .modal-box{transform:translateY(0);}
.modal-close{
  position:absolute;top:16px;right:16px;font-size:24px;color:var(--text-secondary);
  cursor:pointer;line-height:1;
}
.modal-box h3{font-size:20px;font-weight:800;color:var(--accent-dark);margin-bottom:16px;}
.copy-input-group{display:flex;gap:10px;margin-bottom:12px;}
.copy-input-group input{
  flex:1;padding:10px 14px;border:1px solid var(--border-color);border-radius:10px;
  font-size:14px;background:var(--bg-main);color:var(--text-primary);outline:none;
}
.copy-btn{
  background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:0 20px;font-weight:700;cursor:pointer;transition:background .2s;
}
.copy-btn:hover{background:var(--accent-dark);}
.copy-result{font-size:13px;color:#166534;font-weight:700;height:20px;}
.domain-panel{
  background:var(--bg-deep);border-radius:12px;padding:20px;text-align:center;
  font-size:18px;font-weight:800;color:var(--accent-dark);letter-spacing:1px;margin-top:16px;
}

/* Responsive */
@media (max-width: 1100px){
  .nav-links a{padding:8px 10px;font-size:13px;}
  .drama-grid{grid-template-columns:repeat(2, 1fr);}
  .app-layout{gap:35px;}
}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-text{align-items:center;}
  .hero-desc{margin:0 auto;}
  .hero-carousel{height:auto;display:flex;justify-content:center;gap:12px;margin-top:32px;}
  .hero-carousel figure{
    position:static;width:118px;transform:none;opacity:1;
    margin:0;display:block;
  }
  .hero-carousel figure.is-active{transform:none;}
  .vote-layout{grid-template-columns:1fr;}
  .vote-board{position:static;}
  .about-layout{grid-template-columns:1fr;}
  .about-img{max-width:400px;margin:0 auto;}
  .install-grid{grid-template-columns:1fr;}
  .exclusive-grid{grid-template-columns:1fr 1fr;}
  .exc-card.large{grid-row:auto;grid-column:1/-1;aspect-ratio:3/4;}
  .exc-card:nth-child(4){grid-column:auto;}
}
@media (max-width: 800px){
  .site-header{height:68px;}
  .nav-links{display:none;}
  .hero{padding:56px 0 52px;}
  .hero-text h1{font-size:38px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .download-banner{padding:48px 24px 44px;}
}
@media (max-width: 640px){
  .container{width:calc(100% - 28px);}
  .section-pad{padding:46px 0;}
  .hero-text h1{font-size:31px;}
  .section-title{font-size:26px;}
  .drama-grid{gap:12px;}
  .cert-grid{grid-template-columns:1fr;}
  .app-mockups{gap:6px;}
  .mockup-box{max-width:none;}
  .banner-btns{flex-wrap:nowrap;}
  .plat-btn{font-size:12px;padding:10px 0;flex:1;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .floating-actions{right:16px;bottom:16px;}
  .online-video{width:60px;height:60px;font-size:10px;}
  .online-video span{font-size:16px;}
  .back-top{width:36px;height:36px;font-size:16px;}
  html{scroll-padding-top:78px;}
}
@media (max-width: 320px){
  .hero-text h1{font-size:26px;}
  .plat-btn{font-size:10px;}
}