/* =============================================================
   header.css — 공통 헤더 (nk-header)
   Figma: db 홈페이지 / node 454:2691
   색상·간격·타이포는 css/variables.css 의 --nk-* 토큰 재사용.
   ============================================================= */

.nk-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--nk-header-height);        /* 60px */
  padding: 0 var(--nk-space-24);          /* 0 24px */
  background: var(--nk-color-white);
  border-bottom: 1px solid var(--nk-color-gray-line);
}

/* 로고 */
.nk-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nk-header__logo-img {
  display: block;
  height: 32px;
  width: auto;
}

/* 가운데 내비게이션 (절대 배치로 헤더 정중앙 고정) */
.nk-header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--nk-space-24);                /* 24px */
}
.nk-header__nav-link {
  font: var(--nk-text-p16-b);             /* Pretendard Bold 16 */
  color: var(--nk-color-black);
  text-decoration: none;
  white-space: nowrap;
}

/* 우측 액션 */
.nk-header__actions {
  display: flex;
  align-items: center;
  gap: var(--nk-space-16);                /* 16px */
  flex-shrink: 0;
}
.nk-header__action-link {
  font: var(--nk-text-p15-m);             /* Pretendard Medium 15 */
  color: var(--nk-color-black);
  text-decoration: none;
  white-space: nowrap;
}

.nk-header__nav-link:hover,
.nk-header__action-link:hover {
  color: var(--nk-color-blue-1);
}

/* 햄버거 버튼: 768px 이하에서만 보이고(.nk-header__nav/__actions 대체),
   모바일 풀스크린 메뉴(.nk-mobile-menu)를 연다(data-modal-open, js/modal.js 재사용). */
.nk-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* 로그인 상태 아바타 + 드롭다운 메뉴 (마이페이지 전용, components/mypage-header.html)
   Figma: node 540:3700 */
/* 관리자 전용 버튼(PC) — 프로필 아바타 왼쪽의 작은 보조 버튼.
   일반 회원에게는 js/auth.js 가 hidden 으로 두므로 아예 보이지 않는다. */
.nk-header__admin {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--nk-space-10);
  border: 1px solid var(--nk-color-border);
  border-radius: var(--nk-radius-4);
  font: var(--nk-text-p13-r);
  font-weight: var(--nk-font-weight-bold);
  color: var(--nk-color-text-sub);
  text-decoration: none;
  white-space: nowrap;
}
.nk-header__admin:hover {
  border-color: var(--nk-color-primary);
  color: var(--nk-color-primary);
}

.nk-header__account {
  position: relative;
}
.nk-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nk-color-cyan-bg);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  text-decoration: none;  /* <a>로 바뀌면서 기본 밑줄 제거 (클릭 시 /mypage.html로 이동) */
  cursor: pointer;
}
/* .nk-header__menu 는 버튼 바로 아래(갭 없이) 붙는 히트박스일 뿐이다. 시각적 여백은
   padding-top 으로 만든다 — margin 이었다면 그 여백 구간이 hover 밖이 돼서 버튼→카드로
   마우스를 옮기는 중간에 메뉴가 닫혀버린다. */
.nk-header__menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: var(--nk-space-8);
  z-index: 1100;
}
/* 마우스는 hover, 키보드는 focus-within, 터치는 클릭 토글(js/mypage.js 의 is-open)로 연다 */
.nk-header__account:hover .nk-header__menu,
.nk-header__account:focus-within .nk-header__menu,
.nk-header__account.is-open .nk-header__menu {
  display: block;
}
.nk-header__menu-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 항목이 9개 + 구분선 2개 + 프로필 + 로그아웃이라 16 이면 너무 길어진다.
     낮은 창에서도 넘치지 않게 카드 자체에 스크롤 바닥을 둔다. */
  gap: var(--nk-space-12);
  max-height: calc(100vh - var(--nk-header-height) - var(--nk-space-20));
  overflow-y: auto;
  padding: var(--nk-space-16);
  background: var(--nk-color-white);
  border: 1px solid var(--nk-color-gray-line);
  border-radius: var(--nk-radius-16);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
/* 드롭다운 맨 위 프로필(이름·아이디) — js/auth.js 가 채운다.
   값이 오기 전엔 마크업의 &nbsp; 때문에 높이만 잡고 비어 보인다. */
.nk-header__menu-profile {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  max-width: 220px;
}
.nk-header__menu-name {
  margin: 0;
  font: var(--nk-text-p15-b);
  color: var(--nk-color-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nk-header__menu-id {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 그룹 사이 구분선. .nk-header__menu-card 의 gap(16) 이 위아래로 들어가므로
   선 자체 여백은 두지 않는다. */
.nk-header__menu-line {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--nk-color-gray-line);
}
.nk-header__menu-item {
  display: flex;
  align-items: center;
  gap: var(--nk-space-6);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-black);
  text-decoration: none;
  white-space: nowrap;
}
.nk-header__menu-item:hover {
  color: var(--nk-color-primary);
}
/* 현재 페이지 항목 — 사이드바와 같은 규칙(js/mypage.js 가 런타임에 붙인다). */
.nk-header__menu-item.is-active {
  color: var(--nk-color-primary);
  font-weight: var(--nk-font-weight-bold);
}
.nk-header__menu-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* =============================================================
   모바일 풀스크린 메뉴 (.nk-mobile-menu, 햄버거가 연다)
   .nk-modal(components.css) 셸을 그대로 쓰되([hidden] 토글은 js/modal.js),
   레이아웃만 중앙 정렬 다이얼로그 대신 전체 화면 패널로 덮어쓴다.
   ============================================================= */
.nk-mobile-menu {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: var(--nk-color-white);
  overflow-y: auto;
  /* overflow-y 만 지정하면 CSS 규칙에 따라 overflow-x 가 visible → auto 로
     승격돼서, 안에 뭐 하나라도 넘치면 패널이 가로로 스크롤된다(그러면 왼쪽을
     스크롤해 가려 놓은 상태가 될 수 있다). 세로만 스크롤되게 못 박는다. */
  overflow-x: hidden;
}
/* 로그아웃 확인 모달(#nk-logout-confirm-modal, components.css .nk-modal 기본
   z-index:1000)이 이 풀스크린 메뉴와 같은 z-index라, 메뉴가 열린 채로
   안에서 "로그아웃"을 눌러 확인 모달을 열어도 나중에 그려지는(=DOM 순서상
   뒤에 있는) 이 메뉴 밑에 깔려 안 보이던 버그가 있었다 — 확인 모달 쪽
   z-index를 더 높여 항상 위에 뜨도록 고정한다. */
#nk-logout-confirm-modal {
  z-index: 1100;
}
.nk-mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: var(--nk-header-height);
  padding: 0 var(--nk-space-16);
  border-bottom: 1px solid var(--nk-color-gray-line);
}
.nk-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nk-mobile-menu__body {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-24);
  padding: var(--nk-space-24) var(--nk-space-16);
}

/* 프로필 카드(.nk-my-card, components.css): 이 메뉴 안에서는 카드 자체
   패딩을 전부 뺀다 — 안 빼면 카드 패딩(24)이 메뉴 본문 패딩(24) 위에
   겹쳐 상단 여백만 48px이 되고, 좌측 기준선도 아래 퀵링크·메뉴 줄과
   어긋난다. 섹션 사이 간격은 .nk-mobile-menu__body 의 gap 하나로 맞춘다.
   (마이페이지 대시보드의 기본형 .nk-my-card 는 그대로 둔다.) */
.nk-mobile-menu .nk-my-card {
  padding: 0;
  gap: var(--nk-space-20);
}
/* 인사: "OOO님" + 아래 작은 회색 아이디.
   .nk-my-card__head(components.css)는 gap 이 없어서, 이름이 길면 말줄임
   경계가 오른쪽 "내 정보 수정"에 바로 붙는다 — 이 메뉴 안에서만 간격을 준다. */
.nk-mobile-menu .nk-my-card__head {
  gap: var(--nk-space-12);
}
.nk-mobile-menu__greeting {
  min-width: 0;
}
.nk-mobile-menu__greeting-name {
  margin: 0;
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nk-mobile-menu__greeting-id {
  margin: 0;
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 섹션 머리 오른쪽의 글자 링크("내 정보 수정 ›" / "전체 보기 ›").
   부모(.nk-my-card__head / .nk-mobile-menu__subs-head)가 space-between +
   align-items:center 라 배치 규칙은 따로 없다. */
.nk-mobile-menu__more {
  display: inline-flex;
  align-items: center;
  gap: var(--nk-space-4);
  flex-shrink: 0;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-text-sub);
  text-decoration: none;
  white-space: nowrap;
}
.nk-mobile-menu__more:hover {
  color: var(--nk-color-primary);
}
.nk-mobile-menu__more-mark {
  font: var(--nk-text-p16-m);
  line-height: 1;
}

/* 관리자 전용 한 줄(모바일) — 인사 영역 바로 아래. 메뉴 줄 목록과 떨어져
   있으므로 연회색 박스로 묶어 눈에 걸리게 한다. */
.nk-mobile-menu__admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
  min-height: 44px;
  padding: 0 var(--nk-space-12);
  background: var(--nk-color-blue-bg-2);
  border-radius: var(--nk-radius-8);
  font: var(--nk-text-p15-m);
  color: var(--nk-color-primary);
  text-decoration: none;
}

/* "내 프로그램" 블록(로그인 + 이용 기간이 남은 구독이 있을 때만 — js/auth.js가
   GET /mypage/dashboard의 subscriptions[]로 채우고, 보여줄 게 없으면 hidden으로
   블록 전체를 숨긴다). 줄 자체는 .nk-my-sub-row(components.css)다. */
.nk-mobile-menu__subs {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}
.nk-mobile-menu__subs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-8);
}
/* display:flex가 [hidden] 기본 동작을 가리는 문제 방지(.nk-btn[hidden]과
   같은 이유 — 구독 없음 상태에서 실제로 숨겨지려면 필요하다) */
.nk-mobile-menu__subs[hidden] {
  display: none;
}
.nk-mobile-menu__subs-title {
  margin: 0;
  font: var(--nk-text-p16-b);
  color: var(--nk-color-black);
}
.nk-mobile-menu__sub-list {
  display: flex;
  flex-direction: column;
}

/* 퀵링크 3종: 마이페이지 대시보드의 .nk-my-quick(기본형, components.css)을
   재사용하되 아이콘+제목만 3열 그리드로 압축한다(설명 텍스트 없음). */
.nk-mobile-menu__quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nk-space-12);
}
/* display: grid가 [hidden] 기본 동작을 가리는 문제 방지(components.css의
   .nk-btn[hidden]과 같은 이유 — 로그인 상태 토글([data-header-account])이
   실제로 숨겨지려면 필요하다) */
.nk-mobile-menu__quick[hidden] {
  display: none;
}
.nk-mobile-menu__quick-item {
  flex-direction: column;
  align-items: center;
  gap: var(--nk-space-8);
  padding: var(--nk-space-16) var(--nk-space-8);
  text-align: center;
}

/* 아래 메뉴 줄(프로그램 / 판매원 명부 / 고객센터 / 마이페이지 / 고객센터 전화 /
   로그아웃·로그인) — 아코디언이든 링크든 **같은 줄 스타일**로 보이게
   .nk-acc*(components.css)를 이 메뉴 안에서만 덮어쓴다. 카드형 테두리·둥근
   모서리·동그란 배경 아이콘을 걷어내고, 줄 사이 구분선 한 줄만 남긴다.
   (.nk-acc 는 FAQ·히스토리 등 다른 화면도 쓰는 공용 컴포넌트라 전역으로
   바꾸지 않는다 — 반드시 .nk-mobile-menu 아래로 한정한다.) */
.nk-mobile-menu .nk-acc {
  gap: 0;
}
.nk-mobile-menu .nk-acc__item {
  border: 0;
  border-top: 1px solid var(--nk-color-gray-line);
  border-radius: 0;
  background: transparent;
}
.nk-mobile-menu .nk-acc__item:last-child {
  border-bottom: 1px solid var(--nk-color-gray-line);
}
/* 펼친 아이템 테두리를 파랗게 바꾸던 기본 동작은 줄 목록에서는 과하다 */
.nk-mobile-menu .nk-acc__item.is-open {
  border-color: var(--nk-color-gray-line);
}
.nk-mobile-menu .nk-acc__head {
  min-height: 52px;
  padding: var(--nk-space-12) 0;
  font: var(--nk-text-p15-m);
  text-decoration: none;
}
/* 동그란 파란 배경을 없애고 글자색 화살표만 남긴다(⌄ 는 열리면 회전 —
   회전은 components.css 의 .is-open 규칙이 그대로 해 준다). */
.nk-mobile-menu .nk-acc__mark {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--nk-color-gray-1);
}
.nk-mobile-menu .nk-acc__item.is-open .nk-acc__mark {
  background: transparent;
  color: var(--nk-color-black);
}
/* 링크 줄(판매원 명부)의 › — 아코디언 ⌄ 와 달리 회전하지 않는다. */
.nk-acc__mark--link {
  font: var(--nk-text-p16-m);
  line-height: 1;
}
.nk-mobile-menu .nk-acc__item.is-open .nk-acc__mark--link {
  transform: none;
}
.nk-mobile-menu .nk-acc__body {
  padding: 0 0 var(--nk-space-12);
}

/* ----- 하단 영역 (고객센터 박스 + 로그아웃 / 로그인) ---------
   메뉴 줄 목록과 분리된 블록이다 — 메뉴 항목이 아니라 연락처와 세션
   끝내기라서, 구분선 줄에 섞으면 메뉴로 읽힌다. */
.nk-mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-8);
}
/* 고객센터: 연회색 배경 박스 전체가 통화 링크 */
.nk-mobile-menu__cs {
  display: flex;
  align-items: flex-start;
  gap: var(--nk-space-12);
  padding: var(--nk-space-16);
  background: var(--nk-color-gray-input-bg);
  border-radius: var(--nk-radius-12);
  text-decoration: none;
}
.nk-mobile-menu__cs-icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  /* 첫 줄("고객센터", 작은 글씨) 가운데에 맞춘다 */
  margin-top: 2px;
}
.nk-mobile-menu__cs-text {
  display: flex;
  flex-direction: column;
  gap: var(--nk-space-4);
  min-width: 0;
}
.nk-mobile-menu__cs-label {
  font: var(--nk-text-p13-r);
  color: var(--nk-color-text-sub);
}
.nk-mobile-menu__cs-phone {
  font: var(--nk-text-p18-b);
  color: var(--nk-color-black);
}
.nk-mobile-menu__cs-hours {
  font: var(--nk-text-p12-r);
  color: var(--nk-color-text-sub);
}
/* 로그아웃: 박스 아래 가운데 정렬 텍스트 버튼(화살표 없음).
   터치 영역은 44px 이상 — 글자만 14px 이라 높이를 따로 잡아 준다. */
.nk-mobile-menu__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: var(--nk-text-p14-m);
  color: var(--nk-color-text-sub);
  text-decoration: none;
  cursor: pointer;
}
.nk-mobile-menu__logout:hover {
  color: var(--nk-color-black);
}

/* 아코디언 본문의 하위 링크 */
.nk-mobile-menu__acc-link {
  display: block;
  padding: var(--nk-space-8) 0;
  font: var(--nk-text-p15-m);
  color: var(--nk-color-text-sub);
  text-decoration: none;
}
.nk-mobile-menu__acc-link:hover {
  color: var(--nk-color-primary);
}
.nk-mobile-menu__acc-loading {
  margin: 0;
  padding: var(--nk-space-8) 0;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-text-sub);
}

/* 태블릿 이하: 가운데 내비게이션/우측 액션을 숨기고 햄버거 하나로 대체 */
@media (max-width: 768px) {
  .nk-header {
    padding: 0 var(--nk-space-16);        /* 0 16px */
    gap: var(--nk-space-16);
  }
  .nk-header__nav,
  .nk-header__actions {
    display: none;
  }
  .nk-header__hamburger {
    display: inline-flex;
  }
}

/* 모바일 이하 */
@media (max-width: 375px) {
  .nk-header__logo-img {
    height: 28px;
  }
  .nk-mobile-menu__quick {
    gap: var(--nk-space-8);
  }
}