/* 영상 스크럽판 부품 키트 — 저당퐁 맞춤 설정 */
:root {
  --scrub-ink: #f2eadd;
  --scrub-dim: rgba(242, 234, 221, .78);
  --scrub-bg: #211e19;
  --scrub-scrim: .58;
  --scrub-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --scrub-title: clamp(46px, 7.5vw, 108px);
  --scrub-pad: clamp(22px, 7vw, 110px);
  --scrub-align: left;
  --scrub-justify: start;
  --scrub-accent: #9a4036;
  --scrub-accent-ink: #f2eadd;
}

.has-scrub-hero .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--scrub-ink);
  background: transparent;
  border-bottom-color: rgba(242, 234, 221, .4);
}

.has-scrub-hero .site-header .nav-contact { border-color: currentColor; }
.has-scrub-hero .site-header .nav-contact:hover { color: var(--scrub-bg); background: var(--scrub-ink); }
.has-scrub-hero .site-header .menu-button > span:not(.sr-only) { background: currentColor; }

.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(33, 30, 25, calc(var(--scrub-scrim) * .9)) 0%, rgba(33, 30, 25, .08) 35%,
                            rgba(33, 30, 25, .08) 52%, rgba(33, 30, 25, var(--scrub-scrim)) 100%);
}

.rd-scrub__copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 0 var(--scrub-pad) clamp(66px, 12vh, 120px);
  text-align: var(--scrub-align);
  justify-items: var(--scrub-justify);
}
.rd-scrub__band {
  grid-area: 1 / 1;
  max-width: min(100%, 48rem);
  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;
  margin-bottom: 16px;
  color: var(--scrub-dim);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .28em;
}
.rd-scrub__band h1,
.rd-scrub__band h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--scrub-ink);
  font-family: var(--scrub-font);
  font-size: var(--scrub-title);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.065em;
  text-shadow: 0 2px 30px rgba(33, 30, 25, .4);
}
.rd-scrub__band p {
  max-width: 36ch;
  margin: 22px 0 0;
  color: var(--scrub-dim);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.7;
}
.rd-scrub__btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 0 24px;
  border: 1px solid var(--scrub-accent);
  border-radius: 0;
  color: var(--scrub-accent-ink);
  background: var(--scrub-accent);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .24s ease, color .24s ease, background-color .24s ease;
}
.rd-scrub__btn:hover { transform: translateY(-4px); }
.rd-scrub__btn--ghost {
  color: var(--scrub-ink);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(242, 234, 221, .6);
}

.rd-scrub__cue {
  position: absolute;
  right: var(--scrub-pad);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--scrub-dim);
  font-size: 10px;
  letter-spacing: .3em;
  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;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(242, 234, 221, .15);
}
.rd-scrub__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--scrub-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.rd-scrub--static .rd-scrub__cue,
.rd-scrub--static .rd-scrub__progress { display: none; }

.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; }

.rd-scrub > .rd-scrub__band {
  max-width: 100%;
  padding: 0 var(--scrub-pad);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rd-scrub > .rd-scrub__band:first-child { padding-top: 30vh; }
.rd-scrub > .rd-scrub__band:last-child { padding-bottom: 12vh; }

@media (max-width: 900px) {
  .has-scrub-hero .site-header nav {
    color: var(--ink);
    background: var(--cream);
    border-bottom-color: var(--ink);
  }
}

@media (max-width: 880px) {
  :root { --scrub-title: clamp(44px, 14vw, 68px); }
  .rd-scrub__band { max-width: 100%; }
  .rd-scrub__copy { padding-bottom: 72px; }
  .rd-scrub__band p br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-scrub__cue i { animation: none; }
  .rd-scrub__video,
  .rd-scrub__band,
  .rd-scrub__btn { transition: none; }
}