@charset "utf-8";

/* ==========================================================================
   [ 서브 페이지 모바일 반응형 (style_sub_m.css) ]
   기준: 1024px 이하 화면 (태블릿 & 스마트폰)
   ========================================================================== */
@media (max-width: 1024px) {

    /* ----------------------------------------------------
       1. 공통 및 서브 비주얼 영역
       ---------------------------------------------------- */
    section { padding: 60px 5%; }
    .sub-section { padding: 50px 0; }
    
    .sec-title { font-size: 32px; margin-bottom: 30px; text-align: center; }
    .sec-title .point-label { font-size: 14px; }

    /* 서브 탑 비주얼 타이틀 축소 */
    .sub-visual h2 { font-size: 2.5rem; margin-top: 50px; }
    .sub-visual .vertical-line { height: 40px; margin: 30px auto; }
    .sub-visual .main-desc { font-size: 16px; }
    .sub-visual_short { height: 250px; }

    /* 소개 텍스트 너비 100% 해제 및 폰트 조절 */
    .intro-text, 
    .intro-text_wj, 
    .intro-text_wjmap { 
        width: 100%; 
        font-size: 16px; 
        padding: 0 10px; 
        box-sizing: border-box; 
    }
    .intro-text_wj span { font-size: 28px; margin-bottom: 25px; }
    .intro-text_wjmap { margin-bottom: 40px; height: auto; }


    /* ----------------------------------------------------
       2. 오시는 길 (교통편 안내)
       ---------------------------------------------------- */
    .traffic-guide-box { gap: 30px; padding: 10px; }
    .traffic-row { 
        flex-direction: column; /* 아이콘과 내용을 위아래로 분리 */
        gap: 20px; 
        align-items: center; 
    }
    .traffic-type { width: 100%; }
    .traffic-info { width: 100%; padding-top: 0; }
    .info-item { 
        flex-direction: column; /* 배지와 텍스트를 위아래로 */
        align-items: center; 
        text-align: center; 
        gap: 10px; 
        padding-bottom: 15px; 
        border-bottom: 1px dashed #eee; 
    }
    .info-item:last-child { border-bottom: none; }


    /* ----------------------------------------------------
       3. 수술 정보 / 특징 리스트 (Info & Keypoint)
       ---------------------------------------------------- */
    .info-flex-list { gap: 15px; }
    .info-flex-list li { 
        min-width: 45%; 
        height: auto; /* 고정 높이 해제 */
        padding: 20px 10px; 
    }
    
    .keypoint-flex-list { flex-direction: column; gap: 20px; }
    .keypoint-flex-list li { 
        border-right: none; /* 가로선 제거 */
        border-bottom: 1px solid var(--color-primary); /* 세로선으로 변경 */
        padding: 0 0 20px 0; 
    }
    .keypoint-flex-list li:last-child { border-bottom: none; }
    .keypoint-flex-list strong { font-size: 22px; }


    /* ----------------------------------------------------
       4. 종양 카드 & 차별점 영역 (Tumor & Diff)
       ---------------------------------------------------- */
    .tumor-card { flex-direction: column; }
    .tumor-card .img-box { width: 100%; padding: 20px; }
    .tumor-card .img-box img { height: 250px; }
    .tumor-card .txt-box { 
        width: 100%; 
        padding: 0 20px 30px; 
        text-align: center; 
    }
    .tumor-card .txt-box h4 { font-size: 24px; }
    .tumor-card .txt-box .sub-tit { font-size: 18px; }
    .tumor-card .txt-box .desc { font-size: 16px; }

    .diff-wrap { flex-direction: column; gap: 30px; }
    .diff-title-area { width: 100%; text-align: center; }
    .diff-title-area h3 { font-size: 30px; }
    .diff-swiper-area { width: 100%; }
    .diff-slide-item { height: 300px; }
    .diff-prev { left: 10px; }
    .diff-next { right: 10px; }


    /* ----------------------------------------------------
       5. 안면열상 & 2x2 그리드 (Laceration & Cause)
       ---------------------------------------------------- */
    .laceration-intro { flex-direction: column; gap: 30px; }
    .laceration-intro .text-area, 
    .laceration-intro .img-area { width: 100%; text-align: center; }
    .laceration-intro .point-text { font-size: 24px; }
    .laceration-intro .desc { font-size: 16px; }
    
    .feature-boxes { flex-direction: column; }
    .feature-boxes .box { padding: 20px; }

    .cause-grid { grid-template-columns: 1fr; /* 1열로 변경 */ gap: 20px; }
    .cause-item { flex-direction: column; }
    .cause-item .img-box { width: 100%; height: 200px; }
    .cause-item .txt-box { width: 100%; padding: 20px; text-align: center; }
    .cause-item .txt-box h4 { font-size: 22px; }
    .cause-item .txt-box p { font-size: 16px; }


    /* ----------------------------------------------------
       6. 수술 스텝 카드 (Step List)
       ---------------------------------------------------- */
    .step-list { 
        flex-direction: column; 
        align-items: center; 
        gap: 30px; 
        margin-top: 50px; 
    }
    .step-card, 
    .step-card-img, 
    .step-card-img2, 
    .step-card-img3 { 
        width: 100%; 
        max-width: 400px; 
        height: auto; /* 고정 높이 해제하여 글자가 넘치지 않게 방어 */
        padding: 50px 20px 30px; 
    }
    .step-card h4, .step-card-img h4 { font-size: 22px; }


    /* ----------------------------------------------------
       7. 지그재그 레이아웃 & 스플릿 화면
       ---------------------------------------------------- */
    .zigzag-row, 
    .zigzag-row:nth-child(even) { 
        flex-direction: column; /* 홀/짝수 역순 배치 취소, 모두 일자 정렬 */
    }
    .zigzag-row .img-box, 
    .zigzag-row .txt-box { width: 100%; }
    .zigzag-row .img-box { height: 250px; }
    .zigzag-row .txt-box { 
        padding: 40px 20px; 
        text-align: center; 
        align-items: center; 
    }
    .zigzag-row .txt-box .short-line { margin: 0 auto 20px auto; }
    .zigzag-row .txt-box h4 { font-size: 24px; }
    .zigzag-row .txt-box p { font-size: 16px; }

    .split-section { flex-direction: column; }
    .split-img, .split-txt { width: 100%; }
    .split-img { height: 250px; }
    .split-txt { padding: 40px 20px; }
    .split-section_filler { height: auto; }


    /* ----------------------------------------------------
       8. 일반 박스형 컴포넌트 (Feature, Text Card 등)
       ---------------------------------------------------- */
    .f-card, .f-card2 { 
        width: 100%; 
        min-width: auto; 
        padding: 30px 20px; 
    }
    .f-card h4 { font-size: 24px; margin-bottom: 15px; }

    .text-card { 
        flex-direction: column; 
        padding: 30px 20px; 
        text-align: center; 
    }
    .text-card .title-area { width: 100%; margin-bottom: 15px; }
    .text-card .title-area h4 { font-size: 24px; }
    .text-card .desc-area { width: 100%; padding-left: 0; }
    .text-card .desc-area p { font-size: 16px; }


    /* ----------------------------------------------------
       9. 경고 및 표 (Warning & Table)
       ---------------------------------------------------- */
    .nevus-direction-wrap .clinic-badge { font-size: 16px; padding: 12px 30px; }
    
    .degeneration-warning { 
        flex-direction: column; 
        text-align: center; 
        padding: 30px 20px; 
        gap: 15px; 
    }
    .degeneration-warning .text-box h4 { font-size: 20px; }

    /* 표는 스와이프를 위해 놔두되 패딩/폰트 축소 */
    .compare-table th, 
    .compare-table td { padding: 15px 10px; font-size: 14px; }


    /* ----------------------------------------------------
       10. 리스트형 및 코성형 타입별 컴포넌트
       ---------------------------------------------------- */
    .benefit-list h4 { font-size: 20px; }
    .benefit-list p { font-size: 16px; }

    .filler-list li { 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        gap: 10px; 
    }
    .filler-list .part-title { width: 100%; }

    .nose-type-item .type-title { font-size: 20px; text-align: center; }
    .nose-type-item .type-method-box { 
        padding: 25px; 
        border-radius: 30px; 
        text-align: center; 
    }
    .type-compare-visual { flex-direction: column; gap: 15px; }
    .type-compare-visual .arrow-box .material-symbols-outlined { 
        font-size: 40px; 
        transform: rotate(90deg); /* 🔥 화살표가 아래쪽 사진을 가리키도록 회전시킵니다 */
    }


    /* ----------------------------------------------------
       11. 원장님 프로필 영역 (Doctor Profile)
       ---------------------------------------------------- */
    .doctor-profile-wrap { 
        flex-direction: column; 
        gap: 30px; 
        margin: 30px auto; 
        padding: 0 20px; 
    }
    .doctor-photo { 
        flex: none; 
        width: 100%; 
        max-width: 350px; 
        margin: 0 auto; 
    }
    .doctor-info { text-align: center; }
    .doctor-info .name { 
        justify-content: center; 
        flex-direction: column; 
        font-size: 32px; 
        gap: 5px; 
        margin-bottom: 20px; 
    }
    .doctor-info .name .specialty { margin-left: 0; font-size: 18px; }
    .doctor-info .history-list li { 
        text-align: left; /* 프로필 이력은 가독성을 위해 좌측 정렬 유지 */
        font-size: 14px; 
    }
}