/* Scroll Hero — 테마와 충돌하지 않도록 모든 선택자에 .shero 접두사를 씁니다 */
.shero{
--shero-brand:#0050A5;
--shero-ink:#10192B;
--shero-mute:#5A6779;
--shero-paper:#F5F7FA;
--shero-rail:rgba(16,25,43,.14);
--shero-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
position:relative;
width:100vw;
margin-left:calc(50% - 50vw); /* 테마 컨테이너 폭을 벗어나 전체 폭으로 */
}
.shero *{box-sizing:border-box}
.shero__stage{position:sticky;top:0;height:100vh;overflow:hidden;
background:var(--shero-paper)}
.shero__scene{position:absolute;inset:0;will-change:transform,opacity,filter}
.shero__scene img{width:100%;height:100%;object-fit:cover;display:block;
max-width:none;margin:0;border-radius:0}
.shero__scene::after{content:"";position:absolute;inset:0;
background:linear-gradient(105deg,rgba(245,247,250,.92) 0%,
rgba(245,247,250,.60) 40%,rgba(245,247,250,0) 70%)}
.shero__copy{position:absolute;top:50%;left:clamp(24px,7vw,120px);
transform:translateY(-50%);z-index:5;max-width:min(640px,84vw)}
.shero__eyebrow{font-family:var(--shero-mono);font-size:12px;
letter-spacing:.22em;color:var(--shero-mute);text-transform:uppercase;
display:flex;align-items:center;gap:12px;margin-bottom:22px}
.shero__eyebrow b{color:var(--shero-brand);font-weight:600}
.shero__eyebrow i{flex:0 0 44px;height:1px;background:var(--shero-rail)}
.shero__line{font-size:clamp(30px,4.6vw,60px);font-weight:700;
letter-spacing:-.03em;line-height:1.24;color:var(--shero-ink);margin:0}
.shero__slot{display:block;position:relative;height:1.24em;overflow:hidden}
.shero__slot span{display:block;color:var(--shero-brand);
position:absolute;inset:0;will-change:transform,opacity}
.shero__tail{color:var(--shero-ink)}
.shero__finale{position:absolute;inset:0;z-index:8;
background:var(--shero-paper);display:flex;flex-direction:column;
justify-content:center;align-items:center;gap:clamp(28px,5vh,56px);
opacity:0;padding:0 24px;text-align:center}
.shero__rank{--rh:clamp(34px,5.4vh,46px);
position:relative;width:min(460px,88vw);height:calc(var(--rh)*5)}
.shero__row,.shero__you{position:absolute;left:0;right:0;height:var(--rh);
top:calc(var(--i,0) * var(--rh));display:flex;align-items:center;
gap:14px;padding:0 16px;border-radius:3px;will-change:transform,opacity,filter}
.shero__row{background:#fff;box-shadow:0 1px 0 rgba(16,25,43,.06)}
.shero__row i{flex:0 0 8px;height:8px;border-radius:50%;background:#DDE3EC}
.shero__row u{flex:1;height:7px;border-radius:4px;background:#E3E8F0;
text-decoration:none}
.shero__row:nth-child(2) u{max-width:78%}
.shero__row:nth-child(3) u{max-width:64%}
.shero__row:nth-child(4) u{max-width:83%}
.shero__row:nth-child(5) u{max-width:71%}
.shero__you{background:#fff;
box-shadow:0 12px 34px -14px rgba(0,80,165,.5),0 0 0 1px rgba(0,80,165,.18);
font-size:clamp(13px,1.5vw,15px);font-weight:700;color:var(--shero-brand)}
.shero__you i{flex:0 0 8px;height:8px;border-radius:50%;
background:var(--shero-brand)}
.shero__you span{text-align:left}
.shero__finale h2{font-size:clamp(26px,3.7vw,46px);font-weight:800;
letter-spacing:-.035em;line-height:1.34;color:var(--shero-ink);margin:0}
.shero__finale h2 em{font-style:normal;color:var(--shero-brand)}
.shero__finale p{font-size:clamp(26px,3.7vw,46px);letter-spacing:-.035em;
color:var(--shero-mute);display:flex;align-items:center;
justify-content:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;
line-height:1.34;font-weight:700;margin:0}
.shero__finale p b{color:var(--shero-ink);font-weight:700}
.shero__finale p b span{font-family:var(--shero-mono);font-size:.6em;
font-weight:400;color:var(--shero-mute);margin-left:4px;letter-spacing:.03em}
.shero__finale p i{display:block;width:1px;height:.9em;background:var(--shero-rail)}
.shero__mark{position:absolute;top:clamp(20px,3vh,34px);
left:clamp(24px,7vw,120px);z-index:10;font-family:var(--shero-mono);
font-size:12px;letter-spacing:.2em;color:var(--shero-ink)}
.shero__mark b{color:var(--shero-brand)}
.shero__count{position:absolute;top:clamp(20px,3vh,34px);
right:clamp(24px,5vw,56px);z-index:10;font-family:var(--shero-mono);
font-size:12px;letter-spacing:.16em;color:var(--shero-mute)}
.shero__count b{color:var(--shero-ink);font-weight:500}
.shero__rail{position:absolute;left:clamp(24px,7vw,120px);
bottom:clamp(28px,5vh,52px);z-index:10;display:flex;gap:6px}
.shero__rail i{display:block;width:52px;height:2px;background:var(--shero-rail)}
.shero__hint{position:absolute;right:clamp(24px,5vw,56px);
bottom:clamp(28px,5vh,52px);z-index:10;font-family:var(--shero-mono);
font-size:11px;letter-spacing:.2em;color:var(--shero-mute)}
.shero__hint::after{content:"";display:block;width:1px;height:26px;
margin:10px auto 0;background:var(--shero-rail);
animation:shero-drop 2.2s ease-in-out infinite}
@keyframes shero-drop{
0%,100%{transform:scaleY(.4);transform-origin:top}
50%{transform:scaleY(1);transform-origin:top}
}
@media (max-width:720px){
.shero__scene::after{background:linear-gradient(180deg,
rgba(245,247,250,.94) 0%,rgba(245,247,250,.72) 46%,
rgba(245,247,250,.28) 100%)}
.shero__copy{top:auto;bottom:22vh;transform:none}
}
@media (prefers-reduced-motion:reduce){
.shero__hint::after{animation:none}
}