:root { --ink:#111113; --paper:#f4f1ea; --red:#ff4d35; --muted:#74716c; --line:#d8d3c9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans','Noto Sans KR',sans-serif; }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.site-header { height:76px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; color:#fff; background:#09090b; border-bottom:1px solid #29292d; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.03em; }
.brand b { color:var(--red); }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--red); border-radius:50%; font-weight:800; }
.brand-mark.small { width:27px; height:27px; font-size:12px; }
.site-header nav { display:flex; gap:28px; color:#a9a9ae; font-size:14px; }
.site-header nav a:hover { color:#fff; }
.hero { min-height:560px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; padding:90px clamp(22px,8vw,130px); color:white; background:#09090b; }
.hero::before { content:''; position:absolute; width:680px; height:680px; right:-110px; top:-250px; border:1px solid #333337; border-radius:50%; box-shadow:0 0 0 100px #101013,0 0 0 101px #29292d,0 0 0 200px #0d0d10,0 0 0 201px #202024; opacity:.7; }
.hero::after { content:'NOW PLAYING'; position:absolute; right:-65px; bottom:30px; color:#141418; font-size:clamp(80px,15vw,220px); line-height:.8; font-weight:800; white-space:nowrap; }
.hero-noise { position:absolute; inset:0; 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='.4'/%3E%3C/svg%3E"); }
.hero-copy { position:relative; z-index:2; max-width:720px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 21px; color:#a9a9ae; font-size:11px; font-weight:700; letter-spacing:.19em; }
.eyebrow span { width:22px; height:2px; background:var(--red); }
.eyebrow.dark { color:var(--muted); }
.hero h1 { margin:0; font-family:'Noto Sans KR',sans-serif; font-size:clamp(48px,6vw,84px); line-height:1.06; letter-spacing:-.07em; }
.hero h1 em { color:var(--red); font-style:normal; }
.hero-description { max-width:540px; margin:27px 0; color:#a9a9ae; font-size:17px; line-height:1.75; word-break:keep-all; }
.search { width:min(590px,100%); height:62px; display:flex; align-items:center; padding:6px 6px 6px 20px; border:1px solid #38383d; border-radius:5px; background:#161619; }
.search:focus-within { border-color:#66666c; }
.search svg { width:21px; fill:none; stroke:#85858b; stroke-width:2; }
.search input { min-width:0; flex:1; padding:0 14px; color:#fff; border:0; outline:0; background:transparent; }
.search button { height:48px; padding:0 23px; color:#fff; border:0; border-radius:3px; background:var(--red); font-weight:700; cursor:pointer; }
.hero-stat { position:relative; z-index:2; align-self:flex-end; display:flex; align-items:center; gap:13px; margin-bottom:18px; padding:17px 21px; border:1px solid #333337; background:rgba(17,17,20,.78); backdrop-filter:blur(10px); }
.hero-stat div { display:flex; flex-direction:column; gap:2px; }
.hero-stat strong { font-size:13px; }.hero-stat small { color:#77777e; }
.pulse { width:9px; height:9px; border-radius:50%; background:#54d28b; box-shadow:0 0 0 5px rgba(84,210,139,.12); }
.movie-section { padding:90px clamp(22px,6vw,100px) 120px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.section-head h2 { margin:0; font-family:'Noto Sans KR'; font-size:clamp(34px,4vw,54px); letter-spacing:-.06em; }
.section-head p:last-child { margin:10px 0 0; color:var(--muted); }
.genre-filter { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.genre-filter select { min-width:130px; padding:10px 32px 10px 12px; border:1px solid var(--line); background:transparent; }
.tabs { display:flex; gap:5px; margin-bottom:35px; border-bottom:1px solid var(--line); }
.tab { position:relative; padding:15px 22px; border:0; color:#88847d; background:transparent; font-weight:700; cursor:pointer; }
.tab.active { color:var(--ink); }
.tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--red); }
.status { min-height:23px; margin-bottom:18px; color:var(--muted); font-size:13px; }
.movie-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:38px 18px; }
.movie-card { min-width:0; cursor:pointer; outline:none; animation:cardIn .5s both; animation-delay:var(--delay); }
@keyframes cardIn { from { opacity:0; transform:translateY(16px); } }
.poster { aspect-ratio:2/3; position:relative; overflow:hidden; background:#dedad1; }
.poster img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.movie-card:hover .poster img,.movie-card:focus .poster img { transform:scale(1.045); filter:brightness(.75); }
.score { position:absolute; left:0; bottom:0; padding:8px 11px; color:#fff; background:rgba(9,9,11,.88); font-size:12px; backdrop-filter:blur(6px); }
.score b { color:#ffd45b; }
.card-arrow { position:absolute; right:12px; top:12px; width:36px; height:36px; display:grid; place-items:center; opacity:0; transform:translateY(6px); color:#fff; border-radius:50%; background:var(--red); transition:.3s; }
.movie-card:hover .card-arrow,.movie-card:focus .card-arrow { opacity:1; transform:none; }
.poster-empty { height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#27272c,#111114); color:#66666d; font-size:11px; letter-spacing:.15em; }
.card-body { padding-top:15px; }
.card-body p { margin:0 0 6px; color:var(--red); font-size:11px; font-weight:700; letter-spacing:.08em; }
.card-body h3 { overflow:hidden; margin:0; font-family:'Noto Sans KR'; font-size:17px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.card-body span { display:block; margin-top:8px; color:#98938b; font-size:12px; }
.load-more { display:block; margin:60px auto 0; padding:15px 28px; border:1px solid var(--ink); background:transparent; font-weight:700; cursor:pointer; }
.load-more:hover { color:#fff; background:var(--ink); }
.empty { grid-column:1/-1; padding:80px; text-align:center; border:1px solid var(--line); }.empty strong{font-size:22px}.empty p{color:var(--muted)}
.empty button { padding:10px 17px; border:0; color:#fff; background:var(--red); cursor:pointer; }
.skeleton { animation:pulseSkeleton 1.3s infinite; }.skeleton .poster,.skeleton i{background:#e2ded5}.skeleton i{display:block;height:12px;margin-bottom:9px}.skeleton i:nth-child(2){width:75%}.skeleton i:nth-child(3){width:45%}
@keyframes pulseSkeleton { 50%{opacity:.45} }
footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:40px clamp(22px,6vw,100px); color:#96969c; background:#09090b; font-size:12px; }
footer>div { display:flex; align-items:center; gap:9px; color:#fff; } footer p { max-width:520px; text-align:center; } footer p a { color:#fff; text-decoration:underline; }
.movie-dialog { width:min(1050px,92vw); max-height:90vh; padding:0; overflow:auto; color:#fff; border:1px solid #39393e; background:#09090b; box-shadow:0 28px 90px #000; }
.movie-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(5px); }
.movie-dialog.fallback-open { position:fixed; inset:5vh 4vw; z-index:1000; margin:auto; }
.movie-dialog.fallback-open::before { content:''; position:fixed; inset:0; z-index:-2; background:rgba(0,0,0,.88); }
.dialog-close { position:fixed; z-index:5; margin:15px 0 0 min(990px,calc(92vw - 58px)); width:42px; height:42px; color:#fff; border:1px solid #55555b; border-radius:50%; background:rgba(0,0,0,.5); font-size:28px; cursor:pointer; }
.dialog-backdrop { position:absolute; inset:0 0 auto; height:100%; opacity:.38; background-size:cover; background-position:center; }
.dialog-main { min-height:650px; position:relative; display:grid; grid-template-columns:270px 1fr; gap:45px; align-items:center; padding:70px; }
.dialog-poster img { width:100%; box-shadow:0 15px 50px #000; }
.dialog-info h2 { margin:0; font-family:'Noto Sans KR'; font-size:44px; line-height:1.2; letter-spacing:-.05em; }
.original-title { color:#8a8a91; }.meta,.genres{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0}.meta span{padding-left:12px;border-left:1px solid #44444a;color:#babac0}.meta b{color:#ffd45b}.genres span{padding:6px 9px;border:1px solid #44444a;color:#bcbcc1;font-size:12px}.overview{max-width:620px;color:#c4c4c8;line-height:1.8;word-break:keep-all}.dialog-info dl{margin:24px 0}.dialog-info dl div{display:grid;grid-template-columns:55px 1fr;margin:9px 0}.dialog-info dt{color:#77777d}.dialog-info dd{margin:0}.trailer{display:inline-flex;padding:13px 18px;color:#fff;background:var(--red);font-weight:700}.dialog-loading{padding:140px 30px;text-align:center;color:#aaa}
@media(max-width:1000px){.movie-grid{grid-template-columns:repeat(4,1fr)}.hero-stat{display:none}}
@media(max-width:740px){.site-header{height:64px}.site-header nav a:first-child{display:none}.hero{min-height:560px;padding:70px 22px}.hero::before{right:-480px}.hero h1{font-size:48px}.hero-description{font-size:15px}.search{height:56px}.search button{height:44px;padding:0 17px}.movie-section{padding:65px 18px 90px}.section-head{align-items:flex-start;flex-direction:column}.movie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}.tab{flex:1;padding:14px 5px;font-size:13px}.dialog-main{grid-template-columns:1fr;padding:58px 24px 35px}.dialog-poster{display:none}.dialog-info h2{font-size:34px}.dialog-close{right:calc(4vw + 10px);margin-left:0}footer{align-items:flex-start;flex-direction:column}footer p{text-align:left}}