/* ============================================================
   요양원119컨설팅 · 모바일 최종 보정 (mobile-fix.css)
   ------------------------------------------------------------
   loaded LAST after style.css + style-ref.css
   최고 우선순위로 아래 문제만 정확히 수정:
   1. 한글 단어 중간 줄바꿈 (네트워크 → 네 / 트워크) 방지
   2. 카테고리 nav (.ref-catnav) 세로 공간 과다 사용 → 3열 컴팩트
   3. 지역/인원 필터 버튼 크기 축소
   4. 히어로 여백 최적화 · 텍스트 사이즈 조정
   5. 헤더 요소 오버플로우 방지 (햄버거 항상 노출)
   6. 잔여 자잘한 모바일 레이아웃 정리
============================================================ */

/* -----------------------------------------------------------
   [공통] 한글 단어 중간 줄바꿈 방지
   Korean word-break policy · 단어 경계에서만 줄바꿈
----------------------------------------------------------- */
html:lang(ko) h1,
html:lang(ko) h2,
html:lang(ko) h3,
html:lang(ko) .ref-hero-eyebrow,
html:lang(ko) .list-hero-title,
html:lang(ko) .list-hero-desc,
html:lang(ko) .ref-hero p,
html:lang(ko) .page-header h1,
html:lang(ko) .btn,
html:lang(ko) .ref-catnav a,
html:lang(ko) .ref-region-grid a,
html:lang(ko) .ref-capacity a {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    -ms-word-break: keep-all !important;
}

/* 히어로 · accent 강조 텍스트 · 앞 공백 자동 · 자연스러운 줄바꿈 */
.ref-hero h1 .accent,
.ref-hero h1 .accent2 {
    display: inline-block !important;
    margin-left: 0.15em !important;
}

/* -----------------------------------------------------------
   [모바일 · 1023px 이하] 카테고리 nav 컴팩트화
----------------------------------------------------------- */
@media (max-width: 1023px) {

    /* 헤더 · 컨테이너 여백 최소화 · 햄버거 항상 노출 */
    header.site-header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 8px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    /* ⭐ 핵심 · brand-logo 는 grow 하지 않음 (grow 하면 햄버거가 화면 밖으로 밀림) */
    /* max-width 로 우측 60px(햄버거 40px + gap 20px)는 반드시 비워둠 */
    header.site-header .brand-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 68px) !important;
        overflow: hidden !important;
    }
    header.site-header .brand-logo-image {
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
    }
    header.site-header .brand-logo-text {
        font-size: 16px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }
    header.site-header .header-right {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        gap: 6px !important;
        margin-left: auto !important;
    }
    /* 모바일에서 header 내부 전화·CTA 완전 숨김 · 햄버거만 남김 */
    header.site-header .header-phone,
    header.site-header .header-right > .btn,
    header.site-header .header-right > .btn-primary,
    header.site-header .header-right > a.btn {
        display: none !important;
    }
    header.site-header .menu-toggle {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* ⭐ ref-catnav · 3열 · 컴팩트 · 세로 공간 40% 축소 */
    .ref-catnav {
        border-bottom-width: 2px !important;
    }
    .ref-catnav-inner {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    .ref-catnav a {
        padding: 10px 4px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.03em !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    .ref-catnav a:nth-child(3n) { border-right: none !important; }
    .ref-catnav a:nth-last-child(-n+3) { border-bottom: none !important; }

    /* -----------------------------------------------------------
       히어로 · 여백 축소 · 텍스트 크기 조정 · 한글 자연 줄바꿈
    ----------------------------------------------------------- */
    .ref-hero {
        min-height: 200px !important;
    }
    .ref-hero-inner {
        padding: 28px 16px !important;
        min-height: 200px !important;
    }
    .ref-hero-eyebrow {
        font-size: 12px !important;
        margin-bottom: 8px !important;
        letter-spacing: 0 !important;
    }
    .ref-hero h1 {
        font-size: 20px !important;         /* ⭐ 24 → 20 · 살짝 축소 */
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.03em !important;
    }
    .ref-hero h1 .accent,
    .ref-hero h1 .accent2 {
        font-size: 18px !important;         /* ⭐ 22 → 18 · 살짝 축소 */
    }
    .ref-hero p {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-top: 6px !important;
    }

    /* -----------------------------------------------------------
       지역·인원 필터 · 컴팩트
    ----------------------------------------------------------- */
    .ref-filter-bar { padding: 12px 0 !important; }
    .ref-filter-inner {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    /* 지역 그리드 · 2열 (지역명이 길어 3열은 잘림) */
    .ref-region-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .ref-region-grid a {
        min-height: 44px !important;
        padding: 8px 4px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.05em !important;
        border-radius: 5px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* 인원 필터 · 3열 컴팩트 */
    .ref-capacity {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .ref-capacity a {
        min-height: 40px !important;
        padding: 8px 4px !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.03em !important;
        border-radius: 5px !important;
    }

    /* -----------------------------------------------------------
       기타 위젯 여백 정리
    ----------------------------------------------------------- */
    .ref-body {
        padding: 10px !important;
        gap: 10px !important;
    }

    /* 프리미엄 매물 · 여백 축소 */
    .ref-premium-widget { margin: 10px !important; }

    /* 이미지 · 컨테이너 오버플로우 방지 (전역) */
    img { max-width: 100% !important; height: auto !important; }

    /* 폰트 · 모바일 기본 크기 정상화 · header.php 인라인 17px override */
    body, html { font-size: 15px !important; }
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    p  { font-size: 14px !important; line-height: 1.6 !important; }
    .btn { font-size: 14px !important; padding: 10px 16px !important; }
}

/* -----------------------------------------------------------
   [초소형 · 380px 이하] 아이폰 SE 같은 좁은 화면 · 폰트만 축소
   카테고리 nav 은 3열 유지 (2열 되면 세로가 너무 길어짐)
----------------------------------------------------------- */
@media (max-width: 380px) {
    .ref-catnav a {
        padding: 9px 2px !important;
        font-size: 11.5px !important;
        min-height: 38px !important;
        letter-spacing: -0.05em !important;
    }

    /* 지역 · 이름이 길어 3열 유지가 어려우면 2열 (읽기 우선) */
    .ref-region-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ref-region-grid a {
        font-size: 11.5px !important;
        min-height: 46px !important;
    }

    /* 인원 · 3열 유지 (짧아서 문제 없음) */
    .ref-capacity a { font-size: 11.5px !important; }

    /* 히어로 · 초소형 · ⭐ 살짝 축소 */
    .ref-hero h1 { font-size: 17px !important; }
    .ref-hero h1 .accent,
    .ref-hero h1 .accent2 { font-size: 15px !important; }
    .ref-hero-inner { padding: 22px 14px !important; }

    /* 헤더 · 로고 텍스트 축소 */
    header.site-header .brand-logo-text { font-size: 14px !important; }
    header.site-header .brand-logo-image { max-height: 34px !important; }
    header.site-header .brand-logo {
        max-width: calc(100% - 52px) !important;
    }
}

/* -----------------------------------------------------------
   [태블릿 · 768~1023px] 카테고리 nav · 6열 유지 · 여백만 축소
----------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .ref-catnav-inner {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    .ref-catnav a {
        padding: 14px 6px !important;
        font-size: 14px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-bottom: none !important;
    }
    .ref-catnav a:last-child { border-right: none !important; }
    .ref-catnav a:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.12) !important; }
}

/* -----------------------------------------------------------
   가로 스크롤 발생 방지 (모바일 전역)
----------------------------------------------------------- */
@media (max-width: 1023px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .container,
    .ref-catnav,
    .ref-hero,
    .ref-filter-bar,
    .ref-body {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   [매물 상세보기] property/detail.php · 컴팩트 4열 그리드
   ------------------------------------------------------------
   기존 문제 · section.section table td 의 padding:16px 18px 이
   .prop-detail-table 의 padding:6px 8px 을 specificity 로 이김
   → 행 하나당 150px+ 세로 공간 · 라벨은 매/물/번/호 로 잘림
------------------------------------------------------------ */
@media (max-width: 640px) {
    /* ⭐ 최고 우선순위 · section.section table 셀렉터를 이겨야 함 */
    section.section table.prop-detail-table,
    section table.prop-detail-table,
    table.prop-detail-table {
        display: block !important;
        width: 100% !important;
        font-size: 12px !important;
        table-layout: fixed !important;
    }
    section.section table.prop-detail-table colgroup,
    table.prop-detail-table colgroup {
        display: none !important;
    }
    section.section table.prop-detail-table tbody,
    table.prop-detail-table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* 한 행 · 4셀(th td th td) 그리드로 정렬 · 한눈에 2개 정보 */
    section.section table.prop-detail-table tr,
    table.prop-detail-table tr {
        display: grid !important;
        grid-template-columns: 74px minmax(0, 1fr) 74px minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
        border-bottom: 1px solid #F3F4F6 !important;
    }

    /* 셀 공통 · 컴팩트 · 12px 폰트 · 8px padding */
    section.section table.prop-detail-table th,
    section.section table.prop-detail-table td,
    table.prop-detail-table th,
    table.prop-detail-table td {
        display: flex !important;
        align-items: center !important;
        padding: 8px 8px !important;
        margin: 0 !important;
        border: none !important;
        border-right: 1px solid #F3F4F6 !important;
        border-bottom: none !important;
        text-align: left !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        min-height: 36px !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }
    section.section table.prop-detail-table th,
    table.prop-detail-table th {
        background: #F0F9FF !important;
        color: #0369A1 !important;
        font-weight: 700 !important;
        font-size: 11.5px !important;
        justify-content: center !important;
        text-align: center !important;
        letter-spacing: -0.04em !important;
    }
    section.section table.prop-detail-table td,
    table.prop-detail-table td {
        color: #111827 !important;
        background: #FFFFFF !important;
        font-weight: 500 !important;
    }

    /* ⭐ 관리자 전용 필드 · 노란 배경 유지 (원장정보 · 관리자메모) */
    section.section table.prop-detail-table th[style*="FFF7ED"],
    section.section table.prop-detail-table td[style*="FFFBEB"],
    section.section table.prop-detail-table th[style*="9A3412"],
    section.section table.prop-detail-table td[style*="9A3412"],
    section.section table.prop-detail-table td[style*="78350F"],
    table.prop-detail-table th[style*="FFF7ED"],
    table.prop-detail-table td[style*="FFFBEB"],
    table.prop-detail-table th[style*="9A3412"],
    table.prop-detail-table td[style*="9A3412"],
    table.prop-detail-table td[style*="78350F"] {
        background: #FFFBEB !important;
        color: #78350F !important;
    }
    section.section table.prop-detail-table th[style*="FFF7ED"],
    section.section table.prop-detail-table th[style*="9A3412"],
    table.prop-detail-table th[style*="FFF7ED"],
    table.prop-detail-table th[style*="9A3412"] {
        color: #9A3412 !important;
    }
    section.section table.prop-detail-table td:last-child,
    table.prop-detail-table td:last-child {
        border-right: none !important;
    }

    /* colspan · 전체 폭 */
    section.section table.prop-detail-table th[colspan="2"],
    section.section table.prop-detail-table td[colspan="2"],
    section.section table.prop-detail-table th[colspan="3"],
    section.section table.prop-detail-table td[colspan="3"],
    section.section table.prop-detail-table th[colspan="4"],
    section.section table.prop-detail-table td[colspan="4"],
    table.prop-detail-table th[colspan="2"],
    table.prop-detail-table td[colspan="2"],
    table.prop-detail-table th[colspan="3"],
    table.prop-detail-table td[colspan="3"],
    table.prop-detail-table th[colspan="4"],
    table.prop-detail-table td[colspan="4"] {
        grid-column: 1 / -1 !important;
        border-right: none !important;
    }

    /* 매매가 · 강조 (가격만 좀 크게) */
    section.section table.prop-detail-table td[style*="color:#0369A1"],
    table.prop-detail-table td[style*="color:#0369A1"] {
        color: #0369A1 !important;
        font-weight: 800 !important;
        font-size: 13px !important;
    }

    /* 특징 및 기타사항 · 본문은 좀 여유있게 */
    section.section table.prop-detail-table td[colspan="4"],
    section.section table.prop-detail-table td[colspan="2"]:not(:first-child),
    table.prop-detail-table td[colspan="4"],
    table.prop-detail-table td[colspan="2"]:not(:first-child) {
        display: block !important;
        padding: 12px 12px !important;
        font-size: 12.5px !important;
        line-height: 1.6 !important;
        color: #374151 !important;
    }

    /* 상세보기 헤더 · 컴팩트 */
    .prop-detail-header {
        padding: 10px 12px !important;
    }
    section.section .prop-detail-header h2,
    .prop-detail-header h2 {
        font-size: 15px !important;
        margin: 0 !important;
    }

    /* section.section 자체 여백도 축소 */
    section.section {
        padding: 12px 0 !important;
    }
    section.section > .container {
        padding: 0 10px !important;
    }
}

/* ============================================================
   [매물 리스트] property/list.php · 모바일 카드 레이아웃
   ------------------------------------------------------------
   모바일에서는 데스크톱 테이블 완전 숨김
   · PHP 에서 함께 출력되는 .prop-list-mobile (좌측 번호 + 우측 3줄)
     카드 레이아웃이 자동으로 표시됨
   · 실제 카드 스타일은 list.php 인라인 <style> 블록에 정의
------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 헤더 · 총 몇 건 유지 */
    .ref-list-box .ref-list-head {
        padding: 12px 14px !important;
        background: #FAFBFC !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
    }
    .ref-list-box .ref-list-head h2 { font-size: 14px !important; margin: 0 !important; }
    .ref-list-box .ref-list-head .unit { font-size: 11px !important; color: #111827 !important; }

    /* 데스크톱 · 매물 테이블 완전 숨김 (모바일 카드가 대신 표시) */
    .prop-list-table { display: none !important; }
}

/* ============================================================
   [메인 최근매물] index2.php · .ref-list-table 매물번호 숨김
   ------------------------------------------------------------
   기존 처리 · 매물번호를 파란 박스로 강조했으나 사용자 요청으로 완전 숨김
------------------------------------------------------------ */
@media (max-width: 900px) {
    /* 매물번호 · 완전 숨김 */
    .ref-list-box .ref-list-table tbody td.c-num,
    .ref-list-box .ref-list-table tbody td:first-child {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* 그리드 재조정 · 매물번호 컬럼 제거 · 나머지 3개 요소만 */
    .ref-list-box .ref-list-table tbody tr {
        grid-template-columns: 1fr auto auto !important;
    }
    /* 지역(c-region) 좌측 · 매물번호 자리 대신 */
    .ref-list-box .ref-list-table .c-region {
        grid-column: 1 / -1 !important;
    }
    .ref-list-box .ref-list-table .c-type {
        grid-column: 1 / -1 !important;
    }
    .ref-list-box .ref-list-table .c-price {
        grid-column: 1 / -1 !important;
    }
    .ref-list-box .ref-list-table .c-content {
        grid-column: 1 / -1 !important;
    }
}

/* ============================================================
   [프리미엄 매물] index2.php · 좌우 여백 확보 · 매물번호 색상
------------------------------------------------------------ */
@media (max-width: 1023px) {
    /* 프리미엄 그리드 · 좌우 여백 확보 (화면 끝에 붙지 않게) */
    .ref-premium-grid {
        padding: 0 12px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }
    /* 카드 · 텍스트 잘림 방지 */
    .ref-premium-card {
        overflow: hidden !important;
        min-width: 0 !important;
    }
    .ref-premium-card .body {
        padding: 10px 8px 12px !important;
        overflow: hidden !important;
    }
    .ref-premium-card .type,
    .ref-premium-card .region,
    .ref-premium-card .price {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    .ref-premium-card .type {
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #0B2A5B !important;
        margin-bottom: 3px !important;
    }
    .ref-premium-card .region {
        font-size: 11px !important;
        color: #111827 !important;
        margin-bottom: 5px !important;
    }
    .ref-premium-card .price {
        font-size: 15px !important;
        font-weight: 900 !important;
        color: #0369A1 !important;
    }

    /* ref-section-head · 프리미엄 매물 헤더 · 좌우 여백 확보 */
    .ref-main .ref-section-head,
    .ref-body .ref-section-head {
        padding: 0 12px !important;
        margin-bottom: 8px !important;
    }
    .ref-section-head h2 { font-size: 15px !important; }

    /* 최근매물 리스트박스 · 좌우 여백 */
    .ref-list-box {
        margin: 0 12px 16px !important;
    }
}