/* nhubstore sage 리디자인 오버라이드 (기존 CSS 뒤에 로드) */
:root{
  --cream:#FFFFFF; --paper:#FFFFFF; --tile:#F2EDE6;
  --ink:#2D2A26; --ink-soft:#5C564E; --muted:#9A938A; --line:#ECE7DF;
  --navy:#383D57; --navy-deep:#2C3049; --taupe:#A4978A; --taupe-deep:#8C7E6F;
  --script:#4A5680; --price:#B5544A;
}
/* 전역 기반 */
body{ background:var(--cream); color:var(--ink);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:-0.01em; }
#wrapper, #container, .container { background:var(--cream); }
.sg-label{ font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.sg-script{ font-family:"Caveat","Nanum Pen Script",cursive; color:var(--script); line-height:1; }
/* 상단 유틸바 */
#cate_head .btn_login{ max-width:1380px; }
#cate_head .btn_left a, #cate_head .btn_right a{ color:var(--ink-soft); font-size:12.5px; }
#cate_head .btn_left a .fa{ color:var(--muted); }
#cate_head .btn_left a:hover, #cate_head .btn_right a:hover{ color:var(--navy); }
#cate_head .btn_ol{ color:var(--navy); font-weight:600; }
/* 헤더(로고/검색) */
/* 좁은 화면에서 아래 흰 바(#hd_wr)가 로고를 덮어 위쪽만 보이던 것을 막는다 */
#cate_mid{ z-index:2; }
#cate_mid #mid_logo{ height:auto; }
#cate_mid #mid_logo img{ position:static; transform:none; height:60px; width:auto; }
#cate_mid .hd_sch_wr #sch_str2{ border-bottom:1.5px solid var(--ink); color:var(--ink); }
#cate_mid .sch_submit{ color:var(--ink); }
@media (max-width:576px){ #cate_mid #mid_logo img{ height:44px; } }
/* 데스크톱: 로고 중앙 · 검색 우측 (승인 시안 레이아웃) */
@media (min-width:970px){
  #cate_mid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:20px; }
  #cate_mid #mid_logo{ grid-column:2; justify-self:center; width:auto; height:auto; }
  #cate_mid .hd_sch_wr.pc_only{ position:relative; grid-column:3; justify-self:end;
    left:auto; top:auto; transform:none; width:340px; margin:0; }
}

/* ── Task 3: 카테고리 내비 ── */
/* hd_wr: 카테고리 바 컨테이너 — 상·하 헤어라인 + 화이트 배경 */
#hd_wr{
  background:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* PC 수평 내비 — 실제 셀렉터: #category .menu_wr li > a */
/* (모바일: .menu 는 position:fixed 패널 — hover 효과는 PC에서만 적용) */
@media (min-width:970px){
  #category .menu_wr li > a{
    color:var(--ink);
    font-weight:600;
    font-size:15.5px;
    position:relative;
    display:inline-block;
  }
  #category .menu_wr li > a:hover{
    color:var(--navy);
  }
  /* hover 시 --navy 밑줄 슬라이드-인 애니메이션 */
  #category .menu_wr li > a::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-2px;
    height:2px;
    background:var(--navy);
    transition:right .25s ease;
  }
  #category .menu_wr li > a:hover::after{
    right:0;
  }
  /* 하위분류 드롭다운은 기존 동작 유지 — sub_cate 링크는 내비 톤만 정리 */
  #category .menu_wr .sub_cate a{
    color:var(--ink-soft);
    font-size:14px;
    font-weight:400;
  }
  #category .menu_wr .sub_cate a:hover{
    color:var(--navy);
  }
}

/* ── Task 4: 우측 플로팅 툴바 리스킨 ── */
/* 툴바 컨테이너: 화이트 라운드 카드 + 헤어라인 + 그림자 */
#side_menu #quick{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(45,42,38,.08);
}
/* 각 버튼: 차콜 소프트 + 하단 헤어라인 구분선 */
#side_menu #quick li{
  border-bottom:1px solid var(--line);
}
#side_menu #quick li:last-child{
  border-bottom:none;
}
#side_menu #quick .btn_sm{
  color:var(--ink-soft);
  background:transparent;
  width:100%;
  transition:background .18s, color .18s;
}
/* hover / 활성 상태: 네이비 강조 */
#side_menu #quick .btn_sm:hover,
#side_menu #quick .btn_sm.btn_sm_on{
  background:var(--tile);
  color:var(--navy);
}
/* TOP 버튼: 동일 화이트 카드 스타일 */
#side_menu #top_btn{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-soft);
  border-radius:14px;
  transition:background .18s, color .18s;
  margin-top:6px;
}
#side_menu #top_btn:hover{
  background:var(--tile);
  color:var(--navy);
}
/* 헤더 모바일 장바구니 카운트 뱃지 (span.cart-count in #btn_cartop) */
#hd_btn #btn_cartop .cart-count{
  background:var(--price);
  color:#fff;
  border-radius:50%;
  font-size:11px;
  font-weight:700;
  min-width:16px;
  height:16px;
  line-height:16px;
  text-align:center;
  display:inline-block;
  padding:0 3px;
}

/* ── Task 5: 히어로 슬라이더 ── */
.sg-hero{ position:relative; }  /* owl 화살표(position:absolute) 앵커 */
.sg-hero .sg-slide{ }
.sg-hero .sg-inner{ max-width:1280px; margin:0 auto; padding:60px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.sg-hero .sg-copy .sg-script{ font-size:46px; transform:rotate(-6deg); display:inline-block; margin-bottom:-6px; }
.sg-hero .sg-copy .sg-label{ display:block; margin:10px 0 14px; }
.sg-hero .sg-copy h2{ font-size:46px; font-weight:800; line-height:1.18; letter-spacing:-0.03em; color:var(--ink); }
.sg-hero .sg-copy h2 em{ font-style:normal; color:var(--navy); }
.sg-hero .sg-copy p{ margin:22px 0 30px; font-size:17px; color:var(--ink-soft); max-width:440px; }
.sg-pill{ display:inline-flex; align-items:center; gap:10px; background:var(--navy); color:#fff;
  padding:16px 30px; border-radius:40px; font-size:13px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; }
.sg-pill:hover{ background:var(--navy-deep); color:#fff; }
.sg-hero .sg-shot{ background:var(--tile); border-radius:18px; aspect-ratio:1/0.78;
  display:grid; place-items:center; overflow:hidden; position:relative; }
.sg-hero .sg-shot img{ width:100%; height:100%; object-fit:cover; }
.sg-hero .sg-shot .sg-tag{ position:absolute; left:24px; top:24px; background:var(--paper); border-radius:30px;
  padding:8px 16px; font-size:12px; font-weight:600; color:var(--navy); box-shadow:0 4px 18px rgba(45,42,38,.06); }
.sg-hero .sg-slide.s1{ background:#F5F1EA; }
.sg-hero .sg-slide.s2{ background:#ECE5D9; } .sg-hero .sg-slide.s2 .sg-shot{ background:#F6F1E8; }
.sg-hero .sg-slide.s3{ background:var(--navy); }
.sg-hero .sg-slide.s3 h2, .sg-hero .sg-slide.s3 h2 em{ color:#fff; }
.sg-hero .sg-slide.s3 p{ color:rgba(255,255,255,.78); } .sg-hero .sg-slide.s3 .sg-label{ color:rgba(255,255,255,.55); }
.sg-hero .sg-slide.s3 .sg-script{ color:#C9B79B; }
.sg-hero .sg-slide.s3 .sg-pill{ background:#fff; color:var(--navy); }
.sg-hero .sg-slide.s3 .sg-shot{ background:rgba(255,255,255,.08); } .sg-hero .sg-slide.s3 .sg-shot img{ mix-blend-mode:normal; }
/* owl nav/dots 톤 */
.sg-hero .owl-nav button.owl-prev, .sg-hero .owl-nav button.owl-next{ position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.85)!important; border:1px solid var(--line)!important; color:var(--ink)!important; }
.sg-hero .owl-nav .owl-prev{ left:18px; } .sg-hero .owl-nav .owl-next{ right:18px; }
.sg-hero .owl-dots{ position:absolute; left:0; right:0; bottom:20px; text-align:center; line-height:0; }
/* owl.theme.css 미로드 → .owl-dot 버튼이 흰 네모로 렌더되는 레거시 스타일 리셋 */
.sg-hero .owl-dots .owl-dot{ background:transparent !important; border:0 !important; width:auto !important; height:auto !important;
  padding:0 !important; margin:0 5px !important; display:inline-block !important; vertical-align:middle; line-height:0; }
.sg-hero .owl-dots .owl-dot span{ display:block !important; width:8px; height:8px; border-radius:50% !important;
  background:rgba(45,42,38,.25)!important; transition:width .2s, background .2s; }
.sg-hero .owl-dots .owl-dot.active span{ background:var(--navy)!important; width:24px; border-radius:5px !important; }
@media (max-width:969px){ .sg-hero .sg-inner{ grid-template-columns:1fr; gap:26px; padding:36px 18px 56px; }
  .sg-hero .sg-copy h2{ font-size:32px; } }
@media (max-width:576px){ .sg-hero .sg-copy h2{ font-size:26px; } }

/* ── Task 6: 섹션 헤더 + 상품 그리드/카드 ── */

/* 섹션 헤더 */
.sg-sechead{ display:flex; align-items:center; justify-content:space-between; margin:38px 0 26px; padding:0 4px; }
.sg-sechead .sg-ttl{ display:flex; align-items:baseline; gap:14px; }
.sg-sechead .sg-script{ font-size:34px; transform:rotate(-5deg); display:inline-block; line-height:1; }
.sg-sechead h2{ font-size:27px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.sg-sechead .sg-more{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:600; white-space:nowrap; }
.sg-sechead .sg-more:hover{ color:var(--navy); }

/* 상품 그리드 */
.idx_c{ max-width:1280px; margin:0 auto; padding:18px 24px 50px; }
/* 그리드 컨테이너: main.NN 스킨 공통 .sct (ul.sct.smt_60 / div.sct.smt_30 모두 커버) */
.sct_wrap .sct{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px; float:none; padding-left:0; list-style:none; }
.sct_wrap .sct_li{ float:none; width:auto; margin:0; list-style:none; }
.sct_li .sct_img{ background:var(--tile); border-radius:12px; overflow:hidden; position:relative; }
.sct_li .sct_img a img{ transition:transform .4s; display:block; width:100%; height:auto; }
.sct_li:hover .sct_img a img{ transform:scale(1.04); }
.sct_li .btn_wish{ color:var(--muted); }
.sct_li .btn_wish:hover{ color:var(--price); }
.sct_li .sct_txt{ font-size:14px; color:var(--ink-soft); line-height:1.45; margin:14px 2px 7px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; }
.sct_li .sct_cost{ font-size:16px; font-weight:700; color:var(--ink); margin:0 2px; }
@media (max-width:969px){ .sct_wrap .sct{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; } .idx_c{ padding:18px 16px 40px; } }

/* 탭 영역 스타일 정리 */
#idx_tab .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; padding:0; list-style:none; }
#idx_tab .tabs .tab-link{ padding:10px 18px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
#idx_tab .tabs .tab-link.current, #idx_tab .tabs .tab-link:hover{ color:var(--navy); border-bottom-color:var(--navy); }

/* ── Task 7: 프로모션 밴드 (타우페 쿠폰) ── */
.sg-promo{ background:var(--taupe); color:#fff; margin:8px 0 50px; }
.sg-promo-in{ max-width:1280px; margin:0 auto; padding:46px 36px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.sg-promo-tag{ display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); padding:5px 14px; border-radius:30px; font-size:12px; letter-spacing:.08em; margin-bottom:14px; }
.sg-promo-txt h3{ font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0; color:#fff; }
.sg-promo-ticket{ display:flex; align-items:center; gap:22px; }
.sg-coupon{ background:#fff; border-radius:10px; padding:18px 30px; text-align:center; }
.sg-coupon .sg-label{ color:var(--taupe-deep); }
.sg-coupon b{ display:block; font-size:38px; font-weight:800; color:var(--ink); line-height:1.1; }
.sg-coupon b span{ font-size:18px; } .sg-coupon small{ font-size:11px; color:var(--muted); }
.sg-stamp{ width:92px; height:92px; border-radius:50%; border:2px dashed rgba(255,255,255,.7); display:grid; place-items:center; text-align:center; font-size:15px; font-weight:700; line-height:1.2; }
@media (max-width:969px){ .sg-promo-in{ flex-direction:column; align-items:flex-start; padding:32px 18px; } }

/* ── Task 8: 푸터 리스킨 ── */
/* 푸터 전체: 옅은 웜 베이지 배경 + 상단 헤어라인 */
#ft{ background:#F7F5F1; border-top:1px solid var(--line); color:var(--ink-soft); }
/* 공지 영역 — 레거시가 흰 글자(어두운 배경 가정)라 옅은 푸터에서 안 보임 → 가독 톤으로 */
#ft .ft_notice{ border-bottom:1px solid var(--line); }
#ft .ft_notice, #ft .ft_notice a, #ft .ft_notice li, #ft .ft_notice li a, #ft .ft_notice span{ color:var(--ink-soft) !important; }
#ft .ft_notice .lt h2, #ft .ft_notice .lt h2 a, #ft .ft_notice h2, #ft .ft_notice h2 a{ color:var(--ink) !important; font-weight:700; }
#ft .ft_notice .bx-controls-direction a{ color:var(--muted) !important; }
/* 회사 정보 제목 */
#ft .ft_wr .ft_box.ft_info h2{ color:var(--ink); font-size:14px; font-weight:700; }
/* 회사 정보 본문 */
#ft .ft_wr .ft_box.ft_info p{ color:var(--ink-soft); font-size:12px; line-height:1.9; }
/* 하단 바: 레거시 다크 배경(rgb(40,40,40)) 제거 → 전체 옅은 톤 통일 */
#ft .ft_wr1{ background:transparent; }
/* 하단 링크 (회사소개·개인정보·이용약관·PC버전) */
#ft .ft_wr1 #ft_company a{ color:var(--ink); font-weight:600; }
#ft .ft_wr1 #ft_company a:hover{ color:var(--navy); }
/* 저작권 문구 muted */
#ft .ft_copy{ color:var(--muted); font-size:11px; }
/* 상단 이동 버튼: 화이트 카드 스타일 */
#ft #ft_to_top{ background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); border-radius:50%; }

/* ── 레거시 스킨 잔존 정리 (시안 일치) ── */
/* (1) 슬릭 해제 후 .sct 하단에 남던 150px 빈 여백 제거 */
.sct_wrap .sct{ padding-bottom:0 !important; }
/* (2) 레거시 랭킹 번호(01/02 …) 숨김 — 시안에 없는 요소 (되살리려면 이 줄 제거) */
.sct_li .sct_rank{ display:none !important; }
/* (3) 메인상단 레거시 인트로 텍스트 숨김 — 'Pick/Only Here/오직 이곳에서' 헤더와 중복 (되살리려면 이 줄 제거) */
.main_top_wrap{ display:block !important; }  /* 레거시 flex 해제 — '오직 이곳에서' 섹션을 다른 섹션과 동일 폭/정렬로 */
.main_top_wrap .main_top_text{ display:none !important; }
.main_top_wrap .idx_c{ width:auto !important; }
/* (4) 하단 탭 섹션 숨김 — 시안처럼 신상품에서 끝 (위 선형 섹션과 상품 중복, 되살리려면 이 줄 제거) */
#idx_tab{ display:none !important; }