body.panel-open {
 padding-left: 316px;
  transition: padding 0.3s ease;
  width: calc(100%);
}

@media (max-width: 768px) {
  body.panel-open {
    transition: none !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* ======================
   ✅ 기본 설정
====================== */
html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans KR', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-x: hidden; /* 가로 스크롤 방지 */
  background: white;
}



/* ======================
   🔹 탭 컨텐츠 전환
====================== */
.tab-content {
    display: none;
}

.tab-content[style*="display: block"] {
    display: block !important;
}

/* ======================
   🔹 반응형 (모바일)
====================== */
@media (max-width: 640px) {
    .desktop-menu {
        display: none;
    }
}




/* ======================
   🔹 헤더 상단 컨트롤 (언어/다크모드 버튼 배치)
====================== */
.header-top {
    /* 기존 스타일 유지 */
    width: calc(100% - 50px); /* 전체 너비에서 vscode-sidebar 너비만큼 제외 */
    padding: 10px 20px; /* 적절한 패딩 */
    box-sizing: border-box;
    display: flex; /* Flexbox 활성화 */
    justify-content: flex-end; /* 오른쪽 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    position: fixed; /* 화면 상단에 고정 */
    top: 0;
    left: 50px; /* vscode-sidebar 바로 옆에서 시작하도록 위치 조정 */
    z-index: 9999; /* 다른 요소 위에 오도록 z-index 설정 */
    background-color: transparent;
}

.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
    z-index: 5000;
}

.left-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ======================
   🔹 로고 스타일
====================== */
.floating-home-logo {
  position: relative;
  height: auto;
  margin-right: 6rem;
  margin-bottom: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.floating-home-logo:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* ✅ 데스크탑에서 크기 줄이기 */
@media (min-width: 640px) {
  .floating-home-logo {
    width: 120px
  }
}

@media (max-width: 640px) {
  .floating-home-logo {
    margin: 0 !important;
    position: static !important;
    width: 22vw;
    height: auto;
  }
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.site-logo {
  width: 360px !important;
  height: auto !important;
  max-width: none !important;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 640px) {
  .site-logo {
    width: 50vw !important;
    max-width: 360px !important;
  }
}



/* ======================
   ✅ 프리로더
====================== */
/* 프리로더 전체 화면 덮기 */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* 필요하면 배경색 지정 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.2s ease; /* 부드럽게 사라짐 */
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* 스피너 애니메이션 */
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top: 6px solid #555;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



/* ======================
   🔸 언어 드롭다운 (헤더용)
====================== */
.language-dropdown {
    position: relative;
    display: inline-block;
}

/* 🔸 언어 토글 버튼 (헤더용) */
.lang-btn {
    background: none;
    border: none;
    color: black; /* 👈 기본은 검정색 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 5px 10px;
}

/* 🔸 플래그 아이콘 (헤더용) */
.lang-btn .fi {
    width: 1.5rem;
    height: 1.2rem;
}

/* 🔸 드롭다운 메뉴 (헤더용) */
.lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px); /* 버튼 아래 약간 간격 */
    right: 0; /* 오른쪽 정렬 */
    left: auto; /* left 속성 제거 */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10000; /* 헤더보다 높게 설정 */
    min-width: 120px;
    padding: 5px 0;
    list-style: none;
}

/* 🔸 메뉴 항목 (헤더용) */
.lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    color: #333; /* 👈 기본적으로 어두운 색상 (라이트 모드에서 보임) */
    text-decoration: none;
    white-space: nowrap;
}

/* 🔸 호버 효과 (헤더용) */
.lang-option:hover {
    background-color: #f5f5f5;
}

/* 🔸 활성 언어 (헤더용) */
.lang-option.active-lang {
    font-weight: bold;
    color: var(--highlight-color, #00adb5);
}

/* 🌙 다크모드 지원 for lang-menu (변경 없음, 참고용) */
html.dark .lang-menu {
    background: #222;
    border-color: #444;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

html.dark .lang-option {
    color: #eee; /* 👈 다크모드일 때만 흰색으로 변경 */
}

html.dark .lang-option:hover {
    background-color: #333;
}

/* 🌙 다크모드 시 언어 버튼 아이콘 색상 흰색 */
html.dark .lang-btn {
    color: #fff; /* 👈 다크모드 시 흰색 */
}

/* ======================
   🔹 모바일 전용 스타일 (삭제될 햄버거 메뉴 관련)
====================== */
@media (max-width: 640px) {
  .auth-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;   /* 오른쪽 정렬 */
    align-items: center;         /* 세로 가운데 정렬 */
    width: 100%;
    gap: 0.5rem;
  }

  .welcome-text {
    order: 1;                    /* 다음 줄로 내리기 */
    flex-basis: 100%;            /* 한 줄 전체 차지 */
    text-align: center;
    font-size: 0.75rem;
    margin-top: 0.2rem;
    white-space: nowrap;
    color: #666;
  }

  /* .header-top {
    padding-left: 3rem;  햄버거 버튼 삭제로 제거
  } */ /* 주석 처리 */
}

@media (max-width: 640px) {
  .right-controls {
    transform: scale(0.65); /* ✅ 전체 줄 비율 축소 */
    transform-origin: right center; /* ✅ 오른쪽 기준으로 축소 */
  }
}

/* ======================
   🔹 기타 유틸리티
====================== */
.spacer {
  height: 0.5rem;
}