/*
Theme Name: My Shop
Theme URI:
Author:
Description: 모바일 고정 WooCommerce 쇼핑몰 테마
Version: 1.0
*/

/* =============================================
   CSS Variables
   ============================================= */
:root {
  --color-black: #111111;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-mid: #999999;
  --color-gray-border: #ececec;
  --color-gold: #c9a96e;
  --color-accent: #FF6B35;
  --color-bg: #f0f0f0;
}

/* =============================================
   Reset & Base
   ============================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overscroll-behavior: none; }
body {
  background: #f0f0f0;
  overscroll-behavior: none;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #111;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* =============================================
   Mobile Wrapper
   ============================================= */
.mobile-wrap {
  max-width: 600px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  position: relative;
  overflow-x: clip;
  padding-bottom: 60px;
  padding-top: 137px;
}
.mobile-wrap--category { padding-top: 0; }

/* =============================================
   Sticky Header
   ============================================= */
.sticky-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  z-index: 999;
  background: #fff;
}


/* =============================================
   Header – Logo
   ============================================= */
.site-logo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  height: 44px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.site-logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
  color: #111;
  text-decoration: none;
}
.site-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #111;
  text-decoration: none;
}
.site-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* =============================================
   Header – Search Bar
   ============================================= */
.shop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.shop-search__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #aaa;
}
.shop-search__input svg { flex-shrink: 0; }
.shop-search__query { color: #111; flex: 1; font-size: 13px; }
.shop-search__clear-link {
  display: flex; align-items: center; color: #aaa; padding: 2px;
  text-decoration: none;
}
.shop-search__menu {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: #333; text-decoration: none;
}

/* ===== 검색 오버레이 ===== */
.search-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 600px;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.search-overlay.active {
  transform: translateX(-50%) translateY(0);
}
.search-overlay__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.search-overlay__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #f5f5f5;
  border-radius: 10px;
}
.search-overlay__input-wrap svg { color: #999; flex-shrink: 0; }
#searchInput {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #111;
  font-family: inherit;
}
#searchInput::placeholder { color: #aaa; }
.search-overlay__clear {
  background: none; border: none; cursor: pointer;
  color: #aaa; padding: 0;
  display: flex; align-items: center;
}
.search-overlay__cancel {
  background: none; border: none;
  font-size: 14px; color: #555;
  cursor: pointer; white-space: nowrap; padding: 4px 0;
  font-family: inherit;
}
.search-overlay__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 88px;
  -webkit-overflow-scrolling: touch;
}
.search-section { padding: 0 16px 20px; }
.search-section__header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px;
}
.search-section__title { font-size: 13px; font-weight: 700; color: #111; }
.search-section__clear-all {
  background: none; border: none;
  font-size: 12px; color: #999; cursor: pointer;
}
.search-recent-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.search-recent-tag {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #f5f5f5; border-radius: 20px;
}
.search-recent-tag__text {
  background: none; border: none;
  font-size: 13px; color: #333; cursor: pointer; font-family: inherit;
}
.search-recent-tag__remove {
  background: none; border: none;
  display: flex; align-items: center;
  cursor: pointer; color: #bbb; padding: 0;
}
.search-category-vertical {
  display: flex; gap: 32px;
  overflow-x: auto; scrollbar-width: none;
  margin-top: 12px;
}
.search-category-vertical::-webkit-scrollbar { display: none; }
.search-category-vertical__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
}
.search-category-vertical__img {
  width: 68px; height: 68px;
  border-radius: 12px; overflow: hidden; background: #f5f5f5;
}
.search-category-vertical__img img { width: 100%; height: 100%; object-fit: cover; }
.search-category-vertical__name { font-size: 11px; color: #333; }
.search-brand-buttons { display: flex; flex-direction: column; gap: 0; }
.search-brand-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  background: none; border: none; border-bottom: 1px solid #f8f8f8;
  cursor: pointer; text-align: left; width: 100%; font-family: inherit;
}
.search-brand-btn__rank {
  width: 20px;
  font-size: 13px; font-weight: 700; color: #111;
  font-family: 'Montserrat', sans-serif;
  text-align: center; flex-shrink: 0;
}
.search-brand-btn:nth-child(1) .search-brand-btn__rank { color: #c9a96e; }
.search-brand-btn:nth-child(2) .search-brand-btn__rank { color: #888; }
.search-brand-btn:nth-child(3) .search-brand-btn__rank { color: #b07c4f; }
.search-brand-btn__name { font-size: 14px; color: #222; }
.search-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.search-tag {
  padding: 7px 16px;
  border: 1px solid #ececec; border-radius: 20px;
  background: #fff; font-size: 13px; color: #333;
  cursor: pointer; font-family: inherit;
}
.search-tag:active { background: #f5f5f5; }

/* ===== 선택된 필터 태그 ===== */
.selected-filters { background: #fff; border-bottom: 1px solid #f0f0f0; }
.selected-filters__inner {
  display: flex; align-items: center;
  padding: 8px 12px; gap: 8px;
}
.selected-filters__tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.filter-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: #111; color: #fff;
  border-radius: 20px; font-size: 12px;
  text-decoration: none; white-space: nowrap;
}
.filter-tag__close { display: flex; align-items: center; opacity: 0.7; }
.selected-filters__reset {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #999; text-decoration: none;
  flex-shrink: 0; white-space: nowrap;
}

/* ===== 검색 결과 카운트 ===== */
.search-result-count {
  padding: 8px 16px;
  font-size: 13px; color: #666;
}
.search-result-count strong { color: #111; }
.search-result-count span { color: #999; }

/* ===== 검색 결과 없음 ===== */
.search-empty {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 60px 16px; text-align: center;
}
.search-empty__icon { font-size: 40px; margin-bottom: 16px; }
.search-empty__title {
  font-size: 16px; font-weight: 700; color: #111; margin-bottom: 8px;
}
.search-empty__desc { font-size: 13px; color: #999; margin-bottom: 24px; }
.search-empty__btn {
  padding: 12px 24px;
  background: #111; color: #fff;
  border-radius: 10px; text-decoration: none;
  font-size: 14px; font-weight: 600;
}

/* =============================================
   Header – Tab Navigation
   ============================================= */
.nav-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #ececec;
  background: #fff;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs__item {
  display: inline-block;
  padding: 10px 14px;
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.nav-tabs__item.active {
  color: #111;
  font-weight: 700;
  border-bottom: 2px solid #111;
}
.nav-tabs__item.highlight { color: #FF6B35; }

/* =============================================
   Section Common
   ============================================= */
.section-border { border-top: 12px solid #f5f5f5; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 16px 12px;
}
.section-title { font-size: 16px; font-weight: 700; color: #000; }
.section-subtitle { font-size: 12px; color: #999; margin-top: 2px; }
.section-more { font-size: 12px; color: #999; }

.tab-btns { display: flex; gap: 8px; padding: 0 16px 12px; }
.tab-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #ececec;
  font-size: 12px;
  background: #fff;
  color: #666;
  cursor: pointer;
}
.tab-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* =============================================
   Product Card
   ============================================= */
.product-card { display: block; text-decoration: none; }
.product-card__img {
  aspect-ratio: 1/1;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.product-card__brand { display: block; font-size: 13px; font-weight: 700; color: #111; margin-bottom: 5px; }
.product-card__name-en {
  display: block;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.product-card__name-kr {
  display: block;
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.product-card__price { display: block; font-size: 14px; font-weight: 700; color: #000; }

/* =============================================
   카카오톡 플로팅 버튼
   ============================================= */
.kakao-float {
  position: fixed;
  bottom: 80px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FEE500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 1001;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.kakao-float:active {
  transform: scale(0.92);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
@media (min-width: 600px) {
  .kakao-float {
    right: calc(50% - 284px);
  }
}

/* =============================================
   Bottom Navigation
   ============================================= */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 60px;
  background: #fff;
  border-top: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #999;
  text-decoration: none;
}
.bottom-nav__item svg { width: 22px; height: 22px; }
.bottom-nav__item.active { color: #111; }

/* =============================================
   Main Banner / Swiper
   ============================================= */
.main-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f0f0f0;
  margin: 0;
  padding-bottom: 0 !important;
}
.main-banner__slide {
  position: relative;
  width: 100%;
}
.main-banner__bg {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.main-banner__overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.main-banner__text {
  position: absolute;
  bottom: 48px;
  left: 20px; right: 20px;
  z-index: 2;
  pointer-events: none;
}
.main-banner__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px; line-height: 1;
}
.main-banner__title {
  font-size: 26px; font-weight: 800;
  color: #fff; line-height: 1.15;
  margin-bottom: 6px; letter-spacing: -0.3px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.main-banner__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}
.main-banner__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.main-banner__pagination {
  position: absolute;
  bottom: 20px; left: 0; right: 0;
  display: flex !important;
  justify-content: center; align-items: center;
  gap: 5px; z-index: 4;
}
.main-banner__pagination .swiper-pagination-bullet {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  opacity: 1; margin: 0 !important;
  transition: all 0.3s ease;
}
.main-banner__pagination .swiper-pagination-bullet-active {
  width: 22px; border-radius: 3px; background: #fff;
}
.swiper-pagination-bullet { background: rgba(255,255,255,0.6); opacity: 1; }
.swiper-pagination-bullet-active { background: #fff; }

/* =============================================
   Mini Dark Banner
   ============================================= */
.mini-banner-dark { background: #1a1a1a; }
.mini-dark-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  min-height: 72px;
  text-decoration: none;
}
.mini-dark-card__title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mini-dark-card__subtitle { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.mini-dark-card__icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* =============================================
   Category Icon Grid
   ============================================= */
.cat-icon-section { padding: 16px 0 8px; }
.cat-icon-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px 4px; padding: 20px 12px 16px;
}
.cat-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; color: inherit; position: relative;
}
.cat-icon-item__img {
  position: relative;
  width: 54px; height: 54px;
  background: #f5f5f5; overflow: hidden;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cat-icon-item__img img {
  width: 54px; height: 54px; object-fit: cover;
  border-radius: 50%; display: block;
}
.cat-icon-item__img--empty {
  width: 54px; height: 54px; border-radius: 50%; background: #ececec;
}
.cat-icon-item__badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff;
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  line-height: 1.5; white-space: nowrap; z-index: 1;
}
.cat-icon-item__label { font-size: 11px; color: #333; text-align: center; line-height: 1.3; }

/* =============================================
   메인홈 브랜드 (배너 하단 원형 행)
   - 대시보드 '메인홈' 체크 브랜드. 이미지 없으면 흰 원형.
   ============================================= */
.home-brands {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px 4px; padding: 20px 12px 18px;
}
.home-brand-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; color: inherit;
}
.home-brand-item__img {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover; display: block;
  border: 1px solid #ededed; background: #fff;
}
.home-brand-item__img--empty {
  background: #fff; border: 1px solid #e2e2e2;
}
.home-brand-item__name {
  font-size: 11px; color: #333; text-align: center; line-height: 1.3;
  max-width: 64px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* =============================================
   NEW IN Bar
   ============================================= */
.newin-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: #111; color: #fff;
  text-decoration: none; gap: 12px;
}
.newin-bar__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.newin-bar__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #c9a96e;
  flex-shrink: 0; animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.newin-bar__top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.newin-bar__title { font-size: 14px; font-weight: 700; color: #fff; }
.newin-bar__discount,
.newin-bar__badge {
  font-size: 11px; font-weight: 700; background: #c9a96e; color: #111;
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.newin-bar__sub { font-size: 11px; color: rgba(255,255,255,0.5); }
.newin-bar__timer { flex-shrink: 0; text-align: right; }
.newin-bar__timer-label { font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 2px; }
.newin-bar__timer-count {
  font-size: 16px; font-weight: 700; color: #fff;
  font-family: 'Montserrat', monospace; letter-spacing: 0.06em;
}

/* =============================================
   Footer
   ============================================= */
.footer {
  background: #fafafa;
  padding: 32px 20px 16px;
  border-top: 1px solid #ececec;
}
.footer-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
  margin-bottom: 20px;
}
.footer-logo { font-size: 16px; font-weight: 700; color: #111; }
.footer-slogan { font-size: 11px; color: #aaa; letter-spacing: 0.5px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 18px;
  margin-bottom: 20px;
}
.footer-col-title {
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 4px;
}
.footer-col-heading { font-size: 13px; font-weight: 500; color: #222; margin-bottom: 10px; }
.footer-link { display: block; font-size: 11.5px; color: #555; margin: 5px 0; }
.footer-social { display: flex; gap: 10px; margin-bottom: 12px; }
.footer-social__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 13px;
  text-decoration: none;
}
.footer-social__icon--naver {
  background: #03c75a;
  border-color: #03c75a;
  color: #fff;
  font-weight: 700;
}
.footer-biz-toggle {
  font-size: 11.5px;
  color: #777;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 4px;
}
.footer-biz-info { display: none; font-size: 11px; color: #999; margin-top: 8px; line-height: 1.6; }
.footer-biz-info.open { display: block; }
.footer-bottom {
  border-top: 1px solid #ececec;
  padding-top: 14px;
  font-size: 10.5px;
  color: #aaa;
  margin-top: 16px;
}
.footer-copy { font-size: 10px; color: #aaa; text-align: right; margin-top: 12px; }

/* =============================================
   Ranking Section
   ============================================= */
.rank-item { position: relative; }
.rank-item__number {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  font-size: 18px;
  font-weight: 900;
  color: #111;
  line-height: 1;
}

/* =============================================
   Brand Section
   ============================================= */
.brand__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}
.brand__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.brand__logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #111;
  text-align: center;
  overflow: hidden;
}
.brand__name { font-size: 10px; color: #666; text-align: center; }
.brand__empty { grid-column: 1 / -1; padding: 28px 0; text-align: center; font-size: 13px; color: #999; }

/* =============================================
   Celebrity Section
   ============================================= */
.celeb-card { display: block; text-decoration: none; }
.celeb-card__img {
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.celeb-card__img img { width: 100%; height: 100%; object-fit: cover; }
.celeb-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%);
}
.celeb-card__celeb-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.celeb-card__date-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.celeb-card__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
}
.celeb-card__brand { font-size: 10px; color: rgba(255,255,255,0.7); margin-bottom: 2px; }
.celeb-card__name {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.celeb-card__price { font-size: 13px; font-weight: 700; color: #fff; }

/* =============================================
   Collection Banner (가방)
   ============================================= */
.collection-banner {
  position: relative;
  overflow: hidden;
}
.collection-banner img { width: 100%; height: auto; display: block; }
.collection-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.collection-banner__overlay h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
}
.collection-banner__overlay p { font-size: 13px; color: rgba(255,255,255,0.8); }

/* =============================================
   Review Section
   ============================================= */
.review-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
}
.review-card__img { aspect-ratio: 1/1; overflow: hidden; }
.review-card__img img { width: 100%; height: 100%; object-fit: cover; }
.review-card__body { padding: 10px; }
.review-card__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 5px;
}
.review-card__date { font-size: 9px; color: #bbb; margin-left: 4px; }
.review-card__product {
  font-size: 11px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__text {
  font-size: 11px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__author { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #888; }
.review-card__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  flex-shrink: 0;
}

/* =============================================
   Page: Category Header
   ============================================= */
.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.category-header__back {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.category-header__back svg { width: 22px; height: 22px; color: #111; }
.category-header__title { font-size: 16px; font-weight: 700; color: #111; }
.category-header__icons { display: flex; align-items: center; gap: 12px; }
.category-header__icons a { color: #27272a; display: flex; align-items: center; position: relative; }
.category-header__icons svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   Page: Category Events (아이콘 스크롤)
   ============================================= */
.category-events {
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}
.category-events__scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}
.category-events__scroll::-webkit-scrollbar { display: none; }
.category-events__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  text-decoration: none;
  font-size: 11px;
  color: #333;
  white-space: nowrap;
}
.category-events__img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
}
.category-events__img img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   Page: Category Hero Slider
   ============================================= */
.category-hero-slider {
  position: relative;
  overflow: hidden;
  margin: 16px 16px 0;
  border-radius: 12px;
}
.category-hero-slider__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-hero-slider__slide {
  min-width: 100%;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.category-hero-slider__slide img {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  display: block;
}
.category-hero-slider__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 16px;
  background: linear-gradient(to top, rgba(255,255,255,0.8) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.category-hero-slider__overlay.is-dark {
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.category-hero-slider__sublabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}
.category-hero-slider__overlay.is-dark .category-hero-slider__sublabel { color: rgba(255,255,255,0.7); }
.category-hero-slider__label { font-size: 16px; font-weight: 700; color: #111; }
.category-hero-slider__overlay.is-dark .category-hero-slider__label { color: #fff; }
.category-hero-slider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
}
.category-hero-slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.category-hero-slider__dot.active {
  background: #111;
  width: 18px;
  border-radius: 3px;
}

/* =============================================
   Page: Category Layout (필터 탭 + 아코디언)
   ============================================= */
.category-layout {
  display: flex;
  min-height: calc(100vh - 200px);
  margin-top: 16px;
}

/* 좌측 필터 탭 */
.category-menu {
  width: 80px;
  flex-shrink: 0;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}
.category-menu__item {
  padding: 14px 0;
  font-size: 12px;
  color: #999;
  background: #fafafa;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  border-right: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.category-menu__item.active {
  background: #fff;
  color: #111;
  font-weight: 700;
  border-right-color: #111;
}
.category-menu__divider {
  height: 8px;
  background: #f5f5f5;
  border-bottom: 1px solid #f0f0f0;
}

/* 우측 아코디언 */
.category-content { flex: 1; overflow-y: auto; }
.category-content__inner { padding: 8px 0; }
.category-all-link {
  display: block;
  padding: 12px 20px;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none;
}
.category-accordion { border-bottom: 1px solid #f5f5f5; }
.category-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #111;
  font-weight: 500;
  text-align: left;
}
.category-accordion__header svg { transition: transform 0.3s; flex-shrink: 0; }
.category-accordion.open .category-accordion__header svg { transform: rotate(180deg); }
.category-accordion__body {
  display: none;
  flex-direction: column;
  background: #fafafa;
  padding: 4px 0 8px;
}
.category-accordion.open .category-accordion__body { display: flex; }
.category-accordion__body a {
  padding: 9px 28px;
  font-size: 12px;
  color: #555;
  text-decoration: none;
}
.category-accordion__body a:active { color: #111; }

/* =============================================
   Archive: 카테고리 상단 탭
   ============================================= */
.category-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 16px;
  border-bottom: 1px solid #ececec;
  background: #fff;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs__item {
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 13px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
}
.category-tabs__item.active { color: #111; font-weight: 700; border-bottom-color: #111; }

/* =============================================
   Archive: 브랜드 슬라이더
   ============================================= */
.category-slider {
  position: relative;
  padding: 10px 0 12px;
  border-bottom: 1px solid #f0f0f0;
}
.category-slider__track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.category-slider__track::-webkit-scrollbar { display: none; }
.category-slider__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.category-slider__icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
}
.category-slider__item.active .category-slider__icon { border-color: #3d7ebf; border-width: 2px; }
.category-slider__icon img { width: 100%; height: 100%; object-fit: cover; }
.category-slider__icon span { font-size: 11px; font-weight: 700; color: #555; }
.category-slider__name { font-size: 11px; color: #3d7ebf; white-space: nowrap; }
.category-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateY(-8px);
  width: 28px;
  height: 28px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.category-slider__arrow--left { left: 4px; display: none; }
.category-slider__arrow--right { right: 4px; }
.category-slider__arrow svg { width: 14px; height: 14px; }
.category-slider__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.category-slider__fade--left { left: 0; background: linear-gradient(to right, #fff 50%, transparent); display: none; }
.category-slider__fade--right { right: 0; background: linear-gradient(to left, #fff 50%, transparent); }

/* =============================================
   Archive: 서브카테고리 아이콘 그리드
   ============================================= */
.subcat-icon-grid {
  display: flex;
  overflow-x: auto;
  gap: 0;
  padding: 12px 16px;
  scrollbar-width: none;
  border-bottom: 1px solid #f0f0f0;
}
.subcat-icon-grid::-webkit-scrollbar { display: none; }
.subcat-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 72px;
  text-decoration: none;
  color: #333;
}
.subcat-icon-item__img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background: #f5f5f5;
}
.subcat-icon-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.subcat-icon-item__name {
  font-size: 11px;
  color: #333;
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
}
.subcat-icon-item.active .subcat-icon-item__img {
  border: 2px solid #3d7ebf;
}
.subcat-icon-item.active .subcat-icon-item__name {
  color: #3d7ebf;
  font-weight: 600;
}

/* =============================================
   Archive: 토글 필터 칩
   ============================================= */
.toggle-filter-row { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.toggle-filter-row__scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}
.toggle-filter-row__scroll::-webkit-scrollbar { display: none; }
.toggle-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}
.toggle-chip.active { background: #111; border-color: #111; color: #fff; }
.toggle-chip.active .toggle-chip__icon { color: #fff !important; }
.toggle-chip__icon { width: 14px; height: 14px; }
.toggle-chip__icon--green { color: #22c55e; }
.toggle-chip__icon--purple { color: #8b5cf6; }
.toggle-chip__icon--blue { color: #3b82f6; }
.toggle-chip__icon--navy { color: #1e40af; }
.toggle-chip__icon--pink { color: #ec4899; }

/* =============================================
   Archive: 드롭다운 필터
   ============================================= */
.dropdown-filter-row { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.dropdown-filter-row__scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}
.dropdown-filter-row__scroll::-webkit-scrollbar { display: none; }
.dropdown-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.dropdown-chip svg { width: 14px; height: 14px; }
.dropdown-chip.active { border-color: #111; font-weight: 600; color: #111; }

/* =============================================
   Archive: 필터 소트 바
   ============================================= */
.filter-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
}
.filter-sort-bar__left { display: flex; gap: 12px; align-items: center; }
.filter-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #555;
  cursor: pointer;
}
.filter-checkbox-inline input { display: none; }
.filter-checkbox-inline__box {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.filter-checkbox-inline input:checked + .filter-checkbox-inline__box {
  background: #111;
  border-color: #111;
}
.filter-checkbox-inline input:checked + .filter-checkbox-inline__box::after {
  content: '✓';
  font-size: 10px;
  color: #fff;
}
.filter-sort-bar__sort {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
}
.filter-sort-bar__sort svg { width: 14px; height: 14px; }

/* =============================================
   Archive: 상품 그리드
   ============================================= */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #f0f0f0;
}
.product-grid::after {
  content: '';
  background: #fff;
}
.product-grid .product-card {
  background: #fff;
  padding: 12px 10px;
  text-decoration: none;
  display: block;
}
.product-grid .product-card__img {
  position: relative;
  aspect-ratio: 1/1;
  background: #f9f9f9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.product-grid .product-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.product-card__badge-item {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.product-card__badge--new { background: #18181b; color: #fff; }
.product-card__badge--hot { background: #ef4444; color: #fff; }
.product-card__info { padding: 0 2px; }
.product-grid .product-card__brand { display: block; font-size: 13px; font-weight: 700; color: #111; margin-bottom: 5px; }
.product-grid .product-card__name-en {
  font-size: 15px;
  color: #333;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__name {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__price-area { display: flex; flex-direction: column; gap: 2px; }
.product-card__retail { font-size: 11px; color: #999; }
.product-card__price-row { display: flex; align-items: center; gap: 6px; }
/* 가격 강조는 .product-grid 전용이라, 찜·전시·최근본 그리드에도 폴백 보장 */
.product-grid .product-card__price,
.wl-grid .product-card__price,
.exhibition-products__grid .product-card__price,
.rc-grid .product-card__price { font-size: 14px; font-weight: 700; color: #111; display: block; }
.product-card__buy { font-size: 10px; color: #999; }

/* =============================================
   Archive: 페이지네이션
   ============================================= */
.shop-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 24px 16px;
}
.shop-pagination .page-numbers {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ececec;
  border-radius: 8px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
}
.shop-pagination .page-numbers.current {
  background: #111;
  border-color: #111;
  color: #fff;
  font-weight: 700;
}

/* =============================================
   Archive: 정렬 모달
   ============================================= */
.sort-modal { display: none; position: fixed; inset: 0; z-index: 9000; }
.sort-modal.open { display: block; }
.sort-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.sort-modal__content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sort-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.sort-modal__title { font-size: 16px; font-weight: 700; }
.sort-modal__close { background: none; border: none; cursor: pointer; }
.sort-modal__close svg { width: 20px; height: 20px; }
.sort-modal__list { padding: 0 0 20px; }
.sort-modal__item {
  display: block;
  width: 100%;
  padding: 14px 20px;
  text-align: left;
  background: none;
  border: none;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.sort-modal__item.active { color: #111; font-weight: 700; }

/* =============================================
   Archive: 필터 모달
   ============================================= */
.filter-modal { display: none; position: fixed; inset: 0; z-index: 9000; }
.filter-modal.open { display: block; }
.filter-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.filter-modal__content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.filter-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  flex-shrink: 0;
}
.filter-modal__title { font-size: 16px; font-weight: 700; }
.filter-modal__close { background: none; border: none; cursor: pointer; }
.filter-modal__close svg { width: 20px; height: 20px; }
.filter-tabs {
  display: flex;
  border-bottom: 1px solid #ececec;
  padding: 0 20px;
  flex-shrink: 0;
}
.filter-tab {
  padding: 12px 14px;
  font-size: 13px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.filter-tab.active { color: #111; font-weight: 700; border-bottom-color: #111; }
.filter-modal__body { overflow-y: auto; flex: 1; }
.filter-section { display: none; padding: 16px; }
.filter-section.active { display: block; }
.category-group { margin-bottom: 20px; }
.category-group__title { display: block; font-size: 13px; font-weight: 600; color: #111; margin-bottom: 10px; }
.category-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.category-chip {
  padding: 6px 14px;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  font-size: 12px;
  color: #555;
  background: #fff;
  cursor: pointer;
}
.category-chip.active { background: #111; border-color: #111; color: #fff; }
.filter-modal__footer {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  border-top: 1px solid #ececec;
  flex-shrink: 0;
}
.filter-modal__reset {
  flex: 1;
  padding: 14px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.filter-modal__apply {
  flex: 2;
  padding: 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* =============================================
   Page: Mypage – 헤더
   ============================================= */
.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid #ececec;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.mp-header__back {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mp-header__title { font-size: 16px; font-weight: 700; color: #111; }
.mp-header__actions { display: flex; align-items: center; gap: 12px; }
.mp-header__icon { color: #27272a; display: flex; align-items: center; position: relative; text-decoration: none; }
.mp-header__cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   Page: Mypage – 이벤트 배너
   ============================================= */
.mp-event-banner {
  display: block;
  text-decoration: none;
  margin: 12px 16px 8px;
}
.mp-event-banner__inner {
  background: linear-gradient(135deg, #f15746, #ff8a3d);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mp-event-banner__sub { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 3px; }
.mp-event-banner__title { font-size: 14px; font-weight: 700; color: #fff; }
.mp-event-banner__badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #f15746;
  font-size: 11px;
  font-weight: 700;
}

/* =============================================
   Page: Mypage – 비로그인 배너
   ============================================= */
.mp-login-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}
.mp-login-banner__title { font-size: 16px; font-weight: 700; color: #111; line-height: 1.4; margin-bottom: 4px; }
.mp-login-banner__sub { font-size: 12px; color: #999; }
.mp-login-banner__btn {
  flex-shrink: 0;
  padding: 10px 20px;
  background: #111;
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* =============================================
   Page: Mypage – 로그인 상태 유저 정보
   ============================================= */
.mp-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.mp-user-info__avatar-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.mp-user-info__text { flex: 1; }
.mp-user-info__name { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 2px; }
.mp-user-info__email { font-size: 12px; color: #999; }
.mp-user-info__edit {
  margin-left: auto;
  font-size: 12px;
  color: #666;
  padding: 6px 12px;
  border: 1px solid #ececec;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
/* 주문/배송 현황 (8단계) — 마이페이지 위젯 */
.mp-os {
  padding: 20px 16px 22px;
  border-bottom: 8px solid #f5f5f5;
}
.mp-os__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.mp-os__title { font-size: 15px; font-weight: 700; color: #111; }
.mp-os__more { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: #111; text-decoration: none; }
.mp-os__grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 22px; }
.mp-os__cell { position: relative; text-align: center; text-decoration: none; }
.mp-os__cell:not(:nth-child(4n))::after {
  content: ''; position: absolute; top: 11px; right: 0;
  width: 9px; height: 1px; background: #ededed; transform: translateX(50%);
}
.mp-os__num { display: block; font-size: 22px; font-weight: 800; color: #111; letter-spacing: -0.5px; line-height: 1; }
.mp-os__num.is-zero { color: #d4d4d4; }
.mp-os__label { display: block; margin-top: 8px; font-size: 11.5px; color: #888; white-space: nowrap; }
.mp-os__cell--insp .mp-os__label { color: var(--color-gold); font-weight: 600; }

/* =============================================
   Page: Mypage – 빠른 메뉴
   ============================================= */
.mp-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px 0;
  border-bottom: 8px solid #f5f5f5;
}
.mp-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  text-decoration: none;
  font-size: 11px;
  color: #333;
}
.mp-quick-action__icon {
  width: 44px;
  height: 44px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-quick-action__icon svg { width: 20px; height: 20px; color: #333; }

/* =============================================
   Page: Mypage – 구분선 / 메뉴 섹션
   ============================================= */
.mp-divider { height: 8px; background: #f5f5f5; }
.mp-menu-section { padding: 20px 0 8px; }
.mp-menu-section__title {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.5px;
  padding: 0 16px;
  margin-bottom: 4px;
}
.mp-menu-list { display: flex; flex-direction: column; }
.mp-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
  color: #111;
  border-bottom: 1px solid #f8f8f8;
}
.mp-menu-item svg { width: 16px; height: 16px; color: #ccc; flex-shrink: 0; }

/* =============================================
   Page: Mypage – 푸터
   ============================================= */
.mp-footer {
  padding: 24px 16px 40px;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
}
.mp-footer__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mp-footer__row a { font-size: 12px; color: #999; text-decoration: none; }
.mp-footer__row span { font-size: 12px; color: #ccc; }
.mp-footer__copyright { font-size: 11px; color: #ccc; }

/* =============================================
   Page: Login
   ============================================= */
.login-header {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
}
.login-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #111;
}

.login-brand {
  padding: 32px 24px 40px;
  text-align: center;
}
.login-brand a { text-decoration: none; color: inherit; }
.login-brand__logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #111;
  margin: 0 0 6px;
}
.login-brand__slogan {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.04em;
  margin: 0;
}

.login-form-wrap {
  padding: 0 24px;
}
.login-error {
  background: #fff5f5;
  border: 1px solid #ffc0c0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #e53935;
  margin-bottom: 20px;
}

.login-field {
  margin-bottom: 16px;
}
.login-field__label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 500;
}
.login-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-field__input {
  width: 100%;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 15px;
  color: #111;
  background: #fafafa;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.login-field__input:focus {
  border-color: #111;
  background: #fff;
}
.login-field--password .login-field__input {
  padding-right: 44px;
}
.login-field__eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #bbb;
  display: flex;
  align-items: center;
}

.login-btn {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  background: #e0e0e0;
  color: #aaa;
}
.login-btn:not(:disabled) {
  background: #111;
  color: #fff;
  cursor: pointer;
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.login-links a {
  font-size: 13px;
  color: #666;
  text-decoration: none;
}
.login-links__divider {
  font-size: 12px;
  color: #ddd;
}

.login-policy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  padding-bottom: 40px;
}
.login-policy a {
  font-size: 11px;
  color: #bbb;
  text-decoration: none;
}

/* =============================================
   Page: Single Product
   ============================================= */

/* 헤더 */
.pd-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  height: 48px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  transition: box-shadow 0.3s;
}
.pd-header.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.pd-header__btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: #111;
  border-radius: 8px; text-decoration: none;
}
.pd-header__actions { display: flex; align-items: center; gap: 2px; }
.pd-header__cart-count {
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px;
  background: #111; color: #fff;
  border-radius: 50%; font-size: 8px;
  display: flex; align-items: center; justify-content: center;
}

/* 갤러리 */
.pd-gallery { position: relative; }
.pd-gallery__swiper { width: 100%; aspect-ratio: 1/1; }
.pd-gallery__slide {
  width: 100%; height: 100%;
  background: #f9f9f9;
  display: flex; align-items: center; justify-content: center;
}
.pd-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery__controls { padding: 8px 12px; background: #fff; }
.pd-gallery__thumbs { display: flex; gap: 6px; }
.pd-gallery__thumb {
  width: 52px; height: 52px;
  border-radius: 6px; overflow: hidden;
  border: 1.5px solid transparent;
  background: #f5f5f5; cursor: pointer; padding: 0; flex-shrink: 0;
}
.pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-gallery__thumb.active { border-color: #111; }
.pd-gallery__thumb--more {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #555; background: #f0f0f0;
}
.pd-gallery__badge {
  position: absolute; bottom: 68px; left: 12px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border-radius: 20px; padding: 5px 10px;
  font-size: 11px; font-weight: 600; color: #059669;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

/* 상품 정보 */
.pd-info { padding: 16px 16px 0; }
.pd-info__brand-row {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 6px;
}
.pd-info__brand { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pd-info__brand > span:first-child { font-weight: 700; color: #111; }
.pd-info__category {
  font-size: 11px; color: #888;
  background: #f5f5f5; border-radius: 4px; padding: 2px 8px;
}
.pd-info__name { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 4px; line-height: 1.4; }
.pd-info__name-en { font-size: 12px; color: #999; margin-bottom: 10px; }
.pd-info__retail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pd-info__retail { font-size: 12px; color: #999; text-decoration: line-through; }
.pd-info__savings { font-size: 11px; color: #b91c1c; }
.pd-info__price-box { margin-bottom: 12px; }
.pd-info__price { font-size: 22px; font-weight: 800; color: #111; }
.pd-info__stats-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 9px 0; margin-bottom: 12px;
  border-top: 0.5px solid #eee; border-bottom: 0.5px solid #eee;
  font-size: 12px; color: #888;
}
.pd-info__stats-bar strong { color: #333; }
.pd-info__dot { color: #ddd; }
.pd-stats { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 12px; color: #888; }
.pd-stat { display: flex; align-items: center; gap: 4px; }
.pd-stat strong { color: #333; }
.pd-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pd-benefit {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #555;
  background: #f8f8f8; border-radius: 6px; padding: 5px 10px;
}
.pd-spec-table { border-top: 1px solid #f0f0f0; margin-bottom: 0; }
.pd-spec-table__row {
  display: flex; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #f8f8f8;
}
.pd-spec-table__label { width: 70px; flex-shrink: 0; font-size: 12px; color: #999; }
.pd-spec-table__value { font-size: 13px; color: #222; }
.pd-spec-table__value--link {
  color: #555; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}

/* 검수 섹션 */
.pd-qc { padding: 20px 0; border-top: 8px solid #f5f5f5; }
.pd-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; margin-bottom: 12px;
}
.pd-section-title { font-size: 15px; font-weight: 700; color: #111; }
.pd-section-title__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: #111; color: #fff;
  border-radius: 50%; font-size: 10px; font-weight: 700; margin-left: 6px;
}
.pd-qc__scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none;
}
.pd-qc__scroll::-webkit-scrollbar { display: none; }
.pd-qc__card { flex-shrink: 0; width: 100px; }
.pd-qc__img {
  width: 100px; height: 100px;
  border-radius: 8px; overflow: hidden; background: #f5f5f5; margin-bottom: 6px;
}
.pd-qc__img img { width: 100%; height: 100%; object-fit: cover; }
.pd-qc__label { font-size: 10px; color: #888; }

/* 검수 탭 그리드 */
.pd-qc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0;
}
.pd-qc-grid__item { display: flex; flex-direction: column; gap: 4px; }
.pd-qc-grid__img { aspect-ratio: 1/1; overflow: hidden; background: #f5f5f5; }
.pd-qc-grid__img img { width: 100%; height: 100%; object-fit: cover; }

/* 옵션 */
.pd-options { padding: 16px; border-top: 8px solid #f5f5f5; }
.pd-option-group { margin-bottom: 16px; }
.pd-option-label {
  font-size: 13px; font-weight: 600; color: #111; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pd-option-label__selected { font-weight: 400; color: #888; }
.pd-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-size-display { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid #eee; border-radius: 8px; }
.pd-size-display__label { font-size: 13px; color: #888; }
.pd-size-display__value { font-size: 14px; font-weight: 600; color: #111; }
.pd-color {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
}
.pd-color__swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px #ddd;
}
.pd-color.active .pd-color__swatch { box-shadow: 0 0 0 2px #111; }
.pd-color__name { font-size: 10px; color: #555; }
.pd-size-select {
  width: 100%; padding: 12px 14px;
  border: 1px solid #ececec; border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: #fafafa; cursor: pointer; font-size: 13px; color: #888;
}
.pd-size-select.selected { border-color: #111; color: #111; }

/* 사이즈 바텀시트 */
.size-sheet { display: none; position: fixed; inset: 0; z-index: 9000; }
.size-sheet.open { display: block; }
.size-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.size-sheet__content {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 600px;
  background: #fff; border-radius: 20px 20px 0 0; padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.size-sheet__header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; font-weight: 700; margin-bottom: 16px;
}
.size-sheet__header button { background: none; border: none; font-size: 18px; cursor: pointer; }
.size-sheet__options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-option {
  padding: 10px 20px; border: 1px solid #ececec; border-radius: 8px;
  background: #fff; font-size: 14px; cursor: pointer;
}
.size-option.selected { border-color: #111; font-weight: 700; }
.size-option.sold-out { opacity: 0.4; }
.size-option__sold { font-size: 10px; color: #999; margin-left: 4px; }

/* 주문하기 모달 (buy-modal) — 하단 슬라이드업 오버레이 */
.buy-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9500; }
.buy-modal-overlay.open { display: block; }
.buy-modal-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.buy-modal {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom));
  animation: buyModalUp 0.25s ease;
}
@keyframes buyModalUp {
  from { transform: translate(-50%, 100%); }
  to   { transform: translate(-50%, 0); }
}
.buy-modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.buy-modal__header h3 { font-size: 17px; font-weight: 700; margin: 0; }
.buy-modal__close { background: none; border: none; padding: 4px; cursor: pointer; color: #111; line-height: 0; }
.buy-modal__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.buy-modal__product { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.buy-modal__image { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: #f5f5f5; }
.buy-modal__info { flex: 1; min-width: 0; }
.buy-modal__brand { font-size: 12px; font-weight: 700; color: #111; margin: 0 0 2px; }
.buy-modal__name { font-size: 13px; color: #555; margin: 0 0 8px; line-height: 1.4; }
.buy-modal__options { display: flex; flex-wrap: wrap; gap: 6px; }
.buy-modal__options span { font-size: 11px; color: #666; background: #f5f5f5; padding: 2px 8px; border-radius: 4px; }
.buy-modal__grade { background: #111; color: #fff; }

.buy-modal__quantity { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.buy-modal__quantity-label { font-size: 14px; font-weight: 600; color: #111; }
.buy-modal__quantity-control { display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.buy-modal__quantity-control button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #fff; border: none; cursor: pointer; color: #111; }
.buy-modal__quantity-control button:disabled { color: #ccc; cursor: not-allowed; }
.buy-modal__quantity-control button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.buy-modal__quantity-control > span { min-width: 40px; text-align: center; font-size: 14px; font-weight: 600; }

.buy-modal__price-section { padding: 16px 0; }
.buy-modal__price-row { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-bottom: 10px; }
.buy-modal__free { color: #059669; font-weight: 600; }
.buy-modal__price-total { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.buy-modal__price-total > span:first-child { font-size: 15px; font-weight: 700; color: #111; }
.buy-modal__total-price { font-size: 18px; font-weight: 800; color: #111; }

.buy-modal__actions { display: flex; gap: 8px; margin-top: 8px; }
.buy-modal__btn { padding: 15px; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; }
.buy-modal__btn--secondary { flex: 0 0 38%; background: #fff; border: 1px solid #ddd; color: #111; }
.buy-modal__btn--primary { flex: 1; background: #111; color: #fff; }

/* 탭 */
.pd-tabs {
  position: sticky; top: 48px; z-index: 90;
  background: #fff; border-bottom: 1px solid #ececec;
}
.pd-tabs__list { display: flex; }
.pd-tabs__item {
  flex: 1; padding: 12px 4px; font-size: 13px; color: #999;
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.pd-tabs__item.active { color: #111; font-weight: 700; border-bottom-color: #111; }
.pd-tabs__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #f0f0f0; border-radius: 8px; font-size: 10px; color: #666;
}
.pd-tabs__item.active .pd-tabs__badge { background: #111; color: #fff; }

/* 탭 콘텐츠 */
.pd-tab-content { display: none; padding: 16px; }
.pd-tab-content.active { display: block; }

/* About This Item */
.pd-seo-description { margin-bottom: 24px; }
.pd-seo-description__header h4 { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 10px; }
.pd-seo-description__content { font-size: 13px; color: #555; line-height: 1.7; }
.pd-seo-description__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pd-seo-tag { font-size: 11px; color: #888; background: #f5f5f5; border-radius: 4px; padding: 3px 8px; }

/* 상세 이미지 */
.pd-detail-images { margin-bottom: 24px; }
.pd-detail-images__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pd-detail-images__header h3 { font-size: 14px; font-weight: 700; }
.pd-detail-images__header span { font-size: 12px; color: #999; }
.pd-detail-images__more {
  display: flex; justify-content: center; padding: 40px 0 16px;
  background: linear-gradient(rgba(255,255,255,0) 0%, #fff 70%);
  margin-top: -40px;
}
.pd-detail-images__more button {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 24px; border-radius: 24px;
  border: 1px solid #ddd; background: #fff;
  font-size: 13px; font-weight: 600; color: #333; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.pd-detail-images__more button span { font-size: 12px; color: #999; }

/* 안내사항 */
.pd-notice { background: #fafafa; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.pd-notice__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #111; margin-bottom: 10px;
}
.pd-notice__list { padding-left: 16px; }
.pd-notice__list li { font-size: 12px; color: #666; line-height: 1.8; }

/* 리뷰 */
.pd-review-item { padding: 16px 0; border-bottom: 1px solid #f5f5f5; }
.pd-review-item__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pd-review-item__stars { display: flex; gap: 2px; }
.pd-review-item__date { font-size: 11px; color: #aaa; margin-left: auto; }
.pd-review-item__author { font-size: 12px; color: #555; margin-bottom: 6px; }
.pd-review-item__content { font-size: 13px; color: #333; line-height: 1.6; }
.pd-review-summary { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #fafafa; border-radius: 12px; margin-bottom: 8px; }
.pd-review-summary__score { display: flex; align-items: center; gap: 10px; }
.pd-review-summary__score strong { font-size: 26px; font-weight: 800; color: #18181b; }
.pd-review-summary__stars { display: flex; gap: 2px; }
.pd-review-summary__count { font-size: 13px; color: #6b7280; font-weight: 600; }
.pd-review-item__verified { display: inline-block; margin-left: 6px; padding: 1px 7px; background: #eef2ff; color: #4f46e5; border-radius: 999px; font-size: 10px; font-weight: 700; vertical-align: middle; }
.pd-review-item__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pd-review-item__photo { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: #f3f4f6; display: block; }
.pd-review-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 배송 정보 */
.pd-delivery-info__section { margin-bottom: 20px; }
.pd-delivery-info__section h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.pd-delivery-info__section ul { padding-left: 16px; }
.pd-delivery-info__section li { font-size: 13px; color: #555; line-height: 1.8; }

/* 하단 바 */
.pd-bottom-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 600px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #ececec; z-index: 999;
}
.pd-bottom-bar__icon-btn {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ececec; border-radius: 10px;
  background: #fff; cursor: pointer; color: #333;
}
.pd-bottom-bar__icon-btn.wishlisted svg { fill: #ef4444; stroke: #ef4444; }

/* 상품 카드 찜 버튼 */
.product-card__img { position: relative; }
.product-card__wish {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); border: none; border-radius: 50%;
  cursor: pointer; color: #999; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); z-index: 2;
}
.product-card__wish svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.product-card__wish.wishlisted svg { fill: #ef4444; stroke: #ef4444; }
.product-card__wish:active { transform: scale(0.9); }

.pd-bottom-bar__cart {
  flex: 1; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid #111; border-radius: 10px;
  background: #fff; color: #111; font-size: 14px; font-weight: 600; cursor: pointer;
}
.pd-bottom-bar__buy {
  flex: 1; height: 48px;
  background: #111; color: #fff;
  border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}

/* 아코디언 정보 카드 */
.pd-info-cards { margin-top: 12px; border-top: 1px solid #f0f0f0; }
.pd-info-card { border-bottom: 1px solid #f0f0f0; }
.pd-info-card__header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; background: none; border: none; cursor: pointer; text-align: left;
}
.pd-info-card__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #111;
}
.pd-info-card__icon {
  flex-shrink: 0; color: #aaa;
  transition: transform 0.2s;
}
.pd-info-card__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.pd-info-card.open .pd-info-card__body { max-height: 400px; }
.pd-info-card.open .pd-info-card__icon { transform: rotate(180deg); }
.pd-info-card__content { padding-bottom: 14px; }
.pd-info-card__list { padding-left: 16px; }
.pd-info-card__list li { font-size: 12px; color: #666; line-height: 1.9; }

/* AI 추천 / 코디 */
.pd-ai-section {
  padding: 24px 0;
  border-top: 8px solid #f5f5f5;
}
.pd-ai-section__header {
  padding: 0 16px;
  margin-bottom: 14px;
}
.pd-ai-section__title-wrap {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.pd-ai-section__badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #111; color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
  border-radius: 4px; padding: 2px 6px;
}
.pd-ai-section__badge--coord {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.pd-ai-section__title {
  font-size: 15px; font-weight: 700; color: #111;
}
.pd-ai-section__sub {
  font-size: 11px; color: #aaa;
}

/* 추천 상품 가로 스크롤 */
.pd-ai-section__scroll {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 0 16px; scrollbar-width: none;
}
.pd-ai-section__scroll::-webkit-scrollbar { display: none; }
.pd-ai-card {
  flex-shrink: 0; width: 120px;
  text-decoration: none; color: inherit;
}
.pd-ai-card__img {
  width: 120px; height: 120px;
  border-radius: 8px; overflow: hidden;
  background: #f5f5f5; margin-bottom: 7px;
}
.pd-ai-card__img img { width: 100%; height: 100%; object-fit: cover; }
.pd-ai-card__no-img { width: 100%; height: 100%; background: #eee; }
.pd-ai-card__brand { font-size: 10px; color: #999; margin-bottom: 3px; font-weight: 600; }
.pd-ai-card__name { font-size: 11px; color: #333; margin-bottom: 4px; line-height: 1.4; }
.pd-ai-card__price { font-size: 12px; font-weight: 700; color: #111; }

/* 코디 추천 2열 그리드 */
.pd-coord-section { }
.pd-coord-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: #f0f0f0;
}
.pd-coord-card { background: #fff; text-decoration: none; color: inherit; }
.pd-coord-card__img {
  aspect-ratio: 1/1; overflow: hidden; background: #f5f5f5;
}
.pd-coord-card__img img { width: 100%; height: 100%; object-fit: cover; }
.pd-coord-card__brand { font-size: 10px; color: #999; padding: 6px 8px 2px; font-weight: 600; }
.pd-coord-card__name { font-size: 11px; color: #333; padding: 0 8px 3px; line-height: 1.3; }
.pd-coord-card__price { font-size: 12px; font-weight: 700; color: #111; padding: 0 8px 10px; }

/* 토스트 */
.pd-toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 10px 20px; border-radius: 20px;
  font-size: 13px; opacity: 0; transition: all 0.3s;
  z-index: 9999; white-space: nowrap;
}
.pd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================
   Ranking Section (PRD 05)
   ============================================= */
.ranking-section { }
.ranking-section__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 20px 16px 12px;
}
.ranking-section__title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 3px; }
.ranking-section__time { font-size: 11px; color: #aaa; }
.ranking-section__more { font-size: 12px; color: #666; text-decoration: none; }

/* product-card 랭킹 번호 배지 */
.product-card__rank {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 12px; font-weight: 800;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
}
.ranking-tabs {
  display: flex; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; gap: 6px;
}
.ranking-tabs::-webkit-scrollbar { display: none; }
.ranking-tab {
  flex-shrink: 0; padding: 6px 14px;
  border: 1px solid #ececec; border-radius: 20px;
  background: #fff; font-size: 13px; color: #666; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ranking-tab.active { background: #111; color: #fff; border-color: #111; }

/* 랭킹 가로 스크롤 슬라이더 */
/* 하단 패딩: "즉시구매가" 글자가 아래 섹션 구분 박스와 붙지 않도록 여백 확보 */
.ranking-swiper { padding-bottom: 20px; position: relative; }

/* 랭킹 좌우 네비 버튼 (원형 오버레이) — PC(마우스)에서만 노출, 터치기기는 숨김 */
.ranking-nav {
  display: none;            /* 기본(모바일/터치) 숨김 */
  position: absolute;
  top: 50%;
  /* 하단 padding-bottom(20px) 보정: 섹션 시각 중앙(카드 쪽)에 맞춤 */
  transform: translateY(-50%) translateY(-10px);
  width: 36px; height: 36px;
  padding: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #222;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  transition: background 0.15s, box-shadow 0.15s;
}
.ranking-nav:hover { background: #f7f7f7; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
.ranking-nav svg { width: 18px; height: 18px; display: block; }
.ranking-nav--prev { left: 8px; }
.ranking-nav--next { right: 8px; }

@media (hover: hover) and (pointer: fine) {
  .ranking-nav { display: flex; }
  /* 시작점=왼쪽 숨김, 끝점=오른쪽 숨김, 스크롤 불필요 시 둘 다 숨김 */
  .ranking-nav.swiper-button-disabled,
  .ranking-nav.swiper-button-lock { display: none; }
}
.ranking-swiper .product-card {
  display: block; text-decoration: none;
  background: #fff;
}
.ranking-swiper .product-card__img {
  position: relative;
  aspect-ratio: 1/1;
  background: #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ranking-swiper .product-card__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.ranking-swiper .product-card__info { padding: 0 2px; }
.ranking-swiper .product-card__brand {
  display: block; font-size: 11px; font-weight: 700; color: #111; margin-bottom: 3px;
}
.ranking-swiper .product-card__name {
  font-size: 12px; color: #111; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 6px;
}
.ranking-swiper .product-card__retail { font-size: 10px; color: #bbb; }
.ranking-swiper .product-card__price { font-size: 13px; font-weight: 700; color: #111; display: block; }
.ranking-swiper .product-card__buy { font-size: 10px; color: #999; }
.ranking-list { padding: 0 16px; }
.ranking-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #f5f5f5;
  text-decoration: none; color: inherit;
}
.ranking-item:last-child { border-bottom: none; }
.ranking-item__rank {
  width: 22px; flex-shrink: 0; text-align: center;
  font-size: 14px; font-weight: 600; color: #bbb;
}
.ranking-item__rank--top { color: #111; font-size: 16px; font-weight: 800; }
.ranking-item__img {
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: #f5f5f5;
}
.ranking-item__img img { width: 100%; height: 100%; object-fit: cover; }
.ranking-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ranking-item__brand { font-size: 11px; color: #999; font-weight: 600; }
.ranking-item__name {
  font-size: 13px; color: #111; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ranking-item__price { font-size: 13px; font-weight: 700; color: #111; }
.ranking-item__arrow { color: #ccc; flex-shrink: 0; }

/* =============================================
   리뷰 리스팅 (/review) — rv-*
   ============================================= */
.rv-grid-section { padding: 16px 0 32px; }

.rv-grid-header {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 16px 14px;
}
.rv-grid-title { font-size: 16px; font-weight: 700; color: #111; }
.rv-grid-count { font-size: 12px; color: #999; }

.rv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 10px; padding: 0 16px;
}

/* 카드 */
.rv-card {
  display: block; color: inherit; text-decoration: none;
  opacity: 0; transform: translateY(8px);
  animation: rvFadeUp .4s ease forwards;
}
@keyframes rvFadeUp { to { opacity: 1; transform: translateY(0); } }

.rv-card__media {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  border-radius: 10px; background: var(--color-gray-light);
}
.rv-card__media img,
.rv-card__media video { width: 100%; height: 100%; object-fit: cover; }

/* 좌상단 미디어 타입 배지 (+N / 영상) */
.rv-card__type {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 6px; border-radius: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1;
}
.rv-card__type svg { display: block; }

/* 우상단 좋아요 */
.rv-card__likes {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 12px;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}
.rv-card__likes svg { color: #ff5a72; }

/* 영상 재생 오버레이 */
.rv-card__play {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4); pointer-events: none;
}
.rv-card__play svg { margin-left: 2px; }

/* 본문 */
.rv-card__body { padding: 9px 2px 0; }
.rv-card__rating { display: flex; align-items: center; gap: 1px; }
.rv-card__rating svg { display: block; }
.rv-card__date { font-size: 10px; color: #bbb; margin-left: 5px; }

.rv-card__product {
  margin: 6px 0 4px; font-size: 12px; font-weight: 600; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-card__content {
  font-size: 12px; line-height: 1.45; color: #666;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 10px;
}

/* 리뷰어 */
.rv-card__reviewer { display: flex; align-items: center; gap: 7px; }
.rv-card__avatar {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-gray-light); color: #888;
  font-size: 11px; font-weight: 600;
}
.rv-card__reviewer-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rv-card__name { font-size: 11px; color: #777; font-weight: 500; }
.rv-card__body-info { font-size: 10px; color: #aaa; }

/* 더보기 버튼 */
.rv-load-more { display: flex; justify-content: center; padding: 24px 16px 0; }
.rv-load-more__btn {
  width: 100%; max-width: 280px; padding: 13px 20px;
  border: 1px solid var(--color-gray-border); border-radius: 8px;
  background: #fff; color: #333; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.rv-load-more__btn:hover { background: var(--color-gray-light); border-color: #ddd; }

/* =============================================
   기획전 (Promotion)
   ============================================= */
.promotion-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}
.promotion-list--ended { padding-bottom: 88px; }

.promotion-card { display: block; text-decoration: none; color: inherit; }

.promotion-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f2;
}
.promotion-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.promotion-card__overlay {
  position: absolute;
  inset: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0) 100%);
}
.promotion-card__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
}
.promotion-card__title {
  font-size: 14px; font-weight: 700; line-height: 1.35;
  color: #fff; margin: 0 0 4px;
}
.promotion-card__desc { font-size: 11px; color: rgba(255,255,255,0.75); margin: 0; }

.promotion-card__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: #e3342f;
}

.promotion-card__info { padding: 8px 2px 0; }
.promotion-card__info h4 {
  font-size: 13px; font-weight: 600; color: #222;
  margin: 0 0 3px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.promotion-card__info p { font-size: 11px; color: #999; margin: 0; }

/* 종료된 기획전 */
.promotion-section-title {
  font-size: 15px; font-weight: 700; color: #222;
  padding: 20px 16px 4px;
  border-top: 8px solid #f5f5f5;
  margin-top: 8px;
}
.promotion-card--ended .promotion-card__img img { filter: grayscale(1) brightness(0.82); }
.promotion-card--ended .promotion-card__badge { background: #888; }

/* 종료 안내 모달 */
.ended-modal {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
  padding: 32px;
}
.ended-modal.open { display: flex; }
.ended-modal__content {
  width: 100%; max-width: 300px;
  background: #fff; border-radius: 16px;
  padding: 28px 24px 20px; text-align: center;
}
.ended-modal__icon { width: 48px; height: 48px; margin: 0 auto 14px; color: #888; }
.ended-modal__icon svg { width: 100%; height: 100%; }
.ended-modal__title { font-size: 16px; font-weight: 700; color: #222; margin: 0 0 8px; }
.ended-modal__desc { font-size: 13px; color: #777; line-height: 1.5; margin: 0 0 20px; }
.ended-modal__btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: #111; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* =============================================
   "더보기" 상품 리스트 페이지 (랭킹 / MD PICK / HIGHEND 등)
   ============================================= */
.listing-page { padding-bottom: 80px; }
.listing-page__header { padding: 18px 16px 10px; }
.listing-page__title { font-size: 18px; font-weight: 800; color: #111; margin: 0; }
.listing-page__time { font-size: 12px; color: #999; margin: 4px 0 0; }

/* =============================================
   리뷰 상세 뷰어 (/review/?rid=N) — rvd-*
   ============================================= */
.mobile-wrap--flush { padding-top: 0; }

.rvd { background: #f8f8f8; min-height: 100vh; padding-bottom: 150px; }

/* 미니 헤더 */
.rvd-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 16px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid #f0f0f0;
}
.rvd-topbar__title { font-size: 15px; font-weight: 700; color: #111; }
.rvd-topbar__btn {
  position: absolute; padding: 8px; background: none; border: none;
  color: #111; cursor: pointer; display: flex;
}
.rvd-topbar__back { left: 8px; }
.rvd-topbar__share { right: 8px; color: #888; }

/* 상품 링크 카드 */
.rvd-product {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: #fff; text-decoration: none; color: inherit;
}
.rvd-product:active { background: #fafafa; }
.rvd-product__img {
  width: 56px; height: 56px; flex-shrink: 0;
  object-fit: cover; border-radius: 12px; border: 1px solid #f0f0f0;
}
.rvd-product__info { flex: 1; min-width: 0; }
.rvd-product__brand {
  font-size: 11px; color: #9ca3af; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.rvd-product__name {
  margin-top: 2px; font-size: 14px; font-weight: 500; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rvd-product__arrow { color: #d1d5db; flex-shrink: 0; }

/* 리뷰 본문 카드 */
.rvd-card { background: #fff; margin-top: 8px; }
.rvd-card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 0;
}
.rvd-avatar {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.rvd-card__meta { flex: 1; min-width: 0; }
.rvd-card__name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700; color: #111;
}
.rvd-card__bodyinfo { margin-top: 3px; font-size: 11px; color: #9ca3af; }
.rvd-card__date { font-size: 12px; color: #9ca3af; flex-shrink: 0; }
.rvd-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.rvd-badge--photo { background: #dbeafe; color: #2563eb; }
.rvd-badge--video { background: #fae8ff; color: #c026d3; }

/* 별점 */
.rvd-stars { display: flex; align-items: center; gap: 2px; padding: 12px 20px 0; }
.rvd-stars svg { display: block; }

/* 갤러리 */
.rvd-gallery { position: relative; margin-top: 14px; background: #f8f8f8; }
.rvd-gallery__track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rvd-gallery__track::-webkit-scrollbar { display: none; }
.rvd-gallery__slide {
  position: relative; flex-shrink: 0; width: 100%;
  aspect-ratio: 1/1; scroll-snap-align: start;
}
.rvd-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.rvd-gallery__play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); pointer-events: none;
}
.rvd-gallery__play svg { margin-left: 3px; }
.rvd-gallery__count {
  position: absolute; bottom: 12px; right: 12px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600;
}

/* 내용 */
.rvd-content { padding: 18px 20px; }
.rvd-content p {
  font-size: 15px; line-height: 1.7; color: #1f2937; white-space: pre-wrap;
}

/* 액션 버튼 */
.rvd-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-top: 1px solid #fafafa;
}
.rvd-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border: none; border-radius: 999px;
  background: #f3f4f6; color: #4b5563; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .2s ease, transform .1s ease;
}
.rvd-act:hover { background: #e5e7eb; }
.rvd-act:active { transform: scale(.95); }
.rvd-act--like.is-liked { background: #ffe4e6; color: #ff5a72; }
.rvd-act--like.is-liked svg { fill: #ff5a72; stroke: #ff5a72; }

/* 하단 고정 CTA (하단 네비 위) */
.rvd-cta {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 70px; width: 100%; max-width: 600px;
  padding: 0 16px 12px; z-index: 30;
  pointer-events: none;
}
.rvd-cta__btn {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; border-radius: 16px;
  background: #111; color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.rvd-cta__btn:active { transform: scale(.98); }

/* =============================================
   기획전 목록 빈 상태 (page-promotion.php)
   ============================================= */
.promotion-empty { padding: 80px 24px; text-align: center; color: #999; font-size: 14px; }

/* =============================================
   기획전 상세 (single-kb_exhibition.php)
   ============================================= */
.exhibition-detail { padding-bottom: 88px; }

/* 배너 */
.exhibition-banner { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 460px; overflow: hidden; background: #efefef; }
.exhibition-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exhibition-banner__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 48px 20px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color: #fff;
}
.exhibition-banner__label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; margin-bottom: 10px;
}
.exhibition-banner__title { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0 0 6px; }
.exhibition-banner__desc { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; }

/* 기간 / 상태 배지 */
.exhibition-info {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 15px 16px; border-bottom: 8px solid #f5f5f5;
}
.exhibition-info__period { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.exhibition-info__period svg { flex: 0 0 auto; }
.exhibition-info__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.exhibition-info__badge { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #f3e8ff; color: #7c3aed; }
.exhibition-info__badge--active { background: #dcfce7; color: #16a34a; }
.exhibition-info__badge--scheduled { background: #fef9c3; color: #ca8a04; }
.exhibition-info__badge--ended { background: #f0f0f0; color: #888; }

/* 상품 목록 */
.exhibition-products { padding: 18px 16px 0; }
.exhibition-products__header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.exhibition-products__header h3 { font-size: 16px; font-weight: 700; margin: 0; }
.exhibition-products__header span { font-size: 13px; color: #888; }
.exhibition-products__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
.exhibition-products__empty { padding: 60px 0; text-align: center; color: #999; font-size: 14px; }

/* 기획전 없음 (상세 폴백) */
.exhibition-empty { padding: 80px 24px; text-align: center; color: #999; font-size: 14px; }
.exhibition-empty__btn {
  display: inline-block; margin-top: 16px; padding: 10px 22px; border-radius: 999px;
  background: #111; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
}


/* =============================================
   검수 페이지 (page-inspection.php) — 2026-06-19 추가
   ============================================= */
/* 히어로 — 정품 검수 보증 (라이트 / 골드 씰) */
.insp-hero-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #faf7f1 100%);
  padding: 38px 24px 0; text-align: center;
  border-bottom: 1px solid #f0ece3;
}
.insp-hero__seal {
  width: 74px; height: 74px; margin: 0 auto 18px;
  border-radius: 50%; border: 1px solid rgba(201,169,110,0.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gold); position: relative;
}
.insp-hero__seal::after {
  content: ''; position: absolute; inset: 5px;
  border-radius: 50%; border: 1px solid rgba(201,169,110,0.25);
}
.insp-hero__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
  color: var(--color-gold); margin-bottom: 12px;
}
.insp-hero h1 { font-size: 23px; font-weight: 800; line-height: 1.42; letter-spacing: -0.5px; color: #111; }
.insp-hero__desc { margin-top: 14px; font-size: 13px; color: #8a8a8a; line-height: 1.65; }

.insp-stats { display: flex; padding: 28px 8px 24px; }
.insp-stats__cell { flex: 1; text-align: center; position: relative; }
.insp-stats__cell + .insp-stats__cell::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 30px; width: 1px; background: #ece6da;
}
.insp-stats__num { font-size: 22px; font-weight: 800; color: var(--color-gold); letter-spacing: -0.5px; }
.insp-stats__num small { font-size: 12px; font-weight: 700; }
.insp-stats__label { margin-top: 5px; font-size: 11px; color: #999; }

/* 카테고리 필터 칩 */
.insp-chips { display: flex; gap: 8px; padding: 18px 16px 12px; overflow-x: auto; scrollbar-width: none; }
.insp-chips::-webkit-scrollbar { display: none; }
.insp-chip {
  flex: none; padding: 8px 16px; border-radius: 20px; border: 1px solid #e5e5e5;
  font-size: 13px; background: #fff; color: #555; white-space: nowrap;
}
.insp-chip.active { background: #111; color: #fff; border-color: #111; font-weight: 600; }

/* 리스팅 툴바 */
.list-bar { display: flex; align-items: center; padding: 4px 16px 14px; }
.list-bar__count { font-size: 13px; color: #888; }
.list-bar__count b { color: #222; font-weight: 700; }

/* 검수 완료 상품 그리드 */
.insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; padding: 0 16px 8px; }
.icard { display: block; }
.icard__thumb {
  position: relative; aspect-ratio: 1/1; background: #f2f2f2;
  border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.icard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.icard__pass {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px; border-radius: 6px;
  background: #22c55e; color: #fff; font-size: 10px; font-weight: 700;
}
.icard__photos {
  position: absolute; bottom: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(20,20,20,0.7); color: #fff; font-size: 10px; font-weight: 600;
}
.icard__brand { font-size: 12px; font-weight: 700; color: #8a8a8a; letter-spacing: 0.3px; }
.icard__name {
  font-size: 14px; font-weight: 700; color: #111; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icard__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.icard__cust { font-size: 11px; color: #999; }
.icard__date { font-size: 11px; color: #bbb; }
.insp-empty { display: none; padding: 44px 16px; text-align: center; color: #aaa; font-size: 13px; }

/* 검수 프로세스 */
.insp-process { padding: 4px 16px 24px; }
.insp-step { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.insp-step:last-child { padding-bottom: 0; }
.insp-step:not(:last-child)::before {
  content: ''; position: absolute; left: 17px; top: 38px; bottom: 4px;
  width: 2px; background: #eee;
}
.insp-step__no {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #111; color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.insp-step__body { padding-top: 6px; }
.insp-step__title { font-size: 14px; font-weight: 700; color: #111; }
.insp-step__title .tag { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--color-gold); }
.insp-step__desc { margin-top: 4px; font-size: 12px; color: #888; line-height: 1.5; }

/* 하단 안내 배너 */
.insp-promise { margin: 8px 16px 0; padding: 20px; border-radius: 14px; background: #faf7f1; text-align: center; }
.insp-promise svg { color: var(--color-gold); margin: 0 auto 10px; }
.insp-promise__t { font-size: 15px; font-weight: 800; color: #111; }
.insp-promise__d { margin-top: 8px; font-size: 12px; color: #8a8276; line-height: 1.6; }


/* 검수 사진 뷰어 (오버레이) — /inspection */
.insp-viewer { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; height: 100%; background: #fff; z-index: 1100; display: none; flex-direction: column; overflow-y: auto; }
.insp-viewer.open { display: flex; }
.insp-viewer__head { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #ececec; }
.insp-viewer__title { flex: 1; min-width: 0; text-align: center; font-size: 16px; font-weight: 700; color: #111; }
.insp-viewer__spacer { flex: none; width: 34px; }
.insp-viewer__x { flex: none; width: 34px; height: 34px; border: 0; background: none; color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.insp-viewer__body { flex: 1; padding: 6px 16px 28px; }
.insp-viewer__body img { width: 100%; border-radius: 10px; margin-bottom: 8px; display: block; background: #f5f5f5; }
/* 검수 확인 뷰어 — 상품 링크 카드 */
.iv-prod { display: flex; align-items: center; gap: 13px; padding: 16px; border-bottom: 1px solid #f1f1f1; text-decoration: none; }
.iv-prod--nolink { pointer-events: none; }
.iv-prod--nolink .iv-prod__chev { visibility: hidden; }
.iv-prod__img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f5f5f5; }
.iv-prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-prod__info { flex: 1; min-width: 0; display: block; }
.iv-prod__brand { display: block; font-size: 11px; font-weight: 700; color: #9a9a9a; letter-spacing: 0.4px; text-transform: uppercase; }
.iv-prod__name { display: block; font-size: 15px; font-weight: 700; color: #111; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-prod__cat { display: inline-block; padding: 2px 9px; border-radius: 5px; background: #f1f1f1; color: #777; font-size: 11px; font-weight: 600; }
.iv-prod__chev { flex: none; color: #c8c8c8; }
/* 검수 합격 결과 */
.iv-result { display: flex; align-items: center; justify-content: space-between; margin: 16px; padding: 14px 16px; border-radius: 10px; background: #effaf3; }
.iv-result__pass { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: #16a34a; }
.iv-result__date { font-size: 13px; color: #5f9277; }
.iv-result__desc { margin: -4px 16px 18px; font-size: 12.5px; line-height: 1.65; color: #8a8a8a; }
/* 검수 사진 섹션 헤더 */
.iv-photos-head { padding: 4px 16px 10px; font-size: 13px; font-weight: 700; color: #333; }

/* 검수 카드 우하단 상품 썸네일 (PiP)
   ⚠️ 선택자에 .icard__thumb img 포함 필수: 위 `.icard__thumb img{width/height:100%}`(명세도 0,1,1)가
   더 높아 그냥 `.icard__sub`(0,1,0)면 width/height가 100%로 덮여 상품이미지가 카드 전체를 가렸음. */
.icard__thumb img.icard__sub { position: absolute; bottom: 8px; right: 8px; width: 57px; height: 57px; border-radius: 10px; border: 2px solid #fff; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.25); background: #f5f5f5; }