@charset "UTF-8";

/* 메인 Hero 공개 이미지 슬라이더: 기존 Hero 레이아웃을 보존하고 전환·제어만 더합니다. */
.hero-media { touch-action: pan-y; }
.hero-media .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; opacity: 0; filter: brightness(var(--hero-media-brightness)); transform: scale(1.018); will-change: opacity, transform; transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1), transform 1800ms cubic-bezier(0.23, 1, 0.32, 1); }
.hero-media .hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slider-controls { position: absolute; z-index: 2; right: clamp(28px, 4vw, 76px); bottom: clamp(26px, 4vw, 58px); display: grid; grid-template-columns: 38px auto 38px; gap: 8px; align-items: center; width: 210px; }
.hero-slider-button, .hero-slider-pause { min-height: 38px; border: 1px solid rgba(243, 243, 237, 0.38); background: rgba(8, 12, 11, 0.42); color: var(--color-paper); font-family: var(--font-display); font-size: 11px; font-weight: 700; cursor: pointer; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.hero-slider-pause { padding: 0 11px; }
.hero-slider-button:hover, .hero-slider-button:focus-visible, .hero-slider-pause:hover, .hero-slider-pause:focus-visible { border-color: var(--color-lime); background: var(--color-lime); color: var(--color-ink); }
.hero-slider-status { grid-column: 1 / -1; display: flex; gap: 7px; justify-content: flex-end; margin: 5px 0 0; color: var(--color-paper); font-family: var(--font-display); font-size: 10px; letter-spacing: 0.1em; }
.hero-slider-status strong { color: var(--color-lime); }
.hero-slider-progress { grid-column: 1 / -1; height: 2px; overflow: hidden; background: rgba(243, 243, 237, 0.3); }
.hero-slider-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--color-lime); }
@keyframes hero-slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 700px) { .hero-slider-controls { right: 20px; bottom: 23px; width: 188px; } .hero-slider-button, .hero-slider-pause { min-height: 34px; } }