/* ================================
   SERA Lab - Custom Styles (CSS)
   - 배너: 고려대 크림슨
   - 헤더: 초기 반투명(짙은 톤), 스크롤 후 .nav-bg로 다크
   - 헤더 높이 자동 동기화(JS) + 폴백 값
   - 배너/본문 오프셋을 --navbar-height 기준으로 제어
   ================================= */

/* ===== 기본 폴백(스크립트가 실제 값으로 덮어씀) ===== */
:root { --navbar-height: 40px; }                 /* 모바일: 로고 28px 기준 */
@media (min-width: 992px) { :root { --navbar-height: 44px; } }  /* 데스크탑: 로고 30px 기준 */

/* ===== 배너: 고려대 크림슨 ===== */
.bg-ku-crimson { background-color: #A6192E !important; }
.page-title, .page-title-alt {
  background-image: none !important;
  background-color: #A6192E !important;
}

/* 배너 내부 기본 패딩 */
.page-title-alt { padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 992px) {
  .page-title-alt { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* 배너 상단이 헤더에 가리지 않도록: 헤더 높이만큼 더함 */
.page-title-alt.hero-under-header,
.page-title.hero-under-header {
  padding-top: calc(var(--navbar-height) + 1rem) !important;  /* 필요시 1.25rem/1.5rem */
}

/* ===== 헤더: 초기 반투명 → 스크롤 후 다크(.nav-bg) ===== */
header.navigation {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1030 !important;
  background-color: rgba(6, 6, 6, 0.8);          /* 진입 시 반투명 다크 */
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  backdrop-filter: saturate(150%) blur(6px);
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, padding .2s ease;
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
header.navigation.nav-bg {
  background-color: #222 !important;            /* 스크롤 후 완전 다크 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  border-bottom: none;
}

/* ===== 네브바/컨테이너: 로고를 진짜 왼쪽에 붙이기 ===== */
/* 네브바 좌패딩 제거 + 노치 대응 */
header.navigation .navbar {
  padding-left: 0 !important;
  padding-left: max(0px, env(safe-area-inset-left)) !important;  /* iPhone 노치 보호 */
  padding-right: 8px !important;   /* 필요하면 0~12px 사이로 조절 */
  height: 44px !important;         /* 바 높이 고정 */
  min-height: 44px !important;
  overflow: visible;                /* 로고가 살짝 넘쳐도 보이게 */
}
/* .container를 fluid처럼: 가운데 정렬/좌우 패딩 제거 */
header.navigation .navbar > .container,
header.navigation .navbar > .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 8px !important;    /* 우측 여백만 살짝 */
}

/* ===== 브랜드(로고 + 텍스트) ===== */
/* 간격 변수: 데스크탑 넉넉, 모바일은 조정 */
:root { --brand-gap: 3.25rem; }
@media (max-width: 991.98px) { :root { --brand-gap: 1rem; } }

header.navigation .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);            /* ✅ 로고-텍스트 간격 여기서 제어 */
  margin-left: 0 !important;        /* 왼쪽 완전 붙임 */
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* HTML에 mr-2가 있어도 무시 */
header.navigation .navbar-brand .brand-mark.mr-2 { margin-right: 0 !important; }

/* 로고 크기 (바 높이는 유지) */
header.navigation .navbar-brand img,
header.navigation .navbar-brand .brand-mark {
  height: 28px !important;          /* 모바일 기본 */
  max-height: 28px !important;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* 데스크탑: 레이아웃 높이는 유지하면서 시각적 확대 */
@media (min-width: 992px) {
  header.navigation .navbar { min-height: 44px !important; }    /* 바 높이 유지 */
  header.navigation .navbar-brand .brand-mark,
  header.navigation .navbar-brand img {
    height: 32px !important;         /* 레이아웃 계산용 실제 높이 */
    transform: scale(1.8);           /* ≈ 58px 체감 (원하면 2.0~2.5로) */
    transform-origin: left center;
    margin-right: 0.4rem;            /* 스케일 보정 */
  }
}

/* 브랜드 텍스트 */
header.navigation .navbar-brand .brand-text,
header.navigation .navbar-brand h3 {
  color: #fff !important;
  line-height: 1;
  margin: 0;
  letter-spacing: .3px;
  font-weight: 700;
}

/* 네비 항목(글자 크기 유지, 가독성 유지용 그림자) */
.navbar-dark .navbar-nav .nav-link {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  padding-top: 2px !important;      /* 클릭 영역 최소 확보 */
  padding-bottom: 2px !important;
  line-height: 1.15 !important;
}

/* 햄버거 버튼 초-컴팩트 + ↓ 살짝 내리기 */
header.navigation .navbar-toggler { padding: 1px 5px !important; margin: 0 !important; }
@media (max-width: 991.98px) {
  header.navigation .navbar { position: relative; }
  header.navigation .navbar-toggler {
    transform: translateY(3px);     /* 여기서 살짝 더 아래로 */
    transform-origin: center;
  }
}
@media (min-width: 992px) {
  header.navigation .navbar-toggler { transform: translateY(2px); }
}

/* ===== 본문 오프셋 ===== */
body { padding-top: var(--navbar-height); }

/* (옵션) 히어로를 배너로 흡수하는 레이아웃을 쓰려면 아래 주석 해제
body.has-hero { padding-top: 0; }
body.has-hero .page-title, body.has-hero .page-title-alt {
  padding-top: calc(var(--navbar-height) + 1rem);
}
*/

/* ===== 접근성: 투명/블러 최소화 선호 시 ===== */
@media (prefers-reduced-transparency: reduce),
       (prefers-reduced-motion: reduce) {
  header.navigation {
    background-color: rgba(34,34,34,0.85);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* === Hero: shrink top space above title (no font-size change) === */
.hero-area.hero-simple {
  /* 헤더 높이 + 최소 여유만 */
  padding-top: calc(var(--navbar-height) + 0.05rem) !important;
}

/* 태블릿 이상에서도 과하지 않게 */
@media (min-width: 768px) {
  .hero-area.hero-simple { padding-top: calc(var(--navbar-height) + 0.5rem) !important; }
}

/* 데스크탑 */
@media (min-width: 992px) {
  .hero-area.hero-simple { padding-top: calc(var(--navbar-height) + 0.75rem) !important; }
}

/* 혹시 상단 마진이 들어갔다면 제거 */
.hero-area.hero-simple .container,
.hero-area.hero-simple .row,
.hero-area.hero-simple h1 { margin-top: 0 !important; }

/* iPhone 노치가 있는 환경에서도 최대한 붙이되 안전영역은 보존 */
@supports (padding: max(0px)) {
  .hero-area.hero-simple {
    padding-top: calc(var(--navbar-height) + max(0px, env(safe-area-inset-top)) + 0.25rem) !important;
  }
}

/* 히어로 타이틀 크기(반응형) — 필요 시 수치만 내려서 사용 */
.hero-area.hero-simple h1 { font-size: 2.0rem !important; line-height: 1.2; }   /* <576px */
@media (min-width: 576px) { .hero-area.hero-simple h1 { font-size: 2.4rem !important; } }
@media (min-width: 768px) { .hero-area.hero-simple h1 { font-size: 2.8rem !important; } }
@media (min-width: 992px) { .hero-area.hero-simple h1 { font-size: 3.2rem !important; } }

/* === Mobile navbar panel (collapsed menu) === */
@media (max-width: 991.98px) {
  /* 패널을 네브바 아래 전체폭으로 펼치기 */
  header.navigation .navbar { position: relative; z-index: 1040; }
  header.navigation .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background-color: rgba(20,20,20,0.96); /* 어두운 배경 */
    -webkit-backdrop-filter: saturate(150%) blur(4px);
    backdrop-filter: saturate(150%) blur(4px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    padding: .5rem .75rem;
  }
  /* 열렸을 때 높이 제한 & 스크롤 */
  header.navigation .navbar-collapse.show {
    max-height: calc(100vh - var(--navbar-height) - 16px);
    overflow-y: auto;
  }

  /* 메뉴 항목 가독성 & 탭 영역 키우기 */
  header.navigation .navbar-nav .nav-link {
    color: #fff !important;
    padding: .65rem .25rem !important; /* 터치 영역 ↑ */
    line-height: 1.3 !important;
  }
  header.navigation .navbar-nav .nav-item + .nav-item .nav-link {
    border-top: 1px solid rgba(255,255,255,0.08); /* 항목 구분 */
  }

  /* 현재/호버 상태 강조 */
  header.navigation .navbar-nav .nav-link:hover,
  header.navigation .navbar-nav .nav-link:focus,
  header.navigation .navbar-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(255,255,255,0.06);
    border-radius: .375rem;
  }

  /* 토글 버튼은 그대로 밝게 */
  header.navigation .navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.25); }
  header.navigation .navbar-dark .navbar-toggler-icon { filter: brightness(1.2); }
}