.footer-nav-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.footer-logo-link img {
    height: 40px;
    width: auto;
    vertical-align: middle;
    filter: brightness(0) invert(1); /* 다크모드용 로고가 따로 있으면 이 부분을 수정 */
    transition: filter 0.2s;
}
.footer-select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #232526;
    color: #eee;
    font-size: 1rem;
}
.footer-select:focus {
    outline: 2px solid #00bfff;
}
@media (max-width: 575px) {
    .footer-nav-area {
        flex-direction: column;
        gap: 10px;
    }
    .footer-logo-link img {
        height: 32px;
    }
}


/* 스틱키 메뉴 스타일 */
.sticky-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
}
.sticky-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sticky-menu ul li {
    margin: 0;
}
.sticky-menu ul li a.sticky-btn {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background-color: #6a1b1b; /* 와인색 계열로 변경 */
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background-color 0.3s ease;
    width: 95px;
    height: 95px;
    justify-content: center;
}
.sticky-menu ul li a.sticky-btn:hover {
    background-color: #800020; /* 더 진한 와인색 계열로 변경 */
}
.sticky-menu ul li a.sticky-btn i {
    font-size: 1.5rem;
}
.kakao-sticky-menu {
    line-height: 1.2;
    text-align: center;
    font-size: 1.0rem;
}

.kakao-img {
    width: 24px;
    fill: white;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .sticky-menu {
        bottom: 25px;
        right: 25px;
    }
    .sticky-menu ul li a.sticky-btn {
        width: 80px;
        height: 80px;
        font-size: 0.6rem;
    }
    .sticky-menu ul li a.sticky-btn i {
        font-size: 1.3rem;
    }
    .kakao-sticky-menu {
        font-size: 0.75rem;
    }
    .kakao-sticky-menu {
        line-height: 1.2;
        text-align: center;
        font-size: 0.8rem;
    }
}

.keep-all {
    word-break: keep-all;
}

/* =======================================================
   ✅ 1) PC 상단 nav: 완전 불투명(헤더 안 비치게)
   ======================================================= */
nav.center-nav{
    background: #fff !important;     /* rgba(...) 제거 */
    opacity: 1 !important;
    backdrop-filter: none !important; /* 혹시 적용된 경우 대비 */
}

/* =======================================================
   ✅ 2) 모바일: topbar가 fixed라서 겹침 → body에 공간 확보
   ======================================================= */
@media (max-width: 991.98px){
    /* 모바일 상단 고정바 만큼 아래 콘텐츠 시작점 내리기 */
    body{ padding-top: 92px; }  /* 필요하면 80~110px 사이로 조절 */

    /* 모바일 topbar를 "진짜 상단바"처럼 (비치지 않게) */
    .mobile-topbar{
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;              /* 기존 right:70px 덮기 */
        height: 72px;                     /* body padding-top과 대략 맞추기 */
        padding: 14px 16px;
        background: #fff !important;      /* 완전 불투명 */
        box-shadow: 0 6px 18px rgba(0,0,0,0.10);
        z-index: 3001;                    /* header 위 */
    }

    /* 로고도 확실히 보이게 */
    .mobile-topbar .mobile-logo{ display:block !important; }
}

/* =======================================================
   ✅ 3) (선택) header가 혹시 nav 밑으로 말려 올라오면 안전장치
   ======================================================= */
@media (min-width: 992px){
    header.masthead-sub.margin-top{ margin-top: 60px !important; } /* nav 높이 */
}

/* ✅ 모바일에서 햄버거가 topbar 위로 올라오게 */
@media (max-width: 991.98px){
    .menu-toggle{
        display: inline-flex !important;
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 4005 !important; /* mobile-topbar(3001)보다 크게 */
    }

    /* (선택) 아이콘이 흰 배경에서도 잘 보이게 */
    .menu-toggle i{
        color: #111 !important;
    }
}

/* ✅ 모바일 햄버거 버튼: 흰 배경 + 중앙정렬 + 깔끔한 버튼 */
@media (max-width: 991.98px){
    a.menu-toggle{
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 4005 !important;

        width: 44px !important;
        height: 44px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #fff !important;                 /* ✅ 진한 배경 제거 */
        border: 1px solid rgba(0,0,0,0.14) !important;
        border-radius: 12px !important;             /* 원하면 50%로 동그랗게 가능 */
        box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;

        text-decoration: none !important;
    }

    a.menu-toggle i{
        color: #111 !important;   /* ✅ 아이콘 색 */
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
}


/* ✅ MOBILE: 상단 공백 제거 + 햄버거가 레이아웃을 밀지 않게 */
@media (max-width: 991.98px){

    /* 1) 햄버거 버튼이 공간 차지해서 header 밀어내는 문제 방지 */
    a.menu-toggle{
        position: fixed !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 4000 !important;

        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: rgba(255,255,255,0.95) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    }
    a.menu-toggle i{
        margin: 0 !important;
        line-height: 1 !important;
        font-size: 22px !important;
        color: #111827 !important;
    }

    /* 2) header 상단 여백(공백) 제거 */
    .margin-top{
        margin-top: 0 !important;
    }
    header.masthead.masthead-sub{
        margin-top: 0 !important;
    }

    /* 3) 혹시 body에 상단 padding이 잡혀있으면 같이 제거 */
    body{
        padding-top: 0 !important;
    }
}