/* 메인 영상 히어로: 유튜브 영상을 섹션 전체에 꽉 채워 배경처럼 재생합니다. */
.video-hero{position:relative;width:100%;height:calc(100svh - var(--video-hero-offset,84px));min-height:420px;overflow:hidden;background:#10231d url("https://i.ytimg.com/vi/0pBx204Yx1Q/maxresdefault.jpg") center/cover no-repeat;container-type:size}
.video-hero-media{position:absolute;inset:0;pointer-events:none}
/* 16:9 영상을 섹션보다 크게 맞춰 상하좌우 여백 없이 잘라 보여줍니다. */
.video-hero-media iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity .8s ease}
.video-hero.is-playing .video-hero-media iframe{opacity:1}
.video-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.35) 100%)}
.video-hero-sound{position:absolute;left:28px;bottom:28px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.28);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.video-hero-sound:hover{background:rgba(0,0,0,.45)}
.video-hero-sound svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.video-hero-sound .vh-speaker{fill:currentColor}
.video-hero-sound .vh-on,.video-hero-sound[aria-pressed="true"] .vh-off{display:none}
.video-hero-sound[aria-pressed="true"] .vh-on{display:inline}
.video-hero-scroll{position:absolute;left:50%;bottom:26px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);color:#fff;font:600 11px/1 SUIT,sans-serif;letter-spacing:.24em;text-decoration:none;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.video-hero-scroll i{display:block;width:1px;height:38px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0));animation:videoHeroCue 1.8s ease-in-out infinite}
@keyframes videoHeroCue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:767px){
  .video-hero{min-height:360px}
  .video-hero-sound{left:16px;bottom:18px;width:40px;height:40px}
  .video-hero-scroll{bottom:18px}
}
@media(prefers-reduced-motion:reduce){.video-hero-scroll i{animation:none}}