/* ============================================================
   핵심기술(03-core-technology.html) 전용 스타일
   ▸ 공통 .sub-hero 패턴 위에 페이지 고유 섹션만 추가.
   ============================================================ */

/* 히어로 헤더 바로 아래, 72px 간격을 두고 대표 이미지 배치.
   .sub-hero__head 기본 하단 padding(6vw)을 제거해 간격을 72px 로 고정. */

.sub-hero {
    padding: 6vw 0;
    /* 좁은 화면에서도 고정 헤더(100/64px) 아래로 파고들지 않도록 상단 최소 120px 보장 */
    padding-top: max(6vw, 120px);
}

.sub-hero__head {
    padding-bottom: 0;
}

.tech-main {
    margin-top: 72px;
}

/* ============================================================
   핵심기술 스크롤 스테이지 (.tech-flow)
   ▸ .tech-flow 는 100vh 고정 패널. 스크롤 길이와 무관하게
     "스크롤 제스처 1회 = 1단계" 로 03-core-technology.js 가 휠/스와이프를 가로채 전환.
   ▸ 해당 인덱스의 타이틀(head)과 포인트 이미지(point)만 .is-active 로 노출.
     back 이미지는 고정.
   ============================================================ */
.tech-flow {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* .inner 를 기준(relative)으로 인디케이터를 왼쪽 끝에 붙임.
   .tech-flow 가 flex column + align-items:center 라 inner 가 콘텐츠(1200 스테이지)
   폭으로 줄어듦 → width:100% 로 max-width(1440)까지 펴서 인디케이터가 1440 좌측 끝에 붙게 함. */
.tech-flow .inner {
    position: relative;
    width: 100%;
}

/* 단계 인디케이터 — inner 왼쪽에 딱 붙여 세로로 나열. active 는 주황 알약 */
.tech-flow__indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tech-flow__indicator li {
    width: 10px;
    height: 10px;
    background: #D9D9D9;
    border-radius: 50%;
    transition: width .4s ease, height .4s ease, background-color .4s ease, border-radius .4s ease;
}

.tech-flow__indicator li.is-active {
    height: 50px;
    border-radius: 10px;
    background: #FF8C49;
}

/* 타이틀 — 5개를 같은 그리드 셀에 겹쳐 배치(가장 큰 것 기준 높이 자동).
   active 만 페이드로 노출 — 텍스트 길이/줄바꿈이 달라도 레이아웃 안 밀리고,
   고정 높이가 없어 모바일에서 줄 수가 늘어도 잘리지 않음. */
.tech-flow__heads {
    display: grid;
    justify-items: center;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 40px;
}

.tech-flow__head {
    grid-area: 1 / 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.tech-flow__head.is-active {
    opacity: 1;
}

.tech-flow__title {
    color: #262626;
    font-size: 2rem; /* 32px — Head3/Medium */
    font-weight: 500;
    line-height: 3rem; /* 48px / 150% */
    letter-spacing: -2px;
}

/* 스테이지 — 고정 back 이미지 + 절대배치 point 오버레이.
   inner(1440) 안에서 좌우 auto 마진으로 중앙 정렬 (블록이라 자동 중앙 아님) */
.tech-flow__stage {
    position: relative;
    width: min(1180px, 92vw);
    margin: 0 auto;
    aspect-ratio: 1770 / 840;
}

.tech-flow__back {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tech-flow__point {
    position: absolute;
    height: auto;
    opacity: 0;
    transition: opacity .5s ease;
    filter: drop-shadow(0 12px 32px rgba(60, 70, 120, 0.18));
    pointer-events: none;
}

.tech-flow__point.is-active {
    opacity: 1;
}

/* 포인트별 위치/크기 — back 컨테이너 기준 % (디자인 대비 미세조정 지점) */
.tech-flow__point--1 { left: -4%;  bottom: 3%;  width: 35%; }
.tech-flow__point--2 { left: 33%;  top: -3%;  width: 47%; }
.tech-flow__point--3 { left: 32%;  bottom: 3%;  width: 47%; }
.tech-flow__point--4 { right: -3%;  top: 4%;   width: 35%; }
.tech-flow__point--5 { right: -3%;  top: 12%;  width: 35%; }

.tech-main__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   실증/임상 증명 (.proof) — 중앙 타이틀 + 3행(텍스트 | 차트·인증서)
   ▸ 막대 차트는 라이브러리 없이 CSS 로 구현(막대=height %, 그리드=배경 반복 그라데이션).
   ▸ 인증서(3행)는 스캔 문서라 이미지.
   ============================================================ */
.proof {
    padding: 120px 0;
    background: #FBF5F2;
}

.proof__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 80px;
    text-align: center;
}

.proof__title {
    font-size: 3rem; /* 48px */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -2px;
}

.proof__subtitle {
    color: var(--color-muted);
    font-size: 1.25rem;
}

.proof__row {
    /* 좌: 남는 폭 / 우: 최소 708px, gap 없이 양쪽 끝 정렬 */
    display: grid;
    grid-template-columns: 1fr 708px;
    align-items: center;
    gap: 0;
    padding: 50px 0;
}

.proof__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.proof__row-title {
    color: #262626;
    font-size: 2rem; /* 32px — Head3/Medium */
    font-weight: 500;
    line-height: 3rem; /* 48px / 150% */
    letter-spacing: -2px;
}

.proof__desc {
    line-height: 1.7;
}

.proof__tag {
    padding: 12px 18px;
    background: #F5EFEC;
    color: #787878;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
}

/* ── 차트 카드 ─────────────────────────────────────────── */
.proof-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #D4D4D4;
}

.proof-card__title {
    margin-bottom: 36px;
    text-align: center;
    color: #262626;
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    line-height: 1.5rem; /* 24px / 100% */
    letter-spacing: -1px;
}

.proof-chart {
    display: flex;
    justify-content: center;
    gap: 48px;
}

/* 각 플롯: [y축 | 막대영역] / [x라벨] */
.proof-chart__plot {
    --plot-h: 240px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--plot-h) auto;
    column-gap: 12px;
}

.proof-chart__plot--wide {
    width: 100%;
}

.proof-chart__yaxis {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    color: #B4B4B4;
    font-size: 0.8125rem; /* 13px */
    line-height: 1;
}

.proof-chart__bars {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    /* 확정 높이 — 자식 막대의 height:% 가 이 높이 기준으로 해석되게 (grid stretch 만으론 불안정) */
    height: var(--plot-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
    border-bottom: 1px solid #d9d9d9;
}

/* 수평 그리드선 — 막대 위(앞)에 그려지도록 오버레이(::after, 마지막 자식이라 위에 페인트) */
.proof-chart__bars::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to top, #E5E5E5 0 1px, transparent 1px var(--grid, 20%));
    pointer-events: none;
}

.proof-chart--turing .proof-chart__bars {
    justify-content: space-around;
}

.proof-chart__pair {
    height: 100%;   /* 막대영역 높이 상속 → 자식 막대 height:% 기준 확정 */
    display: flex;
    align-items: flex-end;
    gap: 50px;
}

/* 막대 색은 ::before 로 그림 — 컨테이너는 최종 높이 유지, ::before 만 scaleY 로 성장
   (percentage height 는 transition 이 불안정해서 transform 사용) */
.proof-chart__bar {
    position: relative;
    width: 56px;
}

.proof-chart__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #F1F1F1;
}

.proof-chart__bar--accent::before {
    background: var(--color-primary);
}

/* turing: 높이 = --h. 스크롤 진입(.is-grow) 시 아래에서 위로 자라남 + 라벨 페이드인.
   .is-grow 는 03-core-technology.js 가 부여 */
.proof-chart--turing .proof-chart__bar {
    height: var(--h);
}

.proof-chart--turing .proof-chart__bar::before {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1);
}

.proof-chart--turing.is-grow .proof-chart__bar::before {
    transform: scaleY(1);
}

.proof-chart--turing .proof-chart__cap {
    opacity: 0;
    transition: opacity .5s ease .45s;
}

.proof-chart--turing.is-grow .proof-chart__cap {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .proof-chart--turing .proof-chart__bar::before {
        transform: none;
        transition: none;
    }

    .proof-chart--turing .proof-chart__cap {
        opacity: 1;
        transition: none;
    }
}

/* 막대 위 값 라벨 */
.proof-chart__cap {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: #B4B4B4;
}

.proof-chart__cap--accent {
    color: var(--color-primary);
}

.proof-chart__xrow {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
}

.proof-chart__xlabel {
    text-align: center;
    color: var(--color-text);
    font-size: 1.125rem; /* 18px */
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.proof-chart__badge {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 20px;
    background: linear-gradient(90deg, #82D95A 0%, #00BC90 100%);
    color: #fff;
    font-weight: 500;
}

/* ── 1행 그래프 이미지 (카드 배경 포함된 export) ───────── */
.proof__graph {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 인증서 2종 ────────────────────────────────────────── */
.proof__visual--certs {
    display: flex;
    justify-content: center;
    gap: 52px;
}

.proof__cert {
    width: calc(50% - 26px);
    height: auto;
}

/* ── 반응형 (공통: 1440 / 768 breakpoint) ───────────────── */
@media (max-width: 1440px) {
    .tech-flow__title {
        font-size: 1.75rem; /* 28px */
        line-height: 2.625rem; /* 42px */
    }

    .tech-flow__heads {
        margin-bottom: 32px;
        margin-top: 0;
    }

    .proof__title {
        font-size: 2.5rem; /* 40px */
    }

    /* 1440 이하: 2단이 눌려 안 예쁘므로 세로 스택 (텍스트 위 / 시각 아래) */
    .proof {
        padding: 100px 0;
    }

    .proof__head {
        margin-bottom: 56px;
    }

    .proof__row {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px 0;
    }

    .proof__visual {
        width: 100%;
        max-width: 708px;
    }

    .proof-card {
        padding: 32px 28px;
    }

    .proof-chart {
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .sub-hero__desc {
        text-align: center;
    }

    .tech-main {
        margin-top: 40px;
    }

    /* 타이틀은 rem 기반이라 루트 폰트(12px)에 맞춰 자동 축소 — 자간만 완화 */
    .tech-flow__title {
        letter-spacing: -1px;
    }

    .tech-flow__heads {
        margin-bottom: 24px;
    }

    .tech-flow__head {
        gap: 10px;
    }

    .tech-flow__stage {
        width: 92vw;
    }

    /* 좁은 화면에선 그림자 축소 */
    .tech-flow__point {
        filter: drop-shadow(0 6px 16px rgba(60, 70, 120, 0.18));
    }

    /* 인디케이터 — 모바일에선 inner 아래로 내려 가로로 나열, active 는 가로 알약 */
    .tech-flow__indicator {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        margin-top: 24px;
        flex-direction: row;
    }

    .tech-flow__indicator li.is-active {
        width: 50px;
        height: 10px;
    }

    /* 실증 증명 — 모바일: 행을 세로로 쌓고(텍스트 위 / 시각 아래) 간격 축소 */
    .proof {
        padding: 64px 0;
    }

    .proof__head {
        margin-bottom: 48px;
    }

    .proof__row {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 0;
    }

    .proof__text {
        gap: 16px;
    }

    .proof-chart__plot {
        --plot-h: 180px;
    }

    .proof-chart__bar {
        width: 40px;
    }

    .proof-chart__pair {
        gap: 10px;
    }
}