@charset "UTF-8";
/* ============================================================
   SURGINUS — 제품 페이지 반응형 전용
   시안은 PC 1920 만 있어 태블릿 이하 구성은 이 파일에서 정의한다.
   브레이크포인트: 1680 / 1300 / 1024 / 768 / 480
   ============================================================ */

/* ── ≤1680 : 1600 폭 블록을 화면에 맞춘다 ── */
@media (max-width: 1680px) {
    .phero .container,
    .smart__visual { width: calc(100% - 80px); }

    /* alert 는 데스크톱부터 시안 비율(%)로 잡혀 있어 여기서 손댈 게 없다 */
}

/* ── ≤1600 : alert 패널과 설명을 5:5 로 ── */
@media (max-width: 1600px) {
    /* 데스크톱 비율(패널 64.2%)을 유지한 채 설명만 넓히면 패널 바깥 공간(27.5%)을 넘어
       설명이 폰 목업 위로 올라탄다. 그래서 패널을 화면의 절반으로 줄여
       [패널 50% : 설명 50%] 로 나눈다 — 겹치지 않으면서 좌우가 같은 비중이 된다.
       설명은 자기 칸(50%) 안에서 좌우 여백(각 화면 4%)을 뺀 폭을 쓴다 = 패널 대비 84% */
    /* 데스크톱의 min-height(696)는 폭이 좁아질 때 오른쪽 설명이 패널 밖으로 넘치지 않게 둔 값인데,
       설명이 자기 칸(50%)으로 빠진 뒤로는 필요 없다. 그대로 두면 내용(차트 389)보다
       패널이 300px 가까이 높아 위쪽이 크게 빈다 — 시안 비율(1233:696)만 따르게 한다 */
    .alert__panel { width: 50%; min-height: 0; }
    .alert__txt { left: auto; right: -92%; width: 84%; }
}

/* ── ≤1300 : 본문 폭(1220) 유동 ── */
@media (max-width: 1300px) {
    .sec-lead--w877,
    .sec-lead--w958,
    .sec-lead--w1033 { width: calc(100% - 80px); }

    .phero__title { font-size: 48px; }

    .smart__txt { left: 11.8%; width: 30%; }
    .smart__sub { font-size: 28px; line-height: 34px; }
    .smart__desc { font-size: 18px; line-height: 27px; }

    .intervals__inner { width: 100%; }
    /* 차트를 흐름 배치로 되돌리면서 margin-top 으로 간격을 주면, 그 마진이 부모
       (.intervals__inner → .intervals__bg)와 상쇄돼 배경만 아래로 밀고 차트는 배경 맨 위에 붙는다.
       간격은 배경의 padding 으로 준다. 높이도 내용에 맞춰(auto) 아래 여백이 남지 않게 한다 */
    .intervals__bg { height: auto; padding: 87px 0; }
    .intervals__chart {
        position: relative;
        left: 0;
        top: 0;
        width: calc(100% - 80px);
        max-width: 1231px;
        margin: 0 auto;
    }

    .family__diagram { width: calc(100% - 80px); height: auto; }

    .notify__inner { width: calc(100% - 80px); }
    .notify__title { font-size: 48px; }
    /* 카드 대비 사이 간격 비율은 시안(430:71)을 유지한다 — 36% × 71/430 */
    /* report__imgs 와 같은 폭 제한 */
    .record__imgs { width: calc(100% - 80px); max-width: 932px; }
    .report__imgs { width: calc(100% - 80px); max-width: 932px; }

    .allinone .container { width: calc(100% - 80px); }
    .ai-cards { grid-template-columns: repeat(2, 1fr); gap: 3%; }
    .ai-card { height: auto; aspect-ratio: 588 / 594; }
    .ai-card__desc { width: auto; }

    .spec__card { width: calc(100% - 80px); }
    .spec__table { width: calc(100% - 120px); margin-left: 60px; }
    .spec__table td { white-space: normal; }
}

/* ── ≤1200 : alert — 차트와 설명을 위아래로 쌓는다 ──
 5:5 로 나눈 패널이 이 폭부터는 차트·폰 목업을 담기에 좁다.
 패널을 전체 폭으로 되돌리고 [차트 → 설명] 순서로 세로로 쌓는다 */
@media (max-width: 1200px) {
    .alert { padding-top: 110px; }
    .alert__panel {
        width: calc(100% - 40px);
        /* 데스크톱의 시안 비율·최소높이 고정을 풀고 내용 높이를 따르게 한다 */
        aspect-ratio: auto;
        min-height: 0;
        height: auto;
        margin: 40px auto 0;
        padding: 40px 0 46px;
        border-radius: 20px;
    }
    /* static 으로 두면 영상이 이 박스를 벗어나 패널 기준으로 튄다 (CSS.md §4-b) */
    .alert__chart { position: relative; left: auto; top: auto; bottom: auto; width: 92%; margin: 0 auto; }
    /* static 이어도 transform 은 살아 있어 데스크톱 중앙정렬이 따라온다 — 반드시 푼다 */
    .alert__txt { position: static; transform: none; right: auto; width: 92%; margin: 30px auto 0; }
    .alert__sub { font-size: 24px; line-height: 32px; }
    .alert__desc { margin-top: 16px; font-size: 16px; line-height: 25px; }
}

/* ── ≤1024 : 태블릿 ── */
@media (max-width: 1024px) {

    /* alert — 차트 안 요소를 한 열씩 쌓는다 (그래프 위 / 폰 목업 아래).
       폰은 데스크톱에서 그래프 위에 겹쳐 두는 절대배치였다 — 흐름으로 되돌린다 */
    .alert__chart { display: flex; flex-direction: column; align-items: center; gap: 20px; overflow: hidden; }
    /* chart-alert.png(1000×600)은 오른쪽 42%가 폰 자리로 비어 있고 위·아래에도 여백이 있다.
       한 열로 쌓으면 그 빈 곳이 그대로 드러나므로, 그래프 콘텐츠(578×397 @0,65)가
       한 행을 꽉 채우도록 키우고 넘치는 부분은 잘라낸다 (1000/578 = 173.01%) */
    /* align-items:center 면 넘치는 폭이 좌우로 나뉘어 그래프 왼쪽(축·라벨)이 잘린다 — 왼쪽에 붙인다 */
    .alert__chart img { align-self: flex-start; width: 173.01%; max-width: none; margin: -11.25% 0 -24.05% 0; }
    /* 크기는 .notify__phone 과 동일하게 (78% / 최대 380px) */
    .alert__phone { position: static; left: auto; top: auto; width: 78%; max-width: 380px; }
    .sec-title { font-size: 42px; }
    .sec-lead { font-size: 18px; line-height: 28px; }

    /* hero */
    .phero { height: 100vh; min-height: 620px; max-height: 1080px; }
    /* 타이틀을 히어로 세로 가운데로. transform 은 GSAP(js-m-hero 의 y 트윈)이 쓰는 자리라
       translateY(-50%) 로 잡으면 덮어써진다 — 컨테이너 flex 로 정렬한다 */
    .phero .container { display: flex; align-items: center; }
    .phero__title { position: static; top: auto; bottom: auto; font-size: 34px; }

    /* smart */
    .smart { padding-top: 100px; }
    .smart__title { font-size: 38px; }
    .smart__logo img { width: 240px; height: 50px; }
    .smart__line { margin-top: 28px; }
    .smart__visual { height: auto; aspect-ratio: 1600 / 730; margin-top: 40px; }
    .smart__txt { left: 6%; top: 8%; width: 42%; }
    .smart__sub { font-size: 22px; line-height: 28px; }
    .smart__desc { margin-top: 16px; font-size: 15px; line-height: 22px; }

    /* intervals */
    .intervals { padding-top: 110px; }
    .intervals__bg { height: auto; margin-top: 40px; padding: 60px 0; }


    /* notify — 폰 위, 텍스트 아래로 쌓는다 */
    .notify { padding-top: 110px; }
    .notify__inner { flex-direction: column; align-items: center; gap: 34px; width: calc(100% - 40px); }
    .notify__phone { width: 78%; max-width: 380px; }
    .notify__txt { width: 92%; }
    .notify__title { font-size: 42px; }
    .notify__desc { margin-top: 16px; font-size: 16px; line-height: 25px; }

    /* family / record / report */
    .family { padding-top: 110px; }
    .record { padding-top: 110px; }
    /* 좁아지면 세로로 쌓고 화살표는 아래를 가리키도록 돌린다 */
    .record__imgs { flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; margin-top: 46px; }
    .record__card { width: 78%; max-width: 430px; }
    .record__arrow { width: 44px; transform: rotate(90deg); }
    .report { padding-top: 110px; }
    /* record__imgs 와 동일한 적층 규칙 — 세로로 쌓고 화살표는 아래를 가리킨다 */
    .report__imgs { flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; margin-top: 46px; }
    .report__phone { width: 78%; max-width: 430px; }
    /* 데스크톱의 -13px 보정은 가로 배치용이라 여기선 푼다 */
    .report__arrow { top: auto; width: 44px; transform: rotate(90deg); }

    /* all-in-one */
    .allinone { padding-top: 110px; }
    .allinone__title { font-size: 38px; line-height: 46px; }
    .allinone__lead { font-size: 17px; line-height: 26px; }
    .ai-cards { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
    .ai-card { max-width: 588px; margin: 0 auto; width: 100%; }
    .ai-card__txt { padding: 40px 40px 0; }
    .ai-card__head { white-space: normal; }
    .ai-card__no { font-size: 26px; }
    .ai-card__title--sm,
    .ai-card__title--lg { font-size: 24px; }
    .ai-card__desc { font-size: 16px; line-height: 25px; }

    /* specifications */
    .spec { margin-top: 110px; padding: 100px 0 100px; }
    .spec__title { font-size: 42px; }
    .spec__card { min-height: 0; margin-top: 50px; padding: 50px 0; }
    .spec__table { width: calc(100% - 80px); margin-left: 40px; }
    .spec__table th { width: 40%; }
    .spec__views { margin-top: 60px; }
    .spec__stores { justify-content: center; margin-top: 40px; padding-right: 0; }
    .spec__mm, .spec__label { font-size: 14px; }
}

/* ── ≤768 : 모바일 ── */
@media (max-width: 768px) {
    .sec-title { font-size: 28px; }
    .sec-lead { font-size: 15px; line-height: 24px; }
    .sec-lead--w877,
    .sec-lead--w958,
    .sec-lead--w1033 { width: calc(100% - 40px); }

    .phero .container,
    .smart__visual { width: calc(100% - 40px); }
    /* 세로 가운데 정렬은 ≤1024 규칙을 그대로 물려받는다 (글자 크기만 줄인다) */
    .phero__title { font-size: 24px; }

    .smart { padding-top: 70px; }
    .smart__title { font-size: 26px; }
    .smart__logo img { width: 170px; height: 35px; }
    .smart__line { margin-top: 20px; height: 36px; }
    .smart__line img { height: 36px; }
    /* 사진 위 텍스트가 인물과 겹쳐 읽기 어려워 아래로 내린다 */
    .smart__visual { aspect-ratio: auto; height: auto; }
    .smart__photo { height: 320px; object-position: 20% center; }
    .smart__txt { position: static; width: 100%; margin-top: 22px; }
    .smart__sub { font-size: 19px; line-height: 26px; }
    .smart__desc { margin-top: 12px; font-size: 14px; line-height: 21px; }

    .intervals { padding-top: 70px; }
    /* 이 섹션의 리드는 폭 제한 클래스(sec-lead--wNNN)가 없어 문구가 화면 끝에 붙는다 */
    .intervals h2,
    .intervals p { padding-left: 20px; padding-right: 20px; }
    .intervals__chart { width: calc(100% - 40px); }

    .alert { padding-top: 70px; }
    /* 섹션 제목·리드만 — 패널 안 .alert__desc 까지 잡으면 .alert__sub 와 좌측 정렬이 어긋난다 */
    .alert > h2,
    .alert > p { padding-left: 20px; padding-right: 20px; }
    .alert__panel { width: calc(100% - 40px); margin-top: 28px; padding: 28px 0 32px; }
    .alert__chart { width: 90%; }
    .alert__txt { width: 90%; margin-top: 22px; }
    /* notify__phone 과 동일하게 이 폭부터는 칸을 꽉 채운다 (max-width 380 은 ≤1024 규칙 유지) */
    .alert__phone { width: 100%; }
    .alert__sub { font-size: 19px; line-height: 26px; }
    .alert__desc { font-size: 14px; line-height: 22px; }

    .notify { padding-top: 70px; }
    .notify__inner { gap: 24px; }
    .notify__phone { width: 100%; }
    .notify__txt { width: 100%; }
    .notify__title { font-size: 28px; }
    .notify__desc { font-size: 14px; line-height: 22px; }

    .family { padding-top: 70px; }
    .family__diagram { width: calc(100% - 40px); margin-top: 28px; }
    .record { padding-top: 70px; }
    .record__imgs { width: calc(100% - 40px); margin-top: 30px; padding-left: 20px; padding-right: 20px; }
    .record__card { width: 100%; }
    .record__arrow { width: 36px; }
    .report { padding-top: 70px; }
    .report__imgs { width: calc(100% - 40px); margin-top: 30px; padding-left: 20px; padding-right: 20px; }
    .report__phone { width: 100%; }
    .report__arrow { width: 36px; }

    .allinone { padding-top: 70px; }
    .allinone .container { width: calc(100% - 40px); }
    .allinone__title { font-size: 26px; line-height: 34px; }
    .allinone__lead { margin-top: 14px; font-size: 15px; line-height: 24px; }
    .ai-cards { margin-top: 28px; gap: 18px; }
    .ai-card__txt { padding: 28px 24px 0; }
    .ai-card__no { font-size: 22px; }
    .ai-card__title--sm,
    .ai-card__title--lg { font-size: 19px; }
    .ai-card__desc { margin-top: 8px; font-size: 14px; line-height: 22px; }

    .spec { margin-top: 70px; padding: 70px 0; }
    .spec__title { font-size: 28px; }
    .spec__card { width: calc(100% - 40px); margin-top: 32px; padding: 30px 0; }
    /* 좁은 폭에서는 항목명과 값을 위아래로 */
    .spec__table { width: calc(100% - 40px); margin-left: 20px; }
    .spec__table tr { display: block; padding: 12px 0; border-bottom: 1px solid #e6e6e6; }
    .spec__table th,
    .spec__table td { display: block; width: auto; height: auto; border: 0; }
    .spec__table th { font-size: 14px; }
    .spec__table td { margin-top: 4px; font-size: 14px; }
    .spec__views { margin-top: 36px; }
    .spec__stores { margin-top: 28px; gap: 8px; }
    .spec__store { height: 60px; }
    .spec__mm, .spec__label { font-size: 11px; }
}

/* ── ≤480 : 소형 모바일 ── */
@media (max-width: 480px) {
    .phero__title { font-size: 20px; }
    .smart__title { font-size: 22px; }
    .sec-title { font-size: 23px; }
    .notify__title { font-size: 23px; }
    .allinone__title { font-size: 23px; line-height: 30px; }
    .spec__title { font-size: 24px; }
    .spec__mm, .spec__label { font-size: 9px; }
    .spec__store { height: 52px; }

    /* 카드 폭이 이만큼 줄면 글자는 그만큼 안 줄어 본문이 폰 목업 위로 겹친다
       (목업은 이미지 세로 41.4% 지점에서 시작 — 480px 에서 본문 끝이 이미 38.8%).
       이 폭부터는 겹치기를 풀고 [텍스트 → 이미지] 세로 적층으로 바꾼다.
       카드 배경(#f5f6f8)이 이미지 상단 평면색과 같아 이어 붙여도 경계가 안 보이고,
       이미지가 물고 있는 라운드 코너(반경 4.5%)는 위쪽만 잘라 카드 라운드가 대신 만든다.
       마크업이 [img → txt] 순이라 order 로 자리를 바꾼다 */
    .ai-card {
        display: flex;
        flex-direction: column;
        height: auto;
        aspect-ratio: auto;
        background: #f5f6f8;
        border-radius: 24px;
        overflow: hidden;
    }
    .ai-card__txt { order: 0; position: relative; padding-bottom: 4px; }
    .ai-card__bg {
        order: 1;
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        margin-top: 14px;
        /* 원본 위쪽 36%는 빈 배경(+라운드 코너)이라 잘라내고 폰만 보여준다 —
           그래야 텍스트와 목업 사이가 벌어지지 않는다 */
        aspect-ratio: 588 / 380;
        object-fit: cover;
        object-position: bottom;
    }
}