/* 스크롤 첫 화면 — scroll_hero.js 짝. 글 자리·색은 쓰는 쪽에서 덮어쓴다. */
.sh { position: relative; height: calc(100vh * (1 + var(--sh-len, 3))); height: calc(100svh * (1 + var(--sh-len, 3))); background: #120d09; color: #fff; }
.sh-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sh-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(12,10,8,.72) 0%, rgba(12,10,8,.4) 38%, rgba(12,10,8,0) 66%), linear-gradient(0deg, rgba(12,10,8,.4), rgba(12,10,8,0) 30%); }
.sh-stage { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transform: translateY(28px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
/* 나가는 글은 빨리 빠지고, 들어오는 글은 그 뒤에 들어온다(두 제목이 겹쳐 비치지 않게) */
.sh-stage.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s ease .28s, transform .8s cubic-bezier(.2,.7,.2,1) .28s; }
.sh-ai { position: absolute; right: 18px; bottom: 14px; margin: 0; font: 500 11px/1 system-ui, sans-serif; letter-spacing: .04em; color: rgba(255,255,255,.6); opacity: 0; transition: opacity .4s; }
.sh-ai.is-on { opacity: 1; }
.sh-count { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 500 12px/1 system-ui, sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.sh-count b { color: #fff; font-weight: 600; }
.sh-count::after { content: ""; display: block; width: 120px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, #fff calc(var(--sh-p, 0) * 100%), rgba(255,255,255,.25) 0); }
.sh.is-still { height: 100vh; height: 100svh; }
@media (max-width: 760px) {
  .sh-shade { background: linear-gradient(0deg, rgba(14,10,8,.92) 22%, rgba(14,10,8,.45) 50%, rgba(14,10,8,0) 70%), linear-gradient(180deg, rgba(14,10,8,.45), rgba(14,10,8,0) 18%); }
  .sh-stage { align-items: flex-end; padding-bottom: 84px; }
  .sh-count { bottom: 22px; }
}