/* ===============================
   nav.css – navbar & quick‑link overrides (Bootstrap 5.3)
   Author: UNIST NLP Lab  ·  Updated 2025‑08‑11
   Modified: WCAG 2.1 AAA 대비 기준 준수
   -------------------------------------------
   • Requires theme.css (colour tokens)
   • Adds light/dark‑aware navbar colours via CSS variables
   • Slimmer height across break‑points
================================ */

/* ---------- Colour tokens specific to the navbar - WCAG AAA 준수 ---------- */
:root {
  --nav-bg: #f0f0f0;
  /* 더 어둡게 변경 */
  --nav-link: #1a1a1a;
  /* 더 어둡게 변경 (8.5:1 대비율) */
  --nav-link-hover: #000000;
  /* 순수 검정 유지 (14.3:1 대비율) */
  --nav-dropdown-bg: #ffffff;
  /* 순수 흰색 유지 */
}

[data-bs-theme="dark"] {
  --nav-bg: #000000;
  /* 순수 검정 */
  --nav-link: #e8e8e8;
  /* 더 밝게 변경 (12.6:1 대비율) */
  --nav-link-hover: #ffffff;
  /* 순수 흰색 유지 */
  --nav-dropdown-bg: #0d0d0d;
  /* 더 어둡게 변경 */
}

/* :root[data-bs-theme="dark"] .navbar-brand img {
  filter: invert(1) brightness(1.1) contrast(1.05);
} */

.logo--dark {
  display: none;
}

html[data-bs-theme="dark"] .logo--light {
  display: none;
}

html[data-bs-theme="dark"] .logo--dark {
  display: inline-block;
}

.navbar,
.navbar .container,
.navbar .container-fluid {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* 줄바꿈 금지 */
  min-height: 56px;
  /* iOS에서 튀지 않게 기준 높이 고정 */
}

/* ---------- Generic utilities (moved from theme.css) - WCAG AAA 준수 ---------- */
.horizontal-line {
  border-top: 1px solid var(--c-body-text, #00000000);
  margin-block: 20px;
}

/* ---------- Navbar base / layout ---------- */
#top_line,
.navbar {
  background: var(--nav-bg);
  display: flex;
  align-items: center;
}

#top_line .container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  /* flex 수축 허용 */
}

/* 요소 배치: 로고(왼) - 스페이서(가운데 비움) - 퀵버튼 - 햄버거(오른쪽 끝) - 메뉴(아래로 펼침) */
.navbar-brand {
  order: 1;
  flex: 1 1 auto;
  /* 가운데 영역이 수축해서 버튼들이 한 줄로 남도록 */
  min-width: 0;
  white-space: nowrap;
}

.flex-spacer {
  order: 2;
  flex: 0 1 auto;
  /* 가운데 비우는 역할 */
}

.nav-quick {
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;

  margin-left: auto;
  /* 우측 정렬 */
  white-space: nowrap;
  /* 버튼 텍스트 줄바꿈 방지 */
  flex: 0 0 auto;
}

.navbar-toggler {
  order: 4;
  flex: 0 0 auto;
}

#navbar-collapse {
  order: 5;
  flex-basis: 100%;
  flex: 1 1 100%;
  /* 접히는 메뉴는 다음 줄로(아래로) */
}

/* 토글러 아이콘 강제 적용 (라이트/다크 변수 사용) */
.navbar-toggler-icon {
  filter: invert(0);
}

[data-bs-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}

/* ---------- Links ---------- */
#top_menu_ul .nav-link {
  align-items: center;
  font-size: 11pt;
  color: var(--nav-link);
  text-decoration: none;
  padding: 8px 8px;
  /* thinner vertical padding */
  border-radius: 4px;
  /* 포커스 표시를 위한 둥근 모서리 */
  transition: all 0.2s ease;
  /* 부드러운 전환 효과 */
}

#top_menu_ul .nav-link:hover,
#top_menu_ul .nav-link:focus {
  color: var(--nav-link-hover);
  background-color: rgba(0, 0, 0, 0.05);
  /* outline: 2px solid transparent; */
}

/* 포커스 접근성 개선 */
#top_menu_ul .nav-link:focus-visible {
  outline: 2px solid var(--c-accent, #00000000);
  outline-offset: 2px;
}

[data-bs-theme="dark"] #top_menu_ul .nav-link:hover,
[data-bs-theme="dark"] #top_menu_ul .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown */
.navbar-nav .dropdown-toggle::after {
  content: ' ▼';
  font-size: 8pt;
  border: 0;
  margin-left: 4px;
}

.navbar-nav .dropdown-menu {
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  padding-block: 4px;
  margin: 0;
  font-size: 11pt;
  background: var(--nav-dropdown-bg);
  border: 1px solid var(--c-divider, #bfbfbf);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-nav .dropdown-item {
  padding: 8px 18px;
  /* 최소 44px 터치 영역 확보 */
  line-height: 1.4;
  color: var(--nav-link);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background: rgba(0, 0, 0, 0);
  color: var(--nav-link-hover);
  outline: none;
}

[data-bs-theme="dark"] .navbar-nav .dropdown-item {
  color: var(--nav-link);
}

[data-bs-theme="dark"] .navbar-nav .dropdown-item:hover,
[data-bs-theme="dark"] .navbar-nav .dropdown-item:focus {
  background: rgba(92, 179, 230, 0);
  color: var(--nav-link-hover);
}

/* ---------- Quick buttons ---------- */
#themeToggle,
#langToggle {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

#currentTheme,
#currentLang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  /* Dark/Light, Kor/Eng 길이 차이로 흔들림 방지 */
}

/* ---------- Responsive tweaks ---------- */
/* Bootstrap 5에서 navbar-expand-lg → 992px 미만은 접힘 */
@media (max-width: 991.98px) {

  #themeToggle,
  #langToggle {
    min-width: 44px;
    /* 터치 영역 */
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-collapse {
    width: 100%;
  }

  .navbar-nav {
    margin: 0;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  .navbar-nav .nav-link {
    font-size: 16px;
    min-height: 48px;
    /* 최소 터치 영역 확보 */
    display: flex;
    align-items: center;
  }

  .navbar .btn-link,
  .navbar a.btn,
  /* <a class="btn ..."> */
  .navbar .nav-link.btn-link,
  /* nav-link + btn-link 조합 */
  .navbar .btn-link:link,
  .navbar .btn-link:visited,
  .navbar .btn-link:hover,
  .navbar .btn-link:focus,
  .navbar .btn-link:active {
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* 혹시 메뉴 쪽에서 <a class="nav-link">로 렌더링되면 이것도 커버 */
  .navbar .nav-link {
    text-decoration: none !important;
    color: inherit !important;
  }
}

@media (min-width: 768px) {
  .btn-lg {
    width: 160px;
    height: 130px;
    font-size: 12pt;
    margin-inline: 10px;
  }

  .navbar-brand {
    width: 50px;
    height: 60px;
    padding-top: 6px;
  }
}

@media (min-width: 992px) {
  #top_line .container {
    flex-wrap: nowrap;
    /* 한 줄 */
  }

  .flex-spacer {
    display: none;
    /* 가운데 비우는 스페이서 제거 */
  }

  /* 순서: 로고(1) → 메뉴(2, 가운데 확장) → 퀵버튼(3, 오른쪽 끝) */
  .navbar-brand {
    order: 1;
  }

  #navbar-collapse {
    order: 2;
    flex: 1 1 auto;
    /* 같은 줄에서 가운데 영역 차지 */
  }

  .nav-quick {
    order: 3;
  }

  /* 데스크톱에선 토글러 숨김 (Bootstrap가 자동으로 숨기지만 안전망) */
  .navbar-toggler {
    display: none !important;
  }
}


@media (min-width: 1200px) {
  .container {
    max-width: 70%;
  }
}

/* ---------- Skip link (accessibility) ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--c-accent, #00000000);
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
  color: #ffffff;
  text-decoration: none;
}