/* ======================== */
/* 금찌 공통 CSS (수정본: 검색 아이콘 클릭 우선권 + 레이어 스택 정리) */
/* ======================== */

/* 색상 변수 (var(--gray) 사용 대비) */
:root {
  --gray: #999999;
}

/* 헤더 검색 버튼이 어떤 sticky 요소보다 위에 오도록
   + 실제 사용하는 .searchBtn 클래스도 함께 올림 */
#header .btn-search,
#header .btn_sch,
#header .ic_search,
#header .searchBtn {
  position: relative;
  z-index: 1300;   /* 최상단 */
  pointer-events: auto;
}

/* 헤더/상단바 자체도 스택 생성 (z-index가 먹히도록) */
#header,
#gnb {
  position: relative; /* 기존 레이아웃 유지 (fixed로 바꾸지 않음) */
  z-index: 1200;      /* 카테고리/상단띠보다 위 */
}

/* 검색 레이어가 다른 UI보다 위로 떠야 함 */
#header .searchArea {
  position: absolute; /* 헤더 바로 아래에 뜨는 현재 구조 유지 */
  left: 0; right: 0; top: 52px; /* 필요 시 헤더 높이에 맞춰 조정 */
  z-index: 1250;      /* 헤더(1200)보다 약간 높게 */
}

/* BEST/카테고리 상단바는 검색보다 아래로 (기존 유지 + 확인용) */
#product-list .h_title,
.cate-wrap,
#header.cate_header {
  position: relative;
  z-index: 200; /* 헤더/검색보다 낮게 */
}

/* 기본 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
}
html, body {
  font-family: 'Pretendard', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  background: #fff;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 공통 유틸 */
.dn { display: none !important; }
.txt-center { text-align: center; }
.fl { float: left !important; }
.fr { float: right !important; }
.mt5 { margin-top: 5px; }

/* 버튼 공통 */
.btn {
  display: inline-block;
  padding: 10px 15px;
  text-align: center;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.btn_Black { background: #000; color: #fff; }
.btn_White { background: #fff; border: 1px solid #ccc; color: #333; }

/* 마스크 */
#mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: none;
}

/* 컨테이너 */
#wrap { min-width: 320px; overflow: hidden; }

/* 사이드메뉴 */
aside {
  position: fixed;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  z-index: 1001; /* 헤더/검색(1200~)보다 낮음 → 검색이 항상 위 */
}
aside .asideTop {
  position: relative;
  height: 46px;
  background: #000;
}
aside .asideTop .logo img { height: 30px; }
aside .asideClose {
  position: absolute;
  top: 7px; left: 5px;
  color: #fff;
  font-size: 20px;
}
aside nav li a {
  display: block;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

/* swiper 버튼 위치 공통 */
.swiper-button-next, .swiper-button-prev {
  width: 24px;
  height: 24px;
}

/* 모바일 상품 리스트 기본 구조 */
.list_shopping2x ul.items {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 0; /* 세로 간격 제거 */
}
.list_shopping2x .item-list {
  width: 50%;
  padding: 0 1px;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 4px; /* 간격 축소 */
}
.item-list .thumb { position: relative; }
.item-list .thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.item-list .desc {
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.3s;
}
.item-list .desc p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
}
.item-list.hover .desc { opacity: 1; }
/* hover 배경 제거 */
.item-list.hover::before { display: none !important; }

/* 상품카드 - 상품명/서브명/가격 공통 간격 */
.product-item .item-list .prd-info .prd-name a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}
.product-item .item-list .prd-info .prd-subname a {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.3;
  margin-bottom: 6px;
}
.product-item .item-list .prd-info .prd-price {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0;
}
.product-item .item-list .prd-info .prd-price del {
  font-size: 11px;
  margin-left: 2px;
  color: var(--gray);
  font-weight: 400;
}

/* 상품카드 오버레이(호버) 최적화 */
.product-item .item-list .prd-info{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:10px 8px 8px;
  min-height:40%;
}
.product-item .item-list .prd-info .prd-name a{
  line-height:1.28;
  margin:0 0 2px;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2;
}
.product-item .item-list .prd-info .prd-subname a{
  line-height:1.22;
  margin:0 0 4px;
  opacity:.9;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2;
}
.product-item .item-list .prd-info .prd-price{
  margin-top:auto;
  padding-bottom:2px;
  line-height:1.25;
}
.product-item .item-list .prd-info .prd-price del{
  font-size:11px; margin-left:2px; opacity:.9;
}
.product-item .item-list:hover .prd-info,
.product-item .item-list.hover .prd-info{ padding-bottom:6px; }
.product-item .item-list:hover .prd-info .prd-subname a,
.product-item .item-list.hover .prd-info .prd-subname a{ -webkit-line-clamp:2; }

/* [추가] 탭 상품(.list_shopping2x .productCard) 오버레이/간격/가격 하단 고정 */
.list_shopping2x .productCard { position: relative; overflow: hidden; }
.list_shopping2x .productCard .thumb img {
  width: 100%; display: block; border-radius: 0;
  aspect-ratio: 195/260; object-fit: cover;
}
.list_shopping2x .productCard .desc{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.40); color: #fff;
  padding: 10px 8px 8px;
  display: flex; flex-direction: column; justify-content: flex-start;
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.list_shopping2x .productCard:hover .desc,
.list_shopping2x .productCard.hover .desc{
  opacity: 1; transform: translateY(0);
}
.list_shopping2x .productCard .desc .name{
  margin: 0 0 2px; line-height: 1.28;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 2;
}
.list_shopping2x .productCard .desc .code{
  margin: 0 0 4px; line-height: 1.22; opacity: .9;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 2;
}
.list_shopping2x .productCard .desc .price{
  margin-top: auto; padding-bottom: 2px;
  line-height: 1.25; font-weight: 600;
}
.list_shopping2x .productCard .desc .price del{
  font-size: 11px; margin-left: 2px; opacity: .9;
}
.list_shopping2x .productCard:hover .desc { padding-bottom: 6px; }
.list_shopping2x .productCard.hover  .desc { padding-bottom: 6px; }

/* [메인 전용] 탭 상품 오버레이 정리 */
#section3 .list_shopping2x .productCard { position: relative; overflow: hidden; }
#section3 .list_shopping2x .productCard .thumb img{
  width:100%; display:block; border-radius:0 aspect-ratio:195/260; object-fit:cover;
}
#section3 .list_shopping2x .productCard .desc{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.40); color:#fff;
  padding:10px 8px 8px;
  display:flex; flex-direction:column; justify-content:flex-start;
  opacity:0; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; min-height:40%;
}
#section3 .list_shopping2x .productCard:hover .desc,
#section3 .list_shopping2x .productCard.hover .desc{ opacity:1; transform:translateY(0); }
#section3 .list_shopping2x .productCard .desc .name{
  margin:0 0 2px; line-height:1.28;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2; word-break:break-all;
}
#section3 .list_shopping2x .productCard .desc .code{
  margin:0 0 4px; line-height:1.22; opacity:.9;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:2; word-break:break-all;
}
#section3 .list_shopping2x .productCard .desc .price{
  margin-top:auto; padding-bottom:2px; line-height:1.25; font-weight:600;
}
#section3 .list_shopping2x .productCard .desc .price del{
  font-size:11px; margin-left:2px; opacity:.9;
}
#section3 .list_shopping2x .productCard:hover .desc,
#section3 .list_shopping2x .productCard.hover .desc{ padding-bottom:6px; }


/* =========================================
   [카테고리 전용 패치] 검색 아이콘 클릭 막힘 해결
========================================= */
#productClass #header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4000;
}
#productClass #gnb{ position: relative; z-index: 4001; }

#productClass #gnb .icon.searchBtn,
#productClass #header .searchBtn,
#productClass #header .btn-search,
#productClass #header .btn_sch,
#productClass #header .ic_search{
  position: relative;
  z-index: 4002;
  pointer-events: auto;
}

#productClass .cate-wrap,
#productClass .h_title,
#productClass .best_sec_inner{
  position: relative;
  z-index: 1000;  /* 헤더보다 낮게 */
}

#productClass #header .searchArea{
  position: fixed;
  top: 52px; left: 0; right: 0;
  z-index: 4500;
  display: none;
}

/* 헤더를 fixed로 올렸으니 본문 밀어주기 */
#productClass{ padding-top: 52px; }


/* =========================================
   [추가] 모바일 상품 간격 더 줄이기 (2x/3x 공통)
   - 위아래(행 간격): 2px
   - 좌우(열 간격): 1px (각 카드 좌/우 0.5px씩)
   ========================================= */

/* 행/열 간격을 강제로 낮춤 */
.list_shopping2x ul.items,
.list_shopping3x ul.items {
  gap: 0 !important;            /* 혹시 gap이 잡혀있으면 제거 */
  margin: 0 -0.5px !important;  /* 좌우 패딩 0.5px 보정 */
}

/* 좌우 간격(열 간격) */
.list_shopping2x .items > li,
.list_shopping3x .items > li,
.list_shopping2x .item-list,
.list_shopping3x .item-list {
  padding: 0 0.5px !important;  /* 좌/우 0.5px */
}

/* 위아래 간격(행 간격) */
.list_shopping2x .items > li,
.list_shopping3x .items > li,
.list_shopping2x .item-list,
.list_shopping3x .item-list {
  margin-bottom: 2px !important; /* 행 간격 2px */
}

/* 이미지와 텍스트 사이 여백도 살짝 축소(옵션) */
.list_shopping2x .productCard .desc,
.list_shopping3x .productCard .desc,
.item-list .desc {
  margin-top: 4px !important;
}


/* 회원가입 전 구간(약관/인증/입력/완료/수정) 헤더 겹침 통합 해결 */
@media (max-width: 980px){
  :root{ --gnb-h: 56px; } /* 헤더 실제 높이에 맞추기(52~60px 권장) */

  /* 메이크샵에서 자주 쓰이는 회원가입/수정 래퍼들을 통합 타겟 */
  #join, 
  #join_terms, 
  #join_agree, 
  #join_auth, 
  #join_ok, 
  #member_join, 
  #member_modify,
  #member_edit,
  .join,             /* 일부 스킨은 클래스만 존재 */
  .joinWrap,
  #joinWrap {
    padding-top: var(--gnb-h) !important;
    box-sizing: border-box;
  }

  /* 페이지 첫 블록이 붙어버리는 경우 대비 가드 */
  #join > *:first-child,
  #member_join > *:first-child,
  #member_modify > *:first-child,
  .join > *:first-child,
  .joinWrap > *:first-child {
    margin-top: var(--gnb-h) !important;
  }

  /* 상단 단계 표시바가 있으면 헤더 아래에 고정되도록 (있을 때만 적용) */
  .sequence{
    position: sticky;
    top: var(--gnb-h);
    z-index: 1000;
    background: inherit;
  }
}


/* =========================================================
   [GUMZZI] 회원가입 전 구간 헤더(fixed) 겹침 통합 해결 패치
   - 유형선택(.sns-join/.join-type)  |  약관/인증/입력/완료/수정(#join 계열)
   - iPhone 노치 대응, 단계바/레이어도 헤더 아래로 정렬
   - 필요 시 --gnb-h만 숫자 조정(52~60px 권장)
   ========================================================= */
@media (max-width: 980px){
  :root{
    --gnb-h: 56px; /* 헤더 실제 높이에 맞춰 52~60px로 조절 */
  }

  /* 1) #join 계열 페이지(약관/인증/입력/완료/수정)   페이지 전체를 아래로 밀기 */
  #join,
  #join_terms, 
  #join_agree, 
  #join_auth, 
  #join_ok, 
  #member_join, 
  #member_modify,
  #member_edit,
  .join, 
  .joinWrap,
  #joinWrap{
    padding-top: calc(var(--gnb-h) + env(safe-area-inset-top)) !important;
    box-sizing: border-box;
  }

  /* 2) 회원가입 ‘유형 선택’ 첫 화면   #join이 없고 #container만 있을 때 처리
        (#container 바로 안의 첫 블럭이 .sns-join 또는 .join-type인 경우) */
  #container > .sns-join:first-child,
  #container > .join-type:first-child{
    margin-top: calc(var(--gnb-h) + env(safe-area-inset-top)) !important;
  }

  /* 3) 상단 단계 표시바(있을 때만)   헤더 바로 아래에 고정되도록 */
  .sequence{
    position: sticky;
    top: calc(var(--gnb-h) + env(safe-area-inset-top));
    z-index: 1000;
    background: inherit;
  }

  /* 4) 약관/주소 등 레이어/팝업이 absolute로 뜨는 스킨 보호
        (탑이 0으로 고정되어 헤더 뒤로 숨는 경우 보정) */
  #join .layer-pop,
  #join .layer-pop-join,
  #join .layerArea .layer-pop{
    margin-top: var(--gnb-h) !important; /* 레이어가 화면 상단에 붙는 스킨 대비 */
  }
  #join .layer,
  #addrSearch{
    top: auto; /* 혹시 top:0 강제 스킨이면 해제 */
  }
}


/* -------------------------------------------------------
   [공통 추가] GUMZZI 게시판 공통 스타일 & 헤더 가림 현상 Fix
   - 대상: 리뷰/문의 등 보드 리스트/뷰/쓰기 전역
   - 파일: main.css 또는 공통 CSS 맨 아래 "추가"만
------------------------------------------------------- */

/* 1) 고정 헤더 높이 변수 (필요시 숫자만 바꿔도 전체 반영) */
:root{
  --gz-header-h: 56px;   /* 모바일/PC 각각 쓰면 미디어쿼리로 분기 가능 */
}

/* 2) 상단 고정 헤더에 가려짐 방지: 게시판 메인 영역에 여백 부여 */
main[id$="board-list"],
main[id$="board-view"],
main[id$="board-write"]{
  /* JS에서 동적 계산해주지만, JS 실패 대비 기본값 세이프가드 */
  padding-top: var(--gz-header-h);
}

/* 3) 글쓰기 버튼(상단/하단 공통) 통일 스타일 */
#review-board-list .h_title .btn_Red,
#review-board-list .boardWrite .btn_Red,
[id$="board-list"] .h_title .btn_Red,
[id$="board-list"] .boardWrite .btn_Red{
  display:inline-block;
  height:36px; line-height:36px;
  padding:0 14px;
  background:#e60023;          /* 빨강 바탕 */
  color:#fff;                   /* 흰 글씨 */
  border:none; border-radius:6px;
  font-weight:600; font-size:14px;
  text-align:center;
}

/* 상단 타이틀 우측 정렬은 유지하되 간격 정돈 */
#review-board-list .h_title .btn_Red,
[id$="board-list"] .h_title .btn_Red{
  float:right; margin-top:-2px; margin-left:6px;
}

/* '전체' 버튼(회색 테두리)도 정돈 */
#review-board-list .h_title .all-board-list,
[id$="board-list"] .h_title .all-board-list{
  height:36px; line-height:34px; width:auto;
  padding:0 12px;
  border:1px solid #c7c7c7; border-radius:6px;
  color:#333; background:#fff; text-align:center;
  float:right; margin-top:-2px;
}

/* 4) 하단 페이징 + 글쓰기 중앙 정렬 */
#review-board-list .paging,
[id$="board-list"] .paging{
  display:flex; gap:6px;
  justify-content:center; align-items:center;
  padding:16px 10px 24px;
}

/* 페이징 버튼 스타일 */
#review-board-list .paging a,
[id$="board-list"] .paging a{
  display:inline-block;
  min-width:32px; height:32px; line-height:30px;
  padding:0 8px;
  border:1px solid #ddd; border-radius:6px;
  text-align:center; font-size:13px; color:#333;
  background:#fff;
}

/* 현재 페이지 강조 */
#review-board-list .paging a.now,
[id$="board-list"] .paging a.now{
  border-color:#e60023; color:#e60023; font-weight:700;
}

/* 5) 목록 행 기본 여백/가독성 정리(필요 최소만) */
#review-board-list .boardList li,
[id$="board-list"] .boardList li{
  padding:12px 10px; line-height:21px;
}

/* 6) 공지 블럭 상단 보더 유지 */
#review-board-list .notice,
[id$="board-list"] .notice{ border-top:2px solid #464646; }


/* ================================
   게시판 글쓰기 버튼 스타일 (공통)
   ================================ */

/* 상단 글쓰기 (빨강 유지) */
#review-board-list .h_title .btn_Red,
[id$="board-list"] .h_title .btn_Red {
  background:#e60023;   /* 빨강 */
  color:#fff;
  border:none;
  border-radius:6px;
  height:36px; line-height:36px;
  padding:0 14px;
  font-weight:600; font-size:14px;
}

/* 하단 글쓰기 (검정 바탕 + 흰 글씨, 중앙 정렬) */
#review-board-list .boardWrite,
[id$="board-list"] .boardWrite {
  text-align:center;   /* 가운데 정렬 */
  margin-top:20px;
}

#review-board-list .boardWrite .btn_Red,
[id$="board-list"] .boardWrite .btn_Red {
  display:inline-block;
  background:#000;     /* 검정 */
  color:#fff;          /* 흰 글씨 */
  border:none;
  border-radius:6px;
  height:40px; line-height:40px;
  padding:0 18px;
  font-weight:600; font-size:14px;
}


/* ================================
   게시판 상단 영역 정리
================================ */

/* 상단 글쓰기/전체 버튼 숨김 */
#review-board-list .h_title .btn_Red,
#review-board-list .h_title .all-board-list {
  display:none !important;
}

/* 게시판 타이틀(h3) 하단 여백 */
#review-board-list .h_title {
  margin-bottom: 12px;
}

/* 검색영역 박스화 */
#review-board-list .search-wrap {
  background:#000;         /* 검정 바탕 */
  padding:12px 10px;
  border-radius:6px;
  margin-bottom: 15px;     /* 아래쪽 여백 */
}

/* 검색 항목 배치 */
#review-board-list .item-search {
  display:flex;
  gap:6px;
}

/* 검색 select, input 공통 */
#review-board-list .item-search select,
#review-board-list .item-search input[type="text"] {
  flex:1;
  height:34px;
  border:none;
  border-radius:4px;
  padding:0 8px;
  font-size:13px;
  box-sizing:border-box;
}

/* 검색 버튼 */
#review-board-list .item-search .btn_Grey {
  background:#e60023;    /* 빨강 버튼 */
  color:#fff;
  border:none;
  border-radius:4px;
  height:34px; line-height:34px;
  padding:0 12px;
  font-weight:600;
}


/* -----------------------------------------------
   [공통 추가] 게시판 글쓰기 화면 정리 (깨짐/정렬/버튼/업로드)
   - 대상: main[id$="board-write"] 전역
----------------------------------------------- */

/* 1) 입력 UI 기본 리셋 & 가독성 */
main[id$="board-write"] input[type="text"],
main[id$="board-write"] input[type="password"],
main[id$="board-write"] textarea,
main[id$="board-write"] select{
  width:100%;
  max-width:100%;
  height:36px;
  line-height:36px;
  padding:0 10px;
  box-sizing:border-box;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
  font-size:14px;
  color:#222;
}

/* 텍스트에어리어는 넓게 */
main[id$="board-write"] textarea{
  min-height:260px;       /* ← “안녕하세요~” 박스 더 크게 */
  line-height:1.6;
  padding:12px 10px;
  resize:vertical;
}

/* 라벨/필드 간격 */
main[id$="board-write"] .row,
main[id$="board-write"] .field,
main[id$="board-write"] .form-row{
  margin-bottom:12px;
}

/* 2) 파일 업로드: 가짜 경로 인풋 숨김(있다면) */
main[id$="board-write"] input[type="text"].file,
main[id$="board-write"] input[type="text"].file-path,
main[id$="board-write"] .MS_input_file_text,
main[id$="board-write"] .upload-path{
  display:none !important;   /* 아래 “작은 긴 박스” 제거 */
}

/* 실제 파일 버튼 형태 통일 */
main[id$="board-write"] input[type="file"]{
  display:inline-block;
  width:auto;
  padding:6px 0;
  border:none;
  background:transparent;
  font-size:13px;
}

/* 파일 영역 컨테이너(있으면) */
main[id$="board-write"] .file-wrap,
main[id$="board-write"] .attach,
main[id$="board-write"] .photo,
main[id$="board-write"] .upfile{
  background:#f7f7f7;
  border:1px dashed #ddd;
  border-radius:6px;
  padding:10px;
}

/* 3) 하단 버튼(글쓰기/목록) 중앙 + 검정박스/흰글씨 */
main[id$="board-write"] .btn-area,
main[id$="board-write"] .btns,
main[id$="board-write"] .boardWrite{
  text-align:center;
  margin-top:18px;
}

main[id$="board-write"] .btn,
main[id$="board-write"] .btn_Red,
main[id$="board-write"] .btn_write,
main[id$="board-write"] .btn_list{
  display:inline-block;
  min-width:96px;
  height:40px; line-height:40px;
  padding:0 18px;
  border:none;
  border-radius:8px;
  background:#000;   /* 검정 박스 */
  color:#fff;        /* 흰 글씨 */
  font-weight:700; font-size:14px;
  margin:0 4px;
  text-align:center;
}

/* 목록 버튼 보조 톤(원하면 회색으로) */
/*
main[id$="board-write"] .btn_list{ background:#444; }
*/

/* 4) 상단 영역 여백 정리(타이틀과 폼 사이 간격 확보) */
main[id$="board-write"] .h_title{ margin-bottom:12px; }
main[id$="board-write"] .search-wrap{ display:none !important; } /* 글쓰기에 검색이 뜬 경우 숨김 */

/* 5) 필드 라벨이 좌우로 붙어 깨질 때 대비 */
@media (min-width:768px){
  main[id$="board-write"] .row.inline,
  main[id$="board-write"] .field.inline{
    display:flex; gap:10px; align-items:center;
  }
  main[id$="board-write"] .row.inline > label,
  main[id$="board-write"] .field.inline > label{
    width:120px; flex:0 0 120px;
  }
  main[id$="board-write"] .row.inline > *:not(label),
  main[id$="board-write"] .field.inline > *:not(label){
    flex:1 1 auto;
  }
}


/* -----------------------------------------------
   [공통 추가] 게시판 글쓰기 레이아웃 정리
   - 사진첨부 버튼 + 긴 네모박스(업로드 트리거)를 한 줄 정렬
   - 하단 [글쓰기][목록] 중앙 + 검정박스/흰글씨
------------------------------------------------ */
main[id$="board-write"] textarea{
  min-height:260px; line-height:1.6; padding:12px 10px;
  border:1px solid #ddd; border-radius:6px; box-sizing:border-box;
}

/* 업로드 한 줄 정렬 */
.gz-upload-row{ display:flex; gap:8px; align-items:center; margin-top:10px; }

/* 왼쪽: 사진첨부 버튼(검정) */
.gz-file-btn{
  position:relative; overflow:hidden;
  display:inline-block;
  height:36px; line-height:36px; padding:0 14px;
  background:#000; color:#fff; border-radius:6px;
  font-weight:600; white-space:nowrap;
}
.gz-file-btn input[type="file"]{
  position:absolute; left:0; top:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}

/* 오른쪽: 긴 네모박스(업로드 트리거) */
.gz-upload-trigger{ flex:1; }
.gz-upload-trigger input[type="text"]{
  display:block !important;    /* 혹시 숨김 되어 있던 경우 복구 */
  width:100%; height:36px; line-height:36px;
  padding:0 10px; border:1px solid #ddd; border-radius:6px;
  box-sizing:border-box; background:#fff; color:#222;
}

/* 하단 버튼 중앙 + 검정 박스 */
.gz-centered-btns{ text-align:center; margin-top:16px; }
.gz-centered-btns a,
.gz-centered-btns button,
.gz-centered-btns input[type="submit"]{
  display:inline-block; min-width:96px;
  height:40px; line-height:40px; padding:0 18px;
  background:#000; color:#fff; border:none; border-radius:8px;
  font-weight:700; font-size:14px; margin:0 4px; text-align:center;
}


/* 설명: 모바일 공통 랭크 배지 (좌상단, 검정 바탕) */
.gz-rank-badge{
  position:absolute;
  top:8px;
  left:8px;
  z-index:30;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;   /* 2자리도 안정 */
  height:20px;
  padding:0 6px;
  border-radius:3px;
  background:#000;  /* PC와 동일: 검정 바탕 */
  color:#fff;
  font-family:'Jost', sans-serif;
  font-weight:700;
  font-size:12px;
  line-height:1;
  letter-spacing:.2px;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  opacity:.96;
  pointer-events:none; /* 터치 방해 금지 */
}
.gz-rank-badge i{ font-style:normal; }

/* 설명: 배지 기준점 (혹시 relative 아님을 대비) */
#section3 .item-list .thumb{ position:relative; }


/* -------------------------------------------
   [공통 추가] 배지 스택 + 개별 배지 스타일
   - 좌상단: 랭크배지(.gz-rank-badge) ← 이미 추가됨
   - 우상단: G.MADE/특가 배지(스택)
   ------------------------------------------- */

/* 배지 기준점 */
#section3 .item-list .thumb,
#sec6 .sec_inner .sec6_prd .thumb,
li.item_list .thumb{ position:relative; }

/* 우상단 스택(여러 배지를 세로로 쌓기) */
.gz-badge-stack{
  position:absolute; top:8px; right:8px;
  display:flex; flex-direction:column; gap:4px;
  z-index:35; pointer-events:none;
}

/* 공통 배지 토큰 */
.gz-badge-stack > span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:20px; padding:0 6px;
  border-radius:3px; font-family:'Jost', sans-serif;
  font-weight:700; font-size:12px; line-height:1;
  color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.12);
}

/* G.MADE */
.gz-made-badge{ background:#000; }  /* 필요하면 gold 보더: border:1px solid #d4af37; */
.gz-made-badge i{ font-style:normal; letter-spacing:.2px; }

/* 특가(문구별 컬러) */
.gz-special-badge{ background:#444; }
.gz-special-badge.limited{ background:#f1191f; } /* 한정특가 = 레드 */
.gz-special-badge.planned{ background:#007BFF; } /* 기획특가 = 블루 */
.gz-special-badge i{ font-style:normal; letter-spacing:.2px; }

/* PC에서는 약간 키우기, 모바일은 컴팩트 유지 */
@media (min-width: 769px){
  .gz-badge-stack{ top:10px; right:10px; gap:6px; }
  .gz-badge-stack > span{
    min-width:34px; height:24px; padding:0 8px; font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
  }
}


/* =========================================================
   [MOBILE] G.MADE + 특가(한정/기획) 배지 - 우측 상단 스택 최종본
   - 규칙
     · 상품명/서브명에 'ⓟ' 또는 'G.MADE' → G.MADE 배지 노출
     · 상품명/서브명에 '한정특가' 또는 '기획특가' → 해당 문구 배지 노출
     · 배지는 우측 상단에 세로로 쌓임(겹침 없음): 위=G.MADE, 아래=특가
   - 커스터마이즈
     · 가로길이/간격/두께/정렬/투명도는 아래 변수 변경
   ========================================================= */
:root{
  /* ▶ 길이/간격 */
  --gz-badge-w: 63px;     /* 가로 길이(두 배지 동일) */
  --gz-badge-px: 6px;     /* 좌우 패딩 */
  --gz-badge-py: 3px;     /* 상하 패딩(두께) */
  --gz-badge-gap: 1px;    /* 배지 간 간격 */

  /* ▶ 투명도 포함 배경색 (요청값 반영) */
  --gz-made-bg: rgba(30,30,30,.80);    /* G.MADE "H 0.8 */
  --gz-spec-bg: rgba(30,30,30,.50); /* 특가(한정/기획) "H 0.5 */

  /* ▶ 정렬: center(기본) / flex-end(오른쪽 정렬 원하면 바꾸기) */
  --gz-justify: center;
}

/* 썸네일을 기준점으로 */
#section3 .item-list .thumb,
.product-item .item-list .thumb{ position:relative; }

/* 우측 상단 스택 컨테이너 */
.gz-badge-stack{
  position:absolute; top:8px; right:4px; z-index:120;
  display:flex; flex-direction:column; gap:var(--gz-badge-gap);
  pointer-events:none; line-height:1;
}

/* 배지 공통 */
.gz-badge-stack .gz-made-badge,
.gz-badge-stack .gz-special-badge{
  position:static !important;
  width:var(--gz-badge-w) !important;
  min-width:0 !important;
  padding:var(--gz-badge-py) var(--gz-badge-px) !important;
  height:auto !important; box-sizing:border-box; margin:0;
  border-radius:4px; font-size:12px; font-weight:400 !important; letter-spacing:.2px;
  display:flex !important; align-items:center; justify-content:var(--gz-justify); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;
}
.gz-badge-stack .gz-made-badge{   background:var(--gz-made-bg);  box-shadow:0 2px 6px rgba(0,0,0,.18); order:1; }
.gz-badge-stack .gz-special-badge{background:var(--gz-spec-bg); box-shadow:0 2px 6px rgba(0,0,0,.12); order:2; }

/* 혹시 스택 밖에 남아있는 옛 배지 제거(안전망) */
#section3 .item-list .thumb > .gz-made-badge,
#section3 .item-list .thumb > .gz-special-badge,
.product-item .item-list .thumb > .gz-made-badge,
.product-item .item-list .thumb > .gz-special-badge{ display:none !important; }

/* 소형 화면에서 살짝 더 컴팩트 */
@media (max-width:360px){
  :root{ --gz-badge-w: 70px; --gz-badge-px: 5px; --gz-badge-py: 3px; --gz-badge-gap: 2px; }
}


/* -----------------------------------------------
   [MOBILE/CATEGORY] 우상단 배지 + 좌상단 순위 배지
   - 길이/간격/투명도는 아래 변수로 조절
------------------------------------------------ */
:root{
  --gz-badge-w: 65px;       /* 가로 길이(두 배지 동일) */
  --gz-badge-px: 5px;       /* 좌우 패딩 */
  --gz-badge-py: 3px;       /* 상하 패딩(두께) */
  --gz-badge-gap: 2px;      /* 배지 간 간격 */
  --gz-made-bg: rgba(30,30,30,.80);    /* G.MADE 배경(요청: 0.8) */
  --gz-spec-bg: rgba(30,30,30,.50); /* 특가 배경(요청: 0.5) */
}

/* 썸네일 기준점 보장 (카테고리 전역) */
#productClass .item_list .thumb,
#productClass .item-list .thumb{ position:relative; }

/* 우상단 스택(겹침 방지) */
.gz-badge-stack{
  position:absolute; top:8px; right:4px; z-index:120;
  display:flex; flex-direction:column; gap:var(--gz-badge-gap);
  pointer-events:none; line-height:1;
}

/* 배지 공통(가로/두께 동일) */
.gz-badge-stack .gz-made-badge,
.gz-badge-stack .gz-special-badge{
  position:static !important;
  width:var(--gz-badge-w) !important;
  min-width:0 !important;
  padding:var(--gz-badge-py) var(--gz-badge-px) !important;
  height:auto !important; box-sizing:border-box; margin:0;
  border-radius:4px; font-size:12px; font-weight:400 !important; letter-spacing:.2px;
  display:flex !important; align-items:center; justify-content:center; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;
}
.gz-badge-stack .gz-made-badge{   background:var(--gz-made-bg);  box-shadow:0 2px 6px rgba(0,0,0,.18); order:1; }
.gz-badge-stack .gz-special-badge{background:var(--gz-spec-bg); box-shadow:0 2px 6px rgba(0,0,0,.12); order:2; }

/* 좌상단: 전역 BEST 순위 배지 */
.gz-rank-badge{
  position:absolute; top:8px; left:8px; z-index:115;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:20px; padding:0 6px; border-radius:4px;
  background:rgba(0,0,0,.90); color:#fff; font-size:12px; font-weight:700; line-height:1;
  pointer-events:none;
}

/* 혹시 스택 밖 옛 배지 있으면 숨김(안전망) */
#productClass .item_list .thumb > .gz-made-badge,
#productClass .item_list .thumb > .gz-special-badge,
#productClass .item-list .thumb > .gz-made-badge,
#productClass .item-list .thumb > .gz-special-badge{ display:none !important; }

/* 더 작은 화면일 때 살짝 컴팩트 */
@media (max-width:360px){
  :root{ --gz-badge-w: 68px; --gz-badge-px: 4px; --gz-badge-py: 3px; --gz-badge-gap: 2px; }
}

/* ===== [모바일 대분류] 우상단 배지 최소본 ===== */
:root{
  --gz-badge-w: 65px;                 /* 가로 길이 */
  --gz-badge-px: 5px;                 /* 좌우 패딩 */
  --gz-badge-py: 3px;                 /* 상하 패딩 */
  --gz-badge-gap: 2px;                /* 배지 간 간격 */
  --gz-made-bg: rgba(30,30,30,.80);   /* G.MADE 투명도 0.8 */
  --gz-spec-bg: rgba(30,30,30,.50);/* 특가(한정/기획) 투명도 0.5 */
}

/* 썸네일을 기준점으로(네 구조: dl > dt.thumb) */
main.shopbrand .item-list .thumb,
main.shopbrand .item_list .thumb,
main.shopbrand .item-list dt.thumb,
main.shopbrand .item_list dt.thumb { position:relative; }

/* 우상단 스택 */
.gz-badge-stack{
  position:absolute; top:8px; right:4px; z-index:120;
  display:flex; flex-direction:column; gap:var(--gz-badge-gap);
  pointer-events:none; line-height:1;
}

/* 배지 공통(중앙정렬 + 볼드X) */
.gz-badge-stack .gz-made-badge,
.gz-badge-stack .gz-special-badge{
  position:static;
  width:var(--gz-badge-w); min-width:0;
  padding:var(--gz-badge-py) var(--gz-badge-px);
  height:auto; box-sizing:border-box; margin:0;
  border-radius:4px; font-size:12px; font-weight:400; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff;
}
.gz-badge-stack .gz-made-badge{   background:var(--gz-made-bg);  box-shadow:0 2px 6px rgba(0,0,0,.18); }
.gz-badge-stack .gz-special-badge{background:var(--gz-spec-bg); box-shadow:0 2px 6px rgba(0,0,0,.12); }

/* 혹시 스택 밖에 남은 옛 배지 숨김(안전망) */
main.shopbrand .item-list .thumb > .gz-made-badge,
main.shopbrand .item-list .thumb > .gz-special-badge,
main.shopbrand .item_list .thumb > .gz-made-badge,
main.shopbrand .item_list .thumb > .gz-special-badge{ display:none !important; }


/* 헤더 높이(필요 시 60~80px로 미세조정) */
:root{ --gnbH:72px; }

/* 마이페이지 '서브'일 때만 #contents 위쪽 여백 주기 */
html:has(#order-list, #order-detail-list, #myCancel, main.smMypage, main[id^="my"], main[id*="order"]) #contents{
  padding-top: var(--gnbH) !important;
}


#mypage-root #contents{margin-top:72px}
#mypage-root #footer{clear:both;float:none;position:relative}


/* ---------------------------------------
   [추가] 옵션 영역 하단 실행버튼 고정바
   --------------------------------------- */
.option_area .gz-op-actions{
  position: sticky;      /* 옵션 스크롤해도 하단에 고정 */
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 5;
}
.option_area .gz-op-actions a{
  flex: 1 1 0;
  height: 44px;
  line-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 8px;
}
.option_area .gz-op-actions a.cart{
  background:#fff; color:#000; border:1px solid #000;
}
.option_area .gz-op-actions a.buy{
  background:#000; color:#fff; border:1px solid #000;
}

/* 혹시 다른 CSS에서 옵션 버튼을 숨겼던 흔적 차단 */
.shopdetail .option_area .gz-op-actions{ display:flex !important; }