/* --- PC 레이아웃 기본 스타일 (992px 이상) --- */
@media (min-width: 992px) {
  .container.header-wrapper {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center;
    column-gap: 20px;
    overflow: hidden; 
  }


  .navigation-desktop { display: flex !important; }
  .navigation-mobile { display: none !important; }

  .container.header-wrapper .navigation > ul {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(8px, 1.5vw, 20px) !important;
    padding: 0; margin: 0;
  }

  .container.header-wrapper .navigation li { list-style: none; }

  .container.header-wrapper .navigation a {
    white-space: nowrap;
    word-break: keep-all;
    font-size: clamp(16px, 1.2vw, 22px) !important;
    line-height: 1.05;
    display: inline-block;
  }
}


/* --- 화면이 좁아질수록 단계별로 압축 --- */
@media (max-width: 1360px) and (min-width: 992px) {
  .container.header-wrapper .navigation a {
    font-size: clamp(14px, 1.5vw, 18px) !important;
  }
  .container.header-wrapper .navigation > ul {
    gap: clamp(6px, 1.2vw, 16px) !important;
  }
}

@media (max-width: 1050px) and (min-width: 992px) {
  .container.header-wrapper .navigation a {
    font-size: clamp(11px, 2.2vw, 14px) !important;
    letter-spacing: -0.7px; 
  }
  .container.header-wrapper .navigation > ul {
    gap: clamp(4px, 1.2vw, 8px) !important;
  }
}


/* ===== 991px 이하에서 '모바일 스타일' 강제 사용 (햄버거 메뉴) ===== */
@media (max-width: 991px) {
  /* --- 기본 레이아웃 전환 --- */
  .navigation-desktop { display: none !important; }
  .navigation-mobile { display: block !important; }
  header.site-header nav.navigation { display:none !important; }
  header.site-header .menu-toggle { display: block !important; }

  .container.header-wrapper {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    overflow: visible;
    /* 로고와 메뉴 영역을 8:2 비율로 설정 */
    grid-template-columns: 8fr 2fr;
  }

  /* 스크롤 시 container.header-wrapper 강제 흰색 배경 (모바일) */
  .site-header.scrolled .container.header-wrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
  }

  /* 로고 영역 크기 제한 (8/10) */
  .container.header-wrapper .logo,
  .container.header-wrapper .site-logo,
  .container.header-wrapper .brand {
    flex: 0 0 80%;
    max-width: 80%;
    display: flex;
    align-items: center;
  }

  /* 로고 이미지 크기 조정 */
  .container.header-wrapper .logo img,
  .container.header-wrapper .site-logo img,
  .container.header-wrapper .brand img {
    max-width: 100%;
    height: auto;
    max-height: 40px; /* 모바일에서 로고 높이 제한 */
  }

  /* 메뉴 토글 버튼 영역 (2/10) - 전체 영역 */
  .container.header-wrapper .menu-toggle,
  .container.header-wrapper .hamburger {
    flex: 0 0 20%;
    max-width: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* 햄버거 메뉴 버튼 크기 - 조금 더 크게 조정 */
  .container.header-wrapper .menu-toggle {
    /* 메뉴 영역(20%)의 70% 정도 사용 */
    width: 70% !important;
    max-width: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* 햄버거 메뉴 span 요소 - 버튼 크기에 맞게 조정 */
  .container.header-wrapper .menu-toggle span {
    left: 8px !important;
    right: 8px !important;
    height: 2.5px !important;
    background-color: #fff !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(1) {
    top: 12px !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(2) {
    top: 19px !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(3) {
    top: 26px !important;
  }

/* --- 모바일 메뉴 패널 스타일 --- */
header.site-header { position: relative; }

header.site-header nav.mobile-nav { 
  display: none; 
  position: absolute; 
  top: 100%; 
  left: auto;
  right: 0; 
  background: transparent !important; /* 모바일 메뉴 배경을 투명하게 설정 */
  color: #111; 
  border-top: 1px solid #e9ecef;
  box-shadow: none !important; /* 그림자 제거 */
  z-index: 2000;
  border-radius: 0 0 8px 8px; /* 하단 모서리 둥글게 */
}

  /* 모바일 메뉴 닫기 버튼 */
  header.site-header nav.mobile-nav .mobile-nav-header {
    display: flex;
    justify-content: flex-end;
    padding: 10px 15px;
    background: transparent; /* 배경 제거하여 중복 방지 */
    border-bottom: 1px solid #e9ecef;
  }

  header.site-header nav.mobile-nav .mobile-nav-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
  }

  header.site-header nav.mobile-nav .mobile-nav-close:hover {
    background-color: #f8f9fa;
  }
  
  header.site-header.mobile-open nav.mobile-nav { 
    display: block !important; 
  }

  /* 메뉴 열림 상태에서 화살표 표시 방지 */
  header.site-header.mobile-open::after,
  header.site-header.mobile-open::before {
    content: none !important;
    display: none !important;
  }
  

  /* --- 메뉴 항목(ul, li, a) 스타일 --- */
  /* 최상위 ul의 패딩 및 배경 제거 */
  header.site-header nav.mobile-nav ul { 
    margin: 0; 
    padding: 0; 
    background: transparent;
    border-top: 0;
  }

  header.site-header nav.mobile-nav li { 
    list-style: none; 
    border-bottom: 1px solid #e9ecef;
    background: #fff; /* li에 배경색 직접 적용 */
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
  /* 첫 번째와 마지막 li에 라운딩 적용 */
  header.site-header nav.mobile-nav li:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  header.site-header nav.mobile-nav li:last-of-type {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }


  header.site-header nav.mobile-nav a {
    display: block; 
    padding: 12px 14px;
    color: #111 !important; 
    text-decoration: none; 
    line-height: 1.2;
  }

  header.site-header nav.mobile-nav a:hover { 
    background: #f8f9fa; 
  }

  /* --- 드롭다운(하위) 메뉴 스타일 --- */
  header.site-header nav.mobile-nav ul ul {
    position: static !important;
    display: none;
    margin: 6px 0 0 0;
    padding: 6px 0;
    border: 0;
    box-shadow: none;
    background: #fff !important; 
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
  
  header.site-header nav.mobile-nav ul ul a {
    padding-left: 22px; 
  }

  header.site-header nav.mobile-nav li.open > ul { 
    display: block !important; 
  }
}
/* === Mobile off-canvas: RIGHT anchored === */
@media (max-width: 767.9px){
  /* 더 작은 모바일에서 로고 크기 추가 조정 */
  .container.header-wrapper .logo img,
  .container.header-wrapper .site-logo img,
  .container.header-wrapper .brand img {
    max-height: 35px; /* 더 작은 모바일에서 로고 높이 추가 제한 */
  }

  /* 햄버거 메뉴 버튼 크기 - 조금 더 크게 조정 */
  .container.header-wrapper .menu-toggle {
    width: 70% !important;
    max-width: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
  }

  .container.header-wrapper .menu-toggle span {
    left: 8px !important;
    right: 8px !important;
    height: 2.5px !important;
    background-color: #fff !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(1) {
    top: 12px !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(2) {
    top: 19px !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(3) {
    top: 26px !important;
  }

  header.site-header nav.mobile-nav{
    position: fixed !important;
    top: var(--header-top, 0);
    right: 0;          /* 오른쪽 기준 */
    left: auto !important;   /* 왼쪽 기준 사용 안함 */
    width: min(86vw, 420px); /* 패널 폭 */
    height: auto !important; /* 높이를 자동으로 변경 */
    max-height: 50vh !important; /* 최대 높이를 뷰포트 높이로 제한 */
    transform: translateX(100%);          /* 기본: 화면 밖(오른쪽) */
    transition: transform 280ms ease;
    background:#fff !important;
    z-index: 2147483646 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -16px 0 30px rgba(0,0,0,.12);
  }
  header.site-header.mobile-open nav.mobile-nav{
    transform: translateX(0);             /* 열리면 화면 안 */
  }

  /* 서브메뉴는 열렸을 때만 보이게(필요 시 유지) */
  header.site-header nav.mobile-nav ul ul{ display:none !important; }
  header.site-header nav.mobile-nav li.open > ul{ display:block !important; }

  /* 패널 내부 항목 우측정렬 원하면 추가 */
  header.site-header nav.mobile-nav > ul{
    padding: 16px 18px;
    text-align: right;           /* 필요 없으면 지워도 됨 */
  }
}

/* --- ▼ 모바일 하위 메뉴 문제 최종 해결 코드 --- */
@media (max-width: 991px) {

  /* 1. 하위 메뉴 컨테이너(ul ul)는 투명한 '틀' 역할만 하도록 초기화 */
  header.site-header nav.mobile-nav ul ul {
    position: static !important;
    width: 92% !important;
    margin: 8px auto 8px auto !important;
    
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,.05) !important;
  }

  /* 2. 각 메뉴 항목(li)이 배경색을 갖는 '실제 조각'이 됨 */
  header.site-header nav.mobile-nav ul ul li {
    background: #f8f9fa;
    list-style: none;
  }

  /* 3. 첫 번째 메뉴 항목의 위쪽 모서리만 둥글게 */
  header.site-header nav.mobile-nav ul ul li:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* 4. 마지막 메뉴 항목의 아래쪽 모서리만 둥글게 */
  header.site-header nav.mobile-nav ul ul li:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  /* 5. 하위 메뉴 내부 링크(a) 스타일은 여백만 담당 */
  header.site-header nav.mobile-nav ul ul a {
    width: auto !important;
    margin: 0 !important;
    padding: 12px 26px !important;
    text-align: right;
    color: #333 !important;
    display: block;
  }

  /* 6. 호버 효과는 링크(a)에만 적용 */
  header.site-header nav.mobile-nav ul ul a:hover {
    background: #e9ecef !important;
    color: #000 !important;
  }
}

/* === 매우 작은 모바일 화면 (480px 이하) === */
@media (max-width: 480px) {
  /* 로고 영역을 더 작게 (7:3 비율로 조정) */
  .container.header-wrapper .logo,
  .container.header-wrapper .site-logo,
  .container.header-wrapper .brand {
    flex: 0 0 70%;
    max-width: 70%;
  }

  /* 메뉴 토글 버튼 영역을 더 크게 */
  .container.header-wrapper .menu-toggle,
  .container.header-wrapper .hamburger {
    flex: 0 0 30%;
    max-width: 30%;
  }

  /* 로고 크기 추가 축소 */
  .container.header-wrapper .logo img,
  .container.header-wrapper .site-logo img,
  .container.header-wrapper .brand img {
    max-height: 30px;
  }

  /* 햄버거 메뉴 버튼 크기 - 조금 더 크게 조정 */
  .container.header-wrapper .menu-toggle {
    width: 70% !important;
    max-width: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
  }

  .container.header-wrapper .menu-toggle span {
    left: 8px !important;
    right: 8px !important;
    height: 2.5px !important;
    background-color: #fff !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(1) {
    top: 12px !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(2) {
    top: 19px !important;
  }

  .container.header-wrapper .menu-toggle span:nth-child(3) {
    top: 26px !important;
  }
}