/* ==========================================================================
   header — 전역
   시안(node 37:556) 간격: 로고~메뉴 90px, 메뉴 항목 사이 40px, 우측 항목 사이 30px
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  /* 모바일은 아이콘 셋이 오른쪽에 붙는다 — 사이를 벌리지 않는다 `[2026-09-18]` */
  gap: var(--sp-2);
  min-height: var(--header-h);
}

.header__logo { flex: 0 0 auto; }
.header__logo-img { width: 148px; height: auto; }

/* --- 좌측 메뉴 -------------------------------------------------------------- */

.header__nav { display: none; }

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.header__nav-link {
  color: var(--c-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-sm);
  white-space: nowrap;
}
.header__nav-link:hover,
.header__nav-link.is-active { color: var(--c-blue); }

/* --- 우측 유틸리티 ---------------------------------------------------------- */
/* 비로그인 Login · Sign in / 로그인 MY PAGE · Logout */

/* 데스크톱 전용 — 모바일은 계정 아이콘(.header__account)이 대신한다 `[2026-09-18]` */
.header__util {
  display: none;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.header__util-link {
  color: var(--c-text);
  font-size: inherit;   /* 모바일 14px · 데스크톱 16px — 묶음에서 물려받는다 */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-sm);
  white-space: nowrap;
}
.header__util-link:hover,
.header__util-link.is-active { color: var(--c-blue); }

/* --- 모바일 ---------------------------------------------------------------- */

/* 계정·장바구니 아이콘 — 모바일에서만 보인다 `[2026-09-18]`.
   좁은 화면에서는 로그인·CART 가 햄버거 안으로 들어가 두 번 눌러야 했다.
   아이콘 둘만 밖에 내놓는다. 회원가입은 로그인 화면 아래 버튼으로 이어진다 */
.header__account,
.header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 34px;
  color: var(--c-text);
}

/* 아이콘 셋은 붙여 한 덩어리로 읽히게 한다 — 사이 여백 없이 붙인다 */
.header__cart { margin-left: auto; }

/* 담긴 개수 — 아이콘 오른쪽 위에 겹친다 */
.header__cart-count {
  position: absolute;
  /* 아이콘 오른쪽 위 **모서리에 걸친다** `[2026-09-18]`.
     right: 0 이면 배지가 아이콘 안으로 들어와 손잡이·뚜껑 선과 겹쳐,
     두 자리 수가 되면 숫자가 그림에 묻혔다. 밖으로 조금 내보낸다 —
     묶음(.header__cart)에 좌우 여백이 있어 헤더를 넘지 않는다 */
  top: 0;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  background: var(--c-blue);
  border-radius: 999px;
  color: var(--c-text-invert);
  font-family: var(--ff-num);
  font-size: 0.625rem;   /* 10px */
  line-height: 16px;
  text-align: center;
}

.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 34px;
  color: var(--c-text);
}

/* 메뉴는 **화면을 덮고 오른쪽에서 밀려 들어온다** `[2026-09-18]`.
   헤더 아래로 펼쳐지던 때는 열어 봐야 뒤 목록이 반쯤 비쳐 어디를 보는 화면인지
   흐릿했다. 손가락으로 쓰는 화면에서 메뉴는 한 화면을 온전히 차지하는 편이 낫다.

   display 를 여닫지 않는다 — none 에서는 transition 이 돌지 않는다.
   평소에는 화면 오른쪽 밖에 세워 두고, 보조기술에는 visibility 로 가린다 */
.header__drawer {
  position: fixed;
  inset: 0;
  z-index: 60;              /* 헤더(50)보다 위 */
  display: block;
  width: 100%;
  max-width: none;
  padding-inline: 0;
  padding-bottom: 0;
  background: var(--c-bg);
  border-top: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  visibility: hidden;
  transform: translateX(100%);
  transition: transform .25s ease, visibility 0s linear .25s;
}

.header__drawer.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform .25s ease, visibility 0s;
}

/* 메뉴가 화면을 덮는 동안 뒤 목록이 따라 움직이지 않게 세운다 */
body.is-drawer-open { overflow: hidden; }

/* 메뉴 자신의 머리줄 — 헤더가 가려지므로 로고와 닫기를 여기에 둔다.
   헤더와 같은 높이·같은 자리라 열고 닫을 때 로고가 제자리에 머문다 */
.header__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--c-line-soft);
}

.header__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 34px;
  color: var(--c-text);
}

/* 항목 사이에만 선을 긋는다 — 머리줄이 이미 맨 위 경계를 만든다 */
.header__drawer li + li { border-top: 1px solid var(--c-line-soft); }

.header__drawer .header__nav-link {
  display: flex;
  padding: var(--sp-4) var(--gutter);
}

/* 태블릿부터 글자 메뉴로 바꾼다 `[2026-09-18]` — 768px 이면 로고와 메뉴 넷이
   나란히 들어간다. 아이콘 줄은 손가락으로 쓰는 좁은 화면에만 남긴다 */
@media (min-width: 768px) {
  /* 넓은 간격은 **로고와 메뉴 사이**에만 준다 `[2026-09-23]`.
     묶음 전체 gap 으로 주면 오른쪽 끝의 Sign in 과 장바구니 아이콘까지 그만큼
     벌어진다 — 둘은 한 덩어리로 읽혀야 하는데 멀찍이 떨어져 보였다 */
  .header__inner { gap: var(--sp-4); }
  .header__logo { margin-right: var(--sp-8); }
  .header__nav { display: block; }
  .header__util { display: flex; }
  /* 글자 메뉴가 나오면 계정 아이콘은 뺀다 — Login·Sign in 이 글자로 있어
     같은 곳으로 가는 길이 둘이 된다 */
  .header__account { display: none; }

  /* 장바구니만은 아이콘으로 남긴다 `[2026-09-23]` — 가운데 메뉴(INQUIRY·NOTICE)는
     "무엇을 파는가" 를 가리키고 오른쪽은 "내 것" 이다. 장바구니는 뒤쪽에 속한다.
     글자 CART 를 따로 두지 않는다: 화면 폭마다 생김새가 달라지면 같은 것을
     두 번 익혀야 한다. margin-left 는 util 이 이미 오른쪽으로 밀어 두었으므로
     여기서는 붙기만 하면 된다 */
  .header__cart { margin-left: 0; }
  .header__toggle { display: none; }
  /* .is-open 과 특이도를 맞춰 뒤에서 덮는다 — !important 를 쓰지 않기 위한 구조 */
  .header__drawer,
  .header__drawer.is-open { display: none; }
}

@media (min-width: 1024px) {
  .header__logo { margin-right: 90px; }
  .header__logo-img { width: 191px; }
}

/* --- 장바구니 담긴 개수 -------------------------------------------------------
   시안에는 없다. 담긴 개수를 헤더에서 바로 보이게 해달라는 요청으로 추가했다.
   PHP 는 @if: cart_count 로 0 일 때 통째로 빼면 된다.
   -------------------------------------------------------------------------- */

.header__nav-link { position: relative; }

.header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding-inline: 5px;
  background: var(--c-blue);
  border-radius: 999px;
  color: var(--c-text-invert);
  font-family: var(--ff-num);
  font-size: 0.6875rem;   /* 11px */
  font-weight: var(--fw-bold);
  line-height: 1;
  vertical-align: middle;

  /* 숫자는 디센더가 없다. 글자 상자를 정확히 가운데 두어도 먹의 무게가 위로
     쏠려 원 안에서 떠 보인다. 상자째로 1px 내려 눈에 맞춘다
     `[개발 보정 2026-09-17]`

     height 가 20px 로 고정이라 box-sizing 을 같이 준다 — 안 주면 원이 21px 이 된다.
     자릿수가 늘어도 흔들리지 않게 tabular-nums 로 폭을 고정한다 */
  box-sizing: border-box;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* 데스크톱 GNB — 글자 오른쪽 위에 걸쳐 놓는다.
   GNB 항목 사이가 40px 이라 15px 을 넘겨도 옆 메뉴와 겹치지 않는다.
   모바일 드로어는 줄이 가로로 넓어 걸치면 멀리 떨어지므로 기본(인라인)을 쓴다. */
.header__nav .header__badge {
  position: absolute;
  top: -12px;
  right: -20px;      /* 글자 오른쪽 끝에 맞춘다 — T 를 덮지 않는다 */
  margin-left: 0;
}

/* 로그아웃은 폼이다 `[2026-09-18]` — POST + CSRF 라 링크로는 못 부른다.
   폼이 줄을 차지하지 않게 글자 버튼처럼 눕힌다 */
.header__logout { display: inline-flex; }
.header__logout .header__util-link {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

/* 드로어의 버튼형 항목(LOGOUT) — 링크와 같은 줄로 보이게 한다 `[2026-09-18]`.
   색은 한 단계 옅게 — 가려는 곳이 아니라 나가는 문이다 */
.header__nav-link--action {
  width: 100%;
  background: none;
  border: 0;
  color: var(--c-text-placeholder);
  text-align: left;
  cursor: pointer;
}
.header__nav-link--action:hover { color: var(--c-text); }