:root{color-scheme:dark;--bg:#101011;--surface:#1c1c1f;--text:#f6f5f3;--muted:#a5a5ac;--red:#ed233a;--font:"Noto Sans KR",sans-serif;--gutter:clamp(22px,4.4vw,80px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:5px}button:disabled{opacity:.3;cursor:default}img{display:block;width:100%;object-fit:cover}svg{width:22px;height:22px;display:block}button svg{flex-shrink:0}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;padding:10px 20px;background:white;color:black}.skip-link:focus{top:10px}
.header{height:88px;position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;padding:0 var(--gutter);gap:53px;background:linear-gradient(#080a0ee6,transparent)}.wordmark{font:800 43px/.9 "Barlow Condensed",Impact,sans-serif;letter-spacing:1.3px;color:var(--red);flex-shrink:0}.brand-dot{color:var(--red)}.nav{display:flex;gap:30px;align-items:center}.nav-link{font-size:14px;color:#bfbfc5;white-space:nowrap;padding:12px 0;position:relative;background:none;font-weight:500}.nav-link.active{color:white;font-weight:700}.nav-link.active:after{content:"";position:absolute;bottom:4px;left:0;right:0;margin:auto;width:13px;height:2px;background:var(--red)}.nav-link:hover{color:white}.header-actions{margin-left:auto;display:flex;align-items:center;gap:24px}.icon-button{width:40px;height:40px;display:grid;place-items:center;background:transparent;border-radius:50%}.icon-button:hover{background:#ffffff15}.profile{display:grid;place-items:center;background:#717a7c;width:31px;height:31px;border-radius:5px;font-size:14px;font-weight:600;border:1px solid #ffffff20}.search-wrap{display:flex;align-items:center}.search-wrap.expanded{background:#121216ed;border:1px solid #ffffff45;border-radius:5px}.search-wrap input{width:220px;background:none;border:0;color:white;font-size:14px;padding:8px 12px 8px 0;outline-offset:0}.search-wrap input::placeholder{color:#b4b4be}
.hero{height:min(800px,83vh);min-height:670px;position:relative;isolation:isolate;overflow:hidden}.hero-image{position:absolute;inset:0;height:100%;object-position:70% 36%;z-index:-3}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#07090deb 0%,#090b0fb3 25%,#080a0d40 60%,#080a0d0d),linear-gradient(0deg,var(--bg) 0%,#101011d9 9%,transparent 49%,#05070c26 80%)}.hero-content{padding:clamp(148px,17vh,190px) var(--gutter) 100px;position:relative;max-width:850px}.eyebrow{display:flex;align-items:center;gap:10px;font:600 11px/1.6 var(--font);letter-spacing:3px;margin:0 0 28px}.original-mark{font:800 28px/.9 "Barlow Condensed",sans-serif;color:var(--red);letter-spacing:0}.hero-kicker{font-size:13px;color:#dedde2;letter-spacing:1px;display:flex;align-items:center;gap:9px;margin:0 0 11px}.hero-kicker span{background:var(--red);width:5px;height:5px;border-radius:50%}.hero h1{font:600 clamp(48px,5.7vw,88px)/1.4 "Noto Serif KR",serif;letter-spacing:-.07em;margin:0 0 3px;text-shadow:0 3px 28px #0008;white-space:nowrap}.hero-english{font-size:11px;letter-spacing:8px;color:#c5c9cd;margin:0 0 25px;padding-left:5px}.hero-meta,.detail-meta{display:flex;flex-wrap:wrap;gap:13px;align-items:center;color:#b9b9c0;font-size:13px}.match{color:#e1e4de;font-weight:600}.age{border:1px solid #b4b5bd88;padding:0 5px;font-size:11px;line-height:19px}.quality{border:1px solid #9fa0a888;padding:0 4px;font-size:10px;line-height:16px;font-weight:700;border-radius:2px}.hero-description{font-size:15px;line-height:1.9;color:#c3c6cf;margin:22px 0 28px}.hero-buttons{display:flex;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:4px;padding:12px 29px;font-size:15px;font-weight:700;min-height:48px;transition:background .15s,transform .15s;line-height:1.5}.button:hover{transform:translateY(-1px)}.button-white{background:#f5f5f4;color:#161618}.button-white:hover{background:#dcdcdf}.button-glass{background:#a0a2ad35;color:white;backdrop-filter:blur(10px)}.button-glass:hover{background:#a0a2ad55}.hero-side{position:absolute;right:var(--gutter);top:48%;display:flex;flex-direction:column;align-items:center;gap:22px}.hero-index{font-size:15px;font-weight:500}.hero-index span{color:#9c9ca3;font-size:11px}.hero-line{height:82px;width:1px;background:#ffffff45}.hero-side-label{writing-mode:vertical-rl;font-size:9px;letter-spacing:3px;color:#b0b3bd}.hero-bottom{position:absolute;bottom:39px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#8b8c94;letter-spacing:.3px}.hero-bottom a{display:flex;align-items:center;gap:12px;font-size:12px}.hero-bottom svg{width:15px;height:15px}
.catalog{padding:0 var(--gutter);overflow:hidden}.filters{display:flex;align-items:center;gap:9px;margin:10px 0 38px;overflow-x:auto;scrollbar-width:none}.filter{background:transparent;border:1px solid #ffffff23;border-radius:40px;padding:7px 18px;font-size:13px;color:#b8b8be;white-space:nowrap;transition:background .15s}.filter.active{background:#f2f2f0;color:#171719;border-color:#f2f2f0;font-weight:700}.filter:hover:not(.active){border-color:#ffffff88;color:white}.filter-caption{margin-left:auto;color:#6e6e78;font-size:12px;white-space:nowrap}.shelf{margin:0 0 43px;position:relative}.shelf-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.shelf-title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.5px}.shelf-title em{font-style:normal;color:var(--red);font-family:"Barlow Condensed",sans-serif;font-size:25px;margin-right:9px}.shelf-controls{display:flex;gap:6px}.shelf-controls button{height:28px;width:28px;border-radius:50%;border:1px solid #ffffff20;background:none;display:grid;place-items:center}.shelf-controls button:hover:not(:disabled){border-color:#ffffff88;background:#ffffff10}.shelf-controls svg{width:15px;height:15px}.shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 18px) / 5);gap:18px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:3px 1px 12px;margin:-3px -1px -12px}.shelf-track::-webkit-scrollbar{display:none}.card{min-width:0;position:relative;scroll-snap-align:start}.card-open{padding:0;display:block;text-align:left;background:none;width:100%;position:relative;border-radius:5px}.card-image{position:relative;aspect-ratio:1.64;overflow:hidden;border-radius:5px;background:#25282d}.card-image img{height:100%;transition:transform .45s,filter .3s;filter:brightness(.8)}.card-open:hover img{transform:scale(1.06);filter:brightness(1)}.card-image:after{content:"";position:absolute;inset:20% 0 0;background:linear-gradient(transparent,#0009)}.card-original{position:absolute;top:10px;left:12px;color:#f3404b;font:800 24px/1 "Barlow Condensed",sans-serif;z-index:1;text-shadow:0 1px 5px #0005}.card-art-title{position:absolute;left:16px;right:12px;bottom:15px;z-index:1;font:600 clamp(17px,1.55vw,26px)/1.4 "Noto Serif KR",serif;letter-spacing:-1px;text-shadow:0 2px 9px #0008}.card-art-title small{display:block;margin-top:4px;font:500 8px/1.5 var(--font);letter-spacing:2.5px;color:#d7d9dc}.card-badge{position:absolute;top:10px;right:10px;background:var(--red);color:white;font-size:9px;line-height:1.6;padding:2px 6px;font-weight:600;z-index:1}.card-name{font-size:14px;margin:11px 0 3px;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:6px}.card-description{font-size:12px;color:#85858e;margin:0}.card-description span+span:before{content:"·";padding:0 7px;color:#57575e}.card-save{position:absolute;right:8px;bottom:13px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#15151bab;z-index:2;border:1px solid #ffffff70;opacity:0;transition:opacity .15s}.card-save svg{width:16px;height:16px}.card:hover .card-save,.card:focus-within .card-save,.card-save.is-saved{opacity:1}.card-save.is-saved{background:#eee;color:#111;border-color:#eee}.card-hover-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transition:opacity .2s}.card-hover-play span{width:40px;height:40px;background:#ffffffd9;color:#111;display:grid;place-items:center;border-radius:50%}.card-hover-play svg{width:18px;height:18px}.card-open:hover .card-hover-play{opacity:1}.rank-track{grid-auto-columns:calc((100% - 4 * 22px) / 5);gap:22px}.rank-card{padding-left:32px;position:relative;min-width:0}.rank-number{position:absolute;bottom:29px;left:-2px;font:800 clamp(75px,8vw,127px)/.85 "Barlow Condensed",sans-serif;letter-spacing:-7px;color:var(--bg);-webkit-text-stroke:1px #62636c;z-index:3;pointer-events:none;text-shadow:6px 0 10px #0009}.rank-card .card-image{aspect-ratio:.77}.rank-card .card-art-title{bottom:22px;left:24px;right:8px;font-size:23px;word-break:keep-all}.rank-card .card-art-title small{font-size:8px;letter-spacing:2px}.rank-card .card-original{font-size:20px;left:10px}.rank-card .card-image img{filter:brightness(.7)}.rank-card .card-badge{font-size:8px}.rank-card .card-name,.rank-card .card-description{display:none}.rank-card .card-save{bottom:10px}.rank-card .card-image:after{inset:0;background:linear-gradient(0deg,#000c,transparent 85%)}.rank-label{font:500 10px var(--font);color:#8f8f98;letter-spacing:3px;margin:0 0 4px}.rank-shelf{border-top:1px solid #ffffff0b;padding-top:30px;margin-top:51px;margin-bottom:48px}.rank-shelf .shelf-heading{align-items:flex-end;margin-bottom:23px}.shelf-subtitle{font-size:12px;color:#777780;margin:6px 0 0}.closing-note{display:flex;align-items:center;justify-content:center;gap:23px;padding:38px 0 50px}.closing-note p{font:500 16px "Noto Serif KR",serif;color:#75757f;white-space:nowrap}.closing-line{width:54px;height:1px;background:#ffffff14}footer{display:flex;align-items:flex-start;gap:37px;padding:41px var(--gutter) 43px;border-top:1px solid #ffffff10}footer .wordmark{font-size:30px;color:#696970}footer .brand-dot{color:#696970}footer p{margin:0 0 12px;font-size:13px;color:#9999a0}footer .fineprint{font-size:11px;line-height:1.9;color:#5f5f68}.copyright{margin-left:auto;font-size:11px;color:#64646e}
.browse-mode .header{position:relative;background:#101011}.browse-heading{padding-top:64px;margin-bottom:35px}.browse-heading .eyebrow{font-size:10px;color:var(--red);margin-bottom:10px}.browse-heading h1{font-size:35px;letter-spacing:-1px;margin:0}.browse-heading>p:last-child{color:var(--muted);font-size:14px;margin:10px 0 0}.results-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 18px}.result-count{font-size:13px;color:var(--muted);margin-bottom:21px}.empty-state{text-align:center;min-height:340px;padding:50px 20px}.empty-state>svg{width:39px;height:39px;color:#7e7e89;margin:0 auto 22px}.empty-state h2{font-size:23px}.empty-state p{color:var(--muted);font-size:14px}.empty-state .button{margin-top:16px}.browse-mode #results{min-height:300px}
dialog{border:1px solid #ffffff15;border-radius:12px;background:#18181b;color:white;padding:0;max-height:90dvh;width:min(720px,92vw);max-width:92vw;box-shadow:0 25px 120px #000b;overflow-y:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(7px)}body:has(dialog[open]){overflow:hidden}.detail-art{height:330px;position:relative;overflow:hidden}.detail-art>img{height:100%;object-position:center 35%}.detail-shade{position:absolute;inset:0;background:linear-gradient(0deg,#18181b,transparent 90%)}.close-button{position:absolute;right:15px;top:15px;background:#111b}.detail-art-title{position:absolute;left:35px;bottom:18px}.detail-art-title .eyebrow{font-size:9px;margin-bottom:9px;color:#ddd}.detail-art-title h2{font:600 43px/1.4 "Noto Serif KR",serif;letter-spacing:-2px;margin:0}.detail-body{padding:0 35px 30px}.detail-actions{display:flex;gap:13px;margin:0 0 25px;align-items:center}.save-button{display:flex;align-items:center;gap:8px;padding:10px 17px;min-height:47px;background:none;border:1px solid #ffffff50;border-radius:4px;font-size:14px}.save-button:hover{background:#ffffff10}.detail-description{font-size:16px;line-height:1.9;margin:22px 0}.detail-tags{font-size:13px;color:#9c9ca7}.demo-note{font-size:12px;color:#73737f;border-top:1px solid #ffffff13;padding-top:19px;margin:24px 0 0}#player-dialog{width:min(1100px,95vw);max-width:95vw;background:#101011}.player-header{display:flex;justify-content:space-between;align-items:center;padding:22px 25px}.player-header .eyebrow{font-size:9px;color:#a5a5b0;margin-bottom:4px}.player-header h2{font-size:20px;margin:0}video{display:block;width:100%;aspect-ratio:16/9;max-height:62vh;background:#000}.player-caption{color:#868690;font-size:12px;padding:0 25px;margin:17px 0 20px}.player-caption a{text-decoration:underline}#video-error{padding:0 25px;color:#ffc6ca;font-size:14px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);border:1px solid #ffffff26;background:#28282eee;backdrop-filter:blur(12px);border-radius:6px;padding:12px 23px;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-size:14px;max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1700px){.hero-content{padding-top:180px}.hero{height:800px}.catalog,footer,.header{padding-left:max(var(--gutter),calc((100vw - 1650px)/2));padding-right:max(var(--gutter),calc((100vw - 1650px)/2))}.hero-content{margin-left:max(0px,calc((100vw - 1810px)/2))}}@media(max-width:1150px){.header{gap:35px}.nav{gap:23px}.hero{min-height:650px}.hero h1{font-size:65px}.shelf-track{grid-auto-columns:calc((100% - 3 * 16px) / 4);gap:16px}.rank-track{grid-auto-columns:calc((100% - 3 * 18px) / 4);gap:18px}.results-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.search-wrap input{width:170px}.filter-caption{display:none}.hero-side{display:none}.header-actions{gap:14px}}
@media(max-width:800px){.header{height:112px;flex-wrap:wrap;gap:0;align-content:center;justify-content:space-between;padding-top:6px;padding-bottom:7px;background:linear-gradient(#080a0ef0,#080a0e55)}.wordmark{font-size:36px}.header-actions{order:1;margin-left:auto}.nav{order:2;width:100%;gap:27px;overflow-x:auto;scrollbar-width:none;padding-top:8px}.nav-link{font-size:12px;padding:8px 0}.hero{min-height:670px;height:78vh;max-height:790px}.hero-content{padding-top:208px;max-width:640px}.hero h1{font-size:59px}.hero .eyebrow{margin-bottom:25px;font-size:9px;letter-spacing:2px}.hero-image{object-position:67% center}.hero-shade{background:linear-gradient(90deg,#05080bd6,#06090c69 65%,#0002),linear-gradient(0deg,#101011 0%,#101011bb 12%,transparent 70%)}.hero-description{font-size:14px}.hero-english{font-size:9px;letter-spacing:6px}.hero-bottom{bottom:27px}.hero-bottom>span{display:none}.hero-bottom a{margin-left:auto}.filters{margin-bottom:30px}.filter{font-size:12px;padding:7px 15px}.shelf-title{font-size:18px}.shelf-track{grid-auto-columns:calc((100% - 2 * 14px) / 3);gap:14px}.rank-track{grid-auto-columns:calc((100% - 2 * 16px) / 3);gap:16px}.card-art-title{font-size:21px}.results-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.copyright{display:none}footer{gap:26px}.browse-heading{padding-top:42px}.rank-card .card-art-title{font-size:21px;left:20px}.card-save{opacity:1}.closing-note{padding:17px 0 34px}}
@media(max-width:520px){:root{--gutter:22px}.header{height:112px}.nav{gap:23px}.nav-link{font-size:11px}.header-actions{gap:12px}.search-wrap.expanded{position:absolute;right:22px;top:16px;width:calc(100% - 118px)}.search-wrap input{width:100%;min-width:0;font-size:12px}.search-wrap.expanded~.profile{visibility:hidden}.hero{min-height:680px;height:85svh;max-height:750px}.hero-content{padding-top:257px;padding-bottom:90px}.hero h1{font-size:49px}.hero .eyebrow{margin-bottom:20px;font-size:9px}.hero-image{object-position:64% center}.hero-shade{background:linear-gradient(0deg,#101011 0%,#101011d4 28%,#10101135 70%,#080b1140),linear-gradient(90deg,#0007,transparent 90%)}.hero-kicker{font-size:11px}.hero-english{letter-spacing:5px;margin-bottom:19px;font-size:8px}.hero-meta{font-size:11px;gap:9px}.hero-description{font-size:12px;line-height:1.9;margin:18px 0 23px}.button{min-height:44px;padding:11px 22px;font-size:13px}.button svg{width:18px;height:18px}.hero-buttons{gap:10px}.hero-bottom{bottom:20px}.hero-bottom a{font-size:10px}.filters{margin-top:6px;gap:7px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}.filter{font-size:11px;padding:6px 14px}.shelf-heading{margin-bottom:16px}.shelf-title{font-size:17px}.shelf-track{grid-auto-columns:72%;gap:13px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}.card-art-title{font-size:27px}.card-art-title small{font-size:9px}.card-name{font-size:13px}.card-description{font-size:11px}.shelf{margin-bottom:34px}.rank-shelf{margin-top:36px;padding-top:27px}.rank-track{grid-auto-columns:53%;gap:16px}.rank-number{font-size:106px;bottom:28px}.rank-card .card-art-title{font-size:23px;left:19px}.results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 13px}.results-grid .card-art-title{font-size:19px;left:10px;bottom:10px}.results-grid .card-art-title small{display:none}.results-grid .card-original{font-size:19px;top:8px;left:9px}.results-grid .card-badge{font-size:8px;right:7px;top:8px}.results-grid .card-image{aspect-ratio:1.25}.results-grid .card-description{font-size:10px}.results-grid .card-save{width:24px;height:24px;bottom:8px;right:6px}.browse-heading h1{font-size:29px}.browse-heading>p:last-child{font-size:12px}.closing-note{gap:14px}.closing-note p{font-size:13px}.closing-line{width:28px}footer{gap:19px;padding-top:30px}footer .wordmark{font-size:26px}footer p{font-size:11px}footer .fineprint{font-size:9px}.detail-art{height:270px}.detail-art-title{left:22px}.detail-art-title h2{font-size:33px}.detail-body{padding:0 22px 23px}.detail-description{font-size:14px}.detail-meta{font-size:12px}.save-button{font-size:12px;padding:10px;min-height:44px}.detail-actions{gap:10px}.player-header{padding:16px}.player-header h2{font-size:17px}.player-caption{font-size:10px;padding:0 16px}.empty-state h2{font-size:19px}}
.wordmark{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:34px;letter-spacing:1px}.brand-sub{font:600 9px/1 var(--font);letter-spacing:7px;padding-left:7px}.header{gap:44px}.original-mark{font-size:24px}.card-original{font-size:21px}.hero .eyebrow{font-size:11px;letter-spacing:2px}.hero-description{font-size:16px}.hero-meta,.detail-meta{font-size:14px}.hero-kicker{font-size:14px}.filter{font-size:14px}.card-description{font-size:12px}.hero-index{font:700 24px "Barlow Condensed",sans-serif}.hero-content{padding-top:155px}.hero{min-height:720px}footer .wordmark{font-size:28px}.shelf-subtitle{font-size:12px}.nav-link{font-size:14px}.profile{width:34px;height:34px}.detail-description{font-size:16px}.demo-note{font-size:12px}.fineprint a{text-decoration:underline}.header-actions .search-wrap{min-width:40px}
@media(max-width:1150px){.header{gap:32px}.hero-content{padding-top:155px}.hero{min-height:700px}.nav{gap:22px}}
@media(max-width:800px){.header{gap:0;height:126px}.wordmark{font-size:30px}.brand-sub{font-size:8px;letter-spacing:6px;padding-left:6px}.nav{padding-top:14px;gap:26px}.nav-link{font-size:14px}.hero-content{padding-top:227px}.hero{min-height:740px}.hero .eyebrow{font-size:10px}.hero-description{font-size:16px}.card-name{font-size:14px}}
@media(max-width:520px){.wordmark{font-size:29px}.header{height:123px}.nav{gap:19px;padding-top:14px}.nav-link{font-size:13px}.hero{min-height:790px;height:92svh;max-height:900px}.hero-content{padding-top:302px}.hero h1{font-size:49px}.hero-description{font-size:15px;line-height:1.9}.hero-kicker{font-size:12px}.hero .eyebrow{font-size:9px;letter-spacing:1.4px}.hero-meta{font-size:12px}.filter{font-size:13px}.button{font-size:14px}.card-description{font-size:12px}.shelf-title{font-size:18px}.search-wrap.expanded{top:18px;width:calc(100% - 151px)}.search-wrap input{font-size:12px}.rank-shelf .shelf-title{font-size:16px}.rank-shelf .shelf-title em{font-size:23px}.hero-image{object-position:65% center}.detail-description{font-size:16px}footer .fineprint{font-size:11px}footer{gap:20px;flex-wrap:wrap}.footer-brand{align-items:flex-start}.brand-sub{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}