/* =====================================================
   header-mobile-drawer.css
   mobile right drawer only
   ===================================================== */

.nav-mobile-head,
.nav-drawer-overlay{
  display:none;
}

@media (min-width: 761px){
  .nav-mobile-head,
  .nav-mobile-close,
  .nav-drawer-overlay{
    display:none !important;
  }
}

@media (max-width: 760px){

  body.nav-open{
    overflow:hidden !important;
    touch-action:none !important;
  }

  .header{
    z-index:9999;
  }

  .header .header-inner{
    position:relative;
    z-index:1;
  }

  .header .nav-toggle{
    position:relative;
    z-index:2;
  }

  .header.is-open .nav-toggle{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* overlay */
  .header .nav-drawer-overlay{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    background: rgba(15, 23, 42, 0.42) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition: opacity .28s ease, visibility .28s ease !important;
    z-index:9996 !important;
  }

  .header.is-open .nav-drawer-overlay{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* 우측 드로어 */
  .header .nav[data-nav]{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(76vw, 300px) !important;
    max-width:300px !important;
    height:100dvh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-left:1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius:0 !important;
    background:#fdfbf7 !important;
    box-shadow:-18px 0 40px rgba(2, 6, 23, 0.14) !important;
    transform:translateX(100%) !important;
    transition: transform .32s cubic-bezier(.22,.61,.36,1) !important;
    z-index:9997 !important;

    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .header.is-open .nav[data-nav]{
    transform:translateX(0) !important;
  }

  /* 드로어 상단 */
  .header .nav-mobile-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:18px 18px 16px !important;
    border-bottom:1px solid rgba(15, 23, 42, 0.06) !important;
    background: rgba(255,255,255,.96) !important;
    flex:0 0 auto !important;
  }

  .header .nav-mobile-title{
    display:block !important;
    font-size:15px !important;
    font-weight:700 !important;
    letter-spacing:-0.02em !important;
    line-height:1.2 !important;
    color:#3d5a40 !important;
  }

  .header .nav-mobile-close{
    position:relative !important;
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
    border:1px solid rgba(15,23,42,.08) !important;
    background:#fbfaf7 !important;
    box-shadow:0 2px 10px rgba(15,23,42,.04) !important;
    cursor:pointer !important;
    flex:0 0 auto !important;
  }

  .header .nav-mobile-close span{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:18px !important;
    height:2px !important;
    background:#2f2a25 !important;
    border-radius:2px !important;
  }

  .header .nav-mobile-close span:nth-child(1){
    transform:translate(-50%, -50%) rotate(45deg) !important;
  }

  .header .nav-mobile-close span:nth-child(2){
    transform:translate(-50%, -50%) rotate(-45deg) !important;
  }

  /* 메뉴 공통 */
  .header .nav[data-nav] > a,
  .header .nav[data-nav] > .nav-item,
  .header .nav[data-nav] > .nav-admin{
    flex:0 0 auto !important;
    width:100% !important;
  }

  .header .nav[data-nav] > a,
  .header .nav[data-nav] > .nav-item{
    border-bottom:1px solid rgba(15,23,42,.055) !important;
  }

  .header .nav[data-nav] > a,
  .header .nav[data-nav] .dropdown-toggle{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    text-align:left !important;
    padding:20px 22px !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.25 !important;
    color:#1f2a20 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    white-space:normal !important;
  }

  /* 화살표 */
  .header .nav-item.dropdown{
    position:static !important;
  }

  .header .nav-item.dropdown .dropdown-toggle::after{
    content:"" !important;
    display:block !important;
    width:7px !important;
    height:7px !important;
    border-right:1.8px solid #6a7566 !important;
    border-bottom:1.8px solid #6a7566 !important;
    transform:rotate(45deg) !important;
    margin-top:-4px !important;
    opacity:.9 !important;
    flex:0 0 auto !important;
    transition: transform .22s ease, margin-top .22s ease, opacity .2s ease !important;
  }

  .header .nav-item.dropdown.is-open .dropdown-toggle::after{
    transform:rotate(-135deg) !important;
    margin-top:4px !important;
  }

  /* 서브메뉴 기본 닫힘 */
  .header .nav-item.dropdown .dropdown-menu{
    position:static !important;
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    margin:0 !important;
    padding:0 0 8px !important;
    min-width:0 !important;
    border:0 !important;
    border-top:1px solid rgba(15,23,42,.05) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background: rgba(93, 113, 87, 0.03) !important;
    max-height:0 !important;
    overflow:hidden !important;
  }

  /* hover/focus-within 금지 */
  .header .nav-item.dropdown:hover .dropdown-menu,
  .header .nav-item.dropdown:focus-within .dropdown-menu{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    max-height:0 !important;
    overflow:hidden !important;
  }

  /* 오직 JS 클래스일 때만 열림 */
  .header .nav-item.dropdown.is-open .dropdown-menu,
  .header .nav-item.dropdown.is-open:hover .dropdown-menu,
  .header .nav-item.dropdown.is-open:focus-within .dropdown-menu{
    display:flex !important;
    flex-direction:column !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    max-height:500px !important;
    overflow:visible !important;
  }

  .header .nav-item.dropdown .dropdown-menu a{
    position:relative !important;
    padding:14px 22px 14px 44px !important;
    font-size:14px !important;
    font-weight:600 !important;
    color:#5d6b5a !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    white-space:normal !important;
  }

  .header .nav-item.dropdown .dropdown-menu a::before{
    content:"" !important;
    position:absolute !important;
    left:24px !important;
    top:50% !important;
    width:10px !important;
    height:1px !important;
    background:#9aa69a !important;
    transform:translateY(-50%) !important;
  }

  /* 관리자 영역 */
  .header .nav-admin{
    display:flex !important;
    align-items:stretch !important;
    gap:8px !important;
    margin-top:8px !important;
    padding:16px 18px 18px !important;
    border-top:1px solid rgba(15,23,42,.08) !important;
  }

  .header .nav-admin-form{
    flex:1 !important;
    margin:0 !important;
  }

  .header .nav-admin-link{
    width:100% !important;
    text-align:center !important;
  }
}
/* =========================================
   FINAL FIX - mobile drawer top / accordion
   반드시 맨 아래 추가
   ========================================= */
@media (max-width: 760px) {

  /* 홈에서 header.is-open 어두운 배경 먹는 것 차단 */
  body.home-page .header.is-open {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.home-page .header.is-open .header-inner {
    background: transparent !important;
  }

  /* 드로어 헤더 톤 고정 */
  .header .nav-mobile-head {
    background: #fdfbf7 !important;
    border-bottom: 1px solid rgba(15,23,42,.06) !important;
  }

  /* 모바일에서는 PC용 hover / focus-within 완전 차단 */
  .header .nav[data-nav] .nav-item.dropdown:hover > .dropdown-menu,
  .header .nav[data-nav] .nav-item.dropdown:focus-within > .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  .header .nav[data-nav] .nav-item.dropdown.is-open > .dropdown-menu,
  .header .nav[data-nav] .nav-item.dropdown.is-open:hover > .dropdown-menu,
  .header .nav[data-nav] .nav-item.dropdown.is-open:focus-within > .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    max-height: 500px !important;
    overflow: visible !important;
  }
}
/* =========================================
   MOBILE OVERFLOW BLOCK FIX
   header-mobile-drawer.css 맨 아래 추가
   ========================================= */
@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    max-width: 100% !important;
  }
}
/* =========================================
   FINAL ACTIVE STYLE - mobile drawer only
   맨 아래 추가
   ========================================= */
@media (max-width: 760px) {

  /* 상위 메뉴(드롭다운 부모) active:
     배경 없이 글자만 강조 */
  .header .nav[data-nav] > .nav-item > .dropdown-toggle.is-active {
    color: #2f6f4f !important;
    background: transparent !important;
    font-weight: 800 !important;
  }

  /* 단일 메뉴 active:
     연한 초록 배경 + 초록 글자 */
  .header .nav[data-nav] > a.is-active {
    color: #2f6f4f !important;
    background: rgba(47,111,79,.08) !important;
    font-weight: 800 !important;
  }

  /* 모바일에서는 데스크탑용 underline / 선 장식 제거 */
  .header .nav[data-nav] > a.is-active::after,
  .header .nav[data-nav] > .nav-item > .dropdown-toggle.is-active::after,
  .header .nav[data-nav] > a.is-active::before,
  .header .nav[data-nav] > .nav-item > .dropdown-toggle.is-active::before {
    content: none !important;
    display: none !important;
  }

  /* 서브메뉴 active:
     실제 선택된 메뉴만 배경 강조 */
  .header .nav[data-nav] .dropdown-menu a.is-active {
    color: #2f6f4f !important;
    background: rgba(47,111,79,.08) !important;
    font-weight: 700 !important;
  }

  /* 서브메뉴의 기본 장식선은 유지하되
     active에서 과하게 진해지지 않게만 정리 */
  .header .nav[data-nav] .dropdown-menu a.is-active::before {
    background: #9aa69a !important;
    opacity: 1 !important;
  }

  /* 모바일에서는 온라인예약도 일반 메뉴 행처럼 처리 */
  .header .nav[data-nav] > a.nav-booking {
    background: transparent !important;
    color: #1f2a20 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 20px 22px !important;
  }

  .header .nav[data-nav] > a.nav-booking.is-active {
    color: #2f6f4f !important;
    background: rgba(47,111,79,.08) !important;
    font-weight: 800 !important;
  }
}