/* 종류 ④ 필름 시네마 · 극장 어둠 + 텅스텐 금빛 + 벨벳 빨강, 필름 입자 */
:root{
  --page:#000; --bg:#0B0B0C; --fg:#EDE6DA; --sub:#8F897F; --line:#2B2926;
  --accent:#D9A441; --on-accent:#120E08; --sun:#D9A441; --velvet:#6B0F1A;
  --font:'Noto Sans KR',-apple-system,sans-serif; --disp:'Bebas Neue','Noto Sans KR',sans-serif;
  --card:#151413; --card-fg:#EDE6DA; --fab-bg:rgba(255,255,255,.12); --map-filter:grayscale(1) invert(.9) contrast(.85);
}
body{background:#000;font-weight:300}
.film{max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden}
.grain{position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(4) infinite}
@keyframes grain{25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-4%)}}
.lab{font:400 15px/1 var(--disp);letter-spacing:.32em;color:var(--accent)}
h2{font-size:24px;font-weight:700;line-height:1.4;margin:10px 0 22px;letter-spacing:-.01em}
.sub{color:var(--sub);font-size:12.5px;margin:-14px 0 16px}
.sec{padding:76px 26px 20px}
/* 포스터 표지 */
.poster{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#000}
.pz{position:absolute;inset:0}
.pz img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 12s cubic-bezier(.2,.6,.3,1)}
.shown .pz img{transform:scale(1.02)}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.92) 88%)}
.bar{position:absolute;left:0;right:0;height:7vh;background:#000;z-index:2;transition:height 1.6s cubic-bezier(.6,0,.2,1) .4s}
.bar.top{top:0}.bar.bot{bottom:0}
.po-txt{position:absolute;left:0;right:0;bottom:calc(7vh + 18px);z-index:3;text-align:center;padding:0 22px}
.po-in{font:400 14px/1 var(--disp);letter-spacing:.42em;color:var(--accent)}
.po-t{font:400 clamp(64px,21vw,96px)/.9 var(--disp);letter-spacing:.04em;margin:10px 0 6px;font-weight:400}
.po-nm{font-size:17px;font-weight:700;letter-spacing:.14em}
.po-nm i{font:italic 500 18px 'Cormorant Garamond',serif;color:var(--accent);margin:0 .5em}
.billing{margin-top:16px;font:400 11px/1.25 var(--disp);letter-spacing:.06em;color:rgba(237,230,218,.62);transform:scaleY(1.25)}
.rate{position:absolute;right:22px;top:-40px;width:30px;height:30px;border-radius:50%;background:#2E8B3A;color:#fff;font:400 12px/30px var(--disp);letter-spacing:.04em}
.shown .poster .po-txt>*{animation:poIn 1.4s cubic-bezier(.22,.61,.36,1) both}
.shown .po-t{animation-delay:.2s!important}.shown .po-nm{animation-delay:.4s!important}.shown .billing{animation-delay:.6s!important}
@keyframes poIn{from{opacity:0;transform:translateY(16px)}}
/* 시놉시스 */
.txt{font-size:14.5px;line-height:2;color:#D8D0C2}
.prod{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);text-align:left}
.prod .lab{margin-bottom:12px}
.prod .fam-row{justify-content:flex-start;font-size:14px}
/* 상영 시간 */
.show{text-align:center}
.big{font:400 92px/1 var(--disp);letter-spacing:.02em;margin-top:10px}
.big small{font-size:34px;color:var(--accent);vertical-align:top}
.tm{color:#CFC7B9;font-size:13.5px;margin:8px 0 28px}
.tm small{color:var(--sub)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:30px}
.cd div{background:#16110B;border:1px solid #3A2E1D;padding:12px 0 8px;position:relative}
.cd div::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.5)}
.cd b{display:block;font:400 38px/1 var(--disp);color:var(--accent);font-variant-numeric:tabular-nums}
.cd small{font:400 11px/1 var(--disp);letter-spacing:.24em;color:var(--sub)}
.show .cal{margin-bottom:26px}
.show .cal td.on span{box-shadow:0 0 18px rgba(217,164,65,.6)}
/* 필름 띠 */
.strip{margin:0 -26px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.reel{display:flex;gap:0;padding:22px 0;width:max-content;background:#120F0C;
  background-image:radial-gradient(circle,#0B0B0C 0 3.5px,transparent 4px),radial-gradient(circle,#0B0B0C 0 3.5px,transparent 4px);background-size:16px 22px,16px 22px;background-position:0 0,0 100%;background-repeat:repeat-x}
.reel::before,.reel::after{content:"";flex:0 0 20px}
.fr{position:relative;flex:0 0 auto;height:230px;margin:0 5px;scroll-snap-align:center;background:#000;border:1px solid #241E17}
.fr img{height:100%;width:auto;filter:sepia(.12) contrast(1.05)}
.fr-n{position:absolute;bottom:-19px;left:4px;font:400 11px/1 var(--disp);color:#C77C2A;letter-spacing:.08em}
.edge{font:400 11px/1 var(--disp);color:#C77C2A;letter-spacing:.3em;margin-top:10px;opacity:.8}
/* 극장 */
.theater .tm{text-align:left}
/* 영화표 */
.ticket{display:flex;margin-bottom:18px;color:#1A140C;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.tk-m{flex:1;background:linear-gradient(135deg,#F2E3C2,#E3CC9C);padding:18px 18px 16px;border-radius:6px 0 0 6px;-webkit-mask:radial-gradient(circle at 100% 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat}
.tk-k{font:400 12px/1 var(--disp);letter-spacing:.3em;color:var(--velvet)}
.tk-t{font:400 38px/1 var(--disp);letter-spacing:.04em;margin:6px 0 10px}
.tk-m dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.tk-m dt{font:400 11px/1 var(--disp);letter-spacing:.2em;color:#7A6545}
.tk-m dd{font-size:13px;font-weight:700}
.tk-s{width:78px;background:linear-gradient(135deg,#E9D6AE,#D9BF88);border-left:2px dashed rgba(26,20,12,.35);border-radius:0 6px 6px 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0;-webkit-mask:radial-gradient(circle at 0 0,transparent 9px,#000 9.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent 9px,#000 9.5px) bottom/100% 51% no-repeat}
.code{width:46px;height:70px;background:repeating-linear-gradient(0deg,#1A140C 0 2px,transparent 2px 4px,#1A140C 4px 5px,transparent 5px 8px)}
.tk-v{writing-mode:vertical-rl;font:400 15px/1 var(--disp);letter-spacing:.3em;color:var(--velvet)}
/* 관람평 */
.gb-head{display:flex;justify-content:space-between;align-items:center}
.gb-head h2{margin:10px 0 14px}
.rv-card{background:#141210;border:1px solid var(--line);padding:16px 40px 14px 16px;margin-bottom:8px}
.stars{color:var(--accent);letter-spacing:.2em;font-size:13px;margin-bottom:6px}
/* 엔딩 크레딧 */
.credits{position:relative;height:440px;overflow:hidden;margin-top:60px;background:#000;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.roll{position:absolute;left:0;right:0;top:100%;text-align:center}
.credits.run .roll{animation:roll 22s linear infinite}
@keyframes roll{to{transform:translateY(calc(-100% - 440px))}}
.roll p{font-size:15px;font-weight:700;margin-bottom:34px;white-space:pre-wrap}
.roll span{display:block;font:400 13px/1.6 var(--disp);letter-spacing:.3em;color:var(--sub);font-weight:400}
.roll .end{font:400 44px/1 var(--disp);letter-spacing:.2em;color:var(--accent);margin-top:60px}
html:not(.rv-on) .roll{position:static;padding:40px 0}
.thanks .cts{margin-top:24px}
.sh{display:flex;gap:8px;justify-content:center;margin:40px 0 50px}
/* 시작 화면 */
.cn-intro{position:fixed;inset:0;z-index:70;background:#000;color:var(--fg);transition:opacity 1.1s ease,visibility 1.1s}
.cn-intro.gone{opacity:0;visibility:hidden}
.st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.st1{opacity:1;visibility:visible}
.s2 .st1,.s3 .st1{opacity:0;visibility:hidden}
.s2 .st2,.s3 .st3{opacity:1;visibility:visible}
.cn-k{font:400 15px/1 var(--disp);letter-spacing:.5em;color:var(--accent);padding-left:.5em}
.cn-t{font:400 56px/1 var(--disp);letter-spacing:.06em;margin:18px 0 40px}
.cn-t i{font:italic 500 34px 'Cormorant Garamond',serif;color:var(--accent)}
.play{display:flex;align-items:center;gap:12px;border:1px solid rgba(237,230,218,.5);padding:14px 26px;font-size:14px;letter-spacing:.14em}
.play span{width:0;height:0;border-left:11px solid var(--accent);border-top:7px solid transparent;border-bottom:7px solid transparent}
.cn-n{margin-top:14px;font-size:12px;color:var(--sub)}
.leader{position:relative;width:230px;height:230px;border-radius:50%;border:2px solid #CFC7B9;display:grid;place-items:center;overflow:hidden;background:#9A948A;
  background-image:linear-gradient(#CFC7B9,#CFC7B9),linear-gradient(#CFC7B9,#CFC7B9);background-size:100% 2px,2px 100%;background-position:center;background-repeat:no-repeat}
.leader::before{content:"";position:absolute;inset:16px;border-radius:50%;border:2px solid #E9E3D8}
.sweep{position:absolute;inset:0;background:conic-gradient(rgba(30,28,25,.55) 0deg,transparent 0deg)}
.leader.tick .sweep{animation:sweep .9s linear forwards}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sweep{from{--a:0deg}to{--a:360deg}}
.sweep{background:conic-gradient(rgba(30,28,25,.55) var(--a),transparent var(--a))}
.leader b{position:relative;font:400 130px/1 var(--disp);color:#111}
.ttl{position:absolute;left:24px;right:24px;transition:opacity 1s}
.t-a{font-size:15px;letter-spacing:.1em;color:#CFC7B9}
.t-b{opacity:0;font:400 64px/1 var(--disp);letter-spacing:.08em}
.t-b small{display:block;font:700 14px/1 var(--font);letter-spacing:.3em;color:var(--accent);margin-bottom:14px}
.s3b .t-a{opacity:0}.s3b .t-b{opacity:1}
.skip{position:absolute;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));font-size:12px;color:var(--sub);padding:8px}
.s2 .skip,.s3 .skip{color:#CFC7B9}
.st1~.skip{display:block}