.topnav {
  --topnav-x-padding: 20px;
  height: 52px !important;
  min-height: 52px !important;
  background: #171b28 !important;
  border-bottom: 1px solid #2d3248 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 20px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  scrollbar-width: none;
  box-sizing: border-box !important;
}

/* 홈은 좌측 바로가기만 사용한다. 동적으로 추가되는 상단 메뉴도 표시하지 않는다. */
html body:has(#quickSidebar) .topnav > a:not(.topnav-logo) {
  display: none !important;
}

/* 조사관리 화면의 푸터 타이포그래피를 홈에도 동일하게 적용한다. */
html body:has(#quickSidebar) .cs-footer .cs-corp {
  font-family: 'DM Mono', monospace !important;
  font-size: 7px !important;
  letter-spacing: 3px !important;
  color: rgba(255,255,255,.25) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* 좁은 창에서는 담당구역별 표를 각각 가로로 스크롤한다. */
html body:has(#quickSidebar) .home-weather-modern .home-weather-region {
  display: block;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  padding-bottom: 5px;
}
html body:has(#quickSidebar) .home-weather-modern .home-weather-table {
  min-width: 690px;
}
html body:has(#quickSidebar) .home-weather-modern .home-normal-table {
  min-width: 480px;
}

/* 담당구역은 헤더·구분선만 색을 달리해 수치 가독성을 유지한다. */
html body:has(#quickSidebar) .home-weather-modern .home-weather-region {
  --region-accent: #b58cff;
  border-top: 3px solid var(--region-accent);
  border-radius: 8px 8px 0 0;
  padding-top: 7px;
}
html body:has(#quickSidebar) .home-weather-modern .home-weather-region.region-jeonju {
  --region-accent: #5f8dff;
}
html body:has(#quickSidebar) .home-weather-modern .home-weather-name {
  color: var(--region-accent);
  display: flex;
  align-items: center;
  gap: 7px;
}
html body:has(#quickSidebar) .home-weather-modern .home-weather-name::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--region-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--region-accent) 50%, transparent);
}

/* 같은 일자의 좌우 행을 빠르게 맞춰 볼 수 있도록 날짜별로 약한 띠를 준다. */
html body:has(#quickSidebar) .home-weather-modern tr.weather-day-today td {
  background: transparent;
}
html body:has(#quickSidebar) .home-weather-modern tr.weather-day-yesterday td {
  background: rgba(79, 126, 255, .12);
}
html body:has(#quickSidebar) .home-weather-modern .weather-date {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 700;
}

/* 충분히 넓은 화면에서는 특보를 줄바꿈해 두 지역 표 전체를 한 번에 보여 준다. */
@media (min-width: 1500px) {
  html body:has(#quickSidebar) .home-weather-modern .home-weather-region {
    overflow-x: visible;
    padding-bottom: 0;
  }
  html body:has(#quickSidebar) .home-weather-modern .home-weather-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  html body:has(#quickSidebar) .home-weather-modern .home-weather-table th,
  html body:has(#quickSidebar) .home-weather-modern .home-weather-table td {
    white-space: normal;
    word-break: keep-all;
  }
  html body:has(#quickSidebar) .home-weather-modern .home-weather-table th:last-child,
  html body:has(#quickSidebar) .home-weather-modern .home-weather-table td:last-child {
    width: 31%;
  }
  html body:has(#quickSidebar) .home-weather-modern .home-normal-table {
    width: 100%;
    min-width: 0;
  }
}

.topnav::-webkit-scrollbar,
.topnav-menu-scroll::-webkit-scrollbar {
  display: none;
}

.topnav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding-right: 16px !important;
  border-right: 1px solid #2d3248 !important;
  margin-right: 30px !important;
  flex: 0 0 auto !important;
}

.topnav-logo img {
  height: 40px !important;
  display: block !important;
}

.topnav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  color: #b8c2e2 !important;
  font-size: 13px !important;
  line-height: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  transition: background .15s, color .15s !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  zoom: 1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body .topnav a[data-menu],
html body .topnav a#adminNavLink,
html body .topnav a.active {
  font-size: 13px !important;
  line-height: 13px !important;
  font-weight: 600 !important;
}

.topnav a:hover {
  color: #ffffff !important;
  background: rgba(79, 126, 255, .20) !important;
  box-shadow: inset 0 -2px 0 #4f7eff !important;
}

.topnav a.active {
  color: #ffffff !important;
  background: rgba(79, 126, 255, .25) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 #4f7eff !important;
}

html body .topnav a.active {
  font-size: 13px !important;
  line-height: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: rgba(79, 126, 255, .25) !important;
  box-shadow: inset 0 -2px 0 #4f7eff !important;
}

.topnav-menu-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.topnav-menu-scroll > a {
  flex: 0 0 auto !important;
}

.topnav-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.topnav-user,
#userNameBadge,
#navUserBadge,
#nav-user {
  color: #4f7eff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif !important;
  white-space: nowrap !important;
}

.topnav .btn-logout,
.topnav .btn-small,
.topnav .topnav-btn,
.topnav .btn,
.topnav button {
  appearance: none !important;
  background: #22263a !important;
  border: 1px solid #2d3248 !important;
  color: #b8c2e2 !important;
  min-height: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  line-height: 13px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  box-shadow: none !important;
}

.topnav .btn-logout:hover,
.topnav .btn-small:hover,
.topnav .topnav-btn:hover,
.topnav .btn:hover,
.topnav button:hover {
  background: #2d3248 !important;
  border-color: #4f7eff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .topnav {
    --topnav-x-padding: 12px;
    padding: 0 12px !important;
  }
}

@media (max-width: 480px) {
  /* 375~412px 폭에서 메뉴 링크가 topnav 전체 스크롤 영역 안에 있다 보니
     오른쪽 끝의 로그아웃 버튼(.topnav-right)도 같이 옆으로 밀려나 화면
     밖으로 가려지는 문제가 있었다(08-progress-status.md 미해결 항목).
     .topnav-right만 스크롤 컨테이너 안에서 오른쪽에 고정(sticky)시켜,
     메뉴는 계속 가로 스크롤되더라도 로그아웃 버튼은 항상 보이게 한다.
     HTML 구조는 바꾸지 않고 CSS만 추가한다. */
  .topnav-right {
    position: sticky !important;
    right: 0 !important;
    background: #171b28 !important;
    padding-left: 8px !important;
    z-index: 1 !important;
  }
}

/* 상단 메뉴는 로고 바깥의 별도 스크롤 박스 안에서만 움직인다. */
html body .topnav {
  scroll-padding-left: 180px !important;
}

html body .topnav > .topnav-logo {
  position: relative !important;
  left: auto !important;
  z-index: 60 !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 18px !important;
  padding-left: 0 !important;
  padding-right: 16px !important;
  background: #171b28 !important;
  box-shadow: 10px 0 14px rgba(8, 10, 18, .30) !important;
}

html[data-iris-theme="cyprus"] body .topnav > .topnav-logo {
  background: #004741 !important;
  box-shadow: 10px 0 14px rgba(0, 71, 65, .26) !important;
}