/* visual / skin_3 — 스택형 (스크롤 스택)
   풀스크린형(skin_1)과 디자인은 동일하되, 전환을 Swiper 대신
   CSS position:sticky 스크롤 스택으로 처리.
   · 각 슬라이드가 화면 상단(top:0)에 고정되고, 다음 슬라이드가 올라와 덮음
   · 슬라이드 수만큼 스크롤 영역이 생기고, 끝나면 다음 섹션으로 자연스럽게 진행
   · 높이는 100vh 고정(모바일 주소창 대응 위해 100dvh 우선) */

/* sticky 동작을 위해 섹션에 overflow:hidden / 고정 height 를 두지 않는다 */
.section-visual-skin-3 {
    position: relative;
    width: 100%;
}

.section-visual-skin-3 .section-visual-s3__stack {
    position: relative;
    width: 100%;
}

/* ── 슬라이드 = sticky 패널 ── */
.section-visual-skin-3 .section-visual__slide {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;       /* 폴백 */
    height: 100dvh;      /* 모바일 주소창 대응 (지원 시) */
    overflow: hidden;
}

/* ── 배경 미디어 (이미지/영상) ── */
.section-visual-skin-3 .section-visual__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
}

.section-visual-skin-3 .section-visual__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    background: #000; /* 영상 로드 전/레터박스 영역만 검정 */
}

.section-visual-skin-3 .section-visual__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

/* PC/모바일 미디어 분리 */
@media (max-width: 767px) {
    .section-visual-skin-3 .section-visual__media--pc,
    .section-visual-skin-3 .section-visual__bg-img--pc { display: none !important; }
}
@media (min-width: 768px) {
    .section-visual-skin-3 .section-visual__media--mo,
    .section-visual-skin-3 .section-visual__bg-img--mo { display: none !important; }
}

.section-visual-skin-3 .section-visual__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.section-visual-skin-3 .section-visual__yt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
}

/* ── 오버레이 ── */
.section-visual-skin-3 .section-visual__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ── 전체 배너 링크 ── */
.section-visual-skin-3 .section-visual__slide-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    cursor: pointer;
}

/* ── 콘텐츠 영역 ── */
.section-visual-skin-3 .section-visual__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.section-visual-skin-3 .section-visual__content {
    max-width: var(--inner-width, 1200px);
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .section-visual-skin-3 .section-visual__content {
        width: var(--inner-width-mo, 92%);
        padding: 0;
    }
}

.section-visual-skin-3 .section-visual__title {
    margin: 0;
    line-height: 1.2;
    word-break: keep-all;
}
/* 제목 강조([[ ]]) — 색상은 인라인 <style>로 주입, 원형은 rough-notation(JS) */
.section-visual-skin-3 .section-visual__title-accent {
    white-space: nowrap;
}
/* 가격 — 색·크기·굵기는 인라인 <style>로 주입 */
.section-visual-skin-3 .section-visual__price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}
.section-visual-skin-3 .section-visual__price-value { line-height: 1.2; }
.section-visual-skin-3 .section-visual__price-unit  { line-height: 1.2; }

.section-visual-skin-3 .section-visual__subtitle {
    line-height: 1.4;
    word-break: keep-all;
}

.section-visual-skin-3 .section-visual__desc {
    margin: 0;
    line-height: 1.6;
    word-break: keep-all;
}

.section-visual-skin-3 .section-visual__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}
.section-visual-skin-3 .section-visual__btn:hover {
    opacity: 0.9;
}

/* ── 태그 (베이직 라벨과 동일 스타일 칩) ── */
.section-visual-skin-3 .section-visual__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    vertical-align: top;
}
.section-visual-skin-3 .section-visual__tag {
    display: inline-block;
    background-color: #f1f3f7;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    padding: 12px 28px;
    border: 0 solid #111111;
    border-radius: 4px;
    word-break: keep-all;
}

/* ── 빈 상태 ── */
.section-visual-skin-3 .section-visual__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    color: #888;
    font-size: 14px;
    background: #f4f4f5;
}