/* ==========================================================================
   영상 스크럽판 부품 키트 — scrub.css
   실행DAY 2026-08-29 · https://runday.irumai.kr/260829/kit/scrub/

   내 사이트에 맞게 바꿀 것은 아래 변수뿐입니다.
   클래스가 전부 rd-scrub 로 시작해서 내 CSS 와 겹치지 않습니다.
   ========================================================================== */
:root {
  --scrub-ink:     #ffffff;                       /* 영상 위 글자색 */
  --scrub-dim:     rgba(255,255,255,.72);         /* 보조 문장 · 킥커 */
  --scrub-bg:      #0e0b08;                       /* 영상 로드 전 바탕 · 스크림 색 */
  --scrub-scrim:   .55;                           /* 어두운 막 세기 0(없음)~1 */
  --scrub-font:    inherit;                       /* 제목 서체 (예: "Noto Serif KR", serif) */
  --scrub-title:   clamp(32px, 7vw, 68px);        /* 제목 크기 */
  --scrub-pad:     clamp(20px, 6vw, 72px);        /* 좌우 여백 */
  --scrub-align:   left;                          /* left | center (문구 정렬) */
  --scrub-justify: start;                         /* start | center (문구 덩어리 위치) */
  --scrub-accent:  #ffffff;                       /* 버튼 바탕 */
  --scrub-accent-ink: #111111;                    /* 버튼 글자 */
}

.rd-scrub { position: relative; background: var(--scrub-bg); color: var(--scrub-ink); }
.rd-scrub__stage { position: relative; height: 100svh; min-height: 480px; overflow: hidden; }
.rd-scrub--live .rd-scrub__stage { position: sticky; top: 0; }

/* 영상 · 포스터 */
.rd-scrub__media { position: absolute; inset: 0; }
.rd-scrub__poster, .rd-scrub__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.rd-scrub__video { opacity: 0; transition: opacity .5s ease; }
.rd-scrub--has-video .rd-scrub__video { opacity: 1; }
.rd-scrub--video-failed .rd-scrub__video { display: none; }

/* 어두운 막 — 글자가 읽히게 */
.rd-scrub__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,calc(var(--scrub-scrim) * .7)) 0%, rgba(0,0,0,0) 30%,
                            rgba(0,0,0,0) 55%, rgba(0,0,0,var(--scrub-scrim)) 100%);
}

/* 문구 */
.rd-scrub__copy {
  position: absolute; inset: 0; display: grid; align-items: end;
  padding: 0 var(--scrub-pad) clamp(56px, 12vh, 120px); text-align: var(--scrub-align); justify-items: var(--scrub-justify);
}
.rd-scrub__band {
  grid-area: 1 / 1; max-width: min(100%, 44rem); word-break: keep-all; opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease; pointer-events: none;
}
.rd-scrub__band.on { opacity: 1; transform: none; pointer-events: auto; }
.rd-scrub__kicker {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--scrub-dim); margin-bottom: 14px;
}
.rd-scrub__band h1, .rd-scrub__band h2 {
  margin: 0; font-family: var(--scrub-font); font-size: var(--scrub-title); line-height: 1.12;
  letter-spacing: -.02em; font-weight: 700; color: var(--scrub-ink); max-width: 14ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.rd-scrub__band p { margin: 16px 0 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; color: var(--scrub-dim); max-width: 34ch; }
.rd-scrub__btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; margin-top: 24px; margin-right: 8px;
  border-radius: 999px; background: var(--scrub-accent); color: var(--scrub-accent-ink);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.rd-scrub__btn--ghost { background: transparent; color: var(--scrub-ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }

/* 스크롤 유도 · 진행 바 */
.rd-scrub__cue {
  position: absolute; right: var(--scrub-pad); bottom: 28px; display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .3em; color: var(--scrub-dim); opacity: var(--cue, 1); transition: opacity .4s;
}
.rd-scrub__cue i { width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: rd-scrub-cue 1.6s ease-in-out infinite; }
@keyframes rd-scrub-cue { 0%,100% { transform: scaleY(.3); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }
.rd-scrub__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.15); }
.rd-scrub__progress i { display: block; height: 100%; width: 100%; background: var(--scrub-ink); transform: scaleX(var(--p, 0)); transform-origin: left; }
.rd-scrub--static .rd-scrub__cue, .rd-scrub--static .rd-scrub__progress { display: none; }

/* 정적 폴백 — 모션 축소 설정 · JS 없음: 문구를 전부 차례로 보여줍니다 */
.rd-scrub--static .rd-scrub__copy,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__copy { display: flex; flex-direction: column; gap: 36px; justify-content: end; }
.rd-scrub--static .rd-scrub__band,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__band { opacity: 1; transform: none; pointer-events: auto; }
.rd-scrub--static .rd-scrub__stage,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__stage { height: auto; min-height: 100svh; }
.rd-scrub--static .rd-scrub__copy,
.rd-scrub:not(.rd-scrub--live) .rd-scrub__copy { position: relative; padding-top: 30vh; }

/* JS 가 아예 안 돌았을 때(문구가 아직 section 바로 아래에 있을 때) — 그래도 읽히게 */
.rd-scrub > .rd-scrub__band { opacity: 1; transform: none; pointer-events: auto; padding: 0 var(--scrub-pad); max-width: 100%; }
.rd-scrub > .rd-scrub__band:first-child { padding-top: 30vh; }
.rd-scrub > .rd-scrub__band:last-child { padding-bottom: 12vh; }

@media (max-width: 880px) {
  .rd-scrub__band { max-width: 100%; }
  .rd-scrub__copy { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-scrub__cue i { animation: none; }
}

/* Vision Retail: one persistent message, full-width sea scene. */
:root{--scrub-bg:#0b2230;--scrub-font:'Gowun Batang',serif;--scrub-accent:#e8623d;--scrub-accent-ink:#0b2230;--scrub-title:clamp(34px,4.8vw,66px)}
.rd-scrub{background-image:url('/assets/hero-poster.jpg');background-size:cover;background-position:center}
.rd-scrub__stage{height:calc(100svh - 88px);min-height:580px}
.rd-scrub--live .rd-scrub__stage{top:88px}
.rd-scrub__scrim{background:linear-gradient(90deg,rgba(4,23,34,.75),rgba(4,23,34,.2) 75%),linear-gradient(0deg,rgba(4,23,34,.65),transparent 60%)}
.rd-scrub__copy{align-items:center;padding-top:30px;padding-bottom:60px}
.rd-scrub__band h1{max-width:20ch;line-height:1.35;font-weight:400}.rd-scrub__band h1 em{font-style:normal;color:#ff987a;font-size:.72em}
.rd-scrub__band p{max-width:46ch;color:#edf1f2;margin:22px 0 26px;font-size:16px}.rd-scrub__kicker{font-family:var(--mono);letter-spacing:1.5px;color:#ffb29a}
.ship-credit{display:inline-block;margin-top:24px;font-size:11px;color:#d2dfe3;text-decoration:underline;text-underline-offset:3px}.rd-scrub__progress i{background:var(--orange)}.rd-scrub__cue{letter-spacing:1px}.rd-scrub__cue i{animation:none;height:22px}
.rd-scrub.rd-scrub--static .rd-scrub__copy{padding-top:60px;padding-bottom:60px;min-height:75svh;justify-content:center}
@media(max-width:750px){.rd-scrub__stage{height:calc(100svh - 78px);min-height:620px}.rd-scrub--live .rd-scrub__stage{top:78px}.rd-scrub__copy{padding-left:20px;padding-right:20px}.rd-scrub__band p{font-size:14px}.rd-scrub__band h1{font-size:36px}.rd-scrub__cue{bottom:15px}.rd-scrub{background-image:url('/assets/hero-poster-m.jpg')}}
@media(prefers-reduced-motion:reduce){.rd-scrub *{transition:none!important;animation:none!important}}

.rd-scrub.rd-scrub--static .rd-scrub__stage{min-height:calc(100svh - 88px)}

.rd-scrub__band h1{font-size:clamp(40px,5vw,72px);max-width:22ch;line-height:1.4}.rd-scrub__band h1 em{font-size:1em;color:#f8e6d8}.rd-scrub__band p{margin-top:30px}.rd-scrub__scrim{background:linear-gradient(90deg,rgba(4,23,34,.67),rgba(4,23,34,.06) 85%),linear-gradient(0deg,rgba(4,23,34,.55),transparent 65%)}.rd-scrub.rd-scrub--static .rd-scrub__copy{align-items:flex-start;padding-left:max(48px,calc((100vw - 1320px)/2));min-height:calc(100svh - 88px)}
@media(max-width:900px){.rd-scrub--live .rd-scrub__stage{top:78px}.rd-scrub__stage{height:calc(100svh - 78px)}}
@media(max-width:700px){.rd-scrub__band h1{font-size:39px;letter-spacing:-1.5px}.rd-scrub__band p{font-size:14px}.rd-scrub.rd-scrub--static .rd-scrub__copy{padding:70px 20px;min-height:calc(100svh - 78px)}}