/* ============================================================
   weromy-philosophy — 위로미 철학 페이지 전용 스타일
   ============================================================ */

/* ── 철학 인트로 핀 섹션 ──────────────────────────────────
   ▸ 흰 배경 위 텍스트가 고정되어 있고, 그 170px 아래에 1440px 폭의
     이미지가 놓인다.
   ▸ 스크롤하면 이미지가 가로 100%(뷰포트 전체 폭)까지 커지면서
     위로 올라와 텍스트 밑(뒤)으로 들어간다. 텍스트는 그대로 멈춤.
   ▸ section 높이로 스크롤 거리를 확보하고 __sticky 가 100vh 로 핀.
   ▸ 확대/이동 값은 JS 가 레이아웃을 측정해 CSS 변수로 주입:
       --img-w   : 현재 이미지 폭(px)
       --img-top : sticky 상단 기준 이미지 top(px)
       --p       : 진행도(0~1) — border-radius 보간에 사용
   ───────────────────────────────────────────────────────── */
.section {
    padding: 6vw 0;
    overflow: hidden;
}

.philosophy-hero {
    --p: 0;
    position: relative;
    height: 200vh;            /* 앞 100vh: 이미지 확대(핀) → 뒤: 배경 스크롤 아웃 */
    background-color: #ffffff;
}

/* 이미지 스테이지 — top:0 으로 100vh 핀. 확대가 끝나면 위로 스크롤 아웃. */
.philosophy-hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

/* 글자 — 핀 스테이지(__sticky) 안에서 절대배치. 세로 위치는 JS 가 --text-top 으로
   상단(시작) → 섹션 정중앙(이미지가 완전히 덮인 시점)으로 보간해 내려준다. */
.philosophy-hero__text {
    position: absolute;
    top: var(--text-top, 25vh);
    left: 0;
    right: 0;
    text-align: center;
    color: var(--color-text);
    z-index: 2;               /* 이미지 위 */
    pointer-events: none;
    will-change: top;
}

.philosophy-hero__title {
    margin: 0;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -3px;
}

/* 진입 애니메이션 — 제목을 줄 단위로 감싼다.
   __line : 마스크(overflow:hidden). __line-inner : 아래(110%)에서 위로 올라오며 fade-in.
   줄별 지연(--d)은 HTML 인라인으로 주입해 한 줄씩 순차로 뜨게 한다.
   PC/모바일 줄바꿈이 달라 --pc / --mo 두 벌을 두고 브레이크포인트로 토글. */
.philosophy-hero__line {
    display: block;
    overflow: hidden;
}

.philosophy-hero__line--mo {
    display: none;          /* 기본(PC): 모바일용 줄 숨김 */
}

.philosophy-hero__line-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform .85s cubic-bezier(.22, 1, .36, 1) var(--d, 0s),
                opacity .85s ease var(--d, 0s);
    will-change: transform;
}

.philosophy-hero.is-in .philosophy-hero__line-inner {
    transform: translateY(0);
    opacity: 1;
}

/* 흰색 복제본 — 기본 글자 위에 정확히 겹쳐 놓고, 이미지가 덮은 영역만
   clip-path 로 노출(아래→위로 차오름). top/bottom 경계는 JS 가 px 로 주입.
   기본값(top:9999px)은 아무것도 안 보이게 → 이미지가 겹치기 전엔 어두운 글자만. */
.philosophy-hero__title--fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    clip-path: inset(var(--fill-top, 9999px) 0 var(--fill-bottom, 0px) 0);
}

/* 이미지 박스 = 클리핑 창. 폭/높이/위치는 JS 가 주입(시작: 텍스트 아래 밴드 →
   끝: 100vw × 100vh). 안의 img 는 항상 최종 풀스크린 크기로 고정돼 있어,
   박스가 작을 땐 중앙 일부만 보이고 넓어질수록 가려졌던 양옆/상하가 드러난다. */
.philosophy-hero__visual {
    position: absolute;
    left: 50%;
    top: var(--img-top, 340px);
    transform: translateX(-50%) translateY(48px);
    width: var(--img-w, min(1440px, 100%));
    height: var(--img-h, min(720px, 50vw));
    z-index: 1;
    overflow: hidden;
    border-radius: calc(24px * (1 - var(--p)));
    opacity: 0;                 /* 진입 fade-up 시작값 — 글자 다음에 늦게(.45s) 뜬다 */
    transition: opacity .9s ease .45s,
                transform .9s cubic-bezier(.22, 1, .36, 1) .45s;
    will-change: width, height, top;
}

/* 진입 후: 제자리 + 노출 (이후 스크롤 확대는 JS 가 width/height/top 만 갱신) */
.philosophy-hero.is-in .philosophy-hero__visual {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* img 는 박스가 아니라 뷰포트 기준 최종 크기(100vw × 100vh)로 고정 + 중앙 배치.
   → 박스 크기와 무관하게 픽셀 스케일이 일정(축소 안 됨), 박스는 창처럼 잘라 보여줄 뿐. */
.philosophy-hero__visual img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.philosophy-hero.is-reduced {
    height: auto;
    padding-bottom: 6vh;
}

.philosophy-hero.is-reduced .philosophy-hero__sticky {
    position: static;
    height: auto;
    padding: 14vh 0 6vh;
}

.philosophy-hero.is-reduced .philosophy-hero__text {
    position: static;
    transform: none;
    margin-bottom: 40px;
}

.philosophy-hero.is-reduced .philosophy-hero__visual {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    border-radius: 0;
    margin: 0 auto;
    opacity: 1;                 /* 진입 fade 생략 — 바로 노출 */
    transition: none;
}

.philosophy-hero.is-reduced .philosophy-hero__visual img {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
}

/* 진입 애니메이션 생략 — 줄을 바로 보이게 */
.philosophy-hero.is-reduced .philosophy-hero__line-inner {
    transform: none;
    opacity: 1;
    transition: none;
}

/* ── 철학 인트로(Leading AI / Reading Mind) ──────────────────
   스크롤 진행도에 맞춰 제목이 좌→우로 #262626 로 칠해진다.
   글자 한 벌에 background-clip:text + 하드 스톱 그라데이션을 입혀,
   --frac 지점에서 진한색/연회색이 칼같이 갈린다(트랜지션 없이 스크롤에 직결).
   글자가 한 벌이라 g·y 디센더까지 어긋남 없이 정확히 칠해진다. */
.philosophy-intro__title {
    text-align: center;
    font-family: "Poppins";
    font-size: 7rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* 줄 너비를 글자 폭에 맞추고(margin auto 로 가운데 정렬) 그라데이션을 그 폭에 매핑.
   → --frac(0~1)이 글자 영역 좌→우에 정확히 대응. */
.philosophy-intro__title-line {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    /* g·y 디센더가 배경 박스(=칠 영역) 안에 들어오도록 아래를 키우고,
       늘어난 높이만큼 음수 margin 으로 줄 간격을 보정한다. */
    padding-bottom: .18em;
    margin: 0 auto -.12em;
    background-image: linear-gradient(90deg,
            #262626 0,
            #262626 calc(var(--frac, 0) * 100%),
            #EDEDED calc(var(--frac, 0) * 100%),
            #EDEDED 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.philosophy-intro__desc {
    margin-top: 72px;
    text-align: center;
    font-size: 1.6rem;
}

.philosophy-intro__desc p:last-child {
    font-weight: 700;
}

.line-divider {
    margin: 0 auto;
    width: 1px;
    height: 140px;
    background-color: #d9d9d9;
}

/* ── 위로미 탄생배경 ────────────────────────────────────── */
.philosophy-origin {
    background: linear-gradient(180deg, #FFF 0%, #FFF0E8 100%);
}

.philosophy-origin .inner {
    display: flex;
    justify-content: space-between;
}

.philosophy-origin__title {
    flex-shrink: 0;
}

.philosophy-origin__body {
    max-width: 872px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.philosophy-origin__body .philosophy-origin__text--quote {
    color: var(--color-text);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -2px;
}

/* ── 핵심 가치 ────────────────────────────────────────────── */
.philosophy-value .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 72px;
}

/* 카드 — 제품소개(데스크/위로미) 페이지의 product-platform__cards 와 동일.
   이 페이지는 products.css 를 로드하지 않으므로 동일 규칙을 .philosophy-value 로 스코프해 복제.
   (세로 간격은 .inner 의 flex gap 이 담당 → margin-top 은 제거) */
.philosophy-value .product-platform__cards {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 448px);
    justify-content: center;
    gap: 48px;
}

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

.philosophy-value .product-platform__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    /* AOS 가 카드에 inline 으로 남긴 transition-delay(data-aos-delay 200/300/400)·duration 이
       hover 전환에까지 끌려와 반응이 느려진다. hover 상태만 지연 0·0.25s 로 고정(inline 을 이기려 !important).
       진입 fade-up stagger 는 평상시(base) 상태라 그대로 유지된다. */
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    transition-delay: 0s !important;
}

.philosophy-value .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%);
}

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

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

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

/* ── 메시지 섹션(배경 비주얼 + 중앙 텍스트) ──────────────────
   배경 동영상이 흐름에 남아 섹션 높이를 정하고(기준), 텍스트는 그 위에
   absolute 로 정중앙에 얹는다. */
.philosophy-message {
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* 배경 = 기준. 높이를 840px 로 캡한 박스에 동영상을 cover 로 채워
   가로는 100% 그대로, 세로(위아래)는 중앙 기준으로 잘리게 한다. */
.background-visual {
    overflow: hidden;
    height: 840px;
}

.background-visual video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 중앙 텍스트 — 배경 위에 absolute 로 정중앙 배치 */
.philosophy-message__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
    z-index: 1;
}

.philosophy-message__text .section-heading__title {
    color: #ffffff;
}

.philosophy-message__text .text-desc {
    font-size: 1.5rem;
    margin-top: 32px;
    color: #ffffff;
}

/* 진입 fade-up — 컨테이너는 translate(-50%,-50%) 중앙정렬이라 건드리지 않고,
   자식(타이틀/설명)에 각각 translateY fade 를 줘 AOS transform 충돌을 피한다.
   섹션이 뷰포트에 들어오면 JS 가 .is-in 을 붙여 발동. 설명은 타이틀보다 늦게(.2s). */
.philosophy-message__text .section-heading__title,
.philosophy-message__text .text-desc {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}

.philosophy-message__text .text-desc {
    transition-delay: .2s;
}

.philosophy-message.is-in .philosophy-message__text .section-heading__title,
.philosophy-message.is-in .philosophy-message__text .text-desc {
    opacity: 1;
    transform: translateY(0);
}

/* 모션 최소화 — 진입 애니메이션 생략(바로 노출) */
@media (prefers-reduced-motion: reduce) {
    .philosophy-message__text .section-heading__title,
    .philosophy-message__text .text-desc {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── 반응형 ─────────────────────────────────────────────── */
/* 노트북 / 서브데스크탑 — 제목만 한 단계 축소(핀·여백 로직은 vh/vw 기반이라 그대로) */
@media (max-width: 1440px) {
    .philosophy-hero__title {
        font-size: 3.25rem;
        letter-spacing: -2px;
    }

    .philosophy-intro__title {
        font-size: 5.5rem;
    }

    /* 메시지 배경 — 폭이 줄면 840px 박스가 과하게 높아 보임.
       높이를 폭(vw)에 비례시켜(상한 840) 세로 위아래가 적당히 잘리게 유지. */
    .background-visual {
        height: 50vh;
    }

    /* 핵심 가치 카드 — 제품소개 페이지와 동일하게 1fr 적응 */
    .philosophy-value .product-platform__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

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

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

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

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

    .philosophy-value .product-platform__card-desc {
        font-size: 1rem;
    }
}

/* 모바일 — root font-size 가 12px 로 떨어지므로 rem 이 함께 축소됨.
   제목 크기/자간을 모바일에 맞게 다시 잡고, 글자 고정 위치를 위로 올린다. */
@media (max-width: 768px) {
    .section {
        padding: 56px 0;
    }
    
    .philosophy-hero__text {
        /* JS 가 --text-top 으로 상단 → 정중앙 보간(모바일 시작값 20vh). 정적 top 으로 덮지 말 것. */
        top: var(--text-top, 20vh);
        padding: 0;
    }

    .philosophy-hero__title {
        padding: 0 20px;
        text-align: left;
        line-height: 1.3;
        letter-spacing: -1px;
    }

    /* 줄바꿈 토글 — 모바일은 3줄(--mo) 사용 */
    .philosophy-hero__line--pc {
        display: none;
    }

    .philosophy-hero__line--mo {
        display: block;
    }

    /* 줄이 한 줄 더 많으니 이미지 등장은 조금 더 뒤로 */
    .philosophy-hero__visual {
        transition-delay: .6s;
        border-radius: calc(8px * (1 - var(--p)));
    }

    /* 철학 인트로 — 제목 폭이 화면을 넘지 않게 축소, 본문/여백 모바일 정리 */
    .philosophy-intro {
        padding: 18vw 0;
    }

    .philosophy-intro__title {
        font-size: 3.6rem;
        line-height: 1.15;
    }

    .philosophy-intro__desc {
        margin-top: 32px;
        font-size: 1.4rem;
        line-height: 1.8;
        word-break: keep-all;
    }

    .philosophy-intro__desc p {
        display: inline;
    }

    /* 탄생배경 — 2단(제목/본문) 가로 배치를 세로로 쌓고 본문 폭/간격 정리 */
    .philosophy-origin .inner {
        flex-direction: column;
        gap: 28px;
    }

    .philosophy-origin__body {
        max-width: 100%;
        gap: 20px;
        word-break: keep-all;
    }

    .philosophy-origin__body .philosophy-origin__text--quote {
        font-size: 1.7rem;
        letter-spacing: -1px;
    }

    /* 핵심 가치 — 섹션 내부 간격 축소 + 카드 1열(아이콘 좌 / 텍스트 우) */
    .philosophy-value .inner {
        gap: 40px;
    }

    .philosophy-value .product-platform__cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .philosophy-value .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;
    }

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

    .philosophy-value .product-platform__card-icon img,
    .philosophy-value .product-platform__card-icon svg {
        width: 24px;
        height: 24px;
    }

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

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

    .philosophy-message__text {
        padding: 0 24px;
    }

    .philosophy-message__text .text-desc {
        font-size: 1.3rem;
        word-break: keep-all;
    }
}

/* ── 모션 최소화 / JS 미동작 폴백 ──────────────────────────
   reduced-motion 이면 핀/확대 없이 텍스트 + 이미지를 정적으로 둔다. */
@media (prefers-reduced-motion: reduce) {
    .philosophy-hero {
        height: auto;
        padding-bottom: 6vh;
    }

    .philosophy-hero__sticky {
        position: static;
        height: auto;
        padding: 14vh 0 6vh;
    }

    .philosophy-hero__text {
        position: static;
        transform: none;
        margin-bottom: 40px;
    }

    .philosophy-hero__visual {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        border-radius: 0;
        margin: 0 auto;
        opacity: 1;
        transition: none;
    }

    .philosophy-hero__visual img {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
    }

    .philosophy-hero__line-inner {
        transform: none;
        opacity: 1;
        transition: none;
    }
}