/* 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; }
.mp-hd-ico { width: 44px; height: 44px; display: grid; place-items: center; color: var(--wds-text); }
.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; border-radius: 1000px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--wds-text-assistive); }
.mp-search-clear[hidden] { display: 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; }
}