/* ============================================
   .container — common-design.md § 2-2
   - new/common.css 에 동일 정의 존재. common.css 는 글로벌 reset 위험으로
     ucHead 에 일괄 로드 안 함 → 헤더가 .container 에 의존하므로 여기 카피
   - 콘텐츠 폭(padding 제외) 1232 확보 → max-width = 1232 + padding*2
     viewport 가 부족하면 width: 100% 가 우선되어 콘텐츠 자동 축소 (D 패턴, 유동)
   ============================================ */
.c-header .container,
.c-header__top.container,
.c-header__nav.container,
.c-subnav__inner.container {
  --c-padding: 16px;
  width: 100%;
  max-width: calc(1232px + var(--c-padding) * 2);
  margin: 0 auto;
  padding-left: var(--c-padding);
  padding-right: var(--c-padding);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .c-header .container,
  .c-header__top.container,
  .c-header__nav.container,
  .c-subnav__inner.container { --c-padding: 40px; }
}
@media (min-width: 1280px) {
  .c-header .container,
  .c-header__top.container,
  .c-header__nav.container,
  .c-subnav__inner.container { --c-padding: 60px; }
}

/* ============================================
   Header (Figma 2027:262, 1920 × 122)
   common-design.md § 3 / responsive.md § 5-1
   - 상단 영역(y=21~59, 높이 38): 로고 + 워드마크 + 검색바 + 시작하기 + 로그인
   - 하단 nav(y=80~101, 높이 21): 6개 메뉴 (Pretendard Medium 18px, '전체 상품' active)
   ============================================ */

.c-header {
  /* fixed: 자기 자리를 차지하지 않으므로 헤더 박스 크기 변화가 외부 레이아웃에 영향을 안 줌
     → 컴팩트 변환 시 본문 점프 및 sticky 진동 모두 제거
     본문 시작 위치는 .c-header__spacer 가 보장. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky-header);
  background: var(--color-white);
  border-bottom: 1px solid #E7E9EE;
  /* 헤더 박스 명시 height + transition — SubNav top 변환과 정확히 동기화.
     명시값 없으면 nav 가 absolute 로 빠지는 순간 자연 height 가 122→59 로 즉시 점프하여
     SubNav top transition(0.2s) 과의 시차로 헤더 바닥 ↔ SubNav 윗변 사이 빈틈이 생김. */
  height: 122px;
  transition: height 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.c-header.is-scrolled {
  height: 70px;
}

/* 헤더 영역 spacer — 헤더 fragment 안에서 헤더 바로 다음에 위치.
   fixed 헤더가 흐름 공간을 차지하지 않으므로 spacer 가 122px(모바일 56) 자리를 대신 차지하여
   SubNav / 본문 시작 위치를 보장. 컴팩트 모드에서도 spacer 크기는 변하지 않음. */
.c-header__spacer {
  height: 122px;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .c-header__spacer { height: 56px; }
}

/* 상단 row
   - 3개 자식(brand / search / actions)에 justify-content: space-between
   - search가 brand와 actions 사이 남은 공간 중앙에 자연 배치 */
.c-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 59px;             /* 21 top + 38 content */
  padding-top: 21px;
  box-sizing: border-box;
  gap: 24px;                /* 요소 사이 최소 여백 */
}

/* ---- Brand (로고 아이콘 + 워드마크) ---- */
.c-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  flex: 0 0 auto;
}
.c-header__brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--point-blue-1);
}
.c-header__brand-icon svg {
  width: 17.28px;
  height: 19.59px;
}
.c-header__brand-text {
  font-family: Inter, "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;        /* ExtraBold */
  font-size: 1.625rem;      /* 26px */
  color: var(--point-blue-1);
  line-height: 1;
  white-space: nowrap;
}

/* ---- Search bar (460×38, border #E5E7EB, radius 12)
   - space-between 부모이므로 별도 margin 불필요 (남은 공간 중앙 자연 배치) */
.c-header__search {
  flex: 0 0 460px;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: var(--color-white);
  box-sizing: border-box;
}
.c-header__search-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.c-header__search-input {
  flex: 1 1 auto;
  min-width: 0;              /* flex item 의 intrinsic min-width (placeholder 폭) 무력화
                                — 컴팩트 모드(214px)에서 input 이 부모 폭 따라 정상 축소되게 함 */
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 400;          /* Regular */
  font-size: 1rem;           /* 16px — 입력 시 가독성 위해 18px → 16px 로 조정 */
  color: var(--color-mono-1);
}
.c-header__search-input::placeholder {
  color: #9CA3AF;
}
/* input type=search 의 기본 X(clear) 버튼 색을 검색 아이콘(#9C9C9C) 과 통일.
   브라우저 기본 회색 톤(Chrome/Edge) 또는 다크 톤(Safari) 을 SVG dataURL 로 override.
   Firefox 는 ::-webkit-search-cancel-button 미지원 — 기본 동작 그대로 (영향 최소). */
.c-header__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.5 3.5l7 7M10.5 3.5l-7 7' stroke='%239C9C9C' stroke-width='1.4' stroke-linecap='round' fill='none'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 0.85;
}
.c-header__search-input::-webkit-search-cancel-button:hover { opacity: 1; }

/* ---- Actions (시작하기 + 로그인) ---- */
.c-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.c-header__quick-link,
.c-header__login {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 600;          /* SemiBold */
  font-size: 1rem;           /* 16px */
  text-decoration: none;
  line-height: 1;
}
.c-header__quick-link { color: #333333; }
.c-header__login     { color: var(--point-blue-1); }

/* ---- Nav (하단 줄) — Pretendard Medium 18px
   - 시안: top row 끝(y=59) ~ nav 시작(y=80) = 21px 여백, nav 끝(y=101) ~ header 끝(y=122) = 21px 여백
   - 즉 nav 영역 자체가 21(padding-top) + 21(content) + 21(padding-bottom) = 63px
*/
.c-header__nav {
  display: flex;
  align-items: center;
  height: 63px;
  padding-top: 21px;
  /* padding-bottom: 0 — nav 하단 21px 공간을 li padding으로 옮겨 hover 갭 제거 */
  padding-bottom: 0;
  box-sizing: border-box;
}
/* 셀렉터를 .c-gnb / .c-gnb__link 로 좁힘 — 드롭다운 안의 a 태그(.c-gnb-menu 등)와 충돌 방지
   (예전 .c-header__nav a 룰은 specificity가 높아 .c-gnb-menu의 display:flex / padding 을 덮어버렸음) */
.c-header__nav .c-gnb {
  display: flex;
  align-items: center;
}
.c-header__nav .c-gnb__link {
  position: relative;
}
.c-header__nav .c-gnb__link:hover,
.c-header__nav .c-gnb__link.is-active {
  color: var(--point-blue-1);
}

/* ---- Cart icon + count badge (로그인 상태) ---- */
.c-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  text-decoration: none;
  color: #222;        /* 안 SVG stroke=currentColor 가 이 색 따름 — 마이페이지 아이콘과 톤 통일 */
}
.c-header__cart-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.c-header__cart-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.c-header__cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #6B80F6;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}

/* ---- Mypage 드롭다운 (로그인 상태) ---- */
.c-header__mypage {
  position: relative;
}
.c-header__mypage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.c-header__mypage-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #222;   /* 장바구니 PNG 모노 톤과 통일 — SVG stroke=currentColor 가 이 색을 따름 */
  flex-shrink: 0;
}
.c-header__mypage-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;       /* 가장 긴 메뉴 항목 폭 + padding 기준으로 자동 결정 */
  padding: 8px;             /* 좌우 8 — a 의 border-radius hover 가 panel 가장자리와 겹치지 않도록 여백 확보 */
  background: #fff;
  border: 1px solid #EEE;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: var(--z-dropdown, 100);
}
.c-header__mypage.is-open .c-header__mypage-panel {
  display: block;
}
.c-header__mypage-panel a {
  display: block;
  padding: 10px 16px;
  border-radius: 12px;      /* 일반형 드롭다운(.c-gnb-mini-menu) 과 동일 — hover 시 둥근 박스 강조 */
  text-align: center;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
}
.c-header__mypage-panel a:hover {
  background: #F9F9F9;      /* 일반형 드롭다운과 통일 (기존 #F5F7FF → #F9F9F9) */
  color: var(--point-blue-1);
}

/* ============================================
   GNB 드롭다운 (Figma 1837:1115)
   - hover/click 시 드롭다운 노출
   - 패널은 nav 기준 absolute (좌측 정렬)
   ============================================ */
.c-header__nav { position: relative; }

.c-gnb {
  display: flex;
  align-items: center;
  /* 시안: 메뉴 글자 사이 실제 시각 거리 35px.
     link에 좌우 padding 12씩(=24)을 줬으므로 gap = 35 - 24 = 11 */
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* li는 static — 드롭다운은 nav 기준으로 위치(메뉴 글자 위에 겹치는 문제 방지)
   padding-bottom: 21 — 글자와 드롭다운 사이 nav padding 영역에 hover 적용되도록 li 영역 확장
   (이게 없으면 마우스가 nav padding을 건널 때 mouseleave 발생 → 드롭다운에 도달 못함) */
.c-gnb__item {
  position: static;
  padding-bottom: 21px;
}
.c-gnb__link {
  display: inline-block;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;          /* 시안: Pretendard Bold */
  font-size: 1.125rem;       /* 시안: 18px */
  color: #222;               /* 시안: mono-1 #222 */
  line-height: 1.4;          /* 시안 line-height 1.4 */
  /* 시안 글자 wrapper(Frame 99/100/...)가 글자보다 살짝 큰 박스로 잡혀 있음
     → 좌우 12 / 상하 6 부여해서 hover·click 영역 확장 + 시각 여백 확보 */
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.c-gnb__item:hover > .c-gnb__link,
.c-gnb__item.is-open > .c-gnb__link {
  color: var(--point-blue-1);
}

/* 드롭다운 패널 공통 — link 의 padding-bottom 끝지점에서 살짝 아래에 위치 */
.c-gnb-dropdown {
  position: absolute;
  top: calc(100% - 15px);
  left: 0;
  background: #fff;
  border: 1px solid #EEE;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  display: none;
  z-index: var(--z-dropdown, 100);
}
.c-gnb__item.is-open > .c-gnb-dropdown {
  display: flex;
}

/* 큰 드롭다운 (전체 상품) — width 는 콘텐츠 기반 (--card 룰과 동일 사양, 아래 새 modifier 에서 일괄 정의) */
.c-gnb-dropdown--lg {
  align-items: stretch;
}
/* 중간 드롭다운 (솔루션) */
.c-gnb-dropdown--md {
  align-items: stretch;
}
/* 작은 드롭다운 (이벤트) */
.c-gnb-dropdown--sm {
  flex-direction: column;
  width: 297px;
  padding: 12px 16px;
}

/* 좌측 메뉴 패널 — 가장 긴 행(아이콘+title+desc) 폭 + 좌우 padding 16 으로 패널 폭 자동 결정.
   부모 .c-gnb-dropdown--card width: max-content 와 짝. */
.c-gnb-dropdown__left {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}
/* promo는 좌측 패널의 남은 세로 공간을 채움 (시안 flex-[1_0_0]) */
.c-gnb-dropdown__promo {
  background: var(--point-blue-1);
  border-radius: 12px;
  overflow: hidden;
  width: 224px;
  aspect-ratio: 1 / 1;   /* 정사각형 — 1280+ promo 패널 padding 안쪽 폭과 동일 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-gnb-dropdown__promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-gnb-dropdown__promo-title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #222;
  line-height: 1.2;
  margin: 0;
}
.c-gnb-dropdown__promo-desc {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

/* 우측 프로모션 패널 — 시안 280×, padding 32/28, gap 20 */
.c-gnb-dropdown__right {
  width: 280px;
  padding: 32px 28px;
  background: #F5F7FF;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: stretch;
}

/* 메뉴 행 (아이콘 + 제목 + 설명)
   padding-y 17 — promo 우측 패널 (padding 32 + 정사각형 224 + gap·텍스트) 높이와 좌측 4행 합 높이를 맞추기 위해
   기존 20 에서 축소. 8*py + 244 ≈ 381 → py ≈ 17. */
.c-gnb-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 17px 16px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
/* 회색 배경은 현재 페이지(.is-active) 또는 hover 시에만 적용 */
.c-gnb-menu:hover,
.c-gnb-menu.is-active {
  background: #F9F9F9;
}
.c-gnb-menu__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-gnb-menu__icon--blue     { background: #EEF2FE; color: var(--point-blue-1); }
.c-gnb-menu__icon--green    { background: #E8F5F0; color: #1F9D55; }
.c-gnb-menu__icon--gradient { background: linear-gradient(45deg, #4B75F2 50%, #7EA7FF 120%); color: #fff; }
.c-gnb-menu__icon--lavender { background: #EEF2FE; color: var(--point-blue-1); }
.c-gnb-menu__icon--peach    { background: #FFF5EA; color: #E07A2A; }
.c-gnb-menu__icon--mint     { background: #E8F5F0; color: #1F9D55; }
.c-gnb-menu__icon--gray     { background: #F3F4F6; color: #4B5563; }
.c-gnb-menu__icon--violet   { background: #F3EEFC; color: #8A57E0; }

.c-gnb-menu__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c-gnb-menu__title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.c-gnb-menu__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #111;
}
.c-gnb-menu__desc {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  color: #6B7280;
}
.c-gnb-menu__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--point-blue-1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
}

.c-gnb-dropdown__divider {
  width: 100%;
  height: 1px;
  background: #EEE;
  margin: 0;
}

/* [B] Choice 프리뷰 카드 */
.c-bchoice-preview {
  margin-top: 0;
  padding: 14px 16px;
  background: #F5F8FF;
  border: 1.5px solid var(--point-blue-1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-bchoice-preview__header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.c-bchoice-preview__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  color: #222;
}
.c-bchoice-preview__badge {
  padding: 3px 8px;
  background: var(--point-blue-1);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 100px;
}
.c-bchoice-preview__body {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-bchoice-card {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #ADB3BE;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.c-bchoice-card--active {
  border: 2px solid var(--point-blue-1);
}
.c-bchoice-card__label {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #666;
}
.c-bchoice-card__check {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--point-blue-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-bchoice-preview__arrow {
  margin: 0 4px;
}
.c-bchoice-preview__pick {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--point-blue-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-bchoice-preview__cta {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--point-blue-1);
}

/* 작은 드롭다운 메뉴 행 (이벤트/기획전) */
.c-gnb-mini-menu {
  display: flex;
  align-items: center;
  justify-content: center;       /* 가운데 정렬 */
  padding: 16px;
  border-radius: 12px;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #111;
  text-decoration: none;
  white-space: nowrap;           /* max-content 폭 산정 시 줄바꿈 없이 자연 폭 그대로 */
}
.c-gnb-mini-menu:hover,
.c-gnb-mini-menu.is-active {
  background: #F9F9F9;
  color: var(--point-blue-1);
}

/* ---- Hamburger (Mobile) ---- */
.c-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  padding: 0;
}
.c-header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-mono-1);
  border-radius: 2px;
}

/* ---- Responsive (responsive.md § 5-1) ----
   1025~1279 데스크탑 좁은 폭 — GNB 일반 모드 미세 조정 (≤1024 는 모바일 헤더라 적용 무관) */
@media (max-width: 1279px) and (min-width: 1025px) {
  .c-header__search { flex-basis: 320px; margin-left: 40px; }
  .c-gnb { gap: 8px; }
  .c-header__brand-text { font-size: 1.375rem; }
}

/* 모바일 헤더 — ≤1024 (태블릿 포함). 햄버거 + 로고만 노출, GNB/검색바/마이페이지 등 숨김 */
@media (max-width: 1024px) {
  .c-header,
  .c-header.is-scrolled { height: 56px; border-bottom: 1px solid #E7E9EE; }
  .c-header__top { height: 56px; padding-top: 0; gap: 12px; }
  .c-header__brand-icon { width: 32px; height: 32px; }
  .c-header__brand-text { font-size: 1.25rem; }
  .c-header__search { display: none; }
  .c-header__quick-link,
  .c-header__login { display: none; }
  .c-header__hamburger { display: flex; }
  .c-header__nav { display: none; }
}

/* ============================================
   2026-05-13 NEW HEADER REVISION
   Figma 1837:1115 / 1838:1122
   - 대메뉴 7개 (전체상품/발송방법/솔루션/이벤트/고객센터/센드비가뭔가요?/제휴문의)
   - 드롭다운 2종: --card (900px, 좌프로모션+우메뉴) / --simple (297px, 단순 리스트)
   - SubNav (서브메뉴 바) URL 기반 자동 표시
   - 활성 표시는 body[data-header-group] + body[data-header-path] (JS가 부착)
   ============================================ */

/* 새 modifier alias — 기존 --lg/--md/--sm 와 동일 사양 매핑.
   width: max-content → 메뉴 콘텐츠 폭 + promo(280px 고정) 합산.
   HTML 순서 = 시각 순서: 메뉴(__left, 좌) + promo(__right, 우). */
.c-gnb-dropdown--card {
  width: max-content;
  align-items: stretch;
}
.c-gnb-dropdown--simple {
  flex-direction: column;
  /* 가장 긴 메뉴 항목 폭 + 양옆 여백에 맞춰 자동 축소 (max-content). 297 고정 시 항목 대비 너무 넓던 문제 보정 */
  width: max-content;
  padding: 12px 16px;
  /* 가운데 정렬은 header.js 의 placeDropdowns 가 inline style 로 처리 (CSS left 는 JS 가 덮어씀) */
}

/* 첫 메뉴(전체 상품) — 왼쪽 padding 제거해서 로고 좌측과 정렬
   .c-gnb__link 자체에 padding: 6px 12px 가 있으므로 link 의 padding-left 도 0 */
.c-gnb > .c-gnb__item:first-child {
  padding-left: 0;
}
.c-gnb > .c-gnb__item:first-child > .c-gnb__link {
  padding-left: 0;
}

/* ============================================
   대메뉴 활성 표시 — 색만, 밑줄 없음 (시안 사양)
   body[data-header-group="<key>"] 가 JS로 부착됨
   ============================================ */
body[data-header-group="goods"]    .c-gnb__link--goods,
body[data-header-group="send"]     .c-gnb__link--send,
body[data-header-group="solution"] .c-gnb__link--solution,
body[data-header-group="event"]    .c-gnb__link--event,
body[data-header-group="cs"]       .c-gnb__link--cs {
  color: var(--point-blue-1);
}
/* [Y 전용] 스페셜 상품 / [B] Choice / 기념일 발송 — 별도 GNB 항목들이므로 각 URL 별로 활성 매칭.
   기념일 발송은 path 가 /group/eventSend 라 attribute starts-with 로 하위 경로(/group/eventCreate 등)까지 활성 처리 */
body[data-header-path="/goods/submemberSelectedGoods"]       .c-gnb__link--selected,
body[data-header-path="/goods/submemberSelectedGoodsChoice"] .c-gnb__link--selected-choice,
body[data-header-path^="/group/event"]                       .c-gnb__link--selected-event {
  color: var(--point-blue-1);
}

/* ============================================
   sticky 헤더 범위 보정 — 직계 부모 박스의 height: 100% 제약 해제
   - 기존 CSS: #wrap { height: 100% }, .sub_wrap { height: 100% } 가 viewport 1화면 분량으로 박스를 제한
   - 헤더가 .sub_wrap 안에 있어 sticky 범위가 viewport 1화면으로 잘림 → 스크롤 중간부터 헤더가 위로 밀려나감
   - `:has(.c-header)` 로 새 헤더가 실제로 렌더링된 페이지에만 적용 (아직 미전환 페이지 영향 차단)

   overflow: clip
   - `#wrap` 의 `overflow-x: hidden`(common.css)이 scroll container 를 만들어 sticky 의 스크롤 부모가 `#wrap` 으로 잡힘
   - 그런데 height 보정으로 `#wrap` 자체는 스크롤되지 않아 sticky 가 viewport 스크롤에 반응 못 함
   - `overflow: clip` 은 잘라내기는 유지하면서 scroll container 를 만들지 않아 sticky 가 viewport 기준으로 정상 동작
   ============================================ */
body:has(.c-header) #wrap,
body:has(.c-header) .sub_wrap {
  height: auto;
  min-height: 100%;
  overflow: clip;
}

/* ============================================
   사이드바 사라진 자리 좌측 여백 무력화
   - 구버전 sub.css 의 .com_sub_section_wrap { padding-left: 18.875em } 가
     LNB 사이드바 자리만큼 본문을 우측으로 밀고 있었음 → 사이드바 제거 후 공백 노출
   - 새 헤더 적용 페이지(body[data-header-group])에서는 좌측 여백을 0 으로 무력화
   - 모바일에서는 sub.css 의 padding-top: 80px(모바일 lnb 높이)도 무력화
   ============================================ */
body:has(.c-header) .com_sub_section_wrap,
body:has(.c-header) .com_sub_section_wrap.fold_lnb {
  padding-left: 0;
}
@media (max-width: 1024px) {
  body:has(.c-header) .com_sub_section_wrap {
    padding-top: 0;
  }
}

/* ============================================
   SubNav (서브메뉴 바) — Figma 1996:168
   - sticky 로 헤더 바로 아래 도킹 → 스크롤 시 컴팩트 헤더와 함께 2줄 고정
   - 일반 모드: 헤더 122 → top: 122px
   - 컴팩트 모드: 헤더 70 → top: 70px (.c-header.is-scrolled + .c-subnav)
   ============================================ */
.c-subnav {
  width: 100%;
  background: #FFF;
  border-bottom: 1px solid #E7E9EE;
  display: none;          /* 기본 숨김 — body[data-header-group] 매칭 시만 노출 */
  position: sticky;
  top: 122px;             /* 일반 모드 헤더 높이 */
  z-index: 90;            /* 헤더(--z-sticky-header) 보다 낮게 */
  transition: top 0.2s ease;
}
/* ~ (general sibling) 사용 — spacer 가 header 와 subnav 사이에 끼어 있으므로 + 대신 ~ */
.c-header.is-scrolled ~ .c-subnav {
  top: 70px;              /* 컴팩트 모드 헤더 높이 */
  /* 부착 시 transition 0 — SubNav 가 즉시 70 으로 점프하여 헤더(122→70 transition 진행 중)에 가려짐.
     헤더가 줄어들면서 SubNav 가 점진적으로 드러나므로 두 변환의 frame 단위 미세 시차가 사용자
     시야에 빈틈으로 보이지 않음. 해제 시(.is-scrolled 제거)는 기본 transition: top 0.2s ease 가
     다시 적용되어 SubNav 가 헤더와 함께 부드럽게 122 로 복귀. */
  transition: top 0s;
}
@media (max-width: 1279px) {
  /* 컴팩트 비활성화 — 70 미사용, 일반 모드 헤더 높이 그대로 */
  .c-header.is-scrolled ~ .c-subnav { top: 122px; }
}
.c-subnav__inner {
  display: flex;
  align-items: center;
  height: 55px;
}
.c-subnav__list {
  display: none;          /* 그룹별 list 도 기본 숨김 */
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.c-subnav__item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.c-subnav__link {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 2px;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 500;
  font-size: 1rem;           /* 16px */
  color: #6B7280;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease;
}
.c-subnav__link:hover {
  color: var(--point-blue-1);
}
/* 활성 항목 — 텍스트 강조 + 2px 파란 밑줄 (텍스트 폭) */
.c-subnav__item.is-active > .c-subnav__link {
  color: var(--point-blue-1);
}
.c-subnav__item.is-active > .c-subnav__link::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--point-blue-1);
}

/* 그룹별 SubNav 노출 — body[data-header-group] 매칭
   selected: 서브회원 + showSelectedGoods='Y' 전용 (스페셜 상품 / [B] Choice 페이지) */
body[data-header-group="selected"] .c-subnav,
body[data-header-group="goods"]    .c-subnav,
body[data-header-group="send"]     .c-subnav,
body[data-header-group="solution"] .c-subnav,
body[data-header-group="event"]    .c-subnav,
body[data-header-group="cs"]       .c-subnav,
body[data-header-group="mypage"]   .c-subnav { display: block; }

body[data-header-group="selected"] .c-subnav--selected,
body[data-header-group="goods"]    .c-subnav--goods,
body[data-header-group="send"]     .c-subnav--send,
body[data-header-group="solution"] .c-subnav--solution,
body[data-header-group="event"]    .c-subnav--event,
body[data-header-group="cs"]       .c-subnav--cs,
body[data-header-group="mypage"]   .c-subnav--mypage { display: flex; }

/* /instagram/* 경로(마이페이지 > 인스타 관리 진입 등)에서는 send 서브내비를 "인스타 DM 발송" 1개만 노출.
   인스타 DM 발송 항목만 .c-subnav__item--has-third 클래스를 가지므로 그것 외엔 모두 숨김 */
body[data-header-path^="/instagram"] .c-subnav--send .c-subnav__item:not(.c-subnav__item--has-third) {
  display: none;
}

/* ============================================
   SubNav 3차 드롭다운 — "인스타 DM 발송" 항목 hover 시
   ============================================ */
.c-subnav__item--has-third > .c-subnav__link::after {
  /* "▼" 표시는 추가 가능 (옵션) */
}
.c-subnav__third {
  position: absolute;
  /* GNB 드롭다운과 동일한 시각감 — link 텍스트 바로 아래에 자연스러운 여백을 두고 붙도록 위로 살짝 끌어올림.
     SubNav item 은 padding-bottom 이 없고 link 가 55px 박스 안에서 vertical center 되어 있어
     GNB 의 21px buffer 대비 가용 여백 ~17px → 10px 만 lift 해 텍스트~패널 사이 ~7px 시각 여백 유지 */
  top: calc(100% - 10px);
  /* 부모 .c-subnav__item (position: relative) 가운데 정렬 — 트리거 글자 "인스타 DM 발송" 중심에 패널 가운데 맞춤 */
  left: 50%;
  transform: translateX(-50%);
  /* 가장 긴 항목 폭 + 좌우 padding 에 자동 맞춤 — 200 고정 시 항목 대비 너무 넓던 문제 보정 */
  width: max-content;
  background: #FFF;
  border: 1px solid #EEE;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: var(--z-dropdown, 100);
  display: none;
}
.c-subnav__item--has-third:hover > .c-subnav__third,
.c-subnav__item--has-third.is-open > .c-subnav__third {
  display: block;
}
.c-subnav__third-link {
  display: block;
  padding: 10px 16px;
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;       /* 14px */
  color: #2A2F3A;
  text-decoration: none;
  text-align: center;        /* 가운데 정렬 */
  white-space: nowrap;       /* max-content 폭 산정 시 줄바꿈 없이 자연 폭 그대로 */
}
.c-subnav__third-link:hover {
  background: #F9F9F9;
  color: var(--point-blue-1);
}

/* ============================================
   모바일 — SubNav 숨김 (헤더 nav 와 함께 햄버거로 통합)
   ============================================ */
@media (max-width: 1024px) {
  .c-subnav { display: none !important; }
}

/* ============================================
   스크롤 컴팩트 모드 — Figma 2077:206
   - 헤더 122 → 70 축소 (1행)
   - nav 가 상단 row 의 brand 우측에 인라인 (absolute)
   - 검색바 460 → 214 로 좁아짐
   - 트리거: .c-header.is-scrolled (window.scrollY > 50, JS 부착)
   ============================================ */
.c-header {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.c-header__top,
.c-header__nav,
.c-header__search,
.c-header__nav .c-gnb {
  transition: height 0.2s ease, padding 0.2s ease, top 0.2s ease, flex-basis 0.2s ease;
}

.c-header.is-scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.c-header.is-scrolled .c-header__top {
  height: 70px;
  padding-top: 16px;
  padding-bottom: 16px;     /* 수직 대칭 (top 16 + content 38 + bottom 16 = 70) */
  box-sizing: border-box;
}

/* 로고 워드마크("SEND B") 숨김 — 아이콘만 노출 */
.c-header.is-scrolled .c-header__brand-text {
  display: none;
}

/* nav 를 상단 row 안에 absolute 로 띄움 — brand 우측 17px 떨어진 곳에 정렬
   container 매트릭스 그대로 (max-width 1232 + 중앙 정렬) 안에서 padding-left 로 brand+gap 만큼 들여쓰기
   - padding-top/bottom 0 으로 일반 모드의 padding-top: 21px 무력화 (24px 박스 안에서 c-gnb 가 밑으로 밀리던 문제)
   - pointer-events: none 으로 padding 영역 클릭이 brand/검색바/actions 로 통과되게 함
     (자식 .c-gnb 에서 다시 auto 로 켜서 메뉴와 드롭다운만 클릭 받음) */
.c-header.is-scrolled .c-header__nav {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  /* container 외측 폭과 일치 (콘텐츠 1232 + padding 60+60 = 1352).
     일반 모드의 .c-header__top.container 와 좌측 좌표가 동일해야 GNB 가 brand 옆 정확한 위치에
     정렬됨. 1232 로 두면 .container 외측 좌측보다 60px 안쪽에서 시작해 GNB 가 brand 에서 60px
     더 멀어지는 어긋남 발생. */
  width: calc(1232px + 120px);
  max-width: 100%;
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(60px + 36px + 17px);   /* container padding 60 + brand 아이콘 36 + gap 17 */
  padding-right: 60px;
  box-sizing: border-box;
  pointer-events: none;
}
.c-header.is-scrolled .c-gnb {
  pointer-events: auto;     /* 메뉴·드롭다운만 클릭 받기 */
}
@media (max-width: 1279px) and (min-width: 1025px) {
  .c-header.is-scrolled .c-header__nav {
    padding-left: calc(40px + 36px + 17px);
    padding-right: 40px;
  }
}
.c-header.is-scrolled .c-gnb {
  height: 24px;
  gap: 17px;                /* 시안 2077:206 — 메뉴 사이 17 */
}
.c-header.is-scrolled .c-gnb__item {
  height: 24px;
  padding-bottom: 0;        /* 일반 모드의 hover 영역 padding-bottom: 21 무력화 */
}
.c-header.is-scrolled .c-gnb__link {
  height: 24px;
  font-size: 1rem;          /* 16px (컴팩트 시 약간 작게) */
  line-height: 24px;
  padding: 0;               /* 컴팩트 시 link 좌우 padding 제거 → gap 17 만으로 메뉴 사이 17 */
}

/* 검색바 좁아짐 + 우측 정렬 — 시안에서는 actions 바로 왼쪽
   232px = 214 + 18 — 기본 214 에선 placeholder "어떤 선물을 찾으세요?" 의 끝 ? 가 잘려서 살짝 늘림 */
.c-header.is-scrolled .c-header__search {
  flex: 0 0 232px;
  max-width: 232px;
  margin-left: auto;        /* brand 와 actions 사이의 빈 공간을 좌측에 두고 검색바를 우측으로 밀기 */
}

/* 컴팩트 시 드롭다운 위치 보정 — top row 기준에서 시작 */
.c-header.is-scrolled .c-gnb-dropdown {
  top: 100%;            /* 기존 그대로지만 nav 가 absolute 라 정상 */
}

/* 1025~1279 — 1줄 컴팩트 유지하되 좁은 폭에 맞춰 검색바·gap·폰트 축소 (사람인 패턴).
   nav padding-left 93 (40+36+17) 은 위 1025~1279 룰에서 이미 정의됨. ≤1024 는 모바일 헤더라 적용 무관. */
@media (max-width: 1279px) and (min-width: 1025px) {
  .c-header.is-scrolled .c-header__search {
    flex: 0 0 180px;          /* 1280+ 의 232 → 180 (placeholder 끝부분 잘려도 위치 우선) */
    max-width: 180px;
  }
  .c-header.is-scrolled .c-gnb {
    gap: 12px;                /* 1280+ 의 17 → 12 (메뉴 7~8개 가로 압축) */
  }
  .c-header.is-scrolled .c-gnb__link {
    font-size: 0.9375rem;     /* 15px (1280+ 의 16 보다 1단계 작게) */
  }
}

/* ============================================================
   모바일 메뉴 드로어 (.c-mobile-nav) — 햄버거 클릭 시 우측 슬라이드 인
   body.is-mobile-nav-open 클래스로 활성화 (header.js)
   PC(>=768) 에선 강제 숨김
   ============================================================ */
.c-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
body.is-mobile-nav-open .c-mobile-nav {
  display: block;
  pointer-events: auto;
}
body.is-mobile-nav-open { overflow: hidden; }

@media (min-width: 1025px) {
  .c-mobile-nav { display: none !important; }
}

.c-mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .25s ease;
}
body.is-mobile-nav-open .c-mobile-nav__backdrop { opacity: 1; }

.c-mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
body.is-mobile-nav-open .c-mobile-nav__panel { transform: translateX(0); }

/* 헤더 (제목 + 닫기) */
.c-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #E7E9EE;
  flex-shrink: 0;
}
.c-mobile-nav__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-mono-1);
  letter-spacing: -0.01em;
}
.c-mobile-nav__close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 검색 */
.c-mobile-nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 20px 8px;
  padding: 10px 14px;
  background: var(--color-mosaic-bg);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.c-mobile-nav__search-icon { flex-shrink: 0; }
.c-mobile-nav__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--color-mono-1);
  outline: none;
}
.c-mobile-nav__search-input::placeholder { color: #9C9C9C; }

/* 메뉴 영역 (스크롤) */
.c-mobile-nav__menu {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0 16px;
  -webkit-overflow-scrolling: touch;
}

/* 그룹 (드롭다운 있는 5개 — details 아코디언) */
.c-mobile-nav__group {
  border-bottom: 1px solid #F4F5F7;
}
.c-mobile-nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-mono-1);
  cursor: pointer;
  list-style: none;
}
.c-mobile-nav__group-toggle::-webkit-details-marker { display: none; }
.c-mobile-nav__group-toggle::marker { display: none; content: ''; }
.c-mobile-nav__caret {
  transition: transform .2s ease;
  flex-shrink: 0;
}
.c-mobile-nav__group[open] > .c-mobile-nav__group-toggle .c-mobile-nav__caret {
  transform: rotate(180deg);
}
.c-mobile-nav__group[open] > .c-mobile-nav__group-toggle {
  color: var(--point-blue-1);
}

.c-mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px;
  background: #FAFBFC;
}
.c-mobile-nav__sub li a {
  display: block;
  padding: 10px 20px 10px 32px;
  font-size: 0.875rem;
  color: #555555;
  text-decoration: none;
  font-weight: 500;
}
.c-mobile-nav__sub li a:hover,
.c-mobile-nav__sub li a:focus {
  color: var(--point-blue-1);
  background: #F4F7FF;
}

/* 단독 링크 (센드비가 뭔가요? / 제휴문의) */
.c-mobile-nav__link {
  display: block;
  padding: 14px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-mono-1);
  text-decoration: none;
  border-bottom: 1px solid #F4F5F7;
}
.c-mobile-nav__link:hover,
.c-mobile-nav__link:focus { color: var(--point-blue-1); }

/* 푸터 (로그인 분기 버튼) */
.c-mobile-nav__foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid #E7E9EE;
}
.c-mobile-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.c-mobile-nav__btn--primary {
  background: var(--point-blue-1);
  color: #ffffff;
  border: 1.5px solid var(--point-blue-1);
}
.c-mobile-nav__btn--primary:hover { background: #3a64e0; border-color: #3a64e0; }
.c-mobile-nav__btn--outline {
  background: #ffffff;
  color: var(--point-blue-1);
  border: 1.5px solid #d1d9f7;
}
.c-mobile-nav__btn--outline:hover { background: #f4f7ff; }


/* ============================================
   A 헤더 사용 페이지의 본문 컨테이너 라인 통일
   - header.js onReady 시 body[data-header-version="A"] 부여
   - B 본문 페이지의 실제 콘텐츠 wrapper 들에 적용:
     · .com_sub_cont_wrap : 72개 페이지 (sub.css width 90% / max 1400px override)
     · .ig-report-wrap    : 인스타 리스트 페이지들 (자체 폭 없음 → 1232 라인 매칭)
     · .ig-wrap           : 인스타 상세 페이지 (width 60% / min 760 / max 1200 override)
   - #wrap / .sub_wrap / .com_sub_section_wrap 은 풀폭 유지 — subnav 등 풀폭 요소
     가 그 안에서 잘리지 않도록.
   - A 신규 페이지(new/index, solution/*)는 위 wrapper 미사용 + .container 직접
     사용하므로 이 룰의 영향 없음.
   - 기존 padding 의 top/bottom 은 보존하고 좌우만 토큰화.
   - header.css 는 ucHead 에서 항상 로드되므로 A 헤더 사용 페이지 전체 커버.
   ============================================ */
body[data-header-version="A"] .com_sub_cont_wrap,
body[data-header-version="A"] .ig-report-wrap,
body[data-header-version="A"] .ig-wrap {
  --c-padding: 16px;
  width: 100%;
  min-width: 0;              /* .ig-wrap 의 min-width: 760px override — 모바일 깨짐 방지 */
  max-width: calc(1232px + var(--c-padding) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--c-padding);
  padding-right: var(--c-padding);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body[data-header-version="A"] .com_sub_cont_wrap,
  body[data-header-version="A"] .ig-report-wrap,
  body[data-header-version="A"] .ig-wrap { --c-padding: 40px; }
}
@media (min-width: 1280px) {
  body[data-header-version="A"] .com_sub_cont_wrap,
  body[data-header-version="A"] .ig-report-wrap,
  body[data-header-version="A"] .ig-wrap { --c-padding: 60px; }
}