/* ============================================================
   Products (위로미 V3) — 위로미 V3 페이지 전용 CSS
   ▸ 공통 섹션(intro / empathy·marquee / platform / impact / spec)은 products.css 참고.
   ▸ 이 파일은 위로미 V3 에만 있는 섹션 전용:
       - Product Features (3종 핵심기능 — 풀페이지 핀 + 스크롤 단계 활성화)
       - Product Services (마음검사 / 마음우체통 / 마음전화 자동 회전)
   ============================================================ */

/* ── Product Intro — visual bleed (페이지 전용) ─────────
   visual(790px)을 우측으로 5vw 흘려보내는 디자인. floating 인터랙션의 안착 위치이기도 함.
   ≤1440 에서는 visual 이 width:100% 가 되므로 bleed 해제. (vending 은 AOS 가 transform 제어 → 공통에서 제외) */
.product-intro__visual {
    transform: translateX(5vw);
}

@media (max-width: 1440px) {
    .product-intro__visual {
        transform: none;
    }
}

/* ── Product Features (풀페이지 핀 + 스크롤 단계 활성화) ──
   외곽 section 은 키 큰 스크롤 트랙, 내부 __sticky 가 100vh 핀.
   3단계(0/1/2) 활성화는 products.js 가 .is-active 토글.
   ──────────────────────────────────────────────────── */
.product-features {
    position: relative;
    /* 100vh × 3단계 + 입출 마진. JS 스크롤 진행률 계산이 이 높이 기준. */
    min-height: 250vh;
    background: var(--color-bg);
}

.product-features__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* 동심원 배경 — 활성 행 중심에서 퍼지는 옅은 가이드. CSS 만으로 다중 ring. */
.product-features__rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90vh;
    height: 90vh;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle,
            transparent 0,
            transparent calc(20% - 1px),
            #e9e9e9 20%,
            transparent calc(20% + 1px),
            transparent calc(45% - 1px),
            #e9e9e9 45%,
            transparent calc(45% + 1px),
            transparent calc(70% - 1px),
            #e9e9e9 70%,
            transparent calc(70% + 1px),
            transparent 100%);
}

.product-features__list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
}

/* 한 행: [desc] [icon] [name] 가로 한 줄.
   비활성: 아이콘 폭 0 → desc / name 이 가운데 붙어 있음.
   활성: 아이콘 폭 + 좌우 마진 펴지며 두 텍스트가 좌우로 벌어짐. */
.product-features__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    text-align: center;
    color: #C3C3C3;
    transition: color 0.6s ease;
}

.product-features__desc {
    font-size: 2.5rem;          /* 40px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -2px;
    color: inherit;
    transition: color 0.6s ease;
}

.product-features__name {
    font-size: 3rem;            /* 48px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -2px;
    color: inherit;
    transition: color 0.6s ease;
}

/* 비활성 — width 0 + margin 0 + overflow hidden 으로 자리 자체를 안 차지 */
.product-features__icon {
    flex: 0 0 auto;
    width: 0;
    height: 96px;
    margin: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                margin 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.4s ease 0.2s,
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.product-features__icon img {
    width: 96px;                /* 고정 — 컨테이너 width 변할 때 이미지 자체는 안 줄어듦 */
    height: 96px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

/* 활성 상태 — desc 검정, name 오렌지, 아이콘 펴지며 등장 */
.product-features__item.is-active {
    color: var(--color-text);
}

.product-features__item.is-active .product-features__name {
    color: var(--color-primary);
}

.product-features__item.is-active .product-features__icon {
    width: 96px;
    margin: 0 32px;
    opacity: 1;
    transform: scale(1);
}

/* 모션 줄이기 — 트랜지션 제거, 모든 행 보이도록 */
@media (prefers-reduced-motion: reduce) {
    .product-features__item,
    .product-features__desc,
    .product-features__name,
    .product-features__icon {
        transition: none;
    }
}

/* ── Product Services (3개 서비스 자동 회전) ─────────────
   좌: dots(세로 인디케이터) + 3개 리스트박스 (inner 좌측 정렬)
   우: 큰 카운터(배경) + 770px 이미지 스택 (inner 우측 경계 벗어남)
   리스트와 이미지 사이 gap 80px.
   3초마다 dot/item/media/counter 의 .is-active 토글 — JS 처리.
   ──────────────────────────────────────────────────── */
.product-services {
    /* 색상 토큰 — modifier(.product-services--worry / --conversation)로 override.
       기본값 = survey(오렌지). */
    --services-bg-from: #FFFFFF;
    --services-bg-to: #FFF0E8;
    --services-accent: var(--color-primary);
    --services-counter: #FFEADD;
    --services-shadow: rgba(255, 140, 73, 0.30);
    --services-badge-bg: #FFF0E0;
    --services-badge-color: var(--color-primary);

    position: relative;
    padding: 6vw 0;
    overflow: hidden;       /* visual 이 inner 우측을 벗어나도 viewport 우측은 클리핑 */
    background: linear-gradient(180deg, var(--services-bg-from) 0%, var(--services-bg-to) 100%);
}

/* 마음우체통 — 블루 톤 */
.product-services--worry {
    --services-bg-from: #FFFFFF;
    --services-bg-to: #FFF9E8;
    --services-accent: #FFAA49;
    --services-counter: #FFF7E0;
    --services-shadow: rgba(255, 140, 73, 0.30);
    --services-badge-bg: #FFF7E0;
    --services-badge-color: #FFAA49;
}

/* 마음전화 — 그린/민트 톤 */
.product-services--conversation {
    --services-bg-from: #FFFFFF;
    --services-bg-to: #F9FFEA;
    --services-accent: #82D95A;
    --services-counter: #EFFFE0;
    --services-shadow: rgba(122, 224, 74, 0.30);
    --services-badge-bg: #EFFFE0;
    --services-badge-color: #82D95A;
}

/* 섹션별 badge 색상 override — .badge 공통 형태 + 색상만 덮어쓰기 */
.product-services .badge {
    background: var(--services-badge-bg);
    color: var(--services-badge-color);
}

.product-services__head {
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.product-services__badge {
    font-family: "Poppins", sans-serif;
    /* badge 공통 스타일 + 위치 전용 — 색/형태는 .badge 가 처리 */
}

.product-services__title {
    font-size: 3rem;        /* 48px */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -2px;
    color: var(--services-accent);
}

/* 좌·우 2단 — 리스트 + 이미지, 사이 80px */
.product-services__body {
    /* visual 이 absolute 로 빠졌으므로 panel 만 배치 */
}

/* 좌측 패널 (dots + 리스트) */
.product-services__panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 24px;
}

/* dots — 세로 인디케이터 */
.product-services__dots {
    position: absolute;
    left: 100px;
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.product-services__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D9D9D9;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.product-services__dot button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
}

.product-services__dot.is-active {
    height: 50px;
    border-radius: 10px;
    background: var(--services-accent);
}

/* 리스트박스 */
.product-services__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.product-services__item {
    width: 830px;
    height: 180px;
    padding: 24px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.product-services__item.is-active {
    border: 2px solid var(--services-accent);
    background: #FFF;
    box-shadow: 4px 4px 20px 0 var(--services-shadow);
}

/* 헤더 한 줄 — 번호 뱃지 + 제목 */
.product-services__item-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-services__item-desc {
    font-size: 1.25rem;
}

/* 번호 동그라미 — 비활성 다크, 활성 오렌지 */
.product-services__item-num {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-text);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.4s ease;
}

.product-services__item.is-active .product-services__item-num {
    background: var(--services-accent);
}

.product-services__item-name {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    transition: color 0.4s ease;
}

.product-services__item.is-active .product-services__item-name {
    color: var(--services-accent);
}

/* 우측 비주얼 — 770px 고정, inner 우측 경계 벗어남 */
/* 우측 비주얼 — section 의 우하단(viewport 우측 끝)에 absolute 고정 */
.product-services__visual {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 770px;
}

/* 배경 큰 카운터 숫자 — 이미지 뒤로 z-index 1 */
.product-services__counter {
    position: absolute;
    top: -27%;
    right: 20%;
    z-index: 1;
    font-family: "Poppins", sans-serif;
    font-size: 18rem;
    font-weight: 600;
    color: var(--services-counter);
    pointer-events: none;
}

/* 이미지 스택 — 활성 1장만 보임 */
/* 이미지 스택 — 모든 item 을 같은 grid cell 에 겹쳐서 중첩.
   container 는 자식 중 가장 큰 자연 높이로 크기 결정 → visual 높이 = 이미지 자연 높이. */
.product-services__media {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
}

.product-services__media-item {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.product-services__media-item.is-active {
    opacity: 1;
}

/* ── 1440px 이하 ──────────────────────────────────────── */
@media (max-width: 1440px) {
    /* Product Features */
    .product-features__rings {
        width: 80vh;
        height: 80vh;
    }

    .product-features__list {
        gap: 48px;
        padding: 0 20px;
    }

    .product-features__desc {
        font-size: 1.875rem;        /* 30px */
        letter-spacing: -1.5px;
    }

    .product-features__name {
        font-size: 2.25rem;         /* 36px */
        letter-spacing: -1.5px;
    }

    .product-features__icon {
        height: 72px;
    }

    .product-features__icon img {
        width: 72px;
        height: 72px;
    }

    .product-features__item.is-active .product-features__icon {
        width: 72px;
        margin: 0 24px;
    }

    /* Product Services */
    .product-services__head {
        margin-bottom: 56px;
        gap: 16px;
    }

    .product-services__title {
        font-size: 2.25rem;          /* 36px */
        letter-spacing: -1.5px;
    }

    .product-services__panel {
        gap: 16px;
    }

    .product-services__list {
        gap: 12px;
    }

    .product-services__item {
        width: 560px;
        height: 144px;
        padding: 20px 32px;
        gap: 8px;
    }

    .product-services__item-head {
        gap: 12px;
    }

    .product-services__item-num {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .product-services__item-name {
        font-size: 1.5rem;
    }

    .product-services__item-desc {
        font-size: 1rem;
    }

    .product-services__visual {
        width: 520px;
    }

    .product-services__counter {
        font-size: 14rem;
        letter-spacing: -6px;
    }
}

/* ── 768px 이하 (모바일) ──────────────────────────────── */
@media (max-width: 768px) {
    /* Product Features — 모바일은 desc / icon / name 세로 적층 */
    .product-features {
        min-height: 280vh;
    }

    .product-features__rings {
        width: 70vh;
        height: 70vh;
    }

    .product-features__list {
        gap: 80px;
        padding: 0 16px;
    }

    /* 모바일 — 세로 적층이라 width 트릭 대신 height 0 ↔ 56 으로 유사 처리 */
    .product-features__item {
        flex-direction: column;
    }

    .product-features__desc {
        letter-spacing: -1px;
    }

    .product-features__name {
        letter-spacing: -1px;
    }

    .product-features__icon {
        width: 56px;
        height: 0;
        margin: 0;
        transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                    margin 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                    opacity 0.4s ease 0.2s,
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
    }

    .product-features__icon img {
        width: 56px;
        height: 56px;
    }

    .product-features__item.is-active .product-features__icon {
        width: 56px;
        height: 56px;
        margin: 16px 0;
    }

    /* Product Services — 모바일: dots(상단 가로 중앙) → 활성 텍스트 → 이미지 */
    .product-services {
        padding: 48px 0 0;
    }

    .product-services__head {
        margin-bottom: 32px;
        gap: 12px;
    }

    .product-services__title {
        letter-spacing: -1px;
    }

    /* Panel: dots → list 세로 적층 */
    .product-services__panel {
        flex-direction: column;
        gap: 20px;
    }

    /* Dots: 가로 일렬 + 가운데 정렬 (상단) */
    .product-services__dots {
        position: relative;
        left: auto;
        top: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        align-self: center;
        gap: 10px;
    }

    .product-services__dot {
        width: 10px;
        height: 10px;
    }

    .product-services__dot.is-active {
        height: 10px;
    }

    /* List: 활성 1개만 표시 */
    .product-services__list {
        width: 100%;
        height: 140px;       /* 고정 높이 — 활성 텍스트 길이가 달라도 아래 이미지 위치 유지 */
        gap: 0;
    }

    .product-services__item {
        display: none;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 16px 20px;
        gap: 6px;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .product-services__item.is-active {
        display: flex;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .product-services__item-head {
        gap: 10px;
    }

    .product-services__item-num {
        width: 24px;
        height: 24px;
    }

    .product-services__item-desc {
        line-height: 1.5;
    }

    /* visual — absolute 해제, list 바로 아래 normal flow (이미지+텍스트 한 묶음) */
    .product-services__visual {
        position: static;
        width: 100%;
        margin-top: 16px;
    }

    .product-services__counter {
        top: 42%;
        right: 10%;
        letter-spacing: -3px;
    }
}