/* v048 Codex 비교안(origin/codex/funnytv-concept-20261031 five-page-20261101 R19) 2페이지 FunnyTV 장면을 그대로 옮김: five-page.css 중 비즈니스 규칙 + poster-cylinder.css 중 비즈니스 규칙 */
.funny-stage{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-height:100svh;padding:calc(var(--header) + 4vh) 7vw 5vh;background:#100911}
.fs-backdrop{inset:-3%}
.fs-backdrop img{filter:none;opacity:.85;object-position:70% 35%}
.fs-backdrop:after{background:linear-gradient(90deg,#100911f5 4%,#100911a8 38%,#1009111a 80%),linear-gradient(0deg,#100911 0%,transparent 55%)}
.fs-copy{max-width:560px;margin:auto 0}
.fs-copy h2{font-size:clamp(48px,5.6vw,88px)}
.fs-copy p{color:#e0d5dc}
.fs-screen{position:absolute;inset:0;z-index:1;opacity:1!important;transform:none!important;pointer-events:none}
.fs-frame{position:absolute;inset:0;background:none;box-shadow:none;border-radius:0;pointer-events:auto}
.fs-frame img,.fs-frame:after,.fs-frame:before,.fs-play,.fs-badge{display:none}
.fs-screen figcaption{position:absolute;right:7vw;bottom:145px;font-size:10px;color:#c5b8c0}
.fs-hint{right:7vw;bottom:180px;font-size:14px}
.fs-copy,.fs-foot{z-index:3}
.fs-foot{margin:8vh 0 0}
.fs-keyword{opacity:.6}
.fs-also{display:none}
.fs-more{margin-left:auto}
@media(max-width:760px){.funny-stage{padding:calc(var(--header) + 25px) 24px 45px;gap:0}.fs-copy{margin:8vh 0 auto;max-width:100%}.fs-copy h2{font-size:46px}.fs-backdrop img{object-position:63% center}.fs-backdrop:after{background:linear-gradient(90deg,#100911d9,#10091133),linear-gradient(0deg,#100911 2%,transparent 65%)}.fs-screen figcaption{left:24px;right:24px;bottom:125px;font-size:9px}.fs-hint{display:none}.fs-foot{margin-top:20px;gap:12px;padding-top:18px}.fs-more{font-size:12px}.fs-ott img{width:26px;height:26px}.fs-keyword{bottom:26vh}}
@media(max-width:760px) and (max-height:740px){.fs-copy{margin-top:5vh}.fs-copy h2{font-size:39px}}
.fs-ott{gap:8px;flex-wrap:wrap}
.fs-ott li{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#121212;overflow:hidden;flex:none;border:1px solid #ffffff44}
.fs-ott li img{width:100%;height:100%;object-fit:contain;border-radius:0;filter:none}
.fs-ott .watcha-word{color:#ff1555;font-size:9px;font-weight:900}
.fs-ott .apple-word{font-size:10px;font-weight:700}
.fs-ott svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.fs-note{display:none}
@media(max-width:760px){.fs-ott{display:grid;grid-template-columns:repeat(4,38px);gap:7px}.fs-ott li{width:38px;height:38px;border-radius:10px}.fs-foot{flex-wrap:wrap}.fs-more{align-self:flex-end}.fs-screen figcaption{bottom:155px}}
/* R8: independent FunnyTV poster cylinder, with compositor-only rotation. */
.poster-stage{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:1fr auto;align-items:center;gap:0 3vw;isolation:isolate}

.poster-stage .fs-copy{z-index:3}.poster-stage .fs-foot{z-index:3}
.poster-showcase{position:relative;min-width:0;margin:0;z-index:2;color:white;align-self:center}
.poster-topline{display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:10px;letter-spacing:.2em;color:#b5b8c4}
.poster-toggle{border:1px solid #ffffff33;background:transparent;color:#d9dce5;border-radius:30px;padding:10px 14px;font:inherit;letter-spacing:0;cursor:pointer;min-height:40px}.poster-toggle:hover{border-color:#fff}
.poster-window{position:relative;height:clamp(410px,39vw,660px);overflow:hidden;perspective:1400px;perspective-origin:50% 42%;--radius:clamp(235px,21vw,400px);--card:clamp(200px,18vw,340px);--card-height:calc(var(--card) * 1.3)}
.poster-cylinder{position:absolute;left:50%;top:48%;width:0;height:0;transform-style:preserve-3d;animation:poster-orbit 36s linear infinite;will-change:transform}
.poster-card{position:absolute;left:calc(var(--card)/-2);top:calc(var(--card-height) / -2);width:var(--card);height:var(--card-height);display:block;background:#12141e;border:1px solid #ffffff26;border-radius:12px;overflow:hidden;backface-visibility:hidden;transform:rotateY(var(--angle)) translateZ(var(--radius));box-shadow:0 18px 30px #0008;color:#fff;text-decoration:none}
.poster-card img{display:block;width:100%;height:var(--card);object-fit:cover}.poster-card>span{display:flex;flex-direction:column;gap:5px;padding:10px 14px}.poster-card small{font-size:8px;letter-spacing:.2em;color:#ff4b61}.poster-card b{font-size:14px;font-weight:600}
.poster-floor{position:absolute;bottom:36px;left:15%;width:70%;height:40px;border-radius:50%;background:radial-gradient(ellipse,#fa264a36,transparent 70%);pointer-events:none}
.poster-showcase figcaption{font-size:10px;color:#8e92a4;text-align:center;line-height:1.6;padding:0 12px}
.poster-showcase.is-paused .poster-cylinder,.poster-window:hover .poster-cylinder,.poster-window:focus-within .poster-cylinder{animation-play-state:paused}
.poster-card:focus-visible,.poster-toggle:focus-visible{outline:2px solid #ff4b61;outline-offset:3px}
@keyframes poster-orbit{from{transform:translateZ(calc(-1 * var(--radius))) rotateY(0deg)}to{transform:translateZ(calc(-1 * var(--radius))) rotateY(-360deg)}}
@media(max-width:760px){
.poster-stage{display:flex;gap:14px;padding:calc(var(--header) + 18px) 24px 24px;justify-content:center}
.poster-stage .fs-copy{margin:0}.poster-stage .fs-copy h2{font-size:36px;margin-bottom:12px}.poster-stage .fs-copy p{font-size:12px;line-height:1.6}.poster-stage .fs-copy .eyebrow{font-size:9px;margin-bottom:12px}
.poster-showcase{width:100%}.poster-topline{padding:0;font-size:8px}.poster-toggle{font-size:10px;padding:6px 12px;min-height:32px}
.poster-window{height:230px;--radius:128px;--card:122px;perspective:700px}.poster-card{top:-85px;height:166px;border-radius:8px}.poster-card img{height:122px}.poster-card>span{padding:6px 8px;gap:3px}.poster-card small{font-size:6px}.poster-card b{font-size:11px}.poster-floor{bottom:15px}
.poster-showcase figcaption{font-size:8px;padding:0}.poster-stage .fs-foot{margin-top:0;padding-top:12px;gap:8px}.poster-stage .fs-ott{grid-template-columns:repeat(8,26px);gap:6px}.poster-stage .fs-ott li{width:26px;height:26px;border-radius:7px}.poster-stage .fs-ott img,.poster-stage .fs-ott svg{width:20px;height:20px}.poster-stage .fs-more{margin-left:0;font-size:11px;min-height:32px}.poster-stage .fs-also{width:auto;margin-left:auto;gap:12px}.poster-stage .fs-also a{font-size:11px;min-height:32px}
}
@media(max-width:760px) and (max-height:740px){.poster-stage{gap:8px;padding-top:calc(var(--header) + 10px)}.poster-stage .fs-copy h2{font-size:29px;margin-bottom:8px}.poster-stage .fs-copy p{font-size:11px}.poster-window{height:190px}.poster-stage .fs-copy .eyebrow{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.poster-cylinder{animation-duration:36s!important;animation-iteration-count:infinite!important}.poster-stage .fs-backdrop img,.poster-stage .fs-keyword{animation:none!important}}
/* Preserve artwork proportions and platform accents. */
.poster-stage .fs-copy strong{font-weight:600;color:#fff}.poster-card img{object-fit:contain;background:#0a0b10}.poster-card b{font-size:12px}.poster-card:nth-child(3n) small{color:#80e9e4}
@media(max-width:760px){.poster-card b{font-size:9px;line-height:1.25}.poster-card>span{padding:5px 7px}}




/* Legible business poster captions; solution cards keep their own proportions. */
.poster-stage .poster-card>span{padding:12px 16px;gap:6px}
.poster-stage .poster-card b{font-size:clamp(18px,1.45vw,24px);line-height:1.3;font-weight:700}
.poster-stage .poster-card small{font-size:11px;letter-spacing:.08em}
.poster-stage .poster-card img{height:calc(100% - 98px)}
.poster-sources{display:block;margin-bottom:5px;color:#c9ced8}
.poster-sources a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){
.poster-stage .poster-window{--card:148px;--radius:155px}
.poster-stage .poster-card{height:190px;top:-95px}
.poster-stage .poster-card img{height:calc(100% - 68px)}
.poster-stage .poster-card>span{padding:6px 8px;gap:3px}
.poster-stage .poster-card b{font-size:14px;line-height:1.25}
.poster-stage .poster-card small{font-size:9px}
.poster-stage .poster-sources{font-size:10px;line-height:1.7;margin-bottom:3px}
}


/* v052 원통 뒷면 포스터: 숨기지 않고 반투명·흐리게(투명도·흐림은 poster-cylinder.js가 각도에 맞춰 지정) */
.poster-window.has-depth .poster-card{backface-visibility:visible;-webkit-backface-visibility:visible}

/* v061 (Slack 석기 1793612894.024969 2번) 2페이지: 해상도에 따라 아래 OTT 줄이 잘리던 것(1440×900에서 구역 높이 947) → 원통 크기를 화면 높이에 맞춰 한 화면 안에.
   카드는 플랫폼 로고를 크게 + 대표작 1편, 3장이 정면에서 잠깐 멈췄다 다음으로 넘어감(poster-cylinder.js pc3) */
.poster-stage{padding-bottom:3.5vh}
.poster-stage .fs-foot{margin-top:1.5vh}
.poster-showcase.pc3 .poster-window{--card:clamp(190px,min(19vw,calc((100svh - 470px) * 1.25)),310px);--card-height:calc(var(--card) * .75 + 162px);--radius:calc(var(--card) * .62);height:calc(var(--card-height) + 56px);perspective:1600px;perspective-origin:50% 45%}
.poster-showcase.pc3 .poster-cylinder{top:50%;animation:poster-orbit3 15s cubic-bezier(.7,0,.3,1) infinite}
.poster-showcase.pc3 .poster-card{top:calc(var(--card-height) / -2);height:var(--card-height);display:flex;flex-direction:column;background:#0c0d13;border-radius:16px;border-color:#ffffff30}
.poster-stage .pc3 .poster-card>.pc-brand{flex-direction:row;align-items:center;gap:12px;padding:16px 16px 14px}
.pc3 .pc-brand i{width:54px;height:54px;border-radius:13px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 4px 14px #0007}
.poster-stage .pc3 .pc-brand i img{width:100%;height:100%;object-fit:contain;background:none;border-radius:0}
.pc3 .pc-brand strong{font-size:clamp(22px,1.8vw,30px);font-weight:800;letter-spacing:-.01em;line-height:1}
.poster-stage .pc3 .poster-card img.pc-art{width:100%;height:calc(var(--card) * .75);flex:none;object-fit:cover;background:#0a0b10}
.poster-stage .pc3 .poster-card>.pc-title{padding:12px 16px;gap:5px}
.poster-stage .pc3 .pc-title small{font-size:11px;letter-spacing:.1em;color:#ff4b61}
@keyframes poster-orbit3{
0%,22%{transform:translateZ(calc(-1 * var(--radius))) rotateY(0deg)}
33.33%,55.33%{transform:translateZ(calc(-1 * var(--radius))) rotateY(-120deg)}
66.67%,88.67%{transform:translateZ(calc(-1 * var(--radius))) rotateY(-240deg)}
100%{transform:translateZ(calc(-1 * var(--radius))) rotateY(-360deg)}}
@media(max-width:760px){
.poster-showcase.pc3 .poster-window{--card:150px;--card-height:calc(var(--card) * .75 + 100px);--radius:96px;height:240px;perspective:820px}
.poster-stage .pc3 .poster-card>.pc-brand{gap:8px;padding:9px 10px 8px}
.pc3 .pc-brand i{width:30px;height:30px;border-radius:8px}
.pc3 .pc-brand strong{font-size:16px}
.poster-stage .pc3 .poster-card>.pc-title{padding:6px 10px;gap:2px}
.poster-stage .pc3 .pc-title small{font-size:8px}
.poster-stage .pc3 .poster-card b{font-size:13px}
}
@media(max-width:760px) and (max-height:740px){.poster-showcase.pc3 .poster-window{--card:124px;--radius:80px;height:200px}.poster-stage .pc3 .poster-card b{font-size:11px}.pc3 .pc-brand strong{font-size:14px}.pc3 .pc-brand i{width:26px;height:26px}}
/* v066 (Slack 석기 1793615117.834989 "비즈니스 카드 회전 속도 너무 느려") 한 바퀴 15초 → 9초. 카드마다 3초: 정면 2.1초 머문 뒤 0.9초 만에 다음 카드로 */
.poster-showcase.pc3 .poster-cylinder{animation:poster-orbit3-fast 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes poster-orbit3-fast{
0%,23.33%{transform:translateZ(calc(-1 * var(--radius))) rotateY(0deg)}
33.33%,56.67%{transform:translateZ(calc(-1 * var(--radius))) rotateY(-120deg)}
66.67%,90%{transform:translateZ(calc(-1 * var(--radius))) rotateY(-240deg)}
100%{transform:translateZ(calc(-1 * var(--radius))) rotateY(-360deg)}}