/* endedit 공용 헤더/푸터 셸 CSS — src/components/header.css + footer.css 원본 값 그대로 이식.
   mp-* 클래스는 원본과 동일 이름 유지(다른 9개 프로토타입의 CSS와 그대로 호환). */

.mp-wrap { max-width: 1440px; margin: 0 auto; width: 100%; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }

.mp-logo-text { font-weight: 800; letter-spacing: -0.0236em; color: var(--wds-text); }
/* 로고가 <a> 로 감싸이는데(Header.tsx), 원본 tokens.css 는 a 에 text-decoration 리셋이
   없다 — 실서비스는 거의 항상 로고 <img> 라 안 보이지만, 이미지가 없어 텍스트로 폴백되면
   기본 밑줄이 보인다(데모에서 실제로 발견). 로고 링크만 명시적으로 지운다. */
.mp-hd-logo, .mp-hd-logo-pc { text-decoration: none; }
.mp-logo-img { width: auto; display: block; }

.mp-cart-badge { position: absolute; top: -4px; right: -8px; width: 16px; height: 16px; border-radius: 1000px; background: var(--wds-primary); color: #fff; font-size: 10px; line-height: 1; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; }

.mp-cm { flex: none; position: relative; display: inline-flex; align-items: center; height: 100%; }
.mp-cm-btn { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; height: 100%; min-height: 0; cursor: default; font-family: var(--font-core); font-size: 16px; letter-spacing: 0.0096em; font-weight: 500; color: var(--wds-text-neutral); white-space: nowrap; }
.mp-cm-btn.is-open { font-weight: 700; color: var(--wds-text); }
.mp-cm-chev { display: grid; }
.mp-cm-pop { position: absolute; left: -12px; top: 46px; z-index: 50; min-width: 220px; background: var(--wds-surface); border-radius: 12px; box-shadow: var(--wds-elev-popover); padding: 8px; }
.mp-cm-item { display: flex; flex-direction: column; gap: 2px; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; background: transparent; text-decoration: none; white-space: nowrap; }
.mp-cm-item:hover { background: var(--wds-fill); }
.mp-cm-item-t { font-size: 16px; line-height: 24px; letter-spacing: 0.0096em; font-weight: 700; color: var(--wds-text); }
.mp-cm-item-s { font-size: 13px; line-height: 18px; letter-spacing: 0.0252em; color: var(--wds-text-alt); }

.mp-hd { flex: none; position: relative; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.mp-hd-bar-sub { height: 56px; display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; align-items: center; padding: 0 4px; }
.mp-hd-bar-home { height: 56px; display: flex; align-items: center; padding: 0 4px 0 16px; }
.mp-hd-back { justify-self: start; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--wds-text); }
.mp-hd-title { margin: 0; min-width: 0; text-align: center; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--wds-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-hd-right { display: flex; justify-content: flex-end; }
/* 대부분 <a> 로 쓰이지만 마이페이지 서브헤더 «메뉴 열기» 만 <button> 이라(shop_shell.js)
   UA 기본 버튼 크롬이 드러난다 — .mp-hd-back 과 같은 리셋이 필요하다. */
.mp-hd-ico { width: 44px; height: 44px; display: grid; place-items: center; color: var(--wds-text);
  -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.mp-hd-ico-rel { position: relative; }
.mp-hd-badge { position: absolute; top: 6px; right: 6px; }
.mp-hd-logo { display: grid; place-items: center; }
.mp-hd-spacer { flex: 1; }

.mp-hd-pc { flex: none; }
.mp-hd-top { min-height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-top: 12px; }
.mp-hd-logo-pc { justify-self: start; display: grid; place-items: center; }

.mp-search { justify-self: center; width: 340px; max-width: 100%; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border-radius: 1000px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); }
.mp-search.is-focus { box-shadow: inset 0 0 0 1px var(--wds-text); }
.mp-search-ico { color: var(--wds-text-neutral); display: grid; }
.mp-search-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-core); font-size: 15px; letter-spacing: 0.0145em; color: var(--wds-text); }
.mp-search-clear { flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp-search-clear > svg { width: 18px; height: 18px; border-radius: 50%; stroke-width: 2.2; background: var(--wds-text-assistive); color: #fff; transition: background-color 0.18s var(--wds-ease), transform 0.18s var(--wds-ease); }
.mp-search-clear:hover > svg { background: var(--wds-text-alt); }
.mp-search-clear:active > svg { transform: scale(0.9); }
.mp-search-clear[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mp-search-clear > svg { transition: none; } }

.mp-util { justify-self: end; display: flex; align-items: center; gap: 16px; }
.mp-util-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--wds-text); text-decoration: none; }
.mp-util-ico { display: grid; position: relative; }
.mp-util-label { font-size: 12px; line-height: 16px; letter-spacing: 0.0311em; font-weight: 500; color: var(--wds-text-neutral); white-space: nowrap; }

.mp-gnb-band { box-shadow: inset 0 -1px 0 var(--wds-line-neutral); }
.mp-gnb-band.is-home { box-shadow: none; }
.mp-gnb-row { display: flex; gap: 20px; height: 52px; align-items: center; justify-content: flex-start; white-space: nowrap; }
.mp-gnb { flex: 0 1 auto; min-width: 0; display: flex; gap: 28px; align-items: center; height: 100%; overflow-x: auto; overflow-y: hidden; }
.mp-gnb-item { flex: none; display: inline-flex; align-items: center; height: 100%; font-size: 16px; letter-spacing: 0.0096em; font-weight: 500; color: var(--wds-text-neutral); text-decoration: none; white-space: nowrap; }
.mp-gnb-item.is-accent { letter-spacing: 0.0311em; font-weight: 700; color: var(--wds-destructive); }
.mp-gnb-div { flex: none; width: 1px; height: 16px; background: var(--wds-line-neutral); }
.mp-gnb-item.is-label { cursor: default; } /* 우먼/맨/뷰티/라이프 — 라이브 실측상 클릭 안 되는 라벨(span) */
.mp-gnb-fill { flex: 1 1 auto; }

/* chrome.css의 .ee-chrome a{color:inherit} 대응 — 원본과 동일한 명시도 보정 */
.mp-gnb a.mp-gnb-item { color: var(--wds-text-neutral); }
.mp-gnb a.mp-gnb-item.is-accent { color: var(--wds-destructive); }
.mp-util a.mp-util-item { color: var(--wds-text); }
.mp-hd a.mp-hd-ico { color: var(--wds-text); }

@media (max-width: 768px) {
  .shop-util span.mp-util-label:last-child { font-size: 12px; }
}

/* ── mp-ico: Icon.tsx 규칙 그대로(24x24, currentColor, stroke 1.7) ── */
.mp-ico { display: block; }

/* ── 모바일/PC 전환 — 원본은 useIsMobile()(768px) 로 아예 다른 트리를 그렸지만,
   이 정적판은 둘 다 DOM에 둔 뒤 CSS 미디어쿼리로만 보여준다(list 프로토타입과
   같은 방식). 브레이크포인트는 반드시 useIsMobile 과 같은 768px 이어야 한다. ── */
.mp-only-mobile { display: none; }
.mp-only-desktop { display: block; }
@media (max-width: 768px) {
  .mp-only-mobile { display: block; }
  .mp-only-desktop { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2026-08-23 정희찬(PRO4) — 서브페이지 탑메뉴를 «메인과 같은 규격» 으로
   요청 : PC 탑메뉴 가로폭을 브라우저의 95% · 커뮤니티는 오른쪽 끝.
   값은 main_endedit.asp 의 <style> 블록과 1:1 이다.
   ⚠ 이 파일은 4사이트 공용이라 «클래스로» 가린다 — shop_header.asp 가
     endedit 계열일 때만 #ee-header-root 에 .ee-hd-wide 를 붙인다.
   되돌리기 : 이 블록만 지운다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 메가메뉴(ee-nav.js)도 탑메뉴와 같은 폭에 맞춘다 */
.ee-hd-wide { --ee-hd-max: 95%; }

@media (min-width: 769px) {
  .ee-hd-wide .mp-hd-pc .mp-wrap { max-width: 95%; padding-left: 0; padding-right: 0; }

  .ee-hd-wide .mp-hd-pc .mp-gnb-item,
  .ee-hd-wide .mp-hd-pc .mp-cm-btn,
  .ee-hd-wide .mp-hd-pc .ee-nav-item { font-size: 18px; }

  /* 커뮤니티를 오른쪽 끝으로 — 마크업 순서는 [카테고리][구분선][커뮤니티][빈칸]
     이라 그대로 두면 빈칸이 커뮤니티를 왼쪽으로 밀어붙인다. order 로만 바꾼다. */
  .ee-hd-wide .mp-hd-pc .mp-gnb-row .mp-gnb { order: 0; }
  .ee-hd-wide .mp-hd-pc .mp-gnb-row .mp-gnb-fill { order: 1; }
  .ee-hd-wide .mp-hd-pc .mp-gnb-row .mp-gnb-div { order: 2; }
  .ee-hd-wide .mp-hd-pc .mp-gnb-row .mp-cm { order: 3; }

  /* 2026-08-24 황수빈 — 팝업도 «오른쪽 기준» 으로. 커뮤니티가 오른쪽 끝인데
     팝업이 왼쪽 기준(left:-12px)이라 화면 밖으로 90px 나가 hover 할 때마다
     가로 스크롤바가 생겼다. main_endedit.asp 의 ⑦ 과 같은 값이다.
     ⚠ left 를 auto 로 되돌려야 한다 — left/right 가 동시에 걸리면 폭이 늘어난다. */
  .ee-hd-wide .mp-hd-pc .mp-gnb-row .mp-cm-pop { left: auto; right: -12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-08-24 황수빈 — 모바일 서브페이지 탑메뉴에 «메인과 같은» 카테고리 줄.
   값은 main_endedit.asp 의 style 블록(.ee-hd-mo …)과 1:1 이다.
   화면에 실제로 보이는 줄은 ee-nav.js 가 만드는 .ee-nav 다. 아래 nav.shop-gnb 규칙은
   그 스크립트가 오기 «전» 글자가 줄줄이 이어붙어 보이는 것을 막는 밑그림이고,
   ee-nav.js 가 뜨면 그 nav 는 display:none 으로 숨는다.
   ⚠ 이 파일은 endedit·rroys·pro2·pro3 공용이다. 게이트는 shop_header.asp 의 JSON
     mobileGnb(endedit 계열만 true) 이고, 그 값이 켜졌을 때만 shop_shell.js 가 모바일
     헤더에 nav 를 넣고 그 헤더에 .mp-hd-mgnb 를 붙인다 — 아래 규칙은 그 헤더에만 먹는다.
   되돌리기 : 이 블록만 지운다.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 메인 헤더는 아래선이 없다(.ee-hd-mo.mp-hd{box-shadow:none}). 카테고리 줄이 붙는
     화면에서만 같이 끈다 — 줄이 없는 사이트·화면의 아래선은 그대로 둔다. */
  /* ⚠ 2026-08-24 수정 : 루트(.ee-hd-mgnb)가 아니라 «줄을 실제로 가진 헤더»(.mp-hd-mgnb)에 건다.
     루트 클래스는 줄이 없는 화면(상품상세·마이·고객센터)에도 붙어 있어서, 그 화면들의
     헤더 아래선까지 같이 꺼져 있었다. */
  .mp-hd.mp-hd-mgnb { box-shadow: none; }
  .mp-hd-mgnb .ee-nav { box-shadow: none; }

  .mp-hd-mgnb nav.shop-gnb { display: flex; align-items: center; gap: 18px; height: 44px;
    padding: 0 16px; overflow-x: auto; white-space: nowrap; }
  .mp-hd-mgnb nav.shop-gnb::-webkit-scrollbar { display: none; }
  .mp-hd-mgnb nav.shop-gnb .mp-gnb-item { font-size: 14px; letter-spacing: 0.0145em; }
}

/* 2026-08-24 황수빈 — 카테고리 밴드를 안 그리는 화면(회원화면)의 PC 헤더.
   아래선은 원래 .mp-gnb-band 가 갖고 있었다 — 밴드를 빼면 헤더가 본문에 그냥 붙는다.
   되돌리기 : 이 두 줄만 지운다. */
.mp-hd-pc-bare { box-shadow: inset 0 -1px 0 var(--wds-line-neutral); }
.mp-hd-pc-bare .mp-hd-top { padding-bottom: 12px; }