/* ============================================
   Dashboard 레이아웃 셸 — A 변종 + 로그인 전용 신규 메인
   대시보드 레이아웃 정의
   - LNB(좌측 고정) + 콘텐츠 우측 시프트(--lnb-width)
   - 슬림 상단바(.c-topbar)
    토큰은 tokens.css 우선 사용.
   토큰에 없는 신규값만 본 파일 :root 에 정의(한 곳에서 관리).
   ============================================ */

:root {
  /* 사이드바 폭 — 사이드바/시프트/상단바가 모두 참조. 여기 한 값만 바꾸면 전부 반영(§7) */
  --lnb-width: 248px;

  /* 상단바 높이 = LNB 로고 존 높이 (A5) — 로고와 상단바가 같은 수평 라인에 정렬되도록 단일 토큰화 */
  --topbar-height: 70px;

  /* 신규 색상값 (tokens.css 미존재분만 추가)
     #6B7280 = 기존 --color-text-muted, #4B75F2 = --point-blue-1 → 재사용(중복 정의 금지) */
  --color-border-light: #E5E7EB;    /* LNB 우측 보더 / 상단바 구분선 / 검색 보더 */
  --color-bg-subtle: #F7F8FB;       /* nav hover / 인스타 박스 배경 */
  --color-text-faint: #9CA3AF;      /* 서브메뉴 비활성 / ig_name / placeholder */
  --color-success-green: #2E9E68;   /* 인스타 "연동 중" */
}

/* ---- 대시보드 body 마커 ---- */
body.is-dashboard {
  background: var(--color-white);
}

/* ============================================
   LNB (좌측 고정 네비)
   상세 컴포넌트 스타일은 lnb.css. 여기서는 셸 배치만 정의.
   ============================================ */
.c-lnb {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--lnb-width);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sticky-header, 800);
  background: var(--color-white);
  border-right: 1px solid var(--color-border-light);
  box-sizing: border-box;
}

/* ---- guest LNB(비로그인) — 데스크탑 숨김 (belt-and-suspenders) ----
   비로그인 데스크탑은 .c-header 풀헤더가 담당. guest LNB 는 ≤1024 우측 드로어 전용이므로 데스크탑 display:none.
   + body:has(.c-lnb:not(.c-lnb--guest)) 재스코프 / lnb.js is-dashboard 게이팅과 짝 →
   guest 렌더가 데스크탑 시프트(padding-left)·본문 정규화를 절대 트리거하지 않음. */
.c-lnb--guest { display: none; }

/* ---- 콘텐츠 우측 시프트 ----
   .c-lnb(position:fixed, 레이아웃 비점유)가 렌더된 로그인 대시보드에서 body 를 사이드바 폭만큼 우측 패딩.
   ⭐ :has(.c-lnb) — 서버가 렌더한 LNB 존재만으로 CSS 가 즉시 적용 → JS(body 클래스) 타이밍/실행 의존 제거.
      (기존 body.is-dashboard 단독 방식은 lnb.js 가 클래스를 못 붙이면 시프트 자체가 안 걸렸음)
   body.is-dashboard 는 :has 미지원 구형 브라우저 폴백(lnb.js 부여 유지). */
body:has(.c-lnb:not(.c-lnb--guest)),
body.is-dashboard {
  padding-left: var(--lnb-width);
}

/* ---- .container 스코프 카피 (common.css §2-2 와 동일 값 — 로그아웃 A 와 같은 정렬 방식) ----
   로그아웃 A 페이지는 common.css 의 .container 로 중앙정렬됨. common.css 는 글로벌 reset 위험으로
   전역 미로드라, common.css 미로드 로그인 페이지에서도 동일하게 중앙정렬되도록 reset 없이 값만 카피.
   시프트(body:has(.c-lnb:not(.c-lnb--guest)) padding-left)로 생긴 '남은 영역'(viewport - 사이드바) 안에서
   margin:0 auto 로 수평 중앙정렬 → 시안(사이드바 248 + 콘텐츠 1232가 남은 1657에서 중앙) 일치. */
/* 상단바 .container 만 정렬 카피 필요 — 본문 .container 는 common.css 가 이미 중앙정렬하므로
   (로그인 신페이지는 common.css 로드, 기존 페이지는 .com_sub_cont_wrap 사용) body:has(.c-lnb:not(.c-lnb--guest)) .container 는 제거(죽은 코드). */
.c-topbar .container,
.c-topbar__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-topbar .container,
  .c-topbar__inner.container { --c-padding: 40px; }
}
@media (min-width: 1280px) {
  .c-topbar .container,
  .c-topbar__inner.container { --c-padding: 60px; }
}

/* ---- 셸 박스모델 정규화 (스코프 한정) ----
   common.css 의 전역 `* { box-sizing: border-box }` 가 없는 페이지에서도
   LNB/상단바 내부 요소가 의도대로 계산되도록 셸 한정 border-box 적용. */
.c-lnb, .c-lnb *, .c-topbar, .c-topbar * { box-sizing: border-box; }

/* ============================================
   ⭐ 구(舊) 레이아웃 본문 래퍼 정규화 — 기존 페이지(goodsList/mypage/event 등 #wrap>.sub_wrap>.com_sub_section_wrap 구조)
   문제: 구 sub.css 의 `.com_sub_section_wrap { padding-left: 18.875em(~302px) }` 는 구 좌측 사이드바(ucSideMenuOrder)
        자리 확보용. 신 상단헤더는 header.css 의 `body:has(.c-header)` 로 이를 0 으로 리셋하지만,
        LNB(로그인 대시보드)는 .c-header 가 아닌 .c-lnb 를 렌더 → 그 리셋이 안 걸려 302px 가 잔존,
        + body:has(.c-lnb:not(.c-lnb--guest)) padding-left:248 까지 더해져 좌측 이중 오프셋(콘텐츠 우측 치우침) 발생.
   해결: 신 상단헤더와 동일한 리셋/중앙정렬을 .c-lnb 에도 적용. 좌측 시프트는 body padding(248)이 담당하므로
        .com_sub_section_wrap 의 구 좌측 여백은 0, 본문(.com_sub_cont_wrap)은 1232 중앙정렬.
   ============================================ */
body:has(.c-lnb:not(.c-lnb--guest)) .com_sub_section_wrap,
body:has(.c-lnb:not(.c-lnb--guest)) .com_sub_section_wrap.fold_lnb {
  padding-left: 0;   /* 구 사이드바 자리(302px) 무력화 — 시프트는 body padding 이 담당 */
}
@media (max-width: 1024px) {
  body:has(.c-lnb:not(.c-lnb--guest)) .com_sub_section_wrap { padding-top: 0; }   /* 구 모바일 lnb 높이(80px) 무력화 */
}

/* 본문 콘텐츠 래퍼 1232 중앙정렬 (header.css body[data-header-version="A"] 룰과 동일 값) */
body:has(.c-lnb:not(.c-lnb--guest)) .com_sub_cont_wrap,
body:has(.c-lnb:not(.c-lnb--guest)) .ig-report-wrap,
body:has(.c-lnb:not(.c-lnb--guest)) .ig-wrap {
  --c-padding: 16px;
  width: 100%;
  min-width: 0;
  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:has(.c-lnb:not(.c-lnb--guest)) .com_sub_cont_wrap,
  body:has(.c-lnb:not(.c-lnb--guest)) .ig-report-wrap,
  body:has(.c-lnb:not(.c-lnb--guest)) .ig-wrap { --c-padding: 40px; }
}
@media (min-width: 1280px) {
  body:has(.c-lnb:not(.c-lnb--guest)) .com_sub_cont_wrap,
  body:has(.c-lnb:not(.c-lnb--guest)) .ig-report-wrap,
  body:has(.c-lnb:not(.c-lnb--guest)) .ig-wrap { --c-padding: 60px; }
}

/* ============================================
   슬림 상단바 (.c-topbar) — l-dashboard 내부(시프트 영역) 상단
    검색바 규격 준용
   ============================================ */
.c-topbar {
  /* 일반 흐름(static) — 콘텐츠와 함께 스크롤되어 첫 스크롤부터 위로 사라짐(#4).
     sticky 제거(top/z-index 동반 제거)지만 sticky 도 흐름 공간을 점유했었으므로 레이아웃 시프트 없음. */
  position: static;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-light);   /* 하단 1px 구분선 */
}
.c-topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* 좌 spacer / 중앙 검색 / 우 액션 */
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-height);       /* 64 — LNB 로고 존과 동일 높이(A5) → 한 라인 정렬 */
}

/* 중앙 검색바 */
.c-topbar__search {
  grid-column: 2;
  justify-self: center;
  position: relative;
  display: flex;
  align-items: center;
  width: 480px;
  max-width: 100%;
}
.c-topbar__search-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--color-text-faint);
}
.c-topbar__search-input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 38px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);   /* 12px */
  background: var(--color-white);
  font-size: 0.9375rem;
  color: var(--color-mono-1);
  outline: none;
  transition: border-color 0.15s ease;
}
.c-topbar__search-input::placeholder { color: var(--color-text-faint); }
.c-topbar__search-input:focus { border-color: var(--point-blue-1); }

/* 우측 액션 래퍼 — 그리드 우측 배치만 담당(A3).
   장바구니/마이페이지 마크업은 header.html 로그인 액션 클래스(c-header__cart / c-header__mypage) 재사용 →
   칩 색·위치·드롭다운 스타일은 header.css 가 책임. 자체 c-topbar__action / c-topbar__cart-count 정의 제거. */
.c-topbar__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- ≤1024 LNB 드로어 토글 햄버거 (#1) ----
   기본 숨김 → 반응형 블록(≤1024)에서 display:flex. 박스 44×44(터치영역, responsive §8), 시각 라인 22×2 중앙. */
.c-topbar__hamburger {
  display: none;
  grid-column: 1;
  justify-self: start;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}
.c-topbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-mono-1);
  border-radius: 2px;
}

/* ---- ≤1024 모바일 헤더 로고(topbar) ----
   기본(데스크탑) 숨김 → 반응형 블록(≤1024)에서 좌측 노출. 비로그인 .c-header 브랜드와 동일 톤(블루 배지 + 워드마크).
   ※ 데스크탑 로그인 topbar(슬림바)에는 로고 없음 유지 → display:none 으로 ≥1025 무손상. */
.c-topbar__brand { display: none; text-decoration: none; }
.c-topbar__brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--point-blue-1);
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.c-topbar__brand-text {
  font-family: Inter, "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;   /* 20px — 비로그인 모바일 헤더(.c-header__brand-text @≤1024)와 동일 크기 */
  color: var(--point-blue-1);
  line-height: 1;
  white-space: nowrap;
}

/* LNB 드로어 백드롭 — 기본 숨김(≥1025 및 닫힘). ≤1024 에서만 오버레이로 동작(반응형 블록). */
.c-lnb-backdrop { display: none; }

/* ============================================
    반응형 (헤더 BP 1024)
   ≤1024: LNB 를 좌측 드로어로 전환 + 시프트 해제 + 햄버거 노출 (#1).
   기본 닫힘(화면 밖) → body.is-lnb-open(lnb.js) 시 슬라이드 인.
   ============================================ */
@media (max-width: 1024px) {
  /* LNB → 우측 드로어(로그인·비로그인 통일). 기본 transform(translateX(100%)) 으로 화면 우측 밖. 열림 시 is-lnb-open 으로 좌측 슬라이드 인.
     z-index 900 = sticky-header(800) 위 → 모바일 헤더바 위에 덮임. height 100dvh 로 모바일 주소창 변동 대응. */
  .c-lnb {
    display: block;
    position: fixed;
    right: 0;
    left: auto;
    top: 0;
    height: 100dvh;
    width: var(--lnb-width, 248px);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden;
    /* 우측 드로어 → 보더/그림자는 좌측(콘텐츠 향)으로. 데스크탑 .c-lnb 의 border-right 무력화. */
    border-right: none;
    border-left: 1px solid var(--color-border-light);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  }
  body.is-lnb-open .c-lnb { transform: none; }

  /* guest LNB — ≤1024 에서 드로어로 노출 (데스크탑 .c-lnb--guest{display:none} override) */
  .c-lnb--guest { display: block; }

  /* 시프트 해제 — 드로어는 오버레이라 콘텐츠를 밀지 않음 */
  body:has(.c-lnb:not(.c-lnb--guest)),
  body.is-dashboard { padding-left: 0; }

  /* 열림 시 배경 스크롤 잠금 */
  body.is-lnb-open { overflow: hidden; }

  /* ≤1024 모바일 헤더(로그인 topbar) — 한 줄: 로고 좌 / 우측 [장바구니·마이페이지·메뉴].
     검색만 숨김(드로어 상단 .c-lnb__search 로 이전). flex + brand margin-right:auto 로 우측 그룹 정렬,
     햄버거 order:1 로 액션(장바구니·마이페이지) 뒤(맨 오른쪽). grid → flex 로 전환(기존 grid-column 2줄 깨짐 수정). */
  .c-topbar__inner { display: flex; align-items: center; gap: 8px; }
  .c-topbar__brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
  .c-topbar__search { display: none; }
  .c-topbar__actions { display: flex; align-items: center; }   /* 장바구니 + 마이페이지 노출 */

  /* 햄버거 = 우측 끝(액션 뒤). ≥1025 숨김 */
  .c-topbar__hamburger { display: flex; order: 1; }

  /* 백드롭 — 기본 투명/클릭불가, 열림 시 노출. z-index 899 = 드로어 바로 아래. */
  .c-lnb-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 899;
  }
  body.is-lnb-open .c-lnb-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* prefers-reduced-motion: 드로어/백드롭 전환 제거 (responsive §8 Reduced Motion) */
@media (prefers-reduced-motion: reduce) {
  .c-lnb,
  .c-lnb-backdrop { transition: none; }
}