/* 속시원 슬라이더 (예전 Revolution Slider 화면을 CSS 로 다시 만든 것)
 * - 좌표·크기는 슬라이더 그리드(px) 기준 값을 CSS 변수로 받아 비율로 줄인다.
 * - 1rem = 16px 기준. 그리드 값(px)은 0.0625rem 을 곱해 rem 으로 바꾼다.
 */

.soks-slider {
    --soks-unit: 0.0625rem;
    position: relative;
    container-type: inline-size;
    width: 100%;
    margin: 0 auto;
    background: var(--soks-bg, #fff);
}

/* 높이: 그리드보다 좁으면 비율대로 줄고, 넓으면 그리드 높이 그대로(Revolution Slider auto 배치와 같음) */
.soks-slider__viewport {
    position: relative;
    overflow: hidden;
    height: min(calc(var(--soks-grid-h) * var(--soks-unit)), calc(100cqw * var(--soks-grid-h) / var(--soks-grid-w)));
    height: round(min(calc(var(--soks-grid-h) * var(--soks-unit)), calc(100cqw * var(--soks-grid-h) / var(--soks-grid-w))), var(--soks-unit));
}

.soks-slider__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}

.soks-slider__slide.is-active {
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

.soks-slider__slide.is-leaving {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

.soks-slider__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* 그리드: 가운데 정렬, 그리드 비율 유지. 안쪽 길이는 cqw(그리드 너비 기준) */
.soks-slider__stage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: min(100%, calc(var(--soks-grid-w) * var(--soks-unit)));
    aspect-ratio: var(--soks-grid-w) / var(--soks-grid-h);
    margin: 0 auto;
    container-type: inline-size;
}

.soks-slider__layer {
    position: absolute;
    left: calc(var(--soks-x) / var(--soks-grid-w) * 100%);
    top: calc(var(--soks-y) / var(--soks-grid-h) * 100%);
    transform-origin: 50% 50%;
}

.soks-slider__layer--image {
    width: calc(var(--soks-w) / var(--soks-grid-w) * 100%);
    line-height: 0;
}

.soks-slider__img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.soks-slider__link {
    display: block;
}

.soks-slider__link:focus-visible {
    outline: 0.125rem solid #5fb5d6;
    outline-offset: 0.125rem;
}

/* 문구: 그리드 대비 글자 크기. 운영처럼 글자 크기·줄 간격은 1px 단위 반올림, 자간은 내림 */
.soks-slider__layer--text {
    --soks-scale-unit: calc(100cqw / var(--soks-grid-w));
    font-family: "Nanum Gothic", sans-serif;
    font-size: calc(var(--soks-fs) * var(--soks-scale-unit));
    font-size: round(calc(var(--soks-fs) * var(--soks-scale-unit)), var(--soks-unit));
    line-height: calc(var(--soks-lh) * var(--soks-scale-unit));
    line-height: round(calc(var(--soks-lh) * var(--soks-scale-unit)), var(--soks-unit));
    white-space: nowrap;
    letter-spacing: calc(var(--soks-ls) * var(--soks-scale-unit));
    letter-spacing: round(down, calc(var(--soks-ls) * var(--soks-scale-unit) + 0.001rem), var(--soks-unit));
}

.soks-slider__layer--large-text {
    --soks-fs: 36;
    --soks-lh: 40;
    --soks-ls: -3;
    color: #7e6e6f;
    font-weight: 600;
}

.soks-slider__layer--small-text {
    --soks-fs: 14;
    --soks-lh: 22;
    --soks-ls: -1;
    color: #777;
    font-weight: 400;
}

.soks-slider__layer--name {
    --soks-fs: 30;
    --soks-lh: 36;
    --soks-ls: -1;
    color: #fff;
    font-weight: 600;
}

.soks-slider__layer--subtitle {
    --soks-fs: 14;
    --soks-lh: 20;
    --soks-ls: -1;
    color: #fff;
    font-weight: 400;
}

/* 레이어 등장: 장이 보이기 시작할 때부터 지연(--soks-delay) 뒤 시작.
 * 지연 동안은 숨겨 둔다(오른쪽·아래 바깥에서 들어오는 레이어가 그리드 옆 여백에 비치지 않게). */
.soks-slider__slide.is-active .soks-slider__layer {
    animation:
        soks-slider-layer-in var(--soks-speed) var(--soks-ease) var(--soks-delay) both,
        soks-slider-layer-wait var(--soks-delay) step-end;
}

@keyframes soks-slider-layer-wait {
    from,
    to {
        visibility: hidden;
    }
}

@keyframes soks-slider-layer-in {
    from {
        opacity: var(--soks-from-o);
        transform: perspective(37.5rem)
            translate(calc(var(--soks-from-x) / var(--soks-grid-w) * 100cqw), calc(var(--soks-from-y) / var(--soks-grid-w) * 100cqw))
            rotateX(var(--soks-from-rx)) rotateY(var(--soks-from-ry)) rotateZ(var(--soks-from-rz))
            scale(var(--soks-from-s));
    }

    to {
        opacity: 1;
        transform: perspective(37.5rem) translate(0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }
}

/* 장 전환 */
.soks-slider__slide--fade.is-active.is-entering {
    animation: soks-slider-fade-in var(--soks-trans-speed) linear both;
}

.soks-slider__slide--slide-right.is-active.is-entering {
    animation: soks-slider-slide-in var(--soks-trans-speed) ease-out both;
}

.soks-slider__slide.is-leaving.is-pushed {
    animation: soks-slider-slide-out var(--soks-trans-speed) ease-out both;
}

@keyframes soks-slider-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes soks-slider-slide-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes soks-slider-slide-out {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* 불릿: 마우스를 올리거나 키보드로 들어오거나 손가락으로 만졌을 때만 보임 */
.soks-slider__bullets {
    position: absolute;
    z-index: 20;
    display: flex;
    gap: 0.3125rem;
    opacity: 0;
    transition: opacity 0.2s ease 0.2s;
}

.soks-slider:hover .soks-slider__bullets,
.soks-slider:focus-within .soks-slider__bullets {
    opacity: 1;
    transition-delay: 0s;
}

.soks-slider__bullets--bottom-left {
    left: calc(var(--soks-nav-x) * var(--soks-unit));
    bottom: calc(var(--soks-nav-y) * var(--soks-unit));
}

.soks-slider__bullets--top-center {
    top: calc(var(--soks-nav-y) * var(--soks-unit));
    left: 50%;
    transform: translateX(-50%);
}

.soks-slider__bullet {
    display: block;
    box-sizing: content-box;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.soks-slider__bullet:focus-visible {
    outline: 0.125rem solid #5fb5d6;
    outline-offset: 0.125rem;
}

/* 네모 불릿(운영 persephone) */
.soks-slider__bullets--square .soks-slider__bullet {
    background: #aaa;
    border: 0.0625rem solid #e5e5e5;
}

.soks-slider__bullets--square .soks-slider__bullet:hover,
.soks-slider__bullets--square .soks-slider__bullet[aria-current="true"] {
    background: #222;
}

/* 둥근 불릿(운영 hephaistos) */
.soks-slider__bullets--round .soks-slider__bullet {
    background: #999;
    border: 0.1875rem solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 0.125rem 0.0625rem rgba(130, 130, 130, 0.3);
}

.soks-slider__bullets--round .soks-slider__bullet:hover,
.soks-slider__bullets--round .soks-slider__bullet[aria-current="true"] {
    background: #fff;
    border-color: #000;
}

/* 좌우 화살표(운영 hephaistos) */
.soks-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.soks-slider__arrow:hover {
    background: #000;
}

.soks-slider__arrow:focus-visible {
    outline: 0.125rem solid #5fb5d6;
    outline-offset: 0.125rem;
}

.soks-slider__arrow--prev {
    left: 1.25rem;
}

.soks-slider__arrow--next {
    right: 1.25rem;
}

.soks-slider__arrow--next .soks-slider__arrow-icon {
    transform: scaleX(-1);
}

.soks-slider__arrow-icon {
    display: block;
    width: 1rem;
    height: 1rem;
}

/* 인사말 슬라이더 아래 선(운영 #rev_slider_3_1_wrapper) */
.soks-slider--slider3 {
    border-bottom: 0.0625rem solid #eaeaea;
}

/* 움직임 줄이기: 첫 장 그대로, 자동 넘김 없음(JS), 움직임 없음 */
@media (prefers-reduced-motion: reduce) {
    .soks-slider__slide.is-active .soks-slider__layer,
    .soks-slider__slide.is-entering,
    .soks-slider__slide.is-leaving {
        animation: none;
    }

    .soks-slider__bullets {
        transition: none;
    }
}