/* ========================================================
   [마니정보 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. 글자 크기 스마트 축소 (40~70대 체감 200% 메가 사이즈 + 예전 글 완벽 호환 패치) */
.entry-title, 
.mani-content-wrapper h1, 
.entry-content h1 { font-size: 1.85rem !important; line-height: 1.35 !important; }

.mani-content-wrapper h2, 
.entry-content h2 { font-size: 1.65rem !important; line-height: 1.35 !important; margin-top: 35px !important; }

.mani-content-wrapper h3, 
.entry-content h3 { font-size: 1.45rem !important; line-height: 1.4 !important; }

.mani-content-wrapper p, 
.mani-content-wrapper li, 
.entry-content p, 
.entry-content li { font-size: 1.25rem !important; line-height: 1.75 !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;
    }
}

/*=========================
   [추가 패치] 모핑 오브(동그라미 버튼) 모바일 가로 정렬 복구
   ========================================================= */
@media (max-width: 600px) {
    .mani-orb-row {
        flex-direction: row !important; /* 세로를 다시 가로로 변경 */
        flex-wrap: wrap !important; /* 화면이 좁으면 안전하게 줄바꿈 */
        justify-content: center !important; /* 가운데 정렬 */
        gap: 15px !important; /* 간격을 PC와 동일하게 살짝 줄임 */
    }
}
/* =========================================================
   [추가 패치] 일반 페이지(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;
    }
}

/* ===================================================
   [긴급 복구 패치] 본문-썸네일 폭 일치 & 플립카드 2열 정렬
   =================================================== */

/* 1. 본문과 제목의 허리띠를 1000px로 꽉 조이고 중앙 정렬 */
.single-post .site-main,
.single-post .entry-content,
.single-post .entry-header {
    max-width: 1000px !important; /* 폭이 너무 넓거나 좁으면 이 숫자를 조절하세요 (예: 1100px) */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 2. 썸네일 크기도 본문 폭과 동일하게 강제 맞춤 */
.single-post .wp-post-image {
    width: 100% !important;
    max-width: 1000px !important; /* 위 본문 폭과 동일하게 */
    height: auto !important;
    margin: 0 auto 30px auto !important;
    display: block !important;
}

/* 3. 일렬로 늘어난 플립카드 2x2 (2열) 강제 복구 */
.single-post .wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.single-post .wp-block-column {
    flex-basis: 48% !important; /* 50%에서 살짝 빼서 2개가 나란히 들어가게 함 */
    max-width: 48% !important;
    margin-bottom: 20px !important;
}

/* 모바일에서는 스마트하게 다시 1열로 변환 (마스터님의 꼼꼼함 유지) */
@media (max-width: 768px) {
    .single-post .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================================   4. [구버전 포스팅 호환 패치 V2] 테마 기본 뼈대 강제 확장   ======================================================== */@media (max-width: 768px) {    /* 테마가 만들어둔 모든 종류의 방어벽(컨테이너)을 100%로 강제 해제 */    body.single-post .site-content,    body.single-post #content,    body.single-post #primary,    body.single-post .site-main,    body.single-post .ast-container,     body.single-post .grid-container,    body.single-post .wrap {        max-width: 100% !important;        width: 100% !important;        padding-left: 0 !important;        padding-right: 0 !important;        margin-left: 0 !important;        margin-right: 0 !important;    }    /* 실제 텍스트가 들어가는 본문 영역의 좌우 숨통(16px)만 예쁘게 틔워주기 */    body.single-post .entry-content,    body.single-post .post-inner {        max-width: 100% !important;        width: 100% !important;        padding-left: 16px !important;        padding-right: 16px !important;        box-sizing: border-box !important;        overflow-x: hidden !important;    }}