/* ==============================================
   1. 헤더 전체 레이아웃 (PC: 고정 & 블러 효과)
   ============================================== */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%; /* 위아래 패딩 대신 높이(height)로 조절합니다 */

    /* [PC 디자인 핵심] 스크롤 시 상단 고정 + 반투명 효과 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* PC 헤더 높이 고정 */

    background-color: rgba(255, 255, 255, 0.95); /* 살짝 투명한 흰색 */
    backdrop-filter: blur(10px); /* 배경 흐림 효과 (고급스러움) */

    z-index: 1000;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* 아주 연한 구분선 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 부드러운 그림자 */
    box-sizing: border-box;

    transition: all 0.3s ease;
}

/* ==============================================
   2. 로고 설정 (잘림 방지 및 크기 최적화)
   ============================================== */
.site-header .site-logo {
    flex-shrink: 0;
    height: 100%; /* 부모 높이에 맞춤 */
    display: flex;
    align-items: center;
}

.site-header .site-logo img {
    height: 50px; /* ★핵심: 헤더 80px 안에서 여유 있게 50px로 고정 */
    width: auto;
    max-width: 180px; /* 너무 길어지는 것 방지 */
    object-fit: contain; /* 이미지 비율 유지 */
    display: block;
}

/* ==============================================
   3. 오른쪽 그룹 (메뉴 + 주문 버튼)
   ============================================== */
.header-right-group {
    display: flex;
    align-items: center;
}

/* ==============================================
   4. 메인 메뉴 (텍스트 스타일)
   ============================================== */
.site-header .main-menu {
    margin-right: 30px; /* 주문 버튼과의 간격 */
}

.site-header .main-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.site-header .main-menu li { margin: 0; }

/* 메뉴 사이 구분선 (|) */
.site-header .main-menu li + li::before {
    content: "|";
    color: #e0e0e0; /* 연한 회색 */
    font-weight: normal;
    margin: 0 25px;
}

.site-header .main-menu a {
    text-decoration: none;
    color: #333333; /* 진한 회색 */
    font-size: 1.05rem; /* 글자 크기 적당하게 */
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.site-header .main-menu a:hover {
    color: #e63946; /* 마우스 올리면 브랜드 레드 컬러 */
}

/* ==============================================
   5. 주문 버튼 (★강조 스타일 적용★)
   ============================================== */
.site-header .order-button-container {
    flex-shrink: 0;
}

.site-header .order-button {
    display: block;
    /* [수정됨] 속이 꽉 찬 빨간색 알약 버튼 */
    background-color: #e63946;
    color: #ffffff; /* 글자 흰색 */
    padding: 10px 28px;
    border-radius: 30px; /* 완전 둥글게 */
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none; /* 테두리 제거 */
    box-shadow: 0 4px 10px rgba(230, 57, 70, 0.3); /* 빨간색 그림자 */
}

.site-header .order-button:hover {
    background-color: #d32f2f; /* 호버 시 더 진한 빨강 */
    color: #ffffff;
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 6px 15px rgba(230, 57, 70, 0.4);
}

/* ==============================================
   6. 햄버거 버튼 (PC에선 숨김)
   ============================================== */
#hamburger-btn {
    display: none;
}


/* ==============================================
   7. ★ 모바일 반응형 스타일 (Mobile Only) ★
   ============================================== */
@media (max-width: 768px) {

    /* [요청 1. 모바일 헤더 고정 풀기 & 슬림하게] */
    .site-header {
        position: relative; /* 고정 해제 (스크롤하면 사라짐) */
        height: 60px; /* 높이 줄임 */
        padding: 0 15px; /* 좌우 여백 줄임 */
        background-color: #ffffff; /* 블러 효과 제거하고 깔끔한 흰색 */
        border-bottom: 1px solid #f0f0f0;
        box-shadow: none; /* 그림자 제거 (깔끔하게) */
    }

    /* 로고 크기 모바일 최적화 */
    .site-header .site-logo img {
        height: 35px; /* 모바일 높이에 맞춰 작게 */
        max-width: 140px;
    }

    /* 1. PC용 메뉴/버튼 그룹 숨김 */
    /* (모바일은 하단 탭바를 쓰므로 상단 메뉴는 숨깁니다) */
    .header-right-group {
        display: none !important;
    }

    /* [요청 2. 위쪽 햄버거 아이콘 숨기기] */
    /* (이미 HTML에 있지만 혹시 모르니 확실하게 숨김) */
    #hamburger-btn {
        display: none !important;
    }

    /* 모바일에서는 주문버튼 컨테이너도 숨김 (하단 탭바에 있으니까) */
    .order-button-container {
        display: none;
    }
}