#drama-ranking *{box-sizing:border-box}#drama-ranking{margin:0;background:#14070d;color:#f5e7dd;font-family:"PingFang TC","Microsoft JhengHei",sans-serif;background-image:radial-gradient(ellipse at 80% 0%,#57192c 0,transparent 55%)}#drama-ranking .ranking-inner{padding:80px 0 60px;min-height:100vh}#drama-ranking .heading{max-width:1400px;margin:auto;padding:0 48px 40px;display:flex;align-items:end;justify-content:space-between;gap:24px}#drama-ranking .ranking-title{font-family:"Kaiti TC",KaiTi,serif;font-size:clamp(42px,6vw,78px);font-weight:500;line-height:1.1;margin:0 0 20px;color:#f0c9b2}#drama-ranking p{margin:0;line-height:1.8;color:#c49da8;font-size:15px}#drama-ranking .controls{display:flex;gap:10px;flex-shrink:0}#drama-ranking button{color:#f7ddc6;font:500 14px inherit;background:#3c1424;border:1px solid #885069;border-radius:30px;padding:12px 22px;cursor:pointer}#drama-ranking button:hover{background:#642039}#drama-ranking button:focus-visible,#drama-ranking .viewport:focus-visible{outline:2px solid #f4ce9b;outline-offset:4px}#drama-ranking .viewport{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#8c405a #240d17;padding:12px 0 24px;cursor:grab}#drama-ranking .track{display:flex;width:max-content;gap:24px;padding-left:48px;padding-right:24px}#drama-ranking .group{display:flex;gap:24px}#drama-ranking .card{width:270px;flex-shrink:0}#drama-ranking .poster{position:relative;aspect-ratio:2/3;background-image:url(assets/ranking-posters.png);background-size:522.258% 208.817%;background-position:var(--x) var(--y);background-origin:border-box;border:1px solid #8b465b;box-shadow:0 15px 35px #0007;overflow:hidden;border-radius:4px}#drama-ranking .rank{position:absolute;top:0;left:0;display:grid;place-items:center;width:70px;height:80px;background:linear-gradient(135deg,#4b101d,#23090e);border:2px solid #e7bc77;clip-path:polygon(15% 0,85% 0,100% 13%,100% 74%,50% 100%,0 74%,0 13%);color:#ffe0a6;font:42px Georgia,serif}#drama-ranking .caption{display:flex;justify-content:space-between;align-items:center;padding-top:18px}#drama-ranking .caption h2{margin:0;font-size:20px;font-weight:500;letter-spacing:1px}#drama-ranking .caption span{font-size:12px;color:#be879b}#drama-ranking .note{max-width:1400px;padding:28px 48px;margin:auto;font-size:12px;color:#a27786}#drama-ranking .card:hover .poster{border-color:#e5b98d}@media(max-width:600px){#drama-ranking .ranking-inner{padding-top:40px}#drama-ranking .heading{padding:0 22px 24px;display:block}#drama-ranking .controls{margin-top:24px}#drama-ranking .track{padding-left:22px;gap:16px}#drama-ranking .group{gap:16px}#drama-ranking .card{width:210px}#drama-ranking .note{padding:22px}#drama-ranking .rank{width:58px;height:66px;font-size:34px}}:where(html[data-mobile-layout="true"]) #drama-ranking .ranking-inner{padding-top:40px}

#drama-ranking{background:radial-gradient(ellipse at 80% 0%,#57192c55,transparent 65%);scroll-margin-top:110px;overflow:hidden}#drama-ranking .ranking-inner{min-height:0;padding:70px 0 65px}#drama-ranking .heading{position:static;height:auto;background:none;border:0;box-shadow:none;max-width:none;padding:0 6% 32px;align-items:flex-end}#drama-ranking .ranking-title{font-size:clamp(38px,3.8vw,58px);font-weight:900;letter-spacing:2px;color:#f3bfce}#drama-ranking .track{padding-left:6vw}#drama-ranking .note{padding:25px 6% 0}#drama-ranking button{font:500 14px/1.4 "PingFang TC","Microsoft JhengHei",sans-serif;min-height:44px}#drama-ranking .viewport{touch-action:pan-x pan-y}#drama-ranking .caption h2{font-family:inherit;line-height:1.4}#drama-ranking .caption{gap:8px}@media(max-width:600px){#drama-ranking .ranking-inner{padding:56px 0}#drama-ranking .heading{display:block;padding-bottom:20px}#drama-ranking .ranking-title{font-size:39px}#drama-ranking .controls{flex-wrap:wrap;gap:8px;margin-top:20px}#drama-ranking button{padding:10px 17px}#drama-ranking .card{width:clamp(175px,56vw,230px)}}:where(html[data-mobile-layout="true"]) #drama-ranking .ranking-inner{padding:56px 0}

#drama-ranking .poster{background-image:none}#drama-ranking .poster img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}#drama-ranking .card{display:block;text-decoration:none;color:inherit}#drama-ranking .caption{align-items:flex-start}#drama-ranking .caption h3{margin:0;font:500 19px/1.5 "PingFang TC","Microsoft JhengHei",sans-serif;overflow-wrap:anywhere}#drama-ranking .caption span{flex-shrink:0;padding-top:5px}#drama-ranking .play-count{font-size:12px;color:#be879b;margin-top:6px}#drama-ranking .ranking-status{padding:20px 6%;font-size:14px}#drama-ranking .ranking-status[hidden]{display:none}#drama-ranking .image-unavailable:after{content:"封面暫不可用";position:absolute;inset:45% 0;text-align:center;color:#c49da8;font-size:14px}