/**
 * 데스크톱 메인 메뉴 위젯 스타일
 *
 * widgets/branch/desktop-main-menu.php 에서 사용하는 CSS 스타일입니다.
 * 지점 도메인에서 768px 이상 화면에 표시되는 메인 메뉴 스타일을 정의합니다.
 */

/* ============================================ */
/* 메인 메뉴 컨테이너                              */
/* ============================================ */

/* 메인 메뉴: 전체 너비(viewport 기준), 상/하단 border */
/* container 안에 있어도 브라우저 좌/우 끝까지 border가 표시되도록 함 */
/* 🚨 z-index: 헤더 드롭다운(반응, 알림 등)보다 낮게 설정하여 가리지 않도록 함 */
.branch-main-menu {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    background: transparent;
    z-index: 100;
}

/* ============================================ */
/* 1차 카테고리 메뉴 아이템                         */
/* ============================================ */

/* 1차 카테고리 아이템: 텍스트 길이에 따라 유연한 너비 */
.branch-menu-item {
    flex-shrink: 0;
    position: relative;
}

/* 메뉴 링크 스타일: 검정색 텍스트, 충분한 터치 영역, 큰 글씨 */
.branch-menu-link {
    display: inline-flex;
    align-items: center;
    color: #212529;
    text-decoration: none;
    padding: 14px 24px 14px 0;
    min-height: 48px;
    font-size: 1.1rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: rgba(13, 110, 253, 0.1);
}

.branch-menu-link:hover {
    color: #0d6efd;
}

/* 터치 디바이스에서 활성화 상태 */
.branch-menu-link:active {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

/* ============================================ */
/* 메뉴 아이콘 (햄버거 메뉴)                        */
/* ============================================ */

/* 메뉴 아이콘: 1차 카테고리 끝에 고정 표시 */
.branch-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212529;
    text-decoration: none;
    padding: 14px 0 14px 16px;
    min-height: 48px;
    min-width: 48px;
    font-size: 1.5rem;
    font-weight: bold;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: rgba(13, 110, 253, 0.1);
    flex-shrink: 0;
}

.branch-menu-icon:hover {
    color: #0d6efd;
}

.branch-menu-icon:active {
    color: #0d6efd;
}

/* ============================================ */
/* 2차 카테고리 드롭다운 스타일                      */
/* ============================================ */

/* 드롭다운 패널: 기본 숨김, 클릭 시 표시 */
/* 🚨 z-index 1060: 헤더 드롭다운(1050)보다 높게 설정하여 메뉴 드롭다운이 위에 표시 */
.branch-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

/* 1차 카테고리 클릭 시 해당 드롭다운만 표시 (.show 클래스로 제어) */
.branch-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 드롭다운 링크 스타일 */
.branch-dropdown-link {
    display: flex;
    align-items: center;
    color: #4b5563;
    text-decoration: none;
    padding: 10px 16px;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: rgba(13, 110, 253, 0.1);
}

.branch-dropdown-link:hover {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

.branch-dropdown-link:active {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
}

/* ============================================ */
/* 다열 드롭다운 (서브카테고리 개수에 따라)            */
/* ============================================ */

/* 2열 레이아웃: 8개 이상 ~ 15개 */
.branch-dropdown.two-columns {
    display: flex;
    flex-wrap: wrap;
    min-width: 360px;
}

.branch-dropdown.two-columns .branch-dropdown-link {
    width: 50%;
    box-sizing: border-box;
}

/* 3열 레이아웃: 16개 이상 */
.branch-dropdown.three-columns {
    display: flex;
    flex-wrap: wrap;
    min-width: 540px;
}

.branch-dropdown.three-columns .branch-dropdown-link {
    width: 33.333%;
    box-sizing: border-box;
}

/* ============================================ */
/* 전체보기 링크 스타일                            */
/* ============================================ */

/* 드롭다운 구분선 */
.branch-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* 전체보기 링크 강조 스타일 */
.branch-dropdown-view-all {
    font-weight: 600;
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05);
}

.branch-dropdown-view-all:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

/* 다열 레이아웃에서 구분선과 전체보기 링크는 전체 너비 사용 */
.branch-dropdown.two-columns .branch-dropdown-divider,
.branch-dropdown.three-columns .branch-dropdown-divider,
.branch-dropdown.two-columns .branch-dropdown-view-all,
.branch-dropdown.three-columns .branch-dropdown-view-all {
    width: 100%;
}

/* ============================================ */
/* 메인 메뉴 설정 아이콘 스타일 (/design 모드)        */
/* ============================================ */

/* 설정 버튼 래퍼 (상대 위치 기준점) */
/* z-index를 높게 설정하여 사이드바보다 위에 표시되도록 stacking context 생성 */
.main-menu-settings-wrapper {
    position: relative;
    flex-shrink: 0;
    z-index: 9999;
}

/* 설정 버튼 (그라데이션 배경) */
.main-menu-settings-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #fff;
    color: #fff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.main-menu-settings-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}

/* 설정 드롭다운 스타일 */
/* z-index를 9999로 설정하여 사이드바 위젯 설정보다 항상 위에 표시 */
.main-menu-settings-dropdown {
    position: absolute;
    top: 42px;
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none;
    overflow: hidden;
}

.main-menu-settings-dropdown.show {
    display: block;
}

.main-menu-settings-dropdown .dropdown-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.9rem;
}

.main-menu-settings-dropdown .dropdown-body {
    padding: 15px;
}