/* =============================================================
   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; 
    }

/* ══════════════════════════════════════════════════════════════
   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: 95%; max-width: 100%; }
    .logo img           { width: 160px; height: auto; }
    .nav_menu ul        { gap: 24px; }
    .nav_menu ul li a   { font-size: 16px; }
    .header_call span   { font-size: 18px; }
    .header_call a      { width: 185px; 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%);
    }
}


/* ── 3. 섹션01: 메인 비주얼 (태블릿) ── [수정: 중앙정렬 및 확대] ── */
@media (max-width: 1749px) {
    #section_01 { 
        min-height: 100vh !important; 
        display: flex;
        align-items: center; 
        justify-content: center;
    }

    .section_flex {
        margin-top: 0 !important; 
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #section_01 .sub_copy { font-size: 3rem !important; margin-bottom: 10px; }
    #section_01 .main_copy { font-size: 4.5rem !important; line-height: 1.2; }
}


/* ── 4. 섹션02: 브랜드 (태블릿) ──────────────────────────── */
@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; }
}


/* ── 5. 섹션03: 메뉴 (태블릿) ────────────────────────────── */
@media (max-width: 1749px) {
    #section_03 { padding: 80px 0 50px; }
    .m_content_1920 {
        padding: 0 30px 40px !important;
        justify-content: flex-start;
        padding-top: 30px !important;
    }
    .m_logo_img     { width: 150px; }
    .m_main_tit     { font-size: 44px; }
    .m_card_list    { width: 100% !important; gap: 16px; flex-wrap: wrap; justify-content: center !important; }
    .m_card_item    { width: 200px; height: 440px; }
    .m_txt_area     { width: 200px; height: 240px; padding: 0 10px; }
    .m_item_name    { font-size: 24px; margin-bottom: 8px; }
    .m_item_desc    { font-size: 14px; line-height: 1.3; margin-bottom: 8px; }
    .m_item_sub     { font-size: 14px; }
    .m_item_top_tit { font-size: 16px; }
}


/* ── 6. 섹션04: 창업 (태블릿) ────────────────────────────── */
@media (max-width: 1749px) {
    #section_04         { padding-bottom: 40px; }
    .b_top_visual       { height: 120px; }
    .b_main_tit         { font-size: 40px; }
    .b_content_inner    {
        height: auto;
        padding: 30px 30px 20px;
        display: flex;
        align-items: flex-start;
    }
    .b_step_grid        { gap: 14px 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; }
}


/* ── 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: 80px 0 40px; }
    .news_inner_wrapper {
        padding: 0 20px !important;
        justify-content: flex-start;
        gap: 20px;
    }
    .news_top_row       { gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
    .news_logo_img      { width: 160px; height: auto; }
    .news_frame_box     { width: 100%; max-width: 600px; height: 130px; }
    .news_gallery_wrap  { height: auto !important; }
    .gallery_contents   { height: auto !important; flex-wrap: wrap; }
    .gal_left_box       { width: 100% !important; height: 320px !important; }
    .gallery_title_box  { width: 100% !important; height: 80px; }
    .gal_right_grid     {
        width: 100% !important;
        height: auto !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 180px 180px !important;
    }
}


/* ── 9. 섹션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; }
}

/* ── 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; }
}


/* ── 3-M. 섹션01: 메인 비주얼 (모바일) ── [수정: 중앙정렬] ── */
@media (max-width: 767px) {
    #section_01     { min-height: 100svh !important; display: flex; align-items: center; justify-content: center; }
    
    .section_flex   {
        margin-top: 0 !important;
        padding-top: 0;
        align-items: center;
        justify-content: center;
        padding-bottom: 0;
    }
    #section_01 .sub_copy { font-size: 1.8rem !important; }
    #section_01 .main_copy { font-size: 2.8rem !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: 40vh;
        min-height: 220px;
        flex: none;
    }
    .brand_bg {
        width: 100%;
        height: 100%;
    }
    .hover_content { opacity: 1; transform: translate(-50%,-50%) !important; }
    .hover_content img { width: 160px; height: 160px; }
}


/* ── 5-M. 섹션03: 메뉴 (모바일) ─────────────────────────── */
@media (max-width: 767px) {
    #section_03 { padding: 66px 0 30px; }
    .m_content_1920 { padding: 0 12px 20px !important; padding-top: 16px !important; }
    .m_top_title    { gap: 10px; padding-bottom: 16px; }
    .m_logo_img     { width: 100px; }
    .m_main_tit     { font-size: 28px; }
    .m_card_list    { gap: 10px; }
    .m_card_item {
        width: calc(50vw - 20px);
        max-width: 175px;
        height: 310px;
    }
    .m_txt_area {
        width: 100%;
        height: 155px;
        padding: 0 8px;
    }
    .m_item_name    { font-size: 20px; margin-bottom: 6px; }
    .m_item_desc    { font-size: 12px; margin-bottom: 6px; }
    .m_item_sub     { font-size: 12px; }
    .m_item_top_tit { font-size: 13px; }
}


/* ── 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: 66px 0 30px; }
    .news_inner_wrapper { padding: 0 12px !important; }
    .news_logo_img      { width: 110px; }
    .news_frame_box     { height: auto; padding: 10px 12px; border-radius: 0 0 14px 14px; }
    .news_frame_box ul li { font-size: 13px; flex-wrap: wrap; }
    .news_date_txt      { font-size: 12px; }
    .gal_left_box       { height: 200px !important; }
    .gallery_title_box  { gap: 10px; height: 60px; }
    .gal_title_text     { font-size: 16px; }
    .gal_logo_img       { width: 80px; height: 24px; }
    .gal_right_grid     { grid-template-rows: 100px 100px !important; }
}


/* ── 9-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        { gap: 16px; }
    .f_logos img    { width: 85px; height: auto; }
}


/* ── 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;
    }
}

/* ── 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; }
}



/* =============================================================
   [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: 180px !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; }
}