/* ============================================================
   Products (멘탈헬스 데스크) — 데스크 페이지 전용 CSS
   ▸ 공통 섹션(intro / empathy·marquee / platform / impact / spec)은 products.css 참고.
   ▸ 이 파일은 멘탈헬스 데스크 에만 있는 섹션 전용:
       - Product Platform 의 AI 아키텍처 다이어그램 카드
       - Product Spec --single (단일 사양 2-컬럼)
       - Product Flow (스크롤 곡선 채움 사용 플로우)
   ============================================================ */

/* ── 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;
    }
}

/* AI 아키텍처 다이어그램 카드 (02-products-desk.html — 핵심 기술 블록)
   ▸ 점선 오렌지 테두리 + 옅은 크림 배경
   ▸ 상단: Safety & Alignment 알약 이미지 (가운데)
   ▸ 중앙: 메인 흐름도 이미지 (가운데)
   ▸ 우하단: 각주 텍스트 */
.product-platform__diagram {
    position: relative;
    margin: 100px auto 0;
    padding: 80px 0px 35px;
    border-radius: 16px;
    border: 2px dashed rgba(242, 106, 46, 0.30);
    background: #FFFCF6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* 상단 알약 카드 — 흰 배경 + 옅은 그림자/테두리, 가운데 정렬 텍스트 2줄 */
.product-platform__diagram-top {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 13px 66px;
    border-radius: 100px;
    background: #FFFFFF;
    border: 2px solid rgba(242, 106, 46, 0.20);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
}

.product-platform__diagram-top-title {
    color: var(--color-primary);
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;          /* 24px */
    font-weight: 600;
}

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

.product-platform__diagram-flow {
    display: block;
    width: 100%;
    max-width: 893px;
    height: auto;
}

.product-platform__diagram-note {
    position: absolute;
    bottom: 28px;
    right: 32px;
    color: var(--color-muted);
    font-size: 0.875rem;        /* 14px */
    line-height: 1.5;
    letter-spacing: -0.3px;
}

/* ── Product Spec --single (02-products-desk.html) ───────
   단일 사양 — 좌:사양표 / 우:이미지 가로 2-컬럼.
   기존 .product-spec__body / __rows / __row* / __visual 재사용.
   `.product-spec__list/__item/__name/__tags` 는 마크업에 등장 안 함.
   ──────────────────────────────────────────────────── */
.product-spec--single .product-spec__single {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* 모델명/태그 없으니 body 큰 gap 불필요 */
.product-spec--single .product-spec__body {
    gap: 0;
}

.product-spec--single .product-spec__rows {
    gap: 16px;
}

/* "운영체제" 4-자 라벨 안전 폭 */
.product-spec--single .product-spec__row-label {
    width: 96px;
}

/* 이미지 영역 — 세로형 이미지 2장 좌·우 배치 가운데. base .product-spec__visual 의 flex center 상속 */
.product-spec--single .product-spec__visual {
    flex-direction: row;
    gap: 0;
    padding: 0;
}

.product-spec--single .product-spec__visual img {
    flex: 0 1 auto;
    max-width: calc(50% - 8px);     /* 두 장 균등 분배 (gap 16의 절반 빼기) */
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 1440px) {
    .product-spec--single .product-spec__single {
        gap: 48px;
    }
}

/* 768 — 이미지 위, 사양표 아래 */
@media (max-width: 768px) {
    .product-spec--single .product-spec__single {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-spec--single .product-spec__visual {
        order: -1;
        aspect-ratio: 460 / 360;
        padding: 16px;
        gap: 8px;
    }

    .product-spec--single .product-spec__row-label {
        width: 80px;
    }
}

/* ============================================================
   Product Flow — 솔루션 사용 플로우 (1구역 인트로 + 2구역 4 step)
   ▸ 1구역: 키커 + 2줄 타이틀 + 제품 정면샷
   ▸ 2구역: 좌우 교차 4 행, 행 gap 220px / 이미지-텍스트 gap 88px
   ============================================================ */
.product-flow {
    overflow: hidden;
    position: relative;
}

/* ── 1구역 인트로 ───────────────────────────── */
.product-flow__intro {
    text-align: center;
    padding: 6vw 0 0;
    background: linear-gradient(180deg, #FFF 0%, #FFF0E8 100%);
}

.product-flow__eyebrow {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    color: #C3C3C3;
    text-align: center;
    margin-bottom: 18px;
}

.product-flow__title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: "Pretendard Variable", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 64px;
}

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

.product-flow__hero {
    max-width: 1197px;
    margin: 0 auto;
}

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

/* ── 2구역 스텝 ─────────────────────────────── */
.product-flow__steps {
    position: relative;
    padding: 7.3vw 0 10.5vw;
    background: linear-gradient(180deg, #FFF 0%, #FFF0E8 100%);
    overflow: hidden;
}

/* 곡선 SVG — inner 안에서 left:550px / width:277px 의 좁은 세로 컬럼. height 100% 로 steps 전체 높이 차지. */
.product-flow__path {
    position: absolute;
    top: -145px;
    left: 250px;
    width: 1405px;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.product-flow__path-base,
.product-flow__path-fill {
    fill: none;
    /* non-scaling-stroke 사용 시 dasharray 가 device 픽셀 기준이 되어 user-space 로 계산한 dot 위치와 어긋남.
       제거하고 viewBox 스케일에 맡김 — 가로/세로 스케일 차이로 stroke 가 살짝 elliptical 해질 수 있으나
       viewBox 종횡비(1369:2588 ≈ 1:1.89) 와 섹션 종횡비가 비슷하면 거의 티 안 남. */
}

.product-flow__path-fill {
    stroke: #FF8C49;
    /* JS 가 totalLength 기준 dasharray / dashoffset 설정 */
}

/* 채움 끝점 dot — JS 가 left/top 픽셀로 갱신. SVG 내부면 stretch 로 타원이 되어 HTML span 사용 */
.product-flow__path-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FF8C49;
    box-shadow: 0 0 0 6px rgba(255, 140, 73, 0.18);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-flow__path-dot.is-visible {
    opacity: 1;
}

.product-flow__steps > .inner {
    position: relative;                    /* 곡선/dot 의 absolute 기준점 */
}

.product-flow__steps-list {
    position: relative;                    /* 곡선 위로 stack */
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-flow__step {
    display: flex;
    gap: 88px;
}

.product-flow__step + .product-flow__step {
    margin-top: 220px;
}

.product-flow__step--text-left,
.product-flow__step--text-right {
    flex-direction: row;
}

/* 이미지 폭 708px 고정, 텍스트는 남는 영역 사용 */
.product-flow__step-visual {
    flex: 0 0 708px;
    min-width: 0;
}
.product-flow__step-text {
    flex: 1 1 0;
    min-width: 0;
}

/* 텍스트 블록 — 큰 숫자가 absolute 로 깔리고 그 위에 타이틀/설명이 올라가도록 stacking 컨텍스트 잡기 */
.product-flow__step-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 159px 91px 0 111px;
}

/* 거대 숫자 — 왼쪽 상단 absolute, 텍스트 뒤로 깔림 */
.product-flow__step-num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15rem;
    line-height: 1;
    color: rgba(255, 231, 217, 0.50);
    pointer-events: none;
}

.product-flow__step-title {
    font-family: "Pretendard Variable", sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.product-flow__step-visual {
    aspect-ratio: 708 / 398;
    border-radius: 16px;
    border: 2px solid #FFF;
    overflow: hidden;
    box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15);
    background: #FFF;
}

.product-flow__step-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 1440 이하 ───────────────────────────── */
@media (max-width: 1440px) {
    .product-flow__intro {
        padding: 12vw 0 0;
    }
    .product-flow__title {
        font-size: 2.25rem;
    }
    .product-flow__steps {
        padding: 12vw 0 14vw;
    }
    .product-flow__hero {
        max-width: 80%;
    }
    .product-flow__step + .product-flow__step {
        margin-top: 160px;
    }
    .product-flow__step {
        gap: 64px;
    }
    .product-flow__step-num {
        font-size: 14rem;
    }
    .product-flow__step-text {
        padding: 120px 40px 0 60px;
    }
    /* 1440 이하 inner 폭이 줄어 708 고정 유지 어려움 → 비율 유지로 전환 (텍스트:이미지 ≈ 4:6) */
    .product-flow__step-visual {
        flex: 1 1 0;
    }
    .product-flow__step-text {
        flex: 0 1 calc((100% - 64px) * 0.4);
    }
}

/* ── 768 이하 — 좌우 교차 해제, 세로 적층 ───── */
@media (max-width: 768px) {
    .product-flow__intro {
        padding: 80px 0 0;
    }
    .product-flow__eyebrow {
        font-size: 14px;
    }
    .product-flow__hero {
        max-width: 100%;
    }

    .product-flow__steps {
        padding: 56px 0 96px;
    }

    /* 모바일에선 좌우 교차가 풀려 곡선 의미 없음 → 숨김 */
    .product-flow__path,
    .product-flow__path-dot {
        display: none;
    }

    /* 모바일은 항상 텍스트 → 이미지 순서로 일관 표시.
       --text-right (마크업상 visual → text 순) 행은 column-reverse 로 뒤집어 텍스트가 위로. */
    .product-flow__step,
    .product-flow__step--text-left {
        flex-direction: column;
        gap: 24px;
        padding: 0 16px;
    }
    .product-flow__step--text-right {
        flex-direction: column-reverse;
        gap: 24px;
        padding: 0 16px;
    }
    .product-flow__step + .product-flow__step {
        margin-top: 80px;
    }
    .product-flow__step-num {
        font-size: 9rem;
    }
    .product-flow__step-text {
        padding: 64px 0 0 24px;
        flex: 1 1 auto;
    }
    .product-flow__step-visual {
        border-radius: 8px;
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ── AI 아키텍처 다이어그램 — 1440px 이하 ─────────────── */
@media (max-width: 1440px) {
    /* AI 아키텍처 다이어그램 — top 알약이 카드 상단을 가로지르는 구조 유지, 패딩만 비례 축소 */
    .product-platform__diagram {
        margin-top: 80px;
        padding: 64px 24px 30px;
        gap: 24px;
    }

    .product-platform__diagram-top {
        top: -44px;
        padding: 12px 48px;
        gap: 6px;
    }

    .product-platform__diagram-top-title {
        font-size: 1.25rem;     /* 24 → 20 */
    }

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

    .product-platform__diagram-note {
        bottom: 20px;
        right: 24px;
    }
}

/* ── AI 아키텍처 다이어그램 — 768px 이하 ──────────────── */
@media (max-width: 768px) {
    /* AI 아키텍처 다이어그램 — 모바일
       top 알약이 좁은 화면에서 카드 폭을 거의 다 채우도록 좌우 마진 적용,
       각주는 absolute 해제하고 흐름도 아래 가운데에 흘려보냄 */
    .product-platform__diagram {
        margin-top: 56px;
        padding: 60px 16px 16px;
        gap: 16px;
    }

    .product-platform__diagram-top {
        /* viewport 좁아지면 알약 좌우가 카드 밖으로 삐져나오지 않도록 폭 제한 */
        top: -28px;
        left: 16px;
        right: 16px;
        transform: none;
        max-width: calc(100% - 32px);
        padding: 12px 20px;
        border-radius: 16px;
    }

    .product-platform__diagram-note {
        position: static;
        align-self: center;
        text-align: center;
    }
}