@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__panel { width: 68%; }
    .alert__txt { left: auto; right: -30.5%; width: 25.8%; }
    .alert__chart { left: 12.9%; width: 84.3%; }
}

/* ── ≤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%; }
    .intervals__chart {
        position: relative;
        left: 0;
        top: 0;
        width: calc(100% - 80px);
        max-width: 1231px;
        margin: 87px auto 0;
    }

    .family__diagram { width: calc(100% - 80px); height: auto; }
    /* 카드 대비 사이 간격 비율은 시안(430:71)을 유지한다 — 36% × 71/430 */
    .record__imgs { gap: 5.94%; }
    /* 430px(시안 크기)을 넘지 않게 막는다 — 안 막으면 1300px 폭에서 데스크톱보다 커진다 */
    .record__imgs img,
    .record__imgs video { width: 36%; max-width: 430px; height: auto; }
    .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; }
}

/* ── ≤1024 : 태블릿 ── */
@media (max-width: 1024px) {
    .sec-title { font-size: 42px; }
    .sec-lead { font-size: 18px; line-height: 28px; }

    /* hero */
    .phero { height: 100vh; min-height: 620px; max-height: 1080px; }
    .phero__title { top: auto; bottom: 120px; 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-bottom: 60px; }
    .intervals__chart { margin-top: 60px; }

    /* alert — 차트와 설명을 위아래로 쌓는다 */
    .alert { padding-top: 110px; }
    .alert__panel {
        width: calc(100% - 40px);
        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; width: 92%; margin: 0 auto; }
    .alert__txt { position: static; 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; }

    /* family / record / report */
    .family { padding-top: 110px; }
    .record { padding-top: 110px; }
    .record__imgs { flex-direction: column; align-items: center; gap: 24px; margin-top: 46px; }
    .record__imgs img,
    .record__imgs video { width: 78%; max-width: 430px; }
    .report { padding-top: 110px; }
    .report__imgs { margin-top: 40px; }

    /* 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__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); }
    .phero__title { bottom: 80px; 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; }
    .intervals__bg { margin-top: 28px; padding-bottom: 40px; }
    .intervals__chart { width: calc(100% - 40px); margin-top: 40px; }

    .alert { padding-top: 70px; }
    .alert__panel { width: calc(100% - 40px); margin-top: 28px; padding: 28px 0 32px; }
    .alert__chart { width: 90%; }
    .alert__txt { width: 90%; margin-top: 22px; }
    .alert__sub { font-size: 19px; line-height: 26px; }
    .alert__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 { margin-top: 30px; }
    .record__imgs img,
    .record__imgs video { width: 100%; }
    .report { padding-top: 70px; }
    .report__imgs { width: calc(100% - 40px); margin-top: 28px; }

    .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__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; }
    .allinone__title { font-size: 23px; line-height: 30px; }
    .spec__title { font-size: 24px; }
    .spec__mm, .spec__label { font-size: 9px; }
}