/* BASIC css start */
/* [이카운트] 상단 영역 > CSS 탭에 붙여넣기 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');

/* ── 색상·폰트 변수 (헤더 사용분만) ──────────────
   TODO: 메인 색상을 바꾸려면 아래 값만 수정하세요.
─────────────────────────────────────────────── */
:root {
  --h-primary:  #0A2342;   /* 딥 네이비 — 로고·텍스트 */
  --h-accent:   #1A5FA8;   /* 의료 블루 — 활성 메뉴·밑줄 */
  --h-white:    #FFFFFF;
  --h-light:    #F7F9FC;   /* 호버 배경 */
  --h-border:   #D8E0EB;   /* 하단 구분선 */
  --h-text:     #1A2E44;
  --h-muted:    #5A6F85;   /* 기본 메뉴 텍스트 */
  --h-font:     'Noto Sans KR', sans-serif;
  --h-shadow:   0 1px 3px rgba(10, 35, 66, .07);
  --h-tr:       0.2s ease;
}

/* ── 기본 리셋 (헤더 범위) ── */
.header *, .header *::before, .header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header a  { text-decoration: none; color: inherit; }
.header ul { list-style: none; }

/* ── 헤더 컨테이너 ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--h-white);
  border-bottom: 1px solid var(--h-border);
  box-shadow: var(--h-shadow);
  font-family: var(--h-font);
}

/* ── 내부 레이아웃 ── */
.header .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* ── 로고 ── */
.logo {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--h-primary);
  font-family: var(--h-font);
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}
.logo img {
  height: 40px;
  width: auto;
  margin-right: 10px;
}
.logo span {
  color: var(--h-accent);
  letter-spacing: 0 !important;
}

/* ── 데스크톱 네비게이션 ── */
.nav {
  display: flex;
  align-items: center;
}
.nav__link {
  display: inline-block;
  padding: 8px 16px;
  font-weight: 500;
  font-size: .88rem;
  color: var(--h-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--h-tr), border-color var(--h-tr);
  font-family: var(--h-font);
}
.nav__link:hover {
  color: var(--h-primary);
}
.nav__link.active {
  color: var(--h-accent);
  border-bottom-color: var(--h-accent);
}

/* ── 햄버거 버튼 (모바일) ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--h-primary);
  transition: transform var(--h-tr), opacity var(--h-tr);
}
/* 열린 상태 */
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 모바일 드롭다운 메뉴 ── */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--h-white);
  border-top: 1px solid var(--h-border);
}
.mobile-nav.open {
  display: flex;
}
.mobile-nav .nav__link {
  padding: 14px 32px;
  font-size: .93rem;
  border-bottom: 1px solid var(--h-border);
  border-left: none;
}
.mobile-nav .nav__link:last-child {
  border-bottom: none;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .header .container { padding: 0 20px; }
  .nav        { display: none; }
  .hamburger  { display: flex; }
}

/* BASIC css end */