/* =========================================================
   header.css - 라이트톤/가족 친화적 버전
   ========================================================= */

:root {
  /* 배경색을 밝은 톤으로 변경 */
  --hdr-bg: #ffffff; 
  --hdr-line: rgba(15, 23, 42, 0.08);
  --nav-bg: #f8fafc; /* 메뉴바는 살짝 구분감 있는 아주 연한 그레이 */
  --nav-line: rgba(15, 23, 42, 0.06);
  --point-blue: #2563eb;
  --text-main: #0f172a;
  --text-sub: #64748b;
}

/* 상단 얇은 바 (공지/로그인 등) */
.top-info-bar {
  background: #f1f5f9; /* 어두운 색에서 연한 그레이로 */
  color: var(--text-sub);
  border-bottom: 1px solid var(--hdr-line);
}
.top-info-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;    /* ✅ 상하 6px -> 4px로 축소 */
  font-size: 12px;      /* ✅ 글씨 크기를 1px 줄이면 더 날렵해 보입니다 */
  font-weight: 700;
}

/* 헤더 (브랜드 영역) */
.main-header {
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-line);
}
.main-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px; /* 상하 12px -> 6px로 과감히 축소 */
}

/* 브랜드 */
.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}
.site-logo-circle {
  width: 42px;
  height: 42px;
  border-radius: 12px; /* 원형보다 세련된 둥근 사각형 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--point-blue);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
}
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.site-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text-main);
}
.site-subtitle {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 600;
}

/* 날짜 pill */
.top-date-pill {
  background: #eff6ff; /* 연한 파스텔 파란색 */
  border: 1px solid #dbeafe;
  color: var(--point-blue);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

/* 네비게이션 바 */
.main-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--nav-line);
  position: sticky; /* 스크롤 시 상단 고정하면 더 편리함 */
  top: 0;
  z-index: 2000;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 16px;   /* 상하 패딩을 4px -> 2px로 축소 */
  min-height: 38px;    /* 최소 높이를 48px -> 38px 정도로 축소 */
}

/* 메뉴 링크 */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;        /* 기존 38px -> 32px로 축소 */
  padding: 0 10px;     /* 좌우 여백도 살짝 줄이면 7개 메뉴가 더 여유 있게 들어갑니다 */
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s ease;
}
.nav-link:hover {
  background: #f1f5f9;
  color: var(--point-blue);
}

/* 드롭다운 (2단/3단 공통) */
.nav-sub, .subdropdown {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); /* 그림자를 부드럽게 */
}

/* 모바일 대응 */
@media (max-width: 980px) {
  .header-side { display: none !important; }
  .main-header-inner { padding: 10px 16px; }
  .site-title { font-size: 18px; }
  
  /* 모바일 하단 탭바를 쓰신다면 여기서 .main-nav를 숨길 수도 있습니다 */
}


/* 파란 구분선(메뉴 위) */
.header-divider{
  height: 2px;
  background: #2563eb;
}

/* 햄버거(모바일) */
.nav-toggle{
  display:none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
.nav-toggle-bar{
  display:block;
  width: 18px;
  height: 2px;
  background: #0f172a;
  margin: 4px auto;
  border-radius: 999px;
}

/* 메뉴 */
.nav-menu{
  display:flex;
  align-items:center;
  gap: 10px;
  list-style:none;
  margin:0;
  padding:0;
  flex: 1;
}
.nav-item{ position: relative; }
.nav-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 32px;                 /* ✅ 메뉴 바 높이 */
  padding: 0 12px;
  border-radius: 12px;
  text-decoration:none;
  color: #0f172a;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid transparent;
}
.nav-link:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.22);
}

/* caret: 1단은 아래로, 3단(우측)은 > */
.caret{
  display:inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(15,23,42,.65);
  border-bottom: 2px solid rgba(15,23,42,.65);
  transform: rotate(45deg); /* ▼ 느낌 */
  margin-top: -2px;
}
.caret-right{
  transform: rotate(-45deg); /* > 느낌 */
}

/* 2단 dropdown */
.nav-sub{
  position:absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
  padding: 8px;
  display:none;
  z-index: 2500;
}

/* hover bridge (2단이 빨리 사라지는 문제 해결) */
.nav-item.has-sub::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top: 100%;
  height: 14px;               /* ✅ 브릿지 */
}

.nav-item.has-sub:hover > .nav-sub{ display:block; }
.nav-sub a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color:#0f172a;
  font-weight: 900;
  font-size: 14px;            /* ✅ 드롭다운 글씨 */
}
.nav-sub a:hover{ background: rgba(37,99,235,.08); }

/* 사진첩 mega */
.nav-sub--gallery{
  min-width: 280px;
  display:none;
  grid-template-columns: 1fr;
  gap: 6px;
}
.nav-item.has-sub:hover > .nav-sub--gallery{
  display:grid;
}
.drop-item{ position: relative; }
.drop-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color:#0f172a;
  font-weight: 900;
  font-size: 14px;
}
.drop-link:hover{ background: rgba(37,99,235,.08); }
.drop-sep{
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 6px 6px;
}

/* 3단 (우측 펼치기) */
.subdropdown{
  position:absolute;
  top: 0;
  left: calc(100% + 10px);
  min-width: 220px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
  padding: 8px;
  display:none;
  z-index: 2600;
}

/* 3단 브릿지 */
.drop-item.has-sub::after{
  content:"";
  position:absolute;
  top: 0;
  left: 100%;
  width: 14px;     /* ✅ 2단→3단 이동 브릿지 */
  height: 100%;
}

.drop-item.has-sub:hover > .subdropdown{ display:block; }
.subdropdown a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color:#0f172a;
  font-weight: 900;
  font-size: 14px;
}
.subdropdown a:hover{ background: rgba(37,99,235,.08); }

/* ===============================
   [FIX] Header title always visible
   =============================== */

/* 타이틀/서브타이틀이 어떤 CSS에 의해 죽어도 최종적으로 살림 */
.main-header .site-title,
.main-header .site-subtitle{
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* 링크 색이 지워지는 케이스 방지 */
.main-header a{
  color: inherit;
  text-decoration: none;
}

/* 밝은 헤더 배경 기준(지금 스샷처럼 흰 배경 느낌) */
.main-header{
  background: #ffffff;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.main-header .site-title{
  color: #0f172a;            /* 진한 네이비 */
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.2px;
}

.main-header .site-subtitle{
  color: rgba(15,23,42,.68);
  font-weight: 600;
  font-size: 12px;
  margin-top: 2px;
}



/* 모바일 드로어 */
.nav-overlay{ display:none; }
.nav-close{ display:none; }

@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-menu{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(340px, 86vw);
    background: #fff;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    z-index: 3200;
    overflow:auto;
    border-right: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 24px 60px rgba(15,23,42,.18);
  }
  body.nav-open .nav-menu{ display:flex; }

  .nav-overlay{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.35);
    z-index: 3100;
  }
  body.nav-open .nav-overlay{ display:block; }

  .nav-close{
    display:block;
    position: fixed;
    top: 12px;
    left: calc(min(340px, 86vw) - 56px);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background:#fff;
    z-index: 3300;
    cursor:pointer;
    font-size: 24px;
    line-height: 1;
  }

  /* 모바일에서 2단/3단은 클릭으로 열리게(nav.js가 open 클래스 처리) */
  .nav-sub, .subdropdown{
    position: static;
    box-shadow:none;
    border:none;
    padding: 0 0 0 10px;
    margin: 6px 0;
    display:none;
  }
  li.has-sub.open > .nav-sub{ display:block; }
  .drop-item.has-sub.open > .subdropdown{ display:block; }

  /* 모바일은 브릿지 불필요 */
  .nav-item.has-sub::after, .drop-item.has-sub::after{ display:none; }
}