/* ================================================================
   새빛드론 관리 시스템 — 공통 헤더 스타일시트
   shared-header.css  v2.0  TECH THEME (2026-07)

   ■ 테크 라이트 (.svd-header)
     - index, schedule, stage_manager, sim, logbook_gen, review_generator

   ■ 테크 다크  (.svd-header.dark)
     - instructor-mgmt

   ■ 공용 전역 네비 드로어 (.svd-gnav-*)
================================================================ */

/* ──────────────────────────────────────
   0. 디자인 토큰
────────────────────────────────────── */
:root {
  /* ── 라이트 테크 팔레트 ── */
  --svd-lt-bg1:        #0b1e2d;
  --svd-lt-bg2:        #0d2a3e;
  --svd-lt-accent:     #00d4ff;        /* 사이버 민트 */
  --svd-lt-accent2:    #0ea5e9;
  --svd-lt-text:       #e2f0ff;
  --svd-lt-sub:        rgba(160,210,255,0.55);
  --svd-lt-line:       rgba(0,212,255,0.18);
  --svd-lt-pill-bg:    rgba(0,212,255,0.08);
  --svd-lt-pill-bd:    rgba(0,212,255,0.22);
  --svd-lt-pill-act:   rgba(0,212,255,0.18);

  /* ── 다크 테크 팔레트 ── */
  --svd-dk-bg:         #070d14;
  --svd-dk-bg2:        #0a1220;
  --svd-dk-accent:     #00d4ff;
  --svd-dk-line:       rgba(0,212,255,0.25);
  --svd-dk-text:       #cce8ff;
  --svd-dk-sub:        rgba(100,160,200,0.6);
  --svd-dk-pill-bg:    rgba(0,212,255,0.07);
  --svd-dk-pill-bd:    rgba(0,212,255,0.20);
  --svd-dk-pill-act:   rgba(0,212,255,0.16);

  /* ── 공통 ── */
  --svd-h-height:   58px;
  --svd-radius:     8px;
  --svd-font:       'Noto Sans KR', 'Segoe UI', sans-serif;
}

/* ──────────────────────────────────────
   1. 헤더 셸
────────────────────────────────────── */
.svd-header {
  position: sticky;
  top: 0;
  z-index: 300;
  height: var(--svd-h-height);
  display: flex;
  align-items: stretch;

  /* 딥 다크 + 미세 그라데이션 */
  background: linear-gradient(90deg,
    var(--svd-lt-bg1) 0%,
    var(--svd-lt-bg2) 60%,
    #0a1a2e 100%);

  /* 하단 사이버 라인 */
  border-bottom: 1px solid var(--svd-lt-line);

  /* 좌측 액센트 바 */
  border-left: 3px solid var(--svd-lt-accent);

  box-shadow:
    0 1px 0 rgba(0,212,255,0.12),
    0 4px 24px rgba(0,0,0,0.55);
}

/* 스캔라인 글로우 효과 */
.svd-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,212,255,0.4) 30%,
    rgba(0,212,255,0.6) 50%,
    rgba(0,212,255,0.4) 70%,
    transparent 100%);
  pointer-events: none;
}

.svd-header.dark {
  background: linear-gradient(90deg,
    var(--svd-dk-bg) 0%,
    var(--svd-dk-bg2) 60%,
    #060c18 100%);
  border-bottom-color: var(--svd-dk-line);
  border-left-color: var(--svd-dk-accent);
}

/* ──────────────────────────────────────
   2. 내부 레이아웃
────────────────────────────────────── */
.svd-header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ──────────────────────────────────────
   3. 로고 블록
────────────────────────────────────── */
.svd-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.svd-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(0,212,255,0.10);
  border: 1px solid rgba(0,212,255,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.svd-logo:hover .svd-logo-icon {
  background: rgba(0,212,255,0.18);
  border-color: rgba(0,212,255,0.55);
}
.svd-logo-icon i    { color: var(--svd-lt-accent); font-size: 14px; }
.svd-logo-icon img  { height: 24px; width: auto; border-radius: 3px; }

.svd-logo-texts     { display: flex; flex-direction: column; line-height: 1.2; }
.svd-logo-main      {
  font-size: 10.5pt;
  font-weight: 900;
  color: var(--svd-lt-text);
  letter-spacing: 0.5px;
}
.svd-logo-main-accent { color: var(--svd-lt-accent); }
.svd-logo-sub       {
  font-size: 6.5pt;
  color: var(--svd-lt-sub);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ──────────────────────────────────────
   4. 중앙 탭 영역
────────────────────────────────────── */
.svd-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 인라인 탭 버튼 */
.svd-tabs { display: flex; align-items: center; gap: 3px; }
.svd-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: rgba(160,210,255,0.6);
  font-size: 7.5pt;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--svd-font);
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.2px;
}
.svd-tab:hover {
  background: rgba(0,212,255,0.08);
  border-color: rgba(0,212,255,0.22);
  color: var(--svd-lt-accent);
}
.svd-tab.active {
  background: rgba(0,212,255,0.14);
  border-color: var(--svd-lt-accent);
  color: var(--svd-lt-accent);
  font-weight: 800;
  box-shadow: 0 0 8px rgba(0,212,255,0.2);
}
.svd-tab .svd-tab-badge {
  background: rgba(239,68,68,0.85);
  color: #fff; font-size: 6pt; font-weight: 800;
  border-radius: 8px; padding: 1px 5px; min-width: 15px; text-align: center;
}

/* ──────────────────────────────────────
   5. 우측 액션 영역
────────────────────────────────────── */
.svd-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 사용자 배지 */
.svd-user-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(0,212,255,0.07);
  border: 1px solid rgba(0,212,255,0.18);
  font-size: 7.5pt;
  color: rgba(160,210,255,0.85);
  white-space: nowrap;
}
.svd-user-badge i { font-size: 7pt; color: var(--svd-lt-accent); }
.svd-role-tag     { font-size: 6.5pt; opacity: 0.65; margin-left: 2px; }

/* 로그아웃 버튼 */
.svd-btn-logout {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.22);
  color: rgba(255,120,120,0.9);
  font-size: 7.5pt; font-weight: 600;
  cursor: pointer;
  font-family: var(--svd-font);
  transition: all 0.15s;
  white-space: nowrap;
}
.svd-btn-logout:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
}

/* 동기화 배지 */
.svd-sync-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.12);
  font-size: 7pt;
  color: rgba(160,210,255,0.5);
  white-space: nowrap;
}
.svd-sync-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  flex-shrink: 0;
  animation: svd-pulse-dot 2s infinite;
}
@keyframes svd-pulse-dot {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.svd-sync-dot.warn { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.6); }
.svd-sync-dot.err  { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); }

/* ≡ 드로어 토글 버튼 */
.svd-gnav-toggle {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  color: var(--svd-lt-accent);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.svd-gnav-toggle:hover {
  background: rgba(0,212,255,0.18);
  border-color: rgba(0,212,255,0.50);
  box-shadow: 0 0 10px rgba(0,212,255,0.2);
}

/* ──────────────────────────────────────
   6. 전역 네비 드로어
────────────────────────────────────── */
.svd-gnav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,5,15,0.72);
  backdrop-filter: blur(3px);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.svd-gnav-backdrop.open { opacity: 1; pointer-events: all; }

.svd-gnav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 290px;
  z-index: 1001;
  background: #070d14;
  border-left: 1px solid rgba(0,212,255,0.15);
  box-shadow: -12px 0 40px rgba(0,0,0,0.7), -1px 0 0 rgba(0,212,255,0.08);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.svd-gnav-drawer::-webkit-scrollbar { width: 3px; }
.svd-gnav-drawer::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); }
.svd-gnav-drawer.open { transform: translateX(0); }

/* 드로어 헤더 */
.svd-gnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 13px;
  border-bottom: 1px solid rgba(0,212,255,0.10);
  background: linear-gradient(90deg, rgba(0,212,255,0.05) 0%, transparent 100%);
}
.svd-gnav-head-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 10pt; font-weight: 800;
  color: var(--svd-dk-text);
  letter-spacing: 0.3px;
}
.svd-gnav-head-title i { color: var(--svd-dk-accent); font-size: 12pt; }
.svd-gnav-close {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(160,210,255,0.5); font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.svd-gnav-close:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
  color: #fca5a5;
}

/* 드로어 섹션 */
.svd-gnav-section { padding: 12px 14px 2px; }
.svd-gnav-section-label {
  font-size: 6.5pt; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(0,212,255,0.4);
  padding: 0 6px; margin-bottom: 4px;
}

/* 드로어 아이템 */
.svd-gnav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: rgba(160,210,255,0.7);
  font-size: 9pt; font-weight: 500;
  margin-bottom: 2px;
  transition: all 0.14s;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--svd-font);
}
.svd-gnav-item:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.14);
  color: #e2f0ff;
}
.svd-gnav-item.active {
  background: rgba(0,212,255,0.12);
  border-color: rgba(0,212,255,0.35);
  color: var(--svd-dk-accent);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0,212,255,0.1) inset;
}

/* 역할 배지 */
.svd-gnav-role-badge {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 6pt; font-weight: 700;
  margin-left: auto; flex-shrink: 0;
}
.svd-gnav-role-badge.admin { background: rgba(239,68,68,0.12); color: #fca5a5; }
.svd-gnav-role-badge.staff { background: rgba(245,158,11,0.12); color: #fcd34d; }

/* 구분선 */
.svd-gnav-divider {
  height: 1px;
  background: rgba(0,212,255,0.07);
  margin: 6px 14px;
}

/* 드로어 푸터 */
.svd-gnav-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,212,255,0.08);
  font-size: 7pt;
  color: rgba(100,150,180,0.35);
  text-align: center;
  letter-spacing: 0.5px;
}

/* ──────────────────────────────────────
   7. index.html 전용 — page-title 바
      (헤더 바로 아래 얇은 컨텍스트 바)
────────────────────────────────────── */
.svd-page-bar {
  height: 30px;
  background: linear-gradient(90deg, #0a1628 0%, #0b1e2d 100%);
  border-bottom: 1px solid rgba(0,212,255,0.08);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 8px;
  font-size: 7pt;
  color: rgba(0,212,255,0.45);
  letter-spacing: 0.8px;
}
.svd-page-bar-sep {
  width: 1px; height: 12px;
  background: rgba(0,212,255,0.15);
}
.svd-page-bar-item { opacity: 0.7; }
.svd-page-bar-item.active { color: var(--svd-lt-accent); opacity: 1; font-weight: 700; }

/* ──────────────────────────────────────
   8. 반응형
────────────────────────────────────── */
@media (max-width: 768px) {
  .svd-header-inner  { padding: 0 10px; gap: 6px; }
  .svd-logo-sub      { display: none; }
  .svd-sync-badge    { display: none; }
  .svd-header-center { display: none; }
  .svd-user-badge .svd-role-tag { display: none; }
}
@media (max-width: 480px) {
  .svd-user-badge    { display: none; }
  .svd-btn-logout span { display: none; }
}