/* ============================================================
   Products — 제품 소개 페이지 전용 CSS
   ▸ Sub Hero (페이지 타이틀 + 설명 + 제품 라인업 탭)
   ▸ Product Intro (좌: 텍스트 / 우: 제품 이미지)
   ▸ Product Empathy (공감 메시지 + 텍스트 마퀴)
   ▸ Product Features (3종 핵심기능 — 풀페이지 핀 + 스크롤 단계 활성화)
   ============================================================ */

/* ── Product Intro ────────────────────────────────── */
.product-intro {
    padding: 6vw 0;
    overflow: hidden;
}

.product-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.product-intro__badge {
    margin-bottom: 24px;
}

.product-intro__title {
    display: flex;
    flex-direction: column;
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 48px;
}

.product-intro__title-accent {
    color: var(--color-primary);
}

.product-intro__title-main {
    color: var(--color-text);
}

.product-intro__lead {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 24px;
    letter-spacing: -2px;
}

.product-intro__desc {
    /* text-desc 공통 사용 */
}

.product-intro__visual {
    width: 790px;
    /* translateX(5vw) bleed 및 반응형 transform 리셋은 weromy·desk 페이지 전용(floating 인터랙션 일부).
       vending 의 visual 은 AOS(fade-right)가 transform 을 제어하므로 공통 규칙에서 transform 을 두지 않는다. */
}


.product-intro__visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Product Intro 인터랙션 ─────────────────────────────
   Phase A (floating-small): 페이지 로드 ~ intro top 이 viewport bottom 진입 시작
       accent 가 inner 시작점 +20px 가운데, 자기 자리 사이즈로 떠 있음. 자식 5개 숨김.
   Phase B (floating-grow):  스크롤 진행 (sectionTop = vh → -100 사이) progress 0~1 보간
       accent 가 점점 커지면서 section 정중앙으로 이동. 매 프레임 현재 width/height 로
       박스 중심점 기준 좌상단 재계산해 점프 방지.
   Phase C (settled):        sectionTop <= -100 도달 시점 1회
       accent 0.9s cubic 트랜지션으로 자기 자리 + 원본 사이즈 복귀,
       자식 5개 0.9 / 1.05 / 1.1 / 1.2 / 1.35s stagger fade-up.
   ──────────────────────────────────────────────────── */
.product-intro__title-accent {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    white-space: nowrap;
    transform-origin: left top;
    z-index: 10;
    will-change: font-size, transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* 한 글자씩 타이핑 — JS(01-products-weromy.js) 가 textContent 를 .char span 으로 분리 +
   인라인 animation-delay 부여. opacity 0 → 1 으로 한 글자씩 등장. */
.product-intro__title-accent .char {
    display: inline-block;
    opacity: 0;
    animation: accentCharIn 0.35s ease forwards;
}

@keyframes accentCharIn {
    to { opacity: 1; }
}

/* Phase A/B — JS 가 매 프레임 변수 갱신, transition 없이 즉시 반영.
   동시에 타이핑(약 1.1s) 끝난 후부터 살짝 깜빡임. floating 동안 유지, settle 시 정지. */
.product-intro.is-floating .product-intro__title-accent {
    font-size: var(--accent-current-size);
    transform: translate3d(var(--accent-tx, 0px), var(--accent-ty, 0px), 0);
    animation: accentBlink 1.6s ease-in-out 1.1s infinite;
}

@keyframes accentBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.product-intro.is-floating .product-intro__badge,
.product-intro.is-floating .product-intro__title-main,
.product-intro.is-floating .product-intro__lead,
.product-intro.is-floating .product-intro__desc {
    opacity: 0;
    transform: translateY(30px);
}

.product-intro.is-floating .product-intro__visual {
    opacity: 0;
    transform: translateX(60px);
}

/* Phase C — settle 시 부드러운 복귀. is-floating 클래스 제거되며 transform 변경,
   .is-settled 가 transition 만 부여 → 기본 selector 의 transform 으로 자연스럽게 보간.
   동시에 깜빡임 animation 도 종료 (opacity 1 로 고정). */
.product-intro.is-settled .product-intro__title-accent {
    animation: none;
    opacity: 1;
    transition: font-size 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.product-intro.is-settled .product-intro__badge,
.product-intro.is-settled .product-intro__title-main,
.product-intro.is-settled .product-intro__lead,
.product-intro.is-settled .product-intro__desc {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.product-intro.is-settled .product-intro__visual {
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* stagger delay — accent 도착(0.5s) 이후 순차 등장 */
.product-intro.is-settled .product-intro__badge        { transition-delay: 0.5s; }
.product-intro.is-settled .product-intro__title-main   { transition-delay: 0.6s; }
.product-intro.is-settled .product-intro__visual       { transition-delay: 0.65s; }
.product-intro.is-settled .product-intro__lead         { transition-delay: 0.7s; }
.product-intro.is-settled .product-intro__desc         { transition-delay: 0.8s; }

/* 모션 줄이기 — 즉시 최종 상태 */
@media (prefers-reduced-motion: reduce) {
    .product-intro.is-floating .product-intro__title-accent,
    .product-intro.is-floating .product-intro__badge,
    .product-intro.is-floating .product-intro__title-main,
    .product-intro.is-floating .product-intro__lead,
    .product-intro.is-floating .product-intro__desc,
    .product-intro.is-floating .product-intro__visual {
        opacity: 1;
        transform: none;
        font-size: inherit;
    }
}

/* ── Product Empathy (공감 메시지 + 텍스트 마퀴) ─────────
   상단 .section-heading 가운데 정렬 + 3행 텍스트 롤링.
   1·3행 left, 2행 right 방향. 양 옆은 흰색 그라데이션으로 페이드.
   ──────────────────────────────────────────────────── */
.product-empathy {
    padding: 6vw 0;
    overflow: hidden;
}

.product-empathy__inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ── Text Marquee (재사용 가능 컴포넌트) ──────────────── */
.text-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 양옆 흰색 페이드 — 좌/우 ::before/::after */
.text-marquee::before,
.text-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 240px;
    pointer-events: none;
    z-index: 2;
}

.text-marquee::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.text-marquee::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.text-marquee__row {
    overflow: hidden;
    padding: 48px 0;
}

.text-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

/* 방향별 keyframes — 트랙은 JS 로 한 번 복제되어 -50% 이동 시 끊김 없음 */
.text-marquee__row--left .text-marquee__track {
    animation: text-marquee-left 40s linear infinite;
}

.text-marquee__row--right .text-marquee__track {
    animation: text-marquee-right 40s linear infinite;
}

@keyframes text-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes text-marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.text-marquee__item {
    flex: 0 0 auto;
    margin-right: 100px;        /* gap 대신 margin — 복제 경계 무관 */
    color: #C3C3C3;
    text-align: center;
    font-family: "Spoqa Han Sans Neo", sans-serif;
    font-size: 2rem;            /* 32px */
    font-weight: 500;
    line-height: 1.5;           /* 48px */
    letter-spacing: -2px;
    white-space: nowrap;
    transition: color 0.6s ease;
}

.text-marquee__item.is-active {
    color: #262626;
}

/* 모션 줄이기 — 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
    .text-marquee__row--left .text-marquee__track,
    .text-marquee__row--right .text-marquee__track {
        animation: none;
    }
}


/* ── Product Platform — 모바일 연동 / 관리자모드 / 활용처 ─
   부모 section 1개 + 내부 3개 __block.
   1·2 블록: 그라디언트 비주얼 카드 + 3-카드 그리드(border-only).
   3 블록: 활용처 4-그리드(사진 + 텍스트, border 없음).
   ──────────────────────────────────────────────────── */
.product-platform {
    padding-top: 6vw;
}

.product-platform__block {
    padding-bottom: 6vw;
}

.product-platform__head {
    text-align: center;
    margin-bottom: 48px;
}

.product-platform__title {
    margin: 0 0 16px;
    font-size: 3rem;            /* 48px */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -2px;
    color: var(--color-text);
}

.product-platform__desc {
    margin: 0;
}

/* 비주얼 카드 (블록 1·2 공통) */
.product-platform__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 150px;                      /* 모바일 목업 2개 사이 간격 (블록 2 는 자식 1개라 무영향) */
    margin: 0 auto;
    padding: 38px 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #FFFBF6 0%, #FAF1EA 100%);
}

/* 블록 2 — 대시보드 가로 중앙 + 바닥 정렬 */
.product-platform__block--admin .product-platform__visual {
    align-items: end;
    padding-bottom: 0;
}

/* 블록 2 대시보드 이미지 — 가로 1000 고정, 세로 비율 자동
   (.product-platform__visual img 의 max-width:100% 를 풀어줌) */
.product-platform__block--admin .product-platform__visual img {
    width: 1000px;
    max-width: none;
    height: auto;
}


.product-platform__visual img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 블록 1 모바일 목업 wrapper — addon 의 absolute 기준점 */
.product-platform__mockup {
    position: relative;
    flex: 0 0 auto;
}

/* 메인 모바일 이미지 — 가로 216, 세로 자동 */
.product-platform__mockup-img {
    display: block;
    width: 216px;
    height: auto;
}

/* 두 번째 목업 양옆 addon — 목업 좌/우 바깥쪽에 absolute, 세로 중앙
   max-width: none → .product-platform__visual img 의 100% 제한을 풀어
   wrapper(216px) 보다 큰 width(예: 232px) 도 정상 적용되도록. */
.product-platform__mockup .product-platform__mockup-addon {
    position: absolute;
    top: 50%;
    height: auto;
    max-width: none;
    pointer-events: none;
    z-index: 2;
}

.product-platform__mockup .product-platform__mockup-addon--left {
    width: 232px;
    right: 40%;
}

.product-platform__mockup .product-platform__mockup-addon--right {
    width: 187px;
    top: 46%;
    left: 40%;
}

/* 하단 3-카드 그리드 */
.product-platform__cards {
    margin: 64px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 448px);
    justify-content: center;
    gap: 48px;
}

.product-platform__card {
    width: 100%;
    height: 324px;
    padding: 48px;
    padding-right: 0;
    border-radius: 16px;
    border: 2px solid #EEE;
    background: #FFF;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-platform__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.product-platform__card-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(180deg, #FAFAF9 0%, #FCEFE8 100%);
}

.product-platform__card-icon img,
.product-platform__card-icon svg {
    width: 40px;
    height: 40px;
}

.product-platform__card-title {
    color: var(--color-text);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -2px;
    margin-bottom: 8px;
}

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

/* 블록 3 — 활용처 4-그리드 */
.product-platform__cases {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 324px);
    justify-content: center;
    gap: 24px;
}


.product-platform__case {
    height: 364px;
    display: flex;
    flex-direction: column;
}

.product-platform__case-img {
    height: 240px;
    overflow: hidden;
}

.product-platform__case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.product-platform__case:hover .product-platform__case-img img {
    transform: scale(1.05);
}

.product-platform__case-title {
    margin: 24px 0 8px;
    color: var(--color-text);
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -2px;
}

.product-platform__case-desc {
    font-size: 1.25rem;
    text-align: center;
}

/* ── 1440px 이하 ──────────────────────────────────────── */
@media (max-width: 1440px) {

    /* Product Intro */
    .product-intro {
        padding: 80px 0;
    }

    .product-intro__inner {
        gap: 48px;
    }

    .product-intro__badge {
        margin-bottom: 20px;
    }

    .product-intro__title {
        font-size: 2.75rem;
        margin-bottom: 32px;
    }

    .product-intro__lead {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .product-intro__visual {
        width: 100%;
    }

    /* Product Empathy */
    .product-empathy {
        padding: 80px 0;
    }

    .product-empathy__inner {
        gap: 56px;
    }

    .text-marquee::before,
    .text-marquee::after {
        width: 160px;
    }

    .text-marquee__row {
        padding: 32px 0;
    }

    .text-marquee__item {
        margin-right: 72px;
        font-size: 1.5rem;          /* 24px */
        letter-spacing: -1.5px;
    }


    /* ── Product Platform ───────────────────────────────
       1440px 이하 — 카드/활용처 그리드 폭을 1fr 로 풀어 viewport 적응.
       모바일 목업 gap, addon 위치도 비례 축소. */
    .product-platform__head {
        margin-bottom: 32px;
    }

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

    /* 비주얼 카드 */
    .product-platform__visual {
        gap: 120px;                      /* 150 → 80 */
        padding: 32px 24px;
    }

    .product-platform__block--admin .product-platform__visual {
        padding-bottom: 0;
    }

    .product-platform__block--admin .product-platform__visual img {
        width: 100%;
        max-width: 1000px;
    }

    /* 모바일 목업 */
    .product-platform__mockup-img {
        width: 180px;                   /* 216 → 180 */
    }

    .product-platform__mockup .product-platform__mockup-addon--left {
        width: 200px;                   /* 232 → 200 */
    }

    .product-platform__mockup .product-platform__mockup-addon--right {
        width: 160px;                   /* 187 → 160 */
    }

    /* 3-카드 그리드 — 1fr 적응 */
    .product-platform__cards {
        margin-top: 48px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .product-platform__card {
        height: auto;
        min-height: 260px;
        padding: 32px;
    }

    .product-platform__card-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }

    .product-platform__card-icon img,
    .product-platform__card-icon svg {
        width: 32px;
        height: 32px;
    }

    .product-platform__card-title {
        font-size: 1.5rem;              /* 32 → 24 */
        letter-spacing: -1px;
    }

    .product-platform__card-desc {
        font-size: 1rem;                /* 20 → 16 */
    }

    /* 활용처 4-그리드 — 1fr 적응 */
    .product-platform__cases {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .product-platform__case {
        width: 100%;
        height: auto;
    }

    .product-platform__case-img {
        width: 100%;
        height: auto;
        aspect-ratio: 324 / 240;
    }

    .product-platform__case-title {
        margin: 20px 0 8px;
        font-size: 1.5rem;              /* 32 → 24 */
        letter-spacing: -1px;
    }

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

}

/* ── 768px 이하 (모바일) ──────────────────────────────── */
@media (max-width: 768px) {

    /* Product Intro — 1열 세로 적층 */
    .product-intro {
        padding: 48px 0;
    }

    .product-intro__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product-intro__badge {
        margin-bottom: 16px;
    }

    .product-intro__title {
        margin-bottom: 20px;
    }

    .product-intro__lead {
        margin-bottom: 14px;
    }

    .product-intro__lead br {
        display: none;
    }

    .product-intro__visual {
        width: 100%;
    }

    /* Product Intro 인터랙션 — 모바일 폴백: 풀 floating 비활성, 단순 fade-up */
    .product-intro.is-floating .product-intro__title-accent {
        font-size: inherit;
        transform: translateY(30px);
        opacity: 0;
    }

    .product-intro.is-settled .product-intro__title-accent {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .product-intro.is-settled .product-intro__badge      { transition-delay: 0s; }
    .product-intro.is-settled .product-intro__title-main { transition-delay: 0.08s; }
    .product-intro.is-settled .product-intro__lead       { transition-delay: 0.24s; }
    .product-intro.is-settled .product-intro__desc       { transition-delay: 0.32s; }
    .product-intro.is-settled .product-intro__visual     { transition-delay: 0.4s; }

    /* Product Empathy */
    .product-empathy {
        padding: 56px 0;
    }

    .product-empathy__inner {
        gap: 40px;
    }

    .text-marquee::before,
    .text-marquee::after {
        width: 80px;
    }

    .text-marquee__row {
        padding: 20px 0;
    }

    .text-marquee__item {
        margin-right: 48px;
        letter-spacing: -1px;
    }


    /* ── Product Platform ───────────────────────────────
       768px 이하 — 3-카드 1열, 활용처 2×2.
       비주얼 카드 안 모바일 목업 2개는 가로 유지 (작게 축소).
       addon 은 좁은 공간에서 어색하므로 숨김. */
    .product-platform__block {
        padding-bottom: 56px;
    }

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

    /* 비주얼 카드 */
    .product-platform__visual {
        gap: 0;
        justify-content: space-between;
        padding: 24px 16px;
        border-radius: 8px;
    }

    .product-platform__block--admin .product-platform__visual {
        padding: 16px 16px 0;
    }

    .product-platform__block--admin .product-platform__visual img {
        width: 100%;
    }

    /* 모바일 목업 — 작게 + addon 숨김 */
    .product-platform__mockup-img {
        width: 130px;
    }

    /* 모바일에서도 addon 노출 — 모바일 목업(130px) 비율에 맞춰 축소 */
    .product-platform__mockup .product-platform__mockup-addon--left {
        width: 130px;
    }

    .product-platform__mockup .product-platform__mockup-addon--right {
        width: 100px;
    }

    /* 3-카드 — 1열 */
    .product-platform__cards {
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 모바일 카드 — 아이콘(좌) + 타이틀·설명(우) 가로 정렬 (grid 2열) */
    .product-platform__card {
        min-height: 0;
        padding: 20px;
        padding-right: 20px;            /* desktop 의 padding-right: 0 override */
        border-radius: 8px;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: center;
    }

    .product-platform__card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 0;               /* desktop margin-bottom override */
        grid-column: 1;
        grid-row: 1 / span 2;
        border-radius: 8px;
    }

    .product-platform__card-icon img {
        width: 24px;
        height: 24px;
    }

    .product-platform__card-title {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 4px;
        letter-spacing: -0.5px;
    }

    .product-platform__card-desc {
        grid-column: 2;
        grid-row: 2;
    }

    /* 활용처 — 2×2 */
    .product-platform__cases {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    .product-platform__case-title {
        margin: 14px 0 6px;
        letter-spacing: -0.5px;
    }

}

/* ============================================================
   Product Impact — 위로미가 만드는 변화 (호버 가로 아코디언)
   ▸ 카드 3개. 한 카드만 펼침(2fr), 나머지는 접힘(1fr).
   ▸ 호버 시 펼침 카드 전환. 섹션 떠나면 카드 1 로 복귀.
   ▸ JS 가 .is-open 클래스 + ul[data-open] 속성 토글.
   ============================================================ */
.product-impact {
    padding: 100px 0;
    background-color: #f8f8f8;
    overflow: hidden;
}

.product-impact__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ── 카드 트랙 — flex 로 변환 (grid 의 fr 단위는 트랜지션 미지원) ── */
.product-impact__cards {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── 카드 본체 ───────────────────────────────────────── */
.product-impact__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;                   /* flex 자식 기본 min-content 무시 */
    height: 480px;
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    background: #FFB2B2;
    box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    cursor: pointer;
    /* flex-grow 트랜지션 — 카드 폭이 부드럽게 늘어나고 줄어듦 */
    transition: flex-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-impact__card.is-open {
    flex-grow: 2;
}

/* ── 사진 — 항상 보이는 base 레이어. 블러 트랜지션이 펼침/접힘 전환 핵심 ─ */
.product-impact__card-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: lightgray;        /* 이미지 로딩 전 폴백 */
}

.product-impact__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 접힘 = 블러 + 살짝 확대 (blur 가장자리 잘림 방지). 펼침 = 블러 0 + 원본 스케일. */
    filter: blur(10px);
    transform: scale(1.1);
    transition: filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-impact__card.is-open .product-impact__card-photo img {
    filter: blur(0);
    transform: scale(1);
}

/* ── 어두운 오버레이 (30%) — 접힘 시 글래스모피즘 톤 만들기 ────── */
.product-impact__card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.30);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-impact__card.is-open .product-impact__card-shade {
    opacity: 0;
}

/* ── 접힘 상태 콘텐츠 ─────────────────────────────────── */
.product-impact__card-collapsed {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #FFFFFF;
    text-align: center;
    /* 펼침 시 살짝 위로 떠올라 사라지는 느낌 */
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-impact__card.is-open .product-impact__card-collapsed {
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events: none;
}

/* 글래스모피즘 아이콘 칩 — 84×84 / radius 16
   ▸ 대각 그라디언트 배경 + 흰 1px 테두리 + 안쪽 상단 하이라이트로 유리 면감
   ▸ ::before — 상단 절반 하이라이트 (빛이 위에서 떨어지는 효과)
   ▸ ::after — 우상단 모서리 라디얼 하이라이트 (빛 튕기는 spot)
   ▸ 외부 box-shadow — 카드 위에 살짝 떠 있는 부유감 */
.product-impact__card-icon {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.45) 0%,
                rgba(255, 255, 255, 0.10) 100%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),     /* 상단 안쪽 하이라이트 라인 */
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),    /* 하단 안쪽 미세 라인 */
        0 8px 24px rgba(0, 0, 0, 0.15);              /* 부유 그림자 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 상단 절반에 부드러운 흰 하이라이트 — 유리 면이 위에서 빛 받는 느낌 */
.product-impact__card-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.35) 0%,
                rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.product-impact__card-icon svg {
    position: relative;        /* ::before/::after 위로 */
    z-index: 1;
    width: 44px;
    height: 44px;
    display: block;
}

.product-impact__card-label {
    font-size: 2rem;        /* 32px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -2px;
    color: #FFFFFF;
}

/* ── 펼침 상태 콘텐츠 (하단 텍스트 그라디언트) ──────────── */
.product-impact__card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 338px;
    padding: 32px;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.00) 20.76%,
                rgba(255, 255, 255, 0.60) 41.19%,
                #FFF 66.42%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    /* 접힐 때(out) — 빠르게, 딜레이 없이 사라짐 */
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-impact__card.is-open .product-impact__card-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* 펼쳐질 때(in) — 그리드 폭이 어느정도 펴진 뒤 천천히 떠오르며 등장 */
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

/* 솔리드 오렌지 알약 뱃지 — .badge 와는 별도 */
.product-impact__card-badge {
    width: 120px;
    height: 35px;
    border-radius: 50px;
    background: #FF8C49;
    color: #FFFFFF;
    font-weight: 500;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-impact__card-title {
    font-size: 2rem;        /* 32px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1.5px;
    letter-spacing: -2px;
    color: var(--color-text);
    margin: 0;
}

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

/* ── 모션 줄이기 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .product-impact__cards,
    .product-impact__card-photo img,
    .product-impact__card-shade,
    .product-impact__card-collapsed,
    .product-impact__card-overlay {
        transition: none;
    }
}

/* ── 1440px 이하 ─────────────────────────────────────── */
@media (max-width: 1440px) {
    .product-impact {
        padding: 80px 0;
    }

    .product-impact__inner {
        gap: 48px;
    }

    .product-impact__card {
        height: 400px;
    }

    .product-impact__card-overlay {
        height: 280px;
        padding: 24px;
    }

    .product-impact__card-title {
        font-size: 1.5rem;
        letter-spacing: -1px;
    }

    .product-impact__card-label {
        font-size: 1.25rem;
    }
}

/* ── 768px 이하 — 가로 아코디언 폐기, 세로 1열 모두 펼침 디자인 ──── */
@media (max-width: 768px) {
    .product-impact {
        padding: 56px 0;
    }

    .product-impact__inner {
        gap: 32px;
    }

    .product-impact__cards {
        flex-direction: column;
        gap: 16px;
    }

    .product-impact__card,
    .product-impact__card.is-open {
        flex: 1 1 auto;
        height: 320px;
        transition: none;
    }

    /* 모바일은 호버 없으니 전부 펼침 디자인 */
    .product-impact__card-shade,
    .product-impact__card-collapsed {
        display: none;
    }

    .product-impact__card-photo img {
        filter: none;
        transform: none;
    }

    .product-impact__card-overlay {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .product-impact__card-overlay {
        height: 240px;
        padding: 20px;
    }

    .product-impact__card-desc br {
        display: none;
    }
}

/* ============================================================
   Product Spec — 설치 사양 (후드형 / 부스형 2-그리드)
   ▸ 이미지(회색 배경) + 텍스트(모델명·태그·사양 행) 세로 적층
   ▸ JS 인터랙션 없음
   ============================================================ */
.product-spec {
    padding: 6vw 0;
}

.product-spec__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ── 2-그리드 ───────────────────────────────────────── */
.product-spec__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

/* ── 사양 1개 — 이미지 + 텍스트 세로 적층 ─────────────── */
.product-spec__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 이미지 영역 — 회색 배경, 가운데 정렬 */
.product-spec__visual {
    width: 100%;
    aspect-ratio: 460 / 360;
    background: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-spec__visual img {
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 텍스트 영역 */
.product-spec__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-spec__name {
    color: var(--color-text);
    font-size: 2rem;        /* 28px */
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -2px;
}

.product-spec__name span {
    font-size: 1.25rem;
    letter-spacing: -1px;
}

/* 태그 그룹 */
.product-spec__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* 태그 1개 — 페일 오렌지 알약 칩 (.badge 와는 다른 라운드/패딩) */
.product-spec__tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 50px;
    background: #FFF0E0;
    color: #FF8C49;
    font-weight: 400;
    line-height: 1;
}

/* 사양 행 그룹 */
.product-spec__rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.product-spec__row {
    display: flex;
    gap: 24px;
    align-items: baseline;
}

.product-spec__row-label {
    flex: 0 0 auto;
    width: 130px;
    color: var(--color-muted);
}

.product-spec__row-value {
    color: var(--color-text);
}

.product-spec__row-value span {
    color: #F00;
}

/* ── 1440px 이하 ─────────────────────────────────────── */
@media (max-width: 1440px) {
    .product-spec {
        padding: 80px 0;
    }

    .product-spec__inner {
        gap: 48px;
    }

    .product-spec__list {
        gap: 32px;
    }

    .product-spec__name {
        font-size: 1.5rem;
    }
}

/* ── 768px 이하 — 2열 → 1열 세로 적층 ───────────────── */
@media (max-width: 768px) {
    .product-spec {
        padding: 56px 0;
    }

    .product-spec__inner {
        gap: 32px;
    }

    .product-spec__list {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product-spec__item {
        gap: 16px;
    }

    .product-spec__body {
        gap: 16px;
    }

    .product-spec__rows {
        gap: 12px;
    }

    .product-spec__row {
        gap: 16px;
    }

    .product-spec__row-label {
        width: 64px;
    }
}


/* Product CTA 는 common.css 의 .product-cta 블록 참조 (opt-in 섹션 — assets/js/modules/product-cta.js 가 주입) */