/* ── 헤더 빌더 공통 스타일 ──────────────────────────────────────────────── */

.main-header {
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* PC 헤더는 기본 표시, 모바일 헤더는 숨김 */
.main-header--mobile {
  display: none;
}

/* ── 행(row) 레이아웃 ──────────────────────────────────────────────────── */

.header-row {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  transition: background-color 0.3s ease;
}

.header-row-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  padding: 0;
}

/* 전체 너비(띠배너) 행 — 행 자체는 패딩 없이 full width */
.header-row--full {
  padding-left: 0;
  padding-right: 0;
}

.header-row--full .header-row-full-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ── 3구역(zone) 레이아웃 ──────────────────────────────────────────────── */

.header-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-zone--center {
  flex: 1;
  justify-content: center;
}

.header-zone--left {
  justify-content: flex-start;
}

.header-zone--right {
  justify-content: flex-end;
}

/* ── 로고 ──────────────────────────────────────────────────────────────── */

.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header-logo img {
  display: block;
  object-fit: contain;
}

/* ── 메뉴 ──────────────────────────────────────────────────────────────── */

.main-nav {
  height: 100%;
}

.main-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--menu-gap, 36px);
  height: 100%;
}

.main-nav > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.main-nav ul li a {
  text-decoration: none;
  color: var(--menu-color, inherit);
  font-size: var(--menu-font-size, 15px);
  font-weight: var(--menu-font-weight, 500);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.main-nav > ul > li:hover > a {
  opacity: 0.75;
}

/* 드롭다운 서브메뉴 */
.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background-color: var(--sub-bg, rgba(255, 255, 255, 0.98));
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 12px;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1010;
  border-radius: var(--sub-radius, 4px);
}

.main-nav li.has-submenu:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.main-nav .sub-menu li a {
  display: block;
  padding: 10px 16px;
  color: var(--sub-color, #333);
  font-weight: var(--sub-font-weight, 400);
  font-size: var(--sub-font-size, 14px);
  white-space: nowrap;
  border-radius: var(--sub-radius, 4px);
}

.main-nav .sub-menu li a:hover {
  background-color: color-mix(in srgb, var(--sub-bg, #fff) 85%, #000);
}

/* ── 로그인 / 사용자 메뉴 ──────────────────────────────────────────────── */

.user-menu {
  display: flex;
  align-items: center;
}

.login-btn {
  text-decoration: none;
  color: var(--login-color, #111);
  background-color: var(--login-bg, #fff);
  font-weight: 500;
  font-size: 15px;
  padding: 7px 18px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.3s ease;
  white-space: nowrap;
}

.login-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.user-dropdown {
  position: relative;
}

.user-btn {
  background: var(--user-bg, none);
  border: 1.5px solid currentColor;
  color: var(--user-color, inherit);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--user-radius, 4px);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.3s ease;
  white-space: nowrap;
}

.user-btn:hover {
  background-color: color-mix(in srgb, var(--user-bg, transparent) 85%, #000 15%);
}

.user-submenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--drop-bg, #fff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1010;
  border-radius: var(--drop-radius, 4px);
}

.user-dropdown:hover .user-submenu {
  opacity: 1;
  visibility: visible;
}

.user-submenu li a {
  display: block;
  padding: 10px 14px;
  color: var(--drop-color, #333);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.user-submenu li a:hover {
  background-color: color-mix(in srgb, var(--drop-bg, #fff) 85%, #000);
}

/* ── 버튼(링크) 콘텐츠 ─────────────────────────────────────────────────── */

.header-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 4px;
  transition: opacity 0.2s, color 0.3s ease, background-color 0.3s ease;
  white-space: nowrap;
  color: var(--btn-color, #fff);
  background-color: var(--btn-bg, #111);
}

.header-text {
  color: var(--text-color, inherit);
}

.header-btn:hover {
  opacity: 0.8;
}

/* ── 이미지 콘텐츠 ──────────────────────────────────────────────────────── */

.header-image {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.header-image-link {
  display: flex;
  align-items: center;
}

/* ── 텍스트 콘텐츠 ──────────────────────────────────────────────────────── */

.header-text {
  white-space: nowrap;
  font-size: 14px;
}

/* ── 검색 콘텐츠 ────────────────────────────────────────────────────────── */

.header-search {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-search-input {
  border: 1px solid var(--search-border-color, #ddd);
  border-radius: var(--search-radius, 8px);
  padding: 6px 10px;
  font-size: 14px;
  background: var(--search-input-bg, #fff);
  color: var(--search-input-color, #111);
  outline: none;
  width: 180px;
  transition: border-color 0.2s, background 0.3s ease;
}

.header-search-input:focus {
  border-color: var(--search-border-color, #ddd);
}

.header-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--search-icon-color, #111);
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

/* ── 햄버거 버튼 (모바일 전용) ─────────────────────────────────────────── */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  z-index: 1020;
}

.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 3px;
  margin: 5px 0;
  background-color: currentColor;
}

/* ── 모바일 사이드바 ────────────────────────────────────────────────────── */

.mobile-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  height: 100%;
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 왼쪽에서 열리는 사이드바 */
.mobile-sidebar--left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

.mobile-sidebar.open {
  transform: translateX(0);
}

.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color, rgba(0, 0, 0, 0.5));
  z-index: 1999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.sidebar-backdrop.visible {
  visibility: visible;
  opacity: 1;
}

.close-btn {
  font-size: 28px;
  background: none;
  border: none;
  position: absolute;
  top: 10px;
  right: 14px;
  cursor: pointer;
  color: var(--sidebar-text, #333);
}

/* ── 사이드바 로고 ── */

.sidebar-logo-wrap {
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--sidebar-divider, #eee);
  margin-bottom: 8px;
}

.sidebar-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.sidebar-logo img {
  display: block;
  object-fit: contain;
}

/* ── 사이드바 검색 ── */

.sidebar-search {
  padding: 12px 0;
  border-bottom: 1px solid var(--sidebar-divider, #eee);
  margin-bottom: 8px;
}

.sidebar-search form {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sidebar-divider, #ddd);
  border-radius: 6px;
  padding: 4px 8px;
}

.sidebar-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: var(--sidebar-text, #333);
}

.sidebar-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  color: var(--sidebar-text, #333);
}

/* ── 사이드바 내비게이션 ── */

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  border-bottom: 1px solid var(--sidebar-divider, #eee);
}

.sidebar-nav li a {
  display: block;
  padding: 14px 5px;
  text-decoration: none;
  color: var(--sidebar-text, #333);
  font-weight: 500;
}

.sidebar-nav .has-submenu > a::after {
  content: "›";
  float: right;
  font-size: 20px;
  color: #999;
  transform: rotate(90deg);
  display: inline-block;
  transition: transform 0.2s;
}

.sidebar-nav .has-submenu.open > a::after {
  transform: rotate(270deg);
  color: var(--sidebar-text, #333);
}

.sidebar-nav .sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  border-left: 3px solid var(--sidebar-divider, #ddd);
  margin-left: 10px;
}

.sidebar-nav .has-submenu.open > .sub-menu {
  display: block;
}

.sidebar-nav .sub-menu li a {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
}

/* ── 사이드바 로그인/사용자 정보 ── */

.mobile-user-info {
  padding: 20px 0;
  border-bottom: 1px solid var(--sidebar-divider, #eee);
  margin-top: 20px;
  margin-bottom: 8px;
}

.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sidebar-text, #333);
}

.mobile-user-info .user-menu {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.mobile-user-info .user-menu a {
  text-decoration: none;
  font-size: 14px;
}

.mobile-login-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 11px 18px;
  font-weight: 500;
}

/* ── 반응형: 모바일 전환점 ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* PC 헤더 숨기고 모바일 헤더 표시 */
  .main-header:not(.main-header--mobile) {
    display: none;
  }
  .main-header--mobile {
    display: block;
  }
  /* 모바일 헤더의 menu-toggle은 항상 표시 */
  .main-header--mobile .menu-toggle {
    display: block;
  }
}


/* ── 투명 헤더 (최상단 스크롤 시) ───────────────────────────────────────── */

.main-header.is-transparent .header-row {
  background-color: transparent !important;
}

.main-header.is-transparent {
  border-bottom: none !important;
  box-shadow: none !important;
}

.header-logo .logo-w { display: none; }
.main-header.is-transparent:not(.main-header--logo-keep) .header-logo .logo-default { display: none; }
.main-header.is-transparent:not(.main-header--logo-keep) .header-logo .logo-w { display: block; }

.main-header.is-transparent .main-nav > ul > li > a {
  color: var(--t-menu-color, inherit);
}

.main-header.is-transparent .header-btn {
  color: var(--t-btn-color);
  background-color: var(--t-btn-bg);
}

.main-header.is-transparent .header-text {
  color: var(--t-text-color);
}

.main-header.is-transparent .login-btn {
  color: var(--t-login-color);
  background-color: var(--t-login-bg);
}

.main-header.is-transparent .user-btn {
  color: var(--t-user-color);
  background: var(--t-user-bg);
}

.main-header.is-transparent .header-search-input {
  background: var(--t-search-input-bg);
  border-color: var(--t-search-border);
}

.main-header.is-transparent .header-search-btn {
  color: var(--t-search-icon);
}

.menu-toggle {
  color: var(--hbg-color, currentColor);
}

.main-header.is-transparent .menu-toggle {
  color: var(--t-hbg-color, var(--hbg-color, currentColor));
}