:root {
   --bg: #10100c;
   --panel: #181812;
   --panel2: #202018;
   --line: rgba(255, 255, 255, .10);
   --text: #f8f5e9;
   --muted: #b8b6a9;
   --yellow: #ffd43b;header
   --yellow2: #f4ad19;
   --green: #9ed72e;
   --radius: 22px;
   --max: 1240px;
   --shadow: 0 22px 70px rgba(0, 0, 0, .34)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 94px
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
   line-height: 1.65;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased
}

body:before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: -2;
   background: radial-gradient(ellipse at 78% 2%, rgba(255, 210, 48, .075), transparent 34%), radial-gradient(ellipse at 0% 45%, rgba(109, 154, 38, .065), transparent 35%), linear-gradient(180deg, #11110d, #0d0d0a 70%)
}

a {
   color: inherit;
   text-decoration: none
}

button {
   font: inherit
}

img {
   display: block;
   max-width: 100%
}

.site-noise {
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   opacity: .12;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E")
}

.site-header {
    width: 100%;
   height: 88px;
   position: fixed;
   top: 0;
   z-index: 60;
   background: rgba(15, 15, 11, .84);
   border-bottom: 1px solid rgba(255, 255, 255, .075);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px)
}

.header-inner {
   height: 100%;
   max-width: var(--max);
   padding: 0 26px;
   margin: auto;
   display: flex;
   align-items: center;
   gap: 28px
}

.brand {
   width: 208px;
   flex: 0 0 208px;
   display: flex;
   align-items: center
}

.brand img {
   width: 100%;
   height: auto;
   object-fit: contain
}

.desktop-nav {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-left: auto
}

.nav-link {
   font-size: 13px;
   font-weight: 700;
   color: #bdbbae;
   white-space: nowrap;
   transition: color .2s
}

.nav-link:hover,
.nav-link.active {
   color: var(--yellow)
}

.header-actions {
   display: flex;
   align-items: center;
   gap: 12px
}

.category-trigger {
   display: flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 12px;
   color: #f5f1e4;
   padding: 11px 13px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   transition: .25s
}

.category-trigger:hover {
   border-color: var(--yellow);
   color: var(--yellow)
}

.category-lines {
   display: flex;
   flex-direction: column;
   gap: 3px;
   width: 15px
}

.category-lines i {
   display: block;
   height: 2px;
   background: currentColor;
   border-radius: 4px;
   width: 100%
}

.category-lines i:nth-child(2) {
   width: 10px
}

.qr-wrap {
   position: relative;
   display: inline-flex;
   z-index: 3
}

.download-link,
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 48px;
   padding: 0 21px;
   border-radius: 13px;
   font-weight: 800;
   font-size: 13px;
   white-space: nowrap;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform .24s, background .24s, border-color .24s, box-shadow .24s
}

.download-link {
   background: linear-gradient(135deg, #ffe46b, #ffc928);
   color: #171407;
   box-shadow: 0 8px 25px rgba(255, 205, 45, .15)
}

.download-link:hover,
.btn-yellow:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 30px rgba(255, 205, 45, .24)
}

.download-link span,
.btn span {
   font-size: 17px;
   line-height: 1
}

.qr-popover {
   position: absolute;
   width: 196px;
   padding: 13px;
   background: #fff;
   color: #19180f;
   border-radius: 16px;
   box-shadow: 0 18px 60px rgba(0, 0, 0, .48);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px) scale(.97);
   transition: opacity .2s, transform .2s, visibility .2s;
   pointer-events: none;
   z-index: 100
}

.qr-popover img {
   width: 168px;
   height: 168px;
   object-fit: contain
}

.qr-popover strong {
   font-size: 12px;
   font-weight: 900;
   margin-top: 3px
}

.qr-popover span {
   font-size: 11px;
   color: #6d6b5e
}

.qr-wrap:hover .qr-popover,
.qr-wrap:focus-within .qr-popover {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1)
}

.qr-down .qr-popover {
   top: calc(100% + 12px);
   left: 50%;
   transform: translate(-50%, -6px) scale(.97)
}

.qr-down:hover .qr-popover,
.qr-down:focus-within .qr-popover {
   transform: translate(-50%, 0) scale(1)
}

.qr-up .qr-popover {
   bottom: calc(100% + 12px);
   left: 50%;
   transform: translate(-50%, 8px) scale(.97)
}

.qr-up:hover .qr-popover,
.qr-up:focus-within .qr-popover {
   transform: translate(-50%, 0) scale(1)
}

.drawer-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .66);
   z-index: 70;
   opacity: 0;
   visibility: hidden;
   transition: .3s
}

.site-drawer {
   position: fixed;
   z-index: 80;
   top: 0;
   right: 0;
   height: 100dvh;
   width: min(410px, 92vw);
   padding: 26px 24px 22px;
   background: linear-gradient(160deg, #202016, #11110d 72%);
   border-left: 1px solid rgba(255, 255, 255, .1);
   box-shadow: -24px 0 80px rgba(0, 0, 0, .4);
   transform: translateX(105%);
   transition: transform .35s cubic-bezier(.22, .75, .25, 1);
   display: flex;
   flex-direction: column;
   overflow-y: auto
}

.drawer-open .drawer-backdrop {
   opacity: 1;
   visibility: visible
}

.drawer-open .site-drawer {
   transform: translateX(0)
}

.drawer-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding: 5px 0 24px;
   border-bottom: 1px solid var(--line)
}

.eyebrow {
   display: block;
   color: var(--yellow);
   font-size: 10px;
   letter-spacing: .18em;
   font-weight: 900
}

.drawer-head h2 {
   font-size: 28px;
   line-height: 1.2;
   margin: 8px 0 0;
   letter-spacing: -.04em
}

.drawer-close {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: #29291f;
   color: #fff;
   font-size: 27px;
   line-height: 1;
   cursor: pointer
}

.drawer-menu {
   display: grid;
   grid-template-columns: 1fr;
   gap: 6px;
   padding: 18px 0;
   flex: 1
}

.drawer-link {
   display: flex;
   align-items: center;
   gap: 13px;
   min-height: 48px;
   padding: 10px 13px;
   border: 1px solid transparent;
   border-radius: 12px;
   color: #d2d0c4;
   font-weight: 700;
   font-size: 14px;
   transition: .2s
}

.drawer-link:hover,
.drawer-link.active {
   background: rgba(255, 211, 53, .1);
   border-color: rgba(255, 211, 53, .24);
   color: var(--yellow)
}

.drawer-icon {
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   border-radius: 9px;
   background: rgba(255, 255, 255, .06);
   font-size: 17px
}

.drawer-arrow {
   margin-left: auto;
   font-size: 16px;
   opacity: .65
}

.drawer-footer {
   border-top: 1px solid var(--line);
   padding-top: 17px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   gap: 10px
}

.drawer-note {
   display: flex;
   align-items: center;
   gap: 10px
}

.drawer-note strong,
.drawer-note small {
   display: block
}

.drawer-note strong {
   font-size: 13px
}

.drawer-note small {
   font-size: 10px;
   color: var(--muted);
   margin-top: 2px
}

.fruit-dot {
   display: inline-block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--green);
   box-shadow: 0 0 0 5px rgba(158, 215, 46, .12)
}

.drawer-download .download-link {
   padding: 0 14px;
   min-height: 43px;
   font-size: 12px
}

.hero-section {
   position: relative;
   max-width: var(--max);
   margin: auto;
   padding: 74px 26px 66px;
   min-height: 560px;
   display: grid;
   grid-template-columns: 1.03fr .97fr;
   align-items: center;
   gap: 48px
}

.hero-bg-glow {
   position: absolute;
   width: 480px;
   height: 480px;
   right: 12%;
   top: 0;
   pointer-events: none;
   background: radial-gradient(circle, rgba(255, 207, 45, .13), transparent 68%);
   filter: blur(18px)
}

.hero-copy {
   position: relative;
   z-index: 2;
   padding: 0 0 10px
}

.hero-kicker {
   display: flex;
   align-items: center;
   gap: 11px;
   color: #c8c5b6;
   font-size: 10px;
   letter-spacing: .14em;
   font-weight: 800
}

.kicker-line {
   height: 1px;
   width: 40px;
   background: linear-gradient(90deg, var(--yellow), transparent)
}

h1,
h2,
h3,
p {
   margin-top: 0
}

.hero-copy h1 {
   font-size: clamp(46px, 5.8vw, 76px);
   line-height: 1.12;
   letter-spacing: -.055em;
   margin: 24px 0 20px;
   font-weight: 900
}

.hero-copy h1 span {
   color: var(--yellow);
   text-shadow: 0 8px 32px rgba(255, 210, 47, .14)
}

.hero-copy h1 sup {
   font-size: 22px;
   color: var(--green);
   vertical-align: top;
   margin-left: 8px
}

.hero-lead {
   max-width: 510px;
   color: #c6c3b6;
   font-size: 15px;
   line-height: 1.95;
   margin-bottom: 24px
}

.hero-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 27px
}

.hero-tags a {
   font-size: 12px;
   color: #e4e0d0;
   border: 1px solid rgba(255, 255, 255, .12);
   background: rgba(255, 255, 255, .035);
   border-radius: 999px;
   padding: 7px 12px;
   transition: .2s
}

.hero-tags a:hover {
   border-color: rgba(255, 212, 59, .5);
   color: var(--yellow);
   background: rgba(255, 212, 59, .07)
}

.hero-actions {
   display: flex;
   align-items: center;
   gap: 12px
}

.hero-download .download-link {
   min-height: 52px;
   padding: 0 24px
}

.btn-glass {
   background: rgba(255, 255, 255, .035);
   border-color: rgba(255, 255, 255, .15);
   color: #f8f5e9
}

.btn-glass:hover,
.btn-outline:hover {
   border-color: var(--yellow);
   color: var(--yellow);
   transform: translateY(-2px)
}

.hero-proof {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-top: 30px;
   color: #a7a597;
   font-size: 11px
}

.hero-proof b {
   color: var(--green);
   margin-right: 5px
}

.hero-showcase {
   position: relative;
   z-index: 1;
   max-width: 480px;
   width: 100%;
   justify-self: end;
   border: 1px solid rgba(255, 255, 255, .12);
   background: linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
   padding: 13px;
   border-radius: 24px;
   box-shadow: var(--shadow);
   transform: rotate(1deg);
   transition: transform .4s
}

.hero-showcase:hover {
   transform: rotate(0) translateY(-4px)
}

.showcase-top,
.showcase-bottom {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #c8c4b5;
   font-size: 10px;
   padding: 4px 7px 12px
}

.live-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--green);
   box-shadow: 0 0 0 4px rgba(158, 215, 46, .12)
}

.showcase-count {
   margin-left: auto;
   font-weight: 800;
   color: var(--yellow);
   font-size: 12px
}

.showcase-count i {
   font-style: normal;
   color: #777566;
   margin: 0 4px
}

.showcase-poster {
   position: relative;
   display: block;
   aspect-ratio: 4/4.7;
   border-radius: 16px;
   overflow: hidden;
   background: #242318
}

.showcase-poster>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 34%;
   transition: transform .7s
}

.showcase-poster:hover>img {
   transform: scale(1.045)
}

.showcase-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(8, 8, 5, .08) 35%, rgba(8, 8, 5, .85) 100%)
}

.showcase-stamp {
   position: absolute;
   right: 17px;
   top: 17px;
   font-size: 10px;
   letter-spacing: .16em;
   border: 1px solid rgba(255, 255, 255, .5);
   border-radius: 7px;
   padding: 6px 9px;
   color: white;
   background: rgba(0, 0, 0, .18);
   backdrop-filter: blur(6px)
}

.showcase-stamp b {
   color: var(--yellow)
}

.showcase-caption {
   position: absolute;
   left: 24px;
   bottom: 22px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 5px
}

.showcase-caption small {
   font-size: 11px;
   color: var(--yellow);
   font-weight: 700
}

.showcase-caption strong {
   font-size: 31px;
   line-height: 1.2;
   letter-spacing: -.04em;
   text-shadow: 0 2px 14px #000
}

.showcase-desc {
   font-size: 12px;
   color: #e2decf
}

.showcase-play {
   position: absolute;
   right: 22px;
   bottom: 25px;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: #171407;
   background: var(--yellow);
   padding-left: 3px;
   box-shadow: 0 5px 24px rgba(255, 207, 45, .3);
   transition: .25s
}

.showcase-poster:hover .showcase-play {
   transform: scale(1.08)
}

.showcase-bottom {
   padding: 13px 7px 2px;
   justify-content: space-between
}

.showcase-bottom i {
   font-style: normal;
   color: var(--yellow);
   margin: 0 4px
}

.showcase-bottom a {
   color: var(--yellow);
   font-weight: 800
}

.showcase-bottom b {
   font-size: 15px;
   margin-left: 6px
}

.section-wrap {
   max-width: var(--max);
   margin: 0 auto;
   padding: 54px 26px
}

.section-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 25px
}

.section-heading h2 {
   font-size: clamp(26px, 3.2vw, 38px);
   letter-spacing: -.045em;
   line-height: 1.2;
   margin: 8px 0 9px;
   font-weight: 900
}

.section-heading h2 em {
   font-size: .62em;
   font-style: normal;
   color: var(--yellow);
   margin-left: 8px;
   white-space: nowrap
}

.section-heading p {
   color: var(--muted);
   font-size: 13px;
   margin: 0
}

.text-link {
   font-size: 12px;
   font-weight: 800;
   color: var(--yellow);
   white-space: nowrap;
   padding-bottom: 4px
}

.text-link span {
   font-size: 17px;
   margin-left: 5px
}

.category-section {
   padding-top: 24px
}

.category-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 13px
}

.category-card {
   position: relative;
   min-height: 168px;
   display: flex;
   align-items: flex-start;
   gap: 15px;
   padding: 23px 18px;
   border: 1px solid var(--line);
   border-radius: 19px;
   overflow: hidden;
   background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
   transition: transform .25s, border-color .25s
}

.category-card:after {
   content: "";
   position: absolute;
   right: -28px;
   bottom: -46px;
   width: 125px;
   height: 125px;
   border-radius: 50%;
   background: rgba(255, 212, 59, .08);
   filter: blur(4px)
}

.category-card:hover {
   transform: translateY(-5px);
   border-color: rgba(255, 212, 59, .38)
}

.category-symbol {
   flex: 0 0 38px;
   width: 38px;
   height: 38px;
   border-radius: 13px;
   display: grid;
   place-items: center;
   font-size: 22px;
   color: #1b1808;
   background: linear-gradient(145deg, #ffe76d, #ffc526);
   box-shadow: 0 6px 18px rgba(255, 205, 44, .12)
}

.cat-suspense .category-symbol {
   background: linear-gradient(145deg, #c7ed85, #81bd2a)
}

.cat-city .category-symbol {
   background: linear-gradient(145deg, #ffd5a3, #ef9b44)
}

.cat-ancient .category-symbol {
   background: linear-gradient(145deg, #f4c3f7, #ba87d9)
}

.category-card small {
   font-size: 9px;
   letter-spacing: .12em;
   color: #aaa796;
   font-weight: 800
}

.category-card h3 {
   font-size: 17px;
   margin: 5px 0 4px;
   letter-spacing: -.02em
}

.category-card p {
   font-size: 11px;
   color: var(--muted);
   margin: 0
}

.category-go {
   position: absolute;
   right: 15px;
   top: 15px;
   color: var(--yellow);
   font-size: 16px
}

.drama-section {
   padding-top: 47px
}

.drama-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px 17px
}

.drama-card {
   min-width: 0
}

.poster-link {
   display: block
}

.poster-frame {
   position: relative;
   overflow: hidden;
   aspect-ratio: 3/4;
   border-radius: 16px;
   background: #24241b;
   border: 1px solid rgba(255, 255, 255, .07);
   isolation: isolate
}

.poster-frame:after {
   content: "";
   position: absolute;
   inset: 40% 0 0;
   background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .2));
   pointer-events: none
}

.poster-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform .55s cubic-bezier(.2, .65, .2, 1), filter .35s
}

.poster-link:hover .poster-frame img {
   transform: scale(1.055);
   filter: saturate(1.06)
}

.poster-tag,
.poster-rank {
   position: absolute;
   z-index: 2;
   left: 10px;
   top: 10px;
   padding: 5px 8px;
   border-radius: 7px;
   background: rgba(13, 13, 8, .76);
   border: 1px solid rgba(255, 255, 255, .16);
   backdrop-filter: blur(8px);
   font-size: 10px;
   color: #f8f1cf;
   font-weight: 800
}

.poster-rank {
   background: var(--yellow);
   color: #211b06;
   border-color: transparent
}

.poster-play {
   position: absolute;
   z-index: 2;
   right: 12px;
   bottom: 12px;
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   padding-left: 2px;
   border-radius: 50%;
   background: rgba(255, 212, 59, .95);
   color: #171407;
   font-size: 12px;
   opacity: 0;
   transform: translateY(6px);
   transition: .25s
}

.poster-link:hover .poster-play {
   opacity: 1;
   transform: translateY(0)
}

.poster-info {
   padding: 12px 2px 0
}

.poster-title {
   font-size: 14px;
   font-weight: 800;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: color .2s
}

.poster-link:hover .poster-title {
   color: var(--yellow)
}

.poster-meta {
   display: flex;
   justify-content: space-between;
   gap: 8px;
   margin-top: 5px;
   font-size: 10px;
   color: #aaa797
}

.score {
   color: var(--yellow);
   font-weight: 800
}

.weekly-band {
   max-width: 1188px;
   margin: 40px auto 15px;
   padding: 32px 34px;
   border-radius: 25px;
   border: 1px solid rgba(255, 212, 59, .16);
   background: radial-gradient(ellipse at 88% 25%, rgba(255, 208, 40, .13), transparent 34%), linear-gradient(120deg, #222116, #17170f 60%, #1c1c12);
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 38px;
   align-items: center
}

.weekly-copy h2 {
   font-size: 37px;
   line-height: 1.17;
   letter-spacing: -.05em;
   margin: 10px 0 12px
}

.weekly-copy h2 em {
   font-style: normal;
   color: var(--yellow)
}

.weekly-copy p {
   color: var(--muted);
   font-size: 13px;
   max-width: 270px;
   margin-bottom: 21px
}

.btn-outline {
   min-height: 43px;
   padding: 0 16px;
   border-color: rgba(255, 255, 255, .18);
   background: rgba(255, 255, 255, .025);
   color: #f5f0df
}

.weekly-picks {
   display: grid;
   gap: 10px
}

.weekly-mini {
   display: flex;
   align-items: center;
   gap: 13px;
   min-width: 0;
   padding: 9px;
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 14px;
   background: rgba(0, 0, 0, .15);
   transition: transform .2s, border-color .2s
}

.weekly-mini:hover {
   transform: translateX(4px);
   border-color: rgba(255, 212, 59, .25)
}

.weekly-mini img {
   width: 58px;
   height: 70px;
   object-fit: cover;
   border-radius: 8px;
   flex: 0 0 58px
}

.weekly-mini span {
   display: flex;
   flex-direction: column;
   min-width: 0
}

.weekly-mini small {
   font-size: 10px;
   color: var(--green)
}

.weekly-mini strong {
   font-size: 13px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin: 2px 0
}

.weekly-mini i {
   font-style: normal;
   color: var(--yellow);
   font-size: 10px
}

.zone-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px
}

.zone-card {
   position: relative;
   overflow: hidden;
   min-height: 310px;
   border-radius: 19px;
   border: 1px solid var(--line);
   background: #1b1b13;
   isolation: isolate
}

.zone-card>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   opacity: .65;
   transition: transform .6s, opacity .3s
}

.zone-card:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(7, 7, 5, .08), rgba(7, 7, 5, .88));
   z-index: 0
}

.zone-card:hover>img {
   transform: scale(1.06);
   opacity: .82
}

.zone-number {
   position: absolute;
   top: 17px;
   right: 17px;
   z-index: 1;
   font-size: 12px;
   font-weight: 800;
   color: var(--yellow);
   letter-spacing: .1em
}

.zone-card>div {
   position: absolute;
   z-index: 1;
   left: 22px;
   right: 20px;
   bottom: 20px
}

.zone-card small {
   font-size: 9px;
   letter-spacing: .16em;
   color: var(--yellow);
   font-weight: 800
}

.zone-card h3 {
   font-size: 25px;
   margin: 5px 0 4px;
   letter-spacing: -.04em
}

.zone-card p {
   font-size: 12px;
   color: #d1cdbd;
   margin: 0 0 14px
}

.zone-card b {
   font-size: 11px;
   color: var(--yellow)
}

.rank-preview {
   border-top: 1px solid var(--line)
}

.rank-row {
   display: grid;
   grid-template-columns: 48px 56px minmax(0, 1fr) 72px 22px;
   align-items: center;
   gap: 15px;
   padding: 13px 12px;
   border-bottom: 1px solid var(--line);
   transition: background .2s
}

.rank-row:hover {
   background: rgba(255, 255, 255, .035)
}

.rank-num {
   font-size: 21px;
   font-weight: 900;
   color: #777566;
   font-variant-numeric: tabular-nums
}

.rank-n1,
.rank-n2,
.rank-n3 {
   color: var(--yellow)
}

.rank-row img {
   width: 56px;
   height: 67px;
   object-fit: cover;
   border-radius: 9px
}

.rank-name {
   display: flex;
   flex-direction: column;
   min-width: 0
}

.rank-name strong {
   font-size: 14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.rank-name small {
   font-size: 10px;
   color: var(--muted);
   margin-top: 4px
}

.rank-score {
   font-size: 12px;
   color: var(--yellow);
   font-weight: 800
}

.rank-arrow {
   font-size: 17px;
   color: #8c8978
}

.download-banner {
   position: relative;
   max-width: 1188px;
   min-height: 330px;
   margin: 50px auto 25px;
   padding: 40px 50px;
   border-radius: 27px;
   border: 1px solid rgba(255, 212, 59, .22);
   overflow: hidden;
   background: linear-gradient(115deg, #272415, #17170f 65%, #202013);
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   align-items: center
}

.download-banner:before {
   content: "";
   position: absolute;
   width: 520px;
   height: 520px;
   right: -30px;
   top: -190px;
   background: radial-gradient(circle, rgba(255, 211, 50, .16), transparent 68%)
}

.download-copy {
   position: relative;
   z-index: 2
}

.download-copy h2 {
   font-size: 39px;
   line-height: 1.15;
   letter-spacing: -.05em;
   margin: 10px 0 12px
}

.download-copy h2 em {
   font-style: normal;
   color: var(--yellow)
}

.download-copy p {
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 23px
}

.download-cta .download-link {
   min-height: 52px;
   padding: 0 22px
}

.download-visual {
   height: 250px;
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center
}

.phone-shell {
   position: relative;
   width: 140px;
   height: 245px;
   padding: 7px;
   border-radius: 28px;
   background: #090906;
   border: 2px solid #55503b;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
   transform: rotate(7deg);
   overflow: hidden
}

.phone-shell>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 21px;
   opacity: .8
}

.phone-speaker {
   position: absolute;
   z-index: 2;
   top: 11px;
   left: 50%;
   transform: translateX(-50%);
   width: 43px;
   height: 7px;
   background: #090906;
   border-radius: 9px
}

.phone-glass {
   position: absolute;
   inset: 0;
   border-radius: 21px;
   background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .82));
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 15px 12px
}

.phone-glass span {
   font-size: 7px;
   color: var(--yellow);
   letter-spacing: .1em
}

.phone-glass strong {
   font-size: 18px;
   line-height: 1.25;
   margin: 7px 0
}

.phone-glass i {
   font-style: normal;
   color: var(--yellow);
   font-size: 9px;
   letter-spacing: 3px
}

.download-floating {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, .13);
   background: rgba(19, 19, 12, .8);
   padding: 9px 12px;
   border-radius: 11px;
   font-size: 11px;
   color: #f7f0d5;
   backdrop-filter: blur(12px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
}

.floating-a {
   right: 4px;
   top: 25px
}

.floating-b {
   left: 2px;
   bottom: 28px
}

.download-orbit {
   position: absolute;
   border: 1px solid rgba(255, 212, 59, .12);
   border-radius: 50%;
   width: 300px;
   height: 300px;
   right: 3%;
   top: 50%;
   transform: translateY(-50%)
}

.orbit-two {
   width: 230px;
   height: 230px;
   right: 7%;
   border-style: dashed
}

.comments-section {
   padding-top: 32px
}

.comment-track {
   overflow: hidden;
   mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
}

.comment-run {
   display: flex;
   gap: 12px;
   width: max-content;
   animation: comment-marquee 36s linear infinite
}

.comment-track:hover .comment-run {
   animation-play-state: paused
}

.comment-chip {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 270px;
   padding: 13px 15px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .035);
   border: 1px solid var(--line)
}

.comment-avatar {
   width: 35px;
   height: 35px;
   flex: 0 0 35px;
   display: grid;
   place-items: center;
   border-radius: 12px;
   background: linear-gradient(135deg, #ffe76d, #8ecb32);
   color: #201b08;
   font-size: 14px;
   font-weight: 900
}

.comment-chip span:nth-child(2) {
   display: flex;
   flex-direction: column;
   min-width: 0
}

.comment-chip strong {
   font-size: 11px
}

.comment-chip small {
   font-size: 10px;
   color: var(--muted);
   white-space: nowrap
}

.comment-chip>b {
   margin-left: auto;
   color: var(--yellow)
}

@keyframes comment-marquee {
   to {
      transform: translateX(-50%)
   }
}

.faq-section {
   padding-top: 55px;
   padding-bottom: 60px
}

.faq-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px
}

.faq-grid details,
.faq-full-grid details {
   background: rgba(255, 255, 255, .032);
   border: 1px solid var(--line);
   border-radius: 13px;
   padding: 0 17px;
   transition: border-color .2s
}

.faq-grid details[open],
.faq-full-grid details[open] {
   border-color: rgba(255, 212, 59, .28)
}

summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 16px 0;
   font-size: 13px;
   font-weight: 800
}

summary::-webkit-details-marker {
   display: none
}

summary span {
   color: var(--yellow);
   font-size: 18px;
   transition: transform .2s
}

details[open] summary span {
   transform: rotate(45deg)
}

details p {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.8;
   margin: 0 0 17px
}

.site-footer {
   border-top: 1px solid var(--line);
   padding: 29px max(26px, calc((100% - var(--max))/2 + 26px)) 22px;
   background: rgba(0, 0, 0, .12)
}

.footer-top {
   display: flex;
   align-items: center;
   gap: 22px;
   padding-bottom: 22px;
   border-bottom: 1px solid var(--line)
}

.footer-brand {
   width: 180px;
   flex: 0 0 180px
}

.footer-brand img {
   width: 100%;
   height: auto
}

.footer-top p {
   font-size: 12px;
   color: var(--muted);
   margin: 0
}

.back-top {
   margin-left: auto;
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255, 212, 59, .3);
   border-radius: 50%;
   color: var(--yellow);
   font-size: 20px;
   transition: .2s
}

.back-top:hover {
   background: var(--yellow);
   color: #171407;
   transform: translateY(-3px)
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding-top: 15px;
   border-top: 1px solid rgba(255, 255, 255, .06);
   color: #777668;
   font-size: 10px
}

.page-hero {
   max-width: var(--max);
   min-height: 340px;
   padding: 53px 26px 44px;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr .65fr;
   align-items: center;
   gap: 44px
}

.page-hero-copy h1 {
   font-size: clamp(38px, 5vw, 58px);
   letter-spacing: -.055em;
   line-height: 1.15;
   margin: 20px 0 13px
}

.page-hero-copy>p {
   font-size: 14px;
   color: var(--muted);
   max-width: 510px;
   margin-bottom: 18px
}

.breadcrumb {
   display: flex;
   gap: 8px;
   color: #777668;
   font-size: 11px;
   margin-bottom: 22px
}

.breadcrumb a {
   color: #c8c3b0
}

.page-hero-actions {
   display: flex;
   align-items: center;
   gap: 11px
}

.btn-yellow {
   background: linear-gradient(135deg, #ffe46b, #ffc928);
   color: #171407
}

.page-download .download-link {
   min-height: 46px
}

.page-hero-art {
   position: relative;
   width: 100%;
   max-width: 300px;
   justify-self: end;
   aspect-ratio: 3/3.5;
   overflow: hidden;
   border-radius: 21px;
   border: 1px solid rgba(255, 255, 255, .14);
   box-shadow: var(--shadow);
   transform: rotate(2deg)
}

.page-hero-art img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.page-art-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   padding: 22px;
   background: linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, .8))
}

.page-art-overlay strong {
   font-size: 23px;
   line-height: 1.2;
   margin: 8px 0
}

.page-art-overlay>span:last-child {
   font-size: 11px;
   color: #e5dfcb
}

.page-art-overlay i {
   font-style: normal;
   color: var(--yellow);
   margin: 0 5px
}

.page-content-section {
   padding-top: 23px;
   min-height: 420px
}

.result-count {
   font-size: 11px;
   color: #aaa797;
   padding-bottom: 4px;
   white-space: nowrap
}

.page-drama-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   padding-bottom: 25px
}

.faq-full {
   padding-top: 28px;
   min-height: 460px
}

.faq-full-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.faq-full-grid details {
   padding: 0 20px
}

.faq-full-grid summary {
   font-size: 14px;
   padding: 20px 0
}

.faq-full-grid details p {
   font-size: 13px
}

.reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1)
}

.reveal.is-visible {
   opacity: 1;
   transform: translateY(0)
}

.drama-card:nth-child(4n+2).reveal {
   transition-delay: .04s
}

.drama-card:nth-child(4n+3).reveal {
   transition-delay: .08s
}

.drama-card:nth-child(4n+4).reveal {
   transition-delay: .12s
}

.page-board .rank-row:nth-child(-n+3) {
   background: linear-gradient(90deg, rgba(255, 212, 59, .04), transparent 45%)
}

.page-board .page-content-section {
   padding-top: 25px
}

.page-board .poster-frame .poster-rank {
   font-size: 10px
}

.page-board .drama-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr))
}

.page-schedule .poster-tag {
   background: rgba(142, 194, 41, .86);
   color: #111307
}

.page-suspense .page-hero-art {
   box-shadow: 0 22px 60px rgba(114, 147, 53, .12)
}

@media(min-width:1400px) {
   .hero-section {
      padding-top: 84px;
      padding-bottom: 78px
   }

   .hero-showcase {
      max-width: 500px
   }

   .hero-section {
      min-height: 620px
   }
}

@media(max-width:1080px) {
   .desktop-nav {
      gap: 15px
   }

   .desktop-nav .nav-link {
      font-size: 12px
   }

   .brand {
      width: 175px;
      flex-basis: 175px
   }

   .header-inner {
      gap: 18px;
      padding: 0 22px
   }

   .hero-section {
      gap: 30px
   }

   .hero-copy h1 {
      font-size: 60px
   }

   .category-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .drama-grid,
   .page-drama-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 20px 13px
   }

   .weekly-band,
   .download-banner {
      margin-left: 22px;
      margin-right: 22px
   }
}

@media(max-width:820px) {
   .site-header {
      height: 76px
   }

   .header-inner {
      padding: 0 18px;
      gap: 12px
   }

   .brand {
      width: 165px;
      flex-basis: 165px
   }

   .desktop-nav {
      display: none
   }

   .header-actions {
      margin-left: auto
   }

   .category-trigger {
      padding: 10px 12px
   }

   .header-qr .download-link {
      min-height: 42px;
      padding: 0 14px;
      font-size: 12px
   }

   .hero-section {
      grid-template-columns: 1fr .88fr;
      padding: 52px 22px 48px;
      gap: 22px;
      min-height: 480px
   }

   .hero-copy h1 {
      font-size: clamp(42px, 6.5vw, 58px)
   }

   .hero-lead {
      font-size: 13px
   }

   .hero-proof {
      gap: 10px
   }

   .hero-showcase {
      padding: 9px;
      border-radius: 19px
   }

   .showcase-caption {
      left: 17px;
      bottom: 18px
   }

   .showcase-caption strong {
      font-size: 24px
   }

   .showcase-play {
      width: 38px;
      height: 38px;
      right: 15px;
      bottom: 17px
   }

   .section-wrap {
      padding: 42px 22px
   }

   .drama-grid,
   .page-drama-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px 13px
   }

   .weekly-band {
      padding: 25px;
      gap: 20px
   }

   .zone-card {
      min-height: 270px
   }

   .download-banner {
      padding: 33px;
      min-height: 300px
   }

   .download-copy h2 {
      font-size: 33px
   }

   .download-visual {
      transform: scale(.9)
   }

   .page-hero {
      padding: 44px 22px 35px;
      gap: 28px
   }

   .page-hero-copy h1 {
      font-size: 43px
   }

   .page-hero-art {
      max-width: 250px
   }

   .site-footer {
      padding-left: 22px;
      padding-right: 22px
   }
}

@media(max-width:560px) {
   html {
      scroll-padding-top: 76px
   }

   .site-header {
      height: 70px
   }

   .header-inner {
      padding: 0 13px;
      gap: 9px
   }

   .brand {
      width: 139px;
      flex-basis: 139px
   }

   .category-trigger {
      border: 0;
      padding: 9px 5px;
      gap: 6px;
      font-size: 12px
   }

   .category-lines {
      width: 14px
   }

   .header-actions {
      gap: 5px
   }

   .header-qr .download-link {
      min-height: 39px;
      padding: 0 11px;
      border-radius: 10px;
      font-size: 11px;
      gap: 5px
   }

   .header-qr .download-link span {
      font-size: 14px
   }

   .header-qr .qr-popover {
      display: none
   }

   .site-drawer {
      width: 100vw;
      padding: 22px 20px 18px
   }

   .drawer-head h2 {
      font-size: 25px
   }

   .drawer-menu {
      grid-template-columns: 1fr;
      gap: 5px
   }

   .drawer-link {
      min-height: 44px;
      padding: 8px 11px
   }

   .drawer-footer {
      align-items: center
   }

   .drawer-download .qr-popover {
      display: none
   }

   .hero-section {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 39px 17px 35px;
      gap: 28px;
      min-height: unset
   }

   .hero-copy {
      padding: 0
   }

   .hero-kicker {
      font-size: 9px;
      gap: 8px
   }

   .hero-copy h1 {
      font-size: 48px;
      margin: 17px 0 13px
   }

   .hero-lead {
      font-size: 13px;
      line-height: 1.8;
      margin-bottom: 17px
   }

   .hero-tags {
      gap: 7px;
      margin-bottom: 19px
   }

   .hero-tags a {
      font-size: 11px;
      padding: 6px 10px
   }

   .hero-actions {
      gap: 9px
   }

   .hero-actions .download-link,
   .hero-actions .btn {
      min-height: 46px;
      padding: 0 15px;
      font-size: 12px
   }

   .hero-actions .qr-popover {
      display: none
   }

   .hero-proof {
      margin-top: 19px;
      gap: 12px;
      font-size: 10px
   }

   .hero-showcase {
      width: 100%;
      max-width: unset;
      transform: none;
      padding: 9px;
      border-radius: 18px
   }

   .showcase-poster {
      aspect-ratio: 4/3.8
   }

   .showcase-caption strong {
      font-size: 26px
   }

   .showcase-desc {
      font-size: 11px
   }

   .showcase-bottom {
      font-size: 9px
   }

   .section-wrap {
      padding: 35px 17px
   }

   .section-heading {
      align-items: flex-start;
      margin-bottom: 18px;
      gap: 10px
   }

   .section-heading h2 {
      font-size: 27px
   }

   .section-heading p {
      font-size: 11px;
      line-height: 1.65
   }

   .text-link {
      font-size: 10px;
      padding-top: 9px
   }

   .category-section {
      padding-top: 14px
   }

   .category-grid {
      grid-template-columns: 1fr 1fr;
      gap: 9px
   }

   .category-card {
      min-height: 132px;
      padding: 15px 12px;
      gap: 10px;
      border-radius: 15px
   }

   .category-symbol {
      width: 31px;
      height: 31px;
      flex-basis: 31px;
      border-radius: 10px;
      font-size: 18px
   }

   .category-card small {
      font-size: 8px
   }

   .category-card h3 {
      font-size: 14px;
      margin: 4px 0
   }

   .category-card p {
      font-size: 9px;
      line-height: 1.5
   }

   .category-go {
      right: 10px;
      top: 9px;
      font-size: 13px
   }

   .drama-section {
      padding-top: 31px
   }

   .drama-grid,
   .page-drama-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 19px 11px
   }

   .poster-frame {
      border-radius: 13px
   }

   .poster-tag,
   .poster-rank {
      left: 7px;
      top: 7px;
      font-size: 9px;
      padding: 4px 6px
   }

   .poster-info {
      padding-top: 9px
   }

   .poster-title {
      font-size: 12px
   }

   .poster-meta {
      font-size: 9px
   }

   .poster-play {
      width: 29px;
      height: 29px;
      opacity: 1;
      transform: none;
      right: 8px;
      bottom: 8px;
      font-size: 10px
   }

   .weekly-band {
      margin: 18px 13px 5px;
      padding: 22px 17px;
      grid-template-columns: 1fr;
      gap: 20px;
      border-radius: 20px
   }

   .weekly-copy h2 {
      font-size: 31px
   }

   .weekly-copy p {
      font-size: 12px;
      margin-bottom: 16px
   }

   .weekly-picks {
      grid-template-columns: 1fr;
      gap: 8px
   }

   .weekly-mini img {
      width: 51px;
      height: 62px;
      flex-basis: 51px
   }

   .weekly-mini strong {
      font-size: 12px
   }

   .zone-grid {
      grid-template-columns: 1fr;
      gap: 11px
   }

   .zone-card {
      min-height: 230px
   }

   .zone-card>div {
      left: 18px;
      bottom: 17px
   }

   .zone-card h3 {
      font-size: 23px
   }

   .rank-row {
      grid-template-columns: 32px 48px minmax(0, 1fr) 54px;
      gap: 10px;
      padding: 10px 2px
   }

   .rank-row img {
      width: 48px;
      height: 59px
   }

   .rank-num {
      font-size: 16px
   }

   .rank-name strong {
      font-size: 12px
   }

   .rank-name small {
      font-size: 9px
   }

   .rank-score {
      font-size: 10px
   }

   .rank-arrow {
      display: none
   }

   .download-banner {
      margin: 28px 13px 12px;
      padding: 27px 20px 0;
      grid-template-columns: 1fr;
      min-height: unset;
      border-radius: 22px
   }

   .download-copy h2 {
      font-size: 32px
   }

   .download-copy p {
      font-size: 12px
   }

   .download-cta .download-link {
      min-height: 47px;
      font-size: 12px;
      padding: 0 15px
   }

   .download-cta .qr-popover {
      display: none
   }

   .download-visual {
      height: 205px;
      transform: none;
      margin-top: 5px
   }

   .phone-shell {
      height: 200px;
      width: 115px;
      border-radius: 24px
   }

   .phone-glass {
      padding: 12px 9px
   }

   .phone-glass strong {
      font-size: 16px
   }

   .download-floating {
      font-size: 10px;
      padding: 7px 9px
   }

   .floating-a {
      right: 3px;
      top: 20px
   }

   .floating-b {
      left: 2px;
      bottom: 20px
   }

   .download-orbit {
      width: 230px;
      height: 230px;
      right: 10%;
      top: auto;
      bottom: -45px;
      transform: none
   }

   .orbit-two {
      width: 170px;
      height: 170px;
      right: 16%;
      top: auto;
      bottom: -15px
   }

   .comments-section {
      padding-top: 25px
   }

   .comment-chip {
      min-width: 250px;
      padding: 10px
   }

   .comment-avatar {
      width: 31px;
      height: 31px;
      flex-basis: 31px
   }

   .comment-chip small {
      font-size: 9px
   }

   .faq-section {
      padding-top: 35px;
      padding-bottom: 38px
   }

   .faq-grid,
   .faq-full-grid {
      grid-template-columns: 1fr;
      gap: 8px
   }

   .faq-grid details {
      padding: 0 13px
   }

   .faq-grid summary {
      font-size: 12px;
      padding: 14px 0
   }

   .faq-grid details p {
      font-size: 11px
   }

   .site-footer {
      padding: 23px 17px 18px
   }

   .footer-top {
      gap: 13px;
      flex-wrap: wrap;
      padding-bottom: 17px
   }

   .footer-brand {
      width: 145px;
      flex-basis: 145px
   }

   .footer-top p {
      font-size: 10px;
      flex: 1
   }

   .back-top {
      width: 34px;
      height: 34px
   }

   .footer-bottom {
      flex-wrap: wrap;
      font-size: 9px;
      gap: 7px
   }

   .page-hero {
      grid-template-columns: 1fr;
      padding: 35px 17px 24px;
      gap: 22px
   }

   .page-hero-copy h1 {
      font-size: 39px;
      margin: 16px 0 10px
   }

   .page-hero-copy>p {
      font-size: 12px;
      line-height: 1.8;
      margin-bottom: 13px
   }

   .breadcrumb {
      margin-bottom: 17px
   }

   .page-hero-actions .btn,
   .page-hero-actions .download-link {
      min-height: 43px;
      font-size: 11px;
      padding: 0 14px
   }

   .page-download .qr-popover {
      display: none
   }

   .page-hero-art {
      justify-self: start;
      max-width: none;
      width: 100%;
      height: 205px;
      aspect-ratio: auto;
      transform: none;
      border-radius: 17px
   }

   .page-hero-art img {
      object-position: center 36%
   }

   .page-art-overlay {
      padding: 16px
   }

   .page-art-overlay strong {
      font-size: 21px;
      margin: 5px 0
   }

   .page-content-section {
      padding-top: 17px
   }

   .result-count {
      font-size: 9px
   }

   .faq-full {
      padding-top: 18px;
      min-height: unset
   }

   .faq-full-grid details {
      padding: 0 15px
   }

   .faq-full-grid summary {
      font-size: 12px;
      padding: 16px 0
   }

   .faq-full-grid details p {
      font-size: 11px
   }

   .page-faq .page-hero-art {
      display: none
   }

   .reveal {
      transform: translateY(14px);
      transition-duration: .5s
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *:before,
   *:after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
   }

   .reveal {
      opacity: 1;
      transform: none
   }
}

/* ─────────────────────────────────────────────────────────────
   Huangguo Studio 2.0 — art direction: fruit-lacquer, editorial grid,
   poster gallery, vivid yellow-green accents and tactile micro-motion.
   ───────────────────────────────────────────────────────────── */
:root {
   --bg: #0b0c08;
   --panel: #15170f;
   --panel2: #202318;
   --line: rgba(255, 255, 255, .11);
   --text: #fbf7e9;
   --muted: #b9b8a9;
   --yellow: #ffdc46;
   --yellow2: #f8ad17;
   --green: #a7e63b;
   --radius: 24px;
   --shadow: 0 28px 90px rgba(0, 0, 0, .42)
}

body {
   background: #0b0c08;
   letter-spacing: -.012em
}

body:before {
   background: radial-gradient(ellipse at 78% 3%, rgba(255, 213, 55, .13), transparent 30%), radial-gradient(ellipse at 8% 36%, rgba(130, 191, 43, .105), transparent 31%), radial-gradient(ellipse at 90% 80%, rgba(255, 170, 24, .055), transparent 25%), linear-gradient(180deg, #10110b, #090a07 72%)
}

.site-header {
   background: rgba(10, 11, 7, .88);
   border-bottom: 1px solid rgba(255, 220, 70, .14);
   box-shadow: 0 8px 35px rgba(0, 0, 0, .16)
}

.brand img,
.footer-brand img {
   filter: drop-shadow(0 5px 14px rgba(255, 206, 35, .1))
}

.category-trigger {
   border-radius: 999px;
   background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
   padding: 11px 16px
}

.download-link {
   background: linear-gradient(115deg, #fff07c 0%, #ffdb42 48%, #ffbb27 100%);
   box-shadow: 0 10px 28px rgba(255, 204, 40, .18), inset 0 1px rgba(255, 255, 255, .6);
   border-radius: 999px;
   color: #191707
}

.download-link:hover {
   filter: saturate(1.08);
   transform: translateY(-3px) scale(1.015)
}

.qr-popover {
   border: 1px solid rgba(255, 220, 70, .45);
   box-shadow: 0 22px 65px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 220, 70, .045);
   border-radius: 20px
}

.hero-section {
   isolation: isolate;
   padding-top: 78px;
   padding-bottom: 70px;
   gap: 58px
}

.hero-section:after {
   content: "";
   position: absolute;
   z-index: -1;
   left: -9%;
   top: 18%;
   width: 45%;
   height: 70%;
   border: 1px solid rgba(255, 220, 70, .09);
   border-radius: 48% 52% 58% 42%;
   transform: rotate(-17deg);
   pointer-events: none
}

.hero-copy h1 {
   font-size: clamp(48px, 6.2vw, 82px);
   line-height: 1.04;
   letter-spacing: -.075em;
   text-shadow: 0 14px 42px rgba(0, 0, 0, .3)
}

.hero-copy h1 span {
   background: linear-gradient(105deg, #fff39a 0%, #ffd43b 43%, #b8ef4c 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: none
}

.hero-lead {
   max-width: 480px;
   font-size: 15px;
   line-height: 2;
   color: #d0cebf
}

.hero-tags a {
   border-radius: 8px 18px 8px 18px;
   padding: 8px 13px;
   background: linear-gradient(120deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018))
}

.hero-showcase {
   position: relative;
   padding: 12px;
   border-radius: 28px;
   background: linear-gradient(140deg, rgba(255, 220, 70, .19), rgba(255, 255, 255, .035) 42%, rgba(154, 221, 49, .11));
   border: 1px solid rgba(255, 220, 70, .2);
   box-shadow: 0 28px 95px rgba(0, 0, 0, .38);
   transform: rotate(1.4deg);
   transition: transform .5s cubic-bezier(.2, .75, .2, 1), box-shadow .5s
}

.hero-showcase:hover {
   transform: rotate(0) translateY(-5px);
   box-shadow: 0 38px 110px rgba(0, 0, 0, .48)
}

.showcase-top {
   padding: 5px 5px 13px;
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase
}

.showcase-poster {
   aspect-ratio: 3/4.05;
   border-radius: 19px;
   overflow: hidden;
   isolation: isolate;
   background: #202016;
   position: relative
}

.showcase-poster img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 28%;
   transition: transform .8s cubic-bezier(.2, .75, .2, 1), filter .5s
}

.showcase-poster:hover img {
   transform: scale(1.055);
   filter: saturate(1.08)
}

.showcase-shade {
   background: linear-gradient(180deg, rgba(5, 6, 4, .03) 24%, rgba(5, 6, 4, .18) 45%, rgba(5, 6, 4, .94) 100%)
}

.showcase-stamp {
   text-align: center;
   left: 18px;
   top: 18px;
   padding: 7px 10px;
   border: 1px solid rgba(255, 255, 255, .35);
   border-radius: 7px;
   background: rgba(8, 9, 5, .3);
   backdrop-filter: blur(12px);
   font-size: 10px;
   letter-spacing: .18em
}

.showcase-caption {
   left: 24px;
   bottom: 25px;
   right: 25px
}

.showcase-caption small {
   font-size: 10px;
   letter-spacing: .15em;
   color: #e8dc9e
}

.showcase-caption strong {
   font-size: clamp(26px, 3vw, 38px);
   letter-spacing: -.055em;
   text-shadow: 0 5px 25px #000
}

.showcase-desc {
   max-width: 85%;
   font-size: 12px;
   color: #e0dece
}

.showcase-play {
   width: 49px;
   height: 49px;
   right: 22px;
   bottom: 25px;
   border: 1px solid rgba(255, 255, 255, .48);
   background: rgba(255, 220, 70, .95);
   color: #191707;
   box-shadow: 0 0 0 8px rgba(255, 220, 70, .12);
   transition: transform .3s, box-shadow .3s
}

.showcase-poster:hover .showcase-play {
   transform: scale(1.08);
   box-shadow: 0 0 0 12px rgba(255, 220, 70, .14)
}

.showcase-edge-label {
   position: absolute;
   right: 10px;
   top: 50%;
   writing-mode: vertical-rl;
   transform: translateY(-50%);
   font-size: 8px;
   letter-spacing: .24em;
   color: rgba(255, 255, 255, .68);
   z-index: 3
}

.showcase-bottom {
   padding: 14px 7px 3px;
   font-size: 10px
}

.section-wrap {
   padding-top: 62px;
   padding-bottom: 62px
}

.section-heading {
   align-items: flex-end;
   margin-bottom: 27px
}

.section-heading h2 {
   font-size: clamp(27px, 3vw, 38px);
   letter-spacing: -.055em
}

.section-heading h2 em {
   font-style: normal;
   color: var(--yellow);
   font-size: .76em;
   margin-left: 7px
}

.section-heading p {
   font-size: 12px;
   color: #aaa997
}

.eyebrow {
   color: #ffe46a;
   letter-spacing: .22em;
   font-size: 9px
}

.category-section {
   padding-top: 22px
}

.category-card {
   min-height: 152px;
   padding: 22px 21px;
   border-radius: 9px 24px 9px 24px;
   background: linear-gradient(125deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018));
   border-color: rgba(255, 255, 255, .09);
   overflow: hidden;
   transition: transform .35s, border-color .35s, background .35s
}

.category-card:after {
   content: "";
   position: absolute;
   width: 110px;
   height: 110px;
   right: -32px;
   bottom: -48px;
   border-radius: 50%;
   border: 1px solid rgba(255, 220, 70, .2);
   box-shadow: 0 0 0 15px rgba(255, 220, 70, .025), 0 0 0 31px rgba(255, 220, 70, .018);
   transition: transform .45s
}

.category-card:hover {
   transform: translateY(-5px);
   border-color: rgba(255, 220, 70, .4);
   background: linear-gradient(125deg, rgba(255, 220, 70, .09), rgba(255, 255, 255, .025))
}

.category-card:hover:after {
   transform: scale(1.18)
}

.category-symbol {
   border-radius: 9px 15px 9px 15px;
   background: linear-gradient(145deg, rgba(255, 220, 70, .2), rgba(255, 220, 70, .045));
   border: 1px solid rgba(255, 220, 70, .18);
   color: var(--yellow)
}

.drama-grid {
   gap: 28px 18px;
   align-items: start;
   perspective: 1200px
}

.drama-card {
   min-width: 0;
   position: relative;
   transition: transform .4s cubic-bezier(.2, .75, .2, 1), filter .35s
}

.drama-card:nth-child(5n+1) {
   transform: translateY(-7px)
}

.drama-card:nth-child(5n+3) {
   transform: translateY(8px)
}

.drama-card.is-visible:nth-child(5n+1) {
   transition-delay: .025s
}

.drama-card:hover {
   transform: translateY(-7px) rotateY(-2deg);
   z-index: 2
}

.drama-card:nth-child(5n+1):hover,
.drama-card:nth-child(5n+3):hover {
   transform: translateY(-9px) rotateY(-2deg)
}

.poster-link {
   display: block;
   min-width: 0
}

.poster-frame {
   aspect-ratio: 3/4.12;
   border-radius: 15px 15px 22px 15px;
   background: #1b1c14;
   border: 1px solid rgba(255, 255, 255, .12);
   box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
   overflow: hidden;
   isolation: isolate
}

.poster-frame:after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(7, 8, 4, .03) 35%, rgba(7, 8, 4, .06) 53%, rgba(7, 8, 4, .64) 100%);
   opacity: .9
}

.poster-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 25%;
   transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .5s
}

.drama-card:hover .poster-frame img {
   transform: scale(1.055);
   filter: saturate(1.08) contrast(1.025)
}

.poster-tag,
.poster-rank {
   z-index: 3;
   left: 10px;
   top: 10px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 6px 11px 6px 11px;
   background: rgba(12, 13, 8, .76);
   backdrop-filter: blur(12px);
   color: #fff4b4;
   padding: 6px 8px;
   font-size: 9px;
   letter-spacing: .03em
}

.poster-rank {
   left: auto;
   right: 9px;
   background: linear-gradient(120deg, #fff19a, #ffc62b);
   color: #171507;
   border: 0;
   font-weight: 950
}

.poster-play {
   z-index: 4;
   width: 37px;
   height: 37px;
   right: 12px;
   bottom: 12px;
   background: rgba(255, 220, 70, .96);
   color: #171507;
   box-shadow: 0 0 0 7px rgba(255, 220, 70, .12);
   opacity: 0;
   transform: translateY(5px) scale(.9);
   transition: opacity .3s, transform .3s
}

.drama-card:hover .poster-play {
   opacity: 1;
   transform: translateY(0) scale(1)
}

.poster-glint {
   position: absolute;
   z-index: 2;
   inset: -40% auto -40% -70%;
   width: 42%;
   transform: rotate(17deg);
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
   transition: left .8s cubic-bezier(.2, .75, .2, 1);
   pointer-events: none
}

.drama-card:hover .poster-glint {
   left: 130%
}

.poster-info {
   padding: 11px 2px 0
}

.poster-title {
   font-size: 14px;
   letter-spacing: -.025em;
   line-height: 1.45;
   white-space: normal;
   min-height: 2.8em
}

.poster-meta {
   font-size: 10px;
   color: #aaa998;
   gap: 7px;
   flex-wrap: wrap;
   margin-top: 5px
}

.poster-meta .score {
   color: #ffe16a;
   font-weight: 800;
   white-space: nowrap
}

.poster-desc {
   font-size: 10px;
   color: #8f9082;
   line-height: 1.6;
   margin: 7px 0 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.weekly-band {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   margin: 28px auto 10px;
   max-width: calc(var(--max) - 52px);
   padding: 34px 37px;
   border: 1px solid rgba(255, 220, 70, .18);
   border-radius: 12px 32px 12px 32px;
   background: linear-gradient(118deg, #1b1d12 0%, #14150e 48%, #24200d 100%);
   box-shadow: 0 24px 65px rgba(0, 0, 0, .22)
}

.weekly-band:before {
   content: "";
   position: absolute;
   z-index: -1;
   right: 20%;
   top: -130px;
   width: 300px;
   height: 300px;
   border: 1px solid rgba(255, 220, 70, .2);
   border-radius: 50%;
   box-shadow: 0 0 0 24px rgba(255, 220, 70, .025), 0 0 0 52px rgba(255, 220, 70, .018)
}

.weekly-copy h2 {
   font-size: 38px;
   letter-spacing: -.06em
}

.weekly-copy h2 em {
   font-style: normal;
   color: var(--yellow)
}

.weekly-picks {
   gap: 9px
}

.weekly-mini {
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
   padding: 10px 12px 10px 9px;
   border-radius: 10px 17px 10px 17px;
   border: 1px solid rgba(255, 255, 255, .09);
   background: rgba(255, 255, 255, .035);
   transition: transform .3s, border-color .3s, background .3s
}

.weekly-mini:hover {
   transform: translateX(4px);
   border-color: rgba(255, 220, 70, .32);
   background: rgba(255, 220, 70, .055)
}

.weekly-mini img {
   width: 54px;
   height: 69px;
   flex: 0 0 54px;
   object-fit: cover;
   border-radius: 7px
}

.weekly-mini span:not(.weekly-index) {
   min-width: 0
}

.weekly-mini small {
   font-size: 9px;
   color: #b4c77d
}

.weekly-mini strong {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 12px
}

.weekly-mini i {
   display: block;
   font-size: 10px;
   color: #ffe16a;
   font-style: normal;
   margin-top: 3px
}

.weekly-index {
   align-self: flex-start;
   color: rgba(255, 255, 255, .25);
   font-size: 10px;
   font-weight: 900;
   letter-spacing: .06em
}

.weekly-arrow {
   margin-left: auto;
   color: var(--yellow);
   font-size: 14px
}

.zone-grid {
   gap: 15px
}

.zone-card {
   min-height: 310px;
   border-radius: 10px 26px 10px 26px;
   border: 1px solid rgba(255, 255, 255, .13);
   box-shadow: 0 20px 45px rgba(0, 0, 0, .2);
   isolation: isolate;
   transition: transform .45s, border-color .35s
}

.zone-card:after {
   background: linear-gradient(180deg, rgba(6, 7, 4, .03) 20%, rgba(6, 7, 4, .35) 51%, rgba(6, 7, 4, .95) 100%)
}

.zone-card>img {
   transition: transform .85s cubic-bezier(.2, .7, .2, 1), filter .4s
}

.zone-card:hover {
   transform: translateY(-7px);
   border-color: rgba(255, 220, 70, .38)
}

.zone-card:hover>img {
   transform: scale(1.06);
   filter: saturate(1.13)
}

.zone-card>div {
   left: 23px;
   right: 20px;
   bottom: 22px;
   z-index: 3
}

.zone-card small {
   font-size: 9px;
   letter-spacing: .18em;
   color: #ffe47b
}

.zone-card h3 {
   font-size: 26px;
   letter-spacing: -.05em;
   margin: 7px 0 2px
}

.zone-card p {
   font-size: 11px;
   color: #d0cfbd
}

.zone-card b {
   font-size: 11px;
   display: flex;
   align-items: center;
   gap: 8px;
   color: #ffe46a
}

.zone-number {
   font-size: 12px;
   top: 15px;
   left: 17px;
   z-index: 3;
   color: #fff3a8
}

.zone-orbit {
   position: absolute;
   z-index: 2;
   right: -42px;
   top: 26px;
   width: 150px;
   height: 150px;
   border: 1px solid rgba(255, 229, 105, .35);
   border-radius: 50%;
   box-shadow: 0 0 0 16px rgba(255, 229, 105, .035), 0 0 0 32px rgba(255, 229, 105, .025);
   pointer-events: none;
   transition: transform .6s
}

.zone-card:hover .zone-orbit {
   transform: scale(1.18) rotate(22deg)
}

.rank-preview {
   border-top: 1px solid rgba(255, 255, 255, .09);
   border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.rank-row {
   position: relative;
   grid-template-columns: 44px 64px minmax(0, 1fr) 65px 20px;
   gap: 17px;
   padding: 14px 15px;
   border-bottom: 1px solid rgba(255, 255, 255, .075);
   transition: background .3s, transform .3s;
   padding-left: 13px
}

.rank-row:before {
   content: "";
   position: absolute;
   left: 0;
   top: 17%;
   bottom: 17%;
   width: 3px;
   border-radius: 5px;
   background: var(--yellow);
   transform: scaleY(0);
   transition: transform .25s
}

.rank-row:hover {
   background: linear-gradient(90deg, rgba(255, 220, 70, .075), rgba(255, 255, 255, .018));
   transform: translateX(4px)
}

.rank-row:hover:before {
   transform: scaleY(1)
}

.rank-row img {
   width: 64px;
   height: 78px;
   border-radius: 7px 12px 7px 7px;
   object-fit: cover
}

.rank-num {
   font-size: 23px;
   font-weight: 950;
   font-style: italic;
   color: rgba(255, 255, 255, .3);
   letter-spacing: -.06em
}

.rank-n1 {
   color: #ffe26a;
   text-shadow: 0 0 20px rgba(255, 220, 70, .17)
}

.rank-name strong {
   font-size: 14px
}

.rank-name small {
   font-size: 10px;
   color: #a9a997
}

.rank-score {
   color: #ffe26a;
   font-size: 11px;
   font-weight: 800
}

.rank-arrow {
   color: #c9d989
}

.download-banner {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   margin-top: 32px;
   margin-bottom: 30px;
   border-radius: 12px 34px 12px 34px;
   border: 1px solid rgba(255, 220, 70, .24);
   background: radial-gradient(ellipse at 72% 50%, rgba(157, 219, 47, .13), transparent 40%), linear-gradient(120deg, #202113, #11120b 55%, #26200d);
   box-shadow: 0 28px 80px rgba(0, 0, 0, .26)
}

.download-banner:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 48%;
   top: -180px;
   width: 450px;
   height: 450px;
   border: 1px solid rgba(255, 220, 70, .19);
   border-radius: 50%;
   box-shadow: 0 0 0 24px rgba(255, 220, 70, .025), 0 0 0 48px rgba(255, 220, 70, .02), 0 0 0 74px rgba(255, 220, 70, .015)
}

.download-copy h2 {
   font-size: clamp(32px, 4vw, 48px);
   letter-spacing: -.065em
}

.download-copy h2 em {
   font-style: normal;
   background: linear-gradient(90deg, #fff29b, #ffd33e, #b3e94d);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.download-visual {
   filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .38))
}

.phone-shell {
   border: 3px solid #77785b;
   background: #10110b;
   box-shadow: inset 0 0 0 4px #202116, 0 0 0 1px rgba(255, 220, 70, .24);
   overflow: hidden
}

.phone-shell>img {
   filter: saturate(.92)
}

.phone-glass {
   background: linear-gradient(180deg, rgba(10, 11, 6, .02), rgba(8, 9, 5, .85))
}

.download-floating {
   border: 1px solid rgba(255, 220, 70, .2);
   background: rgba(20, 22, 13, .84);
   box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
   backdrop-filter: blur(10px);
   border-radius: 9px 16px 9px 16px
}

.comment-track {
   border-top: 1px solid rgba(255, 220, 70, .15);
   border-bottom: 1px solid rgba(255, 220, 70, .15);
   padding: 11px 0
}

.comment-chip {
   background: linear-gradient(130deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 10px 18px 10px 18px
}

.comment-avatar {
   background: linear-gradient(140deg, #ffe56b, #9bd83c);
   color: #151608;
   font-weight: 950
}

.faq-grid details,
.faq-full-grid details {
   border-radius: 10px 18px 10px 18px;
   background: linear-gradient(125deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
   border-color: rgba(255, 255, 255, .1);
   transition: border-color .25s, background .25s
}

.faq-grid details[open],
.faq-full-grid details[open] {
   border-color: rgba(255, 220, 70, .35);
   background: linear-gradient(125deg, rgba(255, 220, 70, .075), rgba(255, 255, 255, .018))
}

.faq-grid summary span,
.faq-full-grid summary span {
   color: var(--yellow)
}

.site-footer {
   border-top: 1px solid rgba(255, 220, 70, .15);
   background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, .15))
}

.back-top {
   border-radius: 10px 17px 10px 17px;
   border-color: rgba(255, 220, 70, .28);
   background: rgba(255, 220, 70, .07);
   color: var(--yellow)
}

.page-hero {
   padding-top: 66px;
   padding-bottom: 52px;
   gap: 70px;
   isolation: isolate
}

.page-hero:before {
   content: "";
   position: absolute;
   z-index: -1;
   right: 3%;
   top: 8%;
   width: 380px;
   height: 380px;
   border-radius: 50%;
   border: 1px solid rgba(255, 220, 70, .13);
   box-shadow: 0 0 0 22px rgba(255, 220, 70, .02), 0 0 0 44px rgba(255, 220, 70, .015);
   pointer-events: none
}

.page-hero-copy h1 {
   font-size: clamp(40px, 5.1vw, 66px);
   letter-spacing: -.07em
}

.page-hero-copy>p {
   font-size: 14px;
   line-height: 1.9;
   color: #c6c4b6
}

.page-hero-art {
   max-width: 330px;
   aspect-ratio: 3/4.15;
   transform: rotate(2.4deg);
   border-radius: 12px 28px 12px 28px;
   border: 1px solid rgba(255, 220, 70, .28);
   box-shadow: 0 25px 80px rgba(0, 0, 0, .42), 0 0 0 9px rgba(255, 220, 70, .035);
   transition: transform .5s cubic-bezier(.2, .75, .2, 1)
}

.page-hero-art:hover {
   transform: rotate(0) translateY(-5px)
}

.page-hero-art img {
   object-fit: cover;
   object-position: center 24%;
   transition: transform .8s
}

.page-hero-art:hover img {
   transform: scale(1.04)
}

.page-art-overlay {
   background: linear-gradient(180deg, rgba(0, 0, 0, .02) 20%, rgba(0, 0, 0, .2) 44%, rgba(0, 0, 0, .9));
   padding: 23px
}

.page-art-overlay strong {
   font-size: 25px;
   letter-spacing: -.045em
}

.page-art-overlay p {
   font-size: 11px;
   line-height: 1.7;
   color: #d2d0bd;
   margin: 6px 0 0;
   max-width: 260px
}

.art-index {
   position: absolute;
   top: 15px;
   right: 14px;
   color: #fff5b8;
   background: rgba(10, 11, 6, .58);
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 7px;
   padding: 6px 8px;
   font-size: 9px;
   letter-spacing: .15em;
   backdrop-filter: blur(12px)
}

.page-content-section {
   padding-top: 25px
}

.page-drama-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 30px 19px
}

.page-board .page-drama-grid {
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 24px 15px
}

.page-board .poster-frame .poster-rank {
   font-size: 9px
}

.page-suspense .page-hero-art {
   box-shadow: 0 25px 80px rgba(0, 0, 0, .42), 0 0 0 9px rgba(161, 221, 53, .045)
}

.page-sweet .page-hero-art {
   box-shadow: 0 25px 80px rgba(0, 0, 0, .42), 0 0 0 9px rgba(255, 190, 214, .05)
}

.page-ancient .page-hero-art {
   box-shadow: 0 25px 80px rgba(0, 0, 0, .42), 0 0 0 9px rgba(255, 179, 65, .05)
}

.page-faq .page-hero-art {
   max-width: 300px
}

.reveal {
   transition: opacity .65s ease, transform .65s cubic-bezier(.2, .75, .2, 1);
   transition-delay: calc(var(--reveal-order, 0) * 18ms)
}

.drama-card.reveal {
   transform: translateY(20px) scale(.985)
}

.drama-card.reveal.is-visible {
   transform: translateY(0) scale(1)
}

.drama-card:nth-child(5n+1).reveal.is-visible {
   transform: translateY(-7px) scale(1)
}

.drama-card:nth-child(5n+3).reveal.is-visible {
   transform: translateY(8px) scale(1)
}

@media(max-width:1080px) {
   .hero-section {
      gap: 32px
   }

   .page-hero {
      gap: 35px
   }

   .page-board .page-drama-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr))
   }

   .drama-grid,
   .page-drama-grid {
      gap: 25px 14px
   }
}

@media(max-width:820px) {
   .hero-section {
      padding-top: 50px;
      gap: 24px
   }

   .hero-showcase {
      transform: rotate(.5deg)
   }

   .page-hero {
      padding-top: 45px;
      padding-bottom: 35px;
      gap: 28px
   }

   .page-hero-art {
      max-width: 270px
   }

   .weekly-band {
      margin-left: 22px;
      margin-right: 22px
   }

   .page-board .page-drama-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }
}

@media(max-width:560px) {
   .hero-copy h1 {
      font-size: 47px
   }

   .hero-showcase {
      transform: none
   }

   .showcase-poster {
      aspect-ratio: 4/4.4
   }

   .showcase-caption {
      left: 17px;
      bottom: 19px;
      right: 17px
   }

   .showcase-caption strong {
      font-size: 25px
   }

   .showcase-play {
      width: 37px;
      height: 37px;
      right: 13px;
      bottom: 16px
   }

   .showcase-edge-label {
      display: none
   }

   .section-wrap {
      padding-top: 38px;
      padding-bottom: 38px
   }

   .section-heading {
      margin-bottom: 19px
   }

   .drama-grid,
   .page-drama-grid,
   .page-board .page-drama-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px 11px
   }

   .drama-card:nth-child(5n+1),
   .drama-card:nth-child(5n+3) {
      transform: none
   }

   .drama-card.reveal.is-visible:nth-child(5n+1),
   .drama-card.reveal.is-visible:nth-child(5n+3) {
      transform: translateY(0) scale(1)
   }

   .poster-frame {
      aspect-ratio: 3/4.18;
      border-radius: 11px 11px 16px 11px
   }

   .poster-info {
      padding-top: 8px
   }

   .poster-title {
      font-size: 12px;
      min-height: 2.6em
   }

   .poster-meta {
      font-size: 9px;
      gap: 4px
   }

   .poster-desc {
      font-size: 9px;
      line-height: 1.55;
      margin-top: 5px
   }

   .poster-tag,
   .poster-rank {
      font-size: 8px;
      left: 6px;
      top: 6px;
      padding: 4px 6px
   }

   .poster-rank {
      left: auto;
      right: 6px
   }

   .poster-play {
      width: 28px;
      height: 28px;
      right: 7px;
      bottom: 7px;
      opacity: 1;
      transform: none
   }

   .weekly-band {
      margin: 20px 13px 5px;
      padding: 22px 15px;
      border-radius: 10px 22px 10px 22px
   }

   .weekly-mini {
      gap: 8px;
      padding: 8px
   }

   .weekly-index {
      font-size: 8px
   }

   .weekly-mini img {
      width: 47px;
      height: 61px;
      flex-basis: 47px
   }

   .weekly-mini strong {
      font-size: 11px
   }

   .weekly-mini i {
      font-size: 9px
   }

   .weekly-arrow {
      font-size: 12px
   }

   .zone-card {
      min-height: 225px;
      border-radius: 9px 20px 9px 20px
   }

   .zone-card h3 {
      font-size: 22px
   }

   .zone-card>div {
      left: 17px;
      bottom: 17px
   }

   .rank-row {
      grid-template-columns: 28px 45px minmax(0, 1fr) 45px;
      gap: 8px;
      padding: 10px 1px
   }

   .rank-row img {
      width: 45px;
      height: 57px
   }

   .rank-num {
      font-size: 17px
   }

   .rank-name strong {
      font-size: 11px
   }

   .rank-name small {
      font-size: 8px
   }

   .rank-score {
      font-size: 9px
   }

   .rank-arrow {
      display: none
   }

   .download-banner {
      border-radius: 10px 24px 10px 24px
   }

   .download-banner:before {
      left: 18%;
      width: 300px;
      height: 300px;
      top: auto;
      bottom: -150px
   }

   .page-hero {
      padding-top: 33px;
      padding-bottom: 24px;
      gap: 19px
   }

   .page-hero:before {
      width: 230px;
      height: 230px;
      right: -80px;
      top: 0
   }

   .page-hero-art {
      height: 235px;
      max-width: none;
      aspect-ratio: auto;
      transform: none;
      border-radius: 10px 22px 10px 22px
   }

   .page-art-overlay {
      padding: 16px
   }

   .page-art-overlay strong {
      font-size: 21px
   }

   .page-art-overlay p {
      font-size: 10px
   }

   .art-index {
      top: 10px;
      right: 10px
   }

   .page-hero-copy h1 {
      font-size: 38px
   }

   .page-hero-copy>p {
      font-size: 12px
   }

   .page-content-section {
      padding-top: 15px
   }

   .result-count {
      font-size: 9px
   }
}

@media(prefers-reduced-motion:reduce) {

   .hero-showcase,
   .showcase-poster img,
   .drama-card,
   .poster-frame img,
   .zone-card,
   .zone-card>img,
   .page-hero-art,
   .page-hero-art img,
   .weekly-mini,
   .rank-row {
      transition: none !important;
      animation: none !important
   }

   .poster-glint {
      display: none
   }
}


/* ===== 2026-10 premium art direction: centered navigation, live hero carousel, editorial leaderboard ===== */
.site-header {
   height: 88px;
   background: rgba(12, 13, 9, .91);
   border-bottom-color: rgba(255, 220, 70, .13)
}

.header-inner {
   display: grid;
   grid-template-columns: clamp(142px, 13vw, 178px) minmax(0, 1fr) auto;
   gap: clamp(10px, 1.5vw, 22px);
   padding: 0 clamp(14px, 2.1vw, 28px)
}

.brand {
   width: 100%;
   max-width: 178px;
   flex-basis: auto
}

.desktop-nav {
   margin: 0;
   justify-content: center;
   gap: clamp(5px, .78vw, 14px);
   min-width: 0;
   flex-wrap: nowrap
}

.desktop-nav .nav-link {
   font-size: clamp(10px, .88vw, 14px);
   padding: 9px 0;
   position: relative
}

.desktop-nav .nav-link:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 1px;
   height: 2px;
   border-radius: 2px;
   background: linear-gradient(90deg, var(--yellow), var(--green));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .25s
}

.desktop-nav .nav-link:hover:after,
.desktop-nav .nav-link.active:after {
   transform: scaleX(1)
}

.header-actions {
   gap: 8px
}

.category-trigger {
   padding: 10px 10px;
   font-size: 12px
}

.header-qr .download-link {
   padding: 0 15px;
   min-height: 43px;
   font-size: 12px
}

.page-home .hero-section {
    margin-top: 60px;
   max-width: 1320px;
   grid-template-columns: minmax(0, 1.03fr) minmax(280px, .86fr) minmax(230px, .67fr);
   gap: 22px;
   padding-top: 56px;
   padding-bottom: 50px;
   min-height: 600px;
   align-items: center
}

.page-home .hero-copy h1 {
   font-size: clamp(43px, 4.2vw, 64px);
   line-height: 1.14;
   margin: 20px 0 17px;
   letter-spacing: -.06em
}

.page-home .hero-lead {
   font-size: 14px;
   line-height: 1.9;
   max-width: 470px
}

.page-home .hero-showcase {
   max-width: none;
   justify-self: stretch;
   transform: none;
   border-radius: 22px;
   padding: 12px;
   background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012));
   border-color: rgba(255, 220, 70, .19)
}

.page-home .showcase-poster {
   aspect-ratio: 3/4.1;
   border-radius: 14px
}

.page-home .showcase-poster>img {
   object-position: center 25%;
   transition: opacity .35s, transform .7s
}

.showcase-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 8px 0 1px
}

.showcase-controls>button {
   display: grid;
   place-items: center;
   width: 29px;
   height: 29px;
   border-radius: 50%;
   border: 1px solid rgba(255, 220, 70, .28);
   background: rgba(255, 220, 70, .07);
   color: var(--yellow);
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
   transition: background .2s, transform .2s
}

.showcase-controls>button:hover {
   background: var(--yellow);
   color: #171407;
   transform: scale(1.06)
}

.showcase-dots {
   display: flex;
   align-items: center;
   gap: 6px
}

.showcase-dot {
   width: 6px;
   height: 6px;
   padding: 0;
   border: 0;
   border-radius: 20px;
   background: #5a5a45;
   cursor: pointer;
   transition: width .25s, background .25s
}

.showcase-dot.active {
   width: 22px;
   background: linear-gradient(90deg, var(--yellow), var(--green))
}

.showcase-bottom {
   padding: 9px 5px 3px;
   font-size: 10px;
   justify-content: space-between;
   gap: 7px
}

.showcase-bottom a {
   white-space: nowrap
}

.home-rank-rail {
   align-self: stretch;
   min-width: 0;
   padding: 19px 16px 14px;
   border: 1px solid rgba(255, 220, 70, .18);
   border-radius: 20px;
   background: linear-gradient(160deg, rgba(255, 220, 70, .075), rgba(255, 255, 255, .025) 44%, rgba(145, 190, 52, .045));
   box-shadow: 0 18px 60px rgba(0, 0, 0, .2);
   display: flex;
   flex-direction: column;
   min-height: 100%
}

.home-rank-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px
}

.home-rank-head .eyebrow {
   font-size: 9px;
   letter-spacing: .13em
}

.home-rank-head>a {
   font-size: 10px;
   color: var(--yellow);
   white-space: nowrap
}

.home-rank-rail h2 {
   font-size: 20px;
   line-height: 1.2;
   margin: 13px 0 14px;
   letter-spacing: -.04em
}

.home-rank-rail h2 span {
   display: inline-block;
   margin-left: 7px;
   padding: 4px 6px;
   border-radius: 5px;
   background: rgba(255, 220, 70, .1);
   color: var(--yellow);
   font-size: 9px;
   letter-spacing: .06em;
   vertical-align: middle
}

.home-rank-rail .rank-preview {
   border-top: 1px solid rgba(255, 255, 255, .09);
   border-bottom: 0
}

.home-rank-rail .rank-row {
   grid-template-columns: 24px 43px minmax(0, 1fr);
   gap: 9px;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .075)
}

.home-rank-rail .rank-row img {
   width: 43px;
   height: 54px;
   border-radius: 7px
}

.home-rank-rail .rank-num {
   font-size: 17px;
   letter-spacing: -.06em
}

.home-rank-rail .rank-name strong {
   font-size: 14px;
   line-height: 1.45;
   white-space: normal;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.home-rank-rail .rank-name small {
   font-size: 12px;
   line-height: 1.5;
   margin-top: 3px
}

.home-rank-rail .rank-score {
   display: none
}

.home-rank-rail .rank-arrow {
   display: none
}

.rank-rail-foot {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-top: auto;
   padding-top: 13px;
   color: #a9a994;
   font-size: 10px
}

.category-section {
   padding-top: 16px
}

.category-grid {
   gap: 10px
}

.category-card {
   min-height: 120px;
   padding: 19px 16px;
   gap: 12px;
   border-radius: 16px
}

.category-card h3 {
   font-size: 17px
}

.category-card p {
   font-size: 12px;
   line-height: 1.55
}

.poster-info {
   padding-top: 11px
}

.poster-title {
   font-size: 15px;
   line-height: 1.5;
   min-height: 2.7em
}

.poster-meta {
   font-size: 11px;
   line-height: 1.6
}

.poster-desc {
   font-size: 11px;
   line-height: 1.7
}

.weekly-mini strong {
   font-size: 14px
}

.weekly-mini small,
.weekly-mini i {
   font-size: 11px
}

.zone-card p {
   font-size: 13px;
   line-height: 1.7
}

.section-heading p {
   font-size: 13px;
   line-height: 1.8
}

.section-heading h2 {
   font-size: clamp(24px, 2.5vw, 32px)
}

/* Download module follows the supplied four-step reference, recolored in Huangguo yellow/green and charcoal. */
.download-guide {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   max-width: 1188px;
   margin: 54px auto 34px;
   padding: 40px 42px 35px;
   border: 1px solid rgba(255, 220, 70, .48);
   border-radius: 28px;
   background: radial-gradient(ellipse at 5% 4%, rgba(255, 220, 70, .1), transparent 36%), radial-gradient(ellipse at 95% 95%, rgba(151, 205, 48, .1), transparent 33%), linear-gradient(140deg, #1b1b12, #11120d 58%, #191a10);
   box-shadow: 0 26px 70px rgba(0, 0, 0, .2)
}

.download-guide-glow {
   position: absolute;
   z-index: -1;
   width: 380px;
   height: 380px;
   right: -120px;
   top: -190px;
   border-radius: 50%;
   border: 1px solid rgba(255, 220, 70, .12);
   box-shadow: 0 0 0 24px rgba(255, 220, 70, .025), 0 0 0 48px rgba(255, 220, 70, .02)
}

.download-guide-heading {
   text-align: center;
   position: relative
}

.download-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px;
   border: 1px solid rgba(255, 220, 70, .3);
   border-radius: 999px;
   color: var(--yellow);
   background: rgba(255, 220, 70, .06);
   font-size: 12px;
   font-weight: 800
}

.download-pill-icon {
   display: grid;
   place-items: center;
   width: 19px;
   height: 19px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--yellow), var(--green));
   color: #171807;
   font-size: 12px
}

.download-guide-heading h2 {
   font-size: clamp(27px, 3vw, 39px);
   line-height: 1.25;
   letter-spacing: -.05em;
   margin: 16px 0 8px
}

.download-guide-heading h2 em {
   font-style: normal;
   color: var(--yellow)
}

.download-guide-heading p {
   margin: 0;
   color: #b9b8a5;
   font-size: 14px
}

.download-steps {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr);
   align-items: center;
   gap: 12px;
   padding: 39px 8px 32px
}

.download-step {
   position: relative;
   text-align: center;
   min-width: 0
}

.step-number {
   position: absolute;
   top: -7px;
   right: calc(50% - 42px);
   display: grid;
   place-items: center;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--yellow), #ffbd2d);
   border: 2px solid #222216;
   color: #171407;
   font-size: 10px;
   font-weight: 950;
   box-shadow: 0 5px 16px rgba(255, 203, 44, .22)
}

.download-step-icon {
   display: grid;
   place-items: center;
   width: 76px;
   height: 76px;
   margin: 0 auto 12px;
   border: 1px solid rgba(255, 220, 70, .14);
   border-radius: 23px 23px 23px 9px;
   background: linear-gradient(145deg, rgba(255, 220, 70, .13), rgba(150, 203, 49, .075));
   box-shadow: inset 0 1px rgba(255, 255, 255, .07);
   color: var(--yellow);
   transition: transform .3s, border-color .3s, background .3s
}

.download-step:hover .download-step-icon {
   transform: translateY(-5px) rotate(-3deg);
   border-color: rgba(255, 220, 70, .45);
   background: linear-gradient(145deg, rgba(255, 220, 70, .2), rgba(150, 203, 49, .12))
}

.download-step-icon svg {
   width: 34px;
   height: 34px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round
}

.download-step-icon.fruit-icon svg {
   stroke: var(--green);
   fill: rgba(255, 220, 70, .1)
}

.download-step h3 {
   font-size: 15px;
   line-height: 1.4;
   margin: 0 0 5px;
   font-weight: 850
}

.download-step p {
   font-size: 12px;
   line-height: 1.6;
   color: #aaa995;
   margin: 0 auto;
   max-width: 175px
}

.step-arrow {
   color: var(--green);
   font-size: 26px;
   font-weight: 300;
   text-align: center;
   transform: translateY(-10px)
}

.download-guide-divider {
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 220, 70, .3) 8%, rgba(255, 255, 255, .12) 50%, rgba(151, 205, 48, .28) 92%, transparent)
}

.download-guide-bottom {
   display: grid;
   grid-template-columns: 120px minmax(0, 1fr) auto;
   align-items: center;
   gap: 24px;
   max-width: 640px;
   margin: 28px auto 0
}

.download-qr-card {
   position: relative;
   padding: 10px;
   border-radius: 17px;
   background: #fff;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
   border: 1px solid rgba(255, 220, 70, .45)
}

.download-qr-card img {
   width: 100px;
   height: 100px;
   object-fit: contain
}

.qr-corner {
   position: absolute;
   width: 13px;
   height: 13px;
   border-color: #98c933;
   border-style: solid
}

.qr-corner-tl {
   left: 4px;
   top: 4px;
   border-width: 2px 0 0 2px;
   border-radius: 5px 0 0
}

.qr-corner-tr {
   right: 4px;
   top: 4px;
   border-width: 2px 2px 0 0;
   border-radius: 0 5px 0 0
}

.qr-corner-bl {
   left: 4px;
   bottom: 4px;
   border-width: 0 0 2px 2px;
   border-radius: 0 0 0 5px
}

.qr-corner-br {
   right: 4px;
   bottom: 4px;
   border-width: 0 2px 2px 0;
   border-radius: 0 0 5px 0
}
.download-guide-copy{
   text-align: center;
}

.download-guide-copy .eyebrow {
   font-size: 9px
}

.download-guide-copy h3 {
   font-size: 18px;
   margin: 5px 0 4px
}

.download-guide-copy p {
   font-size: 12px;
   line-height: 1.75;
   color: #b5b4a2;
   margin: 0 0 10px
}

.download-platforms {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
   margin-bottom: 14px
}

.download-platforms span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 10px;
   color: #dedcca;
   border: 1px solid rgba(255, 255, 255, .1);
   background: rgba(255, 255, 255, .035);
   padding: 4px 7px;
   border-radius: 7px
}

.download-platforms b {
   color: var(--green)
}

.download-guide-button {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   min-height: 43px;
   padding: 0 17px;
   border-radius: 12px;
   background: linear-gradient(115deg, var(--yellow), #cde75d);
   color: #171707;
   font-size: 12px;
   font-weight: 900;
   box-shadow: 0 8px 25px rgba(255, 220, 70, .13);
   transition: transform .2s, box-shadow .2s
}

.download-guide-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 30px rgba(255, 220, 70, .24)
}

.download-guide-button span {
   font-size: 17px
}

.download-guide-mark {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 83px;
   height: 83px;
   border: 1px solid rgba(255, 220, 70, .22);
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 220, 70, .1), rgba(151, 205, 48, .025) 70%);
   color: var(--yellow);
   transform: rotate(-8deg)
}

.download-guide-mark span {
   font-size: 23px;
   line-height: 1;
   font-weight: 950;
   letter-spacing: -.1em
}

.download-guide-mark b {
   font-size: 12px;
   margin-top: 4px
}

.download-guide-mark small {
   font-size: 6px;
   letter-spacing: .13em;
   color: #9e9f86;
   margin-top: 1px
}

/* Distinct premium leaderboard page */
.page-board .page-hero {
   padding-bottom: 32px
}

.page-board .page-hero-art {
   max-width: 280px
}

.board-content-section {
   padding-top: 20px
}

.board-intro {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 24px
}

.board-intro h2 {
   font-size: clamp(27px, 3.1vw, 39px);
   letter-spacing: -.055em;
   line-height: 1.2;
   margin: 8px 0
}

.board-intro h2 em {
   font-style: normal;
   color: var(--yellow)
}

.board-intro p {
   font-size: 14px;
   color: #b9b8a7;
   margin: 0
}

.board-live {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 10px 13px;
   border: 1px solid rgba(255, 220, 70, .2);
   border-radius: 12px;
   background: rgba(255, 220, 70, .045);
   white-space: nowrap
}

.board-live>span:nth-child(2) {
   font-size: 11px;
   color: #b8b7a4
}

.board-live strong {
   font-size: 12px;
   color: var(--yellow)
}

.leaderboard-stage {
   border: 1px solid rgba(255, 220, 70, .18);
   border-radius: 26px;
   overflow: hidden;
   background: linear-gradient(145deg, rgba(255, 220, 70, .045), rgba(255, 255, 255, .012) 42%, rgba(151, 205, 48, .025));
   box-shadow: 0 28px 80px rgba(0, 0, 0, .18)
}

.leaderboard-top {
   display: grid;
   grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
   gap: 0
}

.leaderboard-champion {
   position: relative;
   display: grid;
   grid-template-columns: minmax(130px, .78fr) minmax(0, 1fr);
   gap: 20px;
   padding: 24px;
   border-right: 1px solid rgba(255, 255, 255, .08);
   align-items: center;
   overflow: hidden
}

.champion-label {
   position: absolute;
   left: 24px;
   right: 24px;
   top: 18px;
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: center;
   z-index: 2
}

.champion-label span {
   font-size: 12px;
   font-weight: 850;
   color: var(--yellow)
}

.champion-label b {
   font-size: 9px;
   letter-spacing: .14em;
   color: #aaa991
}

.champion-art {
   position: relative;
   align-self: end;
   margin-top: 25px;
   border-radius: 14px 14px 24px 14px;
   overflow: hidden;
   aspect-ratio: 3/4;
   box-shadow: 0 20px 45px rgba(0, 0, 0, .36);
   border: 1px solid rgba(255, 220, 70, .25)
}

.champion-art img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 22%;
   transition: transform .7s
}

.leaderboard-champion:hover .champion-art img {
   transform: scale(1.04)
}

.champion-glow {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 55%, rgba(8, 9, 5, .42))
}

.champion-ribbon {
   position: absolute;
   left: 10px;
   top: 10px;
   padding: 5px 8px;
   border-radius: 7px;
   background: linear-gradient(110deg, var(--yellow), #cce85e);
   color: #171707;
   font-size: 9px;
   font-weight: 950;
   letter-spacing: .08em
}

.champion-copy {
   padding-top: 30px;
   min-width: 0
}

.champion-copy h3 {
   font-size: clamp(22px, 2.3vw, 32px);
   line-height: 1.3;
   letter-spacing: -.045em;
   margin: 8px 0
}

.champion-copy p {
   font-size: 13px;
   line-height: 1.8;
   color: #b8b7a6;
   margin-bottom: 16px
}

.champion-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 20px
}

.champion-meta span {
   font-size: 10px;
   color: var(--yellow);
   padding: 6px 8px;
   border-radius: 7px;
   background: rgba(255, 220, 70, .08);
   border: 1px solid rgba(255, 220, 70, .12)
}

.champion-copy>a {
   display: inline-flex;
   align-items: center;
   gap: 18px;
   padding: 10px 14px;
   border-radius: 10px;
   background: var(--yellow);
   color: #171707;
   font-size: 12px;
   font-weight: 900
}

.leaderboard-podium {
   padding: 25px 23px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 13px;
   align-items: stretch
}

.podium-heading {
   grid-column: 1/-1;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   padding-bottom: 4px
}

.podium-heading .eyebrow {
   font-size: 9px
}

.podium-heading h3 {
   font-size: 17px;
   margin: 5px 0 0
}

.podium-card {
   position: relative;
   display: block;
   min-width: 0;
   min-height: 260px;
   aspect-ratio: 3/4.3;
   border-radius: 13px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .11);
   background: #1a1b12;
   transition: transform .3s, border-color .3s
}

.podium-card:hover {
   transform: translateY(-5px);
   border-color: rgba(255, 220, 70, .38)
}

.podium-card img {
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   object-fit: cover;
   object-position: center 22%;
   transition: transform .7s
}

.podium-card:hover img {
   transform: scale(1.05)
}

.podium-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .05) 22%, rgba(0, 0, 0, .85) 100%)
}

.podium-rank {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 9px;
   letter-spacing: .1em;
   padding: 5px 7px;
   border-radius: 6px;
   color: #171707;
   background: var(--yellow);
   font-weight: 950
}

.podium-medal {
   position: absolute;
   right: 10px;
   top: 7px;
   color: var(--yellow);
   font-size: 21px;
   z-index: 2;
   text-shadow: 0 3px 12px #000
}

.podium-copy {
   position: absolute;
   left: 12px;
   right: 12px;
   bottom: 13px;
   display: flex;
   flex-direction: column;
   gap: 5px
}

.podium-copy small {
   font-size: 9px;
   color: var(--yellow)
}

.podium-copy strong {
   font-size: 15px;
   line-height: 1.4
}

.podium-copy>span {
   font-size: 10px;
   line-height: 1.6;
   color: #d4d2c1;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.podium-open {
   position: absolute;
   right: 11px;
   top: 44px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: rgba(10, 10, 7, .55);
   color: white;
   font-size: 13px
}

.leaderboard-list-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 20px;
   padding: 25px 25px 15px;
   border-top: 1px solid rgba(255, 255, 255, .09)
}

.leaderboard-list-head .eyebrow {
   font-size: 9px
}

.leaderboard-list-head h3 {
   font-size: 22px;
   margin: 5px 0 0
}

.leaderboard-list-head>span {
   font-size: 11px;
   color: #a7a793
}

.leaderboard-list-head>span b {
   color: var(--green);
   font-size: 16px;
   margin-left: 6px
}

.leaderboard-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 0;
   padding: 0 25px 24px
}

.leaderboard-row {
   display: grid;
   grid-template-columns: 34px 62px minmax(0, 1fr) auto 18px;
   gap: 12px;
   align-items: center;
   min-width: 0;
   padding: 13px 12px;
   border-top: 1px solid rgba(255, 255, 255, .075);
   transition: background .25s, transform .25s
}

.leaderboard-row:nth-child(odd) {
   margin-right: 10px
}

.leaderboard-row:nth-child(even) {
   margin-left: 10px
}

.leaderboard-row:hover {
   background: rgba(255, 220, 70, .055);
   transform: translateY(-2px)
}

.leaderboard-row-num {
   font-size: 19px;
   font-weight: 950;
   color: #aaa991;
   font-variant-numeric: tabular-nums
}

.leaderboard-row img {
   width: 62px;
   height: 76px;
   border-radius: 8px;
   object-fit: cover
}

.leaderboard-row-copy {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0
}

.leaderboard-row-copy small {
   font-size: 10px;
   color: #aaa991
}

.leaderboard-row-copy small i {
   font-style: normal;
   color: var(--green);
   padding: 0 3px
}

.leaderboard-row-copy strong {
   font-size: 13px;
   line-height: 1.45;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.leaderboard-row-copy>span {
   font-size: 10px;
   line-height: 1.5;
   color: #8f907f;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.leaderboard-row-score {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 3px
}

.leaderboard-row-score small {
   font-size: 9px;
   color: #929381;
   white-space: nowrap
}

.leaderboard-row-score b {
   font-size: 11px;
   color: var(--yellow);
   white-space: nowrap
}

.leaderboard-row-arrow {
   color: var(--green);
   font-size: 17px
}

.board-end-note {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 18px 3px 0;
   color: #aaa991;
   font-size: 12px
}

.board-end-note a {
   margin-left: auto;
   color: var(--yellow);
   font-weight: 800
}

@media(max-width:1250px) {
   .header-inner {
      grid-template-columns: 145px minmax(0, 1fr) auto;
      gap: 10px
   }

   .desktop-nav {
      gap: 7px
   }

   .desktop-nav .nav-link {
      font-size: 14px
   }

   .page-home .hero-section {
      gap: 15px;
      padding-left: 22px;
      padding-right: 22px
   }

   .home-rank-rail {
      padding: 15px 12px
   }

   .home-rank-rail h2 {
      font-size: 17px
   }

   .home-rank-rail .rank-row {
      grid-template-columns: 20px 38px minmax(0, 1fr);
      gap: 7px
   }

   .home-rank-rail .rank-row img {
      width: 38px;
      height: 49px
   }
}

@media(max-width:1080px) {
   .desktop-nav {
      gap: 6px
   }

   .desktop-nav .nav-link {
      font-size: 9.5px
   }

   .header-inner {
      grid-template-columns: 130px minmax(0, 1fr) auto
   }

   .header-actions {
      gap: 5px
   }

   .category-trigger {
      padding: 9px 7px
   }

   .header-qr .download-link {
      padding: 0 10px
   }

   .page-home .hero-section {
      grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr);
      gap: 22px
   }

   .home-rank-rail {
      grid-column: 1/-1;
      min-height: 0
   }

   .home-rank-rail .rank-preview {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px
   }

   .home-rank-rail .rank-row {
      grid-template-columns: 22px 40px minmax(0, 1fr);
      padding: 9px 4px;
      border-bottom: 0;
      border-right: 1px solid rgba(255, 255, 255, .08)
   }

   .home-rank-rail .rank-row:last-child {
      border-right: 0
   }

   .home-rank-rail .rank-row img {
      width: 40px;
      height: 52px
   }

   .home-rank-rail .rank-rail-foot {
      padding-top: 10px
   }

   .download-guide {
      margin-left: 22px;
      margin-right: 22px
   }

   .leaderboard-top {
      grid-template-columns: 1fr
   }

   .leaderboard-champion {
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      grid-template-columns: minmax(160px, .55fr) minmax(0, 1fr)
   }

   .champion-art {
      max-height: 350px
   }

   .leaderboard-podium {
      grid-template-columns: 1fr 1fr
   }

   .podium-card {
      min-height: 280px;
      aspect-ratio: 4/4.5
   }
}

@media(max-width:900px) {
   .desktop-nav {
      display: none
   }

   .header-inner {
      display: flex;
      gap: 12px
   }

   .brand {
      width: 155px;
      flex: 0 0 155px
   }

   .header-actions {
      margin-left: auto
   }

   .page-home .hero-section {
      grid-template-columns: minmax(0, 1fr) minmax(250px, .82fr)
   }

   .home-rank-rail .rank-preview {
      grid-template-columns: repeat(5, minmax(0, 1fr))
   }
}

@media(max-width:820px) {
   .page-home .hero-section {
       margin-top: 60px;
      padding-top: 38px;
      padding-bottom: 34px;
      grid-template-columns: 1fr .9fr;
      gap: 18px;
      min-height: 0
   }

   .page-home .hero-copy h1 {
      font-size: clamp(36px, 5.8vw, 50px)
   }

   .page-home .hero-lead {
      font-size: 13px
   }

   .page-home .hero-showcase {
      max-width: 100%;
      padding: 9px
   }

   .page-home .showcase-poster {
      aspect-ratio: 3/4.1
   }

   .home-rank-rail {
      grid-column: 1/-1
   }

   .home-rank-rail .rank-preview {
      grid-template-columns: repeat(5, minmax(0, 1fr))
   }

   .home-rank-rail .rank-row {
      grid-template-columns: 20px 38px minmax(0, 1fr);
      gap: 6px
   }

   .home-rank-rail .rank-name strong {
      font-size: 10px
   }

   .download-guide {
      padding: 30px 22px 25px;
      border-radius: 22px
   }

   .download-steps {
      padding: 30px 0 24px;
      gap: 7px;
      grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr)
   }

   .download-step-icon {
      width: 62px;
      height: 62px;
      border-radius: 18px 18px 18px 7px
   }

   .download-step-icon svg {
      width: 29px;
      height: 29px
   }

   .step-arrow {
      font-size: 19px
   }

   .download-step h3 {
      font-size: 13px
   }

   .download-step p {
      font-size: 11px
   }

   .download-guide-bottom {
      max-width: 600px;
      grid-template-columns: 105px minmax(0, 1fr) 64px;
      gap: 17px
   }

   .download-qr-card img {
      width: 83px;
      height: 83px
   }

   .download-guide-mark {
      width: 62px;
      height: 62px
   }

   .download-guide-mark span {
      font-size: 18px
   }

   .download-guide-mark b {
      font-size: 10px
   }

   .download-guide-mark small {
      font-size: 5px
   }

   .board-intro h2 {
      font-size: 30px
   }

   .leaderboard-champion {
      padding: 20px;
      gap: 16px
   }

   .leaderboard-podium {
      padding: 20px
   }

   .leaderboard-list {
      padding: 0 15px 18px
   }

   .leaderboard-row {
      grid-template-columns: 27px 54px minmax(0, 1fr) auto 14px;
      gap: 8px;
      padding: 11px 7px
   }

   .leaderboard-row img {
      width: 54px;
      height: 67px
   }

   .leaderboard-row-copy strong {
      font-size: 12px
   }

   .leaderboard-row-copy>span {
      display: none
   }
}

@media(max-width:600px) {
   .site-header {
      height: 70px
   }

   .header-inner {
      padding: 0 12px
   }

   .brand {
      width: 135px;
      flex-basis: 135px
   }

   .header-qr .download-link {
      min-height: 38px;
      padding: 0 9px;
      font-size: 10px
   }

   .page-home .hero-section {
      grid-template-columns: 1fr;
      padding: 32px 15px 25px;
      gap: 22px
   }

   .page-home .hero-copy h1 {
      font-size: clamp(37px, 10vw, 48px);
      margin: 15px 0 13px
   }

   .page-home .hero-lead {
      font-size: 13px;
      line-height: 1.85
   }

   .page-home .hero-showcase {
      width: min(100%, 400px);
      justify-self: center
   }

   .page-home .showcase-poster {
      aspect-ratio: 4/4.5
   }

   .page-home .showcase-caption strong {
      font-size: 23px
   }

   .home-rank-rail {
      padding: 15px 13px
   }

   .home-rank-rail h2 {
      font-size: 18px
   }

   .home-rank-rail .rank-preview {
      grid-template-columns: 1fr;
      gap: 0
   }

   .home-rank-rail .rank-row {
      grid-template-columns: 26px 45px minmax(0, 1fr);
      gap: 9px;
      padding: 9px 0;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .075)
   }

   .home-rank-rail .rank-row img {
      width: 45px;
      height: 57px
   }

   .home-rank-rail .rank-name strong {
      font-size: 12px
   }

   .home-rank-rail .rank-name small {
      font-size: 10px
   }

   .home-rank-rail .rank-rail-foot {
      margin-top: 8px
   }

   .category-section {
      padding-top: 7px
   }

   .category-grid {
      gap: 8px
   }

   .category-card {
      min-height: 116px;
      padding: 13px 10px;
      gap: 8px
   }

   .category-card h3 {
      font-size: 14px
   }

   .category-card p {
      font-size: 11px
   }

   .category-card small {
      font-size: 8px
   }

   .category-symbol {
      width: 30px;
      height: 30px;
      flex-basis: 30px
   }

   .poster-title {
      font-size: 13px;
      line-height: 1.45;
      min-height: 2.7em
   }

   .poster-meta {
      font-size: 10px;
      line-height: 1.6
   }

   .poster-desc {
      font-size: 10px;
      line-height: 1.6
   }

   .download-guide {
      margin: 30px 13px 24px;
      padding: 25px 15px 21px;
      border-radius: 19px
   }

   .download-guide-heading h2 {
      font-size: 26px;
      margin-top: 13px
   }

   .download-guide-heading p {
      font-size: 12px
   }

   .download-steps {
      grid-template-columns: 1fr 12px 1fr;
      row-gap: 21px;
      padding: 25px 0 22px
   }

   .download-step:nth-child(5) {
      grid-column: 1;
      grid-row: 2
   }

   .download-step:nth-child(7) {
      grid-column: 3;
      grid-row: 2
   }

   .download-steps>.step-arrow:nth-child(6) {
      display: none
   }

   .download-steps>.step-arrow:nth-child(2) {
      grid-column: 2;
      grid-row: 1
   }

   .download-steps>.step-arrow:nth-child(4) {
      grid-column: 2;
      grid-row: 2;
      transform: rotate(90deg);
      opacity: 0
   }

   .download-step-icon {
      width: 58px;
      height: 58px;
      margin-bottom: 9px
   }

   .step-number {
      right: calc(50% - 36px);
      width: 22px;
      height: 22px;
      font-size: 9px
   }

   .download-step h3 {
      font-size: 13px
   }

   .download-step p {
      font-size: 10px;
      max-width: 135px
   }

   .download-guide-bottom {
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 13px;
      margin-top: 20px
   }

   .download-qr-card {
      padding: 7px;
      border-radius: 12px
   }

   .download-qr-card img {
      width: 72px;
      height: 72px
   }

   .download-guide-copy h3 {
      font-size: 15px
   }

   .download-guide-copy p {
      font-size: 11px
   }

   .download-platforms {
      gap: 5px
   }

   .download-platforms span {
      font-size: 9px;
      padding: 4px 5px
   }

   .download-guide-button {
      min-height: 39px;
      padding: 0 12px;
      font-size: 11px
   }

   .download-guide-mark {
      display: none
   }

   .board-intro {
      align-items: flex-start;
      flex-direction: column;
      gap: 12px
   }

   .board-intro h2 {
      font-size: 27px
   }

   .board-intro p {
      font-size: 12px
   }

   .board-live {
      padding: 7px 10px
   }

   .leaderboard-stage {
      border-radius: 19px
   }

   .leaderboard-champion {
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 13px;
      padding: 15px
   }

   .champion-label {
      left: 15px;
      right: 15px;
      top: 12px
   }

   .champion-label span {
      font-size: 10px
   }

   .champion-label b {
      font-size: 8px
   }

   .champion-art {
      margin-top: 26px;
      aspect-ratio: 3/4.3
   }

   .champion-copy {
      padding-top: 23px
   }

   .champion-copy h3 {
      font-size: 19px;
      margin: 7px 0
   }

   .champion-copy p {
      font-size: 11px;
      line-height: 1.65;
      margin-bottom: 10px
   }

   .champion-meta {
      gap: 5px;
      margin-bottom: 12px
   }

   .champion-meta span {
      font-size: 9px;
      padding: 5px 6px
   }

   .champion-copy>a {
      font-size: 10px;
      padding: 8px 10px;
      gap: 10px
   }

   .leaderboard-podium {
      padding: 15px;
      gap: 9px
   }

   .podium-heading h3 {
      font-size: 15px
   }

   .podium-card {
      min-height: 200px;
      aspect-ratio: 3/4.2
   }

   .podium-copy {
      left: 8px;
      right: 8px;
      bottom: 9px;
      gap: 4px
   }

   .podium-copy strong {
      font-size: 12px
   }

   .podium-copy small {
      font-size: 8px
   }

   .podium-copy>span {
      font-size: 9px
   }

   .podium-rank {
      left: 7px;
      top: 7px;
      font-size: 8px;
      padding: 4px 5px
   }

   .podium-medal {
      right: 7px;
      top: 4px;
      font-size: 17px
   }

   .leaderboard-list-head {
      padding: 19px 14px 12px;
      align-items: flex-start;
      flex-direction: column;
      gap: 5px
   }

   .leaderboard-list-head h3 {
      font-size: 19px
   }

   .leaderboard-list-head>span {
      font-size: 10px
   }

   .leaderboard-list {
      grid-template-columns: 1fr;
      padding: 0 10px 13px
   }

   .leaderboard-row:nth-child(odd),
   .leaderboard-row:nth-child(even) {
      margin: 0
   }

   .leaderboard-row {
      grid-template-columns: 27px 49px minmax(0, 1fr) auto 12px;
      gap: 8px;
      padding: 10px 4px
   }

   .leaderboard-row img {
      width: 49px;
      height: 61px
   }

   .leaderboard-row-num {
      font-size: 16px
   }

   .leaderboard-row-copy small {
      font-size: 9px
   }

   .leaderboard-row-copy strong {
      font-size: 12px
   }

   .leaderboard-row-score small {
      font-size: 8px
   }

   .leaderboard-row-score b {
      font-size: 10px
   }

   .board-end-note {
      font-size: 10px
   }

   .page-board .page-hero-art {
      max-width: none
   }
}

@media(max-width:380px) {
   .brand {
      width: 119px;
      flex-basis: 119px
   }

   .header-qr .download-link {
      font-size: 9px;
      padding: 0 7px
   }

   .category-trigger {
      font-size: 11px
   }

   .download-guide-heading h2 {
      font-size: 23px
   }

   .download-steps {
      column-gap: 5px
   }

   .download-step p {
      font-size: 9px
   }

   .leaderboard-champion {
      grid-template-columns: 91px minmax(0, 1fr);
      gap: 10px
   }

   .champion-copy h3 {
      font-size: 17px
   }

   .champion-copy p {
      font-size: 10px
   }

   .champion-meta span {
      font-size: 8px
   }
}

@media(prefers-reduced-motion:reduce) {

   .showcase-dot,
   .showcase-controls>button,
   .download-step-icon,
   .download-guide-button,
   .podium-card,
   .podium-card img,
   .leaderboard-champion .champion-art img {
      transition: none !important
   }
}

/* ===== Mobile overflow hardening: keep every page within the viewport ===== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  body,
  main,
  .page-home,
  .page-board,
  .site-main {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .site-header,
  .header-inner,
  .section-wrap,
  .hero-section,
  .page-hero,
  .page-content-section,
  .category-section,
  .drama-section,
  .zone-section,
  .comments-section,
  .faq-section,
  .site-footer,
  .footer-top,
  .footer-bottom,
  .hero-copy,
  .hero-showcase,
  .showcase-poster,
  .home-rank-rail,
  .category-grid,
  .drama-grid,
  .zone-grid,
  .download-guide,
  .download-guide-bottom,
  .leaderboard-stage,
  .leaderboard-champion,
  .leaderboard-podium,
  .leaderboard-list,
  .leaderboard-row {
    min-width: 0;
    max-width: 100%;
  }

  .header-inner {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand {
    width: min(155px, 40vw);
    max-width: 40vw;
    min-width: 0;
    flex: 0 1 auto;
  }

  .header-actions {
    min-width: 0;
    gap: 6px;
  }

  .page-home .hero-section {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding-left: clamp(14px, 4vw, 26px);
    padding-right: clamp(14px, 4vw, 26px);
  }

  .page-home .hero-copy,
  .page-home .hero-showcase,
  .page-home .home-rank-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-home .hero-showcase {
    justify-self: stretch;
    transform: none;
  }

  .page-home .showcase-poster,
  .showcase-poster img {
    max-width: 100%;
  }

  .category-grid,
  .drama-grid,
  .zone-grid,
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .category-card,
  .drama-card,
  .poster-link,
  .poster-frame,
  .poster-info,
  .zone-card,
  .faq-card {
    min-width: 0;
    max-width: 100%;
  }

  .poster-title,
  .poster-meta,
  .poster-desc,
  .category-card h3,
  .category-card p,
  .zone-card p,
  .footer-bottom span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .home-rank-rail .rank-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .home-rank-rail .rank-row {
    min-width: 0;
    grid-template-columns: 20px 36px minmax(0, 1fr);
    gap: 6px;
  }

  .home-rank-rail .rank-row img {
    width: 36px;
    max-width: 100%;
    height: 48px;
  }

  .download-guide {
    width: calc(100% - 26px);
    margin-left: 13px;
    margin-right: 13px;
    padding-left: clamp(12px, 3vw, 22px);
    padding-right: clamp(12px, 3vw, 22px);
  }

  .download-steps {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  }

  .download-step,
  .download-step p,
  .download-guide-copy {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .download-guide-bottom {
    width: 100%;
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
    gap: 12px;
  }

  .download-qr-card,
  .download-qr-card img {
    max-width: 100%;
  }

  .leaderboard-champion {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  }

  .leaderboard-row {
    grid-template-columns: 24px 42px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .leaderboard-row-arrow {
    display: none;
  }

  .footer-top {
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-brand {
    width: min(160px, 45vw);
    max-width: 45vw;
    min-width: 0;
    flex: 0 1 auto;
  }

  .footer-top p {
    min-width: 0;
    flex: 1 1 120px;
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px 14px;
  }
}

@media (max-width: 560px) {
  .header-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand {
    width: min(125px, 35vw);
    max-width: 35vw;
  }

  .category-grid,
  .drama-grid,
  .zone-grid,
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
  }

  .home-rank-rail .rank-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .leaderboard-champion {
    grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .leaderboard-row {
    grid-template-columns: 21px 40px minmax(0, 1fr);
    gap: 7px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .leaderboard-row-score {
    display: none;
  }

  .site-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .footer-top p {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .header-inner {
    gap: 6px;
  }

  .brand {
    width: 31vw;
    max-width: 31vw;
  }

  .header-qr .download-link {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 9px;
  }

  .category-trigger {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 10px;
  }

  .category-grid,
  .drama-grid,
  .zone-grid,
  .faq-grid {
    gap: 16px 8px;
  }

  .download-guide-bottom {
    grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
    gap: 9px;
  }

  .download-qr-card img {
    width: 64px;
    height: 64px;
  }
}

/* ===== 修复移动端侧边栏关闭后页面偏移 ===== */
@media screen and (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    position: relative;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    padding-left: 0;
  }

  /* 打开菜单时锁定背景页面，避免页面横向移动 */
  body.drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* 遮罩始终固定在当前视口，不参与页面布局 */
  .drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
    transform: none !important;
  }

  /* 侧边栏独立滑动，不推动页面主体 */
  .site-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    box-sizing: border-box !important;
    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s ease;
    will-change: transform;
  }

  /* 打开状态 */
  body.drawer-open .site-drawer {
    transform: translate3d(0, 0, 0);
  }

  /* 防止侧边栏内部内容撑宽屏幕 */
  .site-drawer,
  .site-drawer * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .drawer-menu,
  .drawer-footer,
  .drawer-head {
    width: 100%;
    min-width: 0;
  }

  /* 关闭菜单后确保页面主体恢复正常宽度 */
  body:not(.drawer-open) {
    overflow-x: hidden !important;
  }

  main,
  .site-main,
  .page-home,
  .site-footer {
    min-width: 0;
    max-width: 100%;
  }
}