/* =============================================================
   responsive.css  |  태블릿(~1749px) / 모바일(~767px) 전용
   ★ PC 레이아웃(1750px+)은 style.css 가 담당
   ★ 1750px 미만이 되면 즉시 태블릿 레이아웃으로 전환
   ★ 768px 미만이 되면 즉시 모바일 레이아웃으로 전환
============================================================= */

@media screen and (max-width: 1240px) {
    /* 태블릿 구간으로 진입하면 고정되었던 최소 너비를 해제합니다 */
    .header_inner_1700 .hamburger_btn span {
        background-color: #fff !important;
    }
    #wrap { 
        min-width: 100% !important; 
    }
    
    body {
        overflow-x: hidden !important; /* 반응형 구간에서는 가로 스크롤 방지 */
    }
}

    .sub_notice_page { 
        min-width: 100% !important; 
    }

@media screen and (max-width: 1240px) {
    /* 모바일 및 태블릿에서 헤더 상시 고정 */
    #header_wrap.hide {
        transform: translateY(0) !important; 
    }
}

/* ══════════════════════════════════════════════════════════════
   A.  태블릿  (max-width: 1749px)
   ══════════════════════════════════════════════════════════════ */

/* ── 0. 공통: min-width 해제 & 유동화 ──────────────────────── */
@media (max-width: 1749px) {
    /* 1. 부드러운 스크롤 제거: 아래처럼 주석 처리된 상태를 유지하세요 */
    /* html { scroll-behavior: smooth; } */

    body {
        min-width: unset !important;
        overflow-x: hidden;
    }
    #header_wrap,
    .section_page,
    #inquiry_fixed_bar {
        min-width: unset !important;
    }
    .inner_1440,
    .brand_wrap_1920,
    .m_content_1920,
    .news_inner_wrapper,
    .news_gallery_wrap,
    .gallery_contents,
    .news_top_row,
    .shop_content {
        width: 100% !important;
        max-width: 100% !important;
    }
    #header_wrap,
    .side_nav_fixed,
    #inquiry_fixed_bar {
        margin-left: 0 !important;
    }

    /* 2. 짤림 방지 수정: overflow 속성을 추가합니다 */
    .section_page {
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important; /* PC용 style.css의 hidden 속성을 무효화하여 내용 짤림 방지 */
    }

    /* 한글 가독성 최적화 */
    p, span, h1, h2, h3 { word-break: keep-all; }
}

/* ── 1. 헤더 (태블릿) ─────────────────────────────────────── */
@media (max-width: 1749px) {
    #header_wrap        { height: 70px; }
    .header_inner_1700  { width: 100%; max-width: 100%; }
    .logo img           { width: 160px; height: auto; }
    .nav_menu ul        { gap: 20px; }
    .nav_menu ul li a   { font-size: 18px; }
    .header_call span   { font-size: 20px; }
    .header_call a      { width: 185px; height: 42px; gap: 8px; }
    .header_call a img  { width: 20px; }
}

/* ── 1. 헤더 (모바일) ─────────────────────────────────────── */
@media (max-width: 1050px) {
    #header_wrap        { height: 70px; }
    .header_inner_1700  { width: 100%; max-width: 100%; }
    .logo img           { width: 160px; height: auto; }
    .nav_menu ul        { gap: 15px !important;}
    .nav_menu ul li a   { font-size: 12px; }
    .header_call span   { font-size: 14px; }
    .header_call a      { width: 120px; height: 42px; gap: 8px; }
    .header_call a img  { width: 20px; }
}

/* ── 2. 사이드 내비 (태블릿) ──────────────────────────────── */
@media (max-width: 1749px) {
    .side_nav_fixed {
        width: 100%;
        left: auto; right: 0;
        transform: translateY(-50%);
    }
    .side_nav_inner {
        position: fixed;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ===================================================================== */
/* --- section_01 메인 영상 태블릿/모바일 반응형 맞춤 --- */
/* ===================================================================== */

/* ── 태블릿 구간 (768px ~ 1749px) ── */
@media screen and (max-width: 1749px) {
    #section_01, .fw_video_sec {
        width: 100% !important;
        height: auto !important; 
        min-height: 60vh !important; /* 화면 높이의 60%를 차지하도록 설정 */
        position: relative;
        overflow: hidden;
        padding-top: 50px !important;
    }
    
    #fw_main_vid {
        margin-top: 0 !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100% !important;
        height: 100% !important;
        /* cover: 빈 공간 없이 화면을 꽉 채웁니다. (대신 영상 좌우가 일부 잘릴 수 있습니다) */
        object-fit: cover !important; 
    }
}

/* ── 모바일 구간 (767px 이하) ── */
@media screen and (max-width: 767px) {
    #section_01, .fw_video_sec {
        min-height: 40vh !important; /* 모바일에서는 영상 높이를 화면의 40% 정도로 조정 */
    }
    
    #fw_main_vid {
        /* 모바일에서 영상이 잘리는 것이 싫고 전체를 다 보여주고 싶다면 
           아래 object-fit 값을 cover 대신 contain으로 변경하십시오. */
        object-fit: cover !important; 
    }
}

/* ===================================================================== */
/* --- 대표메뉴 섹션 (태블릿 / 모바일 반응형) --- */
/* ===================================================================== */

/* 모바일 화살표 PC/태블릿에서 숨김 */
.menu_nav_btn { display: none; }

/* ── 1. 태블릿 구간 (1749px 이하) ── */
@media screen and (max-width: 1749px) {
    .menu_wrap { height: auto !important; aspect-ratio: 1920 / 900; }
    .menu_inner { width: 100% !important; }
    
    /* 팝업 크기 비율 축소 */
    .menu_popup { width: 31.25vw !important; height: 20.83vw !important; border-radius: 2.6vw !important; box-shadow: 0 0 1.56vw rgba(255,255,255,0.8) !important; }
    .popup_img_wrap { height: 10.41vw !important; border-radius: 2.6vw 2.6vw 0 0 !important; }
    .popup_txt_wrap { height: 10.41vw !important; }
    .popup_main_copy { font-size: 2.6vw !important; margin-bottom: 0.62vw !important; }
    .popup_sub_copy { font-size: 1.04vw !important; }

    /* 개별 메뉴 위치 비율 (사장님 설정 기준) */
    .item_gan { top: 4.16vw !important; left: 10.41vw !important; width: 19.27vw !important; height: 17.55vw !important; }
    .item_gan .menu_popup { top: -1.04vw !important; left: 23.43vw !important; transform: translateX(-1.04vw) !important; }
    
    .item_bul { bottom: 7.81vw !important; left: 14.58vw !important; width: 16.3vw !important; height: 15.78vw !important; }
    .item_bul .menu_popup { bottom: 9.37vw !important; left: 19.79vw !important; transform: translate(-1.04vw, 1.04vw) !important; }
    
    .item_woo { top: 3.12vw !important; left: 36.45vw !important; width: 22.91vw !important; height: 21.45vw !important; }
    .item_woo .menu_popup { top: 13.02vw !important; left: 22.39vw !important; transform: translateY(1.04vw) !important; }
    
    .item_guk { bottom: 9.37vw !important; left: 36.45vw !important; width: 12.5vw !important; height: 11.14vw !important; }
    .item_guk .menu_popup { bottom: 6.25vw !important; left: 15.62vw !important; transform: translate(-1.04vw, 1.04vw) !important; }
    
    .item_choo { top: 6.25vw !important; right: 15.62vw !important; width: 12.81vw !important; height: 11.19vw !important; }
    .item_choo .menu_popup { top: -1.04vw !important; right: 15.62vw !important; transform: translateX(1.04vw) !important; }
    
    .item_muk { bottom: 8.33vw !important; right: 20.83vw !important; width: 23.48vw !important; height: 21.45vw !important; }
    .item_muk .menu_popup { bottom: 10.41vw !important; right: 26.04vw !important; transform: translate(1.04vw, 1.04vw) !important; }
    
    .item_dwae { bottom: 8.33vw !important; right: 8.33vw !important; width: 11.09vw !important; height: 11.25vw !important; }
    .item_dwae .menu_popup { bottom: 7.81vw !important; right: 13.02vw !important; transform: translate(1.04vw, 1.04vw) !important; }

    /* 태블릿 터치 이벤트(JS)를 위한 active 클래스 처리 */
    .menu_item.active { z-index: 50 !important; }
    .menu_item.active .menu_img_box { filter: brightness(1) !important; }
    .menu_item.active .menu_img_box img { animation: spinDish 12s linear infinite !important; }
    
    .item_gan.active .menu_popup { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; }
    .item_bul.active .menu_popup { transform: translate(0, 0) !important; opacity: 1 !important; visibility: visible !important; }
    .item_woo.active .menu_popup { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; }
    .item_guk.active .menu_popup { transform: translate(0, 0) !important; opacity: 1 !important; visibility: visible !important; }
    .item_choo.active .menu_popup { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; }
    .item_muk.active .menu_popup { transform: translate(0, 0) !important; opacity: 1 !important; visibility: visible !important; }
    .item_dwae.active .menu_popup { transform: translate(0, 0) !important; opacity: 1 !important; visibility: visible !important; }
}

/* --- 팝업 닫기 버튼 (태블릿 전용) --- */
.popup_close_btn {
    display: none; /* 기본적으로 PC와 모바일에서는 숨김 */
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
}

/* X 모양 그리기 */
.popup_close_btn::before, 
.popup_close_btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    background-color: #ffffff;
}
.popup_close_btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.popup_close_btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── 태블릿 구간에서만 노출 및 크기 지정 ── */
@media screen and (max-width: 1749px) and (min-width: 768px) {
    .popup_close_btn {
        display: block; 
        top: 1.5vw; 
        right: 1.5vw;
        width: 3vw; 
        height: 3vw;
        border-width: 0.15vw;
    }
    .popup_close_btn::before, 
    .popup_close_btn::after {
        width: 1.5vw; 
        height: 0.15vw;
    }
}

/* --- 태블릿/모바일 마우스 호버(잔상) 간섭 원천 차단 --- */
@media screen and (max-width: 1749px) {
    /* X버튼 누른 후 마우스가 올려져 있어도 팝업이 뜨지 않도록 호버 무력화 */
    .menu_item:hover { z-index: 10; }
    .menu_item:hover .menu_img_box { filter: brightness(0.4); }
    .menu_item:hover .menu_img_box img { animation: none; }
    .menu_item:hover .menu_popup { opacity: 0; visibility: hidden; }
}


/* ── 2. 모바일 구간 (767px 이하) - 팝업 캐러셀 슬라이드 ── */
@media screen and (max-width: 767px) {
    .menu_wrap { 
        height: auto !important; 
        aspect-ratio: auto !important; 
        /* 상단 '대표메뉴' 텍스트 공간 확보 */
        padding: 120px 0 80px 0 !important; 
    }
    
    /* 상단 '대표메뉴' 텍스트 추가 */
    .menu_wrap::before {
        content: '대표메뉴';
        font-family: 'JejuHallasan', sans-serif;
        font-size: 40px;
        color: #ffffff;
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .menu_inner { display: flex !important; align-items: center !important; justify-content: center !important; }
    
    /* 흩뿌려진 절대 좌표 해제 및 비활성 메뉴 숨김 */
    .menu_wrap .menu_inner .menu_item {
        position: relative !important;
        top: auto !important; bottom: auto !important; 
        left: auto !important; right: auto !important;
        transform: none !important;
        width: 100% !important; height: auto !important;
        display: none !important; 
    }
    
    /* [수정] 우선순위를 높여서 active 클래스가 붙은 아이템만 정확히 보이도록 강제 */
    .menu_wrap .menu_inner .menu_item.active { 
        display: block !important; 
    }

    /* 모바일에서는 회전하는 음식 이미지 아예 숨김 */
    .menu_img_box { display: none !important; }

    /* 팝업 크기 축소 및 화면 중앙 고정 */
    .menu_wrap .menu_inner .menu_item .menu_popup {
        position: relative !important;
        top: auto !important; bottom: auto !important; 
        left: auto !important; right: auto !important;
        transform: none !important;
        width: 75vw !important; 
        height: auto !important;
        margin: 0 auto !important;
        opacity: 1 !important; visibility: visible !important;
        border-radius: 20px !important;
    }
    
    /* 팝업 내부 요소 크기 비례 축소 */
    .popup_img_wrap { height: 200px !important; border-radius: 20px 20px 0 0 !important; }
    .popup_txt_wrap { height: auto !important; padding: 25px 15px !important; }
    .popup_main_copy { font-size: 26px !important; margin-bottom: 10px !important; }
    .popup_sub_copy { font-size: 14px !important; word-break: keep-all !important; line-height: 1.4 !important; }

    /* 모바일 슬라이더 네비게이션 버튼 */
    .menu_nav_btn { 
        display: block; 
        position: absolute; 
        top: 50%; transform: translateY(-50%); 
        width: 40px; height: 50px; 
        background-color: rgba(255, 255, 255, 0.8); 
        border-radius: 5px; border: none; 
        z-index: 100;
    }
    .menu_prev { left: 4vw; }
    .menu_next { right: 4vw; }
    
    .menu_nav_btn::before { 
        content: ''; position: absolute; 
        width: 15px; height: 15px; top: 17px; 
        border-top: 3px solid #000; border-right: 3px solid #000; 
    }
    .menu_prev::before { transform: rotate(-135deg); left: 14px; }
    .menu_next::before { transform: rotate(45deg); left: 8px; }
}

/* ===================================================================== */
/* --- 감자탕 섹션 (태블릿 / 모바일 반응형 완벽 교정본) --- */
/* ===================================================================== */

/* ── 1. 태블릿 구간 (1749px 이하) ── */
@media screen and (max-width: 1749px) {
    .gamjatang_wrap {
        height: auto !important;
        min-height: unset !important;
        aspect-ratio: 1920 / 900;
        overflow: hidden !important; /* 강제 넘침 방지 처리 */
    }
    .gamjatang_inner {
        width: 100% !important;
        padding-top: 7.8vw !important;
        padding-left: 0 !important;
    }
    
    .gamjatang_txt_area {
        padding-left: 6.2vw !important; 
    }
    .gamjatang_tit { font-size: 2.6vw !important; }
    .gamjatang_line { margin-top: 2.3vw !important; margin-bottom: 2.3vw !important; width: 46vw !important; }
    .gamjatang_sub_1, .gamjatang_sub_2 { font-size: 1.25vw !important; margin-bottom: 1.5vw !important; }
    
    .gamjatang_img_area {
        width: 80% !important;
        left: 75% !important;
        bottom: -5% !important;
    }
    .spotlight_cone {
        width: 65% !important;
        height: 160% !important;
        top: -30% !important;
        left: 75% !important;
    }
}

/* ── 2. 작은 태블릿 구간 (1240px 이하) ── */
@media screen and (max-width: 1240px) {
    .gamjatang_txt_area { padding-left: 5vw !important; }
    .gamjatang_tit { font-size: 26px !important; }
    .gamjatang_sub_1, .gamjatang_sub_2 { font-size: 14px !important; line-height: 1.5 !important; }
    .gamjatang_line { margin-top: 20px !important; margin-bottom: 20px !important; }
}

/* ── 3. 모바일 구간 (767px 이하) ── */
@media screen and (max-width: 767px) {
    .gamjatang_wrap {
        aspect-ratio: auto !important;
        height: auto !important;
        padding: 50px 0 0 !important;
        overflow: hidden !important; /* 모바일에서도 넘침 방지 강력 적용 */
    }
    
    .gamjatang_inner {
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .gamjatang_txt_area {
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .gamjatang_tit {
        font-size: 20px !important;
        word-break: keep-all;
    }
    .gamjatang_line {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    .gamjatang_wrap.active .gamjatang_line {
        width: 100% !important;
    }
    
    .gamjatang_sub_1, .gamjatang_sub_2 {
        font-size: 14px !important;
        word-break: keep-all;
        text-align: center !important;
    }
    
    .gamjatang_img_area {
        position: relative !important;
        width: 120% !important; 
        left: 50% !important;
        bottom: 0 !important;
        margin-top: 40px !important;
    }
    .spotlight_cone {
        width: 150% !important;
        height: 150% !important;
        top: -30% !important;
        left: 50% !important;
    }
}

/* ===================================================================== */
/* --- 테이블 단가 섹션 (반응형: 1749px / 1240px / 767px) --- */
/* ===================================================================== */

/* ── 1. 태블릿 구간 (1749px 이하) ── */
@media screen and (max-width: 1749px) {
    .table_price_wrap {
        height: auto !important;
        min-height: unset !important;
        aspect-ratio: 1920 / 900;
    }
    .table_price_wrap .tp_inner {
        width: 100% !important;
    }
    
    /* 텍스트 영역을 화면 크기에 맞게 vw 비율로 축소 */
    .tp_txt_area {
        top: 6.25vw !important; 
        left: 7.8vw !important;
    }
    .tp_line { font-size: 2.18vw !important; }
    .tp_spacing { height: 2vw !important; }
    
    /* 다각형 그래프 크기 유지 */
    .tp_graph_polygon {
        width: 100vw !important;
    }

    /* 이미지 크기 및 위치 vw 비율 축소 */
    .img_guk { width: 10.1vw !important; height: auto !important; left: 14.5vw !important; bottom: 8.8vw !important; }
    .img_tang { width: 24.5vw !important; height: auto !important; left: 35.1vw !important; bottom: 13vw !important; }
    .img_jjim { width: 28.9vw !important; height: auto !important; right: 9.3vw !important; top: 8.3vw !important; }

    /* 단가 박스 크기 및 폰트 축소 */
    .tp_price_box {
        width: 26vw !important;
        height: 13vw !important;
        right: 9.3vw !important;
        bottom: 8.3vw !important;
        padding: 0.5vw !important;
    }
    .price_border { padding: 0 2.3vw !important; gap: 0.8vw !important; }
    .price_row { font-size: 1.56vw !important; }
}

/* ── 2. 작은 태블릿 구간 (1240px 이하) ── */
@media screen and (max-width: 1240px) {
    /* 1749px 구간에서 vw로 너무 작아지는 텍스트와 박스를 적정 크기로 강제 방어 */
    .tp_txt_area {
        top: 30px !important; 
        left: 40px !important;
    }
    .tp_line { font-size: 20px !important; }
    
    .tp_price_box {
        width: 260px !important;
        height: 100px !important;
        right: 40px !important;
        bottom: 30px !important;
    }
    .price_border { padding: 0 20px !important; gap: 5px !important; }
    .price_row { font-size: 15px !important; }
}

/* ── 3. 모바일 구간 (767px 이하) - 바닥 밀착 & 우상향 계단식 ── */
@media screen and (max-width: 767px) {
    .table_price_wrap {
        height: 850px !important; /* 이미지 위치를 완벽하게 고정하기 위해 모바일 높이 강제 고정 */
        aspect-ratio: auto !important;
        padding: 0 !important;
    }
    
    .table_price_wrap .tp_inner {
        position: static !important; /* [핵심] 배경 그래프가 바닥 끝까지 닿게 하는 핵심 설정 */
        display: block !important;
        width: 100% !important;
    }

    /* 1. 텍스트 (최상단 고정) */
    .tp_txt_area {
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        padding: 0 20px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }
    .tp_line { font-size: 22px !important; letter-spacing: -0.5px !important; }
    .tp_spacing { height: 15px !important; }

    /* 2. 사선 그래프 (바닥까지 100% 채움) */
    .tp_graph_reveal {
        top: 0 !important; bottom: auto !important;
        height: 100% !important; 
    }
    .tp_graph_polygon {
        width: 100% !important;
        /* 왼쪽은 50% 높이에서 출발, 오른쪽 위로 올라가는 사선 */
        clip-path: polygon(0 50%, 100% 35%, 100% 100%, 0 100%) !important;
    }

    /* 3. 음식 이미지 (계단식 상승: 국 -> 탕 -> 찜) */
    .tp_img_box {
        position: absolute !important;
        margin: 0 !important;
    }
    
    /* ① 국 (좌측 하단) */
    .img_guk {
        width: 100px !important;
        height: auto !important;
        left: 20px !important;
        top: 130px !important;
        z-index: 17 !important; /* 가장 앞쪽으로 배치 */
    }
    /* ② 탕 (중앙 중단) */
    .img_tang {
        width: 180px !important;
        height: auto !important;
        left: 45% !important;
        margin-left: -85px !important; /* 정중앙 */
        top: 10px !important;
        z-index: 16 !important;
    }
    /* ③ 찜 (우측 상단) */
    .img_jjim {
        width: 200px !important;
        height: auto !important;
        right: 10px !important;
        left: auto !important;
        top: 260px !important;
        z-index: 15 !important;
    }

    /* 4. 가격 박스 (바닥 고정) */
    .tp_price_box {
        position: absolute !important;
        bottom: 150px !important;
        left: 50% !important;
        margin-left: 0 !important;
        width: 90% !important;
        max-width: 400px !important;
        height: auto !important;
        padding: 10px !important;
        /* 초기에는 살짝 내려가 있음 */
        transform: translateX(-50%) translateY(20px) !important; 
    }
    
    .table_price_wrap.active .tp_price_box {
        transform: translateX(-50%) translateY(0) !important;
    }

    .price_border { padding: 25px !important; gap: 12px !important; }
    .price_row { font-size: 18px !important; }
}

/* ===================================================================== */
/* --- 3D 인테리어 섹션 (태블릿 / 모바일 반응형) --- */
/* ===================================================================== */

/* ── 1. 태블릿 구간 (1749px 이하) ── */
@media screen and (max-width: 1749px) {
    .interior_wrap { height: auto !important; min-height: unset !important; aspect-ratio: 1920 / 900; }
    .in_inner { width: 100% !important; }
    
    /* 텍스트 영역 vw 비율 축소 */
    .in_txt_area { top: 10.4vw !important; left: 10.4vw !important; }
    .in_line { font-size: 2.6vw !important; margin-bottom: 0.3vw !important; }
    .hl_box { padding: 0.1vw 0.8vw !important; }
    
    /* 갤러리 영역 전체 축소 */
    .in_gallery_wrap { top: 4.1vw !important; right: 10.4vw !important; width: 41.66vw !important; height: 32.3vw !important; }
    
    /* 내부 슬라이더 세트 높이 조율 */
    .set1 .comp_top, .set1 .comp_bottom { height: 15.6vw !important; }
    
    /* [핵심] 갤러리가 줄어든 만큼, 마스킹되는 Before 이미지의 가로 크기도 정확히 비율로 맞춰줌 */
    .comp_top .img_before, .comp_bottom .img_before, .comp_full .img_before { width: 41.66vw !important; }
    .comp_left .img_before, .comp_right .img_before { width: calc(20.83vw - 0.5vw) !important; }

    /* 네비게이션 화살표 크기 조절 */
    .nav_btn { width: 2vw !important; height: 3vw !important; }
    .prev_btn { left: -3.5vw !important; }
    .next_btn { right: -3.5vw !important; }
    .nav_btn::before { width: 1.5vw !important; height: 1.5vw !important; top: 0.5vw !important; left: 0.5vw !important; border-width: 0.3vw !important; }
}

/* ── 2. 작은 태블릿 구간 (1240px 이하) ── */
@media screen and (max-width: 1240px) {
    /* 화면이 너무 작아지기 전 고정 픽셀로 방어 */
    .in_txt_area { top: 120px !important; left: 40px !important; }
    .in_line { font-size: 25px !important; }
    
    .in_gallery_wrap { top: 100px !important; right: 40px !important; width: 410px !important; height: 284px !important; }
    
    .set1 .comp_top, .set1 .comp_bottom { height: 210px !important; }
    
    /* Before 이미지 가로 픽셀 갱신 */
    .comp_top .img_before, .comp_bottom .img_before, .comp_full .img_before { width: 560px !important; }
    .comp_left .img_before, .comp_right .img_before { width: 275px !important; } /* (560 / 2) - 5px */
    
    .nav_btn { width: 30px !important; height: 45px !important; }
    .prev_btn { left: -30px !important; }
    .next_btn { right: -30px !important; }
    .nav_btn::before { width: 20px !important; height: 20px !important; top: 10px !important; }
}

/* ── 3. 모바일 구간 (767px 이하) ── */
@media screen and (max-width: 767px) {
    .interior_wrap { 
        height: auto !important; 
        aspect-ratio: auto !important; 
        padding: 60px 0 80px 0 !important; 
    }
    .in_inner { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
    }
    
    /* 1. 텍스트 영역 */
    .in_txt_area { 
        position: relative !important; 
        top: auto !important; left: auto !important; 
        text-align: center !important; 
        margin-bottom: 50px !important; 
        width: 100% !important; 
        padding: 0 20px !important; 
        box-sizing: border-box !important; 
    }
    .in_line { font-size: 24px !important; letter-spacing: -0.5px !important; }

    /* 2. 갤러리 영역 */
    .in_gallery_wrap { 
        position: relative !important; 
        top: auto !important; right: auto !important; 
        width: 90vw !important; 
        height: auto !important; 
    }
    
    .gallery_set { position: relative !important; display: none !important; }
    
    /* 세트 1, 2 공통: 세로 정렬 */
    .gallery_set.active { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 10px !important; 
        opacity: 1 !important; 
        visibility: visible !important; 
    }
    
    /* [핵심 수정] 세트 3 활성화 시: 최우선순위로 가로(좌우) 정렬 강제 적용 */
    .gallery_set.set3.active { 
        flex-direction: row !important; 
        justify-content: space-between !important; 
    }
    
    /* 높이 및 너비 지정 */
    .set1 .comp_top, .set1 .comp_bottom { height: 200px !important; }
    .set2 .comp_full { height: 410px !important; }
    .set3 .comp_left, .set3 .comp_right { width: calc(50% - 5px) !important; height: 350px !important; }

    /* 마스킹되는 Before 이미지 너비 교정 */
    .set1 .comp_slider .img_before, .set2 .comp_slider .img_before { width: 90vw !important; }
    .set3 .comp_slider .img_before { width: calc(45vw - 5px) !important; }

    /* 3. 화살표 버튼 */
    .nav_btn { 
        width: 35px !important; height: 50px !important; 
        background-color: rgba(255, 255, 255, 0.8) !important; 
        border-radius: 5px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    }
    .prev_btn { left: -10px !important; }
    .next_btn { right: -10px !important; }
    .nav_btn::before { width: 15px !important; height: 15px !important; top: 17px !important; left: 12px !important; border-width: 3px !important; }
    .next_btn::before { left: 5px !important; }
}

/* ===================================================================== */
/* --- 브랜드섹션 (태블릿) --- */
/* ===================================================================== */
@media (max-width: 1749px) {
    #section_02 { height: 80vh !important; min-height: 500px !important; }
    .brand_wrap_1920 { height: 100% !important; }
    .brand_item { min-height: 260px; }
    .hover_content img { width: 220px; height: 220px; }
    
    .hover_content { 
        opacity: 1 !important; 
        transform: translate(-50%, -50%) !important; 
    }
    
    .hover_content img { width: 220px; height: 220px; }
}

/* ── 6. 섹션06: 창업데이타 (태블릿) ────────────────────────────── */
/* 1. 태블릿 진입 구간 (1749px 이하) : 상단 여백 150px 사수 */
@media screen and (max-width: 1749px) {
    #section_data .data_inner { 
        padding-top: 150px !important; /* PC 버전과 동일한 상단 여백 확보 */
        padding-bottom: 100px !important;
    }
}

/* 2. 작은 태블릿 구간 (1440px 이하) */
@media screen and (max-width: 1440px) {
    #section_data { height: auto !important; padding: 60px 20px !important; }
    #section_data .data_inner { 
        width: 100% !important; 
        padding-top: 100px !important; /* 위쪽 여백 방어 */
    }
    
    .data_reference { position: static !important; display: block; text-align: center; margin-bottom: 20px; }
    .data_line { width: 100% !important; max-width: 850px !important; }
    
    .data_card_area { flex-wrap: wrap !important; gap: 20px !important; justify-content: center !important; }
    .card_small, .card_large { width: 100% !important; max-width: 700px !important; padding-left: 0 !important; align-items: center !important; }
}

/* 3. 모바일 구간 (767px 이하) */
@media screen and (max-width: 767px) {
    /* 🚨 모바일 상단 여백 방어 */
    #section_data .data_inner {
        padding-top: 80px !important; 
    }
    
    .data_sub_copy { font-size: 24px !important; }
    .data_title_box { flex-direction: column !important; gap: 15px !important; }
    .data_logo { width: 180px !important; height: auto !important; margin-right: 0 !important; }
    .data_main_title { font-size: 42px !important; }
    .data_desc { font-size: 20px !important; margin-bottom: 40px !important; }
    
    .data_card { height: 240px !important; }
    .card_icon { width: 60px !important; height: 60px !important; margin-right: 15px !important; }
    .card_title, .card_unit { font-size: 22px !important; }
    .card_value { font-size: 48px !important; }
    .card_bottom { margin-top: 25px !important; }
}

/* =========================================
   마진율 & 창업비용 반응형 (하단 안내문 추가 통합본)
========================================= */

/* 1. 태블릿 진입 구간 (1749px 이하) : 공통 클래스가 위쪽 여백을 0으로 만드는 현상 원천 차단 */
@media screen and (max-width: 1749px) {
    #section_margin_cost .mc_top_inner { padding-top: 50px !important; }
    /* 🚨 캡처 화면에서 타이틀이 위로 딱 붙던 진짜 원인을 해결하는 코드 🚨 */
    #section_margin_cost .mc_bottom_inner { padding-top: 100px !important; }
}

/* 2. 작은 태블릿 구간 (1440px 이하) : 세로 1열 배치로 전환 */
@media screen and (max-width: 1440px) {
    #section_margin_cost .mc_bottom_inner {
        padding-top: 100px !important; 
        flex-direction: column !important;
        align-items: center !important;
        gap: 80px !important;
    }
    #section_margin_cost .mc_bottom_bg { height: auto !important; padding-bottom: 80px !important; }

    #section_margin_cost .mc_col,
    #section_margin_cost .mc_frame_box {
        width: 100% !important;
        max-width: 700px !important;
    }
    #section_margin_cost .mc_frame_box {
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    #section_margin_cost .cost_row,
    #section_margin_cost .cost_dotted_line,
    #section_margin_cost .cost_inner_box {
        width: 100% !important;
        max-width: 600px !important;
        box-sizing: border-box !important;
    }

    /* ★ 추가: 하단 공통 안내문 태블릿 중앙 정렬 (절대위치 해제) ★ */
    #section_margin_cost .mc_bottom_notice {
        position: static !important; 
        transform: none !important;
        margin-top: -20px !important; 
        padding-bottom: 40px !important;
    }
}

/* 3. 모바일 구간 (767px 이하) */
@media screen and (max-width: 767px) {
    #section_margin_cost .mc_top_bg { height: auto !important; padding-bottom: 40px !important; }
    #section_margin_cost .mc_main_copy { font-size: 26px !important; line-height: 1.3 !important; }
    #section_margin_cost .mc_sub_copy { font-size: 15px !important; margin-top: 10px !important; word-break: keep-all !important; line-height: 1.4 !important; }
    
    /* 🚨 모바일 환경 상단 여백 방어 */
    #section_margin_cost .mc_bottom_inner {
        padding-top: 80px !important; 
        gap: 70px !important;
    }

    #section_margin_cost .mc_title_box {
        width: 160px !important;
        height: 40px !important;
        font-size: 20px !important;
        border-radius: 20px !important;
        z-index: 2 !important;
    }

    /* 모바일 프레임이 타이틀 텍스트를 침범하지 않도록 여유 확보 */
    #section_margin_cost .mc_frame_box {
        margin-top: -20px !important;
        padding-top: 40px !important;
        padding-bottom: 30px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #section_margin_cost .frame_right { padding-top: 0 !important; }

    #section_margin_cost .mc_graph_img {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: block !important;
        padding: 20px 0 !important;
    }

    #section_margin_cost .cost_row { height: auto !important; padding: 10px 0 !important; }
    #section_margin_cost .cost_icon { width: 40px !important; height: 40px !important; margin-right: 15px !important; flex-shrink: 0 !important; }
    #section_margin_cost .cost_lbl { font-size: 16px !important; }
    #section_margin_cost .cost_val { font-size: 28px !important; }

    /* 🚨 모바일 창업비용 내부 5대 항목 박스 탈출 방어 */
    #section_margin_cost .cost_inner_box {
        height: auto !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px 10px !important;
        padding: 15px 10px !important;
    }
    #section_margin_cost .inner_item { width: 28% !important; margin: 0 !important; }
    #section_margin_cost .inner_item img { width: 45px !important; height: 45px !important; margin: 0 auto 5px !important; display: block !important; }
    #section_margin_cost .inner_item span { font-size: 13px !important; letter-spacing: -0.5px !important; }

    #section_margin_cost .notice_txt { line-height: 1.4 !important; margin-top: 5px !important; font-size: 11px !important; text-align: center !important; }

    /* ★ 추가: 하단 공통 안내문 모바일 최적화 ★ */
    #section_margin_cost .mc_bottom_notice {
        font-size: 13px !important; 
        padding: 0 20px 40px !important; 
        word-break: keep-all !important;
        line-height: 1.4 !important;
    }
}

/* ── 8. 섹션08: 창업이벤트 (태블릿) ────────────────────────────── */
@media screen and (max-width: 1749px) {
    #section_event .event_inner {
        padding-top: 100px !important; 
    }
}

/* 1. 태블릿 구간 (1440px 이하) */
@media screen and (max-width: 1440px) {
    #section_event .event_inner { 
        width: 100% !important; 
        padding-left: 5% !important; 
        padding-right: 5% !important; 
    }
    #section_event .event_content_area { width: 100% !important; max-width: 880px !important; }
    
    #section_event .event_bg { background-position: 70% center !important; }
}

/* 2. 작은 태블릿 / 모바일 (1024px 이하) */
@media screen and (max-width: 1024px) {
    #section_event .event_bg { 
        background-position: left center !important; /* 배경을 왼쪽 밝은 여백 기준으로 당김 */
        padding-bottom: 60px !important; 
    }
    
    #section_event .event_inner { padding-top: 60px !important; }
    
    #section_event .event_main_title { font-size: 5vw !important; }
    #section_event .event_card_wrap { flex-wrap: wrap !important; justify-content: center !important; }
}

/* 3. 모바일 구간 (767px 이하) */
@media screen and (max-width: 767px) {
    #section_event .event_bg { 
        background-position: left center !important; /* 배경을 왼쪽 밝은 여백 기준으로 당김 */
        padding-bottom: 60px !important; 
    }
    
    #section_event .event_inner { padding-top: 60px !important; }
    
    #section_event .event_ribbon { width: 200px !important; height: auto !important; }
    
    #section_event .event_sub1 { font-size: 20px !important; margin-bottom: 15px !important; }
    #section_event .txt_grad { font-size: 28px !important; }
    #section_event .txt_grad_wrap::before, #section_event .txt_grad_wrap::after { width: 6px !important; height: 6px !important; top: -6px !important; }
    
    #section_event .event_main_title { font-size: 34px !important; margin-bottom: 15px !important; }
    #section_event .event_sub2 { font-size: 16px !important; line-height: 1.4 !important; word-break: keep-all; }
    
    #section_event .event_card_wrap { 
        flex-direction: column !important; 
        width: 100% !important; 
        align-items: center !important; 
    }
    #section_event .e_card { 
        width: 100% !important; 
        max-width: 320px !important; 
        height: 140px !important; 
    }
    
    #section_event .e_card_tit { font-size: 20px !important; margin-bottom: 5px !important; }
    #section_event .e_card_val { font-size: 45px !important; }
    #section_event .e_card_unit { font-size: 20px !important; }
}

/* ── 9. 섹션09: 창업안내 (태블릿) ────────────────────────────── */
@media (max-width: 1749px) {
    #section_04         { padding-bottom: 100px; height: auto !important; }
    /* 상단 배너와 본문 사이의 간격을 벌립니다 */
    .b_top_visual       { height: 120px; }
    .b_main_tit         { font-size: 40px; }
    .b_content_inner    {
        height: auto !important;
        /* [핵심] 첫 번째 숫자(상단 여백)를 180px로 키워 전체를 아래로 밀어냅니다 */
        padding: 180px 30px 80px !important; 
        display: flex;
        flex-direction: column; /* 요소들이 겹치지 않게 세로 정렬 보장 */
        align-items: flex-start;
    }
    /* [추가] 단계별 그리드 박스 자체를 타이틀에서 더 떨어뜨립니다 */
    .b_step_grid        { 
        margin-top: 50px !important; 
        gap: 20px 30px; 
    }
    .b_num              { font-size: 52px; width: 44px; }
    .b_step_tit         { font-size: 22px; }
    .b_step_sub         { font-size: 15px; }
    .b_img_box          { width: 220px; height: 80px; }
}

/* =========================================
   상세 창업문의 섹션 반응형
========================================= */

/* 1. 태블릿 구간 (1440px 이하) */
@media screen and (max-width: 1440px) {
    #section_inquiry_page .inner_1440 {
        padding: 0 5% !important;
    }
}

/* 2. 작은 태블릿 / 모바일 진입 (767px 이하) */
@media screen and (max-width: 767px) {
    /* 🚨 모바일에서는 고정 800px을 해제하여 잘림 현상 완벽 방지 🚨 */
    #section_inquiry_page {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    .inquiry_detail_wrap {
        padding: 40px 20px !important;
    }
    
    .inq_main_tit {
        font-size: 30px !important; /* 모바일 가독성을 위해 살짝 더 축소 */
        margin-bottom: 10px !important;
    }
    .inq_sub_tit {
        font-size: 12px !important;
        word-break: keep-all;
        line-height: 1.4;
    }
    
    /* 가로 2단 배열을 세로 1단으로 풀기 */
    .inq_row {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .inq_col input[type="text"],
    .inq_col select {
        height: 50px !important;
        font-size: 15px !important;
    }
    
    .radio_group {
        height: auto !important;
        padding: 5px 0;
    }
    
    .privacy_chk_box {
        justify-content: flex-start !important; /* 모바일에서는 좌측 정렬 */
    }
    
    #btn_detail_submit {
        height: 55px !important;
        font-size: 18px !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }
}

/* ===================================================================== */
/* --- 25년 섹션 (태블릿 / 모바일 반응형 최종 교정본) --- */
/* ===================================================================== */

/* ── 1. 태블릿 구간 (1749px 이하) ── */
@media screen and (max-width: 1749px) {
    .years_25_inner { 
        width: 100% !important; 
        height: 750px !important; /* 높이 적절히 조절 */
        overflow: hidden;
    }
    
    /* ▼ 글자 크기 조절 (자연스럽게 축소) ▼ */
    .txt_medium { 
        font-size: 38px !important; 
        margin-bottom: 40px !important; 
    }
    .txt_bold { 
        font-size: 60px !important; 
    }

    /* ▼ 뚝배기 크기 및 높이 조절 ▼ */
    .years_25_img_area {
        bottom: -220px !important; 
    }
    .years_25_img_area img { 
        width: 100% !important;
        max-width: 600px !important; /* 뚝배기 최대 크기 제한 */
        height: auto !important; /* 높이 고정을 풀어서 찌그러짐 방지 */
    }
}

/* ── 2. 작은 태블릿 구간 (1240px 이하) ── */
@media screen and (max-width: 1240px) {
    .years_25_wrap {
        height: auto !important;
        min-height: 700px !important; /* 800px은 너무 커서 700px로 축소 */
    }
    .years_25_inner { 
        padding-top: 150px !important; 
    }

    /* ▼ 글자 크기 조절 (1749px보다 작아지도록 수정) ▼ */
    .txt_medium { 
        font-size: 30px !important; 
        margin-bottom: 80px !important; 
    }
    .txt_bold { 
        font-size: 45px !important; 
    }

    /* ▼ 뚝배기 크기 및 높이 조절 ▼ */
    .years_25_img_area {
        bottom: -220px !important; /* 살짝 덜 올라오게 하여 텍스트 침범 방어 */
    }
    .years_25_img_area img { 
        width: 100% !important; 
        max-width: 600px !important; /* 300px은 너무 작아서 450px로 조정 */
        height: auto !important;
    }
}

/* ── 3. 모바일 구간 (767px 이하) ── */
@media screen and (max-width: 767px) {
    .years_25_wrap {
        height: 80vh !important; /* 1240px 구간의 설정이 넘어오지 않도록 모바일용 높이 강제 고정 */
        min-height: auto!important; 
    }
    .years_25_inner { 
        height: 100% !important; /* 100vh를 삭제하고 부모 높이(600px)를 완벽히 따라가도록 설정 */
        min-height: auto !important;
        padding-top: 50px !important; /* 텍스트 시작 위치 조절 */
        overflow: hidden;
        background-size: 400vw auto !important; 
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    /* ▼ 글자 크기 조절 ▼ */
    .txt_medium { 
        font-size: 20px !important; 
        margin-bottom: 20px !important; 
        word-break: keep-all; 
    }
    .txt_bold { 
        font-size: 25px !important; /* 모바일 가독성을 위해 살짝 조율 */
        line-height: 1.4 !important;
        word-break: keep-all; 
    }
    
    /* ▼ 뚝배기 크기 및 높이 조절 ▼ */
    .years_25_img_area {
        bottom: -150px !important; 
    }
    .years_25_img_area img { 
        width: 100% !important; 
        max-width: 600px !important; /* 텍스트와 겹치지 않게 뚝배기 최대 크기 축소 */
        height: auto !important;
        max-height: 100vh !important;
        object-fit: contain !important;
    }
}

/* ── 7. 섹션05: 매장찾기 (태블릿) ────────────────────────── */
@media (max-width: 1749px) {
    #section_05         { padding-bottom: 40px; }
    #section_05 .inner_1440 { padding: 0 20px; }
    .store_main_tit     { font-size: 36px; padding: 80px 0 24px; }
    .map_wrapper        { width: 100% !important; height: 560px; }
    .map_left_panel     { width: 300px; }
}


/* ── 8. 섹션06: 소식 (태블릿) ────────────────────────────── */
@media (max-width: 1749px) {
    #section_06 { padding: 50px 0 40px; }
    .news_inner_wrapper {
        width: 100% !important;
        padding: 0 20px !important;
        justify-content: flex-start;
        gap: 20px;
    }
    .news_top_row { width: 100% !important; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
    
    /* 갤러리 래퍼 및 컨텐츠 유동화 */
    .news_gallery_wrap { width: 100% !important; height: auto !important; }
    .gallery_contents { 
        width: 100% !important; 
        display: flex !important; 
        flex-wrap: nowrap !important; /* 태블릿까지는 줄바꿈 금지 (3열 유지) */
        gap: 10px !important; 
    }

    /* 카드 크기 조절: 3등분 */
    .gal_item { 
        width: 33.33% !important; 
        height: auto !important; 
        aspect-ratio: 480 / 600 !important; /* PC 비율 유지하며 축소 */
        border-radius: 10px;
    }

    /* 상단 타이틀 박스 비율 조정 */
    .gal_title_box { 
        width: 100% !important; 
        height: 100px !important; /* 높이 소폭 축소 */
    }
    .gal_logo_img { width: 80px !important; }
    .gal_title_text { font-size: 23px !important; }
}

/* ── 9. 섹션07: 언론보도 (태블릿) ── [수정: 중앙정렬 및 확대] ────── */
/* [1] 태블릿 해상도 (1749px 이하) */
@media (max-width: 1749px) {
    .media_inner_1400 {
        width: 100%;
        padding: 0 30px 0; /* 태블릿 상단 네비게이션 여백 확보 */
        box-sizing: border-box;
    }
    
    .media_img_link {
        width: 90%; /* 가로폭을 화면의 90%로 유연하게 설정 */
        height: 45vw; /* 화면 넓이에 비례하여 높이 유지 (약 2:1 비율) */
        max-height: 500px; /* 최대 높이 제한 */
    }
    
    .media_title_txt {
        font-size: 26px;
        padding: 0 20px;
        word-break: keep-all; /* 단어 단위로 줄바꿈되어 텍스트 깨짐 방지 */
        line-height: 1.4;
    }
    
    .media_date_txt {
        font-size: 18px;
        margin-bottom: 50px;
    }
}

@media (max-width: 1749px) {
    /* 태블릿: 이미지 가변 높이에 맞춰 닷 위치 자동 추적 */
    .media_dots { top: calc(min(45vw, 500px) - 30px) !important; }
}

@media (max-width: 767px) {
    /* 모바일: 모바일 이미지 비율(55vw)에 맞춰 닷 위치 조율 */
    .media_dots { top: calc(55vw - 25px) !important; }
    .m_dot { width: 12px; height: 12px; }
    .m_dot.active { width: 35px; }
}

/* ── 언론보도 슬라이더: 태블릿/모바일 터치 영역(Hit Area) 확대 ── */
@media (max-width: 1749px) {
    .m_dot {
        position: relative; /* 투명 보호막의 기준점 역할 */
    }
    
    .m_dot::after {
        content: '';
        position: absolute;
        /* 상하좌우 20px씩 투명한 터치 인식 공간 확장 */
        top: -20px;
        bottom: -20px;
        left: -20px;
        right: -20px;
        z-index: 20;
    }
}

/* ── 10. 섹션07: SHOP (태블릿) ── [수정: 중앙정렬 및 확대] ────── */
@media (max-width: 1749px) {
    #section_07 { 
        height: auto !important; 
        min-height: unset !important; 
        
        /* 2. 기존 정렬 유지 */
        display: flex;
        align-items: center; 
        justify-content: center;
        
        /* 3. 짤림 방지: 상하 여백을 넉넉히 주어 가맹문의 바와 겹치지 않게 함 */
        padding: 100px 0 150px !important; 
        
        /* 4. 기존 배경 유지 */
        background-size: cover !important;
        background-position: center !important;
    }

    .shop_content { 
        width: 100% !important; 
        max-width: 1200px; 
        padding: 0 50px; 
        min-height: auto; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .shop_left { display: none; }

    .shop_right { 
        margin-left: 0; 
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center; 
    }

    .jo_logo { width: 240px; height: auto; margin-bottom: 20px; }
    .pack_imgs { gap: 20px; margin-bottom: 40px; }
    .pack_imgs img { width: 140px; height: auto; }
    .shop_mid_text { margin-bottom: 40px; }
    .shop_mid_text p { font-size: 48px; line-height: 1.3; }
    .shop_bot_area { flex-direction: column; gap: 25px; }
    .shop_store_text p { font-size: 24px; text-align: center; }
    .shop_btn { width: 220px; height: 60px; }
}


/* ── 10. 가맹문의 고정 바 (태블릿) ───────────────────────── */
@media (max-width: 1749px) {
    #inquiry_fixed_bar { height: auto; }
    .inquiry_inner_1440 {
        width: 95%;
        flex-wrap: nowrap;
        padding: 10px 0;
        gap: 12px;
    }
    .inquiry_left       { margin-right: 0; flex-shrink: 0; }
    .inquiry_logo img   { width: 130px; }
    .inquiry_tit        { font-size: 20px; }
    .inquiry_right      { flex: 1; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
    .in_box             { height: 44px; flex: 1; min-width: 0; }
    .in_box input       { font-size: 14px; padding: 0 10px; }
    .name_box           { flex: 0.8; width: auto; }
    .tel_box            { flex: 1; width: auto; }
    .select_box         { flex: 1; width: auto; }
    .select_box select  { font-size: 14px; padding: 0 10px; }
    .agree_area         { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
    .agree_area label   { font-size: 12px; white-space: nowrap; line-height: 1; }
    .agree_link         { white-space: nowrap; }
    .agree_link br      { display: none; }
    .btn_inquiry_submit { height: 44px; width: 80px; font-size: 14px; flex-shrink: 0; }
}


/* ── 11. 푸터 (태블릿) ───────────────────────────────────── */
@media (max-width: 1749px) {
    #footer_wrap { 
        height: auto; 
        padding: 0 10px 20px; /* [수정] 상단 패딩 20px을 0으로 변경하여 틈 제거 */
        border-top: 1px solid #222; /* 구분을 위해 얇은 선 추가 (선택사항) */
    }
    /* 푸터 내부 로고들에 상단 여백을 주어 디자인 유지 */
    .f_logos { padding-top: 20px; }
}

/* 태블릿 (1749px 이하) 구역 하단에 추가(패밀리사이트) */
@media (max-width: 1749px) {
    #footer_wrap {
        height: auto;
        padding: 40px 0;
    }
    .footer_inner {
        padding: 0 20px;
    }
    .family_site_wrap {
        position: relative; /* 절대 위치 해제 */
        right: auto;
        bottom: auto;
        transform: none;
        margin: 25px auto 0; /* 모든 기업 정보 글자 밑으로 중앙 정렬 배치 */
        width: 220px;
        z-index: 1200; /* 문의하기 바 레이어 충돌 방지 */
    }
    .family_site_list {
        bottom: 44px; /* 태블릿에서도 목록이 위로 열려 가맹바에 차단되는 것을 방지 */
    }
}

/* ── 12. 서브: 등뼈소식 게시판 (태블릿) ─────────────────────────── */
@media (max-width: 1749px) {
    .sub_news_page { padding: 100px 0 60px; }
    .board_wrapper { width: 95% !important; margin: 0 auto; }
    .sub_news_logo { width: 200px; height: auto; }
    .news_table { width: 100%; border-top: 2px solid #222; }
    .news_table th, .news_table td { font-size: 16px; padding: 15px 10px; }
    
    /* 상세보기 모달 (태블릿) */
    .news_detail_content { width: 80% !important; max-height: 85vh; padding: 30px; }
    #view_title { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════
   B.  모바일  (max-width: 767px)
   ══════════════════════════════════════════════════════════════ */

/* ── 1-M. 헤더 (모바일) ───────────────────── */
@media (max-width: 767px) {
    #header_wrap        { height: 56px; }
    .logo img           { width: 120px; }
    .nav_menu,
    .header_call        { display: none !important; }

    .hamburger_btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        padding: 8px;
        background: none;
        border: none;
        margin-left: auto;
    }
    .hamburger_btn span {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform .3s, opacity .3s;
    }
    .hamburger_btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger_btn.open span:nth-child(2) { opacity: 0; }
    .hamburger_btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav_menu.mob_open {
        display: block !important;
        position: fixed;
        top: 56px; left: 0;
        width: 100%;
        background: rgba(0,0,0,0.96);
        z-index: 2000;
        padding: 10px 0 20px;
        border-top: 1px solid rgba(255,255,255,.15);
    }
    .nav_menu.mob_open ul {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .nav_menu.mob_open ul li a {
        display: block;
        padding: 14px 28px;
        font-size: 17px !important;
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: #fff !important;
    }
    .nav_menu.mob_open ul li:last-child a { border-bottom: 0; }
}


/* ── 2-M. 사이드 내비 (모바일 숨김) ──────────────────────── */
@media (max-width: 767px) {
    .side_nav_fixed { display: none !important; }
}

/* ── 4-M. 섹션02: 브랜드 (모바일) ───────────────────────── */
@media (max-width: 767px) {
    #section_02 {
        height: auto !important;
        min-height: unset !important;
        background: #1a1a1a !important;
    }
    .brand_wrap_1920 {
        flex-direction: column !important;
        height: auto !important;
    }
    .brand_item {
        height: 50vh;
        min-height: 220px;
        flex: none;
    }
    .brand_bg {
        width: 100%;
        height: 100%;
        background-size: 100% 100% !important; /* 이미지가 잘리지 않게 상자 크기에 맞춰 강제 축소 */
        background-position: center center !important; /* 이미지 중심을 상자 중앙에 맞춤 */
    }
    .hover_content { opacity: 1; transform: translate(-50%,-50%) !important; }
    .hover_content img { width: 160px; height: 160px; }
}

/* ── 6-M. 섹션04: 창업 (모바일) ──────────────────────────── */
@media (max-width: 767px) {
    #section_04         { padding-bottom: 30px; }
    .b_top_visual       { height: 80px; }
    .b_main_tit         { font-size: 28px; }
    .b_content_inner    { padding: 12px 14px 16px; display: block; }
    .b_step_grid        { grid-template-columns: 1fr !important; gap: 0; }
    .b_step_item {
        justify-content: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid #e5e5e5;
        gap: 10px;
    }
    .b_step_item:last-child { border-bottom: 0; }
    .b_num              { font-size: 36px; width: 30px; flex-shrink: 0; }
    .b_step_tit         { font-size: 16px; margin-bottom: 2px; }
    .b_step_sub         { font-size: 13px; }
    .b_img_box          { width: 110px; height: 50px; flex-shrink: 0; margin-left: auto; }
}


/* ── 7-M. 섹션05: 매장찾기 (모바일) ─────────────────────── */
@media (max-width: 767px) {
    #section_05         { padding-bottom: 30px; }
    #section_05 .inner_1440 { padding: 0 12px; }
    .store_main_tit     { font-size: 24px; padding: 66px 0 14px; }
    .map_wrapper {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #naver_map_container    { width: 100% !important; height: 240px !important; }
    .map_left_panel {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border-right: 0 !important;
        border-top: 2px solid #222;
    }
    .map_result_area    { max-height: 200px; overflow-y: auto; }
    .store_list_item    { padding: 10px 12px; }
    .st_name            { font-size: 15px; }
    .st_time            { font-size: 12px; }
    .st_addr, .st_tel   { font-size: 12px; }
}


/* ── 8-M. 섹션06: 소식 (모바일) ──────────────────────────── */
@media (max-width: 767px) {
    #section_06 { padding: 50px 0 30px; }
    .news_inner_wrapper { padding: 0 15px !important; }

    /* [해결 포인트] 등뼈소식 로고 크기를 언론보도(200px)와 동일하게 동기화 */
    .news_logo_img { width: 200px !important; height: auto !important; }

    /* 갤러리 컨텐츠: 세로로 쌓기 */
    .gallery_contents { 
        flex-direction: column !important; 
        gap: 20px !important; 
    }

    /* 카드 크기: 모바일 1열 꽉 차게 */
    .gal_item { 
        width: 100% !important; 
        height: auto !important;
        aspect-ratio: 480 / 500 !important; 
        border-radius: 10px;
    }

    /* 오타 교정 및 상단 타이틀 박스 비율 조정 */
    .gal_title_box { height: 90px !important; }
    .gal_logo_img { width: 80px !important; }
    .gal_title_text { font-size: 20px !important; }
}

/* ── 9-M. 섹션06: 언론보도 (모바일) ──────────────────────────── */
/* [2] 모바일 해상도 (767px 이하) */
@media (max-width: 767px) {
    .media_inner_1400 {
        padding: 80px 15px 0; /* 모바일 헤더 높이에 맞춘 여백 */
    }
    
    .media_title_area {
        margin-bottom: 30px;
    }
    
    .media_logo_img {
        width: 200px; /* 모바일 환경에 맞춰 로고 크기 축소 */
    }
    
    .media_img_link {
        width: 100%;
        height: 55vw; /* 모바일 환경에 맞춰 이미지 상하 비율 최적화 */
        margin-bottom: 15px;
        border-radius: 8px; /* 모바일에서 이미지가 부드럽게 보이도록 둥근 모서리 적용 */
    }
    
    .media_title_txt {
        font-size: 18px; /* 모바일 가독성에 맞춘 폰트 크기 축소 */
        padding: 0 10px;
        margin-bottom: 10px;
    }
    
    .media_date_txt {
        font-size: 14px;
    }
}


/* ── 10-M. 섹션07: SHOP (모바일) ── [수정: 중앙정렬 및 확대] ──── */
@media (max-width: 767px) {
    #section_07         { min-height: 100svh !important; padding: 60px 16px 80px; display: flex; align-items: center; justify-content: center; }
    .shop_content {
        flex-direction: column;
        position: static;
        min-height: auto;
        padding: 0 !important;
        justify-content: center;
        width: 100%;
    }
    .shop_left          { display: none; }
    .shop_right {
        margin-left: 0;
        align-items: center;
        text-align: center;
        width: 100%;
        padding-bottom: 0;
        justify-content: center;
    }
    .shop_top_imgs      { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; }
    .jo_logo            { width: 150px; height: auto; }
    .pack_imgs          { display: flex; gap: 8px; justify-content: center; width: 100%; padding: 0 15px; box-sizing: border-box; }
    .pack_imgs img      { width: 23%; max-width: 90px; height: auto;}
    .shop_mid_text      { margin-bottom: 30px; }
    .shop_mid_text p    { font-size: 24px; text-align: center; line-height: 1.4; }
    .shop_bot_area      { flex-direction: column; justify-content: center; gap: 20px; }
    .shop_store_text p  { text-align: center; font-size: 17px; }
    .shop_btn           { width: 180px; height: 52px; }
    .btn_border span    { font-size: 18px; }
}


/* ── 10-M. 가맹문의 바 (모바일) ── [수정: 고정해제 - 푸터 밑으로] ── */
@media (max-width: 767px) {
    #inquiry_fixed_bar { 
        position: relative !important; /* 화면 하단 고정 해제 */
        bottom: auto !important; 
        left: auto !important;
        padding: 40px 0; 
        background: #111; 
    }
    .inquiry_inner_1440 {
        width: 95%;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 0;
    }
    .inquiry_left {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .inquiry_logo img   { width: 120px; }
    .inquiry_tit        { font-size: 22px; }
    .inquiry_right      { width: 100%; gap: 10px; flex-direction: column; }
    .in_box             { height: 48px; width: 100% !important; }
    .in_box input       { font-size: 15px; }
    .name_box, .tel_box, .select_box { width: 100% !important; flex: none; }
    
    .agree_area         { width: 100%; justify-content: center; padding: 10px 0; }
    .agree_area label   { font-size: 13px; }
    .agree_link         { white-space: nowrap; }
    
    .btn_inquiry_submit { width: 100%; height: 55px; font-size: 18px; flex: none; }
    
    
    /* [수정] 탑버튼 위치 수정: 경계선 정중앙 배치 */
    .top_btn_wrap {
        display: block !important;
        position: absolute;
        top: 0; 
        left: 50%;
        /* translate(-50%, -50%)를 사용하여 버튼 높이의 절반만 위로 올림 */
        transform: translate(-50%, -50%); 
        z-index: 1200;
        /* 기존 고정 수치 제거 */
    }

    .btn_top_click img {
        width: 70px;
        height: 35px;
        display: block;
        vertical-align: bottom; 
    }
}

/* ── 11-M. 푸터 (모바일) ─────────────────────────────────── */
@media (max-width: 767px) {
    #footer_wrap    { padding: 30px 12px; border-top: 1px solid #000000; }
    .f_logos {
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: center !important; /* 화면 한가운데로 모으기 */
    gap: 20px 30px !important; /* 위아래 간격 20px, 양옆 간격 30px 확보 */
    width: 100% !important;
    margin: 0 auto !important;
}

.f_logos img {
    width: 120px !important; /* 사장님이 세팅하신 원본 가로 크기 강제 고정 */
    height: 30px !important; /* 사장님이 세팅하신 원본 세로 크기 강제 고정 */
    object-fit: contain !important; /* 찌그러짐 원천 차단 */
    display: block !important;
}
}

/* 모바일 (767px 이하) 구역 하단에 추가(패밀리사이트)*/
@media (max-width: 767px) {
    .family_site_wrap {
        margin: 20px auto 0;
        width: 100%;
        max-width: 260px;
    }
    .family_site_btn {
        height: 42px;
        font-size: 13px;
    }
    .family_site_list li a {
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* ── 12-M. 팝업 모달 (모바일) ────────────────────────────── */
@media (max-width: 767px) {
    .privacy_content    { width: 90%; padding: 24px 18px; }
    .privacy_content h3 { font-size: 18px; }
    .privacy_text       { font-size: 12px; line-height: 1.7; }
    .modal_close        { top: 12px; right: 16px; font-size: 36px; }
}

/* ── 13-M. 서브: 등뼈소식 게시판 (모바일) 원상복구 및 간격 수정 ────────────── */
@media (max-width: 767px) {
    .sub_news_page { padding: 80px 0 40px; }

    /* 1. 햄버거 메뉴 */
    .hamburger_btn { display: flex !important; }

    /* 2. 게시판 박스 (원상복구: 폭 100% + 하단 간격 확보) */
    .board_wrapper { 
        width: 100% !important; /* [핵심] 원래 코드로 복구. 쏠림 현상 즉시 해결 */
        margin: 0 auto 40px !important; 
        
        /* [핵심] 하단 패딩 80px로 숫자 번호와의 간격만 넓게 확보 */
        padding: 30px 15px 80px !important; 
        
        border-radius: 15px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }
    .board_top { margin-bottom: 25px; }
    .sub_news_logo { width: 140px; height: auto; }

    /* 3. 테이블 모바일 최적화 (정상 작동 코드 유지) */
    .news_table colgroup col:nth-child(1) { width: 45px !important; }
    .news_table colgroup col:nth-child(2) { width: auto !important; }
    .news_table colgroup col:nth-child(3) { width: 85px !important; }
    
    .news_table th, .news_table td { font-size: 13px; padding: 14px 5px; border-bottom: 1px solid #f2f2f2; }
    .td_title { text-align: left !important; }
    .td_title a { 
        display: block;
        max-width: 170px; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }

    /* 4. 페이지네이션 (간격 확보) */
    .pagination { 
        margin-top: 50px !important; 
        display: flex; 
        justify-content: center; 
        gap: 12px !important; 
    }
    .page_btn { 
        width: 36px !important; 
        height: 36px !important; 
        line-height: 34px !important; 
        text-align: center;
        font-size: 14px; 
        border: 1px solid #ddd; 
        display: inline-block;
        background: #fff;
    }
    .page_btn.active {
        background: #df0011 !important;
        color: #fff !important;
        border-color: #df0011 !important;
    }
}

    /* 상세보기 모달 (모바일 전용) */
    .news_detail_content { 
        width: 95% !important; 
        padding: 20px 15px !important; 
        border-radius: 10px !important; 
        height: auto !important;
        max-height: 90vh !important;
    }
    .detail_header { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee; }
    #view_title { font-size: 18px; line-height: 1.4; margin-bottom: 5px; font-weight: 600; }
    #view_date { font-size: 12px; color: #888; }
    
    .detail_body { padding: 10px 0; overflow-y: auto; max-height: 50vh; }
    #view_content { font-size: 14px; line-height: 1.6; color: #333; }
    .view_img_box img { margin-bottom: 15px !important; }

    .detail_footer { padding-top: 15px; }
    .btn_close_view { width: 100%; height: 48px; font-size: 16px; background: #222; color: #fff; border: 0; }


/* =============================================================
   C. 서브페이지: 브랜드 소개 (dpinfo.html) 완벽 비율 유지 반응형
============================================================= */

/* ── C-1. 태블릿 (max-width: 1749px) ───────────────────────── */
@media (max-width: 1749px) {
    /* 공통: 1440px 고정 해제 */
    .inner_1440 { width: 100% !important; max-width: 100% !important; padding: 0 5% !important; box-sizing: border-box !important; }

    /* 1. 비주얼 섹션: 비율 유지(Aspect-Ratio)로 하단 검은색 여백 완벽 해결 */
    #sub_brand_visual {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1920 / 900 !important; /* PC 원본 이미지 비율 강제 유지 */
        padding: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .visual_bg_obj {
        width: 100% !important; height: 100% !important;
        clip-path: none !important; background: rgba(0, 0, 0, 0.5) !important;
    }
    .visual_title {
        width: 40% !important; height: 50% !important;
        left: 50% !important; top: 50% !important;
        right: auto !important; transform: translate(-50%, -50%) !important;
        background-size: contain !important;
    }

    /* 2. 브랜드 스토리 */
    #sub_brand_story { height: auto !important; flex-direction: column !important; }
    .story_left {
        width: 100% !important; height: auto !important; padding: 8% 5% !important;
        align-items: center !important; text-align: center !important; justify-content: center !important;
    }
    .story_since { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }
    .story_since .black_bar { margin: 0 auto !important; }
    .story_right { width: 100% !important; height: 500px !important; }

    /* 3. 대표 메뉴: PC와 완벽히 동일한 4개씩 2줄 배치 유지 (비율 축소) */
    #sub_brand_menu { height: auto !important; padding: 5% 0 !important; }
    .menu_grid_wrap {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 4열 강제 */
        grid-template-rows: auto !important;
        gap: 2vw !important; /* 창 크기에 맞춰 간격도 줄어듦 */
    }
    .menu_card { width: 100% !important; height: auto !important; aspect-ratio: 200 / 286 !important; }

    /* 4. 4 POINT: PC 비율(1440x750) 그대로 축소하여 찌그러짐/위치 문제 완벽 해결 */
    #sub_brand_point { height: auto !important; padding: 5% 0 !important; }
    .point_contents {
        width: 100% !important; height: auto !important;
        display: flex !important; flex-wrap: nowrap !important;
        gap: 0 !important; justify-content: space-between !important;
        position: relative !important; bottom: auto !important;
    }
    .point_item {
        width: 25% !important; /* 4열 유지 */
        height: auto !important;
        aspect-ratio: 360 / 750 !important; /* 찌그러짐 방지: PC의 원본 박스 비율 강제 고정 */
        position: relative !important;
        padding: 0 !important;
    }
    /* 카피 박스 사이즈 & 위치 비율 변환 */
    .point_menu_box {
        width: 83.33% !important; /* 300px/360px */
        height: 53.33% !important; /* 400px/750px */
        position: absolute !important;
        top: 0 !important; left: 50% !important; transform: translateX(-50%) !important;
        padding-top: 6% !important;
    }
    /* 서클 이미지 사이즈 & 겹침 위치 비율 변환 */
    .point_circle_img {
        width: 100% !important; /* 360px/360px */
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* 원형 깨짐 방지 */
        position: absolute !important;
        /* 바닥에서 딱 100px(13.33%) 떨어져서 카피 박스와 적당히 겹치게 고정 */
        bottom: 13.33% !important; 
        left: 50% !important; transform: translateX(-50%) !important;
    }
    /* 폰트 크기 및 여백도 화면 크기에 맞춰 축소(vw) */
    .point_menu_box h4 { font-size: 2.77vw !important; margin-bottom: 0.7vw !important; }
    .point_line { width: 86.66% !important; height: 1px !important; margin-bottom: 1.4vw !important; }
    .point_menu_box p { font-size: 1.3vw !important; line-height: 1.5 !important; word-break: keep-all !important; }
}

/* ── C-2. 모바일 (max-width: 767px) ────────────────────────── */
@media (max-width: 767px) {
    .inner_1440 { padding: 0 3% !important; }

    /* 1. 비주얼 섹션: 모바일 화면에 맞춰 비율 살짝 조정 */
    #sub_brand_visual { aspect-ratio: 16 / 10 !important; } 
    .visual_title { width: 70% !important; height: 60% !important; }

    /* 2. 브랜드 스토리 */
    .story_left { padding: 12% 5% !important; }
    .story_since p, .story_main_copy p { font-size: 18px !important; line-height: 1.6 !important; }
    .story_right { height: 300px !important; }

    /* 3. 대표 메뉴: 모바일에서도 4개씩 2줄 완벽 유지 */
    .sub_menu_title { flex-direction: column !important; margin-bottom: 20px !important; }
    .sub_menu_title img { width: 150px !important; height: auto !important; }
    .sub_menu_title span { font-size: 28px !important; margin-left: 0 !important; margin-top: 10px !important; }
    .menu_grid_wrap { gap: 2vw !important; }

    /* 4. 4 POINT: 모바일 4열 완벽 비율 유지 */
    .point_title_wrap { flex-direction: column !important; margin-bottom: 6% !important; }
    .point_title_wrap img { width: 120px !important; height: auto !important; }
    .point_num { font-size: 28px !important; margin-right: 2px !important; }
    .point_txt { font-size: 24px !important; }

    /* 모바일에서 글자가 너무 작아져서 안 보이는 현상 방어 */
    .point_menu_box h4 { font-size: max(2.77vw, 10px) !important; margin-bottom: 2vw !important; }
    .point_line { margin-bottom: 2vw !important; }
    .point_menu_box p { font-size: max(1.3vw, 7px) !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; }
}


/* =============================================================
   D. 서브페이지: 삼백돼지국밥 (sbinfo.html) 반응형
============================================================= */

/* ── D-1. 태블릿 (max-width: 1749px) ───────────────────────── */
@media (max-width: 1749px) {
    .inner_1440 { width: 100% !important; max-width: 100% !important; padding: 0 5% !important; box-sizing: border-box !important; }

    /* 1. 비주얼 섹션: 비율 유지 및 중앙 정렬 전환 */
    #sub_sb_visual {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1920 / 900 !important;
        padding: 0 !important;
    }
    .sb_visual_bg_obj {
        width: 100% !important;
        clip-path: none !important; /* 사선 제거 */
        background: rgba(0, 0, 0, 0.5) !important;
    }
    .sb_visual_title {
        width: 40% !important;
        height: 50% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        background-size: contain !important;
    }

    /* 2. 브랜드 스토리: 세로 배치 및 텍스트 중앙 정렬 */
    #sub_sb_story { height: auto !important; flex-direction: column !important; }
    .sb_story_left { width: 100% !important; height: 500px !important; }
    .sb_story_right {
        width: 100% !important; height: auto !important;
        padding: 8% 5% !important;
        justify-content: center !important; /* 중앙 배치 */
    }
    .sb_story_txt_wrap p {
        text-align: center !important; /* 중앙 정렬로 변경 */
        font-size: 2.5vw !important; /* 화면비에 맞춘 폰트 축소 */
    }

    /* 3. 대표 메뉴: 3열 유지하며 비율 축소 */
    #sub_sb_menu { height: auto !important; }
    
    /* [수정] 좌우 패딩을 제거하여 카드가 화면에 꽉 차게 배치 */
    #sub_sb_menu .inner_1440 { padding: 0 !important; width: 100% !important; max-width: 100% !important; }
    
    .sb_menu_header_box { height: auto !important; padding: 40px 0 !important; position: relative !important; }
    .header_flex { flex-direction: column !important; gap: 10px !important; }
    .header_flex img { width: 200px !important; height: auto !important; }
    .sb_menu_main_tit { font-size: 40px !important; margin-left: 0 !important; }

    /* [수정] 여백 제거 및 정확한 3등분으로 빈 공간 차단 */
    .sb_menu_grid { width: 100% !important; height: auto !important; margin: 0 !important; }
    .sb_card { 
        width: 33.3333% !important; 
        height: auto !important; 
        aspect-ratio: 480 / 900 !important; 
    }
    
    /* [수정] 태블릿 호버 상시 노출 추가 */
    #sub_sb_menu .sb_card_hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.5) !important; }
    
    .sb_card_txt .sub_txt { font-size: 2.5vw !important; }
    .sb_card_txt .main_txt { font-size: 4vw !important; }

    /* 4. 3 POINT: 3열 유지 및 비율 고정 축소 */
    #sub_sb_point { height: auto !important; padding-bottom: 80px !important; }
    .sb_point_contents { width: 100% !important; height: auto !important; }
    .sb_point_item { 
        width: 33.33% !important; 
        height: auto !important;
        aspect-ratio: 480 / 800 !important; /* 비율 고정 */
    }
    .bg_num { font-size: 15vw !important; left: 50% !important; }
    .sb_point_txt_box p { font-size: 2vw !important; }
    
    .sb_point_img_box {
        width: 90% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        bottom: 0 !important;
        position: relative !important; /* 흐름에 맞게 배치 */
        margin-top: 30px !important;
    }
}

/* ── 삼백돼지국밥 매장소개 섹션 반응형 (겹침/깨짐 완벽 방지) ───────────────── */
@media (max-width: 1920px) and (min-width: 768px) {
    /* 1. 스케일링 버그 원천 차단: 전체 높이를 1920:900 원본 비율로 강제 고정 */
    #sub_sb_store {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1920 / 900 !important;
        min-height: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* 2. 도화지를 화면 100%에 맞추고 transform 완전히 해제 */
    .store_canvas {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important; 
        left: 0 !important;
        transform: none !important; 
    }

    /* 3. 타이틀 위치 및 폰트 크기를 화면비에 맞춰 동기화 */
    .store_title {
        top: 5.5% !important; /* 50px / 900px */
        font-size: 2.6vw !important; /* 50px / 1920px */
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* 4. 내부 1440 가이드라인을 75% 비율로 유지 (1440 / 1920 = 75%) */
    .store_inner_1440 {
        width: 75% !important;
        height: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 5. 카드 리스트 꽉 차게 배치 */
    .store_list {
        width: 100% !important;
        padding-top: 5.2vw !important; 
        display: flex !important;
        justify-content: space-between !important;
    }

    /* 6. 카드 크기를 고정 픽셀이 아닌 비율(Aspect-Ratio)로 완벽 고정하여 짤림 차단 */
    .store_card {
        width: 31.94% !important; /* 460px / 1440px = 31.94% */
        height: auto !important;
        aspect-ratio: 460 / 600 !important; 
        margin: 0 !important;
    }

    /* 7. 카드 내부 로고 및 텍스트 유동화 */
    .card_overlay {
        width: 100% !important;
        height: 16.66% !important; /* 100px / 600px */
    }
    .logo_sbsb { width: 18.4% !important; height: auto !important; margin-right: 4% !important; } 
    .logo_sumbawi { width: 51% !important; height: auto !important; margin-left: 4% !important; } 
    .store_name { font-size: 1.56vw !important; } 
}

/* ── 삼백돼지국밥 리뷰 섹션 반응형 (겹침/깨짐 완벽 방지) ───────────────── */
/* =========================================================================
   [최종] 리뷰 섹션 반응형 (1920px ~ 768px 구간 통합) : 5개 원본 유지 및 전체 축소
========================================================================= */

/* 1. [전역 해제] 1240px 이하로 떨어질 때 페이지 전체 레이아웃 잠금장치 해제 */
@media screen and (max-width: 1240px) {
    html, body, #wrap { 
        min-width: 0 !important; 
        width: 100% !important; 
        overflow-x: hidden !important; 
    }
}

/* 2. [PC & 태블릿 통합 구간] 1920px ~ 768px : 원본 구조 박제 후 화면 폭에 비례하여 축소 */
@media screen and (max-width: 1920px) and (min-width: 768px) {
    
    #sub_sb_review { 
        width: 100% !important; 
        height: auto !important; /* 🚨 억지 높이 고정 완전 해제 */
        display: flex !important;
        align-items: flex-start !important; 
        justify-content: center !important;
        overflow: visible !important; /* 🚨 반토막 절단 원천 차단 (다 보여줌) */
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .rv_inner_1700 { 
        width: 1920px !important; 
        height: 900px !important; /* 내부 콘텐츠(핸드폰)의 실제 높이 그대로 인정 */
        flex-shrink: 0 !important;
        
        /* 🔥 THE MAGIC FIX: transform의 모든 문제를 해결하는 완벽한 비율 축소 */
        zoom: calc(100vw / 1920) !important; 
        
        transform: none !important; /* 🚨 문제아 transform 완벽 폐기 */
        position: static !important; /* 🚨 공중에 띄우는 꼼수 폐기 */
        
        margin: 0 !important; 
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 하위 슬라이더 설정은 사장님 원본 그대로 유지 */
    .rv_slider_container {
        width: 1700px !important;
        height: 600px !important;
        transform: none !important;
        position: relative !important;
        margin: 0 auto !important; 
    }

    .rv_track_window { 
        width: 100% !important; 
        height: 100% !important;
        left: 0 !important; 
        transform: none !important; 
        overflow: hidden !important; /* 요건 가로 슬라이드 넘침 방지용이므로 유지 */
    }
}

/* ── D-2. 모바일 (max-width: 767px) ────────────────────────── */
@media (max-width: 767px) {
    /* 1. 비주얼 섹션 */
    #sub_sb_visual { aspect-ratio: 16 / 11 !important; }
    .sb_visual_title { width: 80% !important; }

    /* 2. 브랜드 스토리 */
    .sb_story_left { height: 300px !important; }
    .sb_story_txt_wrap p { font-size: 20px !important; }

    /* 3. 대표 메뉴: 모바일은 가독성을 위해 1열 세로 배치 */
    #sub_sb_menu .inner_1440 { padding: 0 !important; }
    .sb_menu_grid { flex-direction: column !important; }
    
    /* [수정요청 반영] 카드 비율을 16/9에서 1/1(정사각형)로 변경하여 세로 높이 확보 */
    .sb_card { width: 100% !important; aspect-ratio: 1 / 1 !important; } 
    
    .sb_card_txt .sub_txt { font-size: 18px !important; }
    .sb_card_txt .main_txt { font-size: 30px !important; }
    .sb_card_hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.5) !important; }

    /* 4. 3 POINT: 세로 배치 전환 */
    /* [수정요청 반영] 타이틀과 로고가 가로로 길어 짤리는 현상 방지를 위해 세로 정렬 및 크기 축소 추가 */
    .sb_point_title_wrap { flex-direction: column !important; gap: 10px !important; }
    .sb_point_title_wrap img { width: 180px !important; height: auto !important; }
    .num_3 { font-size: 45px !important; }
    .txt_point { font-size: 35px !important; }

    .sb_point_contents { flex-direction: column !important; align-items: center !important; }
    .sb_point_item { width: 100% !important; aspect-ratio: auto !important; margin-bottom: 60px !important; }
    .bg_num { font-size: 120px !important; }
    .sb_point_txt_box p { font-size: 22px !important; }
    .sb_point_img_box { width: 280px !important; }
}

/* ── 삼백돼지국밥 매장소개 섹션 반응형 (모바일: 1개 노출) ───────────────── */
@media (max-width: 767px) {
    #sub_sb_store {
        width: 100% !important;
        height: auto !important; /* 세로로 길어지므로 높이 해제 */
        padding: 60px 0 80px !important;
        position: relative !important;
    }

    /* 모바일에서는 고정 도화지 방식 해제 */
    .store_canvas {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 타이틀 위치 및 크기 조정 */
    .store_title {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        font-size: 32px !important;
        margin-bottom: 40px !important;
        text-align: center;
    }

    .store_inner_1440 {
        width: 100% !important;
        padding: 0 20px !important;
        height: auto !important;
    }

    /* 카드 리스트를 세로 정렬로 변경 */
    .store_list {
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 0 !important;
        gap: 30px !important; /* 카드 사이 간격 */
    }

    /* 카드 모바일 사이즈 최적화 */
    .store_card {
        width: 100% !important;
        max-width: 400px; /* 너무 커지지 않게 제한 */
        height: 520px !important; /* 모바일용 높이 */
    }

    .card_overlay {
        width: 100% !important;
        height: 80px !important; /* 상단 바 높이 소폭 축소 */
    }

    .logo_sbsb { width: 65px !important; height: auto !important; margin-right: 15px !important; }
    .logo_sumbawi { width: 180px !important; height: auto !important; margin-left: 15px !important; }
    .store_name { font-size: 22px !important; }
}


/* ── 삼백돼지국밥 리뷰 섹션 반응형 (모바일: 1개 노출) ───────────────── */
/* [모바일 구간] 767px 이하 (1개 노출) */
@media (max-width: 767px) {
    /* 1. 억지로 고정했던 부모 높이 완전 해제 (겹침 원인 제거) */
    #review_section {
        height: auto !important;
        min-height: auto !important;
    }

    /* 2. Flex를 Block으로 바꿔서 요소들이 순서대로 차곡차곡 쌓이게 함 */
    #sub_sb_review {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 50px 0 0 !important; /* 상단 여백만 남김 */
        display: block !important;
        overflow: hidden;
    }

    .rv_inner_1700 {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        transform: none !important;
    }

    /* 3. 상단 텍스트 마진 및 크기 조정 */
    .rv_copy_area {
        margin-bottom: 20px !important;
        text-align: center;
    }

    .rv_copy_area p {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }

    /* 4. 슬라이더 카드 스케일링 및 하단 여백 교정 */
    .rv_slider_container {
        width: 100vw !important;
        height: 600px !important;
        margin: 0 auto !important; /* 가로 중앙 정렬 */
        
        /* 크기 축소 (0.75 = 75% 크기) - 여기서 숫자로 크기 조절 가능 */
        transform: scale(0.75) !important;
        transform-origin: top center !important;
        
        /* [핵심] 스케일이 줄어들면서 하단에 남는 빈 껍데기 공간(150px)을 음수 마진으로 끌어올림 */
        /* 아래쪽 여백을 조금 더 주고 싶다면 -80px, 더 줄이고 싶다면 -120px로 조절 */
        margin-bottom: -100px !important;
    }

    .rv_track_window {
        width: 100vw !important;
        left: 0 !important;
        transform: none !important;
    }

    .rv_arrow { display: none !important; }
}

/* =============================================================
   [fwinfo] 태블릿 & 모바일 반응형 완벽 대응
============================================================= */

/* ── A. 태블릿 (max-width: 1749px) ────────────────────────── */
@media (max-width: 1749px) {
    /* 1. 헤더 터치 대응 (PC의 Hover 효과 무력화) */
    .fw_header:hover .fw_sub_bg { height: 0 !important; }
    .fw_header:hover .fw_sub { opacity: 0 !important; visibility: hidden !important; }
    
    /* JS에서 추가하는 is_active 클래스에만 확실히 반응하도록 우선순위 강화 (#wrap 추가) */
    #wrap .fw_header.is_active .fw_sub_bg { height: 230px !important; }
    #wrap .fw_header.is_active .fw_sub { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

    .fw_header_inner { width: 95% !important; gap: 30px !important; }
    .fw_logo { width: 140px !important; }
    .fw_gnb { gap: 30px !important; }

    /* 2. 메인 비주얼 (이미지 짤림 완벽 방지) */
    .fw_visual_sec { min-width: 100% !important; }
    .fw_visual_img { 
        height: auto !important; 
        aspect-ratio: 1920 / 500 !important; /* 원본 비율 고정 */
        background-size: 100% auto !important; /* 화면 가로폭에 맞춰 완벽히 축소 */
        background-repeat: no-repeat !important;
    }
    .fw_visual_copy_box { height: 200px !important; }
    .fw_main_copy { font-size: 34px !important; }

    /* 3. 영상 섹션 */
    .fw_video_sec { height: auto !important; padding-bottom: 100px !important; }
    .fw_video_inner { width: 100% !important; height: auto !important; aspect-ratio: 1440 / 675 !important; }
    .play_icon { width: 100px !important; height: 100px !important; border: 2px solid #fff !important; }
    .fw_video_controls { bottom: 20px !important; right: 20px !important; }
}


/* ── B. 모바일 (max-width: 767px) ──────────────────────────── */
@media (max-width: 767px) {
    /* 1. 헤더 & 햄버거 메뉴 */
    .fw_header { height: 60px !important; }
    .fw_header_inner { width: 95% !important; height: 60px !important; justify-content: space-between !important; gap: 0 !important; }
    
    /* 기존 PC 메뉴 숨김 */
    .fw_gnb, .fw_sub_bg { display: none !important; }

    /* 햄버거 버튼 디자인 */
    .hamburger_btn {
        display: flex !important; flex-direction: column; gap: 6px; justify-content: center;
        background: none; border: none; cursor: pointer; z-index: 2100;
        width: 25px; height: 20px; padding: 0; margin-right: 10px;
    }
    .hamburger_btn span { width: 100%; height: 2px; background: #000; transition: 0.3s; }
    .hamburger_btn.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger_btn.open span:nth-child(2) { opacity: 0; }
    .hamburger_btn.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* [핵심] 메뉴 열릴 때 헤더 풀스크린 및 내부 정렬 (겹침 원천 방지) */
    .fw_header.mob_menu_active {
        height: 100vh !important; position: fixed !important; top:0; left:0; width:100%; 
        background:#fff !important; z-index:9999 !important;
    }
    .fw_header.mob_menu_active .fw_header_inner {
        height: 100vh !important; flex-wrap: wrap !important; align-content: flex-start !important; 
        overflow-y: auto !important; padding-bottom: 50px !important;
    }

    /* [핵심] 로고(1) - 버튼(2) - 왼쪽메뉴(3) - 오른쪽메뉴(4) 순서 강제 배치 */
    .fw_header.mob_menu_active .fw_logo { order: 1 !important; margin-top: 7px !important; }
    .fw_header.mob_menu_active .hamburger_btn { order: 2 !important; margin-top: 20px !important; }
    .fw_header.mob_menu_active .fw_gnb:nth-of-type(1) { order: 3 !important; margin-top: 10px !important; }
    .fw_header.mob_menu_active .fw_gnb:nth-of-type(2) { order: 4 !important; }
    
    /* 모바일 배경 스크롤 차단 */
    body.no_scroll { overflow: hidden !important; }

    /* 모바일 메뉴 (더이상 겹치지 않고 위아래로 자연스럽게 배치됨) */
    .fw_gnb.mob_open {
        display: block !important; position: static !important; 
        width: 100% !important; height: auto !important;
        background: transparent !important; padding: 0 !important; margin: 0 !important;
    }
    .fw_gnb.mob_open > li { width: 100% !important; border-bottom: 1px solid #eee !important; display: block !important; }
    
    /* 메인메뉴 폰트 및 간격 최적화 */
    .fw_gnb.mob_open > li > a { 
        display: block !important; padding: 15px 10px 5px 10px !important; 
        font-size: 18px !important; color: #000 !important; font-weight: bold !important; white-space: nowrap !important; 
    }

    /* 모바일 소메뉴 영역 */
    .fw_sub {
        position: static !important; transform: none !important; width: 100% !important; 
        display: none !important; padding: 0 !important; margin: 0 !important;
        opacity: 1 !important; visibility: visible !important; background: transparent !important; 
    }
    /* 소메뉴 열림 처리 */
    .fw_gnb.mob_open .fw_sub { display: block !important; padding: 0 10px 15px 10px !important; }
    .fw_gnb.mob_open .fw_sub li { border-bottom: none !important; display: block !important; }
    
    /* 소메뉴 폰트, 간격 및 '-' 표시 */
    .fw_gnb.mob_open .fw_sub li a { 
        display: block !important; font-size: 15px !important; color: #555 !important; font-weight: normal !important; 
        padding: 4px 10px !important; border-bottom: none !important; white-space: nowrap !important; 
    }
    .fw_gnb.mob_open .fw_sub li a::before { content: '- ' !important; }
    .fw_header:hover .fw_sub { opacity: 1 !important; visibility: visible !important; }

    /* 2. 메인 비주얼 */
    .fw_visual_img { height: auto !important; aspect-ratio: 1920 / 500 !important; background-size: 100% auto !important; }
    .fw_visual_copy_box { height: 120px !important; }
    .fw_main_copy { font-size: 20px !important; padding: 0 10px; text-align: center; }

    /* 3. 영상 섹션 - 재생 버튼 중앙 정렬 및 간격 교정 */
    .fw_video_sec { padding-bottom: 0 !important; }
    .fw_video_inner { aspect-ratio: 16 / 9 !important; }

    /* 재생 버튼 전체 래퍼: 수직 중앙 정렬 강제 */
    .fw_play_btn_wrap { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
        width: 100% !important; 
    }

    /* 재생 버튼 원: 가로 중앙 정렬 강제 */
    .play_icon { 
        width: 60px !important; 
        height: 60px !important; 
        border-width: 2px !important; 
        margin: 0 auto !important; /* 가로 중앙 고정 */
        display: block !important; 
        position: relative !important;
    }

    /* 아이콘 내부 삼각형: 모바일 크기에 맞춰 정교하게 재배치 */
    .play_icon::after { 
        top: 50% !important; 
        left: 53% !important; /* 55%에서 53%로 미세 조정 (쏠림 방지) */
        transform: translate(-50%, -50%) !important;
        border-top-width: 10px !important; 
        border-bottom-width: 10px !important; 
        border-left-width: 16px !important; 
    }

    /* 플레이 텍스트: 아이콘과 수직 중앙 정렬 */
    .play_txt { 
        font-size: 13px !important; 
        margin-top: 12px !important; 
        display: block !important; 
        text-align: center !important; 
        width: 100% !important; 
        white-space: nowrap !important;
    }
}
    
    
/* =============================================================
   [fwinfo] 회사연혁: 태블릿 & 모바일 반응형 완벽 대응 (진짜 최종본)
============================================================= */

/* ── B. 태블릿 (1749px ~ 768px) : 이미지 하단 정렬 & 동그라미 절대 추적 ── */
@media (max-width: 1749px) and (min-width: 768px) {
    .history_inner_1440 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4vw !important;
        overflow: hidden !important; 
    }
    .center_bar { display: none !important; }
    
    /* CSS 기둥 그리기 */
    .history_inner_1440::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
        width: 4px; background: #a8c0b2; transform: translateX(-50%); z-index: 1;
    }

    div.history_row[class*="item_"] { 
        margin-top: 0 !important; 
        margin-bottom: 70px !important; 
        position: relative !important; 
    }
    
    /* 50% 분할 및 패딩 고정 */
    div.history_row[class*="item_"] .row_content {
        width: 50% !important; max-width: 50% !important; min-width: 0 !important;   
        flex: 1 1 50% !important; box-sizing: border-box !important;
        padding-top: 0 !important; padding-bottom: 0 !important;
    }

    div.history_row.left[class*="item_"] .row_content { padding-right: 40px !important; padding-left: 0 !important; text-align: right !important; }
    div.history_row.right[class*="item_"] .row_content { padding-left: 40px !important; padding-right: 0 !important; text-align: left !important; }

    /* 💡 [핵심 1] 사용자 요청: 이미지와 텍스트를 하단(바닥) 기준으로 나란히 정렬 */
    div.history_row[class*="item_"] .top_group, 
    div.history_row[class*="item_"] .flex_row {
        display: flex !important;
        align-items: flex-end !important; /* 중앙이 아닌 하단(바닥) 맞춤 */
        width: 100% !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
    }
    div.history_row.left[class*="item_"] .top_group { justify-content: flex-end !important; }
    div.history_row.right[class*="item_"] .top_group, 
    div.history_row.right[class*="item_"] .flex_row { justify-content: flex-start !important; }

    /* 💡 [핵심 2] 동그라미를 '연도 숫자(.year_num)' 자체에 이식하여 탈출 원천 차단 */
    .year_num {
        position: relative !important; /* 동그라미의 닻(Anchor) 역할 */
        font-size: 32px !important; 
        line-height: 1 !important; 
        margin: 0 !important; 
        padding-top: 0 !important; 
    }
    
    /* 좌측 아이템 동그라미 */
    div.history_row.left[class*="item_"] .year_num::after {
        content: ''; position: absolute;
        right: -49px; /* 여백 40px + 동그라미 반지름 9px 정확히 일치 */
        top: 50%;
        transform: translateY(-50%); /* 연도 숫자의 수직 중앙에 완벽히 배치 */
        width: 18px; height: 18px; background: #fff;
        border: 5px solid #326649; border-radius: 50%;
        box-sizing: border-box !important; z-index: 2;
    }

    /* 우측 아이템 동그라미 (2005년 포함) */
    div.history_row.right[class*="item_"] .year_num::after {
        content: ''; position: absolute;
        left: -49px; 
        top: 50%;
        transform: translateY(-50%);
        width: 18px; height: 18px; background: #fff;
        border: 5px solid #326649; border-radius: 50%;
        box-sizing: border-box !important; z-index: 2;
    }
    
    /* 이전의 잘못된 그룹 단위 동그라미 일괄 삭제 방어막 */
    div.history_row[class*="item_"]::before,
    div.history_row[class*="item_"] .top_group::after,
    div.history_row[class*="item_"] .flex_row::after { display: none !important; }

    /* 이미지 사이즈 비율 축소 유지 */
    div.history_row[class*="item_"] img {
        flex: 0 0 auto !important; width: 15vw !important; max-width: 180px !important;
        height: auto !important; object-fit: contain !important; margin: 0 !important;
    }
    img.img_2005 { width: 22vw !important; max-width: 250px !important; } 

    .copy_txt { 
        font-size: 16px !important; word-break: keep-all !important; line-height: 1.4 !important; 
        margin-top: 10px !important; 
    }
    
    div.history_row.left[class*="item_"] .text_group { align-items: flex-end !important; text-align: right !important; }
    div.history_row.right[class*="item_"] .text_group { align-items: flex-start !important; text-align: left !important; }
    div.history_row.left[class*="item_"] .copy_txt { text-align: right !important; }
}
    
/* ── 모바일 (767px 이하) : 이미지 숨김 및 절대좌표 1열 정렬 ── */
@media (max-width: 767px) {
    .fw_history_section { padding-top: 30px !important; padding-bottom: 50px !important; }
    .history_title_box { width: 180px !important; height: 50px !important; margin-bottom: 30px !important; }
    .history_title_box h2 { font-size: 28px !important; }

    .center_bar, div.history_row img { display: none !important; }

    .history_inner_1440 {
        width: 100% !important;
        padding: 0 !important;
        position: relative !important;
    }

    .history_inner_1440::before {
        content: ''; position: absolute; top: 0; bottom: 0; left: 30px;
        width: 4px; background: #a8c0b2; transform: translateX(-50%); z-index: 1;
    }

    div.history_row[class*="item_"] {
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        padding-left: 60px !important; 
        position: relative !important;
    }

    div.history_row::before {
        content: ''; position: absolute; top: 8px; left: 30px;
        width: 16px; height: 16px; background: #fff;
        border: 4px solid #326649; border-radius: 50%;
        transform: translate(-50%, 0); box-sizing: border-box !important; z-index: 2;
    }

    div.history_row.left[class*="item_"] .row_content, 
    div.history_row.right[class*="item_"] .row_content { 
        width: 100% !important; padding: 0 !important; text-align: left !important; 
    }
    .text_right, .text_left { text-align: left !important; }

    .top_group, .flex_row { display: block !important; gap: 0 !important; }

    .year_num { display: block !important; font-size: 26px !important; margin-bottom: 5px !important; line-height: 1 !important; text-align: left !important; }
    .copy_txt { display: block !important; font-size: 15px !important; line-height: 1.4 !important; margin-top: 0 !important; text-align: left !important; }
}

/* =============================================================
   [fwinfo] 제품소개 (fw_pro.html) 반응형 대응
============================================================= */

/* ── A. 태블릿 (1749px ~ 768px) ── */
@media (max-width: 1749px) {
    .fw_pro_section {
        min-width: 100% !important;
        height: auto !important; /* 고정 높이 해제 */
        padding-top: 40px !important;
        padding-bottom: 150px !important; /* 하단 가맹바 공간 확보 */
    }

    .pro_title_box {
        width: 220px !important;
        height: 60px !important;
    }
    .pro_title_box h2 {
        font-size: 35px !important;
    }

    /* 절대 위치 해제 및 유동적 너비 설정 */
    .pro_inner_1440 {
        width: 95% !important;
        position: relative !important; /* bottom: 250px 해제 */
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 50px auto 0 !important;
        flex-wrap: wrap !important; /* 카드 줄바꿈 허용 */
        justify-content: center !important; /* 중앙 정렬 */
        gap: 40px 2% !important;
    }

    /* 제품 카드 사이즈 조절 (3열 배치를 기본으로 설정) */
    .pro_card {
        width: 30% !important; /* 3개씩 배치 */
        min-width: 260px !important;
    }

    /* 이미지 박스 비례 축소 */
    .pro_img_box {
        width: 100% !important;
        max-width: 233px !important;
        height: auto !important;
        aspect-ratio: 233 / 210;
    }

    .pro_line {
        width: 100% !important;
        max-width: 260px !important;
    }
}

/* ── B. 모바일 (767px 이하) ── */
@media (max-width: 767px) {
    .fw_pro_section {
        padding-top: 30px !important;
        padding-bottom: 100px !important;
    }

    .pro_title_box {
        width: 180px !important;
        height: 50px !important;
    }
    .pro_title_box h2 {
        font-size: 28px !important;
    }

    .pro_inner_1440 {
        width: 90% !important;
        margin-top: 40px !important;
        gap: 60px 0 !important; /* 상하 간격 확대 */
    }

    /* 모바일에서는 1열 세로 배치 */
    .pro_card {
        width: 100% !important;
    }

    .pro_img_box {
        max-width: 200px !important; /* 이미지 살짝 축소 */
        margin-bottom: 15px !important;
    }

    .pro_label {
        width: 180px !important;
        height: 32px !important;
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    .pro_specs {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    .pro_line {
        margin-bottom: 10px !important;
    }

    .pro_desc {
        font-size: 13px !important;
    }
}


/* =============================================================
   [fwinfo] 오시는 길 (fw_road.html) 반응형 대응
============================================================= */

/* ── A. 태블릿 (1749px ~ 768px) ── */
@media (max-width: 1749px) {
    .fw_road_section {
        min-width: 100% !important;
        height: auto !important; /* 고정 높이 1800px 해제 */
        padding-top: 40px !important;
        padding-bottom: 120px !important;
    }

    /* 타이틀 박스 축소 */
    .road_title_box {
        width: 240px !important;
        height: 60px !important;
        margin-bottom: 40px !important;
    }
    .road_title_box h2 { font-size: 36px !important; }

    /* 메인 슬로건 축소 */
    .road_slogan_wrap { gap: 15px !important; margin-bottom: 40px !important; padding: 0 20px; }
    .q_icon { width: 30px !important; height: auto !important; }
    .slogan_text p { font-size: 3vw !important; } /* 화면 비율에 맞춰 글자 축소 */

    .road_inner_1440 {
        width: 100% !important;
        padding: 0 !important;
    }

    /* 좌우 배치를 상하 배치로 전환 */
    .road_top_row, .road_bottom_row {
        flex-direction: column !important;
    }

    /* 회사정보 박스 */
    .road_info_box {
        width: 100% !important;
        height: auto !important;
        padding: 50px 5% !important;
        display: flex;
        justify-content: center;
    }
    .info_grid { width: 100%; max-width: 600px; } /* 내부 그리드 너비 제한 */

    /* 공장 정보 박스 */
    .road_fac_box {
        width: 100% !important;
        height: auto !important;
        padding: 40px 5% !important;
    }
    .fac_img { 
        width: 100% !important; 
        margin-left: 0 !important; 
        height: auto !important; 
        aspect-ratio: 720 / 250;
    }
    .fac_cap { 
        width: 100% !important; 
        margin-left: 0 !important; 
        font-size: 20px !important;
        margin-top: 10px !important;
    }
    .fac_detail { padding-left: 0 !important; }
    .fac_tit, .fac_val { font-size: 20px !important; }

    /* 지도 및 로드뷰 */
    .road_map_img, .road_view_img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 720 / 600; /* 세로가 너무 길어지지 않게 조정 */
    }
}

/* ── B. 모바일 (767px 이하) ── */
@media (max-width: 767px) {
    .fw_road_section { padding-top: 30px !important; }

    .road_title_box { width: 180px !important; height: 50px !important; }
    .road_title_box h2 { font-size: 28px !important; }

    /* 슬로건 텍스트 가독성 확보 */
    .road_slogan_wrap { flex-direction: column; gap: 10px !important; }
    .q_icon { display: none; } /* 모바일에서는 따옴표 생략으로 깔끔하게 */
    .slogan_text p { font-size: 22px !important; line-height: 1.4 !important; }

    /* 회사정보 그리드 조정 */
    .info_grid {
        grid-template-columns: 140px 1fr !important; /* 라벨 영역 축소 */
        gap: 10px 15px !important;
    }
    .info_label, .info_val { font-size: 16px !important; }
    .info_label::after { right: -10px !important; } /* 콜론 위치 조정 */

    .road_info_box { padding: 40px 20px !important; }

    /* 공장 정보 모바일 최적화 */
    .fac_cap { font-size: 18px !important; }
    .fac_tit, .fac_val { font-size: 16px !important; }
    .fac_tit { width: 60px !important; } /* 부지/건축 라벨 너비 축소 */

    .road_fac_box { padding: 30px 20px !important; }

    /* 지도/로드뷰 비율 조정 */
    .road_map_img, .road_view_img {
        aspect-ratio: 1 / 1 !important; /* 모바일은 정사각 형태가 보기 좋음 */
    }
}


/* =============================================================
   [fwinfo] 품질관리 (fw_qua.html) 반응형 대응
   ★ 가로 레이아웃 유지 및 배경 숫자 잘림 방지 교정
============================================================= */

/* ── A. 태블릿 (1749px ~ 768px) ── */
@media (max-width: 1749px) {
    .fw_qua_section {
        min-width: 100% !important;
        height: auto !important;
        padding-top: 40px !important;
        padding-bottom: 150px !important;
    }

    .qua_inner_1440 {
        width: 94% !important; /* 잘림 방지를 위해 너비 소폭 축소 */
        margin: 0 auto !important;
        gap: 30px !important;
    }

    .qua_item {
        display: flex !important;
        flex-direction: row !important;
        height: auto !important;
        gap: 20px !important;
    }

    /* 텍스트 박스: 숫자가 잘리지 않도록 내부 여백 확보 */
    .qua_txt_box {
        width: 45% !important;
        position: relative !important;
        padding-left: 40px !important; /* 숫자 너비를 고려한 안전 여백 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* [교정] 큰 숫자: 화면 밖으로 나가지 않게 0으로 고정 */
    .bg_num {
        position: absolute !important;
        left: 0 !important; /* 음수 값 제거하여 잘림 방지 */
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 120px !important; /* 고정 크기로 가독성 확보 */
        opacity: 0.2 !important;
        z-index: 1 !important;
        line-height: 1 !important;
    }

    .qua_txt_box h3, 
    .qua_txt_box p {
        position: relative !important;
        z-index: 2 !important;
        word-break: keep-all; /* 단어 단위 줄바꿈 */
    }

    .qua_txt_box h3 { font-size: 24px !important; margin-bottom: 10px !important; }
    .qua_txt_box p { font-size: 16px !important; line-height: 1.4 !important; }

    .qua_img_box {
        width: 53% !important;
        aspect-ratio: 720 / 280;
    }

    .main_title { font-size: 26px !important; }
    .gap_150 { height: 80px !important; }
}

/* ── B. 모바일 (767px 이하) ── */
@media (max-width: 767px) {
    .fw_qua_section {
        padding-bottom: 100px !important;
    }

    .qua_inner_1440 {
        width: 96% !important;
    }

    /* 모바일에서도 가로 배치 유지하며 여백 최소화 */
    .qua_item {
        gap: 10px !important;
    }

    .qua_txt_box {
        width: 44% !important;
        padding-left: 25px !important; /* 모바일용 여백 */
    }

    /* 모바일 숫자 크기 조정 */
    .bg_num {
        left: 0 !important;
        font-size: 80px !important;
    }

    .qua_txt_box h3 { font-size: 15px !important; margin-bottom: 5px !important; }
    .qua_txt_box p { font-size: 12px !important; line-height: 1.3 !important; }

    .qua_img_box {
        width: 54% !important;
    }

    .main_title { font-size: 20px !important; }
    .frame_label { width: 100px !important; height: 34px !important; font-size: 14px !important; }
    .haccp_text, .process_intro { font-size: 13px !important; }
    .gap_150 { height: 40px !important; }
}

/* =============================================================
   [fwinfo] 매장찾기 (fw_map.html) 반응형 대응
   ★ 기존 등뼈가 매장찾기 로직 이식 및 타이틀/여백 교정
============================================================= */

/* ── A. 태블릿 (1749px ~ 768px) ── */
@media (max-width: 1749px) {
    .fw_map_section {
        min-width: 100% !important;
        height: auto !important; /* 고정 900px 해제 */
        padding-top: 40px !important;
        padding-bottom: 150px !important; /* 가맹문의 바 공간 */
        background-color: #fff !important;
    }

    /* 타이틀 축소 (50px -> 36px) */
    .fw_map_title {
        font-size: 36px !important;
        margin-bottom: 30px !important;
    }

    .fw_map_section .inner_1440 {
        width: 95% !important;
        padding: 0 !important;
    }

    /* 지도 래퍼: 가로 100%로 확장 */
    .fw_map_section .map_wrapper {
        width: 100% !important;
        height: 600px !important;
        display: flex !important;
    }

    /* 좌측 검색 패널 너비 소폭 축소 */
    .map_left_panel {
        width: 320px !important;
    }
}

/* ── B. 모바일 (767px 이하) ── */
@media (max-width: 767px) {
    .fw_map_section {
        padding-top: 30px !important;
        padding-bottom: 80px !important;
    }

    /* 타이틀 축소 (36px -> 26px) */
    .fw_map_title {
        font-size: 26px !important;
        margin-bottom: 20px !important;
    }

    /* [중요] 모바일에서는 지도를 상단, 검색창을 하단으로 분리 배치 */
    .fw_map_section .map_wrapper {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important; /* 세로 배치 전환 */
        border: 0 !important;
        box-shadow: none !important;
    }

    /* 지도 영역 높이 고정 */
    #naver_map_container {
        width: 100% !important;
        height: 300px !important; /* 모바일에서 지도 확인용 높이 */
    }

    /* 검색 패널: 지도 아래로 이동 및 전체 너비 사용 */
    .map_left_panel {
        position: static !important; /* Absolute 해제 */
        width: 100% !important;
        height: auto !important;
        border-right: 0 !important;
        border-top: 2px solid #222;
    }

    /* 검색창 및 셀렉트 박스 높이 조절 */
    .map_sel, .map_input_row, #map_search_btn {
        height: 44px !important;
        font-size: 14px !important;
    }

    /* 결과 리스트 영역 높이 제한 */
    .map_result_area {
        max-height: 250px !important;
        overflow-y: auto;
    }

    .store_list_item {
        padding: 15px 12px !important;
    }
}


/* =============================================================
   [fwinfo] 사회공헌 (fw_good.html) 반응형 대응
============================================================= */

/* ── A. 태블릿 (1749px ~ 768px) ── */
@media (max-width: 1749px) {
    .fw_good_section {
        min-width: 100% !important;
        height: auto !important; /* 고정 1700px 해제 */
        padding-top: 40px !important;
        padding-bottom: 150px !important; /* 하단 가맹문의 바 공간 확보 */
    }

    /* 뉴스 이미지 축소 */
    .good_news_img {
        width: 80% !important;
        max-width: 700px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* 원본의 1:1 비율 유지 */
        margin-bottom: 40px !important;
    }

    /* 후원 텍스트 박스 */
    .good_sponsor_box {
        height: auto !important;
        padding: 50px 20px !important; /* 상하 여백 확보 */
        margin-bottom: 80px !important;
    }

    .good_sponsor_txt {
        font-size: 24px !important; /* 30px -> 24px 축소 */
        word-break: keep-all;
    }

    /* 후원기관 로고 축소 */
    .good_logo_area {
        margin-bottom: 80px !important;
    }

    .good_logo_img {
        width: 90% !important;
        max-width: 1000px !important;
        height: auto !important;
    }
}

/* ── B. 모바일 (767px 이하) ── */
@media (max-width: 767px) {
    .fw_good_section {
        padding-top: 30px !important;
        padding-bottom: 100px !important;
    }

    /* 라벨 축소 */
    .good_title_area {
        margin-bottom: 30px !important;
    }

    .good_frame_label {
        width: 120px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* 뉴스 이미지 모바일 맞춤 */
    .good_news_img {
        width: 92% !important;
        margin-bottom: 30px !important;
    }

    /* 후원 텍스트 박스 모바일 맞춤 */
    .good_sponsor_box {
        padding: 30px 15px !important;
        margin-bottom: 50px !important;
    }

    .good_sponsor_txt {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    
    /* 모바일에서는 자연스러운 줄바꿈을 위해 br 태그 숨김 처리 */
    .good_sponsor_txt br {
        display: none !important;
    }

    /* 후원기관 로고 모바일 맞춤 */
    .good_logo_area {
        margin-bottom: 50px !important;
    }

    .good_logo_img {
        width: 95% !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   서브페이지 반응형: 공지사항 (fw_news.html)
   ───────────────────────────────────────────────────────────── */

/* 태블릿 및 작은 PC (화면 너비 1240px 이하) */
@media screen and (max-width: 1240px) {
    /* 1920px 고정 해제 및 래퍼 유연화 */
    .sub_notice_page { min-width: 100%; }
    .sub_notice_page .board_wrapper { width: 90%; }
}

/* 모바일 환경 (화면 너비 768px 이하) */
@media screen and (max-width: 768px) {
    /* 전체 여백 및 타이틀 축소 */
    .sub_notice_page { padding: 40px 0 100px; }
    .sub_notice_page .board_main_title { font-size: 32px; margin-bottom: 40px; }

    /* 테이블 폰트 및 여백 축소 */
    .sub_notice_page .news_table th { font-size: 14px; padding: 12px 0; }
    .sub_notice_page .news_table td { font-size: 13px; padding: 15px 0; word-break: keep-all; }
    
    /* 모바일에서는 좌측 여백을 줄여 공간 확보 */
    .sub_notice_page .news_table .th_title,
    .sub_notice_page .news_table .td_title { padding-left: 10px !important; }

    /* 페이지네이션 버튼 크기 축소 */
    .sub_notice_page .pagination { margin-top: 30px; }
    .sub_notice_page .page_btn { width: 32px; height: 32px; font-size: 14px; }

    /* 팝업(모달) 창 반응형 */
    .news_detail_content { padding: 30px 20px; border-radius: 8px; }
    .fw_notice_close { top: 15px; right: 15px; font-size: 24px; }
    #fw_view_title { font-size: 20px; margin-bottom: 10px; }
    #fw_view_date { font-size: 13px; margin-bottom: 15px; }
    .detail_body { font-size: 14px; max-height: 60vh; } /* 화면이 작아지면 스크롤 영역 확보 */
}

/* 아주 작은 모바일 화면 (화면 너비 480px 이하) */
@media screen and (max-width: 480px) {
    .sub_notice_page .board_main_title { font-size: 28px; }
    
    /* 제목이 길 경우 말줄임표 처리 방지 및 자연스러운 줄바꿈 유도 */
    .sub_notice_page .news_table .td_title { line-height: 1.4; }
}


/* ─────────────────────────────────────────────────────────────
   서브페이지 반응형: 사업비전 (fw_vis.html)
   ───────────────────────────────────────────────────────────── */

/* 1. 태블릿 및 작은 PC (1240px 이하) */
@media screen and (max-width: 1240px) {
    .fw_vis_page .vis_content_wrap {
        min-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 운영시스템 이미지 반응형 조정 */
    .fw_vis_page .vis_img_box {
        width: 100%;
        max-width: 1000px;
        height: auto;
    }
    .fw_vis_page .vis_img_box img {
        width: 100%;
        height: auto;
    }

    /* 비전 카피 컨테이너 너비 유동화 */
    .fw_vis_page .vision_copy_container {
        width: 100%;
    }

    /* 그래프 영역: 화면이 좁아지면 가로 스크롤 생성 (수치 겹침 방지) */
    .fw_vis_page .sales_graph_wrap {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 50px;
        -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
    }
    .fw_vis_page .graph_inner {
        width: 1100px; /* 그래프가 유지되어야 할 최소 너비 */
        margin: 0 auto;
    }
}

/* 2. 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .fw_vis_page .vis_content_wrap {
        padding-top: 60px;
    }

    /* 타이틀 프레임 크기 축소 */
    .fw_vis_page .vis_title_frame { font-size: 20px; }
    .fw_vis_page .frame_230 { width: 180px; height: 40px; margin-bottom: 30px; }
    .fw_vis_page .frame_400 { width: 300px; height: 40px; margin-bottom: 50px; }
    .fw_vis_page .frame_200 { width: 160px; height: 40px; margin-bottom: 20px; }

    /* 매출현황 안내 문구 간격 조정 */
    .fw_vis_page .sales_info_text {
        font-size: 16px;
        margin-top: 15px;
        margin-bottom: 50px;
    }

    /* 비전 카피 박스: 세로 배치로 변경 */
    .fw_vis_page .copy_box {
        height: auto;
        flex-direction: column;
        padding: 40px 20px;
    }
    .fw_vis_page .copy_left {
        padding-left: 0;
        margin-bottom: 20px;
        font-size: 22px;
        text-align: center;
    }
    .fw_vis_page .copy_right {
        padding-right: 0;
        text-align: center;
        font-size: 20px;
        line-height: 1.6;
    }

    /* 그래프 내부 텍스트 크기 조정 */
    .fw_vis_page .bar_val { font-size: 24px; }
    .fw_vis_page .target_txt { font-size: 16px; }
    .fw_vis_page .graph_years_area span { font-size: 14px; }
    
    /* 2024년 목표치 간격 유지 (모바일에서도 좁아지지 않게) */
    .fw_vis_page .bar_unit.active .target_box {
        margin-bottom: 30px !important;
    }
}

/* 3. 아주 작은 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
    .fw_vis_page .vis_title_frame { font-size: 18px; }
    .fw_vis_page .frame_400 { width: 260px; }
    .fw_vis_page .copy_left { font-size: 20px; }
    .fw_vis_page .copy_right { font-size: 17px; }
}

/* =========================================================
   조직도(fw_org) 전용 반응형 레이아웃 (선 어긋남 및 여백 교정본)
========================================================= */

/* A. 태블릿 구간: 기존 구조를 유지하며 비율 축소 (Scale Down) */
@media screen and (max-width: 1749px) and (min-width: 1241px) {
    .fw_org_section {
        min-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding-top: 130px;
        overflow: hidden;
    }
    .org_scroll_area {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 1850px; 
    }
    .org_inner_1440 {
        width: 1440px !important;  /* ★ 선 어긋남 해결: 컨테이너 너비 강제 고정 */
        flex-shrink: 0 !important; /* ★ 선 어긋남 해결: 화면이 좁아져도 찌그러짐 방지 */
        transform: scale(0.8);
        transform-origin: top center;
        margin: 0;
    }
}

@media screen and (max-width: 1400px) and (min-width: 1241px) {
    .org_scroll_area {
        height: 1650px;
    }
    .org_inner_1440 {
        transform: scale(0.7);
    }
}

/* B. 모바일 및 소형 태블릿 구간: 세로형 카드 레이아웃 정렬 */
@media screen and (max-width: 1240px) {
    .fw_org_section {
        min-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 100px 20px 120px 20px !important;
        background-color: #ffffff;
    }
    .org_scroll_area {
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
    }
    .org_inner_1440 {
        width: 100% !important;
        max-width: 450px !important; 
        margin: 0 auto !important;
    }
    
    /* 1. 복잡한 PC용 라인 완벽 제거 */
    .org_lines_layer {
        display: none !important;
    }
    
    /* 2. 상단 헤더 영역 세로 정렬 */
    .org_title_area {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 45px;
    }
    .org_title_area img {
        margin-right: 0 !important;
        width: 180px;
        height: auto;
    }
    .org_title_area h2 {
        font-size: 24px;
    }

    /* 3. 임원진 박스(레벨 1, 2, 3) 세로 스택 */
    .level_1, .level_2, .level_3 {
        margin-bottom: 25px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        position: static !important;
    }
    .node_solid {
        width: 100% !important;
        height: 85px !important;
        border-radius: 45px !important;
    }
    /* ★ 여백 해결: 모바일 임원진 프로필 이미지 크기 축소 */
    .node_solid .prof_img {
        width: 60px !important;
        height: 60px !important;
        margin-left: 20px !important;
    }
    .node_solid .text_info {
        margin-left: 25px !important;
        gap: 4px !important;
    }
    .node_solid .text_info .name,
    .node_solid .text_info .pos {
        font-size: 24px !important;
    }
    
    .level_3 .node_right {
        position: static !important;
    }

    /* 4. 하위 부서 1열 순차 배열 */
    .level_4_cols {
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
        margin-top: 40px;
    }
    .org_col {
        width: 100% !important;
    }
    .dept_title {
        width: 130px !important;
        height: 32px !important;
        font-size: 18px !important;
        margin-bottom: 30px !important;
    }
    
    /* ★ 여백 해결: 부서원 프로필 이미지 크기 축소 및 마진 보정 */
    .person_group {
        margin-bottom: 40px !important;
    }
    .person_group .prof_overlap {
        width: 64px !important; /* 80px -> 64px 축소 */
        height: 64px !important;
        margin-bottom: -32px !important; /* 이미지 크기의 정확히 절반만 겹치도록 설정 */
    }
    
    .node_outline {
        width: 100% !important;
        height: 85px !important;
        border-radius: 45px !important;
    }
    .node_outline .name,
    .node_outline .pos {
        font-size: 24px !important;
    }
    
    /* ★ 여백 해결: 이미지 축소 후 텍스트가 박스 중앙에 오도록 상단 여백 조율 */
    .node_outline .txt_wrap {
        gap: 15px !important;
        margin-top: 20px !important; 
    }
    
    /* 5. 생산직 사원 리스트: 2열 그리드로 공간 절약 및 가독성 최적화 */
    .small_box_list {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2열 정렬 */
        gap: 8px !important;
        margin-top: 25px !important;
    }
    .node_small {
        width: 100% !important;
        height: 45px !important;
        border-radius: 22px !important;
    }
    .node_small span {
        font-size: 16px !important; /* 글자 크기 맞춤 조절 */
    }
}