/* BASIC css start */
/* ============================================================
   스위티스푼 | 멜리비치   모바일 헤더 CSS
   브랜드 컬러: #c2935f (골드), #3b3b3b (다크), #f8f7f3 (크림)
   영문 폰트: 'Josefin Sans', sans-serif
   클래스 접두사: ss-
   수정일: 2026-06
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400..600;1,400..600&family=Lato:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Serif+KR:wght@400;500;600&display=swap');

/* ── 기본 ── */
/* 오프캔버스 네비 패널이 화면 오른쪽 밖(translateX(100%))에 있어서 생기는
   가로 스크롤/좌우 흔들림 차단. 루트(html)의 overflow-x는 뷰포트로 전파되어
   position:fixed 패널까지 가로로 클립함(메뉴 열려 body가 fixed일 때도 유효).
   &혹 overflow-y:auto를 명시해도 안 됐던 걸 보면, 루트에 overscroll-behavior까지
   같이 건 게 크롬 마우스 휠 스크롤을 막는 원인으로 의심됨 → 제거하고 테스트.
   가로 흔들림 방지는 overflow-x: hidden 만으로 충분한 것으로 판단(overscroll-behavior는
   경계에서의 바운스만 제어하는 속성이라 흔들림 자체의 원인은 아니었을 가능성이 큼) */
html, body { overflow-x: hidden; overflow-y: auto; }
body { font-family: Helvetica, Arial, sans-serif; }
input { outline: 0; }
::selection { background: #a99d8c; color: #fff; }

/* 고정 헤더 높이만큼 본문 밀어내기 */
body { padding-top: 60px; }
/* 히어로 페이지: 패딩 제거 → 히어로가 투명 헤더 뒤로 (JS가 body에 .ss-hero-page 부여) */
body.ss-hero-page { padding-top: 0; }


/* ============================================================
   상단 고정 헤더 바
   레이아웃: [로고 240px (좌측)] ────── [돋보기][장바구니][햄버거] (우측)
   ============================================================ */
#ss-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 100000; /* 페이지별 하단 고정바(.shop-fixed-bottom-bar z-index:99999)보다 항상 위 */
  background: #fff;
  border-bottom: 1px solid #f0ede8;
  /* 스크롤 hide/show + 투명↔흰배경 트랜지션 */
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
#ss-header.is-hidden {
  transform: translateY(-100%);
}

/* ── 투명 헤더 (히어로 페이지: 맨 위 = 이미지 위에 배경없이 흰 로고/아이콘) ──
   JS가 스크롤 위치에 따라 .is-transparent 토글 (맨 위일 때만 부여) */
#ss-header.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
}
#ss-header.is-transparent .ss-search-icon-header,
#ss-header.is-transparent .ss-cart-icon-header,
#ss-header.is-transparent .ss-hamburger-icon { color: #fff !important; }
#ss-header.is-transparent .ss-header-cart-count { background: #fff; color: #222; }
/* 로고 스왑: 기본 = 진한 로고 / 투명 = 흰 로고 */
#ss-header-logo .ss-logo-white { display: none; }
#ss-header.is-transparent .ss-logo-dark { display: none; }
#ss-header.is-transparent .ss-logo-white { display: block; }

#ss-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 10px;
}

/* 로고 좌측 배치 정렬 */
#ss-header-logo { 
  display: block; 
  flex-shrink: 0; 
}
#ss-header-logo img { 
  width: 240px; 
  height: auto; 
  display: block; 
}
#ss-header-logo span {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px;
  color: #3b3b3b;
  letter-spacing: 0.05em;
}

/* 우측 아이콘 그룹 (돋보기 + 장바구니 + 햄버거 정렬 구조) */
#ss-header-actions {
  display: flex;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
}

/* 우측 액션 버튼 인터페이스 공통 속성 정의 (중복 코드 제거) */
#ss-search-toggle, 
#ss-header-cart, 
#ss-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  text-decoration: none;
  position: relative;
}

/* 1. 검색버튼 (돋보기와 장바구니 사이 간격) */
#ss-search-toggle {
  margin-right: 2px;
}

/* 2. 장바구니버튼 (장바구니와 전체메뉴 사이 간격) */
#ss-header-cart {
  margin-right: 7px;
}

/* 3. 전체메뉴버튼 (햄버거 우측 끝 여백) */
#ss-hamburger {
  margin-right: 0px;
}

/* 검색 돋보기 아이콘 디자인 속성 유지 */
.ss-search-icon-header { font-size: 24px !important; color: #a88b68; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important; }

/* 장바구니 아이콘 디자인 속성 유지 */
.ss-cart-icon-header { font-size: 24px !important; color: #a88b68; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important; }

/* 햄버거 버튼 30px 고정 디자인 속성 유지 */
.ss-hamburger-icon { font-size: 26px !important; color: #a88b68; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 26 !important; }

/* 헤더 장바구니 카운트 수량 뱃지 매칭 */
.ss-header-cart-count, .ss-cart-count {
  position: absolute;
  top: 0px;
  right: 0px;
  background: #c2b8a6;
  color: #fff;
  font-size: 9px;  
  min-width: 14px;
  height: 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}


/* ============================================================
   문의하기 아코디언 커스텀 전용 스타일 영역
   ============================================================ */
.contactus_wrap {  
  margin-top: 20px;
  background: #fff;              /* 전체 흰색 배경 */
  padding: 0;                    /* 좌우 여백은 부모 .ss-bottom-menu 가 담당 */
}

/* 서비스 상단 트리거 버튼 (다른 하단 메뉴 행과 높이 46px 통일) */
.ss-contact-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  background: #fff;              /* 전체 흰색 배경 */
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 아코디언 전용 화살표 연출 제어 */
.ss-arrow-toggle {
  font-size: 18px !important;
  color: #756e60 !important;
  transition: transform 0.25s ease;
}
.ss-contact-trigger-btn.is-active .ss-arrow-toggle {
  transform: rotate(180deg);
}

/* 아코디언 전용 서브 패널 기본 숨김 가이드 */
.ss-contact-accordion-panel {
  display: none;  
  overflow: hidden;
  
}

.ss-contact-accordion-list {
  list-style: none;
  margin: 0;
  padding: 5px 0;
}
.ss-contact-accordion-list li a {
  display: block;
  padding: 10px 0px 10px 5px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #3b3b3b;
  text-decoration: none;  
}
.ss-contact-accordion-list li:last-child a {
  border-bottom: none;
}


/* 상세페이지 디테일 메뉴   헤더 숨김 시 최상단 고정 */
.detail_menu_warp {
  top: 60px !important;
  transition: top 0.3s ease;
}

.depth_menu {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  flex: 1;
}

.ss-account-login-icon {     
    font-size: 20px !important;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20 !important;
}

.ss-logout-icon {
    padding-left: 8px;
    font-size: 15px !important;
    color: #756260 !important;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 15 !important;
}


/* 리스트이미지배경 */
.prd_grey { background-color: rgba(0, 0, 0, .02); }
.prd_grey img { mix-blend-mode: multiply; max-width: 90%; height: auto; }

/* [최종 확정] 아이폰 수직 정렬 및 배경색 완벽 통일 */
.prd_grey_top  { 
  background-color: rgba(0, 0, 0, .02) !important; /* 배경색 강제 일치 */
  padding: 0; 
  display: flex !important;          
  align-items: center !important;   
  justify-content: center !important; 
}
.prd_grey_top img { 
  mix-blend-mode: multiply !important; /* 이미지 내 베이지색 레이어 강제 투과 */
  height: auto; 
  max-width: 400px; 
  margin: 0 auto; 
  display: block !important;         
}


/* ============================================================
   머티리얼 심볼
   ============================================================ */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 30;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}


/* ============================================================
   검색 오버레이 (전체 화면 마스크 + 중앙 검색 인풋)
   ============================================================ */
#ss-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100085;   /* 전체메뉴 패널(100080)보다 위 → 메뉴 열린 채로 그 위에 겹침 */
}
#ss-search-overlay.is-open { display: block; }

/* 팝업 = 전체 화면 컨테이너 (인풋을 화면 중앙에 배치) */
#ss-search-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100090;   /* 오버레이(100085)·전체메뉴 패널(100080)보다 위 */
  align-items: center;
  justify-content: center;
}
#ss-search-popup.is-open { display: flex; }

/* 중앙 검색 인풋 래퍼 (전체 폭의 92% 사용, X 버튼 옆에 두고 입력창이 남는 폭을 꽉 채움) */
.ss-search-popup-inner {
  width: 92%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* 검색 폼 = 남는 폭 전부 흡수(입력창 최대폭). max-width 상한 제거 → 실제로 넓어짐 */
.ss-search-popup-inner form { flex: 1 1 auto; min-width: 0; }
/* 입력창 옆 닫기(X) 버튼   검색필드 underline 여백(12px)과 동일하게 줘서 돋보기 아이콘과 수직 정렬·높이 일치 */
.ss-search-close {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 34px;
  padding: 0 0 5px;
  background: none; border: none; cursor: pointer;
}
.ss-search-close .material-symbols-outlined {
  font-size: 20px !important; color: #fff !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 26 !important;
}
/* 등장 애니메이션: 위에서 -12px → 제자리 + 페이드인 (열릴 때마다 실행) */
#ss-search-popup.is-open .ss-search-popup-inner {
  animation: ssSearchIn 0.28s ease both;
}
@keyframes ssSearchIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* [MakeShop] 검색 폼   인풋(좌) + 돋보기(우), 하단 언더라인 공유 */
.ss-search-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #fff;
  margin: 0;
  padding: 0 0 5px;
}
.ss-search-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.ss-search-icon-popup {
  font-size: 20px !important;
  color: #fff !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 26 !important;
}
.ss-search-field input[type="text"],
.ss-search-field input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 15px;
  color: #fff;
  text-align: left;
  padding: 0;
}
.ss-search-field input::placeholder { color: rgba(255, 255, 255, 0.65); }

/* 접근성: 시각적으로 숨김 (스크린리더 / SEO용 레이블 노출) */
.ss-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


.ss_cate_all_btn { margin:10px 15px 20px 15px; padding:20px 0px 20px 0px; font-size:12px; border:1px solid #f0ede8; text-align:center; background-color: #ffffff; }

/* ============================================================
   우측 고정 버튼
   ============================================================ */
.right_fixed {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 105;
  border: 1px solid #e5e5e5;
  background: #fff;
}
.right_fixed a {
  display: block;    
  color: #a88b68;
  text-align: center;
  background: #fff;
}
.right_iconmenu { font-size:25px !important; color: #a88b68; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 25 !important; padding-top: 1px }
.right_iconwarp { position: relative; }
.right_icontext { font-size: 10px; font-weight: 600; color: #a88b68; text-align: center; padding: 2px 5px; }


/* ============================================================
   네비게이션 오버레이
   ============================================================ */
#ss-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100070;
}
#ss-nav-overlay.is-open { display: block; }


/* ============================================================
   네비게이션 패널 (풀스크린)
   ============================================================ */
#ss-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 100080;
  transform: translateX(100%);   /* 화면 오른쪽 밖 → 열리면 오른쪽에서 왼쪽으로 슬라이드 */
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  /* 스마트스킨(#SMS_MenuAll_wrap)처럼 닫힘=display:none → 화면 밖 오버플로 0(좌우 흔들림 제거).
     JS openNav이 열 때 display:flex로 바꾼 뒤 translateX 슬라이드 실행 */
  display: none;
  flex-direction: column;
}
#ss-nav-panel.is-open { transform: translateX(0); }

/* 패널 헤더   헤더바와 동일 높이 60px */
.ss-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 10px;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}

/* 패널 로고 240px 고정 */
.ss-nav-logo { display: block; flex-shrink: 0; }
.ss-nav-logo img { width: 240px; height: auto; display: block; }

.ss-nav-header-right {
  display: flex;
  align-items: center;
  gap: 0px;
}

/* 장바구니 */
.ss-nav-cart {     
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    position: relative;
    margin-right: 3px; 
}
.ss-nav-cart-icon { font-size: 24px; color: #a88b68; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* 닫기 버튼   이미지로 교체 */
.ss-nav-close {
  width: 30px;
  height: 30px;
  background: none !important; /* 기존 gif 배경 제거 */
  border: none;
  cursor: pointer;
 padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
.ss-nav-close .material-symbols-outlined { font-size: 26px; color: #a88b68; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 26 !important; }


/* ============================================================
   슬라이드 컨테이너
   ============================================================ */
.ss-slides-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.ss-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  /* 스크롤은 내부 .ss-slide-scroll이 담당. 여기(transform 걸린 요소)엔 스크롤을 두지 않음
     → transform+관성스크롤이 겹쳐 튀던 iOS 버그 회피(스마트스킨 스크롤러도 transform 없었음) */
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex !important;
  flex-direction: column !important;
}

/* 슬라이드 내부 스크롤 전용 래퍼   transform 없음 → 부드러운 관성 스크롤 복원.
   높이는 flex가 아니라 absolute inset:0으로 확정(슬라이드를 꽉 채움) → 스크롤 확실히 동작 */
.ss-slide-scroll {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow-y: auto;
  overflow-x: hidden;                  /* 가로 스크롤 차단(넘치는 콘텐츠 클립) */
  -webkit-overflow-scrolling: touch;   /* iOS 관성 스크롤(부드러움)   transform 없어 안 튐 */
  overscroll-behavior: contain;        /* 페이지로 스크롤 전파는 차단, 자체 스크롤은 매끄럽게 */
  touch-action: pan-y;                 /* 세로 스크롤만 인식(좌우 흔들림 방지) */
}
.ss-slide.is-active { transform: translateX(0); }
.ss-slide.is-behind { transform: translateX(-28%); }

/* 슬라이드 헤더 */
.ss-slide-header {
  display: flex;
  align-items: center;
  padding: 18px 10px;
  border-bottom: 1px solid #f0ede8;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.ss-back-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }

.ss-back-btn .ss-back-icon { font-size: 24px !important; color: #222222; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; line-height: 1; }

/* h2 태그로 변경된 슬라이드 타이틀   시각적 크기 유지 */
.ss-slide-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #222222;
  padding-right: 14px;
  margin: 0 auto;
}


/* ============================================================
   Level 1   대분류 메뉴 (border 없음)
   폰트: Josefin Sans 15px
   ============================================================ */
.ss-nav-list {
  list-style: none;
  margin: 0;
  padding: 6px 0px 0px 0px;
}

/* button/a 공통   ss-nav-item */
.ss-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 1.25rem;
  height: 45px;
  font-family: 'Josefin Sans', sans-serif;   /* 영문 폰트 명시 */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #222222;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  /* border 없음 */
}


/* 부티크 상단 구분선 */
.ss-last-item { border-bottom: none; }
.ss-section-divider {
  height: 1px;
  background: #eee;
  margin: 15px 0px 25px 0px;
}

/* 부티크 하단 구분선 */
.ss-bottom-section-divider {
  height: 1px;
  background: #eee;
  margin: 30px 0px 0px 0px;
}

/* 화살표 */
.ss-arrow-right {
  border: none !important;   
  transform: none !important; 
  font-size: 18px !important;
  color: #756e60 !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 18 !important;
  flex-shrink: 0;
  display: flex !important;          /* inline-block 대신 flex로 아이콘 고유 공백 제거 */
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
  vertical-align: middle;
}

/* CONTACT US 상단 구분선 */
.ss-contact-top { }
.ss-contact-nav { padding: 0; }


/* ============================================================
   BOUTIQUE 항목
   (타이틀 > 이미지 > 서브텍스트 / 양쪽 1.25rem padding)
   ============================================================ */
.ss-boutique-item {
  display: block;
  padding: 0rem 1.25rem;
  margin-top: 0px;
}
.ss-boutique-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0px 20px 0px;
}
.ss-boutique-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #222222;
  margin: 0;
}
.ss-boutique-city {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  color: #222222;
  letter-spacing: -0.02rem;
}
/* 이미지 */
.ss-boutique-img {
  margin-bottom: 0;
  position: relative;  
}

/* 이미지 위 오버레이 (중앙 정렬, 흰 텍스트) */
.ss-boutique-ctawrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  /* 텍스트 가독성용 딤 (이미지 위 은은한 어둠) */
  background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.42) 100%);
  border-radius: 2px;
}
.ss-boutique-ctatitle {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #fff;
  margin: 0;
}
.ss-boutique-ctasubtitle {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.45;
  word-break: keep-all;
  color: #fff;
  margin-top: 8px;
}

.ss-boutique-img img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  filter: brightness(92%) !important;   /* 오버레이 텍스트 대비 강화 */
}
/* 서브텍스트   이미지 하단 */
.ss-boutique-sub {
    font-size: 0.82rem;
    text-align: left;
    line-height: 1.6;
    letter-spacing: initial;
    padding: 10px 0px;
    font-weight: 400;
    color: #6d675e;
    word-break: keep-all;
}


/* ============================================================
   하단 영역   로그인 / 검색 / 푸터 (모두 #f8f7f3 배경)
   ============================================================ */

/* 로그인 (하단 메뉴 내부 → 흰 배경, 좌우 여백은 부모 .ss-bottom-menu 담당) */
.ss-nav-user-wrap {
  padding: 0;
  background: #fff;
}

.ss-nav-user {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;  
  min-height: 40px;
  font-size: 12px;
  color: #3b3b3b;
  padding: 0px;
}
.ss-user-id, .ss-user-nim { 
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.12em;
}
.ss-user-login {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.12em;
}
.ss-user-btn {
  margin-left: auto;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  background: #c2b8a6;
  color: #fff;
  border-radius: 3px;
  padding: 6px 28px;
  white-space: nowrap;
  display: flex !important; 
  align-items: center !important;  
}

.ss-user-btn a { display: flex !important; align-items: center !important; }


/* 하단 부티크 배너 */
.ss-nav-boutique-foot {
    text-align: center;
    margin: 30px 0rem 30px;
}


/* ============================================================
   썸네일 그리드 (Level 2 / Level 3)
   이미지: 400×400px WebP
   ============================================================ */
.ss-thumb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;    
  padding: 10px 15px 35px 15px;
}
.ss-thumb-item {
  display: block;
  background: #fff;
  text-align: center;
  padding: 0px;
  cursor: pointer;
  border: none;        /* button 기본 border 제거 */
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.ss-thumb-img {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f7f3;
  margin-top: 15px;  
}
.ss-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.ss-thumb-item:active .ss-thumb-img img { transform: scale(1.04); }
.ss-thumb-label {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    letter-spacing: 0.2rem;
    color: #1a1a1a;
    margin-top: 12px;
}

/* 전체보기 링크 */
.ss-view-all {
    font-family: 'Josefin Sans', sans-serif;
    margin-top: auto !important;
    margin-bottom: 0 !important;

    display: block;
    text-align: center;
    padding: 20px 0px 20px 0px;
    font-size: 0.6rem;
    letter-spacing: 0.02rem;
    color: #959595;
}

/* 소분류 전체보기 버튼 (단색, 이미지 없음   메인 event-btn과 동일 톤) */
.ss-btn-viewall {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: -0.01em;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: #c2b8a6;
    color: #fff;
    padding: 1.0rem 0;
    margin: 0 15px 20px 15px;
}

/* CONTACT US 텍스트형 리스트 */
.ss-contact-list .ss-nav-item {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  border-bottom: 1px solid #f8f7f3;
}

/* ============================================================
   [복구] 카테고리 아코디언(커플링/주얼리) + 패널 iOS 스크롤 고정
   ============================================================ */
/* 카테고리 아코디언   기본 접힘(#2) + 서브 패딩(#3) + 화살표 회전 */
.ss-cat-acc-trigger { cursor: pointer; }
.ss-cat-acc-arrow { transition: transform 0.25s ease; }
.ss-cat-acc-trigger[aria-expanded="true"] .ss-cat-acc-arrow { transform: rotate(90deg) !important; }
.ss-cat-acc-panel { display: none; overflow: hidden; }
.ss-cat-acc-list { list-style: none; margin: 0; padding: 4px 0; }
.ss-cat-acc-list li { list-style: none; }
.ss-cat-acc-list li a {
    display: block;
    padding: 12px 0px 12px 25px;
    font-family: 'Noto Sans KR', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: #3b3b3b;
    text-decoration: none;
}
.ss-cat-acc-list li a:active { color: #222; }

/* 패널 iOS 스크롤 고정(#4)   열린 상태 좌우/상하 흔들림 차단
   · 패널이 전체화면을 덮으므로 열린 동안 모든 터치가 여기서 처리됨
   · touch-action: pan-y → 세로 스크롤만 인식(좌우로 못 밀게 = 좌우 흔들림 제거)
   · overscroll-behavior: none → 스크롤 끝 고무줄 바운스 제거(상하 흔들림 제거) */
#ss-nav-panel { overscroll-behavior: none; touch-action: pan-y; }
/* 실제 스크롤러는 .ss-slide-scroll (위에서 정의)   여기선 슬라이드 자체 스크롤만 확실히 차단 */
#ss-nav-panel .ss-slide { overscroll-behavior: none; }

/* #1 검색 input의 브라우저 기본 삭제(파란 x) 버튼 숨김 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
input[type="search"]::-ms-clear,
input::-ms-clear { display: none; width: 0; height: 0; }
/* 검색 오버레이도 열린 동안 페이지 팬 차단(가로 흔들림 예방) */
#ss-search-overlay, #ss-search-popup { touch-action: none; }


/* ============================================================
   전체메뉴 패널 헤더 검색버튼 (장바구니 왼쪽, 헤더 검색버튼과 동일)
   ============================================================ */
.ss-nav-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 3px;
}
.ss-nav-search-icon {
  font-size: 24px;
  color: #a88b68;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}


/* ============================================================
   하단 메뉴 (서비스 / 위시리스트 / 계정)  전체 흰색 배경
   ============================================================ */
.ss-bottom-menu { background: #fff; padding: 0 1.25rem; }

/* 아이콘 + 라벨 공통 (구글 Material 아이콘) */
.ss-bottom-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Josefin Sans', 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.12em;
}
.ss-bottom-icon {
  font-size: 20px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* 위시리스트 / 계정 행 (서비스와 동일한 46px + 상단 구분선) */
.ss-bottom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  text-decoration: none;  
  background: #fff;
}

/* 서비스 아코디언 서브 링크 : 서비스 텍스트 아래로 들여쓰기 */
.ss-bottom-menu .ss-contact-accordion-list { padding: 2px 0 8px; }
.ss-bottom-menu .ss-contact-accordion-list li a { padding: 10px 0 10px 28px; }

/* BASIC css end */