/*!
 * TP_FX — 구조 전용 CSS (AOS처럼 레이아웃/동작만)
 * 색·배경·타이포는 사이트 custom.css 에서 설정하세요.
 * FTP에는 이 파일만 라이브러리로 올리고, 스킨은 custom.css 수정.
 */

/* ---- scrub: expand / circle ---- */
[data-fx="expand"],
[data-fx="circle"],
[data-fx="scrub-expand"],
[data-fx="scrub-circle"],
[data-fx-scrub] {
    --tp-fx-track-height: 340vh;
    height: var(--tp-fx-track-height);
    position: relative;
}

.tp-fx-sticky,
[data-fx-sticky] {
    --fx-scrub-dim: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 스크롤 디밍 오버레이 (색은 custom에서 변경 가능) */
.tp-fx-sticky::before,
[data-fx-sticky]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--tp-fx-dim-color, #000);
    opacity: var(--fx-scrub-dim);
    pointer-events: none;
}

.tp-fx-media,
[data-fx-media] {
    position: relative;
    z-index: 1;
    width: min(360px, 55vw);
    height: 240px;
    overflow: hidden;
    border-radius: 12px;
    flex-shrink: 0;
    will-change: width, height, border-radius;
    transform: translateZ(0);
}

[data-fx="circle"] .tp-fx-media,
[data-fx="circle"] [data-fx-media],
[data-fx-scrub="circle"] .tp-fx-media,
[data-fx-scrub="circle"] [data-fx-media],
.tp-fx-media--circle {
    width: min(220px, 42vw);
    height: min(220px, 42vw);
    border-radius: 50%;
}

.tp-fx-media img,
[data-fx-media] img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

.tp-fx-copy,
[data-fx-copy] {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, 86%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

/* ---- pin ---- */
[data-fx="pin"],
[data-fx-pin] {
    --tp-fx-pin-height: 280vh;
    height: var(--tp-fx-pin-height);
    position: relative;
}

[data-fx="pin"] .tp-fx-sticky,
[data-fx-pin] .tp-fx-sticky,
[data-fx-pin-sticky] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tp-fx-pin-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 1.5rem;
    width: min(960px, 100%);
    align-items: center;
    text-align: left;
}

.tp-fx-pin-visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.tp-fx-pin-visual img,
[data-fx-pin-img] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.tp-fx-pin-visual img.is-active,
[data-fx-pin-img].is-active {
    opacity: 1;
}

.tp-fx-pin-dots {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.tp-fx-pin-dots li,
[data-fx-pin-dot] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .tp-fx-pin-stage {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tp-fx-pin-dots {
        justify-content: center;
    }
}

/* ---- parallax ---- */
[data-fx="parallax"],
[data-fx-parallax] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

[data-fx-layer="bg"] {
    position: absolute;
    inset: -15%;
    will-change: transform;
}

[data-fx-layer="mid"],
[data-fx-layer="fore"] {
    position: relative;
    z-index: 1;
    will-change: transform;
}

/* ---- pin stack ---- */
[data-fx="stack"],
[data-fx="pin-stack"],
[data-fx-stack] {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.tp-fx-stack-panel,
[data-fx-stack-panel] {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.tp-fx-stack-panel > * {
    position: relative;
    z-index: 1;
}

/* ---- circle-scroll (참고: #main01 .main-circle-wrap) ---- */
[data-fx="circle-scroll"],
[data-fx="circle-slide"],
[data-fx="cscroll"],
.tp-fx-cscroll,
.main-circle {
    --tp-fx-cscroll-card-w: 20.25rem;
    --tp-fx-cscroll-card-h: 25.75rem;
    position: relative;
    height: 100vh;
    overflow: hidden;
    padding-block: 0;
}

.main-circle-wrap,
.tp-fx-cscroll-wrap,
[data-fx-cscroll-wrap] {
    height: 100%;
    overflow: hidden;
}

.main-circle .circle-wrap,
.tp-fx-cscroll-box {
    height: 100%;
}

.main-circle .swiper,
.tp-fx-cscroll-track {
    overflow: visible;
    position: relative;
    height: 100%;
    width: 100%;
}

.main-circle .swiper-wrapper,
.main-circle-inner,
.tp-fx-cscroll-inner,
[data-fx-cscroll-inner] {
    display: block;
    width: 200vw;
    height: 200vw;
    max-width: none;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: calc(50% - 100vw);
    will-change: transform;
    transform-origin: 50% 50%;
}

.main-circle .swiper-slide,
.tp-fx-cscroll-slide,
[data-fx-cscroll-slide] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.main-circle .swiper-slide:hover,
.tp-fx-cscroll-slide:hover,
[data-fx-cscroll-slide]:hover {
    z-index: 4;
}

/* 카드 슬롯 — height:0 + padding-top 이 원호 위 배치 핵심 */
.main-circle .circle-slide-slot,
.tp-fx-cscroll-content {
    --width: var(--tp-fx-cscroll-card-w);
    --height: var(--tp-fx-cscroll-card-h);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    transition: all 0.45s ease;
    pointer-events: auto;
    height: 0;
    padding-top: 3rem;
    width: 100%;
    box-sizing: border-box;
}

.main-circle .circle-slide-slot .inner,
.tp-fx-cscroll-card {
    display: block;
    position: relative;
    z-index: 1;
    transform-origin: center bottom;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
}

.main-circle .circle-slide-slot .inner:hover,
.tp-fx-cscroll-card:hover {
    scale: 1.1;
}

.main-circle .circle-slide-slot .inner:hover .txt-box,
.tp-fx-cscroll-card:hover .tp-fx-cscroll-txt {
    opacity: 1;
}

.main-circle .img-box,
.tp-fx-cscroll-media,
.tp-fx-cscroll-card .img-box {
    position: relative;
    z-index: 1;
    width: var(--width);
    height: var(--height);
    border-radius: 1.875rem;
    overflow: hidden;
    flex-shrink: 0;
}

.main-circle .img-box img,
.tp-fx-cscroll-media img,
.tp-fx-cscroll-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.main-circle .txt-box,
.tp-fx-cscroll-txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 2;
    width: var(--width);
    height: var(--height);
    border-radius: 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.75rem;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.main-circle .swiper-slide.is-circle-active,
.tp-fx-cscroll-slide.is-circle-active,
[data-fx-cscroll-slide].is-circle-active {
    z-index: 3;
}

.main-circle .swiper-slide.is-circle-active .inner,
.tp-fx-cscroll-slide.is-circle-active .tp-fx-cscroll-card,
[data-fx-cscroll-slide].is-circle-active .tp-fx-cscroll-card {
    scale: 1.1;
}

.main-circle .swiper-slide.is-circle-active .txt-box,
.tp-fx-cscroll-slide.is-circle-active .tp-fx-cscroll-txt,
[data-fx-cscroll-slide].is-circle-active .tp-fx-cscroll-txt {
    opacity: 1;
}

.main-circle .swiper-slide:not(.is-circle-active) .txt-box,
.tp-fx-cscroll-slide:not(.is-circle-active) .tp-fx-cscroll-txt,
[data-fx-cscroll-slide]:not(.is-circle-active) .tp-fx-cscroll-txt {
    opacity: 0;
}

/* 비활성 hover도 active와 동일 */
.main-circle .swiper-slide:not(.is-circle-active):hover,
.tp-fx-cscroll-slide:not(.is-circle-active):hover,
[data-fx-cscroll-slide]:not(.is-circle-active):hover {
    z-index: 4;
}

.main-circle .swiper-slide:not(.is-circle-active):hover .inner,
.tp-fx-cscroll-slide:not(.is-circle-active):hover .tp-fx-cscroll-card,
[data-fx-cscroll-slide]:not(.is-circle-active):hover .tp-fx-cscroll-card {
    scale: 1.1;
}

.main-circle .swiper-slide:not(.is-circle-active):hover .txt-box,
.tp-fx-cscroll-slide:not(.is-circle-active):hover .tp-fx-cscroll-txt,
[data-fx-cscroll-slide]:not(.is-circle-active):hover .tp-fx-cscroll-txt {
    opacity: 1;
}

/* ---- pin-rise (제목 중앙 고정 + 카드 하단→상승→중간 소멸, 좌·우 교차) ---- */
[data-fx="pin-rise"],
[data-fx="pin-left"],
[data-fx-pin-rise],
.tp-fx-pin-rise {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.tp-fx-pin-rise-pin,
[data-fx-pin-rise-pin] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding-block: 2rem;
    overflow: hidden;
}

.tp-fx-pin-rise-pin > .m-title-h3,
.tp-fx-pin-rise-pin > .main-worry__title,
[data-fx-pin-rise-pin] > .m-title-h3 {
    position: relative;
    z-index: 2;
    width: min(720px, 90%);
    margin: 0;
}

.tp-fx-pin-rise-imgs,
[data-fx-pin-rise-imgs],
.tp-fx-pin-rise .img-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.tp-fx-pin-rise-imgs .main-worry__item,
[data-fx-pin-rise-imgs] [data-fx-pin-rise-item] {
    position: absolute;
    top: 50%;
    width: min(18rem, 36vw);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    will-change: transform, opacity;
    /* transform(y) · opacity 는 GSAP scrub 타임라인이 담당 */
}

.tp-fx-pin-rise-imgs .main-worry__item[data-from="left"],
[data-fx-pin-rise-imgs] [data-fx-pin-rise-item][data-from="left"] {
    left: clamp(1rem, 8vw, 7rem);
    right: auto;
    align-items: flex-start;
    text-align: left;
}

.tp-fx-pin-rise-imgs .main-worry__item[data-from="right"],
[data-fx-pin-rise-imgs] [data-fx-pin-rise-item][data-from="right"] {
    left: auto;
    right: clamp(1rem, 8vw, 7rem);
    align-items: flex-end;
    text-align: right;
}

.tp-fx-pin-rise-imgs .img-box,
[data-fx-pin-rise-imgs] .img-box {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 1.25rem;
    overflow: hidden;
}

.tp-fx-pin-rise-imgs .img-box img,
[data-fx-pin-rise-imgs] .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.tp-fx-pin-rise-imgs .main-worry__item > p,
[data-fx-pin-rise-imgs] [data-fx-pin-rise-item] > p {
    margin: 0;
}

@media (max-width: 767px) {
    .tp-fx-pin-rise-imgs .main-worry__item,
    [data-fx-pin-rise-imgs] [data-fx-pin-rise-item] {
        width: min(11rem, 42vw);
    }
    .tp-fx-pin-rise-imgs .main-worry__item[data-from="left"],
    [data-fx-pin-rise-imgs] [data-fx-pin-rise-item][data-from="left"] {
        left: 0.75rem;
    }
    .tp-fx-pin-rise-imgs .main-worry__item[data-from="right"],
    [data-fx-pin-rise-imgs] [data-fx-pin-rise-item][data-from="right"] {
        right: 0.75rem;
    }
}