/* ========================================================
   [마니정보 V108.1 최종 CSS] 모바일 완벽 반응형 & 레이아웃 최적화
   ======================================================== */

/* 1. [화면 찢김 방지] 최상위 도화지 & 스크롤 요동침 완벽 제어 */
html, body, #page, .site-content {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 2. [강제 유연성] 모든 컨텐츠가 부모 박스를 넘지 못하게 잠금 (고무줄 효과) */
.mani-content-wrapper,
.mani-content-wrapper * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important; /* 억지로 팽창하는 플렉스/그리드 힘 빼기 */
}

/* 3. [텍스트 삐져나감 방지] 긴 영어, 주소 단어 단위 강제 줄바꿈 */
.mani-content-wrapper p, 
.mani-content-wrapper h1, 
.mani-content-wrapper h2, 
.mani-content-wrapper h3, 
.mani-content-wrapper h4,
.mani-content-wrapper li, 
.mani-content-wrapper a, 
.mani-content-wrapper span,
.mani-content-wrapper strong {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* 4. [컴포넌트 보호] 탭 메뉴 공간 부족 시 자동 줄바꿈 허용 */
.mani-tabs {
    flex-wrap: wrap !important;
}

/* 5. [광고 폭주 방지] 구글 자동광고 가로 팽창 원천 차단 및 중앙 정렬 */
.google-auto-placed, 
ins.adsbygoogle, 
iframe[name^="google_ads_iframe"] {
    max-width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   📱 [모바일 융단폭격] 화면 폭이 600px 이하일 때 무조건 적용 (폴드5 최적화)
   ========================================================= */
@media (max-width: 600px) {
    
    /* A. 테마의 거대한 기본 폰트 크기 강제 초기화 (가장 중요) */
    html { font-size: 100% !important; }

    /* B. 여백(Padding) 다이어트: 폴드5처럼 좁은 화면에 글씨 공간 확보 */
    .mani-content-wrapper {
        padding: 15px 12px !important;
        border-radius: 12px !important;
    }

    /* 모든 박스(카드, 목차, 핀테크, 팁 등)의 내부 여백 강제 축소 */
    .mani-stagger-card > div,
    .mani-flip-front,
    .mani-flip-back,
    .mani-insight-deck,
    .mani-info-bar,
    .mani-alert-box,
    .mani-fintech-box,
    .mani-youtube-hub,
    .mani-toc-header,
    .mani-toc-list {
        padding: 15px !important;
        width: 100% !important;
    }

    /* 스티키 노트는 핀(📌) 애니메이션 때문에 하단 여백만 조금 더 줌 */
    .mani-sticky-note {
        padding: 15px 15px 50px 15px !important;
        width: 100% !important;
    }

    /* C. 글자 크기 스마트 축소 (어색하게 세로로 길어지는 현상 방지) */
    .entry-title, .mani-content-wrapper h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
    .mani-content-wrapper h2 { font-size: 1.3rem !important; line-height: 1.3 !important; margin-top: 30px !important; }
    .mani-content-wrapper h3 { font-size: 1.1rem !important; line-height: 1.3 !important; }
    .mani-content-wrapper p, .mani-content-wrapper li { font-size: 0.95rem !important; line-height: 1.6 !important; }

    /* D. 그리드/플렉스 고집 꺾기 (무조건 1열 세로 배치) */
    .mani-bento-grid, .mani-toc-list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* E. 모핑 오브(동그라미 팁) 팝업 크기 제한 */
    .mani-orb-container.active, .mani-orb-popup {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    /* F. 슬라이더(비교 표) 600px 고정 크기 폭탄 해체 */
    .mani-compare-wrap, .mani-compare-container, .mani-layer-content {
        width: 100% !important;
        padding: 10px !important;
    }
}

/* =========================================================
   [추가 패치] 모핑 오브(동그라미 버튼) 모바일 세로 1열 정렬
   ========================================================= */
@media (max-width: 600px) {
    .mani-orb-row {
        flex-direction: column !important; /* 가로 배열을 세로 배열로 강제 변경 */
        align-items: center !important; /* 가운데 정렬 */
        gap: 20px !important; /* 버튼 위아래 간격 띄우기 */
    }
}

/* =========================================================
   [추가 패치] 일반 페이지(Page) 모바일 좌우 강제 여백 제거
   ========================================================= */
@media (max-width: 600px) {
    /* 워드프레스 테마들의 끈질긴 페이지 겉옷 여백 싹 다 벗기기 */
    body.page .site-content, 
    body.page .entry-content, 
    body.page #content,
    body.page .site-main,
    body.page .ast-container, /* 아스트라 테마용 */
    body.page .grid-container, /* 제너레이트프레스 테마용 */
    body.page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}