@charset "utf-8";

/* =====================================================================
   Celebrity v2 — nero 외관 이식 (celebrity-v2.css)
   - 소스: luxurycelebrity nero 테마 (e:/tmp/src-css/{layout,style}.css)
   - 셀렉터명은 소스 그대로 유지(헤더/index 마크업이 이 클래스를 사용).
   - 색상은 celebrity-tokens.php(:root) 토큰에 연동:
       소스 var(--color) #a3cfd8  →  var(--accent)
       소스 #262626(ink)          →  var(--ink)
       소스 #777(보조텍스트)      →  var(--text-sub)
       소스 #f1f1f1(헤어라인)     →  var(--hairline)
       소스 #008BCC(가격 파랑)    →  var(--price, #008BCC)
   - default_shop.css(부트스트랩 베이스) 이후에 로드해 nero 클래스를 덮어쓴다.
   - rem 기준: 소스는 html{font-size:62.5%} 전제(1.4rem=14px). 아래 §0에서 고정.
   ===================================================================== */

/* ---------- 0. rem 기준 + 폰트 ---------- */
/* nero 소스는 1.4rem=14px(62.5%) 기준. 부트스트랩 16px와 충돌하지 않도록
   nero 클래스 영역(#header, .sct_wrap 등)이 의존하는 rem 단위를 위해
   html 폰트사이즈를 62.5%로 맞춘다. body 실효 폰트는 1.5rem(15px)로 복원. */
html { font-size: 62.5%; }
body {
  font-size: 1.5rem;
  font-family: var(--font-body);
  color: var(--ink);
  letter-spacing: -0.35px;
}

:root {
  /* 소스 가격 파랑(민트 --accent와 별개) */
  --price: #008BCC;
  /* nero 컨테이너 폭 (소스 .width max-width:1300px) */
  --nero-width: 1300px;
}

/* ---------- 1. 공통 폭/여백 (소스 layout.css) ---------- */
.width {
  width: 92% !important;
  max-width: var(--nero-width);
  margin: 0 auto;
  position: relative;
}
.width2 { position: relative; }
.common { padding: 100px 0; }

/* ---------- 2. 헤더 컨테이너 (소스 layout.css + style.css) ---------- */
#header {
  width: 100%;
  background: var(--white);
  position: fixed;
  top: 0;
  z-index: 9;
  transition: 0.3s all;
  border-bottom: 1px solid var(--hairline);
}
/* 스크롤시 1·2단(공지/유틸) 숨김 */
#header.active { top: -122px; }

/* ---------- 3-1. 1단 공지 롤링바 (소스 .top_banner2) ---------- */
.top_banner2 .width {
  display: flex;
  justify-content: space-between;
}
.top_banner2 .parcel {
  font-size: 15px;
  color: var(--accent);
  font-weight: 500;
}
.top_banner2 .parcel img { margin-right: 6px; }
/* 공지 swiper(세로/페이드 롤링) */
.top_banner2 .brand_ser { display: block; height: 40px; padding: 0; margin: 0; }
.top_banner2 .brand_ser a {
  display: block;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  color: var(--white);
}
/* 공지 슬라이드 배경: 1번=다크, 2번=민트(인라인 style 동반) */
.top_banner2 .swiper-slide a { background: var(--notice-bg); }

/* ---------- 3-2. 2단 유틸바 (소스 .top_banner) ---------- */
.top_banner { padding: 7px 0; }
.top_banner .width { display: flex; justify-content: space-between; }
.top_banner .parcel {
  font-size: 15px;
  color: var(--accent);
  font-weight: 500;
}
.top_banner .parcel img { margin-right: 6px; }
.top_banner .tlink {
  display: flex;
  gap: 0 5%;
  width: 100%;
  justify-content: flex-end;
}
.top_banner .tlink .togin {
  display: flex;
  gap: 0 3%;
  width: 50%;
  justify-content: flex-end;
}
.top_banner .tlink a {
  font-size: 1.4rem;
  color: var(--text-sub);
  font-weight: 400;
}
.top_banner .tlink a:hover { color: var(--ink); }

/* ---------- 3-3. 3단 로고 + 검색 + 아이콘 (소스 .tlogo) ---------- */
.tlogo { padding: 0 0 10px; }
.tlogo .width {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tlogo .logo img { max-height: 40px; width: auto; }
.tlogo .ser_wrap {
  display: flex;
  align-items: center;
  gap: 0 15px;
}
/* 인기검색어 pill 칩 */
.brand_ser { height: 42px; }
.tlogo .ser_wrap li {
  background: var(--chip-bg);
  border-radius: 30px;
  padding: 0 15px;
  width: 200px;
  text-align: left;
  height: 42px !important;
  line-height: 42px;
}
.tlogo .ser_wrap li span {
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  color: var(--white);
  background: var(--accent);
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
}
.tlogo .ser_wrap li a {
  color: var(--text-sub);
  font-weight: 600;
  font-size: 16px;
}
/* 검색/유저/카트 아이콘 (Remix) */
.tlogo .ser_wrap a {
  font-size: 24px;
  position: relative;
  color: var(--ink);
}
.tlogo .ser_wrap a:hover { color: var(--accent); }
.tlogo .ser_wrap .cart-count {
  position: absolute;
  font-size: 1.1rem;
  color: var(--white);
  width: 15px;
  height: 15px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  right: -4px;
  top: -2px;
  font-weight: bold;
  text-align: center;
  line-height: 15px;
}

/* ---------- 4. GNB (소스 style.css #hcategory .cate) ---------- */
#hd { background: var(--white); }
#hd #hd_menu { position: relative; left: -25px; }
#hcategory { display: flex; }
#hcategory .cate { display: flex; }
#hcategory .cate li { position: relative; }
/* 1차 메뉴 (ink·600) */
#hcategory .cate .cate_li_1_a {
  color: var(--ink);
  font-weight: 600;
  padding: 0 25px;
  height: 48px;
  display: flex;
  align-items: center;
}
#hcategory .cate .cate_li_1_a:hover { color: var(--accent); }
/* 2차 브랜드 드롭다운 */
#hcategory .sub_cate {
  display: none;
  position: absolute;
  width: 180px;
  border: 1px solid var(--hairline);
  padding: 5px 15px;
  background: var(--white);
  top: 48px;
  z-index: 20;
  transition: 0.2s all;
  margin-top: 30px;
}
#hcategory .sub_cate a {
  font-size: 1.3rem;
  color: var(--text-sub);
  padding: 4px 0;
  display: block;
  font-weight: 500;
  transition: 0.3s all;
}
#hcategory .sub_cate a:hover {
  color: var(--ink);
  padding-left: 6px;
}
#hcategory .cate li:hover .sub_cate {
  display: block;
  margin-top: 0;
  transition: 0.2s all;
}
/* 1차 진열용 cate2 첫 항목 숨김(소스 규칙 보존) */
#hcategory .cate2 > li:first-child { display: none; }
/* 전역 배경 오버레이(드롭다운 펼침시) */
#category_all_bg { display: none; }

/* ---------- 5. 메인 비주얼 슬라이더 (소스 .theme_visual) ---------- */
.theme_visual { overflow: hidden; }
.Hfull .swiper-slide img { width: 100%; }
.Hfull .swiper-pagination1 {
  text-align: center;
  position: absolute;
  z-index: 11;
}
.Hfull .swiper-pagination-bullet-active {
  width: 25px;
  border-radius: 5px;
  background: var(--white);
}

/* ---------- 6. quick 3분할 배너 (소스 .banner) ---------- */
.banner { padding: 40px 0; }
.banner .width2 {
  display: flex;
  gap: 12px 1%;
  width: 97%;
  margin: 0 auto;
}
.banner a { width: 33.33%; }
.banner a img { width: 100%; }

/* ---------- 7. 상품 진열 위젯 (소스 .sct_wrap) ---------- */
.sct_wrap header {
  text-align: center;
  margin-bottom: 40px;
}
.sct_wrap header h2 {
  float: initial;
  display: block;
  font-size: 3.0rem;
  color: var(--ink);
}
.sct_wrap header h2 a {
  font-weight: 700;
  color: var(--ink);
}
/* 섹션 제목 영문 서브라벨 (정통 미니멀 — 영문 회색·자간, 한글 굵게) */
.sct_wrap header .sct-en {
  display: block;
  font-family: 'Poppins', 'Noto Sans KR', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #b3b8bf;
  margin: 0 0 8px;
  padding-left: 0.28em; /* letter-spacing 우측여백 보정(중앙정렬) */
}
.sct_wrap header p {
  font-size: 1.6rem;
  color: var(--text-sub);
}

/* 가로 슬라이드(smt_10) */
.sct_slide .swiper-wrapper { padding-bottom: 40px; }
.sct_slide .sct_img img {
  width: 100%;
  object-fit: cover;
  height: auto;
}
.sct_slide .swiper-pagination2 { text-align: center; }
.sct_slide .swiper-pagination2 .swiper-pagination-bullet {
  background: #ccc;
  opacity: 0.4;
  width: 12px;
  height: 12px;
}
.sct_slide .swiper-pagination2 .swiper-pagination-bullet-active { opacity: 1; }

/* ---------- 8. 상품 카드 (소스 .sct_li / smt_10) ---------- */
.sct_li { position: relative; }
.sct_slide .smt_10 .sct_img img { transition: 0.3s all; }
.sct_img { position: relative; overflow: hidden; }
/* 호버 하단 오버레이 */
.sct_slide .sct_text {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  transition: 0.3s all;
  opacity: 0;
}
.sct_li:hover .sct_text { opacity: 1; }
.sct_li:hover .sct_img img { transform: scale(1.07); }
.sct_slide .smt_10 .sct_txt {
  margin: 0 0 5px;
  padding-bottom: 0;
  font-size: 12px;
  border-bottom: none;
}
.sct_slide .smt_10 .sct_txt a {
  font-weight: 500;
  color: var(--text-mid);
}
.sct_slide .smt_10 .sct_basic {
  font-size: 12px;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 135%;
}
.sct_slide .smt_10 .sct_cost {
  font-size: 12px;
  color: var(--price);
  font-weight: bold;
  margin-bottom: 0;
}

/* 좌상단 BEST 랭크 뱃지 */
.sct_slide .sct_rank {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--white);
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sct_slide .sct_rank .num {
  color: var(--accent);
  font-weight: bold;
  font-size: 20px;
}
.sct_slide .sct_rank .text {
  color: var(--accent);
  font-weight: bold;
  font-size: 12px;
}

/* 호버 우상단 액션 버튼(찜/팝업/카트/좋아요) */
.sct_op_btn {
  display: flex;
  flex-direction: column;
  gap: 4px 0;
  opacity: 0;
}
.smt_10 .sct_op_btn {
  position: absolute;
  bottom: initial;
  top: 10px;
  right: 10px;
  z-index: 11;
}
.sct_op_btn button {
  width: 35px !important;
  height: 35px !important;
  background: var(--white) !important;
  border-radius: 4px;
  color: var(--ink) !important;
  font-size: 16px !important;
  border: none;
}
.sct_op_btn button:hover { color: var(--accent) !important; }
.sct_li:hover .sct_op_btn { opacity: 1; }

/* 그리드형(smt_20) */
.smt_20 { display: flex; flex-wrap: wrap; gap: 20px 2%; }
.smt_20 .sct_sns { display: none; }
.smt_20 .sct_li {
  width: 49%;
  margin-right: 0;
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
}
.smt_20 .sct_img { width: 50%; }
.smt_20 .sct_img .sct_img_wrap { overflow: hidden; border-radius: 8px; }
.smt_20 .sct_img img {
  width: 100%;
  transition: 0.3s all;
  height: 100%;
  object-fit: cover;
}
.smt_20 .sct_text { width: 50%; padding-left: 2%; }
.smt_20 .sct_op_btn { position: absolute; right: 10px; bottom: 10px; }
.smt_20 .sct_txt {
  margin: 0 0 5px;
  padding-bottom: 0;
  font-size: 12px;
  border-bottom: none;
}
.smt_20 .sct_txt a { font-weight: 500; color: var(--text-mid); }
.smt_20 .sct_basic {
  font-size: 12px;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 135%;
}
.smt_20 .sct_cost {
  font-size: 12px;
  color: var(--price);
  font-weight: bold;
  margin-bottom: 0;
}

/* 더보기 버튼 */
.btnmore {
  width: 208px;
  height: 58px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 58px;
  display: block;
  margin: 50px auto 0;
  font-size: 1.5rem;
  box-shadow: 0 0 4px 0 rgba(34, 34, 34, 0.03);
  transition: 0.3s all;
  border-radius: 4px;
  color: var(--ink);
}
.btnmore:hover { box-shadow: 0 0 10px 0 rgba(34, 34, 34, 0.2); }

/* ---------- 9. 부유 요소 (소스 .quick / #side_menu) ---------- */
.quick {
  position: fixed;
  right: 25px;
  bottom: 40px;
  z-index: 12;
  text-align: center;
}
.quick li { text-align: center; margin-top: 5px; }
.quick button {
  width: 70px;
  height: 70px;
  box-shadow: 0 0 4px 0 rgba(34, 34, 34, 0.2);
  border: 1px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: var(--white);
  border-radius: 50%;
  margin: 0 auto;
  color: var(--ink);
}
#side_menu { display: none; }

/* ---------- 10. 반응형 (소스 style.css 미디어쿼리 핵심) ---------- */
@media all and (max-width: 1024px) {
  .common { padding: 80px 0; }
  .sct_wrap header h2 { font-size: 2.4rem; margin-bottom: 5px; }
  .sct_wrap header p { font-size: 13px; }
  .Hfull { margin-top: 130px; }
  .banner .width2 { flex-direction: column; }
  .banner a { width: 100%; }
  #hcategory .cate .cate_li_1_a { height: 35px; padding: 0 20px; }
  #hd .width { width: 100% !important; }
  #hcategory { width: 500px; }
  #hd #hd_menu {
    left: 0;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  #hd #hd_menu::-webkit-scrollbar { height: 1px; background: var(--white); }
}

/* ---------- 11. 모바일 (≤768px) — 소스 nero 레이아웃 일치 ----------
   목표(소스 luxurycelebrity3.kr 모바일 대조):
   ① 메인 슬라이더: .container 고정폭 → 풀폭(풀블리드) 비주얼.
   ② 상품 진열: 부트스트랩 2열 그리드(.sct_slide.row.row-cols-2) →
      소스식 1행 가로 슬라이드(가로 스크롤 + 카드 고정폭 2.x장 peek + 스냅).
      ※ 마크업/JS 불변(CSS-only). 실제 swiper 미동작 마크업이라 scroll-snap으로
        소스 Swiper(slidesPerView 2/브레이크포인트)의 가로 슬라이드 외관을 재현.
   ※ 헤더(햄버거/한 줄 GNB/검색칩)는 shop/shop.head.php 인라인 @media가 이미 처리.
   ※ 청록 토큰(--accent) 유지, 셀렉터 보존.
   ====================================================================== */
@media all and (max-width: 768px) {

  /* ── ① 메인 비주얼 슬라이더 풀폭(풀블리드) ── */
  .shop-index-owl-wrap,
  .shop-index-slider-wrap {
    max-width: none !important;        /* default_shop.css의 --container-max 해제 */
    width: 100% !important;
    padding-left: 0 !important;        /* bootstrap .container 좌우 패딩 해제 */
    padding-right: 0 !important;
    margin-top: 0 !important;
  }
  .shop-index-owl-wrap .owl-shopslider .item img,
  .shop-index-owl-wrap .owl-carousel .item img { width: 100%; }

  /* ── ② 상품 진열: 가로 스크롤 제거 → 2열 그리드(소스 카테고리 진열방식) ── */
  /* 컨테이너: 부트스트랩 .row(flex-wrap:wrap) 복원 — 한 줄 가로 스크롤 폐기 */
  .celeb-cards .sct_slide,
  .celeb-cards .sct_slide.row,
  .sct_wrap .sct_slide.row {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    scroll-snap-type: none;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 3% !important;            /* 좌우 여백만 */
  }

  /* 카드: 2열(50%) 그리드 — 상품명/가격 보이는 세로 카드 */
  .celeb-cards .sct_slide > .col.sct_li,
  .sct_wrap .sct_slide.row > .col.sct_li {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 0 20px !important;
    padding: 0 6px !important;
    scroll-snap-align: none;
  }

  /* 진열 헤더(타이틀) 소스 톤 */
  .sct_wrap header { margin-bottom: 14px; }
  .sct_wrap header h2 { font-size: 2.0rem; }
  .sct_wrap header p { font-size: 1.2rem; }
  /* 배너↔진열·진열간 공백 축소 */
  .banner { display: none; }               /* 빈 quick배너(pimg 미존재) 제거 */
  .common { padding: 33px 0 !important; }   /* 섹션간 공백 ~70px(33+margin4+33) */
  #sug { padding-top: 89px !important; }    /* 첫 섹션(인기상품) — 배너와 공백 ~100px */
  .sct_wrap.items-wrap { margin-bottom: 4px !important; }

  /* 랭킹 뱃지/카드 텍스트 모바일 축소 */
  .celeb-cards .sct_rank { width: 40px; height: 40px; }
  .celeb-cards .sct_rank .num { font-size: 1.05rem; }
  .celeb-cards .sct_rank .text { font-size: .62rem; }

  /* 모바일은 호버 액션 상시 숨김(터치) — 소스와 동일하게 카드 간결화 */
  .celeb-cards .sct_op_btn { display: none !important; }

  /* 3분할 quick 배너: 소스대로 세로 스택 */
  .banner .width2 { flex-direction: column; }
  .banner a { width: 100%; }
}

/* =========================================================
   모바일 햄버거 offcanvas (#offcanvas_menu) 전용 스타일
   - 텍스트 세로 깨짐(글자 한 자씩 줄바꿈) 수정: anchor d-flex/flex-wrap 무력화
   - 정적 큐레이션 7링크(GNB 동일순) + 동적 전체 카테고리 아코디언
   ========================================================= */
#offcanvas_menu { width: 300px; max-width: 86vw; }
#offcanvas_menu .offcanvas-header {
  border-bottom: 1px solid #f1f1f1;
  padding: 16px 18px;
}
#offcanvas_menu .offcanvas-title { font-weight: 700; letter-spacing: .04em; }
#offcanvas_menu .offcanvas-body { padding: 0 0 24px; overflow-y: auto; }
#offcanvas_menu .mobile-search-wrap { padding: 16px 18px 8px; }
#offcanvas_menu .mobile-search-wrap form { width: 100%; }

/* 정적 큐레이션 메뉴 (BEST·가방·기획전·시계·벨트·악세서리·리뷰) */
/* 햄버거 내 큐레이션 GNB 목록 숨김 — 상단 GNB 바와 중복(전체 카테고리만 노출). 상단 GNB 바가 BEST·기획전·리뷰까지 커버 */
#offcanvas_menu .mobile-curated-nav { display: none; }
#offcanvas_menu .mobile-curated-list { list-style: none; margin: 0; padding: 0; }
#offcanvas_menu .mobile-curated-list > li { margin: 0; }
#offcanvas_menu .mobile-curated-list > li > a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
}
#offcanvas_menu .mobile-curated-list > li > a:hover,
#offcanvas_menu .mobile-curated-list > li > a:active { color: var(--color, #a3cfd8); }

/* 동적 전체 카테고리 섹션 헤딩 */
#offcanvas_menu .mobile-cate-heading {
  margin: 0;
  padding: 16px 18px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #999;
}

/* ▼ 텍스트 세로 깨짐 핵심 수정: 모든 메뉴 anchor 한 줄 강제 ▼ */
#offcanvas_menu .mobile-categorys a {
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: nowrap !important;
  word-break: keep-all;
  line-height: 1.3;
}

/* 1단계 항목 */
#offcanvas_menu .mobile-categorys .accordion-item {
  border: 0;
  border-bottom: 1px solid #f1f1f1;
}
#offcanvas_menu .mobile-categorys .accordion-header {
  align-items: center;
  margin: 0;
  min-height: 48px;
}
#offcanvas_menu .mobile-categorys .accordion-header > a {
  flex: 1 1 auto;
  min-width: 0;            /* flex 자식이 줄바꿈 없이 ellipsis 되도록 */
  padding: 13px 0 13px 18px !important;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
/* 펼침 토글 버튼 폭 고정 (텍스트 영역 압축 방지) */
#offcanvas_menu .mobile-categorys .accordion-header .accordion-button {
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#offcanvas_menu .mobile-categorys .accordion-button::after { margin: 0 auto; }
#offcanvas_menu .mobile-categorys .accordion-button:not(.collapsed) { color: var(--color, #a3cfd8); }

/* 2단계 */
#offcanvas_menu .mobile-categorys .mobile-depth2 { background: #fafafa; }
#offcanvas_menu .mobile-categorys .sub-cate.accordion-item { border-bottom: 1px solid #f1f1f1; }
#offcanvas_menu .mobile-categorys .sub-cate .accordion-header { min-height: 42px; }
#offcanvas_menu .mobile-categorys .sub-cate .accordion-header > a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 0 11px 28px !important;
  font-size: 14px;
  font-weight: 500;
  color: #444;
}
#offcanvas_menu .mobile-categorys .sub-cate .accordion-header > a .bi-dot { display: none; }

/* 3단계 */
#offcanvas_menu .mobile-categorys .mobile-depth3 { background: #f3f3f3; padding: 2px 0; }
#offcanvas_menu .mobile-categorys .depth3-item { padding: 0 !important; }
#offcanvas_menu .mobile-categorys .depth3-item a {
  padding: 9px 0 9px 40px !important;
  font-size: 13px;
  font-weight: 400;
  color: #666;
}

/* =====================================================================
   체크아웃/주문서 (orderform) — 가독성·정렬 (마지막 로드 = 코어 오버라이드)
   ⚠ 이 파일이 PC·모바일 모두 맨 마지막 로드되므로 여기에 둬야 코어를 이긴다.
   ===================================================================== */
#sod_frm{ max-width:1180px; margin:20px auto 60px; color:var(--ink); font-family:var(--font-body); letter-spacing:-0.3px; }
#sod_frm h2{ font-size:19px; font-weight:700; color:var(--ink); margin:30px 0 14px; padding-bottom:12px; border-bottom:2px solid var(--ink); }
#sod_frm h3{ font-size:15px; font-weight:600; color:var(--ink); margin:0 0 12px; }

/* 주문 상품목록 */
#sod_frm .od_prd_list{ border:1px solid var(--hairline); border-radius:12px; overflow:hidden; margin-bottom:20px; }
#sod_frm .od_prd_list table{ width:100%; border-collapse:collapse; margin:0; }
#sod_frm .od_prd_list thead th{ background:var(--chip-bg); color:var(--text-sub); font-weight:600; font-size:13px; padding:13px 10px; border-bottom:1px solid var(--hairline); }
#sod_frm .od_prd_list tbody td{ padding:16px 10px; border-bottom:1px solid var(--hairline); font-size:14px; vertical-align:middle; }
#sod_frm .od_prd_list tbody tr:last-child td{ border-bottom:0; }
#sod_frm .sod_img img{ border:1px solid var(--hairline); border-radius:4px; }
#sod_frm .sod_name{ font-weight:600; }

/* 주문/받는분/결제정보 카드 */
#sod_frm #sod_frm_orderer, #sod_frm #sod_frm_taker, #sod_frm #sod_frm_pay{
  background:var(--white); border:1px solid var(--hairline); border-radius:12px; padding:6px 24px 20px; margin-bottom:20px; }
#sod_frm .sod_left{ display:flex; flex-wrap:wrap; gap:20px; }
#sod_frm .sod_left > section{ flex:1 1 360px; margin-bottom:0; }

/* 입력 폼 테이블 */
#sod_frm .tbl_frm01 table{ width:100%; border-collapse:collapse; }
#sod_frm .tbl_frm01 th{ width:96px; text-align:left; vertical-align:middle; padding:12px 12px 12px 0; font-size:14px; font-weight:600; color:var(--ink); background:transparent; border-bottom:1px solid var(--hairline); }
#sod_frm .tbl_frm01 td{ padding:12px 0; border-bottom:1px solid var(--hairline); font-size:14px; }
#sod_frm .tbl_frm01 tr:last-child th, #sod_frm .tbl_frm01 tr:last-child td{ border-bottom:0; }
#sod_frm input[type=text], #sod_frm input[type=password], #sod_frm input[type=email],
#sod_frm input[type=tel], #sod_frm input[type=number], #sod_frm select, #sod_frm textarea, #sod_frm .frm_input{
  height:42px; padding:0 12px; border:1px solid var(--hairline); border-radius:6px; font-size:14px; color:var(--ink); background:var(--white); box-sizing:border-box; max-width:100%; vertical-align:middle; }
#sod_frm textarea{ height:auto; min-height:80px; padding:10px 12px; }
#sod_frm input:focus, #sod_frm select:focus, #sod_frm textarea:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 2px rgba(38,38,38,0.08); }
#sod_frm input.frm_input[name^="od_addr"], #sod_frm input.frm_input[name^="od_b_addr"]{ width:100%; margin-top:6px; }
#sod_frm .btn_address{ height:42px; padding:0 16px; border:1px solid var(--ink); border-radius:6px; background:var(--white); color:var(--ink); font-weight:600; font-size:13.5px; cursor:pointer; vertical-align:middle; }
#sod_frm .btn_address:hover{ background:var(--ink); color:var(--white); }

/* 요약/총액 (#sod_bsk_tot 가로 요약表는 스킨 기본 레이아웃 유지 — 연산자(+/-) 겹침 방지 위해 건드리지 않음) */
#sod_frm #od_tot_price{ display:flex; align-items:center; justify-content:space-between; margin:18px 0; padding:18px 20px; background:var(--panel-bg); border-radius:10px; font-size:16px; font-weight:600; }
#sod_frm #od_tot_price strong{ font-family:var(--font-display); font-size:22px; color:var(--sale); }
#sod_frm #sod_frm_pay table{ width:100%; border-collapse:collapse; }
#sod_frm #sod_frm_pay th, #sod_frm #sod_frm_pay td{ padding:12px 8px; border-bottom:1px solid var(--hairline); font-size:14px; }
#sod_frm .btn_frmline{ height:36px; padding:0 14px; margin-left:6px; border:1px solid var(--hairline); border-radius:6px; background:var(--white); color:var(--ink); font-size:13px; cursor:pointer; }

/* 결제수단 (라디오 → 박스) */
#sod_frm #sod_frm_pt_alert{ color:var(--text-sub); font-size:13px; margin:8px 0 16px; }
#sod_frm #sod_frm_pt_alert strong{ color:var(--ink); }
#sod_frm #sod_frm_paysel{ display:flex; flex-wrap:wrap; gap:10px; border:0; margin:0 0 18px; padding:0; }
#sod_frm #sod_frm_paysel input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
#sod_frm #sod_frm_paysel label.lb_icon{ display:inline-flex; align-items:center; justify-content:center; min-width:120px; padding:15px 20px; background-color:var(--white); border:1px solid var(--hairline); border-radius:10px; font-size:14px; font-weight:600; color:var(--ink); text-indent:0; cursor:pointer; transition:all .15s; }
#sod_frm #sod_frm_paysel label.lb_icon:hover{ border-color:var(--ink); }
#sod_frm #sod_frm_paysel input[type=radio]:checked + label.lb_icon{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* 주문/취소 버튼 */
#sod_frm .btn_confirm, .btn_confirm#display_pay_button{ display:flex; align-items:center; justify-content:center; gap:12px; margin:30px 0 10px; }
#sod_frm .btn_submit, .btn_confirm .btn_submit{ min-width:220px; height:54px; padding:0 40px; background:var(--ink); color:var(--white); border:1px solid var(--ink); border-radius:8px; font-size:16px; font-weight:700; cursor:pointer; }
#sod_frm .btn_submit:hover, .btn_confirm .btn_submit:hover{ background:#000; }
.btn_confirm .btn01, #sod_frm .btn01{ display:inline-flex; align-items:center; justify-content:center; min-width:120px; height:54px; padding:0 28px; background:var(--white); color:var(--ink); border:1px solid var(--hairline); border-radius:8px; font-size:15px; font-weight:600; }

/* ---- 모바일 ---- */
@media (max-width:767.98px){
  #category, #hd_sch, .hd_div{ display:none; }      /* 헤더 드로어(분류/검색/메뉴) 기본 숨김 — JS(#btn_hdcate/#btn_hdsch)가 .show()로 엶 */
  body.is_hidden #category{ display:block; }        /* 분류 열림 상태(JS가 body.is_hidden 부여) */
  #sod_frm{ margin:8px auto 40px; padding:0 12px; max-width:none; }
  #sod_frm h2{ font-size:17px; margin:22px 0 10px; }
  #sod_frm .sod_left{ gap:0; }
  #sod_frm #sod_frm_orderer, #sod_frm #sod_frm_taker, #sod_frm #sod_frm_pay{ padding:6px 14px 16px; }
  #sod_frm .tbl_frm01 th{ display:block; width:auto; border-bottom:0; padding:12px 0 4px; }
  #sod_frm .tbl_frm01 td{ display:block; padding:0 0 12px; }
  #sod_frm input[type=text], #sod_frm input[type=password], #sod_frm input[type=email],
  #sod_frm input[type=tel], #sod_frm select, #sod_frm textarea, #sod_frm .frm_input{ width:100%; }
  #sod_frm #sod_frm_paysel label.lb_icon{ flex:1 1 calc(50% - 10px); min-width:0; }
  #sod_frm .btn_confirm{ flex-direction:column-reverse; }
  #sod_frm .btn_submit, .btn_confirm .btn_submit, .btn_confirm .btn01{ width:100%; min-width:0; }
}

/* ===== Bootstrap offcanvas 폴백 — 주문/게이트웨이 등 bootstrap.css 미로드 페이지에서
   모바일 슬라이드패널(#offcanvas_menu 분류 / #offcanvas_member 로그인)이 본문에 노출되는 문제 차단.
   .show(열림) 상태가 아니면 화면 밖 고정·숨김. bootstrap 로드 페이지에선 동일 동작이라 충돌 없음. ===== */
#offcanvas_menu:not(.show), #offcanvas_member:not(.show){ position:fixed; top:0; bottom:0; visibility:hidden !important; z-index:1045; }
#offcanvas_menu:not(.show){ left:0; transform:translateX(-100%); }
#offcanvas_member:not(.show){ right:0; transform:translateX(100%); }

/* 체크아웃 모바일 폴리시: 주소검색 버튼 세로 줄바꿈 방지 + 결제수단 라벨 박스 보강 */
@media (max-width:767.98px){
  #sod_frm .btn_address{ white-space:nowrap; width:auto; min-width:74px; display:inline-block; padding:0 14px; }
  #sod_frm td input[type=text]{ display:inline-block; }
  /* 결제수단 라디오: 라벨이 lb_icon이 아니어도 보이게 */
  #sod_frm #sod_frm_paysel label{ display:inline-flex; align-items:center; gap:6px; }
}

/* =====================================================================
   모바일 주문폼 (sod_frm_mobile) 정렬·가독성 일괄정리 (2026-06-17)
   구조: .odf_list>ul>li(label+.frm_input), 주소=strong+.add_num(#od_zip+.btn_addsch)+.frm_address
   ===================================================================== */
.sod_frm_mobile .odf_list ul{ list-style:none; margin:0; padding:0; }
.sod_frm_mobile .odf_list > ul > li{ display:block; margin:0 0 14px; padding:0; border:0; overflow:visible; }
/* 라벨: 입력 위에 적층(좌측 좁은칸 줄바꿈 제거) */
.sod_frm_mobile .odf_list li label,
.sod_frm_mobile .odf_list li > strong{
  display:block !important; float:none !important; width:auto !important;
  margin:0 0 6px !important; padding:0 !important;
  font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; white-space:nowrap;
}
.sod_frm_mobile .odf_list li label.sound_only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
/* 입력 풀폭 통일 */
.sod_frm_mobile .frm_input{
  width:100% !important; height:46px; padding:0 12px;
  border:1px solid var(--hairline); border-radius:8px;
  font-size:14px; color:var(--ink); background:var(--white); box-sizing:border-box; vertical-align:middle;
}
.sod_frm_mobile .frm_input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 2px rgba(38,38,38,.08); }
/* 주소행: [우편번호][주소검색] 한 줄 + 기본/상세주소 풀폭 적층 */
.sod_frm_mobile .add_num{ display:flex !important; gap:6px; align-items:stretch; margin:0 0 8px !important; }
.sod_frm_mobile .add_num #od_zip{ flex:1 1 auto; width:auto !important; min-width:0; }
.sod_frm_mobile .btn_addsch{
  flex:0 0 auto; width:auto !important; white-space:nowrap !important;
  height:46px; margin:0; padding:0 16px;
  border:1px solid var(--ink); border-radius:8px; background:var(--white);
  color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; line-height:44px;
}
.sod_frm_mobile .btn_addsch:hover{ background:var(--ink); color:var(--white); }
.sod_frm_mobile .frm_address{ width:100% !important; margin:0 0 8px; }
.sod_frm_mobile .frm_address:last-of-type{ margin-bottom:0; }
/* 배송지선택 박스 */
.sod_frm_mobile #sod_frm_taker .order_choice_place,
.sod_frm_mobile .ad_sel_wrap{ padding:12px; background:var(--chip-bg); border-radius:8px; margin-bottom:12px; }
/* 결제수단(m_sod_frm_paysel): 라디오→선택 박스 2열 */
#m_sod_frm_paysel ul{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
#m_sod_frm_paysel li{ flex:1 1 calc(50% - 8px); margin:0; }
#m_sod_frm_paysel input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
#m_sod_frm_paysel label.lb_icon{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:14px 8px; background-color:var(--white);
  border:1px solid var(--hairline); border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ink); text-indent:0; cursor:pointer; box-sizing:border-box;
}
#m_sod_frm_paysel input[type=radio]:checked + label.lb_icon{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* ---- PC 주문폼 가독성 보강 (sod_frm_pc) ---- */
#sod_frm.sod_frm_pc .tbl_frm01 th{ font-size:14.5px !important; color:var(--ink) !important; font-weight:600; width:104px; white-space:nowrap; }
#sod_frm.sod_frm_pc .tbl_frm01 td{ padding:13px 0; }
#sod_frm.sod_frm_pc .btn_address{ white-space:nowrap; }
#sod_frm.sod_frm_pc .frm_input{ font-size:14px; }

/* 모바일 주문폼 보정2: 기본/상세주소 풀폭 적층 + 결제수단 2열 강제 */
.sod_frm_mobile .frm_address{ display:block !important; width:100% !important; float:none !important; clear:both; }
.sod_frm_mobile .odf_list li > br{ display:none; }
#m_sod_frm_paysel ul{ display:flex !important; flex-wrap:wrap; }
#m_sod_frm_paysel li{ flex:1 1 calc(50% - 8px) !important; min-width:0; }

/* =====================================================================
   체크아웃 단일컬럼 클린 레이아웃 (레퍼런스 기준, PC+모바일 공통) — 2026-06-17
   ===================================================================== */
#sod_frm{ max-width:780px !important; margin:18px auto 60px !important; }
/* 섹션 제목 */
#sod_frm h2{ font-size:17px !important; font-weight:700; color:var(--ink); margin:26px 0 12px !important; padding-bottom:10px; border-bottom:2px solid var(--ink); }
/* 주문/받는분 단일컬럼 적층 */
#sod_frm .sod_left{ display:block !important; gap:0 !important; }
#sod_frm .sod_left > section{ width:auto !important; flex:none !important; margin-bottom:20px; }
#sod_frm .sod_right{ width:auto !important; float:none !important; }

/* PC 폼(.tbl_frm01) → 라벨 위·입력 풀폭(단일컬럼) */
#sod_frm.sod_frm_pc .tbl_frm01 table,
#sod_frm.sod_frm_pc .tbl_frm01 tbody{ display:block; width:100%; }
#sod_frm.sod_frm_pc .tbl_frm01 tr{ display:block; padding:10px 0; border-bottom:1px solid var(--hairline); }
#sod_frm.sod_frm_pc .tbl_frm01 tr:last-child{ border-bottom:0; }
#sod_frm.sod_frm_pc .tbl_frm01 th{ display:block !important; width:auto !important; text-align:left !important; background:transparent !important; border:0 !important; padding:0 0 7px !important; font-size:13px; font-weight:600; color:var(--text-sub); white-space:nowrap; }
#sod_frm.sod_frm_pc .tbl_frm01 td{ display:block !important; width:auto !important; border:0 !important; padding:0 !important; }

/* 입력 공통: filled 클린 스타일(레퍼런스) */
#sod_frm .frm_input,
#sod_frm input[type=text], #sod_frm input[type=password], #sod_frm input[type=email],
#sod_frm input[type=tel], #sod_frm input[type=number], #sod_frm select, #sod_frm textarea{
  width:100% !important; height:48px; padding:0 14px;
  background:#f6f7f9; border:1px solid #ececf0; border-radius:8px;
  font-size:14px; color:var(--ink); box-sizing:border-box; vertical-align:middle;
}
#sod_frm textarea{ height:auto; min-height:84px; padding:12px 14px; }
#sod_frm .frm_input:focus, #sod_frm input:focus, #sod_frm select:focus, #sod_frm textarea:focus{ outline:none; background:#fff; border-color:var(--ink); }
/* 주소: [우편번호][주소검색] 한 줄 + 기본/상세 풀폭 */
#sod_frm .add_num, #sod_frm .sod_frm_pc td:has(.btn_address){ display:flex; gap:8px; align-items:stretch; margin-bottom:8px; }
#sod_frm #od_zip, #sod_frm #od_b_zip{ width:130px !important; flex:0 0 130px; }
#sod_frm .btn_address, #sod_frm .btn_addsch{
  flex:0 0 auto; width:auto !important; white-space:nowrap !important; height:48px; line-height:46px;
  padding:0 18px; background:var(--ink); color:var(--white); border:1px solid var(--ink);
  border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; text-align:center;
}
#sod_frm .btn_address:hover, #sod_frm .btn_addsch:hover{ background:#000; }
#sod_frm .frm_address{ width:100% !important; display:block !important; margin-top:8px; }

/* 요약바: 주문/배송비/포인트/총계 (단일컬럼 horizontal bar) */
#sod_frm #sod_bsk_tot ul,
#sod_frm #m_sod_bsk_tot{ display:block; margin:0; padding:0; }
#sod_frm #sod_bsk_tot li,
#sod_frm #m_sod_bsk_tot dt, #sod_frm #m_sod_bsk_tot dd{ display:flex; }
#sod_frm #sod_bsk_tot li{ align-items:center; justify-content:space-between; padding:13px 16px; background:#f6f7f9; border-radius:8px; margin-bottom:8px; font-size:14px; }
#sod_frm #sod_bsk_tot li.sod_bsk_cnt{ background:var(--ink); color:var(--white); font-weight:700; font-size:15px; }
#sod_frm #sod_bsk_tot li.sod_bsk_cnt strong{ color:var(--white); }

/* 결제/취소 버튼: 풀폭 */
#sod_frm .btn_confirm, .btn_confirm#display_pay_button{ display:flex !important; flex-direction:column; gap:10px; margin:28px 0 10px; }
#sod_frm .btn_submit, .btn_confirm .btn_submit{ width:100% !important; min-width:0 !important; height:56px; background:var(--ink); color:var(--white); border:0; border-radius:10px; font-size:16px; font-weight:700; }
.btn_confirm .btn01, #sod_frm .btn01{ width:100% !important; min-width:0 !important; height:52px; background:var(--chip-bg); color:var(--text-sub); border:1px solid var(--hairline); border-radius:10px; font-size:15px; font-weight:600; text-align:center; line-height:50px; }

/* 결제수단 선택상태: background(단축) 대신 background-color만 변경 → 스킨 스프라이트 아이콘 유지 + 연한 색·테두리 강조 */
#sod_frm #sod_frm_paysel input[type=radio]:checked + label.lb_icon,
#m_sod_frm_paysel input[type=radio]:checked + label.lb_icon{
  background-color:rgba(38,38,38,0.08) !important; color:var(--ink) !important;
  border:2px solid var(--ink) !important; box-shadow:none !important;
}

/* 모바일 주소행 정렬 강화(주문자/받는분 공통): [우편번호][주소검색] 한 줄 + 기본/상세주소 풀폭 적층 */
@media (max-width:767.98px){
  .sod_frm_mobile .add_num{ display:flex !important; flex-wrap:nowrap !important; gap:6px !important; align-items:stretch !important; width:100% !important; margin:0 0 8px !important; }
  .sod_frm_mobile .add_num > .frm_input,
  .sod_frm_mobile .add_num input[type=text]{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; }
  .sod_frm_mobile .add_num > .btn_addsch,
  .sod_frm_mobile .add_num .btn_addsch{ flex:0 0 auto !important; width:auto !important; white-space:nowrap !important; }
  .sod_frm_mobile input.frm_address{ display:block !important; width:100% !important; float:none !important; clear:both !important; margin:0 0 8px !important; }
  .sod_frm_mobile input.frm_address:last-of-type{ margin-bottom:0 !important; }
}

/* 모바일: 주소 li가 flex라 자식들이 쪼그라드는 문제 → li 블록 강제(자식 적층). .add_num만 flex 유지 */
@media (max-width:767.98px){
  #sod_frm.sod_frm_mobile .odf_list li{ display:block !important; }
  #sod_frm.sod_frm_mobile .odf_list li .add_num{ display:flex !important; }
}

/* 모바일 주문요약(#m_sod_bsk_tot dl): dt(라벨 좌)+dd(값 우)를 한 줄 바로 정렬 */
@media (max-width:767.98px){
  #sod_frm #m_sod_bsk_tot{ display:flex !important; flex-wrap:wrap; margin:0 0 4px; padding:0; background:#f6f7f9; border-radius:10px; overflow:hidden; }
  #sod_frm #m_sod_bsk_tot dt{ flex:0 0 45% !important; max-width:45%; box-sizing:border-box; padding:13px 0 13px 16px; margin:0; font-size:14px; color:var(--text-sub); text-align:left; border-top:1px solid #fff; }
  #sod_frm #m_sod_bsk_tot dd{ flex:0 0 55% !important; max-width:55%; box-sizing:border-box; padding:13px 16px 13px 0; margin:0; font-size:14px; font-weight:600; color:var(--ink); text-align:right; border-top:1px solid #fff; }
  #sod_frm #m_sod_bsk_tot dt:first-child, #sod_frm #m_sod_bsk_tot dd:nth-of-type(1){ border-top:0; }
  #sod_frm #m_sod_bsk_tot dt.sod_bsk_cnt{ background:var(--ink); color:#fff; font-weight:700; font-size:15px; border-top:0; }
  #sod_frm #m_sod_bsk_tot dd.sod_bsk_cnt{ background:var(--ink); color:#fff; font-weight:700; font-size:16px; border-top:0; }
  #sod_frm #m_sod_bsk_tot dd.sod_bsk_cnt strong{ color:#fff !important; }
}

/* PC 주문요약(#sod_bsk_tot) 강제 세로 클린바 — 가로 연산자(+/-) 라벨 잘림 해결 */
#sod_frm #sod_bsk_tot{ margin-bottom:18px; }
#sod_frm #sod_bsk_tot ul{ display:block !important; margin:0 !important; padding:0 !important; background:#f6f7f9; border-radius:10px; overflow:hidden; list-style:none; }
#sod_frm #sod_bsk_tot li{ display:flex !important; width:auto !important; max-width:none !important; float:none !important; clear:both !important; align-items:center; justify-content:space-between; padding:13px 16px !important; margin:0 !important; border-top:1px solid #fff; font-size:14px; box-sizing:border-box; background:transparent; border-radius:0; }
#sod_frm #sod_bsk_tot li:first-child{ border-top:0; }
#sod_frm #sod_bsk_tot li::before, #sod_frm #sod_bsk_tot li::after{ content:none !important; display:none !important; }
#sod_frm #sod_bsk_tot li span{ color:var(--text-sub); }
#sod_frm #sod_bsk_tot li strong{ color:var(--ink); font-weight:700; }
#sod_frm #sod_bsk_tot li.sod_bsk_cnt{ background:var(--ink) !important; font-size:15px; }
#sod_frm #sod_bsk_tot li.sod_bsk_cnt span, #sod_frm #sod_bsk_tot li.sod_bsk_cnt strong{ color:#fff !important; }

/* 결제수단 선택 시 코어 스프라이트 아이콘 복원 — default_shop.css:464 `background:var(--ink)` 단축이 background-image를 제거하므로 PC 한정 재지정(모바일 #m_sod_frm_paysel은 원래 아이콘 없음) */
#sod_frm #sod_frm_paysel input[type=radio]:checked + label.bank_icon{ background:rgba(38,38,38,0.08) url('../../../img/pay_icon1.png') no-repeat 15px 50% !important; }
#sod_frm #sod_frm_paysel input[type=radio]:checked + label.card_icon{ background:rgba(38,38,38,0.08) url('../../../img/pay_icon4.png') no-repeat 17px 50% !important; }

/* === 개인결제(VIP) 결제수단 UI 심플화 — 빈 칸 숨김 + 버튼형 정렬 === */
#personal_pay .pay_way{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:8px 0 0; padding:0; }
#personal_pay .pay_way > li{ flex:0 0 auto; margin:0; padding:0; border:0; }
#personal_pay .pay_way > li:not(:has(input[type=radio])){ display:none !important; }   /* 비활성 결제수단 빈 칸 제거 */
#personal_pay .pay_way label.lb_icon{ display:inline-flex; align-items:center; min-width:130px; justify-content:center; padding:14px 20px; border:1px solid var(--hairline,#ececec); border-radius:10px; font-size:14px; font-weight:600; color:var(--ink,#262626); cursor:pointer; transition:all .15s; }
#personal_pay .pay_way label.lb_icon span{ display:none; }
#personal_pay .pay_way input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
#personal_pay .pay_way input[type=radio]:checked + label.lb_icon{ border:2px solid var(--ink,#262626); background:rgba(38,38,38,.06); }
#personal_pay #sod_frm_paysel{ border:0; padding:0; margin:0; }
#personal_pay #sod_frm_paysel legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ===== HB-REPFLIX-MAIN-GRID ===== */
.main-common{ max-width:1240px; margin:0 auto; padding:0 20px; }
.main-common .sct_slide{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:32px 20px !important; list-style:none; margin:0 auto; padding:0; float:none !important; }
.main-common .sct_li{ position:relative; width:auto !important; float:none !important; margin:0 !important; max-width:100% !important; }
.main-common .inner-wrap{ height:100%; display:flex; flex-direction:column; }
.main-common .sct_rank{ position:absolute; top:8px; left:8px; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; background:#212121; color:#fff; line-height:1; }
.main-common .sct_li:nth-child(1) .sct_rank, .main-common .sct_li:nth-child(2) .sct_rank, .main-common .sct_li:nth-child(3) .sct_rank{ background:#f84a71; }
.main-common .sct_rank .num{ font-size:15px; font-weight:800; }
.main-common .sct_rank .text{ font-size:8px; font-weight:600; letter-spacing:.03em; opacity:.9; margin-top:1px; }
/* 정사각 이미지 (padding-top 해킹 — aspect-ratio 미지원 대비) */
.main-common .sct_img{ position:relative; width:100% !important; height:0 !important; padding-top:100% !important; overflow:hidden; background:#f5f5f5; border-radius:10px; border:1px solid #eee; }
.main-common .sct_img img{ position:absolute !important; inset:0; top:0; left:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:contain !important; box-sizing:border-box !important; padding:7% !important; display:block; transition:transform .35s ease; }
.main-common .sct_li:hover .sct_img img{ transform:scale(1.04); }
.main-common .soldout-text{ position:absolute; inset:0; background:rgba(0,0,0,.45); color:#fff; font-weight:700; z-index:2; }
.main-common .item-icons-wrap{ top:8px; right:8px; left:auto; }
.main-common .sct_op_btn{ position:absolute; right:8px; bottom:8px; display:flex; gap:6px; opacity:0; transform:translateY(6px); transition:.25s ease; z-index:3; }
.main-common .sct_li:hover .sct_op_btn{ opacity:1; transform:none; }
.main-common .sct_op_btn button{ width:34px; height:34px; border:0; border-radius:50%; background:#fff; color:#212121; box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
.main-common .sct_op_btn button:hover{ background:#f84a71; color:#fff; }
.main-common .sct_op_btn .like_cnt{ font-size:10px; }
.main-common .sct_text{ padding:12px 2px 0; text-align:left; }
.main-common .sct_txt{ font-size:16px; line-height:1.45; color:#212121 !important; margin-bottom:6px; height:2.9em; overflow:hidden; white-space:normal !important; }
.main-common .sct_txt a{ color:#212121 !important; text-decoration:none; }
.main-common .sct_basic{ display:inline-block; font-size:11px; color:#f84a71; margin-bottom:4px; }
.main-common .discount-price{ font-size:12px; margin-bottom:2px; }
.main-common .discount-price .dc-price-percent{ color:#f84a71; font-weight:800; margin-right:4px; }
.main-common .discount-price .text-decoration-line-through{ color:#bbb; }
.main-common .sct_cost.item-price, .main-common .item-price{ font-size:16px; font-weight:800; color:#212121 !important; }
.main-common .sct_cost a, .main-common .item-price a{ color:#212121 !important; }
.main-common .sct_noitem{ grid-column:1/-1; text-align:center; color:#999; padding:40px 0; }
@media (max-width:991px){ .main-common .sct_slide{ grid-template-columns:repeat(3,1fr) !important; gap:24px 14px !important; } }
@media (max-width:767px){ .main-common{ padding:0 12px; } .main-common .sct_slide{ grid-template-columns:repeat(2,1fr) !important; gap:20px 12px !important; } }
/* HB-SLIDER-RESET */
.main-common .sct_slide .col,.main-common .sct_slide .sct_li{max-width:100% !important;min-width:0 !important;flex:none !important;}
.main-common .swiper-wrapper,.main-common .sct_slide{transform:none !important;}


/* ===== HB-REPFLIX-LIST-GRID ===== */
.hb-list-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:32px 20px !important; list-style:none; padding:0; margin:0; }
.hb-list-grid .sct_li{ max-width:100% !important; width:auto !important; float:none !important; margin:0 !important; position:relative; flex:none !important; }
.hb-list-grid .sct_img{ position:relative; width:100% !important; height:0 !important; padding-top:100% !important; overflow:hidden; background:#f5f5f5; border-radius:10px; border:1px solid #eee; }
.hb-list-grid .sct_img img{ position:absolute !important; inset:0; top:0; left:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:contain !important; box-sizing:border-box !important; padding:7% !important; transition:transform .35s ease; }
.hb-list-grid .sct_li:hover .sct_img img{ transform:scale(1.04); }
.hb-list-grid .sct_text{ padding:12px 2px 0; }
.hb-list-grid .sct_txt{ font-size:16px; color:#212121 !important; margin-bottom:6px; line-height:1.4; max-height:2.9em; overflow:hidden; }
.hb-list-grid .sct_txt a, .hb-list-grid .sct_cost a, .hb-list-grid .item-title{ color:#212121 !important; text-decoration:none; }
.hb-list-grid .sct_cost.item-price{ font-size:16px; font-weight:800; color:#212121 !important; }
.hb-list-grid .sct_basic{ font-size:11px; color:#f84a71; }
.hb-list-grid .sct_op_btn{ z-index:3; }
@media(max-width:991px){ .hb-list-grid{ grid-template-columns:repeat(3,1fr) !important; } }
@media(max-width:767px){ .hb-list-grid{ grid-template-columns:repeat(2,1fr) !important; gap:20px 12px !important; } }
/* ===== HB-CATNAV (repflix2 젠더 카테고리 페이지: 타이틀 + L2탭 + 서브카테고리 썸네일) ===== */
.hb-catnav-wrap{ max-width:1240px; margin:0 auto; padding:26px 20px 4px; }
.hb-catnav-title{ text-align:center; font-size:30px; font-weight:800; letter-spacing:.02em; margin:6px 0 22px; color:#212121; }
.hb-cattabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px 6px; list-style:none; padding:0 0 14px; margin:0 0 22px; border-bottom:1px solid #ededed; }
.hb-cattabs li{ margin:0; }
.hb-cattabs a{ display:block; padding:8px 16px; font-size:15px; color:#8a8a8a; text-decoration:none; font-weight:600; border-bottom:2px solid transparent; }
.hb-cattabs a.active{ color:#212121; border-bottom-color:#212121; }
.hb-cattabs a:hover{ color:#212121; }
.hb-catthumbs{ display:flex; flex-wrap:nowrap; justify-content:space-between; gap:0 10px; list-style:none; padding:0; margin:0 0 6px; }
.hb-catthumbs li{ flex:1 1 0; min-width:0; max-width:120px; margin:0; }
.hb-catthumbs a{ display:flex; flex-direction:column; align-items:center; text-decoration:none; }
/* repflix2 동일: 흰 배경 위 상품컷(박스·테두리 없음), contain 전체 노출 */
.hb-catthumbs .thumb{ width:92px; height:92px; max-width:100%; background:transparent; border:0; border-radius:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hb-catthumbs .thumb img{ width:100%; height:100%; object-fit:contain; }
.hb-catthumbs .nm{ margin-top:9px; font-size:14px; color:#333; text-align:center; line-height:1.3; word-break:keep-all; }
.hb-catthumbs a:hover .nm{ color:var(--color,#f84a71); }
.hb-catthumbs a:hover .thumb img{ transform:scale(1.05); transition:transform .25s; }
/* 코어 카테고리 셀렉트바 + '관련된 분류' 텍스트박스 숨김(썸네일 네비로 대체) */
.container.view-location, .list-category-sub-wrap{ display:none !important; }
@media (max-width:767px){
  .hb-catnav-wrap{ padding:16px 0 2px; }
  .hb-catnav-title{ font-size:23px; margin-bottom:16px; }
  .hb-cattabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:0 12px 12px; -webkit-overflow-scrolling:touch; }
  .hb-cattabs::-webkit-scrollbar{ display:none; }
  .hb-cattabs a{ padding:7px 11px; font-size:14px; white-space:nowrap; }
  /* 모바일: 썸네일 가로 스크롤(repflix2 동일) */
  .hb-catthumbs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:0 14px; padding:0 12px 4px; -webkit-overflow-scrolling:touch; }
  .hb-catthumbs::-webkit-scrollbar{ display:none; }
  .hb-catthumbs li{ flex:0 0 auto; width:70px; max-width:none; }
  .hb-catthumbs .thumb{ width:66px; height:66px; }
  .hb-catthumbs .nm{ font-size:12px; }
}

/* HB-DETAIL-BANNER */
.hb-detail-top,.hb-detail-bottom{max-width:640px;margin:0 auto;}
.hb-detail-top img,.hb-detail-bottom img{display:block;width:100%;height:auto;margin:0 auto;}
.hb-detail-top a{display:block;}

/* HB-FOOTER-LOGO */
.footer-logo img{height:40px;width:auto;filter:invert(1) brightness(2);}

/* ===== HB-BS-DISPLAY-UTILS (부트스트랩 미로드 대체) ===== */
.d-none{display:none !important;}
.d-inline{display:inline !important;}
.d-inline-block{display:inline-block !important;}
.d-block{display:block !important;}
.d-flex{display:flex !important;}
.d-grid{display:grid !important;}
@media (min-width:576px){ .d-sm-none{display:none !important;} .d-sm-block{display:block !important;} .d-sm-flex{display:flex !important;} }
@media (min-width:768px){ .d-md-none{display:none !important;} .d-md-block{display:block !important;} .d-md-inline-block{display:inline-block !important;} .d-md-flex{display:flex !important;} }
@media (min-width:992px){ .d-lg-none{display:none !important;} .d-lg-block{display:block !important;} .d-lg-flex{display:flex !important;} }
/* ===== HB-DETAIL-2COL (repflix2: 대표이미지 좌 / 구매정보 우, 상세이미지는 하단 상세정보) ===== */
@media (min-width:992px){
  #sit_ov_wrap{ flex-direction:row !important; align-items:flex-start !important; gap:0 44px !important; }
  #sit_pvi.item-image-wrap{ display:block !important; flex:0 0 50% !important; max-width:50% !important; width:50% !important; margin:0 !important; }
  #sit_ov.item-buy-info, .item-buy-info{ flex:1 1 auto !important; max-width:none !important; width:auto !important; order:0 !important; margin:0 !important; padding-left:0 !important; }
}
/* 좌측: 대표(첫) 이미지 1장만 정사각 노출. 나머지 스택/썸네일 숨김(상세는 하단 상세정보에) */
#sit_pvi_big{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; }
#sit_pvi_big > *:not(:first-child){ display:none !important; }
#sit_pvi_big > *:first-child, #sit_pvi .popup_item_image:first-child{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; }
#sit_pvi_big img, #sit_pvi .popup_item_image img{ width:100% !important; max-width:100% !important; height:auto !important; display:block !important; margin:0 !important; background:#f5f5f5; border:1px solid #eee; border-radius:10px; aspect-ratio:1/1; object-fit:contain; }
#sit_pvi_thumb{ display:none !important; }
/* 상세정보(it_explan) 하단 중앙 */
#sit_inf_explan, #sit_desc, .item-detail-explan{ max-width:640px; margin:34px auto 0; text-align:center; }
/* 전 상세이미지(배너·상품상세) 폭 640 통일 + 센터 (인라인 width 덮어씀) */
#sit_inf_explan img, #sit_desc img, .item-detail-explan img{ width:640px !important; max-width:100% !important; height:auto !important; display:block !important; margin-left:auto !important; margin-right:auto !important; }
#sit_inf_explan a, #sit_inf_explan p, #sit_inf_explan div{ text-align:center; }
.item-image-wrap img{ max-width:100%; height:auto; }
.sit_info .sit_ov_tbl td, .sit_info .sit_ov_tbl th{ white-space:normal; }

/* ===== HB-BUY-UX (우측 구매버튼 강화 + 모바일 하단고정 / PC 플로팅) ===== */
/* 우측 구매박스 버튼 크게·또렷하게 */
#sit_ov_btn.buy-button{ display:flex !important; gap:10px; margin-top:14px; }
#sit_ov_btn.buy-button .btn{ flex:1; height:56px; border-radius:10px; font-size:16px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
#sit_ov_btn.buy-button .btn.btn-secondary{ background:#fff !important; color:#212121 !important; border:1.5px solid #d9d9d9 !important; }
#sit_ov_btn.buy-button .btn.btn-secondary:hover{ border-color:#212121 !important; }
#sit_ov_btn.buy-button .btn.btn-primary{ background:#212121 !important; border:0 !important; color:#fff !important; }
#sit_ov_btn.buy-button .btn.btn-primary:hover{ background:#000 !important; }
/* PC: 구매박스가 스크롤 시 따라오도록 sticky (상품 옆 노출 강화) */
@media (min-width:992px){ #sit_ov.item-buy-info{ position:sticky; top:96px; align-self:flex-start; } }

/* 플로팅/고정 구매바 (JS로 생성) */
.hb-floatbuy{ position:fixed; z-index:1060; left:0; right:0; bottom:0; transform:translateY(130%); transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.hb-floatbuy.show{ transform:none; }
.hb-floatbuy .hb-fb-inner{ display:flex; align-items:center; gap:14px; }
.hb-floatbuy .hb-fb-name{ font-weight:700; font-size:15px; color:#212121; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.hb-floatbuy .hb-fb-price{ font-weight:800; font-size:17px; color:#f84a71; white-space:nowrap; }
.hb-floatbuy .hb-fb-btns{ display:flex; gap:8px; }
.hb-floatbuy .hb-fb-cart{ background:#fff; color:#212121; border:1.5px solid #d9d9d9; font-weight:800; border-radius:10px; cursor:pointer; }
.hb-floatbuy .hb-fb-cart:hover{ border-color:#212121; }
.hb-floatbuy .hb-fb-buy{ background:#212121; color:#fff; border:0; font-weight:800; border-radius:10px; cursor:pointer; }
.hb-floatbuy .hb-fb-buy:hover{ background:#000; }
/* 모바일: 하단 고정 풀바 */
@media (max-width:991px){
  .hb-floatbuy{ transform:translateY(130%); }
  .hb-floatbuy .hb-fb-inner{ background:#fff; border-top:1px solid #ececec; box-shadow:0 -3px 16px rgba(0,0,0,.08); padding:9px 12px calc(9px + env(safe-area-inset-bottom)); }
  .hb-floatbuy .hb-fb-info{ display:none; }
  .hb-floatbuy .hb-fb-btns{ flex:1; }
  .hb-floatbuy .hb-fb-cart, .hb-floatbuy .hb-fb-buy{ flex:1; height:52px; font-size:16px; }
  body.hb-fb-active{ padding-bottom:66px; }
}
/* PC: 하단 중앙 플로팅 카드 (스크롤 시 등장) */
@media (min-width:992px){
  .hb-floatbuy{ left:50%; right:auto; bottom:26px; transform:translate(-50%,150%); }
  .hb-floatbuy.show{ transform:translate(-50%,0); }
  .hb-floatbuy .hb-fb-inner{ background:#fff; border:1px solid #ececec; border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.16); padding:12px 14px 12px 22px; }
  .hb-floatbuy .hb-fb-info{ display:flex; flex-direction:column; margin-right:8px; }
  .hb-floatbuy .hb-fb-cart{ height:48px; padding:0 26px; }
  .hb-floatbuy .hb-fb-buy{ height:48px; padding:0 34px; }
}
/* ===== HB 메인 리뉴얼: repflix 진열 이식 (2026-07-31, ck20260731a) ===== */
/* 컬럼 수 오버라이드 (스킨 row-cols-3 대응) */
@media (min-width:768px){
  .hb-cols-4 .sct_slide.row > *{ width:25% !important; }
  .hb-cols-5 .sct_slide.row > *{ width:20% !important; }
}
@media (max-width:767px){
  .hb-cols-4 .sct_slide.row > *, .hb-cols-5 .sct_slide.row > *{ width:50% !important; }
}
/* 랭킹 뱃지: 랭킹 섹션에서만 노출, 순위 숫자 강조 */
.celeb-cards .sct_rank{ display:none; }
.hb-sec-rank .celeb-cards .inner-wrap{ position:relative; }
.hb-sec-rank .celeb-cards .sct_rank{ display:flex; position:absolute; top:10px; left:10px; z-index:6; width:34px; height:34px; align-items:center; justify-content:center; background:#212121; color:#fff; border-radius:4px; font-weight:800; font-size:16px; }
.hb-sec-rank .celeb-cards .sct_rank .text{ display:none; }
/* 인기 브랜드 그리드 */
.hb-brand-sec{ width:100%; }
.hb-brand-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px 12px; }
.hb-brand-cell{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:#212121; border:1px solid #eee; border-radius:8px; padding:14px 6px 12px; background:#fff; transition:transform .25s, box-shadow .25s; }
.hb-brand-cell:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.hb-brand-cell img{ width:100%; max-width:110px; aspect-ratio:1/1; object-fit:contain; }
.hb-brand-cell span{ font-size:13px; font-weight:600; }
@media (max-width:767px){ .hb-brand-grid{ grid-template-columns:repeat(3,1fr); gap:10px 8px; padding:0 10px; } .hb-brand-cell img{ max-width:80px; } }
/* 모바일 페이지의 브랜드 섹션(PC용 마크업 공용) 여백 보정 */
@media (max-width:767px){ .hb-brand-sec header.text-center{ padding:0 10px; } }
/* 리뷰 자리(소스 연동 전) */
.hb-review-placeholder{ min-height:120px; border:1px dashed #ddd; border-radius:8px; background:#fafafa; }
/* 섹션 부제(모바일 랭킹 시각) */
.hb-sec-sub{ font-size:12px; color:#999; font-weight:400; margin-left:6px; }

/* ===== HB 진열 그리드 (root skin sct_grid_hb 변형 대응, ck20260731b) ===== */
.celeb-cards .sct_slide.sct_grid_hb{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 16px; width:100%; }
.celeb-cards .sct_slide.sct_grid_hb[data-value='4']{ grid-template-columns:repeat(4,1fr); }
.celeb-cards .sct_slide.sct_grid_hb[data-value='5']{ grid-template-columns:repeat(5,1fr); gap:24px 12px; }
.celeb-cards .sct_slide.sct_grid_hb .sct_li{ min-width:0; }
@media (max-width:991px){
  .celeb-cards .sct_slide.sct_grid_hb, .celeb-cards .sct_slide.sct_grid_hb[data-value='4'], .celeb-cards .sct_slide.sct_grid_hb[data-value='5']{ grid-template-columns:repeat(3,1fr); gap:20px 10px; }
}
@media (max-width:767px){
  .celeb-cards .sct_slide.sct_grid_hb, .celeb-cards .sct_slide.sct_grid_hb[data-value='4'], .celeb-cards .sct_slide.sct_grid_hb[data-value='5']{ grid-template-columns:repeat(2,1fr); gap:16px 8px; }
}
/* 카드 이미지가 그리드 셀 폭에 맞도록 */
.celeb-cards .sct_grid_hb .sct_img img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }

/* ===== 랭킹 뱃지 노출 범위 보정 (스킨 인라인 스타일 대응, ck20260731c) ===== */
/* 인라인 _celeb_card_style.php가 뒤에 로드되어 이기므로 !important 국소 사용 */
.celeb-cards .sct_rank{ display:none !important; }
.hb-sec-rank .celeb-cards .sct_rank{ display:flex !important; background:#212121 !important; color:#fff !important; }

/* ===== 브랜드샵 페이지 (repflix /1137 이식, ck20260731d) ===== */
.hb-bs{ max-width:1280px; margin:0 auto; padding:24px 16px 60px; display:flex; gap:28px; align-items:flex-start; }
.hb-bs-aside{ flex:0 0 210px; position:sticky; top:150px; }
.hb-bs-aside-tt{ font-size:18px; font-weight:800; padding:2px 2px 12px; border-bottom:2px solid #212121; }
.hb-bs-brands{ list-style:none; margin:0; padding:0; }
.hb-bs-brands > li > a.bs-b{ display:flex; justify-content:space-between; align-items:center; padding:11px 2px; font-size:14px; font-weight:600; color:#333; text-decoration:none; border-bottom:1px solid #f0f0f0; }
.hb-bs-brands > li > a.bs-b:hover{ color:#000; }
.hb-bs-brands > li.on > a.bs-b{ color:#000; font-weight:800; }
.hb-bs-cats{ list-style:none; margin:4px 0 10px; padding:6px 0 6px 12px; background:#fafafa; border-radius:6px; }
.hb-bs-cats li a{ display:flex; justify-content:space-between; padding:7px 10px 7px 4px; font-size:13px; color:#666; text-decoration:none; }
.hb-bs-cats li a span{ color:#bbb; font-size:12px; }
.hb-bs-cats li.on a, .hb-bs-cats li a:hover{ color:#000; font-weight:700; }
.hb-bs-all{ display:block; margin-top:14px; padding:11px 0; text-align:center; border:1px solid #ddd; border-radius:20px; font-size:13px; color:#333; text-decoration:none; }
.hb-bs-all:hover{ border-color:#212121; }
.hb-bs-main{ flex:1; min-width:0; }
.hb-bs-hd{ padding:2px 0 16px; }
.hb-bs-hd h1{ font-size:24px; font-weight:800; margin:0; }
.hb-bs-hd p{ margin:6px 0 0; color:#999; font-size:13px; }
.hb-bs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 14px; }
.hb-bs-card{ display:block; text-decoration:none; color:inherit; min-width:0; }
.hb-bs-card .thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:6px; background:#f4f4f4; }
.hb-bs-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.hb-bs-card:hover .thumb img{ transform:scale(1.05); }
.hb-bs-card .thumb .so{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-weight:800; letter-spacing:1px; }
.hb-bs-card .nm{ margin-top:10px; font-size:14px; line-height:1.4; color:#222; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hb-bs-card .dc{ margin-top:4px; font-size:12.5px; color:#999; }
.hb-bs-card .dc b{ color:#f84a71; }
.hb-bs-card .pr{ margin-top:2px; font-size:15px; font-weight:800; }
.hb-bs-empty{ padding:90px 0; text-align:center; color:#aaa; }
.hb-bs-paging{ display:flex; justify-content:center; gap:6px; margin-top:36px; }
.hb-bs-paging a, .hb-bs-paging strong{ min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e5e5; border-radius:4px; font-size:13px; color:#555; text-decoration:none; }
.hb-bs-paging strong{ background:#212121; color:#fff; border-color:#212121; }
@media (max-width:991px){
  .hb-bs{ flex-direction:column; gap:14px; }
  .hb-bs-aside{ position:static; flex:none; width:100%; }
  .hb-bs-brands{ display:flex; overflow-x:auto; gap:6px; padding-bottom:6px; border-bottom:1px solid #eee; }
  .hb-bs-brands > li{ flex:0 0 auto; }
  .hb-bs-brands > li > a.bs-b{ border:1px solid #e5e5e5; border-radius:18px; padding:7px 14px; white-space:nowrap; font-size:13px; }
  .hb-bs-brands > li.on > a.bs-b{ background:#212121; color:#fff; border-color:#212121; }
  .hb-bs-brands > li > a.bs-b i{ display:none; }
  .hb-bs-brands > li.on .hb-bs-cats{ position:absolute; left:0; right:0; margin-top:8px; display:flex; overflow-x:auto; gap:4px; background:#fff; padding:6px 10px; }
  .hb-bs-brands{ position:relative; }
  .hb-bs-brands > li.on{ position:static; }
  .hb-bs-cats li{ flex:0 0 auto; }
  .hb-bs-cats li a{ border:1px solid #eee; border-radius:14px; padding:5px 10px; font-size:12px; white-space:nowrap; }
  .hb-bs-main{ margin-top:52px; }
  .hb-bs-grid{ grid-template-columns:repeat(2,1fr); gap:18px 10px; }
}

/* ===== 브랜드샵 모바일 카테고리 칩 (ck20260731e) ===== */
.hb-bs-cats-mo{ display:none; }
@media (max-width:991px){
  .hb-bs-brands > li.on .hb-bs-cats{ display:none; }
  .hb-bs-main{ margin-top:0; }
  .hb-bs-cats-mo{ display:flex; overflow-x:auto; gap:6px; padding:2px 0 12px; }
  .hb-bs-cats-mo a{ flex:0 0 auto; border:1px solid #e5e5e5; border-radius:15px; padding:6px 12px; font-size:12.5px; color:#555; text-decoration:none; white-space:nowrap; }
  .hb-bs-cats-mo a.on{ background:#212121; color:#fff; border-color:#212121; }
}

/* ===== 브랜드샵 모바일 폭 교정 (ck20260731f) =====
   .hb-bs의 align-items:flex-start가 column 방향에선 가로 스트레치를 막아
   .hb-bs-main이 콘텐츠 폭(이미지 400px×2)으로 넘치던 문제 */
@media (max-width:991px){
  .hb-bs{ align-items:stretch; }
  .hb-bs-main{ width:100%; max-width:100%; }
  .hb-bs-grid{ max-width:100%; }
  .hb-bs-card .thumb img{ max-width:100%; }
}

/* ===== 브랜드샵 페이징 모바일 줄바꿈 (ck20260731g) — 페이징 오버플로가 body 412px를 만들던 문제 ===== */
.hb-bs-paging{ flex-wrap:wrap; }
@media (max-width:991px){
  .hb-bs-paging{ gap:5px; }
  .hb-bs-paging a, .hb-bs-paging strong{ min-width:31px; height:31px; font-size:12.5px; }
}

/* ===== 상품 상세: 상품명 확대 + 옵션 UI (repflix 이식, ck20260731h) ===== */
#sit_title{
  font-size:26px !important; font-weight:800 !important; line-height:1.35;
  letter-spacing:-0.6px; color:#111; margin:2px 0 10px; word-break:keep-all;
}
@media (max-width:767px){ #sit_title{ font-size:20px !important; } }

/* 옵션 그룹(필수/추가 공통) */
#sit_ov .get_item_options,
#sit_ov .get_item_supply{ margin:0 0 16px; }
#sit_ov .get_item_options .label-title,
#sit_ov .get_item_supply .label-title{
  display:block; margin:0 0 7px; font-size:13px; font-weight:700; color:#222;
}
/* 필수 표시(*) — repflix 스타일 */
#sit_ov .get_item_options .label-title::after{
  content:" *"; color:#f84a71; font-weight:800;
}
#sit_ov .get_item_options select,
#sit_ov .get_item_supply select{
  width:100%; height:48px; padding:0 38px 0 14px;
  border:1px solid #ddd; border-radius:4px; background:#fff;
  font-size:14px; color:#222; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px 18px;
}
#sit_ov .get_item_options select:focus,
#sit_ov .get_item_supply select:focus{ border-color:#212121; outline:none; }
#sit_ov .get_item_options select:disabled{ background-color:#f7f7f7; color:#aaa; cursor:not-allowed; }
/* 추가옵션(통관보증) 라벨은 '선택' 배지 */
#sit_ov .get_item_supply .label-title::after{
  content:" 선택"; margin-left:5px; padding:2px 6px; border-radius:3px;
  background:#f2f2f2; color:#888; font-size:11px; font-weight:600; vertical-align:middle;
}
/* 선택옵션 개수 안내바 숨김(옵션 없는 상품에서 '0 개' 노출 방지) */
#sit_opt_info{ display:none !important; }
/* 선택된 옵션 리스트 정돈 */
#sit_sel_option #sit_opt_added .sit_opt_list{
  border:1px solid #eee; border-radius:6px; padding:12px 14px; margin-bottom:8px; background:#fafafa;
}
#sit_sel_option .sit_opt_subj{ font-size:13.5px; color:#333; }

/* ===== 옵션 라벨 보정 (ck20260731i) =====
   단일 그룹 옵션은 코어가 label에 .label-title 을 붙이지 않아(shop.lib.php 다중/단일 분기)
   필수표시가 누락된다. .get_item_options 안의 label 전체를 대상으로 통일한다. */
#sit_ov .get_item_options label,
#sit_ov .get_item_supply label{
  display:block; margin:0 0 7px; font-size:13px; font-weight:700; color:#222;
}
#sit_ov .get_item_options label::after{ content:" *"; color:#f84a71; font-weight:800; }
#sit_ov .get_item_supply label::after{
  content:" 선택"; margin-left:5px; padding:2px 6px; border-radius:3px;
  background:#f2f2f2; color:#888; font-size:11px; font-weight:600; vertical-align:middle;
}
/* 중복 방지: label-title 전용 규칙은 위 공통 규칙으로 흡수 */
#sit_ov .get_item_options .label-title::after{ content:" *"; }
#sit_ov .get_item_supply .label-title::after{ content:" 선택"; }

/* ===== 선택된 옵션 목록 정돈 (ck20260731j) ===== */
#sit_sel_option ul{ list-style:none; margin:14px 0 0; padding:0; }
#sit_sel_option li{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  border:1px solid #eee; border-radius:6px; background:#fafafa; padding:12px 14px; margin-bottom:8px; }
#sit_sel_option li .opt_name, #sit_sel_option li > span:first-child{ flex:1 1 100%; font-size:13.5px; color:#333; }
#sit_sel_option li button{
  width:30px; height:30px; padding:0; border:1px solid #ddd; border-radius:4px;
  background:#fff; color:#555; font-size:12px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
#sit_sel_option li button:hover{ border-color:#212121; color:#111; }
#sit_sel_option li button .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#sit_sel_option li input.num_input, #sit_sel_option li input[type=text]{
  width:46px; height:30px; text-align:center; border:1px solid #ddd; border-radius:4px; font-size:13px;
}
#sit_sel_option li .sit_opt_prc{ margin-left:auto; font-size:13.5px; font-weight:700; color:#222; }
/* 총 금액 */
#sit_tot_price{ margin-top:14px; padding-top:14px; border-top:2px solid #212121;
  font-size:15px; align-items:baseline; }
#sit_tot_price strong{ font-size:24px; font-weight:800; color:#111; }

/* ===== 선택옵션 버튼 최종 보정 (ck20260731k) =====
   버튼 안 .visually-hidden 텍스트(감소/증가/삭제)가 노출돼 줄바꿈되던 문제 교정 */
#sit_sel_option li button .visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
#sit_sel_option li button{ position:relative; flex:0 0 auto; overflow:hidden; }
/* 아이콘 폰트 미로드 대비 문자 폴백 */
#sit_sel_option li button.sit_qty_minus::before{ content:"−"; font-size:15px; }
#sit_sel_option li button.sit_qty_plus::before{ content:"+"; font-size:15px; }
#sit_sel_option li button.sit_opt_del::before,
#sit_sel_option li button.sit_spl_del::before{ content:"×"; font-size:16px; }
#sit_sel_option li button i{ display:none; }
/* 수량/가격 정렬 */
#sit_sel_option li .opt_count{ display:flex; align-items:center; gap:6px; width:100%; }
#sit_sel_option li .sit_opt_prc{ margin-left:auto; padding-right:6px; }

/* ===== 선택옵션 버튼: shop.js 생성 마크업은 .sound_only 사용 (ck20260731l) ===== */
#sit_sel_option li button .sound_only,
#sit_sel_option li button .visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* ===== 목록/검색: 정렬 드롭다운 + 페이지네이션 (repflix 이식, ck20260731m) ===== */
/* 원본 정렬 링크 목록 숨김(hb-ui.js가 드롭다운으로 대체) */
.item-sort-wrap ul.list-group.hb-sort-origin{ display:none !important; }
.hb-sort-wrap{ display:flex; justify-content:flex-end; padding:6px 0 14px; }
.hb-sort{
  height:38px; min-width:150px; padding:0 34px 0 14px;
  border:1px solid #ddd; border-radius:4px; background:#fff;
  font-size:13.5px; color:#333; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px 16px;
}
.hb-sort:focus{ border-color:#212121; outline:none; }
.item-sort-wrap{ border:0 !important; }

/* 페이지네이션: 중앙 정렬 + 박스형 (코어 pg_wrap/pg/pg_page 구조) */
.pg_wrap{ display:flex; justify-content:center; margin:38px 0 10px; padding:0; }
.pg_wrap .pg{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; }
.pg_wrap .pg_page, .pg_wrap .pg_current{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border:1px solid #e5e5e5; border-radius:4px; background:#fff;
  font-size:13.5px; color:#555 !important; text-decoration:none !important; font-weight:500;
}
.pg_wrap .pg_page:hover{ border-color:#212121; color:#111 !important; }
.pg_wrap .pg_current{ background:#212121; border-color:#212121; color:#fff !important; font-weight:700; }
.pg_wrap .pg_start, .pg_wrap .pg_prev, .pg_wrap .pg_next, .pg_wrap .pg_end{ color:#888 !important; }
.pg_wrap .sound_only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:767px){
  .pg_wrap{ margin:26px 0 6px; }
  .pg_wrap .pg{ gap:5px; }
  .pg_wrap .pg_page, .pg_wrap .pg_current{ min-width:32px; height:32px; padding:0 8px; font-size:12.5px; }
  .hb-sort-wrap{ padding:4px 10px 12px; }
}

/* ===== 고객리뷰 (게시판 real 이관, ck20260731n) ===== */
/* 메인 리뷰 카드 그리드 */
.hb-rv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px 16px; }
.hb-rv-card{ display:block; text-decoration:none; color:inherit; min-width:0; }
.hb-rv-card .thumb{ aspect-ratio:1/1; overflow:hidden; border-radius:6px; background:#f4f4f4; }
.hb-rv-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.hb-rv-card:hover .thumb img{ transform:scale(1.05); }
.hb-rv-card .cap{ padding:11px 2px 0; }
.hb-rv-card .star{ color:#f5a623; font-size:13px; letter-spacing:1px; }
.hb-rv-card .tt{ margin-top:5px; font-size:14px; font-weight:700; color:#111; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.hb-rv-card .pd{ margin-top:3px; font-size:12px; color:#888; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.hb-rv-card .tx{ margin:6px 0 0; font-size:13px; color:#555; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hb-rv-card .meta{ margin-top:7px; font-size:12px; color:#aaa; }
@media (max-width:991px){ .hb-rv-grid{ grid-template-columns:repeat(3,1fr); gap:20px 12px; } }
@media (max-width:767px){ .hb-rv-grid{ grid-template-columns:repeat(2,1fr); gap:18px 10px; padding:0 10px; } }

/* 게시판 본문의 이관 구조(상품박스·별점·후기사진) */
.hb-rv-prod{ display:flex; gap:14px; align-items:center; border:1px solid #eee; border-radius:8px; padding:12px 14px; background:#fafafa; margin-bottom:16px; }
.hb-rv-prod .thumb{ flex:0 0 76px; }
.hb-rv-prod .thumb img{ width:76px; height:76px; object-fit:cover; border-radius:6px; display:block; }
.hb-rv-prod .info .nm{ font-size:14.5px; font-weight:700; color:#222; text-decoration:none; }
.hb-rv-prod .info .nm:hover{ text-decoration:underline; }
.hb-rv-prod .info .pr{ margin:5px 0 0; font-size:13.5px; color:#f84a71; font-weight:700; }
.hb-rv-star{ color:#f5a623; font-size:17px; letter-spacing:2px; margin-bottom:14px; }
.hb-rv-star span{ margin-left:6px; font-size:13px; color:#888; letter-spacing:0; }
.hb-rv-body{ font-size:15px; color:#333; line-height:1.75; }
.hb-rv-body p{ margin:0 0 10px; }
.hb-rv-img{ margin:0 0 14px !important; }
.hb-rv-img img{ max-width:100%; height:auto; border-radius:6px; display:block; }

/* ===== 검수사진 게시판 (ck20260731o) ===== */
.hb-ins-desc{ font-size:14.5px; color:#444; line-height:1.7; margin-bottom:16px; }
.hb-ins-body{ display:block; }
.hb-ins-img{ margin:0 0 12px !important; }
.hb-ins-img img{ max-width:100%; height:auto; border-radius:6px; display:block; margin:0 auto; }

/* ===== 상품 검색 결과 페이지 정돈 (파란 링크 → 칩, ck20260731p) ===== */
/* 분류 필터: 기본 파란 링크 나열 → 회색 칩 */
#sch_result .result-category,
.result-category{ margin-top:18px !important; padding:14px 0 4px; border-top:1px solid #f0f0f0; }
.result-category .cate-item{ flex:0 0 auto !important; padding:0 !important; margin:0 6px 8px 0 !important; }
.result-category .cate-item a{
  display:inline-block; padding:7px 14px; border:1px solid #e5e5e5; border-radius:18px;
  background:#fff; color:#555 !important; font-size:13px; text-decoration:none !important;
  white-space:nowrap; transition:border-color .2s, color .2s, background .2s;
}
.result-category .cate-item a:hover{ border-color:#212121; color:#111 !important; }
.result-category .cate-item a span{ color:#aaa; }
/* 첫 항목(전체분류) 강조 */
.result-category .cate-item:first-child a{ background:#212121; border-color:#212121; color:#fff !important; }
.result-category .cate-item:first-child a span{ color:rgba(255,255,255,.7); }

/* 검색 안내문(하늘색 박스) 톤다운 */
#sch_result .alert-info, .sch-help, #sch_frm .alert,
#sch_result [class*="bg-info"], #sch_result .form-text{
  background:#fafafa !important; border:1px solid #eee !important; color:#888 !important;
  font-size:12.5px !important; border-radius:6px;
}
/* 검색 폼 정돈 */
#sch_result .container > .row, #sch_frm{ align-items:center; }
#sch_result input[type=text].form-inline,
#sch_result input[type=text].frm_input{
  height:40px; border:1px solid #ddd !important; border-radius:4px; padding:0 12px; font-size:13.5px;
}
#sch_result .btn, #sch_frm .btn{ border-radius:4px; }
/* 검색 결과 제목 */
#sch_result h2, .sch-title{ font-size:20px; font-weight:800; color:#111; }
@media (max-width:767px){
  .result-category{ padding:12px 10px 2px; }
  .result-category .cate-item a{ padding:6px 12px; font-size:12.5px; }
}

/* ===== 검색 페이지 안내문·버튼 톤 정리 (hb-ui.js가 body.hb-search 부여, ck20260731q) ===== */
.hb-search .alert-info{
  background:#fafafa !important; border:1px solid #eee !important; color:#999 !important;
  font-size:12.5px !important; border-radius:6px;
}
.hb-search .btn-outline-primary{
  border-color:#212121 !important; color:#212121 !important; background:#fff !important;
}
.hb-search .btn-outline-primary:hover{ background:#212121 !important; color:#fff !important; }
.hb-search input.form-control{ height:40px; border:1px solid #ddd; border-radius:4px; font-size:13.5px; }
.hb-search a{ color:#555; }

/* ===== 상품 뱃지 A안: 모노톤 + 포인트 1색 (ck20260731r) =====
   히트/추천/최신/인기 = 검정, 할인 = 브랜드 포인트 핑크. 텍스트는 흰색.
   뱃지가 2개 이상이면 세로로 쌓이도록 래퍼를 flex column 으로. */
.item-icons-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; z-index:4; }
.item-icons-wrap .sit_icon{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.shop_icon{
  display:inline-block !important;
  background:#212121; color:#fff !important;
  font-size:11px; font-weight:700; line-height:1; letter-spacing:.2px;
  padding:5px 9px; border-radius:3px; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.shop_icon_5{ background:#f84a71; }          /* 할인 */
/* 쿠폰 등 기타 뱃지도 같은 톤 유지 */
.sit_icon .shop_icon + .shop_icon{ margin-left:0; }
@media (max-width:767px){
  .shop_icon{ font-size:10px; padding:4px 7px; }
  .item-icons-wrap, .item-icons-wrap .sit_icon{ gap:3px; }
}

/* ===== 최하단 모바일 메뉴바 숨김 (2026-08-01, 사용자 요청, ck20260801a) =====
   shop.tail.php 에서 마크업 자체를 주석 처리했고, 캐시된 페이지·다른 tail 경로 대비해
   CSS로도 이중 차단한다. 되돌리려면 이 블록과 shop.tail.php 의 주석을 함께 해제할 것. */
.mobile-bottom-menu,
.sticky-bottom.mobile-bottom-menu,
.view-mobile-bottom-menu{ display:none !important; }

/* ===== 옵션 선택 시트 (플로팅 구매바에서 열림, ck20260801b) =====
   모바일=하단 바텀시트 / PC=가운데 모달. 본문에는 상품페이지의 옵션 영역이 그대로 옮겨온다. */
.hb-optsheet{ position:fixed; inset:0; z-index:1090; display:none; }
.hb-optsheet.show{ display:block; }
.hb-os-dim{ position:absolute; inset:0; background:rgba(0,0,0,.45); animation:hbOsFade .2s ease; }
.hb-os-panel{
  position:absolute; left:0; right:0; bottom:0; max-height:86vh; display:flex; flex-direction:column;
  background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.18);
  animation:hbOsUp .26s cubic-bezier(.25,.8,.35,1);
}
.hb-os-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid #f0f0f0; }
.hb-os-head strong{ font-size:16px; font-weight:800; color:#111; }
.hb-os-x{ width:32px; height:32px; border:0; background:none; font-size:26px; line-height:1; color:#888; cursor:pointer; }
.hb-os-x:hover{ color:#111; }
.hb-os-body{ padding:16px 18px 6px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hb-os-body .sit_option h3{ font-size:13px; font-weight:700; color:#444; margin:0 0 8px; }
.hb-os-body #sit_tot_price{ margin-top:12px; }
.hb-os-foot{ display:flex; gap:8px; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid #f0f0f0; background:#fff; }
.hb-os-foot button{ flex:1; height:52px; border:0; border-radius:6px; font-size:15px; font-weight:700; cursor:pointer; }
.hb-os-cart{ background:#fff; color:#212121; border:1px solid #212121 !important; }
.hb-os-cart:hover{ background:#f6f6f6; }
.hb-os-buy{ background:#212121; color:#fff; }
.hb-os-buy:hover{ background:#000; }
body.hb-os-open{ overflow:hidden; }
/* 옵션 미선택 상태로 확정 시 흔들어 알림(알림창 대체) */
.hb-os-shake{ animation:hbOsShake .35s; }
@keyframes hbOsFade{ from{opacity:0} to{opacity:1} }
@keyframes hbOsUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes hbOsShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@media (min-width:992px){
  .hb-os-panel{
    left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
    width:460px; max-height:82vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.28);
    animation:hbOsPop .22s cubic-bezier(.25,.8,.35,1);
  }
  @keyframes hbOsPop{ from{opacity:0; transform:translate(-50%,-46%)} to{opacity:1; transform:translate(-50%,-50%)} }
}

/* ===== 상품 상세 상단 정리 (ck20260801c) =====
   1) '상품평 0 개' 숨김 — 후기는 상품별 사용후기가 아니라 고객리뷰 게시판(real)으로 운영하므로
      항상 0으로 노출돼 신뢰도만 떨어뜨린다.
   2) 위시/공유 아이콘(#sit_btn_opt)이 position:absolute(top:30px)로 판매가격 행 위에 겹쳐 있던 것을
      문서 흐름으로 되돌려 우측 정렬. (PC·모바일 모두 겹침 실측 확인) */
#sit_desc .item-star{ display:none !important; }
/* #sit_ov(flex column) 안에서 #sit_desc 가 콘텐츠 폭(63px)으로 쪼그라들어 아이콘이 가운데로 몰리던 문제 */
#sit_desc{ width:100%; }
#sit_btn_opt{
  position:static !important;
  display:flex !important; width:100%; justify-content:flex-end; align-items:center;
  margin:0 0 6px; padding:0;
}
#sit_btn_opt .dropdown{ display:flex; align-items:center; gap:2px; }
#sit_btn_opt .btn{ padding:4px 8px; }
#sit_btn_opt .wish-count{ font-size:12px; }

/* ===== 장바구니 담기 결과 모달 (ck20260801f) =====
   장바구니는 페이지 이동 대신 숨김 iframe 으로 담고 이 모달로 결과를 알린다. */
.hb-cartmodal{ position:fixed; inset:0; z-index:1100; display:none; }
.hb-cartmodal.show{ display:block; }
.hb-cm-dim{ position:absolute; inset:0; background:rgba(0,0,0,.45); animation:hbCmFade .18s ease; }
.hb-cm-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px, calc(100vw - 40px)); background:#fff; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.28); overflow:hidden; animation:hbCmPop .2s cubic-bezier(.25,.8,.35,1);
}
.hb-cm-body{ padding:30px 24px 22px; text-align:center; }
.hb-cm-check{ display:block; margin:0 auto 14px; line-height:0; }
.hb-cm-body strong{ display:block; font-size:17px; font-weight:800; color:#111; }
.hb-cm-name{
  margin:9px 0 0; font-size:13.5px; color:#666; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hb-cm-foot{ display:flex; gap:8px; padding:0 20px 20px; }
.hb-cm-foot button{ flex:1; height:50px; border:0; border-radius:6px; font-size:14.5px; font-weight:700; cursor:pointer; }
.hb-cm-keep{ background:#fff; color:#212121; border:1px solid #ddd !important; }
.hb-cm-keep:hover{ border-color:#212121 !important; background:#fafafa; }
.hb-cm-go{ background:#212121; color:#fff; }
.hb-cm-go:hover{ background:#000; }
body.hb-cm-open{ overflow:hidden; }
@keyframes hbCmFade{ from{opacity:0} to{opacity:1} }
@keyframes hbCmPop{ from{opacity:0; transform:translate(-50%,-46%)} to{opacity:1; transform:translate(-50%,-50%)} }
@media (max-width:767px){
  .hb-cm-body{ padding:26px 20px 18px; }
  .hb-cm-foot button{ height:48px; font-size:14px; }
}

/* ===== 이전/다음 상품 이동 (ck20260801g) =====
   텍스트('이전상품 · 상품명')를 화살표 버튼으로 바꾸고,
   이전=장바구니 버튼 왼쪽 끝 / 다음=바로구매 버튼 오른쪽 끝에 맞춘다. */
.order-item-button{
  justify-content:space-between !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-top:12px !important;
}
#siblings_prev, #siblings_next{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; box-sizing:border-box;
  border:1px solid #e0e0e0; border-radius:6px; background:#fff;
  color:#555 !important; text-decoration:none !important;
  font-size:0;                      /* 링크 텍스트·상품명 숨김(스크린리더는 그대로 읽음) */
  transition:border-color .2s, color .2s, background .2s;
}
#siblings_prev::before{ content:"\2039"; font-size:26px; line-height:1; }
#siblings_next::before{ content:"\203A"; font-size:26px; line-height:1; }
#siblings_prev:hover, #siblings_next:hover{ border-color:#212121; color:#111 !important; background:#fafafa; }
/* 한쪽만 있을 때(첫/마지막 상품)도 반대편 끝 정렬이 유지되도록 */
.order-item-button #siblings_next:only-child{ margin-left:auto; }
@media (max-width:767px){
  #siblings_prev, #siblings_next{ width:40px; height:40px; }
  #siblings_prev::before, #siblings_next::before{ font-size:23px; }
}


/* ===== ck20260801h : 실시간 랭킹 기준시각 스톱워치 ===== */
/* .hb-rank-clock — 플립 클록(ck20260801r)으로 대체됨 */


/* ===== ck20260801i : 진열 상품명 16px =====
   진열 스킨이 페이지에 직접 심는 <style>(.celeb-cards/.celeb-list .sct_txt{font-size:1.05rem})이
   이 파일보다 뒤에 로드돼 특이도가 같으면 항상 이긴다. 그래서 !important 로만 덮을 수 있다.
   (html{font-size:62.5%} 이므로 1.05rem = 10.5px 였음) */
.celeb-cards .sct_txt, .celeb-list .sct_txt,
.main-common .sct_txt, .hb-list-grid .sct_txt,
.celeb-cards .sct_txt a, .celeb-list .sct_txt a,
.main-common .sct_txt a, .hb-list-grid .sct_txt a,
.hb-list-grid .item-title, .hb-list-grid .item-title a{
  font-size:16px !important; line-height:1.4 !important;
}

/* 16px 로 키우면 좁은 칸(모바일)에서 이름이 3줄이 돼 중간이 잘렸다.
   2줄 말줄임(…)으로 고정해 카드 높이도 어긋나지 않게 한다. */
.celeb-cards .sct_txt, .celeb-list .sct_txt,
.main-common .sct_txt, .hb-list-grid .sct_txt{
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  white-space:normal !important; overflow:hidden !important;
  height:auto !important; min-height:2.8em; max-height:2.8em;
}

/* ===== ck20260801k : 모바일 상품명 13px ===== */
@media (max-width:767.98px){
  .celeb-cards .sct_txt, .celeb-list .sct_txt,
  .main-common .sct_txt, .hb-list-grid .sct_txt,
  .celeb-cards .sct_txt a, .celeb-list .sct_txt a,
  .main-common .sct_txt a, .hb-list-grid .sct_txt a,
  .hb-list-grid .item-title, .hb-list-grid .item-title a{
    font-size:13px !important;
  }
}

/* ===== ck20260801l : 랭킹 헤더 LIVE 표시 ===== */
.hb-rank-meta{ display:flex; align-items:center; justify-content:center; gap:7px; }
.hb-rank-live{ width:7px; height:7px; border-radius:50%; background:#e53935; animation:hb-live-pulse 1.6s ease-in-out infinite; }
@keyframes hb-live-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.75); } }
@media (prefers-reduced-motion:reduce){ .hb-rank-live{ animation:none !important; } }

/* ===== ck20260801n : 랭킹 순위 교체 연출(B안) — 뱃지 롤링 + ▲▼ 변동 표시 ===== */
.hb-sec-rank .sct_rank{ overflow:visible; }
.hb-sec-rank .sct_rank .num{ display:inline-block; }
.hb-sec-rank .sct_rank.is-rolling .num{ animation:hb-rank-roll .55s cubic-bezier(.2,.8,.2,1); }
@keyframes hb-rank-roll{
  0%{ transform:translateY(-95%); opacity:0; }
  55%{ transform:translateY(8%); opacity:1; }
  100%{ transform:none; opacity:1; }
}
/* 뱃지(34px 정사각) 안에 넣으면 숫자 밑으로 눌려 들어가 안 보인다 → 뱃지 오른쪽 바깥에 알약으로 띄운다 */
.hb-rank-delta{
  position:absolute; left:100%; top:7px; margin-left:6px;
  display:inline-block !important; white-space:nowrap;
  padding:3px 7px; border-radius:999px; background:#fff;
  font-size:12px; font-weight:800; line-height:1; letter-spacing:-.02em;
  box-shadow:0 1px 4px rgba(0,0,0,.22); animation:hb-delta-pop 2.2s ease forwards;
}
.hb-rank-delta.up{ color:#e5342f; }
.hb-rank-delta.down{ color:#2f6fe0; }
@keyframes hb-delta-pop{
  0%{ opacity:0; transform:translateY(5px); }
  12%{ opacity:1; transform:none; }
  76%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-4px); }
}
@media (prefers-reduced-motion:reduce){
  .hb-sec-rank .sct_rank.is-rolling .num, .hb-rank-delta{ animation:none !important; }
}

/* ===== ck20260801p : 랭킹 FLIP 재정렬 =====
   좌표 계산은 hb-ui.js 가 하고, CSS는 transform 트랜지션만 맡는다.
   top/left/margin 은 쓰지 않는다(레이아웃 재계산 없이 합성만으로 움직이기 위해). */
.ranking-card{
  position:relative; will-change:transform;
  backface-visibility:hidden; transform:translateZ(0);
}
.ranking-card.is-reordering{
  /* duration 은 hb-ui.js 가 이동 거리에 따라 --rank-dur 로 넣는다(1000~1500ms).
     시작 좌표(--rank-dx/dy)와 중간 비켜감(--rank-ax/ay)도 JS 가 넣는다.
     두 카드가 같은 선 위에서 지나가면 위 카드가 아래 카드를 완전히 가려
     '순간 교체'처럼 보이므로, 중간 지점에서 서로 반대쪽으로 살짝 비켜 간다. */
  animation: rank-arc var(--rank-dur, 1200ms) cubic-bezier(0.45, 0.02, 0.2, 1) both;
  transition: box-shadow 500ms ease;
  z-index:2;                                     /* 이동 중인 카드가 이웃 밑으로 들어가지 않게 */
}
@keyframes rank-arc{
  from{ transform:translate3d(var(--rank-dx,0px), var(--rank-dy,0px), 0); }
  50% { transform:translate3d(calc(var(--rank-dx,0px)/2 + var(--rank-ax,0px)),
                              calc(var(--rank-dy,0px)/2 + var(--rank-ay,0px)), 0); }
  to  { transform:translate3d(0,0,0); }
}
.ranking-card.rank-moving-up .sct_img{ box-shadow:0 10px 28px rgba(20,20,20,.14); }
.ranking-card.rank-moving-up{ z-index:3; }       /* 올라가는 카드가 위로 */

/* 이동이 끝나갈 때 상승 카드만 은은하게 — 배경·테두리는 건드리지 않는다 */
.ranking-card.rank-moved-up .sct_img{ animation:rank-settle-highlight 900ms ease-out; }
@keyframes rank-settle-highlight{
  0%{ box-shadow:0 0 0 0 rgba(20,20,20,0); }
  35%{ box-shadow:0 8px 24px rgba(20,20,20,.08); }
  100%{ box-shadow:0 0 0 0 rgba(20,20,20,0); }
}

.hb-sec-rank .sct_slide{ overflow:visible; }     /* 이동 중 카드가 잘리지 않게 */

/* 2줄을 넘는 카드는 숨긴다(순위가 오르면 다시 나타난다) */
.ranking-card.hb-rank-out{ display:none !important; }
/* 노출 밖에서 순위에 진입하는 카드 — 아래에서 올라오면서 서서히 드러난다 */
.ranking-card.hb-rank-rise .inner-wrap{ animation:hb-rise-fade var(--rank-dur, 700ms) ease-out both; }
@keyframes hb-rise-fade{ 0%{ opacity:0; } 55%{ opacity:1; } 100%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .ranking-card,
  .ranking-card.is-reordering,
  .ranking-card.rank-moved-up{ transition:none !important; animation:none !important; }
  /* 움직임 없이 '바뀌었다'만 알리는 짧은 페이드 — 위치 이동이 아니라 불투명도만 쓴다 */
  .ranking-card.rank-xfade{ animation:rank-xfade 420ms ease-out !important; }

  /* ?anim=1 로 직접 켠 경우에는 이 설정을 무시하고 이동을 보여준다(확인·미리보기용).
     위 규칙들이 !important 라 특이도를 html 한 단계 더 올려야 이긴다. */
  html.hb-anim-force .ranking-card.is-reordering{
    animation:rank-arc var(--rank-dur, 1200ms) cubic-bezier(0.45, 0.02, 0.2, 1) both !important;
  }
  html.hb-anim-force .ranking-card.rank-moved-up .sct_img{
    animation:rank-settle-highlight 900ms ease-out !important;
  }
  html.hb-anim-force .ranking-card.rank-xfade{ animation:none !important; }
}
@keyframes rank-xfade{ from{ opacity:.2; } to{ opacity:1; } }

/* ===== ck20260801r : 랭킹 기준시각 플립 클록(split-flap) =====
   숫자 한 칸을 위/아래 반쪽으로 자르고, 바뀔 때 앞면이 떨어진 뒤 뒷면이 올라온다. */
.hb-flip{
  --hbf-w:28px; --hbf-h:38px; --hbf-fs:25px; --hbf-gap:4px;   /* 시·분·초·1/100 모두 같은 크기 */
  display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 8px;
}
.hb-flip-label{ display:none; }   /* HOURS/MINUTES/SECONDS 라벨 미사용 */
.hb-flip-group{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.hb-flip-cards{ display:flex; gap:var(--hbf-gap); }
.hb-flip-label{
  font-style:normal; font-size:8px; font-weight:600; letter-spacing:.22em;
  color:#9a9a9a; text-indent:.22em; white-space:nowrap;
}
.hb-flip-sep{ align-self:flex-start; width:8px; height:var(--hbf-h); position:relative; }
.hb-flip-sep{ width:6px; }
.hb-flip-sep::before, .hb-flip-sep::after{
  content:""; position:absolute; left:1px; width:4px; height:4px; border-radius:50%; background:#d8a13a;
}
.hb-flip-sep::before{ top:32%; } .hb-flip-sep::after{ top:58%; }
/* 1/100초 앞은 콜론 대신 점 하나 */
.hb-flip-sep.is-dot::before{ display:none; }
.hb-flip-sep.is-dot::after{ top:auto; bottom:18%; }

.hb-flip-d{
  position:relative; width:var(--hbf-w); height:var(--hbf-h);
  perspective:200px; border-radius:6px; background:#1b1b1b;
  box-shadow:0 2px 6px rgba(0,0,0,.28); overflow:hidden;
}
/* 위/아래 반쪽을 가르는 틈 */
.hb-flip-d::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:rgba(0,0,0,.55); transform:translateY(-1px); z-index:4; pointer-events:none;
}
.hbf-half{ position:absolute; left:0; right:0; height:50%; overflow:hidden; }
/* 1/100초 카드는 반으로 자르지 않는다 */
.hb-flip-d.is-plain{ background:linear-gradient(#242424,#131313); }
.hb-flip-d.is-plain::after{ display:none; }
.hbf-full{ position:absolute; inset:0; height:100%; overflow:hidden; }
.hbf-full .hbf-d{ height:100%; }
/* 반쪽 안에 카드 전체 높이(200%)짜리 상자를 넣고 위/아래로 밀어 숫자를 반으로 자른다 */
.hbf-d{
  display:flex; align-items:center; justify-content:center;
  height:200%; font-size:var(--hbf-fs); font-weight:700; line-height:1;
  color:#f2f0e9; font-family:'Poppins','Pretendard',sans-serif;
}
.hbf-top, .hbf-flap-top{ top:0; background:linear-gradient(#2a2a2a,#1d1d1d); border-radius:6px 6px 0 0; }
.hbf-bottom, .hbf-flap-bottom{ bottom:0; background:linear-gradient(#171717,#0e0e0e); border-radius:0 0 6px 6px; }
/* 아래 반쪽은 숫자 상자를 카드 절반만큼 위로 밀어 '아랫부분'이 보이게 한다.
   🔴 margin-top:-100% 는 높이가 아니라 '너비' 기준이라 숫자가 잘린다 → translateY 로 해야 한다. */
.hbf-bottom .hbf-d, .hbf-flap-bottom .hbf-d{ transform:translateY(-50%); }

.hbf-flap{ display:none; z-index:3; backface-visibility:hidden; }
.hbf-flap-top{ transform-origin:bottom; }
.hbf-flap-bottom{ transform-origin:top; transform:rotateX(90deg); }
.hb-flip-d.is-flipping .hbf-flap{ display:block; }
.hb-flip-d.is-flipping .hbf-flap-top{ animation:hbf-fall 300ms ease-in forwards; }
.hb-flip-d.is-flipping .hbf-flap-bottom{ animation:hbf-rise 300ms 300ms ease-out forwards; }
@keyframes hbf-fall{ from{ transform:rotateX(0); } to{ transform:rotateX(-90deg); } }
@keyframes hbf-rise{ from{ transform:rotateX(90deg); } to{ transform:rotateX(0); } }

@media (max-width:767.98px){
  .hb-flip{ --hbf-gap:3px; gap:7px; }   /* 크기는 PC와 동일(25px), 간격만 좁람 */
  .hb-flip-sep::before, .hb-flip-sep::after{ width:3px; height:3px; }
}
@media (prefers-reduced-motion:reduce){
  .hb-flip-d.is-flipping .hbf-flap{ display:none !important; animation:none !important; }
}

/* ===== ck20260802a : 내가 본 상품 (슬라이드 1줄 + 전 페이지 플로팅 + 비우기) ===== */
.hb-recent-title{ display:flex; align-items:center; gap:10px; }
.hb-recent-clear, .hb-rf-clear{
  border:1px solid #ddd; background:#fff; color:#777; cursor:pointer;
  border-radius:999px; padding:3px 10px; font-size:11px; font-weight:600; line-height:1.4;
}
.hb-recent-clear:hover, .hb-rf-clear:hover{ color:#212121; border-color:#bbb; }
.hb-recent-empty{ text-align:center; color:#9a9a9a; margin:18px 0; font-size:14px; }

/* 1줄 슬라이드 */
.hb-recent-slider{ position:relative; margin-top:14px; }
.hb-rs-track{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
}
.hb-rs-track::-webkit-scrollbar{ display:none; }
.hb-rs-track > .hb-rc-card{ flex:0 0 190px; width:190px; }
.hb-rs-arrow{
  position:absolute; top:38%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border:1px solid #e0e0e0; border-radius:50%;
  background:#fff; color:#555; font-size:18px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.hb-rs-arrow:disabled{ opacity:.3; cursor:default; }
.hb-rs-prev{ left:-8px; } .hb-rs-next{ right:-8px; }

.hb-rc-card{ display:block; color:inherit !important; text-decoration:none !important; }
.hb-rc-card .hb-rc-thumb{
  display:block; aspect-ratio:1/1; background:#f5f5f5; border:1px solid #eee; border-radius:10px;
  overflow:hidden; margin-bottom:8px;
}
.hb-rc-card .hb-rc-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.hb-rc-name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:14px; line-height:1.4; color:#212121;
}
.hb-rc-price{ display:block; margin-top:4px; font-weight:700; font-size:14px; color:#212121; }
@media (max-width:767.98px){
  .hb-rs-track{ gap:12px; }
  .hb-rs-track > .hb-rc-card{ flex:0 0 140px; width:140px; }
  .hb-rc-name{ font-size:13px; } .hb-rc-price{ font-size:13px; }
  .hb-rs-arrow{ width:30px; height:30px; font-size:16px; }
  .hb-rs-prev{ left:-4px; } .hb-rs-next{ right:-4px; }
}

/* 우측 플로팅 — 모든 페이지 */
.hb-recent-float{
  position:fixed; right:18px; top:32%; z-index:1040;
  opacity:0; visibility:hidden; transform:translateX(14px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.hb-recent-float.is-on{ opacity:1; visibility:visible; transform:none; }
.hb-rf-toggle{
  position:relative; display:block; width:62px; height:62px; padding:0; cursor:pointer;
  border:1px solid #e3e3e3; border-radius:12px; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.hb-rf-thumb{ position:absolute; inset:4px; border-radius:9px; background:#f5f5f5 center/contain no-repeat; }
.hb-rf-count{
  position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#212121; color:#fff; font-size:11px; font-weight:700; line-height:1;
}
.hb-rf-panel{
  position:absolute; right:0; top:0; width:250px;
  background:#fff; border:1px solid #e3e3e3; border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.16); overflow:hidden;
}
.hb-recent-float.is-open .hb-rf-toggle{ display:none; }
.hb-rf-head{
  display:flex; align-items:center; gap:6px;
  padding:9px 10px; border-bottom:1px solid #f0f0f0; font-size:13px; font-weight:700; color:#212121;
}
.hb-rf-total{ font-style:normal; color:#888; font-weight:600; }
.hb-rf-head .hb-rf-clear{ margin-left:auto; }
.hb-rf-close{ border:0; background:none; font-size:20px; line-height:1; color:#888; cursor:pointer; padding:0 2px; }
.hb-rf-list{ padding:6px; }
.hb-rf-item{
  display:flex; gap:9px; align-items:center; padding:7px 6px; border-radius:8px;
  color:inherit !important; text-decoration:none !important;
}
.hb-rf-item:hover{ background:#f7f7f7; }
.hb-rf-item .hb-rc-thumb{
  flex:0 0 46px; width:46px; height:46px; border-radius:7px; background:#f5f5f5;
  border:1px solid #eee; overflow:hidden; margin:0;
}
.hb-rf-item .hb-rc-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.hb-rf-item .hb-rc-text{ min-width:0; }
.hb-rf-item .hb-rc-name{ font-size:12px; -webkit-line-clamp:2; }
.hb-rf-item .hb-rc-price{ font-size:12px; margin-top:2px; }
.hb-rf-nav{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px; border-top:1px solid #f0f0f0;
}
.hb-rf-nav button{
  width:26px; height:26px; border:1px solid #e0e0e0; border-radius:6px; background:#fff;
  color:#555; font-size:15px; line-height:1; cursor:pointer;
}
.hb-rf-nav button:disabled{ opacity:.35; cursor:default; }
.hb-rf-page{ font-size:12px; color:#777; min-width:38px; text-align:center; }

@media (max-width:767.98px){
  .hb-recent-float{ right:12px; top:auto; bottom:96px; }
  .hb-rf-toggle{ width:54px; height:54px; }
  .hb-rf-panel{ width:216px; top:auto; bottom:0; }
}
@media (prefers-reduced-motion:reduce){
  .hb-recent-float{ transition:none !important; }
  .hb-rs-track{ scroll-behavior:auto; }
}

/* ===== ck20260802b : ?diag=1 진단 패널 ===== */
#hb-diag{
  position:fixed; left:14px; top:14px; z-index:99999; max-width:min(92vw,460px);
  background:#111; color:#eee; border-radius:10px; padding:14px 16px;
  font-family:Consolas,Menlo,monospace; font-size:14px; line-height:1.7;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
#hb-diag > b{ display:block; margin-bottom:8px; font-size:15px; color:#fff; }
#hb-diag .ok b{ color:#6ee787; }
#hb-diag .ng b{ color:#ff7b72; }
#hb-diag .hb-diag-body div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== ck20260802d : 이동 중 상품명·가격 롤업/펼침 =====
   출발하면 텍스트가 위쪽으로 말려 사라지고, 카드가 자리를 잡으면 아래로 펼쳐지며 나타난다.
   clip-path 로 잘라내므로 글자가 찌그러지지 않는다(scaleY 는 왜곡됨). */
.hb-sec-rank .ranking-card .sct_text{ will-change:clip-path, opacity, transform; }
.hb-sec-rank .ranking-card.hb-txt-hide .sct_text{ animation:hb-txt-up 220ms ease-in forwards; }
.hb-sec-rank .ranking-card.hb-txt-show .sct_text{ animation:hb-txt-down 240ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes hb-txt-up{
  from{ clip-path:inset(0 0 0 0);    opacity:1; transform:translateY(0); }
  to  { clip-path:inset(0 0 100% 0); opacity:0; transform:translateY(-8px); }
}
@keyframes hb-txt-down{
  from{ clip-path:inset(0 0 100% 0); opacity:0; transform:translateY(-8px); }
  to  { clip-path:inset(0 0 0 0);    opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hb-sec-rank .ranking-card.hb-txt-hide .sct_text,
  .hb-sec-rank .ranking-card.hb-txt-show .sct_text{ animation:none !important; }
  html.hb-anim-force .ranking-card.hb-txt-hide .sct_text{
    animation:hb-txt-up 220ms ease-in forwards !important;
  }
  html.hb-anim-force .ranking-card.hb-txt-show .sct_text{
    animation:hb-txt-down 240ms cubic-bezier(0.2, 0.9, 0.25, 1) both !important;
  }
}

/* ===== ck20260802h : 셀럽초이스 메인 섹션 (랭킹 앞) ===== */
.celeb-section{ display:flex; gap:24px; align-items:stretch; margin:0 0 44px; }
.celeb-section .celeb-left{ flex:0 0 42%; max-width:42%; }
.celeb-section .celeb-left a,
.celeb-section .celeb-left img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; }
.celeb-section .celeb-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.celeb-section .celeb-title{ position:relative; margin:2px 0 14px; }
.celeb-section .celeb-title h2{
  font-family:var(--font-display,'Poppins',sans-serif); font-size:28px; font-weight:800;
  letter-spacing:-.02em; color:#111; margin:0 0 4px;
}
.celeb-section .celeb-title p{ font-size:14px; color:#8a8a8a; margin:0; }
.celeb-section .celeb-more{
  position:absolute; right:0; bottom:2px; font-size:13px; color:#666 !important;
  text-decoration:none !important; display:inline-flex; align-items:center; gap:4px;
}
.celeb-section .celeb-more:hover{ color:#111 !important; }
.celeb-section .celeb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.celeb-section .celeb-grid a{ display:block; }
.celeb-section .celeb-grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:10px; transition:transform .35s ease;
}
.celeb-section .celeb-grid a:hover img{ transform:scale(1.03); }

@media (max-width:991.98px){
  .celeb-section{ flex-direction:column; gap:16px; margin-bottom:32px; }
  .celeb-section .celeb-left{ flex:none; max-width:100%; }
  .celeb-section .celeb-left img{ aspect-ratio:16/10; }
  .celeb-section .celeb-title h2{ font-size:22px; }
}
@media (max-width:575.98px){
  .celeb-section .celeb-grid{ gap:8px; }
  .celeb-section .celeb-title h2{ font-size:19px; }
  .celeb-section .celeb-title p{ font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .celeb-section .celeb-grid img{ transition:none; }
}

/* ===== ck20260802i : 좌하단 리뷰 챗 위젯 ===== */
.hb-chat{
  position:fixed; left:12px; bottom:12px; z-index:99;
  display:flex; align-items:flex-end; max-width:min(94vw,420px);
  opacity:0; transform:translateY(16px); pointer-events:none;
}
.hb-chat.is-in{ opacity:1; transform:none; pointer-events:auto; transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1); }
.hb-chat.is-out{ opacity:0; transform:translateY(-6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }

.hb-chat-card{ display:flex; align-items:flex-end; gap:0; color:inherit !important; text-decoration:none !important; }
.hb-chat-photo{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.hb-chat-thumb{
  width:74px; height:74px; border-radius:50%; display:block;
  background:#eee center/cover no-repeat;
  filter:drop-shadow(1px 3px 5px rgba(0,0,0,.28));
}
.hb-chat-thumb.is-empty{ background:#e9e9e9; }
.hb-chat-name{ font-style:normal; font-size:11px; color:#6b6b6b; max-width:80px; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-chat-bubble{
  position:relative; margin-left:20px; margin-bottom:10px;
  background:#fff; border-radius:18px; padding:13px 16px; max-width:290px;
  filter:drop-shadow(1px 3px 5px rgba(0,0,0,.26));
}
.hb-chat-bubble::before{
  content:""; position:absolute; left:-8px; bottom:8px; width:16px; height:16px;
  background:#fff; clip-path:polygon(100% 0, 100% 100%, 0 100%); border-radius:0 0 0 3px;
}
.hb-chat-star{ display:block; font-size:12px; letter-spacing:1px; color:#111; line-height:1; margin-bottom:5px; }
.hb-chat-text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:13.5px; line-height:1.45; color:#212121;
}
.hb-chat-close{
  position:absolute; right:-6px; top:-6px; z-index:2;
  width:22px; height:22px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:15px; line-height:1; padding:0;
}
@media (max-width:767.98px){
  .hb-chat{ left:8px; bottom:var(--hb-safe-bottom, 12px); max-width:calc(100% - 78px); }   /* 구매바 위 */
  .hb-chat-thumb{ width:58px; height:58px; }
  .hb-chat-bubble{ margin-left:14px; padding:11px 13px; max-width:calc(100vw - 170px); }
  .hb-chat-text{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  .hb-chat, .hb-chat.is-in, .hb-chat.is-out{ transition:none !important; }
}

/* ===== ck20260802j : 상품 상세 '이 상품의 후기' ===== */
#hb-item-reviews{ padding:18px 16px 4px; }
.hb-ir-title{ font-size:16px; font-weight:700; color:#212121; margin:0 0 14px; }
.hb-ir-title em{ font-style:normal; color:#e5342f; margin-left:4px; }
.hb-ir-list{ list-style:none; margin:0; padding:0; }
.hb-ir-item{ display:flex; gap:14px; padding:14px 0; border-top:1px solid #f0f0f0; }
.hb-ir-item:first-child{ border-top:0; }
.hb-ir-thumb{ flex:0 0 84px; width:84px; height:84px; display:block; border-radius:8px; overflow:hidden; border:1px solid #eee; background:#f7f7f7; }
.hb-ir-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hb-ir-body{ min-width:0; flex:1 1 auto; }
.hb-ir-meta{ display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px; color:#8a8a8a; }
.hb-ir-star{ color:#111; letter-spacing:1px; }
.hb-ir-text{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  font-size:13.5px; line-height:1.5; color:#333 !important; text-decoration:none !important;
}
.hb-ir-text:hover{ text-decoration:underline !important; }
@media (max-width:575.98px){
  #hb-item-reviews{ padding:14px 12px 2px; }
  .hb-ir-thumb{ flex:0 0 68px; width:68px; height:68px; }
  .hb-ir-text{ font-size:13px; }
}

/* ===== ck20260802k : 우하단 고정 버튼(카카오톡 상담 · TOP) ===== */
#hb-side{
  position:fixed; right:18px; bottom:calc(var(--hb-safe-bottom, 12px) + 6px); z-index:1035;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
/* 평소엔 원형 아이콘, 올리면 '톡상담' 알약으로 펼쳐진다.
   오른쪽 끝을 고정한 채 폭만 늘려 왼쪽으로 펼쳐지고, 두 이미지는 교차 페이드. */
.hb-side-kakao{
  position:relative; display:block; line-height:0; overflow:hidden;
  width:52px; height:52px; border-radius:999px;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.18));
  transition:width .32s cubic-bezier(.2,.9,.25,1);
}
.hb-side-kakao img{ position:absolute; right:0; top:0; height:52px; width:auto; display:block; }
.hb-kk-circle{ opacity:1; transition:opacity .18s ease .06s; }
.hb-kk-pill{ opacity:0; transition:opacity .22s ease; }
.hb-side-kakao:hover,
.hb-side-kakao:focus-visible{ width:113px; }
.hb-side-kakao:hover .hb-kk-circle,
.hb-side-kakao:focus-visible .hb-kk-circle{ opacity:0; transition-delay:0s; }
.hb-side-kakao:hover .hb-kk-pill,
.hb-side-kakao:focus-visible .hb-kk-pill{ opacity:1; transition-delay:.08s; }

.hb-side-top{
  width:52px; height:52px; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:1px solid #e0e0e0; border-radius:50%; background:#fff; color:#333;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
#hb-side.show-top .hb-side-top{ opacity:1; visibility:visible; transform:none; }
.hb-side-top:hover{ border-color:#bbb; color:#111; }
.hb-side-arrow{
  display:block; width:9px; height:9px; margin-top:3px;
  border-left:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg);
}
.hb-side-top em{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; line-height:1; }

/* 기존 우측 플로팅(내가 본 상품)과 겹치지 않게 */
@media (max-width:767.98px){
  #hb-side{ right:12px; bottom:var(--hb-safe-bottom, 12px); gap:8px; }   /* 구매바가 있으면 그 위, 없으면 화면 맨 아래 */
  /* 터치 기기엔 hover 가 없으니 원형만 — 폭도 원형 크기로 고정 */
  .hb-side-kakao{ width:46px; height:46px; }
  .hb-side-kakao img{ height:46px; }
  .hb-side-top{ width:44px; height:44px; }
  .hb-recent-float{ bottom:calc(var(--hb-safe-bottom, 12px) + 118px); }  /* 카카오·TOP 위로 */
  .hb-recent-float .hb-rf-panel{ bottom:0; }
}
@media (prefers-reduced-motion:reduce){
  .hb-side-top, .hb-side-kakao, .hb-side-kakao img{ transition:none !important; transform:none !important; }
}

/* ===== ck20260802n : 검색창 최근/인기 검색어 패널 ===== */
.hb-sug{ max-width:560px; margin:10px auto 0; padding:14px 16px 6px; border:1px solid #eee; border-radius:8px; background:#fff; }
.hb-sug-sec + .hb-sug-sec{ margin-top:14px; padding-top:14px; border-top:1px solid #f4f4f4; }
.hb-sug-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:#888; margin-bottom:9px; }
.hb-sug-clear{ border:0; background:none; color:#aaa; font-size:11px; cursor:pointer; padding:0; }
.hb-sug-clear:hover{ color:#666; text-decoration:underline; }
.hb-sug-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.hb-sug-list li{ display:inline-flex; align-items:center; border:1px solid #e6e6e6; border-radius:999px; background:#fafafa; }
.hb-sug-list li:hover{ border-color:#bbb; background:#fff; }
.hb-sug-list a{ display:block; padding:6px 12px; font-size:13px; color:#333 !important; text-decoration:none !important; white-space:nowrap; }
.hb-sug-recent .hb-sug-list a{ padding-right:4px; }
.hb-sug-del{ border:0; background:none; color:#bbb; font-size:14px; line-height:1; cursor:pointer; padding:0 9px 0 2px; }
.hb-sug-del:hover{ color:#666; }
.hb-sug-hot li{ background:#fff; }
@media (max-width:767.98px){
  .hb-sug{ margin:8px 10px 0; padding:12px 12px 4px; }
  .hb-sug-list a{ font-size:12.5px; padding:5px 10px; }
}

/* ===== ck20260802o : 상세 이미지 전체화면 뷰어 ===== */
.hb-zoomable{ cursor:zoom-in; }
body.hb-zoom-open{ overflow:hidden; }
.hb-zoom{
  position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
}
.hb-zoom[hidden]{ display:none; }
.hb-zoom-stage{
  flex:1 1 auto; height:100%; display:flex; align-items:center; justify-content:center;
  padding:56px 16px; box-sizing:border-box;
}
.hb-zoom-stage img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.hb-zoom-close{
  position:absolute; right:14px; top:12px; z-index:2;
  width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:26px; line-height:1;
}
.hb-zoom-close:hover{ background:rgba(255,255,255,.22); }
.hb-zoom-prev, .hb-zoom-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:74px; border:0; cursor:pointer;
  background:rgba(255,255,255,.10); color:#fff; font-size:34px; line-height:1;
}
.hb-zoom-prev{ left:0; border-radius:0 8px 8px 0; }
.hb-zoom-next{ right:0; border-radius:8px 0 0 8px; }
.hb-zoom-prev:hover, .hb-zoom-next:hover{ background:rgba(255,255,255,.2); }
.hb-zoom-count{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  color:#fff; font-size:13px; letter-spacing:.04em;
  background:rgba(0,0,0,.45); padding:5px 12px; border-radius:999px;
}
@media (max-width:767.98px){
  .hb-zoom-stage{ padding:52px 8px; }
  .hb-zoom-prev, .hb-zoom-next{ width:38px; height:62px; font-size:26px; }
  .hb-zoom-close{ width:38px; height:38px; font-size:23px; right:10px; top:10px; }
}

/* ===== ck20260802p : 상품 비교함 ===== */
.hb-cmp-add{
  display:block; width:100%; margin:10px 0 0; padding:11px 0; cursor:pointer;
  border:1px solid #ddd; border-radius:8px; background:#fff; color:#444;
  font-size:14px; font-weight:600;
}
.hb-cmp-add:hover{ border-color:#aaa; color:#111; }
.hb-cmp-add.is-on{ border-color:#212121; background:#212121; color:#fff; }

#hb-cmp{ position:fixed; left:0; right:0; bottom:var(--hb-bar-h, 0px); z-index:1050; }   /* 구매바 위 */
#hb-cmp[hidden]{ display:none; }
.hb-cmp-inner{
  display:flex; align-items:center; gap:14px; padding:12px 18px;
  background:#fff; border-top:1px solid #e5e5e5; box-shadow:0 -4px 16px rgba(0,0,0,.08);
}
.hb-cmp-label{ font-size:13px; font-weight:700; color:#555; white-space:nowrap; }
.hb-cmp-label em{ font-style:normal; color:#e5342f; }
.hb-cmp-items{ display:flex; gap:8px; flex:1 1 auto; overflow-x:auto; }
.hb-cmp-chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 6px 5px 5px;
  border:1px solid #eee; border-radius:8px; background:#fafafa; white-space:nowrap;
}
.hb-cmp-chip img{ width:34px; height:34px; object-fit:cover; border-radius:5px; background:#eee; }
.hb-cmp-chip span{ font-size:12px; color:#333; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.hb-cmp-chip button{ border:0; background:none; color:#aaa; font-size:15px; cursor:pointer; padding:0 2px; }
.hb-cmp-act{ display:flex; gap:8px; white-space:nowrap; }
.hb-cmp-clear{ border:1px solid #ddd; background:#fff; color:#777; border-radius:6px; padding:9px 12px; font-size:13px; cursor:pointer; }
.hb-cmp-go{ border:0; background:#212121; color:#fff; border-radius:6px; padding:10px 18px; font-size:13px; font-weight:700; cursor:pointer; }

.hb-cmp-modal{ position:fixed; inset:0; z-index:1210; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.hb-cmp-modal[hidden]{ display:none; }
.hb-cmp-panel{ background:#fff; border-radius:12px; width:min(900px,100%); max-height:86vh; overflow:auto; }
.hb-cmp-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid #eee; font-size:16px; font-weight:700; }
.hb-cmp-close{ border:0; background:none; font-size:24px; line-height:1; color:#888; cursor:pointer; }
.hb-cmp-table{ padding:6px 12px 16px; }
.hb-cmp-table table{ width:100%; border-collapse:collapse; }
.hb-cmp-table th, .hb-cmp-table td{ border-bottom:1px solid #f0f0f0; padding:11px 10px; font-size:13px; text-align:center; vertical-align:middle; }
.hb-cmp-table thead th{ font-size:13px; font-weight:700; color:#212121; }
.hb-cmp-table tbody th{ width:104px; color:#888; font-weight:600; text-align:left; background:#fafafa; }
.hb-cmp-thumb{ width:110px; height:110px; object-fit:contain; background:#f6f6f6; border-radius:8px; }
.hb-cmp-table a{ color:#212121 !important; text-decoration:none !important; }
.hb-cmp-none{ color:#aaa; font-size:12px; }
.hb-cmp-visit{ display:inline-block; border:1px solid #212121; border-radius:6px; padding:7px 14px; font-weight:600; }
body.hb-cmp-open{ overflow:hidden; }

@media (max-width:767.98px){
  .hb-cmp-inner{ gap:8px; padding:10px 12px; }
  .hb-cmp-label{ font-size:12px; }
  .hb-cmp-chip span{ display:none; }
  .hb-cmp-clear{ padding:8px 10px; font-size:12px; }
  .hb-cmp-go{ padding:9px 14px; font-size:12px; }
  .hb-cmp-thumb{ width:84px; height:84px; }
  .hb-cmp-table th, .hb-cmp-table td{ padding:9px 6px; font-size:12px; }
  .hb-cmp-table tbody th{ width:74px; }
}

/* ===== ck20260802r : 찜 플로팅 ===== */
.hb-side-wish{
  position:relative; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e0e0e0; border-radius:50%; background:#fff; color:#e5342f !important;
  text-decoration:none !important; box-shadow:0 3px 10px rgba(0,0,0,.14); font-size:21px; line-height:1;
}
.hb-side-wish:hover{ border-color:#bbb; }
.hb-side-badge{
  position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#212121; color:#fff; font-size:11px; font-weight:700; line-height:1;
}
@media (max-width:767.98px){
  .hb-side-wish{ width:46px; height:46px; font-size:19px; }
  .hb-side-badge{ min-width:18px; height:18px; font-size:10px; }
}

/* ===== ck20260802s : 셀럽초이스 좌측 칸 영상 ===== */
.celeb-left-media{ position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:12px; }
.celeb-left-media img,
.celeb-left-media .celeb-video{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:12px;
}
.celeb-left-media .celeb-video{
  position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
}
.celeb-left-media.is-video .celeb-video{ opacity:1; }
.celeb-left-media.is-video img{ opacity:0; transition:opacity .45s ease; }
@media (max-width:991.98px){
  /* 정사각 원본을 가로로 넓은 칸에 담으면 가운데가 잘려 얼굴이 날아간다.
     비율을 조금 세로로 키우고 크롭 기준을 위로 올려 인물이 보이게 한다. */
  .celeb-left-media, .celeb-left-media img, .celeb-left-media .celeb-video{ aspect-ratio:4/3; height:auto; }
  .celeb-left-media .celeb-video{ height:100%; }
  .celeb-left-media img, .celeb-left-media .celeb-video{ object-position:center 18%; }
}
@media (prefers-reduced-motion:reduce){
  .celeb-left-media .celeb-video{ display:none; }
}

/* ===== ck20260802t : 상단 인기검색어 순위 변동(플랩) ===== */
.brand_ser.hb-hot li{ perspective:300px; }
.brand_ser.hb-hot li a{ display:inline-flex; align-items:center; gap:5px; transform-origin:center top; }
.brand_ser.hb-hot li.is-flip-out a{ animation:hb-hot-out 260ms ease-in forwards; }
.brand_ser.hb-hot li.is-flip-in a{ animation:hb-hot-in 320ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes hb-hot-out{ from{ transform:rotateX(0); opacity:1; } to{ transform:rotateX(-90deg); opacity:0; } }
@keyframes hb-hot-in{ from{ transform:rotateX(90deg); opacity:0; } to{ transform:rotateX(0); opacity:1; } }
.hb-hot-delta{
  font-style:normal; font-size:10px; font-weight:800; letter-spacing:-.02em; line-height:1;
  min-width:16px; opacity:0; transition:opacity .2s ease;
}
.hb-hot-delta.up{ color:#e5342f; opacity:1; }
.hb-hot-delta.down{ color:#2f6fe0; opacity:1; }
@media (prefers-reduced-motion:reduce){
  .brand_ser.hb-hot li a{ animation:none !important; }
}

/* ===== ck20260802u : 영상 우하단 브랜드 태그(워터마크 가림) ===== */
.celeb-brandtag{
  position:absolute; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  min-width:29%; height:8.2%; min-height:34px; padding:0 14px;
  background:#000; color:#fff;
  font-family:var(--font-display,'Poppins',sans-serif);
  font-weight:800; font-size:clamp(13px, 1.55vw, 19px); letter-spacing:.14em;
  border-radius:0 0 12px 0;
  opacity:0; transition:opacity .25s ease;
}
/* 영상이 있는 칸에서는 이미지가 보이는 처음 0.3초에도 함께 노출한다(전환 때 튀지 않도록) */
.celeb-left-media.has-video .celeb-brandtag{ opacity:1; }
@media (max-width:991.98px){
  .celeb-brandtag{ min-width:34%; height:11%; min-height:30px; font-size:clamp(12px, 3.4vw, 16px); }
}
@media (prefers-reduced-motion:reduce){
  .celeb-brandtag{ display:none; }   /* 영상이 안 나오면 워터마크도 없다 */
}

/* ===== ck20260802y : 비회원 안내 팝업 · 주문조회 ===== */
#non_member_popup{
  position:fixed; left:16px; bottom:var(--hb-safe-bottom, 16px); z-index:1060;
  width:min(340px, calc(100vw - 32px));
  background:rgba(20,20,20,.86); color:#fff; border-radius:14px;
  padding:18px 18px 16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .35s cubic-bezier(.2,.9,.25,1);
}
#non_member_popup[hidden]{ display:none; }
#non_member_popup.is-on{ opacity:1; transform:none; }
#non_member_popup_close{
  position:absolute; right:10px; top:10px; width:26px; height:26px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; opacity:.75;
}
#non_member_popup_close:hover{ opacity:1; }
#non_member_popup_close img{ width:16px; height:16px; display:block; filter:invert(1); }
.non-member-body strong{ display:block; font-size:15px; font-weight:800; line-height:1.4; margin:0 18px 8px 0; }
.non-member-body p{ font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.82); margin:0 0 14px; }
.non-member-act{ display:flex; gap:8px; align-items:center; }
.non-member-join{
  flex:1 1 auto; text-align:center; background:#fff; color:#111 !important;
  text-decoration:none !important; font-size:13px; font-weight:700;
  border-radius:8px; padding:10px 12px;
}
.non-member-join:hover{ background:#f1f1f1; }
.non-member-later{
  border:1px solid rgba(255,255,255,.35); background:none; color:rgba(255,255,255,.8);
  font-size:12.5px; border-radius:8px; padding:10px 12px; cursor:pointer; white-space:nowrap;
}
.non-member-later:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
@media (max-width:767.98px){
  #non_member_popup{ left:10px; width:calc(100vw - 20px); padding:15px 15px 13px; }
  .non-member-body strong{ font-size:14px; }
}
@media (prefers-reduced-motion:reduce){
  #non_member_popup{ transition:none !important; }
}

/* 비회원 주문조회 */
.hb-of-wrap{ max-width:520px; margin:40px auto 70px; padding:0 16px; }
.hb-of-title{ font-size:22px; font-weight:800; color:#111; margin:0 0 6px; }
.hb-of-desc{ font-size:13.5px; color:#777; margin:0 0 22px; }
.hb-of-err{
  background:#fff3f3; border:1px solid #f3c9c9; color:#c0392b;
  font-size:13px; border-radius:8px; padding:11px 13px; margin:0 0 16px;
}
.hb-of-form label{ display:block; margin-bottom:14px; }
.hb-of-form label span{ display:block; font-size:12.5px; font-weight:700; color:#555; margin-bottom:6px; }
.hb-of-form input{
  width:100%; height:46px; border:1px solid #e0e0e0; border-radius:8px;
  padding:0 12px; font-size:14px; box-sizing:border-box;
}
.hb-of-form input:focus{ border-color:#212121; outline:none; }
.hb-of-submit{
  width:100%; height:50px; border:0; border-radius:8px; background:#212121; color:#fff;
  font-size:15px; font-weight:700; cursor:pointer; margin-top:6px;
}
.hb-of-help{ font-size:12.5px; color:#888; line-height:1.7; margin:18px 0 0; }
.hb-of-help a{ color:#212121 !important; font-weight:600; }

/* ===== ck20260802z : 메인 이미지 팝업 ===== */
.hb-pp{
  position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .25s ease;
}
.hb-pp.is-on{ opacity:1; }
body.hb-pp-open{ overflow:hidden; }
.hb-pp-box{ position:relative; width:min(520px,100%); max-height:88vh; display:flex; flex-direction:column; }
.hb-pp-x{
  position:absolute; right:-6px; top:-46px; width:40px; height:40px; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.hb-pp-x img{ width:18px; height:18px; filter:invert(1); }
.hb-pp-stage{ background:#fff; border-radius:10px 10px 0 0; overflow:hidden; flex:1 1 auto; min-height:0; }
.hb-pp-stage img{ width:100%; height:auto; display:block; max-height:70vh; object-fit:contain; }
.hb-pp-stage a{ display:block; }
.hb-pp-nav{
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:#fff; padding:8px; border-top:1px solid #f2f2f2;
}
.hb-pp-nav button{ width:30px; height:30px; border:1px solid #e0e0e0; border-radius:6px; background:#fff; cursor:pointer; font-size:17px; line-height:1; }
.hb-pp-page{ font-size:12px; color:#888; min-width:42px; text-align:center; }
.hb-pp-foot{
  display:flex; align-items:center; justify-content:space-between;
  background:#212121; color:#fff; padding:11px 14px; border-radius:0 0 10px 10px; font-size:13px;
}
.hb-pp-foot label{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.hb-pp-close{ border:0; background:none; color:#fff; font-size:13px; cursor:pointer; padding:0 2px; }
.hb-pp-close:hover{ text-decoration:underline; }
@media (max-width:767.98px){
  .hb-pp{ padding:14px; }
  .hb-pp-x{ top:-42px; right:0; width:36px; height:36px; }
  .hb-pp-stage img{ max-height:64vh; }
}
@media (prefers-reduced-motion:reduce){ .hb-pp{ transition:none !important; } }

/* 비회원 팝업이 떠 있는 동안 리뷰 챗을 위로 밀어 겹치지 않게 */
html.hb-guest-on .hb-chat{ bottom:calc(var(--hb-safe-bottom, 16px) + 196px); }
@media (max-width:767.98px){
  html.hb-guest-on .hb-chat{ bottom:calc(var(--hb-safe-bottom, 16px) + 214px); }
}

/* ===== ck20260803b : 셀럽초이스 호버 캡션 ===== */
.celeb-section .celeb-grid a{ position:relative; overflow:hidden; border-radius:10px; }
.celeb-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:10px 12px; box-sizing:border-box;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.78) 100%);
  color:#fff; font-size:15px; font-weight:600; line-height:1.35;   /* PC 기준 (모바일은 아래 미디어쿼리) */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .28s cubic-bezier(.2,.9,.25,1);
  pointer-events:none;
}
.celeb-section .celeb-grid a:hover .celeb-cap,
.celeb-section .celeb-grid a:focus-visible .celeb-cap,
.celeb-left-media:hover .celeb-cap,
.celeb-left-media:focus-visible .celeb-cap{ opacity:1; transform:none; }

/* 좌측 큰 칸은 우하단 CHANEL 태그와 겹치지 않게 자리를 비운다 */
.celeb-cap.has-tag{ padding-right:32%; font-size:16px; padding-bottom:14px; }

@media (max-width:991.98px){
  /* 터치 기기엔 hover 가 없으니 항상 보여준다 */
  .celeb-cap{ opacity:1; transform:none; font-size:12px; padding:8px 10px; }
  .celeb-cap.has-tag{ padding-right:37%; font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  .celeb-cap{ transition:none !important; }
}


/* ───────────────────────────────────────────────────────────────
   ck20260806a — 좋아요(추천) 버튼 제거 · 페이징↔푸터 여백 통일
   ─────────────────────────────────────────────────────────────── */

/* [1] 좋아요(추천) 버튼 — 미사용 기능이라 진열 스킨에서 마크업을 뺐다.
       브라우저/서버 캐시나 구버전 테마 스킨(theme/…/skin/shop/basic)이 살아나도
       보이지 않도록 CSS 로도 막는다(이중 차단). 되살리려면 이 블록과 스킨 주석을 함께 풀 것. */
.sct_op_btn .btn_like,
.sct_li .btn_like,
.btn_like { display:none !important; }

/* [2] 페이징 ↔ 푸터 간격 통일
       기준 = 고객리뷰(.hb-rp-paging + 부모 .hb-rp{padding-bottom:60px}) → 실측 gap 90px
       목록/검색(.pg_wrap)은 실측 gap 30px 이었다.
       🔴 margin 이 아니라 padding 으로 더한다 — margin 은 상쇄(collapse)돼 계산이 어긋난다. */
.pg_wrap { padding-bottom:60px; }


/* ───────────────────────────────────────────────────────────────
   ck20260806b — 해외구매대행 결제완료 고지 모달
   PC/모바일 모두 적용. 모바일은 전체화면 + 폰트를 키워 가독성 확보.
   ─────────────────────────────────────────────────────────────── */
html.hb-on-open, html.hb-on-open body{ overflow:hidden !important; }

.hb-on{
    position:fixed; inset:0; z-index:99999;
    background:rgba(17,17,17,.62);
    display:flex; align-items:center; justify-content:center;
    padding:24px 16px;
}
.hb-on-box{
    width:100%; max-width:640px; max-height:calc(100vh - 48px);
    background:#fff; border-radius:12px; overflow:auto;
    box-shadow:0 18px 60px rgba(0,0,0,.3);
    padding:26px 26px 22px;
    font-family:'Noto Sans KR','맑은 고딕',Malgun Gothic,sans-serif;
}

/* 결제 완료 — 긍정(그린). 고지 영역과 시각적 위계를 분리한다 */
.hb-on-done{ text-align:center; padding-bottom:20px; border-bottom:1px solid #eee; }
.hb-on-check{
    width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
    background:#0f9d58; color:#fff; font-size:28px; line-height:52px; font-weight:700;
}
.hb-on-done-t{ font-size:19px; font-weight:800; color:#111; margin-bottom:8px; }
.hb-on-done-d{ font-size:13.5px; line-height:1.7; color:#666; }

/* 고지 — 주의(앰버) */
.hb-on-warn{ margin:18px 0 12px; padding:13px 15px; background:#fff8e6; border:1px solid #f0dca8; border-radius:8px; }
.hb-on-warn-t{ font-size:15px; font-weight:800; color:#a76a00; }
.hb-on-warn-t span{ margin-right:4px; }
.hb-on-warn-t b{ color:#c0392b; }
.hb-on-warn-d{ margin-top:5px; font-size:13px; color:#8a6d3b; }
.hb-on-warn-d b{ color:#a76a00; }

/* 약관 iframe 박스 */
.hb-on-frame{ border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; background:#fff; }
.hb-on-frame iframe{ display:block; width:100%; height:300px; border:0; }

.hb-on-hint{ margin:9px 2px 12px; font-size:12.5px; color:#999; }

/* 동의 체크 */
.hb-on-agree{
    display:flex; align-items:flex-start; gap:9px; cursor:pointer;
    padding:13px 14px; border:1px solid #ddd; border-radius:8px; background:#fafafa;
    font-size:13.5px; line-height:1.6; color:#333; transition:all .15s ease;
}
.hb-on-agree input{ margin:2px 0 0; width:17px; height:17px; flex:0 0 auto; cursor:pointer; }
.hb-on-agree b{ color:#c0392b; }
.hb-on-agree.is-off{ opacity:.5; cursor:not-allowed; }
.hb-on-agree.is-off input{ cursor:not-allowed; }
.hb-on-agree:not(.is-off):hover{ border-color:#111; background:#fff; }

/* 확인 버튼 — 🔴 비활성에서도 '텍스트는 보이되 누를 수 없게' */
.hb-on-btn{
    display:block; width:100%; margin-top:14px; padding:15px 16px;
    border:0; border-radius:8px; background:#111; color:#fff;
    font-size:15px; font-weight:700; cursor:pointer; transition:opacity .15s ease;
}
.hb-on-btn:disabled{ background:#c9c9c9; color:#fff; cursor:not-allowed; }
.hb-on-btn:not(:disabled):hover{ opacity:.88; }

/* ── 모바일 ── 전체화면 + 폰트 확대로 가독성 확보 */
@media (max-width:640px){
    .hb-on{ padding:0; align-items:stretch; }
    .hb-on-box{
        max-width:none; width:100%; max-height:100vh; height:100vh;
        border-radius:0; padding:20px 16px calc(18px + env(safe-area-inset-bottom));
        display:flex; flex-direction:column;
    }
    .hb-on-done{ padding-bottom:16px; }
    .hb-on-check{ width:46px; height:46px; line-height:46px; font-size:25px; margin-bottom:10px; }
    .hb-on-done-t{ font-size:18px; }
    .hb-on-warn{ margin:14px 0 10px; padding:12px 13px; }
    .hb-on-warn-t{ font-size:14.5px; }
    /* 🔴 iframe 이 남는 세로 공간을 모두 차지하게 — 고정 높이면 작은 화면에서 읽기 어렵다 */
    .hb-on-frame{ flex:1 1 auto; min-height:180px; }
    .hb-on-frame iframe{ height:100%; }
    .hb-on-hint{ margin:8px 2px 10px; font-size:12.5px; }
    .hb-on-agree{ font-size:14px; padding:14px; }
    .hb-on-btn{ padding:16px; font-size:16px; margin-top:12px; }
}


/* ===== 상품상세 옵션 헤딩 정리 (ck20260814a) =====
   '선택옵션(필수) *' / '추가옵션(선택) [선택]' 로 표시를 **그룹 헤딩에 모으고**,
   개별 옵션 라벨(사이즈·색상·통관보증)은 화면에서 뺀다.
   select 의 첫 항목이 같은 이름이라 정보 손실이 없다.
   🔴 #sit_ov 로 스코프하지 말 것 — 구매바 바텀시트(.hb-os-body)로 옵션 DOM 이
      옮겨가면 그 규칙이 통째로 죽는다. .sit_option 기준으로 건다. */
.sit_option h3.opt-head{
  /* 스펙표(시중가격·판매가격·브랜드·배송비결제) th 와 같은 규격으로 맞춘다.
     실측: font-size 15px / weight 700 / color #000 / padding-left 5px / line-height 1.5
     🔴 스킨에서 Bootstrap `fs-6` 을 뗐다 — .fs-6 은 !important 라 여기서 못 이긴다. */
  font-size:15px; font-weight:700; color:#000; line-height:1.5;
  padding-left:5px; margin:0 0 8px;
}
.sit_option h3.opt-req::after{
  content:" *"; color:#f84a71; font-weight:800;
}
.sit_option h3.opt-opt::after{
  content:"선택"; margin-left:5px; padding:2px 6px; border-radius:3px;
  background:#f2f2f2; color:#888; font-size:11px; font-weight:600;
  vertical-align:middle;
}
/* 개별 라벨은 스크린리더에는 남기고 화면에서만 뺀다(label-for 연결 유지) */
.sit_option .get_item_options > label,
.sit_option .get_item_supply > label{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
/* 라벨이 빠진 만큼 그룹 간격을 줄인다 */
.sit_option .get_item_options,
.sit_option .get_item_supply{ margin:0 0 10px; }

/* 포인트 행 숨김 — 🔴 삭제가 아니라 가리기만 한다. 나중에 포인트를 쓸 때
   이 규칙만 지우면 그대로 돌아온다(스킨의 tr.tr_point 표식은 남겨둔다). */
.sit_ov_tbl tr.tr_point{ display:none; }

/* ===== 우측 플로팅 겹침 해소 + 공유 팝업 (ck20260814c) ===== */

/* ① 모바일에서 '내가 본 상품'이 카카오/TOP 을 덮고 있었다(실측 34px 겹침).
      #hb-side 는 bottom:var(--hb-safe-bottom) 에서 시작해 높이 152px 를 쓴다
      (카카오 + TOP + 간격). 그 위로 올린다. 기존 +118px 로는 부족했다.
      🔴 --hb-safe-bottom 은 구매바 높이에 따라 런타임에 바뀐다 — 고정 px 로 쓰지 말 것. */
@media (max-width: 767.98px){
  .hb-recent-float{ bottom: calc(var(--hb-safe-bottom, 12px) + 165px); }
}

/* ② 공유 팝업 — 아이콘을 키우고 브랜드색으로 구분, 어디로 가는지 라벨을 붙인다.
      마크업은 그대로 두고 ::after 로 이름만 얹는다(스킨 무수정). */
.sns_area.dropdown-menu{
  min-width:184px; padding:8px !important; text-align:left !important;
  border-radius:12px; border:1px solid #e8e8e8;
}
.sns_area.dropdown-menu a{
  display:flex !important; align-items:center; gap:11px;
  padding:8px 10px; margin:0; border-radius:9px;
  color:#222; font-size:14px; font-weight:600; line-height:1;
  text-decoration:none; white-space:nowrap;
}
.sns_area.dropdown-menu a:hover,
.sns_area.dropdown-menu a:focus-visible{ background:#f4f4f4; }
.sns_area.dropdown-menu a i,
.sns_area.dropdown-menu a img{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff; line-height:1;
}
.sns_area .share-facebook  i{ background:#1877f2; }
.sns_area .share-twitter   i{ background:#1da1f2; }
.sns_area .share-kakaotalk i{ background:#fee500; color:#3c1e1e; }
.sns_area #sit_btn_rec     i{ background:#5b6470; }
/* 어디로 공유되는지 — 아이콘만으로는 알 수 없었다 */
.sns_area .share-facebook::after { content:"페이스북"; }
.sns_area .share-twitter::after  { content:"트위터"; }
.sns_area .share-kakaotalk::after{ content:"카카오톡"; }
.sns_area #sit_btn_rec::after    { content:"메일로 추천"; }
/* 🔴 구글플러스는 2019년 서비스 종료 — 눌러도 갈 곳이 없는 죽은 링크라 가린다.
      마크업은 남겨두므로 되살리려면 이 한 줄만 지우면 된다. */
/* 🔴 앞의 .sns_area.dropdown-menu a{display:flex!important} 가 (0,3,1) 이라
      (0,2,0) 짜리 규칙으로는 !important 를 붙여도 진다 — 선택자를 같은 깊이로 맞춘다.
      실제로 이 한 끗 때문에 숨긴 줄 알았던 항목이 빈칸으로 남아 있었다. */
.sns_area.dropdown-menu a.share-googleplus{ display:none !important; }
/* 모바일에서 팝업이 화면 밖으로 잘리지 않게 오른쪽 기준으로 편다 */
@media (max-width: 767.98px){
  .sns_area.dropdown-menu{ right:0; left:auto; }
}

/* 공유 팝업 층위 — 부트스트랩 드롭다운 기본 1000 이라 우측 플로팅에 가려졌다(실측).
   기존 층위: #hb-side 1035 < 내가본상품 1040 < 비교함 1050 < 구매바/비회원팝업 1060 < 옵션시트 1090.
   썸네일보다는 위, 상시 노출 바보다는 아래여야 하므로 1045 를 쓴다. */
.sns_area.dropdown-menu{ z-index:1045; }

/* ===== 비교함 PC 좌측 플로팅 + 찜·공유 확대 (ck20260814f) ===== */

/* X 닫기 — '비우기'는 담긴 상품을 지우고, X 는 화면에서만 내린다(담긴 건 유지).
   새로 담으면 다시 열린다(JS 의 closed 플래그). */
.hb-cmp-hide{
  border:0; background:none; color:#aaa; font-size:20px; line-height:1;
  cursor:pointer; padding:0 4px; align-self:center;
}
.hb-cmp-hide:hover{ color:#333; }

/* PC 는 하단 가로 바 대신 **좌측 세로 패널**. 우측 플로팅들과 같은 방식으로
   화면 가장자리에 얹는다(1440 이하에선 좌측 여백이 60~70px 뿐이라 여백 안에는 못 넣는다). */
@media (min-width: 992px){
  /* 🔴 transform 을 쓰면 안 된다 — transform 이 걸린 요소는 자손 position:fixed 의
     **기준(containing block)** 이 되어, 안에 있는 비교 모달(inset:0)이 212px 패널
     크기로 잘린다(실측: 모달이 260px 폭으로 찌그러져 글자가 세로로 쌓였다).
     대신 위아래를 꽉 채우고 flex 로 가운데 정렬한다. */
  #hb-cmp{
    left:12px; right:auto; top:0; bottom:0; width:var(--hb-left-w);
    display:flex; align-items:center; pointer-events:none;
  }
  #hb-cmp .hb-cmp-inner{ width:100%; pointer-events:auto; }
  #hb-cmp .hb-cmp-modal{ pointer-events:auto; }
  #hb-cmp .hb-cmp-inner{
    position:relative; flex-direction:column; align-items:stretch; gap:10px;
    padding:15px 14px 13px; border:1px solid #e6e6e6; border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.14); max-height:74vh; overflow:auto;
  }
  #hb-cmp .hb-cmp-label{ padding-right:20px; }
  #hb-cmp .hb-cmp-items{ flex-direction:column; gap:7px; overflow:visible; }
  #hb-cmp .hb-cmp-chip{ width:100%; }
  #hb-cmp .hb-cmp-chip span{ flex:1 1 auto; max-width:none; }
  #hb-cmp .hb-cmp-act{ flex-direction:column; gap:6px; }
  #hb-cmp .hb-cmp-act button{ width:100%; }
  #hb-cmp .hb-cmp-hide{ position:absolute; top:7px; right:8px; }
}

/* 찜·공유 버튼 — 아이콘이 10px 라 눌러야 할 것으로 보이지 않았다(실측 버튼 35x26).
   .fs-6 처럼 rem 기반이 작게 잡히는 페이지라 px 로 고정한다. */
#sit_btn_opt > .dropdown > a,
#sit_btn_opt > .dropdown > button{
  min-width:40px; height:40px; padding:0 9px; border-radius:20px;
  display:inline-flex; align-items:center; justify-content:center; gap:3px;
}
#sit_btn_opt > .dropdown > a > i,
#sit_btn_opt > .dropdown > button > i{ font-size:21px; line-height:1; }
#sit_btn_opt .wish-count{ font-size:14px; font-weight:600; }
#sit_btn_opt > .dropdown > a:hover,
#sit_btn_opt > .dropdown > button:hover{ background:#f4f4f4; }

/* ===== 헤더 아이콘 · 비교 모달 (ck20260814g) ===== */

/* 검색·마이페이지·장바구니 아이콘 밑줄 제거 — 전역 a{text-decoration:underline} 이 먹고 있었다 */
#header .ser_wrap .ico_link,
#header .ser_wrap .ico_link:hover,
#header .ser_wrap .ico_link:focus{ text-decoration:none !important; }

/* 상품 비교 모달 — PC 에서 더 넓게, 열이 눌려 글자가 세로로 쌓이지 않게 */
@media (min-width: 992px){
  .hb-cmp-panel{ width:min(1040px, 94vw); max-height:88vh; }
  .hb-cmp-table{ padding:8px 16px 20px; }
  .hb-cmp-table table{ table-layout:fixed; }
  /* 🔴 table-layout:fixed 에서 열 너비는 **첫 행(thead)** 이 정한다.
     tbody th 에 width 를 주면 무시돼 라벨 열이 1/3(336px)을 통째로 먹고
     오른쪽이 빈칸으로 남는다(실측). 반드시 thead 의 첫 칸에 준다. */
  .hb-cmp-table thead th:first-child{ width:104px; }
  .hb-cmp-table tbody th{ width:104px; }
  .hb-cmp-table th, .hb-cmp-table td{ padding:13px 12px; word-break:keep-all; }
  .hb-cmp-thumb{ width:150px; height:150px; }
}

/* ===== 좌측 폭 통일 · 층위 정리 (ck20260814i) ===== */

/* PC 좌측 열에 뜨는 것들은 폭·왼쪽 기준을 하나로 묶는다.
   지금은 비교함 패널과 비회원 안내 팝업 둘이다. 값 하나만 바꾸면 같이 움직인다. */
:root{ --hb-left-w: 240px; }
@media (min-width: 992px){
  #non_member_popup{
    left:12px;
    width:var(--hb-left-w);
    max-width:calc(100vw - 24px);
  }
}

/* ── z-index 층위 (여기가 정본) ─────────────────────────────
   아래에서 위로:
     1035  #hb-side              카카오 상담 · TOP
     1040  .hb-recent-float      내가 본 상품
     1045  .sns_area             공유 팝업(부트스트랩 기본 1000 을 올린 것)
     1050  #hb-cmp               비교함
     1055  #non_member_popup     비회원 안내(비교함보다 위, 구매바보다 아래)
     1060  .hb-floatbuy          구매바 — 상시 노출 바가 항상 위
     1200  .hb-zoom              이미지 뷰어
     1210  .hb-cmp-modal         비교 모달
     1300  .hb-pp                메인 이미지 팝업
   🔴 같은 값을 두 개가 쓰면 DOM 순서로 갈려 재현이 안 된다 —
      새로 얹을 땐 이 표에 빈 자리를 정하고 시작할 것.
      겹침은 z-index 로 '덮는' 게 아니라 --hb-safe-bottom 으로 '비켜' 푸는 게 먼저다. */
#non_member_popup{ z-index:1055; }

/* 모바일: 비회원 팝업이 우측 카카오/TOP 열(x≈332~378)을 덮고 있었다(실측 46x150px).
   우측을 비워 비켜준다 — 68px = 우측여백 12 + 버튼 46 + 간격 10. */
@media (max-width: 991.98px){
  #non_member_popup{ left:10px; right:68px; width:auto; }
}

/* ===== 리뷰챗 오프셋: 상수 제거 (ck20260814k) =====
   기존: html.hb-guest-on .hb-chat{ bottom: calc(--hb-safe-bottom + 196px) }  ← 팝업 높이 상수
   팝업 폭을 240px 로 바꾸자 높이가 199px 가 되어 3px 모자라 겹쳤다(실측 4px).
   🔴 다른 요소의 크기를 상수로 베끼면 그 요소가 바뀔 때 조용히 깨진다.
      JS(initBottomGap)가 실제 높이를 재서 --hb-guest-h 로 넘겨준다. */
html.hb-guest-on .hb-chat{
  bottom: calc(var(--hb-safe-bottom, 16px) + var(--hb-guest-h, 196px) + 12px) !important;
}

/* '내가 본 상품' 세로 위치 — 기존 top:32% 는 화면 위쪽에 치우쳐 보였다.
   접힘 상태 높이(62px)를 감안해 위젯 중심이 화면 중앙에 오도록 46% 로 내린다.
   (펼치면 패널이 .hb-rf-panel{bottom:0} 로 위쪽으로 자라므로 아래가 막히지 않는다) */
@media (min-width: 768px){
  .hb-recent-float{ top:46%; }
}

/* ===== 로그인 · 비회원 구매 페이지 (ck20260814m) =====
   그누보드 기본 스킨을 사이트 톤(--ink / --accent / Pretendard)으로 맞춘다.
   스킨 마크업은 '정보찾기' 링크 분리 외에는 건드리지 않았다. */
#mb_login.mbskin{
  /* 🔴 기본 스킨이 width:360px 를 박아둬 max-width 만으로는 안 넓어진다 */
  width:100%; max-width:460px; margin:48px auto 80px; padding:0 16px;
  font-family:var(--font-body);
}
#mb_login.mbskin > h1{
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  text-align:center; margin:0 0 22px; color:var(--ink);
}
#mb_login .mbskin_box{
  background:#fff; border:1px solid var(--hairline); border-radius:16px;
  padding:0 22px 24px;
}
/* 회원로그인 / 회원가입 = 2탭 */
#mb_login .mb_log_cate{
  display:flex; margin:0 -22px 24px; border-bottom:1px solid var(--hairline);
}
#mb_login .mb_log_cate h2,
#mb_login .mb_log_cate .join{
  flex:1 1 0; margin:0; padding:16px 0 14px; text-align:center;
  font-size:15px; font-weight:700; color:#9a9a9a; text-decoration:none;
  border-bottom:2px solid transparent;
}
#mb_login .mb_log_cate h2{ color:var(--ink); border-bottom-color:var(--ink); }
#mb_login .mb_log_cate .join:hover{ color:var(--ink); }
#mb_login #login_fs{ border:0; padding:0; margin:0; }
#mb_login #login_fs legend{ position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
#mb_login .frm_input{
  display:block; width:100%; height:50px; margin:0 0 10px; padding:0 14px;
  border:1px solid #e2e2e2; border-radius:10px; background:#fff;
  font-size:15px; color:var(--ink); box-sizing:border-box;
}
#mb_login .frm_input::placeholder{ color:#b3b3b3; }
#mb_login .frm_input:focus{ border-color:var(--ink); outline:none; }
#mb_login .btn_submit{
  display:block; width:100%; height:52px; margin:14px 0 0; border:0;
  border-radius:10px; background:var(--ink); color:#fff;
  font-size:15px; font-weight:700; cursor:pointer; text-align:center;
  line-height:52px; text-decoration:none;
}
#mb_login .btn_submit:hover{ background:#000; }
#mb_login #login_info{
  display:flex; align-items:center; justify-content:space-between;
  margin:16px 2px 4px; font-size:13.5px;
}
#mb_login #login_info label{ color:#666; cursor:pointer; }
/* 🔴 기본 스킨은 input 을 opacity:0 + position:absolute 로 숨기고
   label 안의 <span> 을 체크박스처럼 그린다. 그 span 만 숨기면
   **체크박스가 통째로 사라진다**(실측: 자동로그인·개인정보 동의 둘 다 소멸).
   여기서는 네이티브 input 을 되살려 쓴다 — 접근성·키보드 조작이 그대로 살아난다. */
#mb_login .chk_box{ display:flex; align-items:center; }
#mb_login .chk_box input.selec_chk{
  /* 🔴 기본 스킨은 z-index:-1 로도 숨긴다 — position·opacity 만 되돌리면
     요소는 있는데 카드 배경 뒤로 깔려 여전히 안 보인다(실측). */
  position:static !important; opacity:1 !important; z-index:auto !important;
  width:17px; height:17px; flex:0 0 17px; margin:0 8px 0 0;
  accent-color:var(--ink); cursor:pointer;
}
#mb_login .chk_box label{ margin:0; cursor:pointer; }
#mb_login .chk_box label span{ display:none; }   /* 스킨의 장식용 span */
#mb_login .login_if_lpl{ display:flex; align-items:center; gap:10px; }
#mb_login .login_if_lpl a{
  color:#666; text-decoration:none; border-bottom:1px solid #d8d8d8;
  padding-bottom:1px;
}
#mb_login .login_if_lpl a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
#mb_login .lpl_sep{ width:1px; height:11px; background:#dcdcdc; }

/* 비회원 구매 */
#mb_login #mb_login_notmb{
  background:#fff; border:1px solid var(--hairline); border-radius:16px;
  padding:24px 22px; margin:16px 0 0;
}
#mb_login #mb_login_notmb h2{
  font-size:16px; font-weight:800; color:var(--ink); margin:0 0 6px; text-align:center;
}
#mb_login #mb_login_notmb > p{
  font-size:13px; color:var(--text-sub); text-align:center; margin:0 0 16px;
}
#mb_login #guest_privacy{
  /* 🔴 기본 스킨이 height:150px 를 박아둬 max-height 가 무시된다 */
  height:auto; max-height:210px; overflow-y:auto; padding:14px 15px;
  border:1px solid #ececec; border-radius:10px; background:#fafafa;
  font-size:12.5px; line-height:1.75; color:#555; white-space:pre-line;
}
/* 개인정보 동의는 '읽고 체크한다'가 한눈에 보여야 한다 — 박스로 띄우고
   체크되면 테두리가 진해져 상태가 드러나게 한다. */
#mb_login #mb_login_notmb .chk_box{
  margin:12px 0 0; padding:13px 14px; font-size:13.5px; color:#333;
  border:1px solid #e2e2e2; border-radius:10px; background:#fff;
  transition:border-color .15s, background .15s;
}
#mb_login #mb_login_notmb .chk_box:has(input:checked){
  border-color:var(--ink); background:#fafafa;
}
#mb_login #mb_login_notmb .chk_box:hover{ border-color:#c9c9c9; }
#mb_login #mb_login_notmb .chk_box label{ font-weight:600; }
#mb_login #mb_login_notmb .btn_confirm{ margin:14px 0 0; }

@media (max-width:575.98px){
  #mb_login.mbskin{ margin:24px auto 60px; }
  #mb_login .mbskin_box, #mb_login #mb_login_notmb{ border-radius:14px; }
}

/* ===== 로그인 폼 마무리 (ck20260814p) ===== */

/* 기본 스킨이 #login_password_lost 에만 박스(테두리·배경)를 줘서 두 링크 모양이 달랐다.
   새로 만든 아이디 찾기에는 그 id 가 없어 생긴 차이다 — 둘을 같은 모양으로 맞춘다. */
#mb_login .login_if_lpl a,
#mb_login #login_password_lost,
#mb_login #login_id_lost{
  border:0 !important; background:none !important; box-shadow:none !important;
  padding:0 0 1px !important; border-radius:0 !important;
  border-bottom:1px solid #d8d8d8 !important;
  color:#666; text-decoration:none; font-size:13.5px; line-height:1.3;
}
#mb_login .login_if_lpl a:hover{
  color:var(--ink); border-bottom-color:var(--ink) !important;
}

/* 🔴 sound_only 는 스크린리더 전용인데 화면에 그대로 나오고 있었다
   ("회원아이디 필수", "비밀번호 필수"가 입력창 위에 노출). 라벨만 되돌린다 —
   <h2><span class="sound_only">회원</span>로그인</h2> 의 span 은 건드리지 않아야
   탭 이름이 '회원로그인' 그대로 남는다. */
#mb_login label.sound_only{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ===== 구매 전 확인 동의 모달 (ck20260814r) ===== */
.hb-oc{ position:fixed; inset:0; z-index:1220; display:flex;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(0,0,0,.55); }
.hb-oc[hidden]{ display:none; }
body.hb-oc-open{ overflow:hidden; }
.hb-oc-panel{ width:min(460px,100%); max-height:88vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.3); }
.hb-oc-head{ display:flex; align-items:center; justify-content:space-between;
  padding:17px 20px 13px; border-bottom:1px solid var(--hairline,#eee); }
.hb-oc-head strong{ font-size:16px; font-weight:800; color:var(--ink,#212121); }
.hb-oc-x{ border:0; background:none; font-size:24px; line-height:1; color:#999; cursor:pointer; }
.hb-oc-body{ padding:6px 20px 2px; }
.hb-oc-item{ padding:14px 0; border-bottom:1px solid #f3f3f3; }
.hb-oc-item:last-child{ border-bottom:0; }
.hb-oc-item b{ display:block; font-size:13.5px; font-weight:800;
  color:var(--ink,#212121); margin:0 0 6px; }
.hb-oc-item p{ margin:0; font-size:13px; line-height:1.65; color:#555; word-break:keep-all; }
.hb-oc-all{ display:flex; align-items:center; gap:9px; margin:4px 20px 0;
  padding:13px 14px; border:1px solid #e2e2e2; border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--ink,#212121); cursor:pointer;
  transition:border-color .15s, background .15s; }
.hb-oc-all:has(input:checked){ border-color:var(--ink,#212121); background:#fafafa; }
.hb-oc-all input{ width:18px; height:18px; flex:0 0 18px; margin:0;
  accent-color:var(--ink,#212121); cursor:pointer; }
.hb-oc-foot{ display:flex; gap:8px; padding:14px 20px 20px; }
.hb-oc-foot button{ flex:1 1 0; height:50px; border-radius:10px;
  font-size:15px; font-weight:700; cursor:pointer; }
.hb-oc-cancel{ border:1px solid #ddd; background:#fff; color:#666; }
.hb-oc-go{ border:0; background:var(--ink,#212121); color:#fff; }
.hb-oc-go:disabled{ background:#d5d5d5; cursor:not-allowed; }
@media (max-width:575.98px){
  .hb-oc{ align-items:flex-end; padding:0; }
  .hb-oc-panel{ width:100%; max-height:92vh; border-radius:16px 16px 0 0; }
}

/* ===== 결제완료 고지 모달 — 아이덴티티 정렬 (ck20260814s) =====
   기존은 초록 체크 + 앰버 경고박스라 스토어의 모노톤 톤과 겉돌았다.
   --ink 모노톤을 뼈대로 쓰고, 강조는 --accent 한 곳(필독 pill)에만 준다.
   🔴 닫기 동선 통제(X 없음·바깥클릭 무시·ESC 차단)는 그대로 둔다 — 디자인만 바꾼다. */
.hb-on{ background:rgba(0,0,0,.62); padding:18px; }
.hb-on-box{
  width:min(460px,100%); max-height:88vh; border-radius:16px;
  padding:28px 22px 22px; background:#fff;
  font-family:var(--font-body); color:var(--ink);
  box-shadow:0 20px 60px rgba(0,0,0,.32);
  display:flex; flex-direction:column;
}
/* 완료 — 스토어 톤에 맞춰 초록 대신 잉크 원형 */
.hb-on-done{ text-align:center; padding-bottom:22px; border-bottom:1px solid var(--hairline); }
.hb-on-check{
  width:54px; height:54px; line-height:54px; margin:0 auto 13px;
  border-radius:50%; background:var(--ink); color:#fff;
  font-size:26px; font-weight:400;
}
.hb-on-done-t{ font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.hb-on-done-d{ margin-top:8px; font-size:13.5px; line-height:1.7; color:var(--text-sub); }
/* 고지 — 앰버 박스를 걷어내고 제목 + 배지로 위계만 남긴다 */
.hb-on-warn{ margin:20px 0 11px; padding:0; background:none; border:0; border-radius:0; }
.hb-on-warn-t{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
}
.hb-on-warn-t > span{ display:none; }            /* ⚠ 이모지 대신 배지를 쓴다 */
.hb-on-warn-t b{
  padding:3px 9px 4px; border-radius:99px;
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  color:var(--accent); font-size:11.5px; font-weight:800; letter-spacing:.01em;
}
.hb-on-warn-d{ margin-top:7px; font-size:12.5px; line-height:1.6; color:var(--text-sub); }
.hb-on-warn-d b{ color:var(--ink); font-weight:700; }
.hb-on-frame{ border:1px solid var(--hairline); border-radius:12px; background:#fcfcfc; }
.hb-on-hint{ margin:10px 2px 12px; font-size:12.5px; color:var(--text-sub); }
/* 동의 — 구매 전 모달과 같은 규칙(체크되면 테두리가 진해진다) */
.hb-on-agree{
  align-items:center; gap:10px; padding:14px;
  border:1px solid #e2e2e2; border-radius:10px; background:#fff;
  font-size:13.5px; font-weight:700; color:var(--ink);
  transition:border-color .15s, background .15s, opacity .15s;
}
.hb-on-agree.is-off{ opacity:.45; cursor:not-allowed; }
.hb-on-agree:has(input:checked){ border-color:var(--ink); background:#fafafa; }
.hb-on-agree input{
  width:18px; height:18px; flex:0 0 18px; margin:0;
  accent-color:var(--ink); cursor:pointer;
}
.hb-on-agree b{ color:var(--accent); }
.hb-on-btn{
  margin-top:14px; height:54px; padding:0; border:0; border-radius:10px;
  background:var(--ink); color:#fff; font-size:15.5px; font-weight:800;
  letter-spacing:-.01em; cursor:pointer;
}
.hb-on-btn:hover:not(:disabled){ background:#000; }
.hb-on-btn:disabled{ background:#d8d8d8; color:#fff; cursor:not-allowed; }

@media (max-width:575.98px){
  .hb-on{ padding:0; align-items:flex-end; }
  .hb-on-box{
    width:100%; max-width:none; height:auto; max-height:94vh;
    border-radius:16px 16px 0 0; padding:24px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .hb-on-check{ width:48px; height:48px; line-height:48px; font-size:24px; }
  .hb-on-done-t{ font-size:18px; }
}

/* 고지 박스 높이 — PC·모바일 모두 남는 세로를 프레임이 가져간다(flex:1).
   🔴 min-height 를 키우는 건 효과가 없었다(이미 그보다 크다). 실제 기기(844px)에서는
      PC 와 비슷한 높이가 나온다 — 미리보기 폰이 760px 라 작아 보였을 뿐이다.
      내용 자체는 PC·모바일이 **완전히 동일**함을 실측으로 확인했다. */

/* ===== 장바구니 (ck20260814x) =====
   코어 /shop/cart.php 가 직접 렌더한다(스킨 파일 없음) — **코어는 건드리지 않고** CSS 로만 맞춘다.
   컬럼: 1 체크 · 2 상품 · 3 수량 · 4 가격 · 5 포인트 · 6 배송비 · 7 합계 (empty colspan=7) */
#sod_bsk{
  max-width:1180px; margin:26px auto 60px; padding:0 16px;
  font-family:var(--font-body); color:var(--ink);
}
#sod_bsk_list{
  background:#fff; border:1px solid var(--hairline); border-radius:16px;
  padding:6px 20px 20px;
}
#sod_bsk .tbl_head03{ border:0; }
#sod_bsk table{ width:100%; border-collapse:collapse; }
#sod_bsk thead th{
  padding:15px 10px; border-bottom:1px solid var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--ink);
  text-align:center; white-space:nowrap; background:none;
}
#sod_bsk tbody td{
  padding:18px 10px; border-bottom:1px solid var(--hairline);
  font-size:14px; color:var(--ink-2, #555); text-align:center; vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
#sod_bsk tbody tr:last-child td{ border-bottom:0; }
#sod_bsk .td_prd{ text-align:left; }
#sod_bsk .sod_img{ float:left; margin-right:15px; }
#sod_bsk .sod_img img{
  width:84px; height:84px; object-fit:cover; border-radius:9px;
  background:#f5f5f5; display:block;
}
#sod_bsk .sod_name{ overflow:hidden; }
#sod_bsk .prd_name{
  display:inline-block; font-size:15px; font-weight:700; color:var(--ink);
  text-decoration:none; line-height:1.45; letter-spacing:-.01em;
}
#sod_bsk .prd_name:hover{ text-decoration:underline; }
#sod_bsk .sod_opt{ margin:7px 0 0; font-size:13px; color:var(--text-sub); line-height:1.6; }
#sod_bsk .sod_opt ul,
#sod_bsk .sod_opt li{ list-style:none; margin:0; padding:0; }
#sod_bsk .mod_options{
  margin:8px 0 0; padding:5px 11px; border:1px solid #ddd; border-radius:7px;
  background:#fff; color:#666; font-size:12px; font-weight:600; cursor:pointer;
}
#sod_bsk .mod_options:hover{ border-color:var(--ink); color:var(--ink); }
#sod_bsk .total_prc{ font-size:15px; font-weight:800; color:var(--ink); }

/* 체크박스 — 기본 스킨이 position:absolute + opacity:0 + z-index:-1 로 숨긴다(3중).
   로그인 페이지와 같은 방식으로 네이티브 체크박스를 되살린다. */
#sod_bsk .chk_box input.selec_chk{
  position:static !important; opacity:1 !important; z-index:auto !important;
  width:17px; height:17px; margin:0; accent-color:var(--ink); cursor:pointer;
}
#sod_bsk .chk_box label span{ display:none; }

/* 삭제 버튼 — 빨강/회색 대신 중립 아웃라인 */
#sod_bsk .btn_cart_del{ margin:16px 0 0; display:flex; gap:7px; }
#sod_bsk .btn_cart_del button{
  padding:8px 14px; border:1px solid #ddd; border-radius:8px; background:#fff;
  color:#666; font-size:13px; font-weight:600; cursor:pointer;
}
#sod_bsk .btn_cart_del button:hover{ border-color:var(--ink); color:var(--ink); }

/* 합계 */
#sod_bsk_tot{ margin:22px 0 0; display:flex; justify-content:flex-end; }
#sod_bsk_tot ul{
  display:flex; align-items:stretch; gap:0; margin:0; padding:0; list-style:none;
  border:1px solid var(--hairline); border-radius:12px; overflow:hidden;
}
#sod_bsk_tot li{
  padding:14px 20px; font-size:13.5px; color:var(--text-sub);
  border-left:1px solid var(--hairline); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#sod_bsk_tot li:first-child{ border-left:0; }
#sod_bsk_tot li strong,
#sod_bsk_tot li b{ color:var(--ink); font-weight:800; }
#sod_bsk_tot .sod_bsk_cnt{ background:#fafafa; font-size:15px; color:var(--ink); font-weight:700; }

/* 🔴 포인트는 상품상세와 동일하게 **가린다**(삭제 아님).
   되살리려면 이 두 줄만 지우면 된다. 컬럼 5 = 포인트. */
#sod_bsk thead th:nth-child(5),
#sod_bsk tbody td:nth-child(5){ display:none; }
#sod_bsk_tot .sod_bsk_pt{ display:none; }

/* 액션 */
#sod_bsk_act{
  margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--hairline);
  display:flex; gap:9px; justify-content:space-between; align-items:center;
}
#sod_bsk_act .btn01{
  padding:0 20px; height:50px; line-height:50px; border:1px solid #ddd;
  border-radius:10px; background:#fff; color:#555; font-size:14.5px; font-weight:600;
  text-decoration:none; display:inline-block;
}
#sod_bsk_act .btn01:hover{ border-color:var(--ink); color:var(--ink); }
#sod_bsk_act .btn_submit{
  min-width:200px; height:50px; border:0; border-radius:10px;
  background:var(--ink); color:#fff; font-size:15px; font-weight:800; cursor:pointer;
}
#sod_bsk_act .btn_submit:hover{ background:#000; }
#sod_bsk .empty_table{
  padding:64px 10px; text-align:center; color:var(--text-sub); font-size:14.5px;
}

@media (max-width:767.98px){
  #sod_bsk{ margin:16px auto 44px; padding:0 10px; }
  #sod_bsk_list{ padding:4px 12px 16px; border-radius:14px; }
  /* 7컬럼은 좁은 화면에 안 들어간다 — 가로 스크롤로 데이터를 버리지 않고 보존한다 */
  #sod_bsk .tbl_wrap{ overflow-x:auto; }
  #sod_bsk table{ min-width:560px; }
  #sod_bsk tbody td{ padding:14px 8px; font-size:13.5px; }
  #sod_bsk .sod_img img{ width:64px; height:64px; }
  #sod_bsk .prd_name{ font-size:14px; }
  #sod_bsk_tot{ justify-content:stretch; }
  #sod_bsk_tot ul{ width:100%; }
  #sod_bsk_tot li{ flex:1 1 0; text-align:center; padding:12px 8px; font-size:12.5px; }
  #sod_bsk_act{ flex-direction:column-reverse; gap:8px; }
  #sod_bsk_act .btn01,
  #sod_bsk_act .btn_submit{ width:100%; min-width:0; }
}

/* ===== 장바구니 마무리 (ck20260814y) ===== */

/* 🔴 기존 CSS 가 thead 의 3~7번째(총수량·판매가·포인트·배송비·소계)를 display:none 으로
   가려놔서, tbody 에는 값이 있는데 머리글만 없는 반쪽 표였다. 되살린다. */
#sod_bsk thead th{ display:table-cell !important; }

/* 포인트 열은 계속 가린다 — 위 규칙보다 구체적이라 이긴다(삭제 아님, 두 줄 제거로 복구). */
#sod_bsk thead th:nth-child(5),
#sod_bsk tbody td:nth-child(5){ display:none !important; }

/* 스크린리더 전용 문구("상품", "상품 전체")가 체크박스 옆에 그대로 보이고 있었다. */
#sod_bsk .sound_only{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* 체크박스 열은 좁게 — 머리글이 살아나면서 폭을 크게 먹었다 */
#sod_bsk thead th:first-child,
#sod_bsk tbody td:first-child{ width:52px; }
#sod_bsk thead th:nth-child(2){ text-align:left; padding-left:14px; }