/* BASIC css start */
/* ================================================================
   스위티스푼 | PC 상품분류 CSS (모바일 상품분류 디자인 기준, 데스크톱 배율)
   · 히어로(category_title_html - PC 전용 리치 HTML 필드) + 서브카테고리(왼쪽 브레드크럼/중앙 탭/오른쪽 정렬·필터,
     스티키) + product_list@ + 더보기 AJAX(메이크샵 공식 PC 더보기 가이드 패턴) + 카테고리배너 + 방문예약/카카오상담
   · #ss-pc- 접두사로 스코프(다른 페이지 클래스와 충돌 방지)
================================================================ */

#ss-pc-category { padding: 0 0 80px; }
#ss-pc-category * { box-sizing: border-box; }

/* ============================================================
   SECTION 1   히어로 (category_title_html 필드가 렌더되는 영역, PC 전용)
   · 필드 안 마크업은 모바일과 동일한 클래스(cate-hero-visual/overlay/eyebrow/tagline/content/desc/toggle) -
     관리자가 모바일과 같은 컨벤션으로 입력함. .ss-pc-cate-hero 스코프 아래 데스크톱 배율로 재정의.
   · .ss-hero 래퍼 → 공통 header.js가 투명헤더 활성화
   ============================================================ */
/* #contentWrapper가 1680px 고정폭이라 안에서는 width:100%여도 1680px까지만 차므로,
   음수 마진으로 컨테이너 밖까지 뷰포트 전체 폭으로 풀블리드 확장.
   [2026-08] 이전엔 순수 100vw를 썼는데, 100vw는 스크롤바 폭까지 포함해서 실제 보이는
   뷰포트보다 넓어져 가로 스크롤이 생기는 CSS의 알려진 특성이 있었음. body에
   overflow-x:hidden으로 막았더니 그 여분(스크롤바 폭)만 잘리는 게 아니라, 서브카테고리
   바처럼 폭이 넘칠 수 있는 다른 요소(정렬·필터 버튼)까지 통째로 화면 밖으로 밀려서
   스크롤도 못 하고 안 보이게 되는 사고가 있었음 - 그래서 overflow-x:hidden으로 덮는 대신
   js.txt가 스크롤바 실측폭을 --ss-pc-sbw로 넘겨주고 여기서 정확히 빼서 애초에
   넘치지 않게 함(원인 자체를 없앰, 다른 콘텐츠를 가릴 위험이 없음) */
.ss-pc-cate-hero {
  width: calc(100vw - var(--ss-pc-sbw, 0px));
  margin-left: calc(50% - 50vw + (var(--ss-pc-sbw, 0px) / 2));
  margin-right: calc(50% - 50vw + (var(--ss-pc-sbw, 0px) / 2));
  background: #fff; overflow: hidden;
}

.ss-pc-cate-hero .cate-hero-visual {
  position: relative; width: 100%;
  height: 56vh; min-height: 650px; max-height: 820px;
  overflow: hidden; background: #000;
}
.ss-pc-cate-hero .cate-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-pc-cate-hero .cate-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: center;
  padding: 50px 40px 70px;
  background: linear-gradient(to top, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0) 70%);
}
.ss-pc-cate-hero .cate-hero-overlay h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px; font-weight: 600; color: #fff;
  letter-spacing: 0.35rem; line-height: 1.05; margin: 0;
}
.ss-pc-cate-hero .cate-hero-tagline {
  font-size: 13px; color: #fff; opacity: .95;
  font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; padding-top: 6px;
}
.ss-pc-cate-hero .cate-hero-eyebrow { font-size: 25px; letter-spacing: -0.02rem; color: #222; margin-bottom: 30px; font-family: "Noto Serif KR", serif !important; font-weight: 600; }

.ss-pc-cate-hero .cate-hero-content { max-width: 1680px; margin: 0 auto; padding: 50px 0px 100px; text-align: center; }
.ss-pc-cate-hero .cate-hero-desc {
  font-size: 16px; line-height: 1.7; color: #3d3d3d; word-break: keep-all;
  font-family: 'Lato', 'Noto Sans KR', sans-serif;
  overflow: hidden; transition: max-height .4s ease;
}
.ss-pc-cate-hero .cate-hero-desc.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* [2026-08] 요청: 호버 시 흐려지지 말고 밑줄만 오른쪽→왼쪽으로 사라지게(하단 카카오톡
   버튼과 동일 기법) - 진짜 border 대신 ::after 밑줄을 scaleX(1)→scaleX(0)로 축소시키되
   transform-origin을 left로 둬서, 줄어드는 쪽(사라지는 방향)이 오른쪽 끝이 되게 함 */
.ss-pc-cate-hero .cate-hero-toggle {
  position: relative; margin-top: 25px; border: none; background: none; padding: 0 0 4px;
  font-size: 13px; font-weight: 500; color: #222; cursor: pointer;
  letter-spacing: -0.02em; font-family: 'Lato', 'Noto Sans KR', sans-serif;
}
.ss-pc-cate-hero .cate-hero-toggle::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: #111; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease;
}
.ss-pc-cate-hero .cate-hero-toggle:hover::after { transform: scaleX(0); }

/* ============================================================
   SECTION 2   서브카테고리 (왼쪽 브레드크럼 / 중앙 카테고리탭 / 오른쪽 정렬·필터)
   · 스크롤 시 헤더 아래 스티키 - 전역 overflow(html,body)로 네이티브 sticky가 안 먹혀
     fixed + JS 클래스토글로 구현(pc/상품상세 sticky 패널과 동일 원칙)
   ============================================================ */
/* nav 자체는 배경만 담당하는 풀폭 바 - 고정(sticky) 시 이 바만 뷰포트 전체(0~100%)로 늘어나고,
   실제 콘텐츠(브레드크럼/탭/필터)는 안쪽 -inner 래퍼가 항상 1680px로 중앙정렬 유지.
   (이전엔 nav 자체가 flex 컨테이너+max-width였어서, 고정 시 max-width를 풀면
   콘텐츠가 뷰포트 전체로 재배치돼 브레드크럼이 페이지의 나머지 1680px 정렬과 어긋나 보이던 버그) */
#ss-pc-category .ss-pc-cate-subcate { background: #fff; }
#ss-pc-category .ss-pc-cate-subcate.is-fixed {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 90; /* 상품/찜(z-index 2) 위, 헤더 아래 */
  background: #fff;
}
#ss-pc-category .ss-pc-cate-subcate-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1680px; margin: 0 auto; padding: 5px 0px;
}
.ss-pc-cate-subcate-holder { display: none; }
.ss-pc-cate-subcate-holder.is-active { display: block; }

/* 왼쪽: 브레드크럼(대분류 ▶ 중분류 ▶ 현재분류 개수) - JS가 #ss-pc-cate-bc-data로 채움.
   탭 행(padding:22px 4px)과 같은 수직 리듬을 맞추고 line-height:1로 통일해 아이콘·텍스트가
   한 줄에 가지런히 맞도록 정렬(요청: "왼쪽 전체메뉴 열이 맞지 않음") */
/* flex:0 1 auto + min-width:0 + ellipsis - 대분류/중분류명이 길어져도 이 블록이
   오른쪽 정렬·필터 버튼을 밀어내지 못하게 하는 안전장치(카테고리명 길이와 무관하게
   필터가 항상 보이도록) */
/* [2026-08] 요청: 배치를 [탭(왼쪽)] ... [정렬기준][브레드크럼](오른쪽)으로 변경 -
   브레드크럼이 이제 .ss-pc-cate-right(필터와 함께, flex:0 0 auto) 안에 있어서 부모가
   내용 크기만큼만 차지함 - % 기반 max-width는 그런 부모 기준으로는 애매해질 수 있어
   고정 px로 안전장치 유지(카테고리명이 아주 길어져도 줄바꿈 없이 말줄임) */
#ss-pc-category .ss-pc-cate-crumb {
  display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 320px;
  padding: 22px 0; line-height: 1.4; overflow: hidden;
  font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; font-size: 14px;
  letter-spacing: 0.04em; white-space: nowrap; color: #222;
}
#ss-pc-category .ss-pc-cate-crumb-current { overflow: hidden; text-overflow: ellipsis; }
/* 공통 CSS의 전역 리셋(body,h1..,a,p 등에 font-family/line-height를 강제 지정)이
   상속보다 우선해서 <a>만 다른 폰트/줄높이를 받아 아이콘·텍스트와 세로 위치가 어긋났음
   (요청: "왼쪽 카테고리 네비에서... 열이 맞지 않아") - 부모에서 상속받게 두지 말고
   font-family/line-height를 여기서도 명시적으로 다시 지정해서 전역 리셋을 이김 */
#ss-pc-category .ss-pc-cate-crumb a {
  display: inline-flex; align-items: center; color: #222; text-decoration: none; text-transform: uppercase;
  font-family: inherit; font-size: inherit; line-height: 1.4; transition: color .2s ease;
}
#ss-pc-category .ss-pc-cate-crumb a:hover { color: #666; }
#ss-pc-category .ss-pc-cate-crumb .material-symbols-outlined.ss-pc-cate-crumb-sep { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; color: #222; }
/* [2026-08] line-height:1은 한글 글자(특히 초성 위쪽 획)가 그 줄높이를 살짝 넘어 그려지는
   폰트라, .crumb-current의 overflow:hidden(말줄임용)에 위쪽이 잘려 보이던 버그
   (요청: "왼쪽 네비에서 한글은 윗부분이 짤려서 나오고 있어") - 1.4로 여유를 줌 */
/* [2026-08] em(수량)만 폰트가 Lato라 자간·글자모양이 달라서, 박스 높이는 서로 완전히
   같은데도(19.6px로 동일) 두 폰트의 실제 글자 기준선 위치가 서로 달라 세로로 어긋나
   보였음(요청: "em 수량만 열 높이가 달라") - align-items:center(박스 중앙 기준) 대신
   baseline(실제 글자 기준선 기준)으로 바꿔서 폰트가 달라도 텍스트 자체가 한 줄에 맞게 함 */
#ss-pc-category .ss-pc-cate-crumb-current { display: inline-flex; align-items: baseline; color: #222; font-weight: 500; font-family: inherit; font-size: inherit; line-height: 1.4; }
#ss-pc-category .ss-pc-cate-crumb-current em { 
    font-family: 'Lato', 'Noto Sans KR', sans-serif;
    line-height: 1.4;
    margin-left: 5px;
    font-style: normal;
    color: #a88b68;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.05rem
}

/* 왼쪽: 카테고리 탭 - flex:1로 남는 공간을 채우되 내부 정렬은 왼쪽부터(요청: 탭을 왼쪽으로,
   정렬기준+브레드크럼을 오른쪽으로 재배치). min-width:0 필수 - 기본값 auto면 flex 아이템이
   내용 길이만큼 최소폭을 고집해서 overflow-x:auto가 못 먹고 오른쪽 그룹이 화면 밖으로
   밀려나던 버그(요청 6번 원인)와 동일한 이유로 여전히 필요 */
#ss-pc-category .ss-pc-cate-subcate-list {
  display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  justify-content: flex-start; gap: 30px;
  margin: 0; padding: 0; list-style: none;
  scrollbar-width: none;
}
#ss-pc-category .ss-pc-cate-subcate-list::-webkit-scrollbar { display: none; }
#ss-pc-category .ss-pc-cate-subcate-list li { position: relative; flex: 0 0 auto; display: flex; }
/* [2026-08] align-items를 center→baseline으로 변경 - "웨딩밴드 전체보기"처럼 안의
   .ss-pc-cate-all-name(Josefin Sans 우선 선언)과 나머지 텍스트(Lato 우선 선언)가
   한글에서는 둘 다 결국 Noto Sans KR로 폴백되더라도, 서로 다른 font-family 스택을
   선언한 것만으로 줄 높이 계산이 미묘하게 달라져 세로로 어긋나 보였음(브레드크럼 em
   수량 때와 동일 원인) - baseline은 실제 글자 기준선 기준이라 이 차이에 영향받지 않음 */
#ss-pc-category .ss-pc-cate-subcate-list a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0px 5px 5px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 14px; color: #222;
  text-decoration: none; letter-spacing: 0.02rem; white-space: nowrap;
  transition: color .2s ease;
}
#ss-pc-category .ss-pc-cate-subcate-list a:hover { color: #222; }
#ss-pc-category .ss-pc-cate-subcate-list a.is-active { color: #222; font-weight: 500; border-bottom-color: #222; }

/* "[상위카테고리] 전체보기" 탭 - 상위카테고리명은 영문(WEDDING 등)일 때가 많아
   Josefin Sans 우선(한글 분류명이 와도 Noto Sans KR로 자연 폴백) */
#ss-pc-category .ss-pc-cate-all-name { font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; }

/* 오른쪽: [정렬기준] [브레드크럼] 그룹 - flex:0 0 auto라 내용 크기 그대로 유지되고
   왼쪽 탭 목록(flex:1)이 대신 줄어들며 스크롤을 받아서, 필터가 화면 밖으로 밀릴 일이 없음 */
#ss-pc-category .ss-pc-cate-right { display: flex; align-items: center; gap: 32px; flex: 0 0 auto; }

/* 정렬 및 필터 트리거 + 드롭다운 패널 (기존 list_array의 정렬 링크를 여기로 이전) */
#ss-pc-category .ss-pc-cate-filter { position: relative; flex: 0 0 auto; }
#ss-pc-category .ss-pc-cate-filter-trigger {
  display: flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 22px 0; cursor: pointer;
  font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; color: #222;
  letter-spacing: -0.01em; white-space: nowrap; transition: color .2s ease;
}
/* 진짜 원인이었음: 공통 CSS-JS(pc/공통CSS-JS.txt)의 레거시 리셋 `button span{visibility:hidden}` -
   구식 이미지 대체 버튼(스크린리더용 숨김 텍스트) 패턴을 위한 사이트 전역 규칙인데,
   이 버튼은 아이콘+텍스트를 실제로 보여줘야 해서 그 규칙에 걸려 내용이 전부 안 보이고
   있었음(버튼 자체 크기/위치는 정상이라 계속 못 잡았던 원인). 공통 파일은 다른 버튼에
   영향 줄 수 있어 안 건드리고, 여기서만 다시 보이게 명시적으로 되돌림 */
#ss-pc-category .ss-pc-cate-filter-trigger span { visibility: visible; }
#ss-pc-category .ss-pc-cate-filter-trigger .material-symbols-outlined {
  font-size: 18px;
  /* [2026-08] 요청: 호버 시 화살표가 6시(아래) → 12시(위)로 회전 - 아코디언(guide_arrow)의
     동일한 회전 기법(transform:rotate(180deg), 같은 easing)을 그대로 재사용 */
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
#ss-pc-category .ss-pc-cate-filter-trigger:hover .material-symbols-outlined,
#ss-pc-category .ss-pc-cate-filter.is-open .ss-pc-cate-filter-trigger .material-symbols-outlined { transform: rotate(180deg); }
#ss-pc-category .ss-pc-cate-filter-trigger:hover,
#ss-pc-category .ss-pc-cate-filter.is-open .ss-pc-cate-filter-trigger { color: #222; }
#ss-pc-category .ss-pc-cate-filter-panel {
  position: absolute; top: 100%; right: 0; z-index: 91;
  min-width: 160px; background: #fff; border: 1px solid #eee; box-shadow: 0 10px 24px rgba(0,0,0,.07);
  padding: 8px 0;
}
#ss-pc-category .ss-pc-cate-sort { margin: 0; padding: 0; list-style: none; }
#ss-pc-category .ss-pc-cate-sort li { display: block; }
#ss-pc-category .ss-pc-cate-sort a {
  display: block; padding: 10px 20px;
  font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; color: #666;
  text-decoration: none; white-space: nowrap; transition: color .2s ease, background-color .2s ease;
}
#ss-pc-category .ss-pc-cate-sort a:hover { background: #faf9f7; color: #222; }
#ss-pc-category .ss-pc-cate-sort a.is-active { color: #222; font-weight: 500; }

/* ============================================================
   SECTION 3   상품 목록 (정렬은 위 서브카테고리바 "정렬 및 필터"로 이전, 뷰타입 토글은 PC에서
   의미 없어 제거 - 항상 4열). gap은 pc/상품검색과 동일(85px 10px)
   ============================================================ */
#ss-pc-category .ss-pc-cate-grid { max-width: 1680px; margin: 0 auto; padding-top: 30px; }
#ss-pc-category .ss-pc-cate-grid ul {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 85px 10px;
  margin: 0; padding: 0; list-style: none;
}
#ss-pc-category .ss-pc-cate-grid li { position: relative; }
/* "더보기" 클릭 시 메이크샵이 같은 ul에 li를 추가하는 게 아니라 #MS_product 안에
   .ss-pc-cate-grid(자체 ul) 블록을 통째로 형제로 추가함(pc/상품검색에서 확인된 동작)  
   grid gap은 각 ul 내부에만 적용돼서 블록 사이에 여백이 안 생기는 버그를 처음부터 방지 */
#ss-pc-category .ss-pc-cate-grid + .ss-pc-cate-grid { margin-top: 85px; }
#ss-pc-category .ss-pc-prd-info-link { display: block; text-decoration: none; }

/* 찜하기 = 관심상품 토글(my-wish-list). 이미지 우상단, 하트만(배경 없음) */
#ss-pc-category .ss-pc-listWish { position: absolute; top: 18px; right: 18px; margin: 0; z-index: 2; }
#ss-pc-category .ss-pc-listWish .my-wish-list {
  display: flex !important; align-items: center; justify-content: center;
  width: 36px; height: 36px; cursor: pointer; color: #222; box-sizing: border-box; pointer-events: auto;
}
#ss-pc-category .ss-pc-listWish .material-symbols-outlined { font-size: 20px; line-height: 1; color: #222; }
#ss-pc-category .ss-pc-listWish .ss-pc-heart-fill { color: #222; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
#ss-pc-category .ss-pc-listWish .ss-pc-heart-line { color: #222; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }

/* 상품 썸네일 (이미지 + 호버 미리보기) */
#ss-pc-category .ss-pc-prd-thumb { position: relative; }
#ss-pc-category .ss-pc-prd-img-wrap { display: block; background-color: rgba(0, 0, 0, .02); text-align: center; margin: 0; padding: 15% 0; overflow: hidden; }
/* [2026-09] 진열상품 롤오버 도입 후, 메이크샵 롤오버 스크립트가 <img> class를 조작하면서 이
   class-의존 선택자가 안 먹혀 상품사진 흰 배경과 컨테이너의 옅은 회색(rgba(0,0,0,.02)) 배경 사이
   이질감이 생기는 문제 발견(pc/메인 THE FIRST GLEAM과 비교해서 원인 특정 - 메인은 class-불문
   `.prd_grey_tab img`라 이 문제가 없었음). class 대신 컨테이너 안의 img로 잡아 메이크샵이 class를
   어떻게 바꾸든 안전하게 함. */
#ss-pc-category .ss-pc-prd-img-wrap img { max-width: 300px; height: auto; mix-blend-mode: multiply; transition: transform 0.5s ease; }
#ss-pc-category .ss-pc-prd-img-wrap:hover img { transform: scale(1.06); }

#ss-pc-category .ss-pc-icon-list {
  position: absolute; left: 0; bottom: 0; width: 100%; text-align: center;
  opacity: 0; transition: .3s ease-in-out; z-index: 3;
}
#ss-pc-category .ss-pc-cate-grid li:hover .ss-pc-icon-list { bottom: 20px; opacity: 1; }
#ss-pc-category .ss-pc-btn-zoom {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; margin: 0 auto; box-sizing: border-box;
}
#ss-pc-category .ss-pc-zoom-icon { font-size: 18px; line-height: 1; color: #222; }

/* 상품 정보 텍스트 */
#ss-pc-category .ss-pc-prd-info { display: block; text-align: left; }
#ss-pc-category .ss-pc-prd-name {
  font-family: 'Lato', 'Noto Sans KR', sans-serif; color: #1b1b1b; font-size: 14px; font-weight: 400;
  line-height: 1.25; letter-spacing: normal; text-align: left; margin: 20px 0 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
#ss-pc-category .ss-pc-prd-subname { font-family: 'Lato', 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 12px; color: #1b1b1b; font-style: italic; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
#ss-pc-category .ss-pc-prd-soldout, #ss-pc-category .ss-pc-prd-replace { margin: 10px 0 0; font-size: 13px; color: #999; text-align: left; }
#ss-pc-category .ss-pc-prd-price-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; text-align: left; }
#ss-pc-category .ss-pc-prd-price-sale { margin: 0; font-weight: 700; font-size: 15px; color: #000; white-space: nowrap; }
#ss-pc-category .ss-pc-prd-price-origin { margin: 0; color: #5f5e5e; font-size: 12px; font-family: 'PT Sans', sans-serif; white-space: nowrap; }
#ss-pc-category .ss-pc-prd-price-origin del { color: #5f5e5e; }
#ss-pc-category .ss-pc-prd-discount-rate { margin: 0 0 0 auto; font-family: 'Lato', 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; color: #fa5500; font-size: 13px; white-space: nowrap; }
#ss-pc-category .ss-pc-prd-price-bold { text-align: left; margin: 10px 0 0; font-weight: 700; font-size: 15px; color: #000; }
#ss-pc-category .ss-pc-review-height { min-height: 20px; margin-top: 5px; }
#ss-pc-category .ss-pc-prd-review { font-size: 11px; font-family: 'Lato', 'Noto Sans KR', sans-serif; text-align: left; color: #1c1c1c; }
#ss-pc-category .ss-pc-prd-review-count { padding-left: 5px; color: #999; }

/* 결과 없음 */
#ss-pc-category .ss-pc-cate-empty { padding: 220px 0; text-align: center; color: #999; }

/* 하단 카운터 */
#ss-pc-category .ss-pc-cate-count {
  text-align: center; font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 14px;
  color: #222; padding: 150px 0 20px; letter-spacing: 0.1em;
}
#ss-pc-category .ss-pc-cate-count .ss-pc-cc-total, #ss-pc-category .ss-pc-cate-count .ss-pc-cc-shown { color: #3b3b3b; font-weight: 400; padding: 0 2px; }

/* 더보기 - scaleY 스윕 호버 (pc/상품검색과 동일 기법) */
#ss-pc-category .ss-pc-cate-more { padding: 15px 0 0; max-width: 300px; margin: 0 auto; }
#ss-pc-category .ss-pc-cate-btn-more {
  display: block; width: 100%; height: 52px; line-height: 52px; text-align: center;
  border: 1px solid #3d3d3d; font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
  font-size: 13px; color: #222; text-decoration: none; letter-spacing: 0.2rem;
  background-color: #222;
  position: relative; overflow: hidden; z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease;
}
#ss-pc-category .ss-pc-cate-btn-more::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff; z-index: -1; transform: scaleY(1); transform-origin: top;
  transition: transform 0.4s ease;
}
#ss-pc-category .ss-pc-cate-btn-more:hover { color: #fff; border-color: #222; }
#ss-pc-category .ss-pc-cate-btn-more:hover::before { transform: scaleY(0); }

/* 접근성 숨김(SEO용 h1 등) */
.ss-pc-cate-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   [카테고리별] 중앙 배너 (10번째 상품 뒤 삽입, 1680px 풀블리드 스케일)
   ============================================================ */
#ss-pc-category .prd-cate-row {
  grid-column: 1 / -1 !important;
  margin: 10px 0 30px; list-style: none;
}
.prd-cate-band {
  position: relative; width: 100%;
  height: 46vh; min-height: 420px; max-height: 620px;
  overflow: hidden; background: #000;
}
.prd-cate-row.is-image .prd-cate-band { height: auto; aspect-ratio: 1680 / 700; min-height: 0; max-height: none; }
.prd-cate-media, .prd-cate-media video, .prd-cate-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.prd-cate-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 30px; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.15));
}
.prd-cate-overlay .cate-tx { display: none; margin: 0; white-space: pre-line; }
.prd-cate-overlay .t1 { font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 13px; margin-bottom: 12px; }
.prd-cate-overlay .t2 { font-family: "Noto Serif KR", serif !important; letter-spacing: -0.02rem; font-size: 28px; font-weight: 600; line-height: 1.5em; opacity: 0.9; }
.prd-cate-overlay .t3 { font-family: Arial, sans-serif; font-size: 15px; letter-spacing: -0.01rem; line-height: 1.4; opacity: 0.9; margin-top: 14px; word-break: keep-all; font-weight: 500; }

/* ▼ 카테고리별 문구 + 위치 (모바일과 동일 - 여기만 편집) ▼ */
.prd-cate-row[data-cate="웨딩밴드"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="웨딩밴드"] .t2 { display: block; }
.prd-cate-row[data-cate="웨딩밴드"] .t2::before { content: '기억을 담는 오브제'; }
.prd-cate-row[data-cate="웨딩밴드"] .t3 { display: block; }
.prd-cate-row[data-cate="웨딩밴드"] .t3::before { content: '특별한 순간을,\A당신만의 상징적인 형태로 간직하세요'; }

.prd-cate-row[data-cate="기념일"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="기념일"] .t2 { display: block; }
.prd-cate-row[data-cate="기념일"] .t2::before { content: '기억을 담는 오브제'; }
.prd-cate-row[data-cate="기념일"] .t3 { display: block; }
.prd-cate-row[data-cate="기념일"] .t3::before { content: '특별한 순간을,\A당신만의 상징적인 형태로 간직하세요'; }

.prd-cate-row[data-cate="밀그레인"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="밀그레인"] .t2 { display: block; }
.prd-cate-row[data-cate="밀그레인"] .t2::before { content: '시간을 담은 디테일'; }
.prd-cate-row[data-cate="밀그레인"] .t3 { display: block; }
.prd-cate-row[data-cate="밀그레인"] .t3::before { content: '섬세한 밀그레인 장식이\A절제된 클래식의 아름다움을 완성합니다.'; }

.prd-cate-row[data-cate="네추럴"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="네추럴"] .t2 { display: block; }
.prd-cate-row[data-cate="네추럴"] .t2::before { content: '즐거움과 익숙함'; }
.prd-cate-row[data-cate="네추럴"] .t3 { display: block; }
.prd-cate-row[data-cate="네추럴"] .t3::before { content: '손끝에 닿는 섬세한 질감과 잔잔한 촉감이\A시간의 흐름 속에서 더욱 깊은 울림을 만들어갑니다.'; }

.prd-cate-row[data-cate="에센셜"] .prd-cate-overlay { justify-content: flex-end; }
.prd-cate-row[data-cate="에센셜"] .t2 { display: block; }
.prd-cate-row[data-cate="에센셜"] .t2::before { content: '본질을 담은 디자인'; }
.prd-cate-row[data-cate="에센셜"] .t3 { display: block; }
.prd-cate-row[data-cate="에센셜"] .t3::before { content: '절제된 라인과 섬세한 디테일이 어우러져\A일상 속에서 오래도록 함께할 아름다움을 완성합니다.'; }

/* ============================================================
   하단 상담 섹션(방문예약/카카오) - 요청으로 pc/메인과 완전히 동일한 마크업/클래스/수치로 통일
   (what_title_warp/private-btn-wrap/boutique-private-btn 등, 카피 문구만 이 페이지 것 유지)
   ============================================================ */
#ss-pc-category .what_title_warp { max-width: 1680px; margin: 0 auto; box-sizing: border-box; }
/* [2026-08] border-top을 .what_title에 직접 주면 .what_title_warp의 max-width(1680px)에
   갇혀서 콘텐츠 폭까지만 그어짐(요청: "가로 100%로 변경 가능해?") - 진짜 뷰포트 전체 폭으로
   그으려면 히어로와 같은 100vw 풀블리드 기법이 필요해서, 선을 ::before로 분리하고
   히어로에서 이미 계산해둔 스크롤바 보정 변수(--ss-pc-sbw)를 그대로 재사용 */
#ss-pc-category .what_title { position: relative; font-family: 'Noto Serif KR', serif !important; font-size: 2.2rem; text-align: center; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; padding: 160px 0px 0px 0px; margin-top: 100px; }
#ss-pc-category .what_title::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: calc(100vw - var(--ss-pc-sbw, 0px));
  margin-left: calc((-100vw + var(--ss-pc-sbw, 0px)) / 2);
  height: 1px; background: #c7c7c7;
}
#ss-pc-category .what_detail { font-size: 1rem; text-align: center; line-height: 1.8rem; letter-spacing: initial; padding: 30px 0px 30px 0px; }
#ss-pc-category .private-btn-wrap.center-align {
  display: flex; justify-content: center; align-items: center; width: 100%; margin: 10px 0 0 0;
}
#ss-pc-category .boutique-private-btn {
  min-width: 200px; text-align: center; padding: 1.2em; display: inline-block; font-size: 0.9rem;
  border: 1px solid #ffffff; position: relative; overflow: hidden; background-color: #111111; color: #ffffff;
  z-index: 1; transition: color 0.4s ease, border-color 0.4s ease; cursor: pointer; text-decoration: none;
}
#ss-pc-category .boutique-private-btn::before {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
  background-color: #ffffff; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s ease;
}
#ss-pc-category .boutique-private-btn:hover { color: #111111; border-color: #111111; }
#ss-pc-category .boutique-private-btn:hover::before { transform: scaleY(1); }
#ss-pc-category .kakao_info { letter-spacing: 0.1em; font-size: 0.9rem; text-align: center; line-height: 1.8rem; padding: 0px 0px 20px 0px; margin: 100px 0px 0px 0px; }
#ss-pc-category .kakao_btn_wrap { text-align: center; }
#ss-pc-category .kakao-link { display: inline-block; text-decoration: none; }
#ss-pc-category .kakao_btn { position: relative; display: inline-block; text-align: center; padding-bottom: 4px; color: #111; letter-spacing: 0.02em; font-size: 0.9rem; }
#ss-pc-category .kakao_btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: #c7a97b; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease;
}
#ss-pc-category .kakao-link:hover .kakao_btn::after { transform: scaleX(0); }

/* 반응형: 공통헤더 축소 지점(1599px)과 동일하게 맞춰 3열로 축소 */
@media screen and (max-width: 1599px) {
  #ss-pc-category .ss-pc-cate-grid ul { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   우측 고정 버튼(.right_fixed) 노출 구간 (상품분류 전용, js.txt가 클래스 토글)
   · 기본 숨김 → 상품리스트 구간에서만 .is-zone-shown 으로 노출
   · 이 CSS는 상품분류 페이지에서만 로드되므로 다른 페이지의 버튼엔 영향 없음
   ============================================================ */
.right_fixed { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.right_fixed.is-zone-shown { opacity: 1; pointer-events: auto; }

/* BASIC css end */