@charset "utf-8";

/* =========================================
   📱 모바일 반응형 (1024px 이하) 통합
   ========================================= */
@media (max-width: 1024px) {
    #top_btn {display: none;}
    #mob_cta {display: none !important;}

    /* [핵심] PC요소 숨김, 모바일 요소 활성화 */
    .pc { display: none !important; }
    .mob { display: flex !important; }

    /* 공통 넓이 조정 */
    .wrap { width: 90%; }
    .wide { width: 100vw !important; margin-left: -5vw; }
    
    /* 헤더 미세 조정 */
    #header .wrap { padding: 0; }
    #header .logo a span { font-size: 20px; }
    
    /* 푸터 */
    .f-top ul { font-size: 16px; gap: 30px; }
    .f-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
    .f-info { text-align: left; font-size: 14px; }

    /* 메인페이지 (index.php) */
    .sec-hero .text-box h1 { font-size: 50px; }
    .sec-hero .text-box p:first-child { font-size: 16px; }
    .sec-hero .text-box p:last-child { font-size: 18px; }
    .sec-signature h2 { font-size: 60px; }
    .sec-signature > .wrap > p { font-size: 18px; }
    
    .sec-hero .wrap, .sig-grid, .sec-feature .wrap, .sec-story .wrap { flex-direction: column; height: auto; }
    .sec-hero .text-box, .sec-hero .img-box, .sig-left, .sig-right, .sec-feature .text-box, .sec-feature .img-box, .sec-story .text-box, .sec-story .img-box { width: 100%; }
    
    .sec-story .img-box { margin-top: 50px; height: auto;}
    .sig-left { height: 400px; border-right: none; border-bottom: none; }
    .sig-right { height: auto; margin-top: 20px; }
    
    .sec-signature { padding: 60px 0; }
    .sec-signature h2 { font-size: 50px; }
    .sec-signature > .wrap > p { font-size: 14px; margin-bottom: 30px; }
    .sig-grid { flex-direction: column; height: auto; border: none; }
    
    .sig-left { height: 450px; }
    .sig-left .text-box { height: 140px; padding: 20px; align-items: start;}
    .sig-left .text-info h3 { font-size: 28px; margin-bottom: 5px; }
    .sig-left .text-info p { font-size: 15px; }
    .sig-left .left-pagination { bottom: 20px !important; left: 20px !important; right: auto !important;}
    
    .sig-right { height: 500px; }
    .sig-right .text-box { height: 220px; padding: 30px 20px; }
    .sig-right .cate { font-size: 20px; margin-bottom: 15px; }
    .sig-right hr { margin-bottom: 15px; }
    .sig-right h3 { font-size: 20px; }
    .sig-right p { font-size: 15px; }
    .sig-right .right-pagination {top: 185px !important; left: 20px !important;bottom: auto !important;}

    .sec-pairing { padding: 60px 0; }
    .sec-pairing .inner-header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
    .sec-pairing .title-top img { width: 30px !important; }
    .sec-pairing h2 { font-size: 24px; }
    .sec-pairing .desc { margin-left: 0; font-size: 16px; margin-top: 10px; }
    .pairing-nav button { width: 40px; height: 40px; }
    .pairing-item .img-box { height: 240px; }
    .pairing-item .text-box { padding: 20px 15px; }
    .pairing-item .title { font-size: 18px; margin-bottom: 10px; }
    .pairing-item .tag { font-size: 13px; padding: 6px 15px; }

    .sec-feature .text-box { align-items: flex-start; text-align: left; padding: 40px 0; }
    .sec-feature .text-box > p:first-child { font-size: 30px; }
    .sec-feature .text-box h2 { font-size: 40px; }
    .sec-feature .text-box > p:last-child { font-size: 16px; }
    
    .sec-recommend .inner-header { flex-direction: column; align-items: flex-start; border-bottom: none; gap: 20px; }
    .sec-recommend h2 { font-size: 24px; }
    .sec-recommend .desc {margin-left: 0;font-size: 16px;margin-top: 10px;}
    .tab-menu { width: 100%; padding-bottom: 0; font-size: 18px; }

    .sec-info { padding: 60px 0; }
    .sec-info .info-header { margin-bottom: 35px; }
    .sec-info .title-top img { width: 30px !important; }
    .sec-info h2 { font-size: 24px; }
    .sec-info .desc { font-size: 16px; margin-top: 10px; }
    .info-grid { grid-template-columns: 1fr; gap: 16px; }
    .info-card { padding: 40px 24px; }
    .info-icon { width: 72px; height: 72px; margin-bottom: 20px; }
    .info-icon svg { width: 32px; height: 32px; }
    .info-text h3 { font-size: 24px; margin-bottom: 18px; padding-bottom: 18px; }
    .info-text p { font-size: 17px; }
    .info-text .info-sub { font-size: 14px; }

    .sec-story {padding-bottom: 0;}
    .sec-story .text-box > p:first-child { font-size: 20px; }
    .sec-story .text-box h2 { font-size: 48px; }
    .sec-story .text-box > p:nth-of-type(2) { font-size: 16px; }
    .btn-story { font-size: 20px; width: 220px; height: 45px; padding: 0 12px 0 30px; }

    /* 서브 공통 (Hero) */
    .sub-hero { height: 400px; }
    .sub-hero-text h2 { font-size: 46px; }
    .sub-hero-text p { font-size: 16px; }
    .sub-hero {background: url(../img/menu_bg_m.png);}
    .brand-hero {background: url(../img/brand_bg_m.png);}

    /* 서브페이지 (sub.php) */
    .sub-brand-container { padding: 50px 20px 80px; }
    .brand-title-sec { flex-direction: column; align-items: flex-start; gap: 30px; margin-bottom: 50px; padding-bottom: 30px; }
    .brand-title-sec h3 { font-size: 40px; }
    .logo-ph { width: 140px; height: 40px; }
    .brand-row { gap: 30px; margin-bottom: 60px; flex-direction: column; }
    .row-greeting { flex-direction: column-reverse; } 
    .row-philosophy { flex-direction: column; } 
    .brand-row .img-box { width: 100%; height: 260px; }
    .brand-row h4 { font-size: 26px; margin-bottom: 20px; }
    .brand-row p { font-size: 15px; }
    .brand-closing p { font-size: 15px; margin-bottom: 40px; }
    .brand-closing h5 { font-size: 20px; margin-bottom: 20px; }
    .signature-box { gap: 15px; }
    .ceo-name { font-size: 28px; }

    /* 서브페이지 (menu.php) */
    .menu-tab-wrap { padding: 0 15px; }
    .menu-tab-wrap .wrap { justify-content: flex-start; padding: 10px 0; overflow: hidden; }
    .menu-tab-inner { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; }
    .menu-tab-inner::-webkit-scrollbar { display: none; }
    .menu-tab { display: flex; flex-wrap: nowrap; gap: 10px; flex-shrink: 0; width: max-content; margin: 0;padding: 0;}
    .menu-tab li { flex-shrink: 0; }
    .menu-tab li a { padding: 8px 18px; font-size: 14px; white-space: nowrap; }
    .menu-section { padding-top: 60px; }
    .menu-section .sec-title h3 { font-size: 28px; }
    .menu-section .sec-title p { font-size: 14px; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
    .menu-item .name { font-size: 15px; }
    .menu-detail-view { padding: 40px 0; margin-bottom: 20px; }
    .detail-inner { flex-direction: column; gap: 30px; text-align: center; }
    .detail-img { width: 100%; }
    .btn-close-detail { top: -35px; right: -10px; }
    .detail-title { font-size: 26px; }
    .detail-desc { font-size: 15px; }

    /* 모바일 2열 그리드 */
    .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
    .menu-item .name { font-size: 15px; }

    /* 모바일 상세 아코디언 수직 배치 */
    .menu-detail-view { padding: 40px 0; margin-bottom: 20px; }
    .detail-inner { flex-direction: column; gap: 30px; text-align: center; }
    .detail-img { width: 100%; max-width: 300px; margin: 0 auto; }
    .btn-close-detail { top: -35px; right: 0px; }
    .detail-title { font-size: 26px; }
    .detail-desc { font-size: 15px; }

    /*언어 변경 버튼*/
    .header-left { gap: 15px; }
    
    /* 모바일에서는 PC 메뉴 숨김 */
    nav.pc { display: none !important; }
    
    /* 모바일 헤더 유틸리티 간격 조정 */
    .header_utils { gap: 15px; }

    /* 모바일용 글로벌 버튼 사이즈 조정 */
    .btn-global {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* 모바일에서 드롭다운이 화면 밖으로 나가지 않도록 위치 조정 */
    .lang-dropdown {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(-10px);
    }
    .lang-dropdown.active {
        transform: translateX(0) translateY(0);
    }
}