/* layout-header.css — 상단 헤더 전용
   header.php 와 짝. 헤더만 고칠 때 이 파일만 본다. */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-top{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px 0;
}

.brand img{
  display:block;
  width:auto;
  height:32px;
  max-width:140px;
  object-fit:contain;
  object-position:left center;
}

.search-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  height:46px;
  border:1px solid var(--line);
  border-radius:var(--r-search);
  padding:3px 4px 3px 14px;
  background:#fff;
}

.search-wrap select{
  border:0;
  outline:none;
  background:transparent;
  font-weight:700;
  font-size:14px;
  max-width:170px;
}

.search-wrap input{
  flex:1;
  border:0;
  outline:none;
  font-size:15px;
  min-width:120px;
}

.site-header .search-wrap .btn{
  flex:0 0 auto;
  width:auto;
  min-width:88px;
  height:38px;
  min-height:38px;
  padding:0 18px;
  border-radius:var(--r-search);
  font-size:14px;
  font-weight:900;
  line-height:1;
}

.site-header .btn-accent{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.site-header .btn-accent:hover{
  background:var(--accent2);
  border-color:var(--accent2);
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.icon-link,
.user-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.icon-link.is-current,
.user-btn.is-current{
  border-color:var(--accent2);
  background:var(--accent2);
  color:#fff;
}

.icon svg,
.user-btn svg{ width:18px; height:18px; }

.badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:900;
  font-size:11px;
  border:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-nav{ border-top:1px solid var(--line); }

.nav-row{
  display:grid;
  grid-template-columns:240px 1fr 60px;
  gap:14px;
  align-items:center;
  padding:10px 0;
}

.home-category-nav .nav-row{
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  padding:0;
}

.home-category-panel{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:9px 0;
}

.home-category-label{
  flex:0 0 auto;
  color:var(--accent2);
  font-size:14px;
  font-weight:900;
}

.home-category-links{
  display:flex;
  flex:1;
  gap:6px;
  min-width:0;
}

.home-category-links > a,
.home-category-links > .cat-item > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-height:34px;
  padding:7px 9px;
  border:1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  background:rgba(255,255,255,.88);
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.home-category-links > a:hover,
.home-category-links > .cat-item > a:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent) 48%, var(--line));
  background:color-mix(in srgb, var(--soft) 58%, white);
  box-shadow:0 6px 14px rgba(36,50,71,.06);
}

.home-category-nav .second-row-payment-link{
  align-self:center;
}

.header-product-category-nav .nav-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:0;
}

.header-product-category-nav .catalog-filters,
.header-product-category-nav .detail-category-panel{
  position:static;
  z-index:auto;
  width:auto;
  min-width:0;
  margin:0;
  padding:9px 0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.header-product-category-nav .catalog-filters::before,
.header-product-category-nav .detail-category-panel::before{
  display:none;
}

.header-product-category-nav .filter-row,
.header-product-category-nav .detail-filter-row{
  gap:12px;
}

.header-product-category-nav .category-list,
.header-product-category-nav .detail-category-bar{
  display:flex;
  flex:1;
  flex-wrap:nowrap;
  gap:6px;
  min-width:0;
}

.header-product-category-nav .category-chip,
.header-product-category-nav .detail-category-chip{
  flex:1 1 auto;
  min-height:34px;
  padding:7px 9px;
  white-space:nowrap;
}

.header-product-category-nav .second-row-payment-link{
  align-self:center;
}

.mega-wrap{ position:relative; }

.mega-trigger{
  width:100%;
  height:40px;
  border-radius:var(--r-soft);
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
  color:var(--ink);
}

.caret{
  width:14px;
  height:14px;
  opacity:.75;
}

.mega-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:min(760px, calc(100vw - 40px));
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-soft);
  box-shadow:0 18px 40px rgba(36,50,71,.10);
  display:none;
  overflow:hidden;
}

.mega-wrap.is-open .mega-panel{ display:flex; }

.mega-left{
  width:250px;
  background:color-mix(in srgb, var(--soft) 55%, white);
  border-right:1px solid var(--line);
  padding:10px;
}

.mega-main{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:12px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:800;
  color:var(--ink);
}

.mega-main.is-active{
  background:color-mix(in srgb, var(--soft) 72%, white);
  color:var(--accent2);
}

.mega-right{
  flex:1;
  padding:14px;
  display:grid;
  gap:12px;
}

.mega-sub{
  display:none;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}

.mega-sub.is-active{ display:grid; }

.mega-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.mega-hint{
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  padding:8px 10px;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}

.second-row-payment-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 14px;
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius:999px;
  background:#fff;
  color:var(--accent2);
  font-weight:900;
  white-space:nowrap;
}

.second-row-payment-link:hover{
  background:color-mix(in srgb, var(--soft) 52%, white);
}

.second-row-payment-link.is-active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.second-row-payment-link.is-active:hover{
  border-color:var(--accent2);
  background:var(--accent2);
  color:#fff;
}

@media (min-width: 981px){
  .site-header.has-top-user .nav-row > .nav-links.has-second-row-payment{
      grid-column:3;
      justify-content:flex-end;
    }
}

.nav-link.is-active{
  background:color-mix(in srgb, var(--accent) 12%, white);
  color:var(--accent2);
}

.nav-drop{ position:relative; }

.nav-drop::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}

.nav-drop-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  min-width:180px;
  display:none;
  box-shadow:0 16px 32px rgba(36,50,71,.10);
}

.nav-drop:hover .nav-drop-menu{ display:block; }

.nav-drop-menu a,
.mega-sub a,
.user-menu a{
  display:block;
  padding:10px 10px;
  border-radius:8px;
  font-weight:700;
  color:var(--ink);
}

.nav-drop-menu a:hover,
.mega-sub a:hover,
.user-menu a:hover{
  background:color-mix(in srgb, var(--soft) 55%, white);
  color:var(--accent2);
}

.user-menu-action{
  display:block;
  width:100%;
  padding:10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  font:inherit;
  font-weight:700;
}

.user-menu-action:hover{
  background:color-mix(in srgb, var(--soft) 55%, white);
  color:var(--accent2);
}

.user-menu-status{
  margin:4px 8px 8px;
  padding:9px 10px;
  border-radius:6px;
  background:#FEF3F2;
  color:#B42318;
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}

.user-area{
  position:relative;
  display:flex;
  justify-content:flex-end;
}

.user-area::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}

.user-btn{
  cursor:pointer;
}

.user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:120;               /* 카테고리 드롭다운(110)보다 위 — 겹칠 때 유저메뉴 우선 */
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  min-width:200px;
  display:none;
  box-shadow:0 16px 32px rgba(36,50,71,.10);
}

.user-area:hover .user-menu,
.user-area:focus-within .user-menu{ display:block; }

.user-area.is-open .user-menu{ display:block; }

.user-menu-title{
  font-size:12px;
  color:var(--muted);
  font-weight:900;
  padding:10px 10px 6px;
}

.user-menu-sep{
  height:1px;
  background:var(--line);
  margin:8px 6px;
}

.page-top{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.86);
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:16px 0;
  font-size:13px;
  color:var(--muted);
}

.breadcrumb strong{ color:var(--ink); }

.breadcrumb a:hover{ color:var(--ink); }

.page-jump-controls{
  position:fixed;
  z-index:70;
  top:50%;
  right:max(clamp(10px, 1.2vw, 20px), env(safe-area-inset-right, 0px));
  display:grid;
  gap:7px;
  transform:translateY(-50%);
}

.page-jump-button{
  appearance:none;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--accent2);
  cursor:pointer;
  box-shadow:0 7px 20px rgba(31,43,58,.14);
  backdrop-filter:blur(9px);
  touch-action:manipulation;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}

.page-jump-button svg{
  width:19px;
  height:19px;
}

.page-jump-button:not(:disabled):hover{
  transform:translateX(-2px);
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  box-shadow:0 9px 24px color-mix(in srgb, var(--accent) 24%, rgba(31,43,58,.14));
}

.page-jump-button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 36%, transparent);
  outline-offset:3px;
}

.page-jump-button:active:not(:disabled){
  transform:translateX(-1px) scale(.96);
}

.page-jump-button:disabled{
  opacity:.34;
  cursor:default;
  box-shadow:0 4px 12px rgba(31,43,58,.08);
}

@media (max-width: 560px){
  .page-jump-controls{
      right:max(0px, env(safe-area-inset-right, 0px));
      gap:5px;
    }
  .page-jump-button{
      width:30px;
      height:30px;
      background:rgba(255,255,255,.88);
    }
  .page-jump-button svg{
      width:15px;
      height:15px;
    }
}

@media (prefers-reduced-motion: reduce){
  .page-jump-button{
      transition:none;
    }
}

@media print{
  .page-jump-controls{
      display:none !important;
    }
}

@media (max-width: 980px){
  .header-top{
      grid-template-columns:1fr auto;
    }
  .search{ display:none; }
  .nav-row{
      grid-template-columns:1fr;
    }
  .nav-row:has(.nav-links.has-second-row-payment){
      grid-template-columns:minmax(0, 1fr) auto;
    }
  .nav-links.has-second-row-payment{
      display:flex;
      justify-content:flex-end;
    }
  .nav-links.has-second-row-payment > :not(.second-row-payment-link){
      display:none;
    }
  .mega-panel{
      position:static;
      width:100%;
      margin-top:8px;
    }
  .home-category-nav .nav-row{
      grid-template-columns:minmax(0, 1fr) auto;
      gap:8px;
    }
  .home-category-panel{
      display:grid;
      gap:6px;
      overflow:hidden;
      padding:8px 0;
    }
  .home-category-links{
      overflow-x:auto;
      padding-bottom:3px;
      scrollbar-width:thin;
    }
  .home-category-links > a,
  .home-category-links > .cat-item{
      flex:0 0 auto;
    }
  .header-product-category-nav .nav-row{
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
    }
  .header-product-category-nav .catalog-filters,
    .header-product-category-nav .detail-category-panel{
      overflow:hidden;
      padding:8px 0;
    }
  .header-product-category-nav .filter-row,
    .header-product-category-nav .detail-filter-row{
      display:grid;
      gap:6px;
    }
  .header-product-category-nav .category-list,
    .header-product-category-nav .detail-category-bar{
      overflow-x:auto;
      padding-bottom:3px;
      scrollbar-width:thin;
    }
  .header-product-category-nav .category-chip,
    .header-product-category-nav .detail-category-chip{
      flex:0 0 auto;
    }
.cat-item > a{ width:100%; }   /* ☰ 펼침 그리드에서 셀 꽉 채움 */	
}

@media (max-width: 560px){
  .header-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
  .header-top .brand{
      flex:0 0 auto;
    }
  .header-top .brand img{
      height:28px;
    }
  .header-actions{
      flex:0 0 auto;
      margin-left:auto;
    }
}

@media (max-width: 760px){
  .mega-panel{
      flex-direction:column;
    }
  .mega-left{
      width:100%;
      border-right:0;
      border-bottom:1px solid var(--line);
    }
  .mega-sub{
      grid-template-columns:1fr;
    }
  .mega-foot{
      flex-direction:column;
      align-items:flex-start;
    }
}
/* ------------------------------------------------------------
   여백 조정 — 목업 대비 압축
   수치는 여기서만 만진다. 위쪽 원본 규칙은 건드리지 말 것.
   ------------------------------------------------------------ */
.header-top{ padding:10px 0; gap:12px; }

/* 검색: 높이 줄이고 버튼을 오른쪽 끝에 붙인다 */
.search-wrap{ height:42px; padding:3px 3px 3px 16px; gap:8px; }
.site-header .search-wrap .btn{ height:36px; min-height:36px; min-width:82px; padding:0 16px; }

/* 2행 카테고리 */
.home-category-panel{ padding:6px 0; gap:10px; }
.home-category-links{ gap:5px; }
.home-category-links > a,
.home-category-links > .cat-item > a{ min-height:30px; padding:5px 8px; }
/* ============================================================
   모바일 카테고리 토글 / 검색 노출
   목업에는 없던 부분. 목업은 모바일에서
     · 검색창을 숨기고(.search{display:none})
     · 카테고리는 가로 스크롤로 처리
   했는데, 검색을 살리고 카테고리는 ☰ 로 접는다.
   ============================================================ */

/* ☰ — 데스크탑에서는 숨긴다 */
.cat-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px; height:34px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-soft);
  background:#fff;
  color:var(--ink);
  cursor:pointer;
}
.cat-toggle svg{ width:20px; height:20px; }

/* 맞춤결제를 오른쪽 끝으로 (목업은 별도 그리드 칸이었음) */
.home-category-links .second-row-payment-link{ margin-left:auto; }

@media (max-width:980px){
  /* 검색 되살리기 — 로고 아래 한 줄 차지 */
  .search{ display:block; }
  .header-top{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand actions"
      "search search";
    row-gap:10px;
  }
  .brand         { grid-area:brand; }
  .header-actions{ grid-area:actions; }
  .search        { grid-area:search; }

  /* ☰ 노출, '카테고리' 글자는 숨김 */
  .cat-toggle          { display:inline-flex; }
  .home-category-label { display:none; }

  /* 링크는 기본 접힘 → ☰ 누르면 펼침 */
  .home-category-panel{ grid-template-columns:auto; justify-content:start; }
  .home-category-links{ display:none; overflow:visible; }
  .home-category-panel.is-open .home-category-links{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:6px;
    width:100%;
    padding:8px 0 4px;
  }
  .home-category-links .second-row-payment-link{ margin-left:0; }
}

/* ------------------------------------------------------------
   현재 보고 있는 대분류 강조
   body.cat-{id} 가 --accent 를 이미 그 카테고리 색으로 바꿔놨으므로
   여기서는 색을 지정하지 않고 var(--accent) 만 쓴다.
   → 카테고리가 늘어도 이 규칙은 손댈 필요 없음.
   ------------------------------------------------------------ */
.home-category-links > a.is-active,
.home-category-links > .cat-item > a.is-active{
border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.home-category-links > a.is-active:hover,
.home-category-links > .cat-item > a.is-active:hover{
background:var(--accent2);
  border-color:var(--accent2);
  transform:none;              /* 활성 항목은 뜨지 않게 */
}

/* ── 대분류 드롭다운 (2차메뉴) — 데스크탑 전용 ── */
.cat-item{
  position:relative;          /* 드롭다운 기준점 */
  display:flex;
  flex:1 1 auto;              /* 기존에 a 가 하던 칸 배분을 래퍼가 대신 */
  min-width:0;
}
.cat-item > a{
  flex:1;                     /* 래퍼 안을 꽉 채움 */
}
.cat-dropdown{
  position:absolute;
  top:100%;
  left:0;
  z-index:110;                /* sticky 헤더(100) 위 */
  display:none;
  min-width:150px;
  padding:4px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 14px 30px rgba(36,50,71,.14);
}
/* hover 로 열림 — a 와 패널 사이 틈에서 닫히지 않게 item 전체에 hover */
.cat-item:hover .cat-dropdown{
  display:flex;
  flex-direction:column;
}
.cat-dropdown a{
  display:block;
  text-align:left;
  padding:6px 10px;           /* 대분류(30px)와 비슷한 밀도로 압축 */
  font-size:12px;             /* 대분류와 동일 */
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;         /* 메뉴명 줄바꿈 방지 */
}
.cat-dropdown a:hover{
  background:var(--soft);
  color:var(--accent2);
}
/* ── 2차 항목 래퍼 + 3차 옆 패널 ── */
.cat-sub-item{ position:relative; }
.cat-sub-item > a{ display:block; }
/* 하위 있는 2차: 오른쪽 › 표시 */
.cat-sub-item.has-sub > a::after{
  content:"›";
  float:right;
  margin-left:10px;
  opacity:.55;
  font-weight:900;
}
/* 3차 패널 — 2차 오른쪽에 붙는다 */
.cat-dropdown-sub{
  position:absolute;
  top:-5px;              /* 패널 padding 만큼 올려 첫 항목 높이 맞춤 */
  left:100%;
  z-index:111;           /* 2차 패널(110) 위 */
  display:none;
  min-width:150px;
  padding:4px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 14px 30px rgba(36,50,71,.14);
}
.cat-sub-item:hover .cat-dropdown-sub{
  display:flex;
  flex-direction:column;
}

/* 모바일(☰ 토글 모드)에서는 드롭다운 숨김 — 랜딩의 '주요 구성'이 대신함 */
@media (max-width: 980px){
  .cat-dropdown{ display:none !important; }
}