/* 홈 상단 블록: 메인 배너 / 바로가기 아이콘 / 가로 배너 (2026-10-17) */
.ssw-hb { margin: 0 0 18px; }
.ssw-hb a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ---------- 메인 배너: 양옆이 살짝 보이는 순환 캐러셀 (글자·여백은 카드 폭 기준 cqw 로 같이 줄고 늘어난다) ---------- */
.ssw-hb-hero { position: relative; margin: 8px 0 16px; --hb-gap: 6px; }
.ssw-hb-hero__track {
  display: flex; gap: var(--hb-gap); overflow-x: auto; padding: 0 5.5%; scroll-padding: 0 5.5%;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ssw-hb-hero__track::-webkit-scrollbar { display: none; }
/* 스크립트가 순환 복제·첫 장 위치·확대 비율을 잡기 전에는 감춰 두었다가 한 번에 보인다(탭을 바꿀 때 작은 카드가 커지는 깜빡임 방지).
   스크립트가 실패해도 1.2초 뒤에는 보이게 한다. */
.ssw-hb-hero__track { opacity: 0; animation: ssw-hb-reveal 0s 1.2s forwards; }
.ssw-hb-hero.is-ready .ssw-hb-hero__track { opacity: 1; animation: none; transition: opacity .18s ease; }
@keyframes ssw-hb-reveal { to { opacity: 1; } }
.ssw-hb-hero__slide {
  position: relative; display: block; flex: 0 0 100%; aspect-ratio: 4 / 3;
  scroll-snap-align: center; scroll-snap-stop: always;
}
/* 확대/축소는 안쪽 카드에만 건다 -- 스냅 기준(슬라이드)에 transform 이 걸리면 변형된 상자 기준으로 스냅해서 중앙에서 어긋난다 */
.ssw-hb-hero__card {
  position: absolute; inset: 0; display: block; border-radius: 22px; overflow: hidden; background: #f2f4f6; isolation: isolate;
  transform: scale(.92); transform-origin: center; will-change: transform; container-type: inline-size;
}
.ssw-hb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-hb-hero__slide--photo .ssw-hb-hero__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 66%, rgba(0,0,0,.66) 100%);
}
.ssw-hb-hero__copy {
  position: absolute; z-index: 2; left: 26px; right: 26px; top: 30px; bottom: 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  left: 8cqw; right: 8cqw; top: 9cqw; bottom: 9cqw; gap: 3cqw;
}
.ssw-hb-hero__slide--cutout .ssw-hb-hero__copy,
.ssw-hb-hero__slide--text .ssw-hb-hero__copy { justify-content: center; }
.ssw-hb-hero__slide--cutout .ssw-hb-hero__copy { right: 47%; }
.ssw-hb-hero__slide--photo .ssw-hb-hero__copy { justify-content: flex-end; color: #fff; padding-right: 18cqw; gap: 1.6cqw; text-shadow: 0 1px 10px rgba(0,0,0,.28); }
.ssw-hb-hero__tag {
  display: inline-flex; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(255,255,255,.88); color: inherit; padding: 1.3cqw 3.4cqw; font-size: 3.2cqw;
}
.ssw-hb-hero__slide--photo .ssw-hb-hero__tag { background: rgba(255,255,255,.2); color: #fff; }
.ssw-hb-hero__slide--photo .ssw-hb-hero__title { font-size: 7.2cqw; font-weight: 700; line-height: 1.22; }
.ssw-hb-hero__slide--photo .ssw-hb-hero__sub { opacity: .88; font-size: 3.7cqw; }
.ssw-hb-hero__title {
  font-size: 22px; line-height: 1.24; font-weight: 800; letter-spacing: -.01em; word-break: keep-all; text-wrap: balance;
  font-size: 6.9cqw;
}
.ssw-hb-hero__sub { font-size: 12.5px; line-height: 1.5; opacity: .8; word-break: keep-all; font-size: 3.7cqw; }
.ssw-hb-hero__cta {
  display: inline-flex; margin-top: 4px; padding: 9px 17px; border-radius: 999px;
  background: #15191f; color: #fff; font-size: 13px; font-weight: 800; padding: 2.7cqw 5cqw; font-size: 3.8cqw; margin-top: 1.5cqw;
}
.ssw-hb-hero__pop {
  position: absolute; z-index: 1; right: 7%; bottom: 9%; height: 74%; max-width: 38%;
  object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 14px rgba(20,24,40,.2));
}
.ssw-hb-hero__count {
  position: absolute; z-index: 3; right: calc(5.5% + 14px); bottom: 12px; padding: 2px 9px; border-radius: 999px;
  background: rgba(20,24,30,.42); color: #fff; font-size: 11.5px; line-height: 1.5; font-weight: 600; letter-spacing: .02em; pointer-events: none;
}

/* ---------- 바로가기 아이콘: 2줄 x 5칸, 10개를 넘으면 옆으로 넘김 ---------- */
.ssw-hb-sc { margin: 0 0 16px; padding: 0 8px; }
.ssw-hb-sc__grid {
  display: grid; row-gap: 14px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.ssw-hb-sc__grid::-webkit-scrollbar { display: none; }
.ssw-hb-sc__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; scroll-snap-align: start; min-width: 0; }
.ssw-hb-sc__icon {
  position: relative; width: 56px; height: 56px; border-radius: 18px; background: #f4f5f7;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.ssw-hb-sc__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 18px; display: block; padding: 5px; box-sizing: border-box; }
.ssw-hb-sc__icon em { font-style: normal; font-size: 20px; font-weight: 800; color: #6f7780; }
.ssw-hb-sc__badge {
  position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; border-radius: 50%;
  background: #ff4d5e; color: #fff; font-style: normal; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff;
}
.ssw-hb-sc__item b { font-size: 12px; font-weight: 600; color: #15191f; line-height: 1.2; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 가로 배너 ---------- */
.ssw-hb-strips { position: relative; margin: 0 0 20px; padding: 0 14px; }
.ssw-hb-strips__track {
  display: flex; overflow-x: auto; border-radius: 16px; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.ssw-hb-strips__track::-webkit-scrollbar { display: none; }
.ssw-hb-strip {
  position: relative; flex: 0 0 100%; aspect-ratio: 343 / 92; scroll-snap-align: start; overflow: hidden;
  display: flex; align-items: center; border-radius: 16px; background: #eef1f4;
}
.ssw-hb-strip--full > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-hb-strip__copy { display: flex; flex-direction: column; gap: 4px; padding: 0 22px; max-width: 60%; }
.ssw-hb-strip--cutout .ssw-hb-strip__copy { max-width: 58%; }
.ssw-hb-strip__tag { font-size: 11px; font-weight: 800; opacity: .8; }
.ssw-hb-strip__copy strong { font-size: 16px; line-height: 1.25; font-weight: 800; }
.ssw-hb-strip__sub { font-size: 12px; opacity: .8; line-height: 1.35; }
.ssw-hb-strip__pop { position: absolute; right: 22px; bottom: 9%; height: 82%; max-width: 30%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 8px rgba(20,24,40,.2)); }
.ssw-hb-strips__dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.ssw-hb-strips__dots i { width: 6px; height: 6px; border-radius: 50%; background: #d3d7dc; display: block; transition: width .2s, background .2s; }
.ssw-hb-strips__dots i.is-on { width: 16px; border-radius: 3px; background: #15191f; }

@media (min-width: 768px) {
  .ssw-hb { max-width: 720px; margin-left: auto; margin-right: auto; }
}

/* ---------- 모板文字 템플릿: 글자 없는 그림 위에 HTML 글자 레이어. 크기는 모두 카드 폭 기준 cqw (1200×900 원본 좌표 / 12) ---------- */
@font-face { font-family: 'SSW Anton'; src: url('fonts/hb/Anton-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SSW Jost'; src: url('fonts/hb/Jost-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'SSW Barlow Cond'; src: url('fonts/hb/BarlowCondensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.ssw-hb-tpl { --zh: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --song: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--zh); }
.ssw-hb-tpl .tp { position: absolute; white-space: nowrap; line-height: 1; margin: 0; }
/* 공통: 굵은 중문은 폰 기본 한자 글꼴 + 같은 색 외곽선으로 두께를 보강 */
.ssw-hb-tpl .zh-b { font-weight: 800; -webkit-text-stroke: .18cqw currentColor; }

/* 1) best_yellow */
.ssw-hb-tpl--best_yellow .tp-title { left: 5.2%; top: 16%; font: 400 27cqw/1 'SSW Anton', Impact, sans-serif; color: #15120A; letter-spacing: .2cqw; transform: scaleX(1.2); transform-origin: left top; }
.ssw-hb-tpl--best_yellow .tp-pill { left: 5.83%; top: 52.2%; width: 43.3%; height: 11.6%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #15120A; border-radius: 99cqw; color: #FFDD2E; font-size: 4.83cqw; font-weight: 800; -webkit-text-stroke: .18cqw #FFDD2E; }
.ssw-hb-tpl--best_yellow .tp-sub { left: 6.17%; top: 68.9%; font: 700 2.5cqw/1 'SSW Jost', sans-serif; letter-spacing: .5cqw; color: #15120A; }
.ssw-hb-tpl--best_yellow .tp-stk { left: 76.8%; top: 5.8%; width: 19.7%; aspect-ratio: 1; }
.ssw-hb-tpl--best_yellow .tp-stk::before, .ssw-hb-tpl--best_yellow .tp-stk::after { content: ""; position: absolute; clip-path: polygon(99.2% 41.3%, 93.0% 50.0%, 99.2% 58.7%, 90.4% 64.7%, 93.3% 75.0%, 82.9% 77.6%, 82.1% 88.3%, 71.5% 87.2%, 67.1% 97.0%, 57.5% 92.4%, 50.0% 100.0%, 42.5% 92.4%, 32.9% 97.0%, 28.5% 87.2%, 17.9% 88.3%, 17.1% 77.6%, 6.7% 75.0%, 9.6% 64.7%, 0.8% 58.7%, 7.0% 50.0%, 0.8% 41.3%, 9.6% 35.3%, 6.7% 25.0%, 17.1% 22.4%, 17.9% 11.7%, 28.5% 12.8%, 32.9% 3.0%, 42.5% 7.6%, 50.0% 0.0%, 57.5% 7.6%, 67.1% 3.0%, 71.5% 12.8%, 82.1% 11.7%, 82.9% 22.4%, 93.3% 25.0%, 90.4% 35.3%); }
.ssw-hb-tpl--best_yellow .tp-stk::before { inset: 0; background: #fff; }
.ssw-hb-tpl--best_yellow .tp-stk::after { inset: 2.2%; background: #E5322D; }
.ssw-hb-tpl--best_yellow .tp-stk__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; line-height: 1.12; z-index: 1; }
.ssw-hb-tpl--best_yellow .tp-stk__body b { font-size: 4.17cqw; font-weight: 700; -webkit-text-stroke: .08cqw #fff; }
.ssw-hb-tpl--best_yellow .tp-stk__body i { font-style: normal; font: 500 3.3cqw/1.1 'SSW Jost', sans-serif; }

/* 2) scalp_green */
.ssw-hb-tpl--scalp_green .tp-l1, .ssw-hb-tpl--scalp_green .tp-l2 { left: 5.83%; font: 700 14cqw/1 'SSW Barlow Cond', 'Arial Narrow', sans-serif; color: #1F4A2A; }
.ssw-hb-tpl--scalp_green .tp-l1 { top: 9.6%; } .ssw-hb-tpl--scalp_green .tp-l2 { top: 28.6%; }
.ssw-hb-tpl--scalp_green .tp-rule { left: 6.33%; top: 58.6%; width: 8.33%; height: .5cqw; background: #1F4A2A; }
.ssw-hb-tpl--scalp_green .tp-title { left: 6.17%; top: 61.8%; font-size: 7.17cqw; font-weight: 800; color: #1F4A2A; -webkit-text-stroke: .18cqw #1F4A2A; }
.ssw-hb-tpl--scalp_green .tp-sub { left: 6.33%; top: 75.1%; font: 700 2.5cqw/1 'SSW Jost', sans-serif; letter-spacing: .8cqw; color: #3F7A4C; }

/* 3) serum_orange */
.ssw-hb-tpl--serum_orange .tp-brand { left: 5.83%; top: 11.3%; font: 800 11.2cqw/1 'SSW Jost', sans-serif; color: #fff; letter-spacing: -.02cqw; }
.ssw-hb-tpl--serum_orange .tp-chip { left: 6.17%; top: 27.8%; width: 33%; height: 7.6%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: .33cqw solid #fff; border-radius: 99cqw; color: #fff; font: 700 3.4cqw/1 'SSW Jost', sans-serif; letter-spacing: .55cqw; }
.ssw-hb-tpl--serum_orange .tp-title { left: 6%; top: 41.3%; font-size: 6.67cqw; font-weight: 800; color: #fff; -webkit-text-stroke: .15cqw #fff; }
.ssw-hb-tpl--serum_orange .tp-sub { left: 6.33%; top: 53.3%; font-size: 3cqw; font-weight: 500; color: rgba(255,255,255,.92); }

/* 4) snack_red */
.ssw-hb-tpl--snack_red .tp-l1 { left: 5.33%; top: 13.2%; font-size: 17.5cqw; font-weight: 900; color: #FFE04A; -webkit-text-stroke: .5cqw #7A1414; paint-order: stroke fill; }
.ssw-hb-tpl--snack_red .tp-l2 { left: 5.33%; top: 41%; font-size: 12.5cqw; font-weight: 900; color: #fff; -webkit-text-stroke: .5cqw #7A1414; paint-order: stroke fill; }
.ssw-hb-tpl--snack_red .tp-pill { left: 5.83%; top: 65.6%; width: 29.2%; height: 8.7%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #7A1414; border-radius: 99cqw; color: #FFE04A; font-size: 3.33cqw; font-weight: 800; -webkit-text-stroke: .1cqw #FFE04A; }

/* 5) body_lavender */
.ssw-hb-tpl--body_lavender .tp-e1, .ssw-hb-tpl--body_lavender .tp-e2 { left: 5.83%; font: 700 5.83cqw/1 'SSW Jost', sans-serif; letter-spacing: .83cqw; color: #8D6BC8; }
.ssw-hb-tpl--body_lavender .tp-e1 { top: 17.1%; } .ssw-hb-tpl--body_lavender .tp-e2 { top: 27.4%; }
.ssw-hb-tpl--body_lavender .tp-title { left: 5.5%; top: 40.9%; font-family: var(--song); font-size: 7.67cqw; font-weight: 900; color: #34205F; -webkit-text-stroke: .1cqw #34205F; }
.ssw-hb-tpl--body_lavender .tp-rule { left: 6%; top: 55.4%; width: 21.5%; height: .42cqw; background: #C9A55C; }
.ssw-hb-tpl--body_lavender .tp-sub { left: 5.83%; top: 59.6%; font-size: 4.17cqw; font-weight: 500; color: #34205F; }
.ssw-hb-tpl--body_lavender .tp-note { left: 6%; top: 69%; font-size: 2.67cqw; font-weight: 500; color: #6B52A3; }

/* ---------- 홈 탭 모듈 (美妆/食品/新品/特价/榜单): 가로 레일, 소분류 아이콘, 브랜드 칩 ---------- */
.ssw-ht { padding-bottom: 28px; }
.ssw-ht-section { margin: 0 0 26px; }
.ssw-ht-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 16px 10px; }
.ssw-ht-section__head h2 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; color: #15191f; letter-spacing: -.01em; }
.ssw-ht-section__head p { margin: 3px 0 0; font-size: 12px; color: #8a929b; }
.ssw-ht-section__more { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #6f7780; text-decoration: none; padding-bottom: 2px; }

.ssw-ht-rail { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scroll-padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ssw-ht-rail::-webkit-scrollbar { display: none; }
.ssw-ht-rail::after { content: ""; flex: 0 0 6px; } /* 끝까지 밀었을 때 마지막 카드 오른쪽 여백 */
.ssw-ht-rail__item { position: relative; flex: 0 0 38%; max-width: 168px; min-width: 128px; scroll-snap-align: start; }
.ssw-ht-rail__item .ssw-shop-card { width: 100%; grid-template-columns: 100%; }
.ssw-ht-rail__item .ssw-shop-card__media { width: 100%; aspect-ratio: 1 / 1.15; }
.ssw-ht-rail__item .ssw-shop-card > b { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssw-ht-rail__item .ssw-shop-card__meta-row { gap: 2px; flex-wrap: wrap; }
.ssw-ht-rank {
  position: absolute; z-index: 3; left: 0; top: 0; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border-radius: 4px 0 8px 0;
  background: rgba(21,25,31,.86); color: #fff; font: 700 11px/1 'SSW Jost', sans-serif; letter-spacing: .02em;
}

.ssw-ht-leaves { margin: 0 0 24px; padding: 0 8px; }
.ssw-ht-leaves__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 14px; }
.ssw-ht-leaves__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; text-decoration: none; color: inherit; min-width: 0; }
.ssw-ht-leaves__icon { width: 56px; height: 56px; border-radius: 18px; background: #f4f5f7; overflow: hidden; display: block; }
.ssw-ht-leaves__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-ht-leaves__item b { max-width: 100%; font-size: 12px; font-weight: 600; color: #15191f; text-align: center; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ssw-ht-brands { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.ssw-ht-brands a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #e6e9ec; border-radius: 999px; font-size: 12px; font-weight: 600; color: #15191f; text-decoration: none; background: #fff; }
.ssw-ht-brands a i { font-style: normal; font-size: 11px; font-weight: 600; color: #9aa1a9; }
.ssw-ht-rail__item .ssw-shop-card img { aspect-ratio: auto; height: 100%; }

.ssw-ht-leaves__icon.is-curated img { object-fit: contain; }

.ssw-ht-empty { margin: 60px 16px; text-align: center; color: #9aa1a9; font-size: 14px; }

/* ---------- 순위 리스트 / 칩 / 무한 피드 (탭을 길게 이어 가는 모듈들) ---------- */
.ssw-ht-list { padding: 0 16px; display: grid; gap: 0; }
.ssw-ht-row { display: grid; grid-template-columns: 22px 76px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f1f3; color: inherit; text-decoration: none; }
.ssw-ht-row:last-child { border-bottom: 0; }
.ssw-ht-row__rank { font: 700 15px/1 'SSW Jost', sans-serif; color: #15191f; text-align: center; }
.ssw-ht-row__img { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: #f4f5f7; display: block; }
.ssw-ht-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-ht-row__meta { display: grid; gap: 4px; min-width: 0; }
.ssw-ht-row__meta b { font-size: 13px; line-height: 1.35; font-weight: 600; color: #15191f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssw-ht-row__meta em { font-style: normal; font-size: 12px; color: #6f7780; }
.ssw-ht-row__meta em i { font-style: normal; color: #9aa1a9; }
.ssw-ht-row__meta strong { font-size: 15px; font-weight: 800; color: #15191f; }
.ssw-ht-row__meta strong del { font-size: 11px; font-weight: 500; color: #9aa1a9; margin-left: 4px; }
.ssw-ht-row__off { color: #ff4d1c; margin-right: 2px; }

.ssw-ht-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.ssw-ht-chips a { padding: 6px 11px; border: 1px solid #e6e9ec; border-radius: 999px; font-size: 12px; font-weight: 500; color: #15191f; text-decoration: none; background: #fff; }

.ssw-ht-feed__head { padding-top: 6px; }
.ssw-ht-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 8px; padding: 0 14px 18px; }
.ssw-ht-feed__item { min-width: 0; }
.ssw-ht-feed__item .ssw-shop-card img { aspect-ratio: auto; height: 100%; }
.ssw-ht-more { display: flex; align-items: center; justify-content: center; min-height: 64px; color: #9aa1a9; font-size: 12px; }
.ssw-ht-end { margin: 8px 16px 0; padding: 24px 0 8px; text-align: center; color: #9aa1a9; font-size: 12px; }

/* ---------- 칩으로 내용이 바뀌는 모듈 4종 + 큰 카드 레일 ---------- */
.ssw-ht-ix__chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
.ssw-ht-ix__chips::-webkit-scrollbar { display: none; }
.ssw-ht-ix__chips button { flex: 0 0 auto; padding: 6px 12px; border: 1px solid #e6e9ec; border-radius: 999px; background: #fff; color: #5a616a; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ssw-ht-ix__chips button.is-on { background: #15191f; border-color: #15191f; color: #fff; }
.ssw-ht-ix__panel { overflow: hidden; }
.ssw-ht-ix__inner { transition: opacity .18s ease, transform .18s ease; }
.ssw-ht-ix__inner.is-out-next { opacity: 0; transform: translateX(-24px); }
.ssw-ht-ix__inner.is-out-prev { opacity: 0; transform: translateX(24px); }
.ssw-ht-ix__inner.is-in-next { animation: ssw-ht-in-next .28s ease both; }
.ssw-ht-ix__inner.is-in-prev { animation: ssw-ht-in-prev .28s ease both; }
@keyframes ssw-ht-in-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ssw-ht-in-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
.ssw-ht-ix__panel.is-loading .ssw-ht-ix__inner { opacity: .55; } /* 아직 못 받은 칩을 누른 지 0.4초가 지났을 때만 살짝 흐리게 */
.ssw-ht-ix__empty { margin: 24px 16px; text-align: center; color: #9aa1a9; font-size: 13px; }
.ssw-ht-ix__more { display: flex; align-items: center; justify-content: center; margin: 14px 16px 0; min-height: 42px; border: 1px solid #dde2e7; border-radius: 999px; background: #fff; color: #15191f; font-size: 13px; font-weight: 700; text-decoration: none; }

/* 1) 3열 컴팩트 그리드 */
.ssw-ht-minigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; padding: 0 16px; }
.ssw-ht-mini { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; min-width: 0; }
.ssw-ht-mini__img { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #f4f5f7; }
.ssw-ht-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-ht-mini b { font-size: 12px; line-height: 1.35; font-weight: 500; color: #15191f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssw-ht-mini__pr { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.ssw-ht-mini__pr i { font-style: normal; font-size: 13px; font-weight: 800; color: #ff4d5e; }
.ssw-ht-mini__pr strong { font-size: 14px; font-weight: 800; color: #15191f; }

/* 2) 고민 선택: 큰 칩 2x3 + 회색 패널 */
.ssw-ht-ix--picker .ssw-ht-ix__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.ssw-ht-ix--picker .ssw-ht-ix__chips button { padding: 9px 4px; border-radius: 8px; font-size: 12.5px; font-weight: 500; text-align: center; background: #fff; }
.ssw-ht-ix--picker .ssw-ht-ix__chips button.is-on { background: #15191f; color: #fff; border-color: #15191f; font-weight: 600; }
.ssw-ht-ix__panel.is-gray { background: #f3f4f6; padding: 18px 0 20px; margin-top: 4px; }
.ssw-ht-ix__ptitle { margin: 0 16px 12px; font-size: 14px; font-weight: 800; color: #15191f; }

/* 3) 성분 칩 + 리스트 */
.ssw-ht-list--tight { padding: 0 16px; }
.ssw-ht-row--tags { grid-template-columns: 76px 1fr; }
.ssw-ht-row__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ssw-ht-row__tags i { font-style: normal; padding: 2px 6px; border-radius: 4px; background: #eef0f3; color: #4a5058; font-size: 10.5px; font-weight: 600; }

/* 4)·6) 큰 카드 레일 */
.ssw-ht-bigrail { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
.ssw-ht-bigrail::-webkit-scrollbar { display: none; }
.ssw-ht-bigrail::after { content: ""; flex: 0 0 4px; }
.ssw-ht-bigrail__item { flex: 0 0 62%; max-width: 280px; scroll-snap-align: start; min-width: 0; }
.ssw-ht-big { display: grid; gap: 7px; align-content: start; color: inherit; text-decoration: none; }
.ssw-ht-big__img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #f4f5f7; }
.ssw-ht-big__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssw-ht-big__img em { position: absolute; left: 8px; top: 8px; font-style: normal; padding: 3px 8px; border-radius: 999px; background: #ff4d5e; color: #fff; font-size: 12px; font-weight: 800; }
.ssw-ht-big b { font-size: 13px; line-height: 1.4; font-weight: 600; color: #15191f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssw-ht-big__pr { display: flex; align-items: baseline; gap: 6px; }
.ssw-ht-big__pr strong { font-size: 17px; font-weight: 800; color: #15191f; }
.ssw-ht-big__pr del { font-size: 12px; color: #9aa1a9; }
.ssw-ht-big__rt { font-size: 12px; color: #6f7780; }
.ssw-ht-big__rt i { font-style: normal; color: #9aa1a9; }
.ssw-ht-big__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ssw-ht-big__tags i { font-style: normal; padding: 2px 6px; border-radius: 4px; background: #fff1f3; color: #ff4d5e; font-size: 10.5px; font-weight: 700; }

/* 美妆 맨 위 분류 바로가기: 홈의 아이콘 격자와 겹치지 않게 작은 글자 줄로 */
.ssw-ht-catnav { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 14px; scrollbar-width: none; }
.ssw-ht-catnav::-webkit-scrollbar { display: none; }
.ssw-ht-catnav a { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: #f3f4f6; color: #3d444c; font-size: 12px; font-weight: 500; text-decoration: none; }
.ssw-ht-ix--picker .ssw-ht-ix__chips.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 美妆 탭 전용 배너 템플릿 2종: 홈 배너(왼쪽 글자·오른쪽 상품)와 다른 구도 — 세이지(상품 왼쪽·글자 오른쪽), 블러시(글자 위 중앙·상품 아래) */
.ssw-hb-tpl--sage_calm .tp-e1 { right: 5.8%; top: 19%; font: 700 3.1cqw/1 'SSW Jost', sans-serif; letter-spacing: .9cqw; color: #5B8A68; }
.ssw-hb-tpl--sage_calm .tp-title { right: 5.5%; top: 28%; font-family: var(--song); font-size: 7.8cqw; font-weight: 900; color: #24412F; -webkit-text-stroke: .1cqw #24412F; }
.ssw-hb-tpl--sage_calm .tp-rule { right: 5.9%; top: 45.5%; width: 11%; height: .42cqw; background: #24412F; }
.ssw-hb-tpl--sage_calm .tp-sub { right: 5.8%; top: 49.5%; font-size: 3.5cqw; font-weight: 600; color: #3F6B4E; }
.ssw-hb-tpl--sage_calm .tp-note { right: 5.8%; top: 58%; font-size: 2.6cqw; font-weight: 500; color: #6E9A7B; }
.ssw-hb-tpl--blush_arch .tp { left: 0; right: 0; text-align: center; }
.ssw-hb-tpl--blush_arch .tp-e1 { top: 8%; font: 700 3cqw/1 'SSW Jost', sans-serif; letter-spacing: 1.2cqw; color: #A85A64; }
.ssw-hb-tpl--blush_arch .tp-title { top: 14.5%; font-family: var(--song); font-size: 7.4cqw; font-weight: 900; color: #5A1F2B; -webkit-text-stroke: .1cqw #5A1F2B; }
.ssw-hb-tpl--blush_arch .tp-rule { left: 50%; right: auto; top: 28.6%; width: 9%; height: .42cqw; background: #C98A8F; transform: translateX(-50%); }
.ssw-hb-tpl--blush_arch .tp-sub { top: 32%; font-size: 3.4cqw; font-weight: 600; color: #7A2E3A; }

/* 榜单 페이지: 칩(카테고리) 아래 2열 순위 목록 */
.ssw-ht-rank-meta { margin: 0 16px 12px; font-size: 12px; color: #8a929b; }
.ssw-ht-rank-meta span { color: #5a616a; font-weight: 600; }
.ssw-ht-rank-grid { padding-top: 2px; }
.ssw-ht-rank-item { position: relative; }
/* 올리브영 랭킹처럼 카테고리 칩을 상단에 고정: 맨 위 탭바(.top-tabs) 바로 아래에 붙는다. 헤더가 접히면(body.is-header-hidden) 탭바와 같이 올라간다. */
.ssw-ht-ix--rankpage .ssw-ht-ix__chips { position: sticky; top: calc(var(--app-header-height, 68px) + var(--app-tabs-height, 42px)); z-index: 20; background: #fff; padding: 9px 16px 10px; margin-bottom: 10px; box-shadow: 0 1px 0 #eef0f2; transition: top .2s ease; }
body.is-header-hidden .ssw-ht-ix--rankpage .ssw-ht-ix__chips { top: var(--app-tabs-height, 42px); }