/* ==============================================
   mobile.css - 모바일 전용 스타일 (PC와 완전 분리)
   ============================================== */

/* 0. 기본 설정 */
* { box-sizing: border-box; }
html { height: 100%; }

body {
    width: 100%; min-height: 100vh;
    overflow-x: hidden !important;
    position: relative; padding: 0 !important; margin: 0;
    display: flex; flex-direction: column;
}

/* 메인 페이지는 블록 레이아웃 (깨짐 방지) */
body.home-page { display: block; height: auto; min-height: auto; }

/* 서브 페이지용 자동 채움 */
main,
.store-finder-container,
.board-container {
    flex: 1; width: 100%;
}

/* 1. 헤더 */
.site-header { height: 60px; padding: 0 15px; flex: none; }
.site-header .site-logo img { height: 35px; }
.header-right-group, .site-header .order-button-container { display: none !important; }




/* 2. [완벽 복구] 하단 탭 바 (스타일 강제 초기화) */
.bottom-nav {
    position: fixed; bottom: 0; left: 0;
    width: 100%; height: 60px;
    display: flex; justify-content: space-around; align-items: center;
    background-color: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    z-index: 1000;
}

/* 링크 스타일 초기화 */
.bottom-nav a, .bottom-nav button {
    text-decoration: none !important; color: #555 !important;
    background: transparent !important; border: none !important;
    padding: 0; margin: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 아이템 정렬 */
.bottom-nav .nav-item, .bottom-nav .nav-item-hamburger {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    flex: 1; height: 100%; color: #555 !important;
}

.bottom-nav .nav-item .icon, .bottom-nav .nav-item-hamburger .icon {
    font-size: 20px !important; margin-bottom: 3px !important; display: block;
}
.bottom-nav .nav-item .label, .bottom-nav .nav-item-hamburger .label {
    font-size: 10px !important; font-weight: 400;
}

/* [주문하기] 버튼 복구 */
.bottom-nav .nav-item-center {
    position: relative; bottom: 22px;
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    background-color: #e63946 !important; color: #ffffff !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.35);
    display: flex !important; flex-direction: column;
    align-items: center; justify-content: center;
    flex: none; margin: 0 10px; z-index: 1002; opacity: 1 !important;
}
.bottom-nav .nav-item-center .icon { color: #fff !important; margin-bottom: 0 !important; }
.bottom-nav .nav-item-center .label { color: #fff !important; font-weight: bold !important; margin-top: 2px !important; }

/* PC용 숨김 */
.quick-menu, .desktop-only { display: none !important; }
.mobile-only { display: flex !important; }



/* 3. [수정] 베스트 메뉴 (제목 꾸밈 + 텍스트 공간 확보 + 화살표 중복 해결) */
.best-menu-section {
    padding: 30px 0; /* 위아래 여백을 좀 더 넉넉하게 */
    width: 100%;
    background: #fff;
    overflow: hidden;
}

/* [빨간색 해결] 제목 디자인 강화 */
.section-header {
    margin-bottom: 20px;
    text-align: center;
}
.section-header .sub-title {
    /* "CUSTOMER FAVORITE"를 브랜드 레드 컬러로 강조 */
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #E3001B !important;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.section-header .main-title {
    font-size: 24px; /* 글자 크기 키움 */
    padding: 0 15px;
    margin-bottom: 5px;
    font-weight: 900;
    color: #222;
    position: relative;
    display: inline-block;
    z-index: 1;
}
/* 제목 뒤에 노란 형광펜 효과 추가 */
.section-header .main-title::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: rgba(255, 215, 0, 0.3); /* 은은한 노란색 */
    z-index: -1;
    border-radius: 4px;
}
.section-header .desc {
    font-size: 12px;
    padding: 0 15px;
    margin: 0;
    color: #888;
}


/* 그리드 & 카드 스타일 */
.best-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 15px;
    width: 100%;
}
.menu-card {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex; flex-direction: column;
    height: auto;
    padding-bottom: 10px; /* 아래 여백 확보 */
    overflow: hidden;
    position: relative;
}

/* 이미지 */
.menu-card .img-box {
    height: 90px !important; /* 이미지 영역 살짝 키움 */
    margin-bottom: 0 !important;
    background-color: #f9f9f9;
    display: flex; align-items: center; justify-content: center;
    padding: 5px;
}
.menu-card .img-box img { width: auto !important; height: 100% !important; max-width: 95% !important; object-fit: contain; }

/* [연두색 해결] 텍스트 설명 2줄 허용 */
.menu-card .info-box { padding: 10px 10px 0 10px !important; flex: 1; display: flex; flex-direction: column; }
.menu-card .info-box h3 {
    font-size: 14px !important;
    margin: 0 0 5px 0 !important;
    font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #222;
}
.menu-card .info-box .desc-text {
    font-size: 11px !important;
    color: #888;
    margin: 0 0 10px 0 !important;
    line-height: 1.3;
    /* 기존 1줄 제한을 풀고 2줄까지 보이게 변경 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    height: 2.6em; /* 2줄 높이 확보 */
}

/* 버튼 영역 */
.action-row {
    padding: 0 10px !important; /* 좌우 여백 */
    margin-top: auto !important;
    border-top: none; /* 구분선 제거 (더 깔끔하게) */
    display: flex; align-items: center; justify-content: flex-end;
}
.category-tag { display: none !important; }

/* [하늘색 해결] 화살표 중복 제거 */
.order-link {
    font-size: 11px !important;
    font-weight: 800;
    color: #333;
    width: 100%;
    text-align: right;
    text-decoration: none !important;
    display: block;
}
/* CSS 가상요소 화살표 제거 (HTML에 있는 화살표만 사용) */
.order-link::after {
    content: none !important;
}

/* 뱃지 */
.menu-card .badge {
    font-size: 9px !important;
    padding: 3px 6px !important;
    top: 8px !important;
    left: 8px !important;
    border-radius: 4px;
}


/* 4. [수정] Special Taste (가로 배치 유지 + 버튼 디자인 개선) */
.story-section {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr; /* 원래대로 가로 배치 */
    grid-template-rows: auto auto;
    height: auto !important;
    padding: 20px;
    background: #F9F9F9 !important;
    border-radius: 20px;
    width: 94%;
    margin: 0 auto 20px auto;
    box-sizing: border-box;
    align-items: center;
    column-gap: 5px;
    overflow: hidden;
}

.story-section .text-box {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
    height: auto !important;
    margin-bottom: 5px;
}
.story-section .text-box h2 {
    font-size: 19px; /* 제목 크기 살짝 키움 */
    margin-bottom: 5px;
    font-weight: 800;
    color: #222;
    line-height: 1.2;
}
.story-section .text-box p {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    margin: 0;
    word-break: keep-all;
}

.story-section .image-box {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100% !important;
    height: 100% !important;
    min-height: 110px;
    position: relative !important;
    background: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}
.story-section .image-box img {
    width: 90% !important;
    height: auto;
    object-fit: contain;
    transform: rotate(-5deg);
}

/* 버튼 위치 */
.story-section .btn-box {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    text-align: left !important;
    z-index: 10;
    margin-top: 8px;
    position: static !important;
}

/* ★ 버튼 스타일 업그레이드 (파란 글씨 해결!) */
.btn-solid {
    display: inline-block;
    padding: 8px 18px !important;    /* 터치하기 편하게 여백 확보 */
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 30px !important;
    background-color: #E3001B !important; /* 빨간 배경 */
    color: #ffffff !important;       /* ★ 글씨 흰색 고정 */
    box-shadow: 0 4px 10px rgba(227, 0, 27, 0.3); /* 그림자 */
    text-decoration: none !important; /* 밑줄 제거 */
    border: none !important;
}


/* 5. [수정] 영상 섹션 (여백 최적화) */
.video-showcase {
    /* ★ 수정 포인트: 위쪽 여백을 50px -> 20px로 과감하게 줄임 */
    padding: 20px 20px 40px 20px;
    width: 100%;
    background-color: #333;

    background-image: url('/images/video/registan22.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    text-align: center;
}

.video-showcase h2,
.video-showcase .main-title {
    color: #ffffff !important;
    font-size: 22px;
    font-weight: 800;
    /* ★ 수정 포인트: 제목 위쪽의 숨겨진 기본 여백 제거 */
    margin-top: 0 !important;
    margin-bottom: 20px; /* 제목과 영상 사이 간격도 살짝 줄임 */
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    line-height: 1.3;
    word-break: keep-all;
}

.video-showcase .video-container {
    width: 100% !important;
    position: relative;
    height: 0;
    padding-bottom: 56.25% !important;
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

.video-showcase .video-container iframe {
    position: absolute; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    border: none;
}


/* 6. 매장 찾기 (황금비율) */
.store-finder-container { display: flex; flex-direction: column !important; height: calc(100vh - 120px) !important; padding: 0 !important; margin: 0 !important; overflow: hidden; flex: 1; }
.map-panel { flex: none !important; height: 35% !important; width: 100% !important; border: none !important; margin: 0 !important; order: 1; }
#map { width: 100% !important; height: 100% !important; }
.store-list-panel { flex: 1 !important; height: 65% !important; width: 100% !important; display: flex; flex-direction: column; border-top: 1px solid #ddd !important; background: #fff; order: 2; overflow: hidden; z-index: 10; }
.search-box { flex: none; padding: 10px 15px; background: #fff; border-bottom: 1px solid #eee; display: flex; align-items: center; height: 50px; }
.search-box input { height: 34px; font-size: 13px; }
.search-box button { height: 34px; font-size: 13px; padding: 0 15px; }
.store-list { flex: 1; overflow-y: auto; padding-bottom: 0; max-height: none !important; }
.store-item { padding: 15px !important; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.store-item h3 { font-size: 15px; margin-bottom: 3px; font-weight: 700; }
.store-item p { font-size: 13px; color: #666; margin: 2px 0; line-height: 1.3; }
.store-item .tel { color: #e67e22; font-weight: 600; }

/* 7. [완벽 복구] 이벤트 게시판 (표 깨짐 해결) */
.board-container {
    padding: 20px 10px !important;
    flex: 1; width: 100%;
    overflow: hidden;
}
.board-container h1 { font-size: 22px; text-align: center; margin-bottom: 20px; }
/* 테이블 레이아웃 고정 */
.board-table {
    font-size: 13px; width: 100%;
    table-layout: fixed; /* ★ 핵심: 표가 화면 밖으로 안 나가게 */
}
.board-table th, .board-table td { padding: 10px 5px; border-bottom: 1px solid #eee; }
/* 모바일에서 안 중요한 정보 숨김 */
.col-author, .col-views, .col-date { display: none !important; }
.board-table td:nth-child(3), .board-table td:nth-child(4), .board-table td:nth-child(5) { display: none !important; }
/* 제목 칸 넓히기 */
.col-title { width: auto; }
.board-table td:nth-child(2) {
    text-align: left; padding-left: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-num { width: 40px; }

/* 8. 푸터 */
.site-footer { background-color: #333 !important; color: #ccc !important; padding: 30px 15px; padding-bottom: 100px !important; width: 100%; margin: 0 !important; flex: none; }
.site-footer p { font-size: 11px !important; line-height: 1.6; margin: 0; opacity: 0.8; }
.site-footer p strong { color: #fff !important; opacity: 1; }

/* 9. 공통 UI (사이드바, 팝업) */
.mobile-sidebar { display: flex !important; flex-direction: column; position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; background-color: #ffffff; box-shadow: -5px 0 20px rgba(0,0,0,0.1); z-index: 9999; padding: 25px; transition: right 0.3s ease-in-out; overflow-y: auto; visibility: hidden; }
.mobile-sidebar.active { right: 0; visibility: visible; }
.sidebar-close-btn { align-self: flex-end; background: none; border: none; color: #333; font-size: 30px; cursor: pointer; padding: 10px; margin-bottom: 20px; }
.sidebar-menu-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.sidebar-menu-list a { color: #333; text-decoration: none; font-size: 17px; font-weight: 600; border-bottom: 1px solid #f5f5f5; padding-bottom: 12px; display: block; }
.sidebar-footer { text-align: center; border-top: 1px solid #f5f5f5; padding-top: 20px; margin-top: auto; }
.sidebar-icons { display: flex; justify-content: center; gap: 15px; }
.sidebar-icons img { width: 32px; height: 32px; }

#popup-wrapper .popup-content { width: 85% !important; max-width: 320px !important; padding: 20px !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; max-height: 85vh !important; overflow-y: auto; border-radius: 15px !important; }
.popup-content img { width: 70px !important; margin-bottom: 10px !important; }
.popup-content h2 { font-size: 18px !important; margin: 5px 0 10px 0 !important; line-height: 1.2 !important; }
.popup-content h2 .lang-en { font-size: 13px !important; display: block; margin-top: 2px !important; color: #888; font-weight: normal; }
.popup-content p { font-size: 13px !important; line-height: 1.4 !important; margin: 10px 0 15px 0 !important; word-break: keep-all; color: #555; }
.popup-content p .lang-en { font-size: 11px !important; color: #999; margin-top: 5px !important; line-height: 1.2 !important; }
.popup-buttons { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid #f0f0f0; gap: 8px !important; }
.popup-buttons button { padding: 10px 0 !important; font-size: 13px !important; border-radius: 8px !important; }




/* ==============================================
   [추가] 메인 배너 이미지 비율 고정 (잘림 방지)
   ============================================== */
.main-swiper {
    width: 100%;
    height: auto !important;       /* 억지로 늘린 높이 해제 */
    aspect-ratio: auto !important; /* 비율 강제 해제 */
    padding-bottom: 0 !important;
}

.main-swiper .swiper-slide {
    height: auto !important;       /* 슬라이드 높이도 내용물에 맞게 */
    display: block !important;     /* flex로 인한 높이 늘어짐 방지 */
    background: #fff;
}

.main-swiper .swiper-slide img {
    width: 100% !important;        /* 가로 꽉 채우기 */
    height: auto !important;       /* 세로는 비율대로 자동 조절 */
    object-fit: contain !important;/* 이미지가 잘리지 않고 다 보이게 */
    margin: 0 auto;
}