@charset "utf-8";

:root {
  --primary-color: #0F5C59;
}

/* ============================= 전체 기본 ============================= */
body { padding-top: 136px; }

/* ============================= 공지 바 ============================= */
.notice-bar {
  background: #000;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 201;
}
.notice-bar p {
  color: #fff;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ============================= 헤더 ============================= */
header {
  background: #fff;
  width: 100%;
  padding: 0;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

/* 1행: 로고 + 아이콘 */
.header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  height: 56px;
}
header .header_logo a { display: block; width: 175px; }

/* 2행: GNB */
.header-row2 {
  display: flex;
  align-items: center;
  padding: 0 60px;
  height: 44px;
  border-top: 1px solid #F4F4F5;
  gap: 0;
}
.gnb-toggle {
  background: none; border: none; cursor: pointer; padding: 0 16px 0 0;
  font-size: 18px; color: #333; display: flex; align-items: center;
}
.gnb-toggle:hover { color: #000; }

/* GNB 네비게이션 */
#gnb { overflow-x: auto; scrollbar-width: none; }
/* [fb-8] 데스크톱에서 하위메뉴 드롭다운이 overflow로 잘리지 않도록 (모바일은 가로스크롤 유지) */
@media (min-width: 769px) { #gnb { overflow: visible; } }
#gnb::-webkit-scrollbar { display: none; }
#gnb > ul { display: flex; align-items: center; gap: 0; white-space: nowrap; }
#gnb > ul > li { position: relative; }
#gnb > ul > li > a {
  display: block;
  color: #71717A;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 44px;
  padding: 0 14px;
  transition: color 0.2s;
}
#gnb > ul > li > a:hover,
#gnb > ul > li > a.active { color: #000; font-weight: 600; }

/* ============================= 메가메뉴 ============================= */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 199;
}
.mega-menu-inner {
  display: flex;
  padding: 24px 60px;
  min-height: 300px;
}
.mega-menu-left {
  width: 200px;
  border-right: 1px solid #F4F4F5;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mega-cat-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: all 0.15s;
}
.mega-cat-item:hover, .mega-cat-item.active {
  color: #000;
  font-weight: 700;
  background: #F9FAFB;
}
.mega-menu-right {
  flex: 1;
  padding-left: 40px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
}
.mega-sub-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 140px;
}
.mega-sub-item {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.15s;
}
.mega-sub-item:hover { color: #000; }

/* 2depth 서브메뉴 */
#gnb > ul > li .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  min-width: 160px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 300;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
#gnb > ul > li:hover .submenu { opacity: 1; visibility: visible; }
#gnb > ul > li .submenu li { display: block; width: 100%; }
#gnb > ul > li .submenu li a {
  display: block;
  color: #71717A;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#gnb > ul > li .submenu li a:hover { background: #F4F4F5; color: #000; }

/* 헤더 아이콘 */
header .header_icon > ul { display: flex; align-items: center; gap: 20px; }
header .header_icon > ul > li { position: relative; }
header .header_icon > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717A;
  font-size: 17px;
  transition: color 0.2s;
}
header .header_icon > ul > li > a:hover { color: var(--primary-color, #000); }
header .header_icon > ul > li.hicon_profile { position: relative; }
header .header_icon > ul > li.hicon_profile > a {
  display: flex; align-items: center; gap: 3px;
}

/* ============================= 헤더 드롭다운 - 알림 ============================= */
.h_alarm { position: relative; }
.h_alarm > a { position: relative; overflow: visible; }
.h_alarm .notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(58%, -50%);
  background: #E53639; color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 0 4px; border-radius: 999px;
  min-width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}
.h_alarm .ha_menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(360px, 90vw);
  background: #fff;
  border: 1px solid #E4E4E7; border-radius: 12px;
  z-index: 500; padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.h_alarm .ha_menu .ha_menu_header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 12px;
}
.h_alarm .ha_menu .ha_menu_header p { color: #18181B; font-size: 15px; font-weight: 700; }
.h_alarm .ha_menu .ha_menu_divider { height: 1px; background: #E4E4E7; }
.h_alarm .ha_menu .ha_menu_option { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.h_alarm .ha_menu .ha_menu_option button { color: #A1A1AA; font-size: 14px; }
.h_alarm .ha_menu .ha_menu_option button:hover { color: #18181B; }
.h_alarm .ha_list {
  display: flex; flex-direction: column;
  gap: 4px; padding-top: 12px;
  max-height: 400px; overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.h_alarm .ha_list::-webkit-scrollbar { display: none; }
.h_alarm .ha_list .ha_list_box {
  width: 100%; border: 1px solid #E4E4E7; border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.h_alarm .ha_list .ha_list_box a { display: block; width: 100%; padding: 12px 14px; }
.h_alarm .ha_list .ha_list_box .ha_list_type {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #3F3F46; margin: 0 0 6px;
}
.h_alarm .ha_list .ha_list_box .ha_list_type i { font-size: 14px; }
.h_alarm .ha_list .ha_list_box .ha_list_text {
  font-size: 14px; color: #71717A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h_alarm .ha_list .ha_list_box.active { background: #F4F4F5; border-color: transparent; }
.h_alarm .ha_list .ha_list_box.active .ha_list_type,
.h_alarm .ha_list .ha_list_box.active .ha_list_text { color: #A1A1AA; }
.h_alarm .ha_list .ha_list_empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center;
}
.h_alarm .ha_list .ha_list_empty i {
  font-size: 32px; color: #D4D4D8; margin-bottom: 12px;
}
.h_alarm .ha_list .ha_list_empty p {
  font-size: 14px; color: #A1A1AA; margin: 0;
}

/* ============================= 헤더 드롭다운 - 프로필 ============================= */
.h_profile { position: relative; }
.h_profile .h_profile_menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 248px; background: #fff;
  border: 1px solid #E4E4E7; border-radius: 12px;
  z-index: 500; padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
/* 프로필 섹션 */
.h_profile .hp_profile_section {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 8px 0 16px;
}
.h_profile .hp_avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: #F4F4F5; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.h_profile .hp_avatar img { width: 100%; height: 100%; object-fit: cover; }
.h_profile .hp_avatar i { font-size: 24px; color: #A1A1AA; }
.h_profile .hp_name { font-size: 15px; font-weight: 700; color: #18181B; }
.h_profile .hp_badge {
  display: none;
}
.h_profile .hp_badge_standard { background: #27272A; }
.h_profile .hp_badge_basic { background: #71717A; }
.h_profile .hp_badge i { font-size: 14px; }
.h_profile .hp_info { width: 100%; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.h_profile .hp_info_row {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
}
.h_profile .hp_label { font-size: 14px; color: #A1A1AA; }
.h_profile .hp_value { font-size: 14px; font-weight: 600; color: #3F3F46; font-family: 'Outfit', sans-serif; }
/* 메뉴 */
.h_profile .h_profile_menu .divider { height: 1px; background: #E4E4E7; margin: 0; }
.h_profile .h_profile_menu .menu { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.h_profile .h_profile_menu .menu li { display: block; width: 100%; }
.h_profile .h_profile_menu .menu a {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px; font-size: 14px; color: #3F3F46; border-radius: 6px;
  white-space: nowrap; text-align: left;
}
.h_profile .h_profile_menu .menu a:hover { background: #F4F4F5; color: #18181B; }
.h_profile .h_profile_menu .menu a i { width: 14px; text-align: center; font-size: 14px; color: #71717A; margin: 0; }
.h_profile .h_profile_menu .menu.apply a { color: #71717A; }
.h_profile .h_profile_menu .menu.apply a i { color: #A1A1AA; }
.h_profile .h_profile_menu .hp_logout { color: #E53639 !important; }
.h_profile .h_profile_menu .hp_logout i { color: #E53639 !important; }

/* ============================= 히어로 슬라이더 ============================= */
#mainvisual {
  --hero-slide-aspect: 16 / 9;
  height: auto;
  min-height: 0;
  padding: 0 24px;
  margin-top: 20px;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 16px;
}
/* 슬라이드 데이터가 없을 때 단일 이미지 */
#mainvisual.mainvisual--single { padding: 0 24px; gap: 0; }
#mainvisual.mainvisual--single .mainvisual-single-wrap {
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #E4E4E7;
}
#mainvisual.mainvisual--single .mainvisual-single-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bx-wrapper { box-shadow: none; border: none; background: none; margin: 0; }
#mainvisual .bx-wrapper {
  width: 100%; height: 100%;
  margin: 0 auto;
  background: none; box-shadow: none; border: none;
  max-width: unset !important;
}
#mainvisual .bx-viewport { width: 100%; height: 100%; }
.mainvisual_slider { width: 100%; height: 100%; }
.mainvisual_slider li {
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #E4E4E7;
}
.mainvisual_slider li a { display: block; width: 100%; height: 100%; }
/* 히어로 슬라이드 이미지 - 등록된 원본 비율 유지(잘림 없음) (#28) */
.mainvisual_slider li img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
/* fallback - 기존 mainvisual_img 방식 */
#mainvisual .mainvisual_img { width: 100%; height: 100%; }
#mainvisual .mainvisual_img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* 히어로 슬라이드 오버레이 */
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.13) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  padding: 28px;
  z-index: 2;
}
.hero-slide__spacer { flex: 1; }
.hero-slide__info {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;
  width: fit-content;
}
.hero-slide__name {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.hero-slide__meta { font-family: 'Inter', 'Pretendard', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); }
.hero-slide__sub  { font-family: 'Inter', 'Pretendard', sans-serif; font-size: 14px; color: rgba(255,255,255,0.6); }

/* 히어로 슬라이드 태그 */
.hero-slide__tags { display: flex; gap: 4px; margin-top: 4px; }
.hero-slide__tag-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0;
}

/* 오버레이 카드 태그 */
.overlay-card__tags { display: flex; gap: 4px; margin-top: 4px; }
.oc-tag-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0;
}

/* 아이템박스 태그 */
.itb_tags { display: flex; gap: 4px; margin-top: 6px; }
.itb-tag-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: #F4F4F5; border: 1px solid #E4E4E7;
  font-size: 11px; font-weight: 500; color: #71717A; letter-spacing: 0;
}

/* 히어로 좌우 화살표 */
.hero-nav {
  flex-shrink: 0;
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 99px;
  background: rgba(255,255,255,0.867);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}
.hero-nav:hover { background: #fff; }
.hero-nav svg { width: 24px; height: 24px; display: block; }
.mainvisual_wrapper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: auto;
  aspect-ratio: var(--hero-slide-aspect);
}

@media (max-width: 768px) {
  #mainvisual {
    padding: 0 16px;
    margin-top: 16px;
    gap: 8px;
    position: relative;
  }
  #mainvisual .mainvisual_wrapper {
    border-radius: 18px;
    aspect-ratio: var(--hero-mobile-slide-aspect, 16 / 9);
  }
  .mainvisual_slider li {
    border-radius: 18px;
  }
  .mainslide-card {
    border-radius: 18px !important;
  }
  .mainvisual_slider li img {
    object-position: center center;
  }
  .hero-slide__overlay {
    padding: 22px;
  }
  .hero-slide__info {
    width: 100%;
    max-width: 100%;
  }
  .hero-slide__name {
    font-size: 22px;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-slide__meta {
    font-size: 14px;
  }
  .hero-slide__tags {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .hero-slide__tag-badge {
    max-width: calc(50% - 3px);
    min-width: 0;
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.2;
  }
  .hero-nav {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 44px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.86);
  }
  .hero-nav--prev { left: 6px; }
  .hero-nav--next { right: 6px; }
  .hero-nav svg { width: 18px; height: 18px; }
}

/* ============================= 메인 컨테이너 ============================= */
#container { margin: 0 auto; min-height: calc(100vh - 300px); }
.main_container { overflow-x: hidden; }
.main_container > div { position: relative; }

/* ============================= 섹션 공통 ============================= */
.section-inner { padding: 48px 60px; }
.section04 .section-inner { padding: 64px 60px; }

.section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section-hdr__title {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #000;
  letter-spacing: -0.5px;
}
.section04 .section-hdr__title { font-size: 28px; }
.section-hdr__right { display: flex; align-items: center; gap: 20px; }
.section-hdr__more {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #A1A1AA;
  transition: color 0.2s;
}
.section-hdr__more:hover { color: #71717A; }

/* 슬라이드 버튼 (섹션 내 prev/next) */
.section-slide-btns { display: flex; align-items: center; gap: 8px; }
.section-slide-btns a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid #E4E4E7; border-radius: 50%;
  color: #71717A; font-size: 14px;
  transition: border-color 0.2s, color 0.2s;
}
.section-slide-btns a:hover { border-color: #000; color: #000; }

/* ============================= bxSlider 공통 오버라이드 ============================= */
.itembox_wrap .bx-wrapper {
  width: 100%; height: 100%;
  margin: 0 auto;
  background: none; box-shadow: none; border: none;
  max-width: unset !important;
}
.itembox_wrap .bx-viewport { overflow: visible !important; }

/* ============================= 상품 카드 ============================= */
.itembox {
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}
.itembox:last-child { margin-right: 0; }

/* 상품 이미지 영역 */
.itembox .itb_p {
  position: relative;
  aspect-ratio: 5/6;
  border-radius: 4px;
  overflow: hidden;
  background: #F4F4F5;
  flex-shrink: 0;
}
.itembox .itb_p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.itembox:hover .itb_p img { transform: scale(1.04); }

/* 상품 배지 */
.itembox .itb_p > div {
  position: absolute;
  top: 16px; left: 16px;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  z-index: 1;
  line-height: 1.4;
}
.tag_hot  { background: #E53639; }
.tag_new  { background: #16A34A; }
.tag_end  { background: #E53639; }
.tag_date { background: rgba(0,0,0,0.75); }
.tag_rank {
  background: #000;
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 800;
  min-width: 32px;
  text-align: center;
}

/* 상품 정보 영역 */
.itembox .itb_t {
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* 셀러명 + 아이콘 행 */
.itembox .itb_t .itb_t_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.itembox .itb_t .itb_t_top > span:first-child {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #A1A1AA;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* 찜/장바구니 아이콘 그룹 */
.itembox .itb_t .itb_t_icon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 8px;
}
.itembox .itb_t .itb_t_icon a {
  font-size: 14px;
  color: #C4C4C8;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.itembox .itb_t .itb_t_icon .itb_t_icon_like:hover,
.itembox .itb_t .itb_t_icon .itb_t_icon_like.active { color: #E53639; }
.itembox .itb_t .itb_t_icon .itb_t_icon_cart:hover,
.itembox .itb_t .itb_t_icon .itb_t_icon_cart.active { color: #3b82f6; }

/* 상품명 */
.itembox .itb_t .itb_t_title {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #18181B;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* 날짜 */
.itembox .itb_t .itb_t_date {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  color: #999999;
  margin: 0;
}

/* 마감 D-day */
.itembox .itb_t .itb_t_deadline {
  font-size: 14px;
  color: #E53639;
  font-weight: 600;
  margin: 0;
}

/* 가격 */
.itembox .itb_t .itembox_price {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #18181B;
  margin: 2px 0 0;
}
.itembox .itb_t .itembox_price span { font-size: 14px; font-weight: 400; }

/* 상품 없음 메시지 */
.itembox .itb_none {
  padding: 40px 20px;
  background: #F4F4F5;
  border-radius: 4px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itembox .itb_none p { font-size: 14px; font-weight: 500; color: #A1A1AA; text-align: center; }

/* ============================= 섹션별 스타일 ============================= */
.section01, .section02, .section03, .section04 { background: var(--section-bg, #fff); }

/* ============================= 매거진 그리드 (NOW OPEN / EDITOR'S PICK) ============================= */
.grid-magazine {
  display: flex;
  gap: 16px;
  aspect-ratio: 8 / 3; /* #34: 고정높이(480px)→고정비율, 큰카드≈4/3·작은카드≈8/3 일정 + 미리보기와 일치 */
}
.gmag-big  { flex: 1; min-width: 0; }
.gmag-side { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gmag-small { flex: 1; min-width: 0; }
/* 빈 자리 채우기 (상품이 부족할 때) */
.gmag-placeholder {
  flex: 1; border-radius: 4px; background: #F4F4F5;
  display: flex; align-items: center; justify-content: center;
  color: #A1A1AA; font-size: 14px;
}

/* ============================= 오버레이 카드 ============================= */
.overlay-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  background: #E4E4E7;
  display: block;
}
.overlay-card img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.overlay-card:hover img { transform: scale(1.04); }
.overlay-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 100%);
}
.overlay-card__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gmag-big .overlay-card__info { padding: 28px; }
.overlay-card__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0,0,0,0.8);
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #fff; letter-spacing: 0.5px;
  align-self: flex-start;
  margin-bottom: 2px;
}
.overlay-card__tag.oc-hot { background: #E53639; }
.overlay-card__tag.oc-new { background: #16A34A; }
.overlay-card__tag.oc-end { background: #E53639; }
.overlay-card__tag.oc-date { background: rgba(0,0,0,0.75); }
.overlay-card__seller {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.8);
}
.overlay-card__name {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 22px; font-weight: 700;
  color: #fff; line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.gmag-small .overlay-card__name { font-size: 16px; }
.overlay-card__price {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 20px; font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.gmag-small .overlay-card__price { font-size: 15px; }
/* 오버레이 카드 아이콘 (하트/장바구니) */
.overlay-card__icons {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; gap: 8px; z-index: 2;
}
.overlay-card__icons a {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #C4C4C8;
  transition: background 0.2s, color 0.2s;
}
.overlay-card__icons .itb_t_icon_like:hover,
.overlay-card__icons .itb_t_icon_like.active { color: #E53639; }
.overlay-card__icons .itb_t_icon_cart:hover,
.overlay-card__icons .itb_t_icon_cart.active { color: #3b82f6; }

/* ============================= 4컬럼 그리드 (BUY NOW / COMING SOON) ============================= */
.itembox-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.itembox-grid4 .itembox { margin-right: 0; }

/* 표준카드 이미지 고정 높이 390px */
.section03 .itembox .itb_p,
.section04 .itembox .itb_p {
  aspect-ratio: 5/6; /* #34: 고정높이(390px)→고정비율, 화면폭 무관 일정 + 미리보기와 일치 */
}
/* COMING SOON - 상단 모서리만 둥글게 */
.section03 .itembox .itb_p { border-radius: 4px 4px 0 0; }

/* ============================= 섹션04 - 카테고리 해시태그 필터 ============================= */
.sec04_hashtag { margin-bottom: 20px; }
.sec04_hashtag ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sec04_hashtag ul li a {
  display: block;
  height: 32px; line-height: 32px;
  padding: 0 14px;
  color: #71717A;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  border: 1px solid #E4E4E7;
  border-radius: 4px;
  transition: all 0.2s;
}
.sec04_hashtag ul li a.on,
.sec04_hashtag ul li a:hover {
  color: var(--text-color, #000);
  background: var(--primary-soft, #F4F4F5);
  border-color: var(--primary-soft-strong, #A1A1AA);
}

/* ============================= 섹션05 - 24시간 브랜드 하이라이트 ============================= */
.section05 { background: var(--section-bg, #fff); }
/* 큰 배경 박스 */
.brand24h-box {
  position: relative;
  background: linear-gradient(180deg, var(--surface-color, #F4F4F5) 0%, var(--surface-color-strong, #EDEDEF) 100%);
  border-radius: 8px;
  padding: 80px 60px;
  overflow: hidden;
}
.brand24h-wrapper {
  position: relative;
}
.brand24h-wrapper .bx-wrapper,
.brand24h-wrapper .bx-viewport {
  overflow: visible !important;
}
.brand24h-slider { list-style: none; padding: 0; margin: 0; }
.brand24h-slider li {
  list-style: none;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease, opacity 0.4s ease;
  transform-origin: center center;
  will-change: transform;
}
/* is-scaled 클래스가 slider 루트에 붙었을 때만 scale 적용 → bxSlider 초기 측정 시 방해 안 함 */
.brand24h-slider.is-scaled > li {
  transform: scale(0.78);
  opacity: 0.72;
  filter: saturate(0.85);
}
.brand24h-slider.is-scaled > li.is-center {
  transform: scale(1.14);
  opacity: 1;
  filter: none;
  z-index: 5;
}
.brand24h-slider.is-scaled > li.is-center .brand24h-card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
/* 네비 버튼 (큰 박스 안쪽 좌우 끝) */
.brand24h-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--section-bg, #fff);
  border: 1px solid var(--border-color, #E4E4E7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.brand24h-nav:hover {
  background: var(--section-bg, #fff);
  border-color: var(--text-color, #000);
  box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}
.brand24h-nav--prev { left: -24px; }
.brand24h-nav--next { right: -24px; }
/* 카드 */
.brand24h-card {
  display: flex;
  flex-direction: column;
  background: var(--section-bg, #fff);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.brand24h-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 560;
  overflow: hidden;
  background: var(--surface-color-strong, #E4E4E7);
}
.brand24h-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.brand24h-card:hover .brand24h-card__img img { transform: scale(1.04); }
/* 배지 (HOT/NEW/마감임박) */
.brand24h-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  z-index: 2;
}
.brand24h-card__badge.badge-hot { background: #E53639; }
.brand24h-card__badge.badge-new { background: #16A34A; }
.brand24h-card__badge.badge-end { background: #E53639; }
.brand24h-card__info {
  padding: 14px 12px 16px;
  background: var(--section-bg, #fff);
  text-align: left;
}
.brand24h-card__seller {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #A1A1AA);
  letter-spacing: -0.2px;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand24h-card__name {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #1A1A1A);
  letter-spacing: -0.3px;
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.brand24h-card__price {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-color, #000);
  letter-spacing: -0.3px;
  margin: 0;
}
.brand24h-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.brand24h-card__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-color, #F4F4F5);
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #71717A);
  letter-spacing: -0.1px;
}
/* 네비 버튼(-24px)은 box 좌우 패딩(60px) 안쪽이라 hidden 처리해도 잘리지 않음.
   is-center 스케일된 카드가 box 밖으로 삐져나오지 않도록 hidden 유지 */
.brand24h-box { overflow: hidden; }

/* ============================= 섹션06 - 라이징 브랜드 ============================= */
.section06 { background: var(--section-bg, #fff); }
.rising-wrapper { position: relative; }
.rising-slider { list-style: none; padding: 0; margin: 0; }
.rising-slider li { list-style: none; }
/* 네비 버튼 */
.rising-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--section-bg, #fff);
  border: 1px solid var(--border-color, #E4E4E7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rising-nav:hover {
  background: var(--section-bg, #fff);
  border-color: var(--text-color, #000);
  box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}
.rising-nav--prev { left: -24px; }
.rising-nav--next { right: -24px; }
.rising-card {
  display: flex;
  flex-direction: column;
  background: var(--section-bg, #fff);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.rising-card:hover { transform: translateY(-2px); }
/* 상단: 이미지 영역 (큰 이미지 + 작은 이미지 2장 세로) */
.rising-card__images {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
  aspect-ratio: 430 / 378;
  background: var(--surface-color, #F4F4F5);
}
.rising-card__main {
  position: relative;
  overflow: hidden;
  border-radius: 2px 0 0 2px;
}
.rising-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  z-index: 2;
}
.rising-card__badge.badge-hot { background: #E53639; }
.rising-card__badge.badge-new { background: #16A34A; }
.rising-card__badge.badge-end { background: #E53639; }
.rising-card__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.rising-card:hover .rising-card__main img { transform: scale(1.04); }
/* 큰 이미지 좌측 하단 오버레이 (상품명 + 가격) */
.rising-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.rising-card__pname {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  letter-spacing: -0.2px;
}
.rising-card__price {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 4px 0 0;
  letter-spacing: -0.2px;
}
/* 우측 작은 썸네일 세로 스택 */
.rising-card__thumbs {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.rising-card__thumb {
  overflow: hidden;
  background: var(--surface-color-strong, #E4E4E7);
}
.rising-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.rising-card:hover .rising-card__thumb img { transform: scale(1.04); }
/* 카테고리 태그 */
.rising-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  padding: 0 4px;
}
.rising-card__tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--surface-color, #F4F4F5);
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #71717A);
  letter-spacing: -0.1px;
}
/* 하단: 브랜드 정보 영역 */
.rising-card__info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px 8px;
  position: relative;
}
.rising-card__profile {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-color, #F4F4F5);
  border: 1px solid var(--border-color, #E4E4E7);
}
.rising-card__profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rising-card__brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rising-card__name-kr {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color, #000);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rising-card__name-en {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #A1A1AA);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rising-card__like {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.rising-card__like:hover { transform: scale(1.1); }

/* ============================= 섹션07 - 오늘의 추천 상품 ============================= */
.section07 { background: var(--section-bg, #fff); }
.picks-wrapper { position: relative; }
.picks-slider { list-style: none; padding: 0; margin: 0; }
.picks-slider li { list-style: none; }
/* 각 슬라이드 — 1층 구조 (좌측 배너 + 우측 헤더/상품) */
.picks-slide {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: stretch;
}
/* 좌측 배너 (정사각 이미지만, 오버레이 텍스트 없음) */
.picks-banner {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-color-strong, #E4E4E7);
  cursor: pointer;
}
.picks-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.picks-banner:hover > img { transform: scale(1.03); }
.picks-banner__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  z-index: 2;
}
.picks-banner__badge.badge-hot { background: #E53639; }
.picks-banner__badge.badge-new { background: #16A34A; }
.picks-banner__badge.badge-end { background: #E53639; }
/* 우측 컬럼 (상단 헤더 + 하단 상품 가로 배열, 배너 하단에 정렬) */
.picks-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* 우측 상단 헤더 (타이틀 영역) */
.picks-right__header {
  flex: 0 0 auto;
  padding: 4px 2px 0;
}
.picks-right__eyebrow {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #A1A1AA);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.picks-right__title {
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-color, #1A1A1A);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picks-right__sub {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #71717A);
  letter-spacing: -0.3px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picks-right__price {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-color, #0F5C59);
  letter-spacing: -0.2px;
  margin: 6px 0 0;
}
.picks-right__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.picks-right__tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--surface-color, #F4F4F5);
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #71717A);
  letter-spacing: -0.1px;
}
/* 우측 하단 상품 리스트 (3개 가로 배열, 배너 하단에 vertical-end 정렬) */
.picks-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: auto;
  flex: 0 0 auto;
  min-height: 0;
}
.picks-product {
  display: flex;
  flex-direction: column;
  background: var(--section-bg, #fff);
  overflow: hidden;
  min-width: 0;
  cursor: pointer;
}
.picks-product__img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-color, #F4F4F5);
  border-radius: 4px;
}
.picks-product__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.picks-product:hover .picks-product__img img { transform: scale(1.04); }
.picks-product__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  z-index: 2;
}
.picks-product__badge.badge-hot { background: #E53639; }
.picks-product__badge.badge-new { background: #16A34A; }
.picks-product__badge.badge-end { background: #E53639; }
.picks-product__info {
  padding: 8px 2px 4px;
}
.picks-product__seller {
  display: block;
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted, #A1A1AA);
  letter-spacing: -0.2px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picks-product__name {
  font-family: 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color, #1A1A1A);
  letter-spacing: -0.3px;
  line-height: 1.35;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picks-product__price {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-color, #000);
  letter-spacing: -0.2px;
  margin: 0;
}
.picks-product__badge {
  font-size: 9px;
  padding: 2px 6px;
}
/* 네비 버튼 (슬라이드 좌우) */
.picks-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--section-bg, #fff);
  border: 1px solid var(--border-color, #E4E4E7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.picks-nav:hover {
  border-color: var(--text-color, #000);
  box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}
.picks-nav--prev { left: -24px; }
.picks-nav--next { right: -24px; }
/* 페이저 "1/8" */
.picks-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 14px;
  color: var(--text-muted, #A1A1AA);
}
.picks-pager__current { color: var(--primary-color, #000); font-weight: 700; }
.picks-pager__divider { color: var(--border-color, #D4D4D8); }
.picks-pager__total { color: var(--text-muted, #A1A1AA); }

/* ============================= 푸터 ============================= */
footer {
  background: #000;
  padding: 56px 60px 40px;
}
.ft-inner {}
.ft-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 40px;
}
.ft-brand {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.ft-brand__logo {
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.ft-brand__logo a { color: #fff; }
.ft-brand__logo a:hover { color: #A1A1AA; }
.ft-brand__addr {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  color: #71717A;
  line-height: 1.8;
}
.ft-brand__legal {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  color: #52525B;
  line-height: 1.8;
}
.ft-brand__legal a { color: #52525B; transition: color 0.2s; }
.ft-brand__legal a:hover { color: #fff; }

.ft-nav {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
.ft-nav__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 100px;
}
.ft-nav__head {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ft-nav__col ul { display: flex; flex-direction: column; }
.ft-nav__col ul li a {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  color: #71717A;
  line-height: 1.9;
  display: block;
  transition: color 0.2s;
}
.ft-nav__col ul li a:hover { color: #fff; }
.ft-nav__cs {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  color: #71717A;
  line-height: 2;
}
.ft-divider { height: 1px; background: #27272A; border: none; margin: 0; }
.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}
.ft-bottom p {
  font-family: 'Inter', 'Pretendard', sans-serif;
  font-size: 14px;
  color: #71717A;
}
.ft-bottom p a { color: #71717A; transition: color 0.2s; }
.ft-bottom p a:hover { color: #fff; }
.ft-bottom .ft-copy { color: #A1A1AA; }
/* --------------------------------------------------------------------------------------- */

/* ------------------------------------- main modal ------------------------------------- */
#itempop {
  position:fixed; top:0; left:0; z-index:50;
  width:100%; height:100vh;
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	align-content: center;
}
#itempop .itempop_bg {
  background:rgba(0,0,0,0.8); position:absolute; top:0; left:0; 
  width:100%; height:100%; z-index:100;
}
#itempop .itempop_box {
  position: relative; z-index:150;
  width:100%; max-width:1200px;
  height:80%;
  background:#fff;
}
#itempop .itempop_box .itempop_close {position:absolute; top:-50px; right:0;}
#itempop .itempop_box .itempop_close i {font-size:30px; color:#eee;}

.itembox_content {height:100%; overflow-y:auto;}
/* -- 팝업 상단 이미지 -- */
#itempop .itempop_img {
  width:100%; height:auto; margin:0 auto;
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: start;
	align-items: center;
	position:relative;
}
#itempop .itp_gradient {
    position:absolute; z-index:10;
    bottom:0; left:0;
    width:100%; height: 250px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
#itempop .itempop_img .itp_imgbox {height:100%;}
#itempop .itempop_img .itp_imgbox {height:100%; object-fit:cover;}

#itempop .itempop_img .itp_imgtext{
  position:absolute; bottom:0; left:0; z-index:20; 
  width:100%; padding:5% 4% 3%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
}
.itp_imgtext .itp_textbox_left {max-width:50%;}
.itp_imgtext .itp_textbox_left a.itp_like {display:block; width:25px; color:#333;}
.itp_imgtext .itp_textbox_left .itpl_1 {font-size:18px; margin:10px 0;}
.itp_imgtext .itp_textbox_left .itpl_2 {font-size:22px; font-weight:600; line-height:130%;}
.itp_imgtext .itp_textbox_left .itpl_3 {font-size:26px; font-weight:600; color:#E53639; margin:10px 0 0;}
.itp_imgtext .itp_textbox_left .itpl_3 span {font-size:14px; font-weight:300;}

#itempop .itempop_img .itp_imgbox {height:100%;}
#itempop .itempop_img .itp_imgbox {height:100%; object-fit:cover;}

#itempop .itempop_img .itp_textbox_right {max-width:30%;}
#itempop .itempop_img .itp_textbox_right th {font-size:16px; padding:4px 0; word-break:keep-all; text-align:left; vertical-align: top;}
#itempop .itempop_img .itp_textbox_right td {font-size:16px; padding:4px 10px; word-break: auto-phrase; line-height:140%;}

/* -- 팝업 하단 정보 -- */
#itempop .itempop_info {padding:60px 4% 30px;}
#itempop .itempop_info .itp_btn {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap:15px;
}
#itempop .itempop_info .itp_btn a {display:inline-block; width:140px; height:40px; text-align:center; color:#999; border:1px solid #ddd; line-height:38px; font-size:16px; font-weight:500;}
#itempop .itempop_info .itp_btn a:hover {border:1px solid #333; color:#333;}
#itempop .itempop_info .itp_box {margin:50px 0 0;}
#itempop .itempop_info .itp_box h4 {font-size:25px; font-weight:700; color:#333; margin:0 0 15px;}
#itempop .itempop_info .itp_box table {}
#itempop .itempop_info .itp_box thead th {font-size:16px; padding:10px 15px; word-break:keep-all; border-top:2px solid #eee; background:#f5f5f7;}
#itempop .itempop_info .itp_box tbody td {font-size:16px; padding:10px 15px; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee;}
#itempop .itempop_info .itp_box .itp_text {font-size:14px; line-height:160%; padding:20px; background:#f5f5f7;}
/* --------------------------------------------------------------------------------------- */

/* ------------------------------------- main popup ------------------------------------- */
.main_popup {
  position: fixed;
  background: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  
  overflow: hidden;
  cursor: move;
  user-select: none;
}
.main_popup:active {cursor: grabbing;}
.popup_content {flex: 1; user-select: text;}
.popup_footer {
  background: #000;
  padding: 5px 15px;
  color:#fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup_footer button {
  background: #666;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.popup_footer button:hover {background: #555;}
.popup_footer label {font-size: 14px; cursor: pointer;}
.popup_footer label input[type="checkbox"] {margin-right: 5px;}
.popup_footer button {
  background: #666;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}
/* --------------------------------------------------------------------------------------- */

/* ---------------------------------- user product list ---------------------------------- */
.product_container {width: 1200px;}
/* ----- product header ----- */
.product_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:40px 0 20px;
  margin:0 0 30px 0;
  border-bottom:1px solid #eee;
}
.product_header .ph_left {padding-left:20px;}
.product_header .ph_left h2 {font-size:30px; font-weight: 600; color: #333;}
.product_header .ph_left .total_count {margin-left:10px; font-size:14px; color:#999; font-weight:400;}
.product_header .ph_right {display:flex; gap:5px;}
/* ----- product header search ----- */
.search_form {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.search_input {width:250px;}
.search_btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#555;
}
.search_btn:hover {color:#420506;}
.sort_select {width:120px;}
/* ----- 전체선택 / 선택삭제 ----- */
.sort_btn {display:flex; gap:5px;}
.sort_btn button {height:40px; border:1px solid #ddd; border-radius:3px; color:#555; padding:0 10px; background:#f5f5f7;}
.sort_btn button:hover {border:1px solid #aaa;}
/* ----- product list ----- */
.itembox_grid {display: grid; grid-template-columns: repeat(4, 1fr); gap:20px;}
.itembox_grid .itembox {
  margin:0;
  width:auto !important;  
}
/* ----- 상품 없음 메시지 ----- */
.no_products {
  grid-column: 1 / -1;
  text-align: center;
  padding: 100px 20px;
  color: #555;
  font-size: 18px;
}  
/* --------------------------------------------------------------------------------------- */

/* ---------------------------------- search 검색페이지 ---------------------------------- */
#search_page {padding:0 50px 150px;}
.search_container {max-width: 1000px; margin: 0 auto;}
.search_top { border-bottom:2px solid #333; padding:30px 0; margin-bottom:30px;
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}
.search_top h3 {font-size: 25px; font-weight: 600; color: #333; }
.search_top .search_box {width:70%;
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: flex-end;
	align-items: stretch;
	align-content: stretch;
}
.search_top .search_box select {width:200px;}
.search_top .search_box input {width:50%; margin:0 5px;}
.search_top .search_box button {width:40px; height:40px; background:#420506; font-size:16px; border-radius:3px; color:#fff;}
.search_top .search_box button:hover {background:#801C1E;}
/* --- 검색전 화면 --- */
.search_info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
    gap:2%;
  }
.search_info h5 {font-size:16px; font-weight:600; color:#333; margin:0 0 20px; }
.search_info > div {border-right:1px solid #eee; padding:15px 0;}
.search_info > div:last-child {border-right:none;}
/* 인기검색어 */
.si_hotkeyword > div {
	display:flex; 
	flex-wrap:wrap; 
	flex-direction: row; 
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
  gap:5px;
}
.si_hotkeyword > div a {display:inline-block; padding:4px 6px; border:1px solid #999; color:#555; border-radius:50px; font-size:14px;}
.si_hotkeyword > div a:hover {color: #420506; background: rgba(255, 167, 167, 0.2); border-color: #420506;}
/* 검색어 리스트페이지 */
.search_info ul {
	display:flex; 
	flex-wrap:wrap; 
	flex-direction: row; 
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
  gap:1%
}
.search_info ul li {width:49%; margin:0 0 10px;}
.search_info ul li a {display:block; color:#555; font-size:14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.search_info ul li a:hover {color:var(--primary-color, #0F5C59);}
.search_info ul li a span {color:var(--primary-color, #0F5C59); width:14px; text-align:center; display:inline-block; margin:0 5px 0 0;}
.search_info ul li a span:hover {color:#E3497D;}
.search_info ul li a p {width:14px; aspect-ratio:1; margin:0 1px 0 0; background:var(--primary-color, #0F5C59); border-radius:2px; overflow:hidden; display:inline-block; vertical-align:text-bottom;}
.search_info ul li a p img {width:100%; height:100%; object-fit: cover;}

/* --- 결과창 --- */
.search_results {}
.search_results .results_header {margin:0 0 20px;
  display: flex; 
  justify-content: space-between;
  align-items: center;
}
.search_results .results_header h4 {font-size:18px; font-weight:600; color:#555;}
.search_results .results_header .results_count {font-size:15px; font-weight:400; color:#999;}
.search_results .results_filter {background:#f5f5f7; padding:10px 30px; border-radius:5px; margin-bottom: 30px;
  display: flex; 
  align-items: center; 
  gap: 30px;
}
.search_results .results_filter .filter_group {display:flex; align-items: center; gap:10px;}
.search_results .results_filter .filter_group label {font-size:14px; font-weight:500; color:#555;}
.search_results .results_filter .filter_group select {width:200px;}
.search_results .results_filter .filter_group input[type="checkbox"] {margin-top:-2px;}
/* --- 결과 로딩중 --- */
.search_results .loading {text-align: center; padding: 60px 20px;}
.search_results .spinner {width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #ff6b9d;
  border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* --- 결과 없음 --- */
.search_results .no_results {padding:50px 20px; text-align:center;}
.search_results .no_results h3 {font-size:20px; color:#555; font-weight:600; margin-bottom: 10px;}
.search_results .no_results p {color:#999; font-size:15px;}
/* --------------------------------------------------------------------------------------- */

/* --------------------------------- sub page pagination --------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 50px;
}
.page_btn,
.page_num {
  padding:10px 14px;
  border:1px solid #333;
  border-radius:5px;
  color:#999;
  font-size:14px;
}
.page_btn:hover, .page_num:hover, .page_num.active {
  border:1px solid #420506;
  background: #420506;
  color: #fff;
  font-weight: 600;
}
.page_dots {
  padding:10px 14px;
  color: #999;
}
/* --------------------------------------------------------------------------------------- */

/* --------------------------------- sub page - 탭메뉴 --------------------------------- */
.mypage_tabs {
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	align-content: center;
  background: #333;
  overflow-x: auto;
}
.mypage_tabs .tab_btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: var(--text-secondary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.mypage_tabs .tab_btn:hover {background: var(--bg-color); color: var(--text-primary);}
.mypage_tabs .tab_btn.active {background: var(--bg-color);}
/* --------------------------------------------------------------------------------------- */

/* ------------------------------- sub mypage - 마이페이지 ------------------------------- */
.auth_container { min-height: calc(100vh - 200px); background:#F5F5F7;}
#container.auth_container { padding: 50px 0 150px;}
.auth_container .auth_wrap {
    max-width: 600px;
    margin: 0 auto ;
    padding: 50px;
    background: #fff;
    border-radius: 10px;
    border:1px solid #eee;
}
.auth_container .auth_title {font-size: 32px; font-weight: 500; text-align: center; margin-bottom: 30px; color: #333;}
.auth_container .auth_subtitle {font-size: 16px; color:#555; font-weight:400; margin:10px 0 0;}
.auth_container .form_section {margin:0 0 50px;}
.auth_container .form_section:last-child {margin:0;}
.auth_container .form_section h3.section_title {
  font-size:22px; font-weight:600; 
  padding:0 0 20px; margin:0 0 20px;
  border-bottom:2px solid #eee;
}
/* --- 오류안내문구 --- */
.auth_error {
    background: #ffe8e8;
    border: 1px solid #E53639;
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 20px;
}
.auth_error p {color: #E53639; font-size: 14px; margin: 0;}
.auth_error i { margin-right: 8px;}
/* --- 맨 아래 버튼 --- */
.auth_container .form_actions {margin-top:20px; display: flex; gap: 15px;}
.auth_container .form_actions button {flex: 1; height: 55px; font-size: 18px; font-weight: 600; color: #fff; border: none; border-radius: 5px;}
.auth_container .btn_submit { background: #420506; }
.auth_container .btn_submit:hover {background: #801C1E;}
.auth_container .btn_cancel {background: #555;}
.auth_container .btn_cancel:hover {background:#444;}
/* --- 양식 --- */
.auth_container .form_group {margin-bottom: 25px;}
.auth_container .form_group:last-child {margin-bottom: 0;}
.auth_container .form_label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; color: #333;}
.auth_container .required {color: #E53639; margin-left: 3px;}
.auth_container .form_input {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    font-size: 14px;
    color: #333;
    border: 1px solid #eee;
  }
.auth_container .form_textarea {
    font-size: 14px;
    color: #333;
    border: 1px solid #eee;
  }
.auth_container .form_help {font-size: 14px; color: #420506; margin-top: 10px; padding:0 0 0 10px;}
/* -- 양식 - 주소 -- */
.auth_container .address_group {margin-bottom: 10px;}
.auth_container .auth_wrap .btn_address {
    display: inline-block;
    width: 135px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #420506;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    vertical-align: top;
}
.auth_container .auth_wrap .btn_address:hover {background: #801C1E;}
.auth_container .auth_wrap .form_input_short {width: calc(100% - 150px); display: inline-block; margin-right: 10px;}
/* 금손신청서 안내 카드 */
.auth_container .info_card {
  padding:20px;
  border: 2px solid #eee;
  margin-bottom: 40px;
  background:#f5f5f7;
}
.auth_container .info_card .info_title {font-size: 16px; font-weight: 600; margin-bottom:10px; color:#333;}
.auth_container .info_card .info_description {font-size: 14px; color:#555; line-height:160%; word-break: keep-all;}
.auth_container .input_with_unit {position: relative;}
.auth_container .input_unit {position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none;}
.auth_container .form_input[readonly] {
  background: rgba(255, 255, 255, 0.05);
  cursor: not-allowed;
}
.auth_container .radio_group {display: flex; gap: 10px; align-items: center;}
.auth_container .radio_group label {cursor: pointer; color: #333;}
/* -- 회원가입 - 이미 계정 있는지 확인 -- */
.auth_footer {margin:50px 0 0;}
.auth_footer p {text-align:center; font-size:16px; color:#333;}
.auth_footer p a {text-decoration:underline; margin:0 0 0 5px; color:#420506;}
.auth_footer p a:hover {color:#2D0505;}
/* -- 회원가입 - 이용약관 개인정보처리방침 -- */
.auth_agree {padding:20px; border:1px solid #eee; border-radius:3px;}
.auth_agree .auth_agree_title {display:flex; justify-content: space-between; font-size:16px; font-weight:600; color:#333; border-bottom:1px solid #eee; padding:0 0 20px; margin:0 0 20px;}
.auth_agree .auth_agree_title a {text-decoration: underline; color:#E53639; font-size:14px; font-weight:400;} 
.auth_agree .auth_termbox {height:100px; overflow-y:auto; padding:15px; color:#555; margin:0 0 20px; background:#f5f5f7;}
.auth_agree .auth_fieldset {display: flex; justify-content: flex-end; font-size:15px; color:#555;}
.auth_agree .auth_fieldset label {cursor: pointer;}
/* -- 셀러 -- */
.domain_prefix {margin:0 0 5px; padding:0 0 0 10px; color:#999;}
.category_chips {padding:10px; display:flex; justify-content: flex-start; align-items: center; gap:5px;	flex-wrap:wrap;  }
.category_chips .category_chip {display:inline-block; background:#f5f5f7; border:1px solid #eee; border-radius:50px; padding:5px 10px;}
/* --------------------------------------------------------------------------------------- */

/* ------------------------------- sub mypage - 파일업로드 ------------------------------- */
.file_upload_area {position: relative;}
.file_input {position: absolute; width: 0; height: 0; opacity: 0;}
.file_upload_label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border: 2px dashed #eee;
  border-radius: 12px;
  background: #f5f5f7;
  cursor: pointer;
  transition: all 0.3s;
}
.file_upload_label:hover {
  background: rgba(0, 188, 212, 0.05);
}
.file_upload_label i {
  font-size: 48px;
  color: #39aadf;
  margin-bottom: 16px;
}
.upload_text {
  font-size: 16px;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
}
.upload_hint {
  font-size: 14px;
  color: #555;
}
.file_list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.file_info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.file_icon {
  font-size: 24px;
  color: var(--primary-color);
}
.file_name {
  font-size: 14px;
  color: var(--text-primary);
}
.file_remove {
  padding: 6px 12px;
  background: transparent;
  color: #E53639;
  border: 1px solid #E53639;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}
.file_remove:hover {
  background: #B7191C;
  color: white;
}
/* --------------------------------------------------------------------------------------- */


/* ------------------------------- sub mypage - 약관동의 ------------------------------- */
.agreement_box {
  padding: 24px;
  background: #f5f5f7;
  border: 2px solid #eee;
  border-radius: 3px;
}
.checkbox_label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-bottom: 15px;
}
.checkbox_label:last-child {margin:0;}
.checkbox_text {
  font-size: 15px;
  color: #333;
}
.agreement_text {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
}
/* --------------------------------------------------------------------------------------- */

/* --------------------------------- sub page - 레이아웃 --------------------------------- */
#container.mypage_container {max-width: 1200px;}
.mypage_container .page_header {
  padding: 40px 0 20px 20px;
  margin: 0 0 30px 0;
  border-bottom:1px solid #444;
}
.mypage_container .page_header .page_title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mypage_container .page_header .page_subtitle {font-size: 16px; color:#999; margin:5px 0 0;}
/* --------------------------------------------------------------------------------------- */

/* ----------------------- sub page - empty 담아둔 데이터 없을 때 ----------------------- */
.empty_state {grid-column: 1 / -1; text-align: center; padding: 80px 20px;}
.empty_state .empty_title {font-size: 24px; color: #555; margin-bottom: 10px; font-weight: 600;}
.empty_state .empty_description {font-size: 16px; color: #999; margin-bottom: 30px;}
.empty_btn {display: flex; gap: 16px; justify-content: center;}
.empty_btn a {display: inline-block; padding: 12px 30px; color: white; font-weight: 500; border-radius:5px; font-size:15px;} 
.empty_btn .btn_goshop {background: #420506;}
.empty_btn .btn_goshop:hover {background: #801C1E;}
.empty_btn .btn_second {background: #444;}
.empty_btn .btn_second:hover {background: #333;}
/* --------------------------------------------------------------------------------------- */

/* ---------------------------------- sub page - 찜목록 ---------------------------------- */
/* 찜 해제 버튼 스타일 */
.btn_remove_wish {
  position: absolute;  z-index: 10;
  top: 10px;  right: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_remove_wish:hover {background: #ff6b6b;}
.btn_remove_wish i {color: #666; font-size: 16px; transition: color 0.2s ease;}
.btn_remove_wish:hover i {color: white;}
/* --------------------------------------------------------------------------------------- */

/* --------------------------------- sub page - 장바구니 --------------------------------- */
#cart_container {margin-top:30px;}
#cart_container .cart_item {
  display: flex;
  gap: 20px; padding: 20px;
  background:#f5f5f7;
  border-top:1px solid #eee;  
}
#cart_container .cart_item:last-child {border-bottom:1px solid #eee;}
#cart_container .cart_item_checkbox {display: flex; align-items: center;}
#cart_container .cart_item_checkbox input[type="checkbox"] {width:20px; height:20px;}
#cart_container .cart_item_image {width:100px; height:100px; border-radius:5px; overflow:hidden;}
#cart_container .cart_item_image img {width:100%; aspect-ratio:1; object-fit: fill; }
#cart_container .cart_item_info {flex:1; display:flex; flex-direction: column; gap:7px; justify-content: center;}
#cart_container .cart_item_info .cart_item_seller {color:#555; font-size:14px;}
#cart_container .cart_item_info .cart_item_name {color:#333; font-size:16px; font-weight:600;}
#cart_container .cart_item_info .cart_item_price {color:#E53639; font-size:14px; font-weight:400; padding:10px 0 0;}
#cart_container .cart_item_info .cart_item_price span {font-size:16px; font-weight:600;}
#cart_container .cart_item_button {display:flex; align-items:center; justify-items:center; gap:5px;}
#cart_container .cart_item_button button {height:40px; width:90px; text-align:center; font-size:14px; font-weight:500; border-radius:5px;}
#cart_container .cart_item_button button.btn_buy {background:#420506; color:#ddd;}
#cart_container .cart_item_button button.btn_buy:hover {background:#801C1E; color:#f0f0f0;}
#cart_container .cart_item_button button.btn_delete {background:#444; color:#ddd;}
#cart_container .cart_item_button button.btn_delete:hover {background:#333; color:#fff;}
/* --------------------------------------------------------------------------------------- */
/* --------------------------------- sub page - 주문내역 --------------------------------- */
.order_wrap .order_search {
    margin-bottom: 20px;
    background: #f5f5f7;
    border-radius: 5px;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order_wrap .order_search h4 {font-size:18px; font-weight:600; color:#333;}
.order_search select {  
  padding: 5px 20px 5px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  min-width:200px;
}
.order_search input[type="date"] {  
  padding: 5px 15px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  min-width:150px;
  margin:0 4px;
}
.order_search input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
.order_search button { 
    display: inline-block;
    padding: 0 15px;
    height: 38px;
    line-height: 38px;
    border-radius:5px;
    vertical-align: middle;
    background:#420506;
    color:#fff;
}
.order_search button:hover {background:#801C1E;}
.order_table {}
.order_table thead th {
  padding:12px 15px;
  background: #f5f5f8;
  font-size:14px;
  font-weight:600;
  color:#333;
}
.order_table tbody td {
  padding:12px 15px;
  text-align:center;
  border-bottom:1px solid #eee;
  font-size:14px;
  font-weight:400;
  color:#333;
}
.order_table tbody td.td_notice {font-size:18px; color:#999; padding:40px; text-align:center;}
/* -- 주문상세 클릭하면 나오는 화면 -- */
.order_detail {padding:30px; background:#222; text-align:left; border-radius:5px;}
.order_detail_box {
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}
.order_detail_box > div {width:50%;}
.order_detail_option {border-right:1px solid #333; padding-right:30px;}
.order_detail_option > div:not(:first-child) {border-top:1px solid #333; margin-top:20px; padding-top:20px;}
.order_detail_option dl {display:flex; justify-content: space-between; align-items: stretch; margin:0 0 10px;}
.order_detail_option dl:last-child {margin:0;}
.order_detail_option dl dt {font-size:14px; font-weight:500;}
.order_detail_option dl dd {font-size:14px; font-weight:300; color:#ddd;}
/* 배송정보 */
.order_detail_delivery {padding-left:30px;}
.order_detail_delivery h5 {font-size:16px; color:#fff; margin:0 0 30px;}
.order_detail_delivery dl {display:flex; justify-content: space-between; align-items: stretch; margin:0 0 10px;}
.order_detail_delivery dl:last-child {margin:0;}
.order_detail_delivery dl dt {font-size:14px; font-weight:500; color:#ddd;}
.order_detail_delivery dl dd {font-size:14px; font-weight:300; color:#ddd;}
.order_detail_delivery > p {margin:30px 0 0; display: flex; justify-content: flex-end;}
.order_detail_delivery > p a {display:block; width:80px; height:30px; line-height:28px; font-size:14px; font-weight:400; border:1px solid #999; color:#999; text-align:center;}
.order_detail_delivery > p a:hover {border: 1px solid #ddd; color: #ddd; background: #333;}
/* 총 */
.order_detail_price {border-top:5px solid #333; margin-top:20px; padding-top:20px; text-align:right; color:#FFF70C;}
/* -------------- */
.product_info {display: flex; gap: 15px;  flex: 1; align-items: center;}
.product_info img {width: 60px; height: 60px; border-radius: 4px; object-fit: cover;}
.product_details {text-align:left;}
.product_details h4 {color: #333; margin-bottom: 5px; font-size: 16px;}
.product_details p {color: #aaa; font-size: 14px; margin:2px 0;}
.table_btn {text-align:center;}
.table_btn .btn_sm {padding: 6px 12px; font-size: 14px; white-space: nowrap; margin:0 2px; display:inline-block;}
.table_btn .btn_primary {background: transparent; border: 1px solid #232c36; color: #232c36;}
.table_btn .btn_primary:hover { background: #232c36; color: #fff;}
.table_btn .btn_success {background: transparent; border: 1px solid #21A230; color: #21A230;}
.table_btn .btn_success:hover {background: #21A230; color: white;}
.table_btn .btn_check {background:transparent; border:1px solid #999; color:#999;}
.table_btn .btn_check:hover {background:#999; color:#fff;}
/* -------------- */
.board_btn {text-align:right; margin:10px 0 0;}
.board_btn a {
    display: inline-block;
    padding: 0 15px;
    height: 38px;
    line-height: 38px;
    border-radius:5px;
    vertical-align: middle;
    background:#420506;
    color:#fff;
  }
  .board_btn a:hover {background:#801C1E;}
/* --------------------------------------------------------------------------------------- */

/* ------------------------------- 주문내역 - 리뷰작성 modal 팝업 ------------------------------ */
/* === 리뷰 모달 (dhmyl 디자인) === */
.review_modal {
  position:fixed; z-index:200; left:0; top:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  display:flex; justify-content:center; align-items:center;
}
.rm_box_wrap {
  background:#fff; border-radius:16px; width:640px; max-width:95vw;
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
/* Header */
.rm_header {
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 28px; flex-shrink:0;
}
.rm_header_title {font-size:20px; font-weight:700; color:#18181B; margin:0;}
.rm_header_close {
  width:36px; height:36px; border-radius:8px; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:#71717A; font-size:20px; transition:background 0.15s;
}
.rm_header_close:hover {background:#F4F4F5;}
.rm_divider {height:1px; background:#E4E4E7; flex-shrink:0;}
/* Body */
.rm_body {padding:28px; display:flex; flex-direction:column; gap:28px; overflow-y:auto; flex:1;}
/* Product info */
.rm_product {display:flex; gap:16px; align-items:center;}
.rm_product_img {width:64px; height:64px; border-radius:8px; overflow:hidden; background:#F4F4F5; flex-shrink:0;}
.rm_product_img img {width:100%; height:100%; object-fit:cover;}
.rm_product_text .rm_prod_name {font-size:15px; font-weight:600; color:#18181B; margin:0 0 4px;}
.rm_product_text .rm_prod_opt {font-size:14px; color:#A1A1AA; margin:0;}
/* Star section */
.rm_star_section {display:flex; flex-direction:column; gap:12px;}
.rm_star_label {font-size:14px; font-weight:600; color:#18181B; margin:0;}
.rm_star_row {display:flex; align-items:center; gap:8px;}
.rm_star_row .star {
  font-size:28px; color:#E4E4E7; cursor:pointer; transition:color 0.15s;
  user-select:none; position:relative; display:inline-block; line-height:1;
}
.rm_star_row .star.active {color:#F59E0B;}
.rm_star_row .star.half {position:relative; color:#E4E4E7;}
.rm_star_row .star.half::before {
  content:"★"; position:absolute; left:0; top:0;
  width:50%; overflow:hidden; color:#F59E0B;
}
.rm_star_value {font-family:'Outfit',sans-serif; font-size:16px; font-weight:600; color:#18181B;}
/* Photo section */
.rm_photo_section {display:flex; flex-direction:column; gap:12px;}
.rm_photo_label_row {display:flex; align-items:center; justify-content:space-between;}
.rm_photo_label {font-size:14px; font-weight:600; color:#18181B; margin:0;}
.rm_photo_label_sub {font-size:14px; color:#A1A1AA;}
.rm_photo_row {display:flex; gap:12px; flex-wrap:wrap;}
.rm_upload_btn {
  width:88px; height:88px; border-radius:8px; background:#FAFAFA;
  border:1px solid #E4E4E7; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; cursor:pointer;
  transition:background 0.15s; flex-shrink:0;
}
.rm_upload_btn:hover {background:#F4F4F5;}
.rm_upload_btn i {font-size:24px; color:#A1A1AA;}
.rm_upload_btn span {font-family:'Outfit',sans-serif; font-size:14px; color:#A1A1AA;}
.rm_photo_item {
  position:relative; width:88px; height:88px; border-radius:8px;
  overflow:hidden; flex-shrink:0;
}
.rm_photo_item img {width:100%; height:100%; object-fit:cover;}
.rm_photo_del {
  position:absolute; top:4px; right:4px; width:20px; height:20px;
  border-radius:10px; background:#18181B; color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; line-height:1;
}
.rm_photo_del:hover {background:#3F3F46;}
/* Editor section */
.rm_editor_section {display:flex; flex-direction:column; gap:12px;}
.rm_editor_label {font-size:14px; font-weight:600; color:#18181B; margin:0;}
.rm_textarea {
  width:100%; height:200px; border:1px solid #E4E4E7; border-radius:8px;
  padding:16px; font-family:'Pretendard',sans-serif; font-size:14px;
  color:#18181B; resize:none; line-height:1.6; outline:none;
  transition:border-color 0.15s;
}
.rm_textarea::placeholder {color:#D4D4D8;}
.rm_textarea:focus {border-color:#A1A1AA;}
/* Footer */
.rm_footer {
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  height:68px; padding:0 28px; flex-shrink:0;
}
.rm_btn_cancel {
  width:100px; height:44px; border-radius:8px; background:#fff;
  border:1px solid #D4D4D8; font-family:'Pretendard',sans-serif;
  font-size:15px; font-weight:500; color:#52525B; cursor:pointer;
  transition:background 0.15s;
}
.rm_btn_cancel:hover {background:#F4F4F5;}
.rm_btn_submit {
  width:100px; height:44px; border-radius:8px; background:#18181B;
  border:none; font-family:'Pretendard',sans-serif;
  font-size:15px; font-weight:600; color:#fff; cursor:pointer;
  transition:background 0.15s;
}
.rm_btn_submit:hover {background:#3F3F46;}
/* Responsive */
@media (max-width:680px) {
  .rm_box_wrap {width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:95vh;}
}
/* --------------------------------------------------------------------------------------- */

/* === 마일리지/정산 공통 스타일 (mp- 디자인시스템) === */
/* Summary Cards */
.mp-summary-row {display:flex; gap:16px; width:100%;}
.mp-summary-card {
  flex:1; min-width:0; border-radius:12px; background:#FAFAFA; border:1px solid #E4E4E7;
  padding:24px; display:flex; flex-direction:column; justify-content:space-between; height:140px;
}
.mp-summary-top {display:flex; justify-content:space-between; align-items:center;}
.mp-summary-label {font-size:14px; font-weight:500; color:#71717A; letter-spacing:0.5px;}
.mp-summary-icon {font-size:24px; color:#A1A1AA;}
.mp-summary-val {font-family:'Outfit',sans-serif; font-size:28px; font-weight:700; color:#18181B;}
/* Action Buttons row */
.mp-action-btns {display:flex; gap:12px; justify-content:flex-end; width:100%;}
.mp-btn-dark {
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
  border-radius:8px; background:#18181B; color:#fff; font-size:14px; font-weight:600;
  text-decoration:none; border:none; cursor:pointer; transition:background 0.15s;
}
.mp-btn-dark:hover {background:#3F3F46; color:#fff;}
.mp-btn-outline {
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
  border-radius:8px; background:#fff; color:#52525B; font-size:14px; font-weight:500;
  text-decoration:none; border:1px solid #D4D4D8; cursor:pointer; transition:background 0.15s;
}
.mp-btn-outline:hover {background:#F4F4F5; color:#52525B;}
/* Data Table */
.mp-data-table {width:100%;}
.mp-dt-thead {
  display:flex; align-items:center; background:#F9FAFB; height:48px; padding:0 16px;
  border-bottom:1px solid #E4E4E7;
}
.mp-dt-thead .mp-dt-th {display:flex; align-items:center; justify-content:center; height:100%; font-size:14px; font-weight:600; color:#71717A; font-family:'Pretendard',sans-serif;}
.mp-dt-row {
  display:flex; align-items:center; height:52px; padding:0 16px;
  border-bottom:1px solid #F4F4F5; transition:background 0.1s;
}
.mp-dt-row:hover {background:#FAFAFA;}
.mp-dt-td {display:flex; align-items:center; height:100%; font-size:14px; color:#18181B; font-family:'Pretendard',sans-serif;}
.mp-dt-date {width:120px; justify-content:center; font-family:'Outfit',sans-serif; color:#52525B; font-size:14px; font-weight:400;}
.mp-dt-type {width:80px; justify-content:center;}
.mp-dt-desc {flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:400; color:#18181B;}
.mp-dt-amt {width:140px; justify-content:flex-end; font-family:'Outfit',sans-serif; font-size:14px; font-weight:600;}
.mp-dt-bal {width:140px; justify-content:flex-end; font-family:'Outfit',sans-serif; font-size:14px; font-weight:600; color:#18181B;}
.mp-dt-status {width:140px; justify-content:center; font-size:14px; font-weight:600;}
.mp-amt-plus {color:#18181B; font-weight:700;}
.mp-amt-minus {color:#71717A;}
.mp-status-done {color:#18181B;}
.mp-status-pending {color:#A1A1AA;}
.mp-status-long-pending {color:#B45309; font-weight:700;}
.mp-status-cancel {color:#D4D4D8;}
.mp-inline-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; padding:0 10px; border:1px solid #E4E4E7; border-radius:6px;
  color:#52525B; text-decoration:none; font-size:13px; font-weight:600; background:#FFF;
  white-space:nowrap;
}
.mp-inline-link:hover {background:#F4F4F5; color:#18181B;}
.mp-muted-text {color:#71717A; font-size:14px; line-height:1.7; margin:0 0 18px;}
.mp-error-box {background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; border-radius:8px; padding:12px 14px; font-size:14px; margin-bottom:16px;}
.mp-withdrawal-panel {max-width:680px;}
.mp-withdrawal-form {display:flex; flex-direction:column; gap:16px;}
.mp-withdrawal-form label {display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:700; color:#18181B;}
.mp-withdrawal-form input,
.mp-withdrawal-form textarea {width:100%; border:1px solid #E4E4E7; border-radius:8px; padding:12px; font:inherit; resize:vertical;}
.mp-withdrawal-form input:focus,
.mp-withdrawal-form textarea:focus {outline:none; border-color:#18181B;}
/* Type Badges */
.mp-type-badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:4px; font-size:14px; font-weight:600;
}
.mp-badge-earn {background:#F4F4F5; color:#18181B;}
.mp-badge-use {background:#F4F4F5; color:#52525B;}
.mp-badge-fee {background:#F4F4F5; color:#52525B;}
.mp-badge-buy {background:#F4F4F5; color:#18181B;}
.mp-badge-refund {background:#F4F4F5; color:#52525B;}
.mp-badge-seller {background:#F4F4F5; color:#18181B;}
.mp-badge-groupbuy {background:#F4F4F5; color:#18181B;}
.mp-badge-goldhand {background:#F4F4F5; color:#18181B;}
/* Section Title */
.mp-section-title {font-size:16px; font-weight:700; color:#18181B; margin:0;}
/* Filter Tabs */
.mp-filter-row {display:flex; justify-content:space-between; align-items:center; width:100%;}
.mp-filter-tabs {display:flex; gap:4px; align-items:center;}
.mp-filter-tab {
  height:36px; padding:0 16px; border-radius:6px; border:none; background:transparent;
  font-size:14px; font-weight:500; color:#71717A; cursor:pointer; transition:all 0.15s;
}
.mp-filter-tab.active {background:#18181B; color:#fff; font-weight:600;}
.mp-filter-tab:hover:not(.active) {background:#F4F4F5;}
.mp-period-select {
  height:36px; padding:0 14px; border-radius:6px; border:1px solid #E4E4E7;
  font-size:14px; color:#52525B; background:#fff; cursor:pointer; appearance:none;
  line-height:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
/* Subscription Item Card */
.sub-item {
  display:flex; flex-direction:column; gap:16px; padding:24px;
  border-radius:12px; border:1px solid #E4E4E7; width:100%;
}
.sub-item:hover {border-color:#D4D4D8;}
/* Membership Tier Page */
.mbs-page-wrap { padding: 0 max(calc((100% - 1200px) / 2), 20px) 120px; }
.mbs-tier-tabs {display:flex; gap:16px; justify-content:center; width:100%;}
.mbs-tier-tab {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:160px; height:160px; border-radius:16px; background:#F9FAFB; border:1px solid #E4E4E7;
  cursor:pointer; transition:all 0.15s;
}
.mbs-tier-tab span {font-size:14px; font-weight:500; color:#71717A; font-family:'Pretendard',sans-serif;}
.mbs-tier-tab.active {border:2px solid #18181B;}
.mbs-tier-tab.active span {font-weight:700; color:#18181B;}
.mbs-tier-tab:hover:not(.active) {border-color:#A1A1AA;}
.mbs-tier-panel {display:none; border-radius:16px; border:1px solid #E4E4E7; overflow:hidden;}
.mbs-tier-panel.active {display:flex; flex-direction:column;}
.mbs-tier-header {padding:32px; background:#F9FAFB; border-radius:16px 16px 0 0;}
.mbs-tier-sub {font-size:14px; font-weight:500; color:#71717A; margin:0 0 8px 0;}
.mbs-tier-title {font-size:24px; font-weight:800; color:#18181B; letter-spacing:-0.5px; margin:0 0 8px 0;}
.mbs-tier-desc {font-size:14px; color:#A1A1AA; margin:0;}
.mbs-benefits {padding:32px; display:flex; flex-direction:column; gap:16px;}
.mbs-benefit {display:flex; align-items:center; gap:12px;}
.mbs-benefit-ic {width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mbs-benefit-ic i {font-size:16px;}
.mbs-benefit span {font-size:14px; color:#52525B;}
.mbs-price-section {
  display:flex; align-items:center; justify-content:space-between; padding:24px 32px;
  background:#F9FAFB; border-top:1px solid #E4E4E7;
}
.mbs-price-label {font-size:14px; font-weight:500; color:#71717A;}
.mbs-price-amt {font-family:'Outfit',sans-serif; font-size:28px; font-weight:800; color:#18181B;}
.mbs-price-unit {font-size:14px; color:#A1A1AA; margin-left:4px;}
.mbs-btn-back {
  padding:14px 32px; border-radius:8px; border:1px solid #D4D4D8; background:#fff;
  font-size:15px; font-weight:500; color:#52525B; cursor:pointer;
}
.mbs-btn-back:hover {background:#F4F4F5;}
.mbs-btn-pay {
  padding:14px 48px; border-radius:8px; background:#18181B; border:none;
  font-size:15px; font-weight:600; color:#fff; cursor:pointer; display:flex; align-items:center; gap:8px;
}
.mbs-btn-pay:hover {background:#27272A;}
/* Pagination */
.mp-pagination {display:flex; gap:4px; justify-content:center; padding-top:24px; width:100%;}
.mp-pg-btn {
  width:32px; height:32px; border-radius:6px; border:1px solid #D4D4D8;
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; color:#52525B; transition:all 0.15s;
}
.mp-pg-btn:hover:not(:disabled):not(.active) {background:#F4F4F5;}
.mp-pg-btn.active {background:#18181B; color:#fff; border-color:#18181B;}
.mp-pg-btn:disabled {opacity:0.4; cursor:not-allowed;}
/* Empty state */
.mp-empty-state {padding:60px 0; text-align:center; color:#A1A1AA; font-size:14px;}
.mp-empty-state p {font-size:14px; margin:0 0 12px 0;}
.mp-empty-state a {font-size:18px !important;}
/* Balance Card (for deposit/withdraw) */
.mp-balance-card {
  display:flex; align-items:center; justify-content:space-between;
  border-radius:12px; background:#FAFAFA; border:1px solid #E4E4E7; padding:24px 28px; width:100%;
}
.mp-bal-label {font-size:14px; color:#71717A; margin:0 0 4px;}
.mp-bal-amount {font-family:'Outfit',sans-serif; font-size:32px; font-weight:700; color:#18181B; margin:0;}
.mp-bal-icon {font-size:32px; color:#D4D4D8;}
/* Form Card */
.mp-form-wrap {
  border-radius:12px; border:1px solid #E4E4E7; overflow:hidden; width:100%;
}
.mp-form-section {padding:28px; display:flex; flex-direction:column; gap:20px;}
.mp-form-divider {height:1px; background:#E4E4E7;}
.mp-form-sec-title {font-size:16px; font-weight:700; color:#18181B; margin:0;}
.mp-form-group {display:flex; flex-direction:column; gap:8px;}
.mp-form-label {font-size:14px; font-weight:600; color:#18181B;}
.mp-form-input {
  height:48px; border-radius:8px; border:1px solid #D4D4D8; padding:0 16px;
  font-size:14px; color:#18181B; background:#fff; outline:none; transition:border 0.15s;
  font-family:'Pretendard',sans-serif; width:100%; box-sizing:border-box;
}
.mp-form-input:focus {border-color:#A1A1AA;}
.mp-form-input::placeholder {color:#A1A1AA;}
.mp-form-input[readonly] {background:#FAFAFA; color:#18181B;}
.mp-form-select {
  height:48px; border-radius:8px; border:1px solid #D4D4D8; padding:0 16px;
  font-size:14px; color:#18181B; background:#fff; outline:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
  font-family:'Pretendard',sans-serif; width:100%; box-sizing:border-box;
}
.mp-form-help {font-size:14px; color:#A1A1AA; margin:0;}
.mp-form-radio-row {display:flex; gap:16px; align-items:center;}
.mp-form-radio-item {display:flex; gap:8px; align-items:center; cursor:pointer; font-size:14px; color:#18181B;}
.mp-form-radio-item input[type="radio"] {width:18px; height:18px; accent-color:#18181B;}
.mp-info-note {
  display:flex; align-items:center; gap:8px; border-radius:8px; padding:12px 16px;
  font-size:14px; width:100%; box-sizing:border-box;
}
.mp-info-orange {background:#FFF7ED; color:#EA580C;}
.mp-info-blue {background:#EFF6FF; color:#2563EB;}
.mp-form-actions {display:flex; gap:12px; justify-content:flex-end; padding-top:8px; width:100%;}
.mp-form-submit {
  height:48px; padding:0 32px; border-radius:8px; background:#18181B; color:#fff;
  font-size:15px; font-weight:600; border:none; cursor:pointer; transition:background 0.15s;
  font-family:'Pretendard',sans-serif;
}
.mp-form-submit:hover {background:#3F3F46;}
.mp-form-cancel {
  height:48px; padding:0 32px; border-radius:8px; background:#fff; color:#52525B;
  font-size:15px; font-weight:500; border:1px solid #D4D4D8; cursor:pointer; transition:background 0.15s;
  font-family:'Pretendard',sans-serif; text-decoration:none; display:inline-flex; align-items:center;
}
.mp-form-cancel:hover {background:#F4F4F5; color:#52525B;}
.mp-phone-row {display:flex; gap:8px; align-items:center; width:100%;}
.mp-phone-row .mp-form-input {flex:1;}
.mp-phone-sep {color:#A1A1AA; font-size:14px;}
/* Responsive */
@media (max-width:768px) {
  .mp-summary-row {flex-direction:column;}
  .mp-dt-date {width:90px; font-size:14px;}
  .mp-dt-amt, .mp-dt-bal, .mp-dt-status {width:100px; font-size:14px;}
  .mp-dt-type {width:60px;}
  .mp-filter-row {flex-direction:column; gap:12px; align-items:flex-start;}
}
/* --------------------------------------------------------------------------------------- */

/* --------------------------------- sub page - 구독내역 -------------------------------- */
.subscription_summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; margin-bottom: 20px;
}
.summary_card {
    background:#f5f5f7;
    border:1px solid #eee;
    color: #777;
    padding: 25px;
    text-align: center;
}
.card_value {font-size: 28px; font-weight: 700;}
.card_label { font-size: 14px; opacity: 0.9;  margin-bottom: 8px;}

/* 구독 필터 */
.subscription_filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding:20px 0;
  background: var(--card-bg);
  border-radius: 12px;
}
.subscription_filter .filter_tabs {display: flex; gap: 8px; flex-wrap: wrap;}
.subscription_filter .filter_tab {padding: 8px 20px; color: #777; border: 1px solid #777; font-size: 14px; font-weight: 500; cursor: pointer;}
.subscription_filter .filter_tab:hover, .subscription_filter .filter_tab.active {background:#420506; border:1px solid #420506; color:#fff;}
.filter_period .period_select {width:150px;}

/* 구독 리스트 */
.subscription_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;}

/* 구독 아이템 */
.subscription_item {
  border-radius: 10px; padding: 30px; 
  background:#252525;
  transition:all .3s;
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -ms-transition:all .3s;
  -o-transition:all .3s;
}
.subscription_item:hover {background:#333;}
/* 구독 아이템 contents */
.subscription_item .item_header {
  display: flex;
	flex-direction: row; 
	justify-content: space-between;
	align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #555;
}
.subscription_item .item_type {
  display: flex;
  align-items: center;
  gap:10px;
}
.subscription_item .item_type span {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
}
.subscription_item .item_date {font-size:14px; color:#999;}
/* 구독 아이템 타입 */
.item_type .membership {background:#312a34; color: #9b59b6;}
.item_type .token {background:#3a3523; color: #f1c40f;}
.item_type .success {background:#25332b; color: #27ae60;}
.item_type .fail {background:#392927; color: #e74c3c;}
/* 구독 아이템 내용*/
.subscription_item .item_body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
  }
.subscription_item .item_info {flex: 1;}
.subscription_item .item_info .item_title {font-size: 20px; font-weight: 600; margin-bottom: 10px; color:#ddd;  }
.subscription_item .item_info .item_description {font-size: 14px; color:#aaa; }
.subscription_item .item_info .item_details {margin:15px 0 0; display: flex; gap:5px; flex-wrap: wrap;}
.subscription_item .item_info .detail_item {
  font-size: 14px; color: #ddd; padding: 5px 15px; background: #000; border-radius: 5px; 
  display: flex; align-items: center; gap: 5px;  
}
.subscription_item .item_info .detail_item.error {background:#392927; color: #e74c3c;}
.subscription_item .item_amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.subscription_item .item_amount .amount_label {font-size: 14px; color:#ddd; }
.subscription_item .item_amount .amount_value {font-size: 24px; font-weight: 600; color:#ddd;}
.subscription_item .item_amount .payment_method {font-size: 14px; color:#ddd; }
.subscription_item .item_footer {
  display: flex; justify-content: flex-end; gap: 5px;
}
.subscription_item .item_footer button {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.subscription_item .item_footer button.btn_detail, .subscription_item .item_footer button.btn_receipt {
  background: #444;
  color: #ddd;
}
.subscription_item .item_footer button.btn_detail:hover, .subscription_item .item_footer button.btn_receipt:hover {
  background:#111;
}
.subscription_item .item_footer button.btn_retry {
  background: #420506;
  color: #ddd;
}
.subscription_item .item_footer button.btn_retry:hover {
  background: #801C1E;
}
/* --------------------------------------------------------------------------------------- */

/* -------------------------------- sub page - 금손게시판 -------------------------------- */
/* 협의상태 뱃지*/
.gh_container .status_badge {display:inline-block; padding:5px 10px; font-size:14px; border-radius:3px;}
.gh_container .status_pending     {color:#414106; background:#f7f7da;} /* 협의대기중 */
.gh_container .status_negotiating {color:#042507; background:#d5e7d7;} /* 협의중 */
.gh_container .status_in_progress {color:#05153d; background:#e8ecf5;} /* 협찬진행중 */
.gh_container .status_approved    {color:#202020; background:#f5f5f5;} /* 협찬종료 */
.gh_container .status_rejected    {color:#8f8f8f; background:#dadada;} /* 협의종료 */
/* 뒤로가기 */
.gh_container .btn_gh_back {margin:0 0 30px; display:flex; justify-content:space-between; }
.gh_container .btn_gh_back a {font-size:15px; font-weight:600; color:#999;}
.gh_container .btn_gh_back a:hover {color:#2D0505;}
/* 필터 selectbox */
.gh_container .gh_select {width:150px;}
/* 내요청목록*/
.gh_boardbox {margin:0 0 30px;}
.gh_boardbox h4 {font-size:22px; font-weight:500; color:#333; margin:0 0 15px;}
.gh_boardbox h4 span {font-size:16px; font-weight:400; margin:0 0 0 5px; color:#999;}
.gh_boardbox .gh_request_btn {margin:30px 0 0; text-align:center;}
.gh_boardbox .gh_request_btn a {display: inline-block; padding: 12px 30px; color: white; font-weight: 500; border-radius:5px; font-size:15px; background: #420506;} 
.gh_boardbox .gh_request_btn a:hover {background: #801C1E;}
.gh_boardbox .gh_norequest {text-align:center; padding:50px 0; color:#999; font-size:16px; font-weight:500;}
/* 금손목록 그리드 */
.gh_boardbox .gh_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
  gap: 1%;
}
.gh_boardbox .gh_grid .gh_card {border: 1px solid #eee; border-radius:5px; padding: 20px; background:#f5f5f7; transition: all 0.3s ease;}
.gh_boardbox .gh_grid .gh_card:hover {background:#f0f0f0; border:1px solid #eee; transform: translateY(-2px);}
.gh_boardbox .gh_grid .gh_card .gh_name {margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color:#333;}
.gh_boardbox .gh_grid .gh_card .gh_category {color:#555; margin: 0 0 10px 0; font-size: 14px;}
.gh_boardbox .gh_grid .gh_card .gh_intro {
  color:#555;
  margin: 0 0 15px 0;
  line-height:1.4;
  height:3.6;
  font-size:14px;
  display: -webkit-box;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gh_boardbox .gh_grid .gh_card .btn_show {
  display: block;
  text-align: center;
  width: 100%;
  color:#124BDD;
}
/* 요청 상세 게시판 */
.gh_detail .gh_boardbox .table_container table {border-top:1px solid #555;}
.gh_detail .gh_boardbox .table_container table td {text-align:left;}
.gh_detail .gh_boardbox .table_container table td.wide {white-space: pre-wrap; padding: 20px; line-height: 1.6;}
/* 협의메세지 */
.gh_msg {border:2px solid #555; height:250px; overflow-y: auto; padding: 20px;}
.gh_msg .gh_msg_item {background:#222; padding:20px;}
.gh_msg .my_message {border-left: 5px solid #007bff;}
.gh_msg .other_message {border-left: 5px solid #28a745;}
.gh_msg .gh_msg_item h5 {font-size:16px; font-weight:500; color:#ddd; margin:0 0 10px;}
.gh_msg .gh_msg_item .gh_msg_time {font-size:14px; font-weight:400; color:#555;}
.gh_msg .gh_msg_item .gh_msg_text {font-size:14px; font-weight:400; color:#999; line-height:140%;}
.gh_msg .gh_msg_item .gh_msg_price {font-size:14px; font-weight:500; color:#FFF947; margin:10px 0 0;}
.gh_msg .gh_msg_item .gh_msg_proposal {display:flex; gap:15px; margin-top:10px;}
.gh_msg .gh_msg_item .gh_msg_period {font-size:14px; font-weight:500; color:#21A230;}
.gh_msg .gh_msg_none {text-align: center; color: #999; padding: 20px;}
/* 협의메세지 입력창 */
.gh_msg_form {margin-top:20px; padding-top:20px; border-top:1px solid #333;}
.gh_msg_form_grid {display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
.gh_msg_form_actions {display:flex; align-items: center; gap:10px; margin-top:15px; justify-content:flex-end;}
.gh_msg_form_actions input[type="number"]::-webkit-outer-spin-button,
.gh_msg_form_actions input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.gh_msg_form_actions input[type="number"] {-moz-appearance: textfield;}
.gh_msg_form_actions button {display:block; height:40px; line-hieght:40px; border-radius:3px; padding:0 20px; font-size:14px; color:#fff; background:#420506;}
.gh_msg_form_actions button:hover {background:#801C1E;}

/* -------------------------- 금손소개페이지 -------------------------- */
/* 금손 포트폴리오 갤러리 */
.gh_pf_gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px; margin: 20px 0;
}
.gh_pf_item {position: relative; aspect-ratio:1; overflow: hidden; border-radius: 5px; background:#222;}
.gh_pf_item img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.gh_pf_intro {margin: 30px 0; padding: 20px; background:#f5f5f7; border-radius:5px;}
.gh_pf_intro h4 {margin: 0 0 15px 0; font-size: 16px; font-weight: 600; color:#111;}
.gh_pf_intro p {margin:0; line-height:140%; color:#555; white-space: pre-wrap;}
/* 금손 포트폴리오 카테고리 */
.gh_category {display: flex; flex-wrap: wrap; gap: 10px;}
.gh_category_tag {display: inline-block; padding: 8px 16px; background: #2A1B6E; color: white; border-radius: 50px; font-size: 14px; font-weight: 500;}
.gh_category_tag:hover {background:#1D134C;}
/* 협찬 후기 */
.gh_pf_review {display:flex; justify-content:space-between; margin:0 0 15px;}
.gh_pf_review h4 {margin:0;}
.gh_pf_review button {display:block; height:40px; line-hieght:40px; border-radius:3px; padding:0 20px; font-size:14px; color:#fff; background:#333;}
.gh_pf_review button:hover {background:#555;}
/* 협찬 후기 아이템박스 */
.gh_review_item {padding:20px; border-bottom:1px solid #eee;}
.gh_review_item:first-child {border-top:1px solid #eee;}
.gh_review_item .gh_star {margin:0 0 20px;}
.gh_review_item .gh_star span {display:inline-block; color:#FFF947; font-size:14px;}
.gh_review_item .gh_star span:last-child {font-weight:400; margin:0 0 0 5px;}
.gh_review_item .gh_review_text {font-size:16px; font-weight:500; color:#ddd; margin:0 0 15px;}
.gh_review_item .gh_review_user {font-size:14px; color:#999;}
.gh_review_item .gh_review_user .review_date {margin:0 0 0 10px; padding:0 0 0 10px; border-left:1px solid #eee;}
/* 금손 협찬 후기 */
.rm_review p {margin:10px 0 0 ; font-size:15px; font-weight:400; color:#333;}
.gh_review_modal .rm_content {height:auto;}
.gh_review_modal .rm_review textarea {height:100px;}
/* 금손문의 */
.gh_container .table_container table {border-top:1px solid #555;}
.gh_container .table_container table td {text-align:center;}
.gh_container .table_container table td input {width:100%;}
.gh_container .table_container table td p {font-size:14px; color:#333; margin:5px 0 0;}
.gh_container .table_container table .required {color: #dc3545;}
.gh_container .table_container table .file_list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding:10px;  gap:5px;
}
.gh_container .table_container table .file_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:10px;
  background:#222;
}
.gh_container .table_container table .file_item_name {flex:1; font-size:14px; color:#999;}
.gh_container .table_container table .file_item_remove {background: none; border: none; color: #dc3545; cursor: pointer; font-size: 18px;
  padding: 0 5px;}
.gh_container .table_container table .file_item_remove:hover {color: #c82333;}
/* --- 맨 아래 버튼 --- */
.gh_container .form_actions {width:50%; margin:20px auto 0; display: flex; gap: 15px;}
.gh_container .form_actions button {flex: 1; height: 55px; font-size: 18px; font-weight: 600; color: #fff; border: none; border-radius: 5px;}
.gh_container .btn_submit { background: #420506; }
.gh_container .btn_submit:hover {background: #801C1E;}
.gh_container .btn_cancel {background: #555;}
.gh_container .btn_cancel:hover {background:#444;}

/* Toast UI Editor 스타일 조정 */
#contentEditor {
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 4px;
}
/* --------------------------------------------------------------------------------------- */


/* -------------------------------------- breadcrumb ------------------------------------- */
.breadcrumb {margin-bottom:40px;}
.breadcrumb a {font-size:14px; color:#999;}
.breadcrumb span {padding:0 2px; font-size:14px; color:#999;}
/* --------------------------------------------------------------------------------------- */

/* ------------------------------------ membership 결제 ----------------------------------- */
/* membership 결제페이지 선택 */
#container.membership_container {background:#F5F5F7; padding:0;}
.membership_wrap {max-width:1200px; width:100%; padding:40px 30px 100px; background:#fff; margin:0 auto;}
/* 상단 안내문구 */
.membership_wrap .mbs_top {margin:0 0 20px;}
.mbs_top h2 {margin:0 0 10px; font-size:35px; font-weight:600; color:#111;}
.mbs_top p {font-size:14px; font-weight:400; color:#111; line-height:160%;}
/* 하단 멤버십 선택 */
.membership_wrap .mbs_bottom {
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
  padding:30px 40px;
  border-radius: 15px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.10);
}
.mbs_bottom .mbs_class {width:130px;}
.mbs_bottom .mbs_class a {display:block; width:100%; margin:0 0 5px; border:4px solid #fff; border-radius:8px;}
.mbs_bottom .mbs_class a img {display:block; width:100%;}
.mbs_bottom .mbs_class a:hover, .mbs_bottom .mbs_class a.active {border:4px solid #FFF947;}
.mbs_bottom .mbs_class a:last-child {margin:0;}
.mbs_bottom .mbs_info {width:calc(100% - 180px);}
.mbs_bottom .mbs_info > h4 {font-size:20px; font-weight:600; margin:0 0 5px; }
.mbs_bottom .mbs_info > p {font-size:15px; font-weight:400; }
.mbs_bottom .mbs_info .mbs_wrap {margin-top:20px;}
.mbs_bottom .mbs_info .mbs_wrap .mbs {
	display:flex; 
	flex-wrap:nowrap; 
	flex-direction: row; 
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_img {position: relative; width:360px; box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.25); border-radius: 30px;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_img img {width:100%; height:100%;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_img span {position:absolute; z-index:10; right:-20px; bottom:-20px; display:block; width:200px;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_text {width:calc(100% - 420px);}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_text h5 {font-size:18px; font-weight:700; margin:0 0 15px;}
.mbs_bottom .mbs_info .mbs_wrap #mbs1 h5 {color:#3471DF;}
.mbs_bottom .mbs_info .mbs_wrap #mbs2 h5 {color:#8B04FF;}
.mbs_bottom .mbs_info .mbs_wrap #mbs3 h5 {color:#C0951C;}
.mbs_bottom .mbs_info .mbs_wrap #mbs4 h5 {color:#99A4AE;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_text ul {border-top:1px solid #eee;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_text ul li {border-bottom:1px solid #eee; font-size:15px; padding:6px 10px;  font-weight:400;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_text p {font-size:15px; color:#666; margin-top:30px;}
.mbs_bottom .mbs_info .mbs_wrap .mbs .mbs_text p span {font-size:25px; font-weight:700; color:#111; padding-left:10px;}
/* 멤버십 버튼 */
.membership_wrap .mbs_btn {margin:50px auto 0; text-align:center;}
.mbs_btn button {display:inline-block; width:160px; padding:10px 50px; font-size:16px; font-weight:400; border-radius:60px; margin:0 5px;}
.mbs_btn .btn_back {border:2px solid #111; color:#111;}
.mbs_btn .btn_back:hover {background:#111; color:#fff;}
.mbs_btn .btn_payment {border:2px solid #124BDD; color:#124BDD;}
.mbs_btn .btn_payment:hover {background:#124BDD; color:#fff;}

/* --------------------------------------------------------------------------------------- */

/* --------------------------------- Board List (Design v2) --------------------------------- */
.board-container {
  min-height: 100vh;
  background: #FFFFFF;
}
.board-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 48px max(calc((100% - 1200px) / 2), 20px) 0;
}
.board-breadcrumb a, .board-breadcrumb span {
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #A1A1AA;
  text-decoration: none;
}
.board-breadcrumb .bc-sep {
  color: #D4D4D8;
  font-weight: 400;
}
.board-breadcrumb .bc-current {
  color: #18181B;
  font-weight: 600;
}
.board-title-section {
  padding: 8px max(calc((100% - 1200px) / 2), 20px) 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.board-title-section h1 {
  font-family: 'Pretendard', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #18181B;
  letter-spacing: -0.5px;
  margin: 0;
}
.board-title-section .board-total-count {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #A1A1AA;
}
.board-content-wrap {
  padding: 0 max(calc((100% - 1200px) / 2), 20px) 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Search Row */
.board-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  background: #F4F4F5;
  border-radius: 8px;
  padding: 0 20px;
}
.board-search-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.board-search-label {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #18181B;
}
.board-search-divider {
  width: 1px;
  height: 20px;
  background: #D4D4D8;
}
.board-search-row select,
.board-search-row .board-per-page {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #52525B;
  border: 1px solid #E4E4E7;
  border-radius: 6px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  height: 36px;
  line-height: 34px;
  padding: 0 30px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.board-search-row select:focus,
.board-search-row .board-per-page:focus {
  outline: none;
}
.board-search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #E4E4E7;
  border-radius: 8px;
  background: #FFFFFF;
  height: 36px;
  padding: 0 12px;
  width: 280px;
}
.board-search-input:focus-within {
  border-color: #E4E4E7;
  outline: none;
  box-shadow: none;
}
.board-search-input i {
  color: var(--text-muted, #A1A1AA);
  font-size: 14px;
}
.board-search-input svg {
  flex-shrink: 0;
}
.board-search-input input {
  border: none;
  outline: none;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: var(--text-color, #18181B);
  width: 100%;
  padding: 0;
  background: transparent;
}
.board-search-input input:focus,
.board-search-input input:hover {
  border: none;
  outline: none;
  box-shadow: none;
}
.board-search-input input::placeholder {
  color: var(--text-muted, #A1A1AA);
}
.board-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color, #18181B);
  color: var(--primary-contrast, #FFFFFF);
  border: none;
  border-radius: 6px;
  height: 36px;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.board-search-btn:hover {
  background: var(--secondary-color, #27272A);
}
.board-search-btn i {
  font-size: 14px;
}
/* Table */
.board-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border-color, #E4E4E7);
}
.board-table thead th {
  height: 48px;
  background: var(--surface-color-soft, #FAFAFA);
  border-bottom: 1px solid var(--border-color, #E4E4E7);
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #52525B);
  text-align: center;
  padding: 0;
}
.board-table thead th.th-title {
  text-align: left;
  padding: 0 16px;
}
.board-table tbody tr {
  height: 50px;
  border-bottom: 1px solid var(--border-color, #E4E4E7);
}
.board-table tbody tr.row-notice {
  background: var(--primary-soft, #FFFBF0);
}
.board-table tbody td {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted, #71717A);
  text-align: center;
  padding: 0;
  vertical-align: middle;
}
.board-table tbody td.td-title {
  text-align: left;
  padding: 0;
  font-size: 14px;
  color: var(--text-color, #18181B);
}
.board-table tbody td.td-title a {
  color: var(--text-color, #18181B);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 50px;
}
.board-table tbody tr.row-notice td.td-title a {
  font-weight: 600;
}
.board-table tbody td.td-title .pin-icon {
  color: var(--primary-color, #E53639);
  font-size: 14px;
}
.board-table tbody td.td-title .lock-icon {
  color: var(--text-muted, #A1A1AA);
  font-size: 14px;
}
.board-table .notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  background: var(--primary-color, #E53639);
  color: var(--primary-contrast, #FFFFFF);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.board-table tbody td.td-empty {
  font-size: 16px;
  color: var(--text-muted, #A1A1AA);
  padding: 60px;
  text-align: center;
}
.board-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.board-source-badge--admin {
  background: var(--primary-soft, #DBEAFE);
  color: var(--primary-color, #1E40AF);
  border-color: var(--primary-soft-strong, #93C5FD);
}
.board-source-badge--seller {
  background: var(--surface-color, #DCFCE7);
  color: var(--text-color, #166534);
  border-color: var(--border-color, #BBF7D0);
}
/* Write Button Row */
.board-btn-row {
  display: flex;
  justify-content: flex-end;
}
.board-write-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  background: var(--primary-color, #18181B);
  color: var(--primary-contrast, #FFFFFF);
  border-radius: 6px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.board-write-btn:hover {
  background: var(--secondary-color, #27272A);
  color: var(--primary-contrast, #FFFFFF);
}
/* Pagination v2 */
.board-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 0 0;
}
.board-pagination a,
.board-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-family: 'Outfit', 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted, #71717A);
  text-decoration: none;
  border: 1px solid transparent;
}
.board-pagination a.pg-nav {
  border: 1px solid var(--border-color, #D4D4D8);
}
.board-pagination a.pg-nav i {
  font-size: 14px;
}
.board-pagination a.pg-nav.disabled {
  color: var(--text-muted, #A1A1AA);
  pointer-events: none;
}
.board-pagination a.pg-nav:not(.disabled) i {
  color: var(--text-color, #52525B);
}
.board-pagination a.pg-active,
.board-pagination span.pg-active {
  background: var(--primary-color, #18181B);
  color: var(--primary-contrast, #FFFFFF);
  font-weight: 600;
  border-color: var(--primary-color, #18181B);
}
.board-pagination a:hover:not(.pg-active):not(.disabled) {
  background: var(--surface-color, #F4F4F5);
}
/* Responsive */
/* 1400px: max()로 자동 처리됨 */
@media (max-width: 768px) {
  .board-breadcrumb { padding: 24px 20px 0; }
  .board-title-section { padding: 8px 20px 24px; }
  .board-title-section h1 { font-size: 24px; }
  .board-content-wrap { padding: 0 20px 60px; }
  .board-search-row { flex-direction: column; height: auto; padding: 12px; gap: 8px; }
  .board-search-left { flex-wrap: wrap; }
  .board-search-input { width: 100%; }
  .board-table { font-size: 14px; }
  .board-table thead th, .board-table tbody td { padding: 8px 4px; }
  .board-table .col-hide-mobile { display: none; }
}

/* --- Board View (게시글 상세) ----------------------------------------------------------- */
.bv-content-wrap {
  padding: 0 max(calc((100% - 1200px) / 2), 20px) 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* 게시글 카드 */
.bv-post {
  border: 1px solid var(--border-color, #E4E4E7);
  border-radius: 12px;
  overflow: hidden;
}
/* 포스트 헤더 */
.bv-post-header {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border-color, #E4E4E7);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bv-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bv-notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--primary-color, #0F5C59);
  border-radius: 4px;
  font-family: 'Pretendard', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
}
.bv-post-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color, #18181B);
  letter-spacing: -0.3px;
  line-height: 1.4;
  margin: 0;
}
.bv-post-title i { color: var(--text-muted, #A1A1AA); font-size: 18px; }
.bv-post-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bv-info-author {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #71717A);
}
.bv-info-id {
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted, #A1A1AA);
  margin-left: -12px;
}
.bv-info-date,
.bv-info-views {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #A1A1AA);
}
.bv-info-views { font-family: 'Outfit', sans-serif; }
/* 공구요청 메타 */
.bv-meta-section {
  background: #FAFAFA;
  border-bottom: 1px solid #E4E4E7;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bv-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bv-meta-label {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #18181B;
  min-width: 60px;
}
.bv-cat-badge {
  display: inline-flex;
  padding: 4px 12px;
  background: #18181B;
  border-radius: 4px;
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
}
.bv-keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bv-keyword-tag {
  display: inline-flex;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid #18181B;
  border-radius: 4px;
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #18181B;
}
/* 본문 */
.bv-post-body {
  padding: 32px;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-color, #3F3F46);
  line-height: 1.8;
  min-height: 200px;
}
.bv-post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.bv-post-body p { margin: 0 0 16px; }
.bv-post-body p:last-child { margin-bottom: 0; }
/* 액션 버튼 */
.bv-action-divider {
  height: 1px;
  background: var(--border-color, #E4E4E7);
}
.bv-post-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 32px;
}
.bv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  border-radius: 6px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-contrast, #FFFFFF);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.bv-btn:hover { opacity: 0.85; }
.bv-btn-list { background: var(--primary-color, #52525B); }
.bv-btn-edit { background: var(--primary-color, #18181B); }
.bv-btn-delete { background: #EF4444; }
/* 댓글 섹션 */
.bv-comment-section {
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  overflow: hidden;
}
.bv-comment-header {
  padding: 24px 32px;
  border-bottom: 1px solid #E4E4E7;
}
.bv-comment-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #18181B;
  margin: 0;
}
.bv-comment-title span { font-weight: 700; }
/* 댓글 아이템 */
.bv-comment-item {
  padding: 20px 32px;
  border-bottom: 1px solid #F4F4F5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bv-comment-item:last-child { border-bottom: none; }
.bv-comment-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bv-comment-author {
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #18181B;
}
.bv-comment-userid {
  font-weight: 400;
  color: #A1A1AA;
  font-size: 12px;
  margin-left: 4px;
}
.bv-comment-date {
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #A1A1AA;
}
.bv-comment-body {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #52525B;
  line-height: 1.6;
}
.bv-comment-actions { margin-top: 4px; }
.bv-btn-comment-delete {
  padding: 4px 12px;
  background: #EF4444;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  font-family: 'Pretendard', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}
.bv-btn-comment-delete:hover { opacity: 0.85; }
.bv-no-comment {
  text-align: center;
  padding: 48px 32px;
  color: #A1A1AA;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  margin: 0;
}
/* 댓글 작성 */
.bv-comment-write {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px 32px;
  border-top: 1px solid #E4E4E7;
}
.bv-comment-write textarea {
  flex: 1;
  height: 80px;
  padding: 12px 16px;
  border: 1px solid #D4D4D8;
  border-radius: 8px;
  background: #FAFAFA;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: #18181B;
  resize: vertical;
}
.bv-comment-write textarea::placeholder { color: #A1A1AA; }
.bv-comment-write textarea:focus {
  outline: none;
  border-color: #18181B;
  background: #FFFFFF;
}
.bv-btn-comment-submit {
  padding: 12px 28px;
  background: #18181B;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.bv-btn-comment-submit:hover { opacity: 0.85; }
.bv-comment-login {
  text-align: center;
  padding: 24px 32px;
  border-top: 1px solid #E4E4E7;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: #71717A;
}
.bv-comment-login a {
  color: var(--primary-color, #0F5C59);
  font-weight: 600;
  text-decoration: none;
}
.bv-comment-login a:hover { text-decoration: underline; }
/* Board View Responsive */
/* 1400px: max()로 자동 처리됨 */
@media (max-width: 768px) {
  .bv-content-wrap { padding: 0 20px 60px; }
  .bv-post-header { padding: 24px 20px 20px; }
  .bv-post-title { font-size: 18px; }
  .bv-post-info { gap: 12px; flex-wrap: wrap; }
  .bv-meta-section { padding: 16px 20px; }
  .bv-post-body { padding: 24px 20px; min-height: 120px; }
  .bv-post-actions { padding: 20px; }
  .bv-btn { padding: 10px 20px; font-size: 13px; }
  .bv-comment-header { padding: 20px; }
  .bv-comment-item { padding: 16px 20px; }
  .bv-comment-write { padding: 20px; flex-direction: column; }
  .bv-comment-write textarea { width: 100%; }
}
/* --------------------------------------------------------------------------------------- */

/* --- Product List Page ----------------------------------------------------------------- */
.pl-container { width: 100%; min-height: 100vh; }
.pl-breadcrumb {
  padding: 48px max(calc((100% - 1200px) / 2), 20px) 0;
  display: flex; align-items: center; gap: 8px;
}
.pl-breadcrumb a, .pl-breadcrumb span {
  font-family: 'Pretendard', sans-serif;
  font-size: 12px; font-weight: 500; color: #A1A1AA;
  text-decoration: none;
}
.pl-breadcrumb .pl-bc-sep { color: #D4D4D8; font-weight: 400; }
.pl-breadcrumb .pl-bc-current { color: #18181B; font-weight: 600; }

.pl-title-section {
  padding: 8px max(calc((100% - 1200px) / 2), 20px) 40px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.pl-title-section h1 {
  font-family: 'Pretendard', sans-serif;
  font-size: 32px; font-weight: 800; color: #18181B;
  letter-spacing: -0.5px; margin: 0;
}
.pl-total-count {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 400; color: #A1A1AA;
}

.pl-content-wrap {
  padding: 0 max(calc((100% - 1200px) / 2), 20px) 120px;
  display: flex; flex-direction: column; gap: 24px;
}

/* Filter Row */
.pl-filter-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; row-gap: 12px;
}
.pl-filter-left {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; row-gap: 8px;
}
.pl-sort-select {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 500; color: #181818;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--border-color, #E4E4E7); border-radius: 8px;
  background: var(--section-bg, #fff); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.pl-sort-select option { color: #181818; background: #fff; }
.pl-filter-divider {
  width: 1px; height: 20px; background: var(--border-color, #E4E4E7);
}
.pl-cat-pills-row { display: contents; }
.pl-cat-pill {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 400; color: var(--text-muted, #71717A);
  height: 36px; padding: 0 16px;
  border: 1px solid var(--border-color, #E4E4E7); border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
  transition: all 0.2s;
}
.pl-cat-pill.active {
  background: var(--primary-color, #18181B); color: var(--primary-contrast, #FFFFFF); font-weight: 600;
  border-color: var(--primary-color, #18181B);
}
.pl-cat-pill:hover:not(.active) { border-color: var(--text-muted, #A1A1AA); background: var(--surface-color, transparent); }

.pl-filter-right { display: flex; align-items: center; gap: 8px; flex: 0 0 100%; justify-content: flex-end; }
.pl-search-group { display: flex; gap: 8px; }
.pl-search-box {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--border-color, #E4E4E7); border-radius: 8px;
  background: var(--section-bg, #fff);
}
.pl-search-box i { color: var(--text-muted, #A1A1AA); font-size: 14px; }
.pl-search-box input {
  border: none; outline: none; background: transparent;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; color: #181818 !important; width: 200px;
}
.pl-search-box input::placeholder { color: var(--text-muted, #A1A1AA); }
.pl-search-btn {
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 24px;
  background: var(--primary-color, #18181B); color: var(--primary-contrast, #FFFFFF); border: none; border-radius: 6px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto;
}
.pl-search-btn i { font-size: 14px; }

/* Product Grid */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pl-card { cursor: pointer; min-width: 0; }
.pl-card-info { min-width: 0; }
.pl-card-img {
  width: 100%; height: 285px;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: var(--surface-color, #F4F4F5);
  position: relative; padding: 16px;
}
.pl-badge {
  display: inline-block;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 4px;
}
.pl-badge-new { background: #16A34A; color: #FFFFFF; }
.pl-badge-hot { background: #E53639; color: #FFFFFF; }
.pl-badge-end { background: #E53639; color: #FFFFFF; }
.pl-badge-date { background: #3B82F6; color: #FFFFFF; }

.pl-card-info {
  padding: 14px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pl-card-top {
  display: flex; justify-content: space-between; align-items: center;
}
.pl-card-seller {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 500; color: var(--text-muted, #A1A1AA);
}
.pl-card-icons { display: flex; gap: 8px; }
.pl-card-icons a {
  color: var(--border-color, #D4D4D8); font-size: 14px; text-decoration: none;
  transition: color 0.2s;
}
.pl-card-icons a.active,
.pl-card-icons a:hover { color: var(--primary-color, #0F5C59); }
.pl-icon-cart.active,
.pl-icon-cart:hover { color: #3b82f6 !important; }

.pl-card-name {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 600; color: #18181B;
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-card-date {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; font-weight: 400; color: var(--text-muted, #D4D4D8);
  margin: 0;
}
.pl-card-price {
  font-family: 'Pretendard', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--primary-color, #18181B);
  margin: 0;
}

.pl-no-products {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 0;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px; color: var(--text-muted, #A1A1AA);
}

/* Pagination */
.pl-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 4px; padding-top: 24px;
}
.pl-pg-nav, .pl-pg-num {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 400; color: var(--text-muted, #71717A);
  text-decoration: none; transition: all 0.2s;
}
.pl-pg-nav {
  border: 1px solid var(--border-color, #D4D4D8);
  color: var(--text-muted, #A1A1AA);
}
.pl-pg-nav.disabled {
  opacity: 0.4; pointer-events: none;
}
.pl-pg-nav i { font-size: 14px; }
.pl-pg-active {
  background: var(--primary-color, #18181B); color: var(--primary-contrast, #FFFFFF); font-weight: 600;
}
.pl-pg-num:hover:not(.pl-pg-active) { background: var(--surface-color, #F4F4F5); }

/* Responsive */
/* 1400px: max()로 자동 처리됨 */
@media (max-width: 1400px) {
  .pl-filter-row { flex-wrap: wrap; gap: 12px; }
  .pl-filter-left { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .pl-breadcrumb { padding: 24px 20px 0; }
  .pl-title-section { padding: 8px 20px 24px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .pl-title-section h1 { font-size: 24px; }
  .pl-content-wrap { padding: 0 20px 60px; gap: 16px; }
  .pl-filter-row { flex-direction: column; align-items: flex-start; }
  .pl-filter-left { overflow-x: auto; width: 100%; flex-wrap: nowrap; }
  .pl-search-box input { width: 120px; }
  .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pl-card-img { height: 180px; }
}
/* --------------------------------------------------------------------------------------- */

/* ========================= cart (ct-*) 디자인 시안 ========================= */
.ct-container { background: #FFFFFF; }

/* breadcrumb */
.ct-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 24px max(calc((100% - 1200px) / 2), 20px) 0; }
.ct-breadcrumb a { font-size: 12px; font-weight: 500; color: #A1A1AA; text-decoration: none; }
.ct-breadcrumb a:hover { color: #71717A; }
.ct-bc-sep { font-size: 12px; color: #D4D4D8; }
.ct-bc-current { font-size: 12px; font-weight: 600; color: #18181B; }

/* page title */
.ct-title-section { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px max(calc((100% - 1200px) / 2), 20px) 40px; }
.ct-title-section h1 { font-size: 32px; font-weight: 800; color: #18181B; letter-spacing: -0.5px; }
.ct-total-count { font-size: 14px; color: #A1A1AA; }

/* content wrap (2-column) */
.ct-content-wrap { display: flex; gap: 32px; padding: 24px max(calc((100% - 1200px) / 2), 20px) 120px; }
.ct-left-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-right-col { width: 360px; flex-shrink: 0; }

/* action bar */
.ct-action-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #E4E4E7; }
.ct-act-left { display: flex; align-items: center; gap: 8px; }
.ct-chk-all { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ct-chk-all input[type="checkbox"] { width: 20px; height: 20px; accent-color: #18181B; cursor: pointer; }
.ct-chk-label { font-size: 14px; font-weight: 500; color: #18181B; }
.ct-chk-count { font-size: 14px; font-weight: 500; color: #A1A1AA; }
.ct-del-btn { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border: 1px solid #E4E4E7; border-radius: 6px; background: transparent; font-size: 14px; font-weight: 500; color: #71717A; cursor: pointer; transition: all 0.2s; }
.ct-del-btn:hover { border-color: #A1A1AA; color: #18181B; }
.ct-del-btn i { font-size: 14px; }

/* cart item */
.ct-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid #F4F4F5; }
.ct-item-chk { display: flex; align-items: flex-start; padding-top: 4px; }
.ct-item-chk input[type="checkbox"] { width: 20px; height: 20px; accent-color: #18181B; cursor: pointer; }
.ct-item-img { width: 120px; height: 120px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #F4F4F5; }
.ct-item-img img { width: 100%; height: 100%; object-fit: cover; }
.ct-item-info { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-item-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ct-item-left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ct-item-shop { display: flex; align-items: center; gap: 6px; }
.ct-item-shop i { font-size: 14px; color: #A1A1AA; }
.ct-item-shop span { font-size: 14px; font-weight: 500; color: #A1A1AA; }
.ct-item-name { font-size: 15px; font-weight: 600; color: #18181B; line-height: 1.4; }
.ct-item-x { background: none; border: none; cursor: pointer; color: #A1A1AA; font-size: 18px; padding: 0; transition: color 0.2s; flex-shrink: 0; }
.ct-item-x:hover { color: #18181B; }
.ct-price-row { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ct-item-price { font-size: 18px; font-weight: 700; color: #18181B; }
.ct-item-orig-price { font-size: 14px; color: #A1A1AA; text-decoration: line-through; }
.ct-opt-text { font-size: 14px; color: #A1A1AA; }
.ct-buy-row { padding-top: 8px; }
.ct-buy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 20px; background: #18181B; border-radius: 6px; font-size: 14px; font-weight: 600; color: #FFFFFF; text-decoration: none; transition: background 0.2s; }
.ct-buy-btn:hover { background: #27272A; color: #FFFFFF; }
.ct-buy-btn i { font-size: 14px; }
.ct-opt-row { display: flex; align-items: center; gap: 8px; }
.ct-opt-sel { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #E4E4E7; border-radius: 6px; font-size: 14px; font-weight: 500; color: #3F3F46; background: transparent; cursor: pointer; }
.ct-opt-sel i { font-size: 14px; color: #A1A1AA; }
.ct-qty-row { display: flex; align-items: center; }
.ct-qty-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #E4E4E7; background: transparent; cursor: pointer; color: #71717A; font-size: 14px; transition: all 0.2s; }
.ct-qty-btn:first-child { border-radius: 6px 0 0 6px; }
.ct-qty-btn:last-child { border-radius: 0 6px 6px 0; }
.ct-qty-btn:hover { background: #F4F4F5; color: #18181B; }
.ct-qty-val { display: flex; align-items: center; justify-content: center; width: 48px; height: 32px; border-top: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; font-size: 14px; font-weight: 600; color: #18181B; font-family: 'Outfit', 'Pretendard', sans-serif; }

/* order summary */
.ct-summary { position: sticky; top: 120px; }
.ct-summary-box { border: 1px solid #E4E4E7; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.ct-sum-title { font-size: 18px; font-weight: 700; color: #18181B; }
.ct-sum-div { width: 100%; height: 1px; background: #F4F4F5; }
.ct-sum-div-bold { width: 100%; height: 1px; background: #E4E4E7; }
.ct-sum-row { display: flex; justify-content: space-between; align-items: center; }
.ct-sum-label { font-size: 14px; color: #71717A; }
.ct-sum-val { font-size: 14px; font-weight: 500; color: #18181B; }
.ct-sum-val-disc { font-size: 14px; font-weight: 500; color: #EF4444; }
.ct-total-row { display: flex; justify-content: space-between; align-items: center; }
.ct-total-label { font-size: 16px; font-weight: 600; color: #18181B; }
.ct-total-val { font-size: 22px; font-weight: 700; color: #18181B; font-family: 'Outfit', 'Pretendard', sans-serif; }
.ct-order-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; background: #18181B; border-radius: 8px; border: none; font-size: 15px; font-weight: 600; color: #FFFFFF; cursor: pointer; transition: background 0.2s; }
.ct-order-btn:hover { background: #27272A; }
.ct-order-btn i { font-size: 18px; }

/* empty state */
.ct-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 20px; text-align: center; }
.ct-empty i { font-size: 48px; color: #D4D4D8; }
.ct-empty h3 { font-size: 18px; font-weight: 600; color: #71717A; }
.ct-empty p { font-size: 14px; color: #A1A1AA; }
.ct-empty-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #18181B; border-radius: 8px; color: #FFFFFF; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.ct-empty-btn:hover { background: #27272A; color: #FFFFFF; }

/* cart responsive */
/* 1400px: max()로 자동 처리됨 */
@media (max-width: 1024px) {
  .ct-breadcrumb { padding: 16px 24px 0; }
  .ct-title-section { padding: 8px 24px 24px; }
  .ct-content-wrap { padding: 16px 24px 80px; flex-direction: column; }
  .ct-right-col { width: 100%; }
  .ct-summary { position: static; }
  .ct-item-img { width: 100px; height: 100px; }
}
@media (max-width: 768px) {
  .ct-breadcrumb { padding: 16px 20px 0; }
  .ct-title-section { padding: 8px 20px 24px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .ct-title-section h1 { font-size: 24px; }
  .ct-content-wrap { padding: 16px 20px 60px; }
  .ct-item-img { width: 80px; height: 80px; }
}
/* --------------------------------------------------------------------------------------- */

/* ========================= wishlist (wl-*) 디자인 시안 ========================= */
.wl-container { background: #FFFFFF; }

/* breadcrumb */
.wl-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 24px max(calc((100% - 1200px) / 2), 20px) 0; }
.wl-breadcrumb a { font-size: 12px; font-weight: 500; color: #A1A1AA; text-decoration: none; }
.wl-breadcrumb a:hover { color: #71717A; }
.wl-bc-sep { font-size: 12px; color: #D4D4D8; }
.wl-bc-current { font-size: 12px; font-weight: 600; color: #18181B; }

/* page title */
.wl-title-section { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px max(calc((100% - 1200px) / 2), 20px) 40px; }
.wl-title-section h1 { font-size: 32px; font-weight: 800; color: #18181B; letter-spacing: -0.5px; }
.wl-total-count { font-size: 14px; color: #A1A1AA; }

/* content wrap */
.wl-content-wrap { display: flex; flex-direction: column; gap: 24px; padding: 0 max(calc((100% - 1200px) / 2), 20px) 120px; }

/* filter row */
.wl-filter-row { display: flex; align-items: center; gap: 8px; }
.wl-sort-select { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid #E4E4E7; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: #18181B; cursor: pointer; font-family: 'Pretendard', sans-serif; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; min-width: 160px; }
.wl-sort-select:focus { outline: none; border-color: #A1A1AA; }

/* grid */
.wl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* card */
.wl-card { display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform 0.2s; }
.wl-card:hover { transform: translateY(-2px); }
.wl-card-img { position: relative; width: 100%; height: 282px; border-radius: 8px; overflow: hidden; background: #F4F4F5; }
.wl-card-img img { width: 100%; height: 100%; object-fit: cover; }
.wl-remove-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 14px; background: rgba(0,0,0,0.5); border: none; color: #FFFFFF; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 1; }
.wl-remove-btn:hover { background: rgba(0,0,0,0.7); }
.wl-card-info { display: flex; flex-direction: column; gap: 6px; }
.wl-card-top { display: flex; align-items: center; justify-content: space-between; }
.wl-card-seller { font-size: 14px; font-weight: 500; color: #A1A1AA; }
.wl-card-icons { display: flex; gap: 8px; }
.wl-card-icons a { font-size: 14px; color: #D4D4D8; text-decoration: none; transition: color 0.2s; }
.wl-card-icons a:hover { color: #71717A; }
.wl-card-icons a.active { color: #EF4444; }
.wl-card-icons .wl-icon-cart.active { color: #3b82f6; }
.wl-card-name { font-size: 14px; font-weight: 600; color: #18181B; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-card-date { font-size: 14px; color: #A1A1AA; font-family: 'Outfit', 'Pretendard', sans-serif; }
.wl-card-price { font-size: 16px; font-weight: 700; color: #18181B; }

/* empty state */
.wl-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 20px; text-align: center; }
.wl-empty i { font-size: 48px; color: #D4D4D8; }
.wl-empty h3 { font-size: 18px; font-weight: 600; color: #71717A; }
.wl-empty p { font-size: 14px; color: #A1A1AA; }
.wl-empty-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #18181B; border-radius: 8px; color: #FFFFFF; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.wl-empty-btn:hover { background: #27272A; color: #FFFFFF; }

/* wishlist responsive */
/* 1400px: max()로 자동 처리됨 */
@media (max-width: 1024px) {
  .wl-breadcrumb { padding: 16px 24px 0; }
  .wl-title-section { padding: 8px 24px 24px; }
  .wl-content-wrap { padding: 0 24px 80px; }
  .wl-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .wl-card-img { height: 220px; }
}
@media (max-width: 768px) {
  .wl-breadcrumb { padding: 16px 20px 0; }
  .wl-title-section { padding: 8px 20px 24px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .wl-title-section h1 { font-size: 24px; }
  .wl-content-wrap { padding: 0 20px 60px; }
  .wl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wl-card-img { height: 180px; }
}
/* --------------------------------------------------------------------------------------- */

/* ========================= search (sr-*) 디자인 시안 ========================= */
.sr-container { background: #FFFFFF; padding-bottom: 72px; }

/* breadcrumb */
.sr-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 24px max(calc((100% - 1200px) / 2), 20px) 0; }
.sr-breadcrumb a { font-size: 12px; font-weight: 500; color: #A1A1AA; text-decoration: none; }
.sr-breadcrumb a:hover { color: #71717A; }
.sr-bc-sep { font-size: 12px; color: #D4D4D8; }
.sr-bc-current { font-size: 12px; font-weight: 600; color: #18181B; }

/* page title */
.sr-title-section { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px max(calc((100% - 1200px) / 2), 20px) 40px; }
.sr-title-section h1 { font-size: 32px; font-weight: 800; color: #18181B; letter-spacing: -0.5px; }

/* search bar */
.sr-search-wrap { padding: 0 max(calc((100% - 1200px) / 2), 20px); }
.sr-search-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.sr-search-select { height: 44px; width: 120px; padding: 0 14px; border: 1px solid #E4E4E7; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: #18181B; font-family: 'Pretendard', sans-serif; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; flex-shrink: 0; }
.sr-search-select:focus { outline: none; border-color: #A1A1AA; }
.sr-search-box { display: flex; align-items: center; gap: 8px; height: 44px; flex: 1; padding: 0 14px; border: 1px solid #E4E4E7; border-radius: 8px; }
.sr-search-box i { font-size: 16px; color: #A1A1AA; flex-shrink: 0; }
.sr-search-box input { flex: 1; border: none; outline: none; font-size: 14px; font-family: 'Pretendard', sans-serif; color: #18181B; background: transparent; height: 44px; padding: 0; }
.sr-search-box input:focus, .sr-search-box input:hover { border: none; outline: none; box-shadow: none; }
.sr-search-box input::placeholder { color: #A1A1AA; }
.sr-search-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 24px; background: var(--primary-color, #18181B); border-radius: 6px; border: none; font-size: 14px; font-weight: 500; color: #FFFFFF; cursor: pointer; transition: opacity 0.2s; flex-shrink: 0; }
.sr-search-btn:hover { opacity: 0.9; }
.sr-search-btn i { font-size: 14px; }

/* info section (4-column) */
.sr-natural-guide {display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:12px;}
.sr-natural-guide span {font-size:13px; font-weight:700; color:#71717A; margin-right:4px;}
.sr-query-chip {border:1px solid #E4E4E7; background:#FFF; color:#52525B; border-radius:999px; padding:8px 12px; font-size:13px; cursor:pointer;}
.sr-query-chip:hover {background:#F4F4F5; color:#18181B;}
.sr-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 40px max(calc((100% - 1200px) / 2), 20px) 0; }
.sr-info--no-seller { grid-template-columns: repeat(3, 1fr); }
.sr-info-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: hidden; }
.sr-info-title { font-size: 16px; font-weight: 700; color: #18181B; }
.sr-info-div { width: 100%; height: 1px; background: #E4E4E7; }

/* keyword pills */
.sr-kw-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-kw-pill { display: inline-flex; padding: 6px 14px; background: #F4F4F5; border-radius: 16px; font-size: 14px; font-weight: 500; color: #3F3F46; text-decoration: none; transition: all 0.2s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sr-kw-pill:hover { background: #E4E4E7; color: #18181B; }

/* ranked list items */
.sr-rank-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: opacity 0.2s; }
.sr-rank-item:visited { color: inherit; }
.sr-rank-item:hover { opacity: 0.7; }
.sr-rank-num { font-size: 14px; font-weight: 700; color: var(--primary-color, #0F5C59); font-family: 'Outfit', 'Pretendard', sans-serif; min-width: 16px; }
.sr-rank-num.sr-rank-sub { color: #A1A1AA; font-weight: 600; }
.sr-rank-item:visited .sr-rank-num { color: var(--primary-color, #0F5C59); }
.sr-rank-item:visited .sr-rank-num.sr-rank-sub { color: #A1A1AA; }
.sr-rank-item:visited .sr-rank-name { color: #3F3F46; }
.sr-rank-avatar { width: 28px; height: 28px; border-radius: 14px; overflow: hidden; background: #F4F4F5; flex-shrink: 0; }
.sr-rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-rank-name { font-size: 14px; font-weight: 500; color: #3F3F46; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* search results section */
.sr-results { display: flex; flex-direction: column; gap: 24px; padding: 48px max(calc((100% - 1200px) / 2), 20px) 120px; }
.sr-results-header { display: flex; align-items: flex-end; justify-content: space-between; }
.sr-results-title { font-size: 22px; font-weight: 700; color: #18181B; }
.sr-results-count { font-size: 14px; color: #A1A1AA; }

/* filter row */
.sr-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-sort-select { height: 40px; padding: 0 14px; border: 1px solid #E4E4E7; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: #18181B; font-family: 'Pretendard', sans-serif; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.sr-filter-div { width: 1px; height: 20px; background: #E4E4E7; }
#dynamicCatPills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-cat-pill { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid #E4E4E7; font-size: 14px; font-weight: 500; color: #52525B; text-decoration: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; background: transparent; }
.sr-cat-pill:hover { border-color: #A1A1AA; color: #18181B; }
.sr-cat-pill.active { background: var(--primary-color, #18181B); border-color: var(--primary-color, #18181B); color: #FFFFFF; font-weight: 600; }

/* product grid */
.sr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sr-card { display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform 0.2s; text-decoration: none; color: inherit; }
.sr-card:visited { color: inherit; }
.sr-card:hover { transform: translateY(-2px); }
.sr-card-img { position: relative; width: 100%; height: 282px; border-radius: 8px; overflow: hidden; background: #F4F4F5; }
.sr-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sr-card-badge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #fff; text-transform: uppercase; font-family: 'Outfit', 'Pretendard', sans-serif; z-index: 2; }
.sr-card-badge--coming { background: var(--primary-color, #0F5C59); }
.sr-card-badge--ending { background: #1A1A1A; }
.sr-card-info { display: flex; flex-direction: column; gap: 6px; }
.sr-card-top { display: flex; align-items: center; justify-content: space-between; }
.sr-card-seller { font-size: 14px; font-weight: 500; color: #A1A1AA; }
.sr-card-icons { display: flex; gap: 8px; }
.sr-card-icons a, .sr-card-icons button { font-size: 14px; color: #D4D4D8; text-decoration: none; transition: color 0.2s; background: none; border: none; cursor: pointer; padding: 0; }
.sr-card-icons .sr-btn-wish:hover, .sr-card-icons .sr-btn-wish.active { color: #E53639; }
.sr-card-icons .sr-btn-cart:hover, .sr-card-icons .sr-btn-cart.active { color: #3b82f6; }
.sr-card-name { font-size: 14px; font-weight: 600; color: #18181B; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-card-date { font-size: 14px; color: #A1A1AA; font-family: 'Outfit', 'Pretendard', sans-serif; }
.sr-card-price { font-size: 16px; font-weight: 700; color: #18181B; }

/* posts table */
.sr-posts-table { width: 100%; border-collapse: collapse; }
.sr-posts-table th { padding: 12px; text-align: left; font-size: 14px; font-weight: 600; color: #71717A; border-bottom: 1px solid #E4E4E7; background: #FAFAFA; }
.sr-posts-table td { padding: 12px; font-size: 14px; color: #71717A; border-bottom: 1px solid #F4F4F5; }
.sr-posts-table .sr-post-title { color: #18181B; font-weight: 500; text-decoration: none; }
.sr-posts-table .sr-post-title:hover { color: var(--primary-color, #0F5C59); }
.sr-board-badge { display: inline-flex; padding: 2px 8px; background: #EFF6FF; border-radius: 4px; font-size: 14px; font-weight: 500; color: #3B82F6; margin-right: 8px; }

/* loading */
.sr-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; }
.sr-spinner { width: 32px; height: 32px; border: 3px solid #E4E4E7; border-top-color: var(--primary-color, #18181B); border-radius: 50%; animation: sr-spin 0.8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-loading p { font-size: 14px; color: #A1A1AA; }

/* no results */
.sr-no-results { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 20px; text-align: center; }
.sr-no-results i { font-size: 48px; color: #D4D4D8; }
.sr-no-results h3 { font-size: 18px; font-weight: 600; color: #71717A; }
.sr-no-results p { font-size: 14px; color: #A1A1AA; }

/* search responsive */
/* 1400px: max()로 자동 처리됨 */
@media (max-width: 1024px) {
  .sr-breadcrumb { padding: 16px 24px 0; }
  .sr-title-section { padding: 8px 24px 24px; }
  .sr-search-wrap { padding: 0 24px; }
  .sr-info { padding: 24px 24px 0; grid-template-columns: repeat(2, 1fr); }
  .sr-info-col { min-width: 0; }
  .sr-results { padding: 32px 24px 80px; }
  .sr-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .sr-card-img { height: 220px; }
}
@media (max-width: 768px) {
  .sr-breadcrumb { padding: 16px 20px 0; }
  .sr-title-section { padding: 8px 20px 24px; }
  .sr-title-section h1 { font-size: 24px; }
  .sr-search-wrap { padding: 0 20px; }
  .sr-search-row { flex-wrap: wrap; }
  .sr-search-select { width: 100%; }
  .sr-search-box { width: 100%; }
  .sr-info { padding: 24px 20px 0; grid-template-columns: 1fr; }
  .sr-info-col { min-width: 0; }
  .sr-results { padding: 32px 20px 60px; }
  .sr-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sr-card-img { height: 180px; }
}
/* --------------------------------------------------------------------------------------- */

/* ======================== MYPAGE DASHBOARD & EDIT ======================== */
.mp-page-title-section {
  padding: 32px max(calc((100% - 1200px) / 2), 20px) 24px;
}
.mp-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; margin-bottom: 8px;
}
.mp-breadcrumb a { color: #A1A1AA; text-decoration: none; font-weight: 500; }
.mp-breadcrumb span { color: #D4D4D8; }
.mp-breadcrumb .current { color: #18181B; font-weight: 600; }
.mp-page-title {
  font-size: 32px; font-weight: 800; color: #18181B; letter-spacing: -0.5px;
  font-family: 'Pretendard', sans-serif;
}
.mp-body-wrap {
  display: flex; gap: 32px; padding: 0 max(calc((100% - 1200px) / 2), 20px) 120px;
  font-family: 'Pretendard', sans-serif;
}

/* Sidebar */
.mp-sidebar { width: 220px; flex-shrink: 0; }
.mp-profile-card {
  background: #F9FAFB; border-radius: 12px; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mp-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: #E4E4E7;
  display: flex; align-items: center; justify-content: center;
  color: #A1A1AA; font-size: 28px; overflow: hidden; flex-shrink: 0;
}
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-user-name { font-size: 16px; font-weight: 700; color: #18181B; }
.mp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #18181B; color: #FFF; font-size: 14px; font-weight: 600;
  padding: 4px 10px; border-radius: 12px;
}
.mp-badge i { color: #FFF; font-size: 14px; }
.mp-badge svg { flex-shrink: 0; color: #FFF; }
.mp-badge-standard { background: #27272A; }
.mp-badge-standard i, .mp-badge-standard svg { color: #FFF; }
.mp-badge-basic { background: #71717A; }
.mp-badge-basic i, .mp-badge-basic svg { color: #FFF; }
.mp-user-email { font-size: 14px; color: #A1A1AA; }
.mp-sub-info { width: 100%; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mp-sub-line { display: flex; justify-content: space-between; }
.mp-sub-label { font-size: 14px; color: #A1A1AA; }
.mp-sub-value { font-size: 14px; font-weight: 600; color: #52525B; }
.mp-edit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 36px; border-radius: 8px;
  border: 1px solid #E4E4E7; background: transparent;
  font-size: 14px; font-weight: 500; color: #52525B;
  text-decoration: none; cursor: pointer;
}
.mp-edit-btn:hover { background: #F4F4F5; }

/* Nav Menu */
.mp-nav { padding-top: 16px; }
.mp-nav-group {
  padding: 0 0 16px; margin-bottom: 0;
  border-bottom: 1px solid #F4F4F5;
}
.mp-nav-group:last-child { border-bottom: none; padding-bottom: 0; }
.mp-nav-group + .mp-nav-group { padding-top: 16px; }
.mp-nav-label {
  font-size: 14px; font-weight: 600; color: #A1A1AA;
  letter-spacing: 1px; padding: 0 4px 8px;
}
.mp-nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: #52525B;
  text-decoration: none; transition: background .15s;
}
.mp-nav-item i { width: 16px; color: #71717A; font-size: 14px; text-align: center; }
.mp-nav-item svg { flex-shrink: 0; color: #71717A; }
.mp-nav-item:hover { background: #F4F4F5; }
.mp-nav-item.active {
  background: #18181B; color: #FFF; font-weight: 600;
}
.mp-nav-item.active i, .mp-nav-item.active svg { color: #FFF; }
.mp-nav-item.mp-nav-sub { padding-left:32px; font-size:14px; height:34px; color:#71717A; }
.mp-nav-item.mp-nav-sub i { font-size:14px; }
.mp-nav-item.mp-nav-sub svg { color: #71717A; }
.mp-nav-item.mp-nav-sub.active { color:#FFF; }
.mp-nav-item.mp-nav-sub.active svg { color: #FFF; }
.mp-nav-danger { opacity: .55; }
.mp-nav-danger:hover { opacity: 1; color: #991B1B; background: #FEF2F2; }

/* Main Content */
.mp-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }

/* Stats Row */
.mp-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mp-stat-card {
  border-radius: 12px; border: 1px solid #F4F4F5; background: #FFF;
  overflow: hidden;
}
.mp-stat-top { height: 4px; border-radius: 12px 12px 0 0; }
.mp-stat-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.mp-stat-head { display: flex; justify-content: space-between; align-items: center; }
.mp-stat-label { font-size: 14px; font-weight: 600; color: #71717A; }
.mp-stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.mp-stat-val { font-size: 28px; font-weight: 700; color: #18181B; font-family: 'Outfit', 'Pretendard', sans-serif; }
.mp-stat-sub { font-size: 14px; color: #A1A1AA; }

/* Sections */
.mp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mp-section-header h2 { font-size: 18px; font-weight: 700; color: #18181B; margin: 0; }
.mp-more-link { font-size: 14px; font-weight: 500; color: #A1A1AA; text-decoration: none; }
.mp-more-link:hover { color: #52525B; }

/* Group Buy Cards */
.mp-gg-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mp-gg-card {
  border: 1px solid #E4E4E7; border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.mp-gg-top { display: flex; justify-content: space-between; align-items: center; }
.mp-gg-badge {
  font-size: 14px; font-weight: 600; color: #18181B;
  background: #F4F4F5; padding: 2px 8px; border-radius: 11px;
}
.mp-gg-pct { font-size: 14px; font-weight: 700; color: #18181B; font-family: 'Outfit', sans-serif; }
.mp-gg-name { font-size: 14px; font-weight: 600; color: #18181B; }
.mp-gg-progress-bg { height: 6px; background: #E4E4E7; border-radius: 3px; overflow: hidden; }
.mp-gg-progress-bar { height: 100%; background: #A1A1AA; border-radius: 3px; transition: width .3s; }
.mp-gg-info { display: flex; justify-content: space-between; font-size: 14px; color: #71717A; }
.mp-empty-msg { color: #A1A1AA; font-size: 14px; padding: 32px 20px; text-align: center; border: 1px solid #E4E4E7; border-radius: 8px; grid-column: 1 / -1; }

/* Order Table */
.mp-order-table { border: 1px solid #E4E4E7; border-radius: 8px; overflow: hidden; }
.mp-order-thead {
  display: flex; background: #F9FAFB; height: 44px;
  border-bottom: 1px solid #E4E4E7;
}
.mp-order-row { display: flex; min-height: 48px; border-bottom: 1px solid #F4F4F5; }
.mp-order-row:last-child { border-bottom: none; }
.mp-order-col {
  display: flex; align-items: center; padding: 0 12px;
  font-size: 14px; color: #52525B;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-order-thead .mp-order-col { font-size: 14px; font-weight: 600; color: #71717A; justify-content: center; }
.mp-col-no { width: 220px; justify-content: center; font-family: 'Outfit', 'Pretendard', sans-serif; font-size: 13px; }
.mp-col-name { flex: 1; min-width: 0; }
.mp-col-date { width: 100px; justify-content: center; font-family: 'Outfit', 'Pretendard', sans-serif; }
.mp-col-price { width: 100px; justify-content: center; }
.mp-col-status { width: 90px; justify-content: center; }
.mp-status-badge {
  font-size: 14px; font-weight: 600; padding: 2px 10px; border-radius: 12px;
}
.mp-status-confirmed { background: #F4F4F5; color: #18181B; }
.mp-status-pending { background: #F4F4F5; color: #71717A; }
.mp-status-cancelled { background: #F4F4F5; color: #A1A1AA; }
.mp-empty-row { justify-content: center; }

/* Notifications */
.mp-noti-list { border: 1px solid #E4E4E7; border-radius: 8px; overflow: hidden; }
.mp-noti-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #F4F4F5;
}
.mp-noti-item:last-child { border-bottom: none; }
.mp-noti-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--primary-color, #0F5C59); flex-shrink: 0;
}
.mp-noti-dot.read { background: #D4D4D8; }
.mp-noti-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mp-noti-text { font-size: 14px; font-weight: 500; color: #18181B; }
.mp-noti-item.read .mp-noti-text { color: #71717A; }
.mp-noti-time { font-size: 14px; color: #A1A1AA; }

/* Quick Links */
.mp-quick-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mp-link-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px; border: 1px solid #F4F4F5; border-radius: 12px;
  text-decoration: none; transition: background .15s;
}
.mp-link-card svg { flex-shrink: 0; }
.mp-link-card span { font-size: 14px; font-weight: 600; color: #18181B; }
.mp-link-card:hover { background: #F9FAFB; }

/* ======================== ORDER LIST ======================== */
.ol-subtitle { font-size: 14px; color: #A1A1AA; margin-top: 4px; }

.ol-search-filter {
  border: 1px solid #E4E4E7; border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.ol-search-title { font-size: 15px; font-weight: 600; color: #18181B; }
.ol-search-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ol-select-wrap { position: relative; }
.ol-select {
  height: 40px; width: 140px; padding: 0 30px 0 14px; border: 1px solid #E4E4E7;
  border-radius: 6px; font-size: 14px; color: #52525B; line-height: 38px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family: 'Pretendard', sans-serif; cursor: pointer;
}
.ol-select:focus { outline: none; }
.ol-select-icon { display: none; }
.ol-date-wrap { position: relative; }
.ol-date-input {
  height: 40px; width: 160px; padding: 0 12px; border: 1px solid #E4E4E7;
  border-radius: 8px; font-size: 14px; color: #52525B;
  font-family: 'Pretendard', sans-serif; background: #FFF; cursor: pointer;
}
.ol-date-input:focus { outline: none; }
.ol-tilde { color: #71717A; font-size: 14px; }
.ol-search-btn {
  height: 40px; padding: 0 24px; border: none; border-radius: 8px;
  background: #18181B; color: #FFF; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'Pretendard', sans-serif;
}
.ol-search-btn:hover { background: #27272A; }

.ol-table-wrap { width: 100%; }
.ol-thead {
  display: flex; height: 48px; background: #F9FAFB;
  border-bottom: 1px solid #E4E4E7;
}
.ol-th {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #52525B;
}
.ol-col-date { width: 95px; }
.ol-col-no { width: 220px; }
.ol-col-product { flex: 1; justify-content: center !important; min-width: 0; }
.ol-th.ol-col-product { justify-content: center !important; }
.ol-col-market { width: 120px; }
.ol-col-tracking { width: 120px; }
.ol-col-price { width: 110px; }
.ol-col-action { width: 142px; }

.ol-row {
  display: flex; align-items: center; min-height: 72px;
  border-bottom: 1px solid #F4F4F5;
}
.ol-td {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #71717A; min-height: 72px;
}
.ol-td.ol-col-product { padding: 12px; justify-content: flex-start !important; }
.ol-td.ol-col-no span { font-family: 'Outfit', sans-serif; font-size: 14px; }
.ol-td.ol-col-tracking span { font-family: 'Outfit', sans-serif; font-size: 14px; color: #52525B; }
.ol-td.ol-col-price span { font-size: 14px; font-weight: 500; color: #18181B; }
.ol-td.ol-col-action { gap: 6px; }

.ol-prod-img {
  width: 48px; height: 48px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; background: #F4F4F5;
}
.ol-prod-info { padding-left: 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ol-prod-name { font-size: 14px; font-weight: 500; color: #18181B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-prod-opt { font-size: 14px; color: #A1A1AA; }

.ol-btn-detail {
  height: 28px; padding: 0 10px; border: none; border-radius: 6px;
  background: #18181B; color: #FFF; font-size: 10px; font-weight: 500;
  cursor: pointer; font-family: 'Pretendard', sans-serif;
}
.ol-btn-detail:hover { background: #27272A; }
.ol-btn-review {
  height: 28px; padding: 0 10px; border: 1px solid #D4D4D8; border-radius: 6px;
  background: #FFF; color: #52525B; font-size: 10px; font-weight: 500;
  cursor: pointer; font-family: 'Pretendard', sans-serif;
}
.ol-btn-review:hover { background: #F9FAFB; }

.ol-empty-row {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; color: #A1A1AA; font-size: 14px;
  border-bottom: 1px solid #F4F4F5;
}

.ol-detail-row {
  background: #FAFAFA; border-bottom: 1px solid #E4E4E7;
  border-top: 1px solid #E4E4E7;
}
.ol-detail-content { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.ol-detail-cols { display: flex; gap: 20px; }
.ol-detail-section { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ol-detail-title { font-size: 14px; font-weight: 600; color: #18181B; }

.ol-mini-table { border: 1px solid #E4E4E7; border-radius: 8px; overflow: hidden; background: #FFF; }
.ol-mini-thead {
  display: flex; height: 36px; align-items: center; padding: 0 12px;
  background: #F9FAFB; border-bottom: 1px solid #E4E4E7;
  font-size: 14px; font-weight: 600; color: #71717A;
}
.ol-mini-row {
  display: flex; align-items: center; padding: 10px 12px;
  font-size: 14px; color: #52525B; border-bottom: 1px solid #F4F4F5;
}
.ol-mini-row:last-child { border-bottom: none; }
.ol-mini-col { display: flex; align-items: center; }

.ol-btn-track {
  font-size: 14px; font-weight: 500; color: #FFF; background: #18181B;
  padding: 4px 10px; border-radius: 4px; text-decoration: none;
}

.ol-detail-total {
  background: #18181B; color: #FFF; font-size: 14px; font-weight: 600;
  padding: 14px 20px; border-radius: 8px; text-align: right;
}

.ol-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding-top: 24px;
}
.ol-pg-btn {
  width: 32px; height: 32px; border: 1px solid #D4D4D8; border-radius: 6px;
  background: #FFF; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #52525B; font-size: 14px;
}
.ol-pg-btn:disabled { color: #D4D4D8; cursor: default; border-color: #E4E4E7; }
.ol-pg-btn:not(:disabled):hover { background: #F4F4F5; }
.ol-pg-num {
  width: 32px; height: 32px; border: none; border-radius: 6px; background: transparent;
  font-family: 'Outfit', sans-serif; font-size: 14px; color: #71717A;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ol-pg-num:hover { background: #F4F4F5; }
.ol-pg-num.active { background: #18181B; color: #FFF; font-weight: 600; }

@media (max-width: 1280px) {
  .ol-col-market, .ol-col-tracking { display: none; }
  .ol-col-action { width: 100px; }
}
@media (max-width: 768px) {
  .ol-search-row { flex-direction: column; align-items: stretch; }
  .ol-select, .ol-date-input { width: 100%; }
  .ol-thead { display: none; }
  .ol-row { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .ol-td { min-height: auto; }
  .ol-col-date, .ol-col-no, .ol-col-market, .ol-col-tracking { display: none; }
  .ol-col-product { flex: 1; width: 100%; }
  .ol-col-price { width: auto; }
  .ol-col-action { width: auto; }
  .ol-detail-cols { flex-direction: column; }
}

/* ======================== MYPAGE EDIT FORM ======================== */
.mp-form-card {
  border: 1px solid #E4E4E7; border-radius: 12px;
  padding: 32px;
}
.mp-field-group { margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.mp-field-label { font-size: 14px; font-weight: 600; color: #18181B; }
.mp-required { color: var(--primary-color, #0F5C59); }
.mp-input {
  width: 100%; height: 44px; border: 1px solid #E4E4E7; border-radius: 8px;
  padding: 0 14px; font-size: 14px; color: #18181B;
  font-family: 'Pretendard', sans-serif; box-sizing: border-box;
  outline: none; transition: border-color .15s;
}
.mp-input:focus { border-color: #A1A1AA; }
.mp-input[readonly] { background: #FAFAFA; }
.mp-input-short { max-width: 160px; }
.mp-field-help { font-size: 14px; color: #A1A1AA; }
.mp-divider { height: 1px; background: #F4F4F5; margin: 8px 0; }
.mp-address-row { display: flex; gap: 8px; }
.mp-btn-postcode {
  height: 44px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #E4E4E7; background: #FFF;
  font-size: 14px; font-weight: 500; color: #52525B;
  cursor: pointer; white-space: nowrap;
}
.mp-btn-postcode:hover { background: #F4F4F5; }

/* Profile Upload */
.mp-profile-upload { display: flex; align-items: flex-start; gap: 20px; }
.mp-profile-preview {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: #F4F4F5; border: 2px dashed #D4D4D8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
.mp-profile-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.mp-profile-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #A1A1AA; font-size: 14px;
}
.mp-profile-placeholder i { font-size: 20px; }
.mp-profile-upload-info {
  display: flex; flex-direction: column; gap: 8px; padding-top: 8px;
}
.mp-btn-upload {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #E4E4E7; background: #FFF;
  font-size: 14px; font-weight: 500; color: #52525B;
  cursor: pointer; font-family: 'Pretendard', sans-serif;
  transition: background .15s;
}
.mp-btn-upload:hover { background: #F4F4F5; }
.mp-btn-remove-profile {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #FEE2E2; background: #FFF;
  font-size: 14px; font-weight: 500; color: #EF4444;
  cursor: pointer; font-family: 'Pretendard', sans-serif;
  transition: background .15s;
}
.mp-btn-remove-profile:hover { background: #FEF2F2; }
.mp-form-actions {
  display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px;
}
.mp-btn-cancel {
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 32px; border-radius: 8px;
  border: 1px solid #E4E4E7; background: #FFF;
  font-size: 14px; font-weight: 500; color: #52525B;
  text-decoration: none; cursor: pointer;
}
.mp-btn-cancel:hover { background: #F4F4F5; }
.mp-btn-save {
  height: 44px; padding: 0 32px; border-radius: 8px;
  border: none; background: #18181B; color: #FFF;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.mp-btn-save:hover { background: #27272A; }

/* Mypage Responsive */
@media (max-width: 1280px) {
  .mp-page-title-section { padding: 32px 40px 24px; }
  .mp-body-wrap { padding: 0 40px 60px; }
}
@media (max-width: 900px) {
  .mp-page-title-section { padding: 24px 20px 16px; }
  .mp-body-wrap { padding: 0 20px 40px; flex-direction: column; }
  .mp-sidebar { width: 100%; }
  .mp-profile-card { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .mp-avatar { width: 48px; height: 48px; font-size: 20px; }
  .mp-nav { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
  .mp-nav-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: none; padding: 0; }
  .mp-nav-group + .mp-nav-group { padding-top: 0; }
  .mp-nav-label { display: inline-flex; width: auto; padding: 0 8px 0 0; margin: 0; font-size: 12px; white-space: nowrap; border-right: 1px solid #E4E4E7; margin-right: 2px; }
  .mp-nav-item { height: 32px; font-size: 14px; padding: 0 10px; border-radius: 6px; border: 1px solid #E4E4E7; display: inline-flex; gap: 4px; }
  .mp-stats-row { grid-template-columns: repeat(2, 1fr); }
  .mp-gg-row { grid-template-columns: 1fr; }
  .mp-quick-links { grid-template-columns: repeat(3, 1fr); }
  .mp-col-no { width: 100px; font-size: 12px; }
  .mp-col-date, .mp-col-price { width: 80px; }
}
/* ======================== GOLDHAND BOARD ======================== */
/* Tab Nav */
.gh-tab-nav {
  display:flex; width:100%;
  border-bottom:2px solid #E4E4E7;
}
.gh-tab {
  display:flex; align-items:center; gap:8px;
  padding:12px 24px; cursor:pointer;
  font-size:14px; font-weight:500; color:#A1A1AA;
  transition:color .15s;
}
.gh-tab.active {
  color:#18181B; font-weight:700;
  border-bottom:2px solid #18181B;
  margin-bottom:-2px;
}
.gh-tab:hover { color:#18181B; }

/* Tab Panels */
.gh-tab-panel { display:none; flex-direction:column; gap:24px; width:100%; }
.gh-tab-panel.active { display:flex; }

/* Stat Cards */
.gh-stat-card {
  display:flex; flex-direction:column; gap:8px;
  flex:1; padding:20px; border-radius:12px;
  background:#FAFAFA; border:1px solid #E4E4E7;
}
.gh-stat-top {
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.gh-stat-label { font-size:14px; font-weight:500; color:#71717A; }
.gh-stat-val { font-family:'Outfit',sans-serif; font-size:24px; font-weight:700; color:#18181B; }

/* Table */
.gh-thead {
  display:flex; align-items:center; height:48px; padding:0 16px;
  background:#F9FAFB; border-bottom:1px solid #E4E4E7; width:100%;
}
.gh-th {
  display:flex; align-items:center;
  font-size:14px; font-weight:600; color:#71717A; font-family:'Pretendard',sans-serif;
}
.gh-trow {
  display:flex; align-items:center; height:52px; padding:0 16px;
  border-bottom:1px solid #F4F4F5; width:100%;
  text-decoration:none; cursor:pointer; transition:background .15s;
}
.gh-trow:hover { background:#FAFAFA; }
.gh-td {
  display:flex; align-items:center;
  font-size:14px; color:#18181B; font-family:'Pretendard',sans-serif;
}

/* Gold Hand Grid */
.gh-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; width:100%;
}
.gh-card {
  display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:24px; border-radius:12px;
  border:1px solid #E4E4E7; transition:border-color .15s;
}
.gh-card:hover { border-color:#D4D4D8; }
.gh-card-avatar {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.gh-card-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:8px 20px; border-radius:8px;
  background:#18181B; color:#FFF;
  font-size:14px; font-weight:600; font-family:'Pretendard',sans-serif;
  text-decoration:none; transition:background .15s;
}
.gh-card-btn:hover { background:#27272A; }

/* Modal */
.gh-modal-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.5); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.gh-modal {
  background:#FFF; border-radius:16px; width:520px; max-height:90vh;
  overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.gh-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 24px 0;
}
.gh-modal-body {
  display:flex; flex-direction:column; gap:20px; padding:24px;
}
.gh-modal-footer {
  display:flex; justify-content:flex-end; gap:8px;
  padding:0 24px 24px;
}
.gh-star {
  font-size:24px; color:#D4D4D8; cursor:pointer;
  transition:color .15s;
}

/* Form */
.gh-form-group { display:flex; flex-direction:column; gap:6px; }
.gh-form-label { font-size:14px; font-weight:600; color:#18181B; }
.gh-form-input {
  padding:10px 12px; border-radius:8px; border:1px solid #D4D4D8;
  font-size:14px; font-family:'Pretendard',sans-serif; outline:none;
  transition:border-color .15s;
}
.gh-form-input:focus { border-color:#18181B; }
.gh-form-textarea {
  padding:10px 12px; border-radius:8px; border:1px solid #D4D4D8;
  font-size:14px; font-family:'Pretendard',sans-serif; outline:none;
  resize:vertical; transition:border-color .15s;
}
.gh-form-textarea:focus { border-color:#18181B; }

/* Dropzone */
.gh-dropzone {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:32px; border-radius:12px;
  border:2px dashed #D4D4D8; background:#FAFAFA;
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.gh-dropzone:hover, .gh-dropzone-active {
  border-color:#18181B; background:#F4F4F5;
}
.gh-file-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:8px;
  border:1px solid #E4E4E7; background:#FFF;
  transition:background .15s;
}
.gh-file-item:hover { background:#FAFAFA; }

/* ======================== APPLICATION FORMS ======================== */
.app-formCard {
  display:flex; flex-direction:column; gap:24px; width:100%;
  padding:32px; border-radius:12px; border:1px solid #E4E4E7; background:#FFF;
}
.app-section-title {
  font-size:16px; font-weight:700; color:#18181B; padding-bottom:4px;
}
.app-field-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%;
}
.app-field-grid-3 {
  grid-template-columns:1fr 1fr 1fr;
}
.app-field-group {
  display:flex; flex-direction:column; gap:6px; width:100%;
}
.app-label {
  font-size:14px; font-weight:600; color:#18181B;
}
.app-req { color:var(--primary-color, #0F5C59); }
.app-input {
  height:44px; padding:0 14px; border-radius:8px; border:1px solid #E4E4E7;
  font-size:14px; color:#18181B; background:#FFF; outline:none; width:100%;
  box-sizing:border-box; transition:border-color .15s;
}
.app-input:focus { border-color:#18181B; }
.app-input::placeholder { color:#A1A1AA; }
.app-textarea {
  padding:12px 14px; border-radius:8px; border:1px solid #E4E4E7;
  font-size:14px; color:#18181B; background:#FFF; outline:none; width:100%;
  box-sizing:border-box; resize:vertical; font-family:inherit; transition:border-color .15s;
}
.app-textarea:focus { border-color:#18181B; }
.app-textarea::placeholder { color:#A1A1AA; }
.app-help {
  font-size:14px; color:#A1A1AA; margin-top:2px;
}
.app-divider {
  height:1px; background:#F4F4F5; width:100%;
}
.app-info-box {
  display:flex; align-items:flex-start; gap:12px; padding:16px 20px;
  border-radius:12px; width:100%;
}
.app-info-icon {
  flex-shrink:0; font-size:18px; margin-top:1px;
}
.app-info-text {
  display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.6;
}
.app-info-text strong { font-size:14px; }
.app-info-orange {
  background:#FFF7ED; border:1px solid #FED7AA;
}
.app-info-orange .app-info-icon { color:#9A3412; }
.app-info-orange .app-info-text { color:#9A3412; }
.app-info-blue {
  background:#F0F9FF; border:1px solid #BAE6FD;
}
.app-info-blue .app-info-icon { color:#0C4A6E; }
.app-info-blue .app-info-text { color:#0C4A6E; }
.app-info-purple {
  background:#FDF4FF; border:1px solid #E9D5FF;
}
.app-info-purple .app-info-icon { color:#6B21A8; }
.app-info-purple .app-info-text { color:#6B21A8; }
.app-agree-box {
  display:flex; flex-direction:column; gap:12px;
  padding:16px 20px; border-radius:8px; background:#FAFAFA; width:100%;
}
.app-checkbox-label {
  display:flex; align-items:center; gap:8px; font-size:14px; color:#18181B; cursor:pointer;
}
.app-checkbox-label input[type="checkbox"] {
  width:18px; height:18px; accent-color:#18181B; cursor:pointer;
}
.app-terms-text {
  display:flex; flex-direction:column; gap:4px; padding-left:26px;
}
.app-terms-text p {
  margin:0; font-size:14px; color:#71717A; line-height:1.6;
}
.app-terms-text p::before {
  content:'•'; margin-right:6px;
}
.app-form-actions {
  display:flex; gap:12px; justify-content:flex-end; width:100%; padding-top:8px;
}
.app-btn-cancel {
  padding:12px 24px; border-radius:8px; border:1px solid #D4D4D8;
  background:#FFF; font-size:14px; font-weight:500; color:#52525B; cursor:pointer;
}
.app-btn-cancel:hover { background:#F4F4F5; }
.app-btn-submit {
  padding:12px 32px; border-radius:8px; border:none;
  background:#18181B; color:#FFF; font-size:14px; font-weight:600; cursor:pointer;
}
.app-btn-submit:hover { background:#27272A; }
.app-btn-outline {
  padding:0 16px; height:44px; border-radius:8px; border:1px solid #D4D4D8;
  background:#FFF; font-size:14px; font-weight:500; color:#18181B; cursor:pointer;
  white-space:nowrap;
}
.app-btn-outline:hover { background:#F4F4F5; }
.app-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:6px; background:#F4F4F5;
  font-size:14px; font-weight:500; color:#52525B;
}

/* ======================== TOKEN SHOP ======================== */
.ts-current-card {
  width:100%; padding:28px 32px; border-radius:16px; background:#18181B;
}
.ts-current-row {
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.ts-current-left {
  display:flex; align-items:center; gap:12px;
}
.ts-coin-icon {
  width:44px; height:44px; border-radius:22px; background:#FBBF24;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ts-token-info {
  display:flex; flex-direction:column; gap:2px;
}
.ts-current-right {
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.ts-packages-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; width:100%;
}
.ts-pkg-card {
  display:flex; flex-direction:column; gap:16px; padding:28px 24px;
  border-radius:12px; border:1px solid #E4E4E7; background:#FFF;
  height:364px; box-sizing:border-box;
}
.ts-pkg-popular {
  background:#FFF1F5; border:2px solid #F96798;
}
.ts-pkg-header {
  display:flex; align-items:center; justify-content:space-between;
}
.ts-pkg-name {
  font-size:16px; font-weight:700; color:#18181B;
}
.ts-badge-popular {
  padding:4px 10px; border-radius:12px; background:var(--primary-color, #0F5C59);
  font-size:14px; font-weight:700; color:#FFF;
}
.ts-pkg-body {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; flex:1; width:100%;
}
.ts-pkg-count {
  font-family:'Outfit',sans-serif; font-size:40px; font-weight:800; color:#18181B;
}
.ts-pkg-unit {
  font-size:14px; color:#71717A;
}
.ts-badge-bonus {
  padding:4px 10px; border-radius:12px; background:#FEF3C7;
  font-size:14px; font-weight:600; color:#B45309;
}
.ts-pkg-price {
  display:flex; align-items:center; justify-content:center; gap:4px; width:100%;
}
.ts-price-amt {
  font-family:'Outfit',sans-serif; font-size:24px; font-weight:700; color:#18181B;
}
.ts-price-unit {
  font-size:14px; font-weight:500; color:#52525B;
}
.ts-pkg-desc {
  font-size:14px; color:#A1A1AA; text-align:center; margin:0; width:100%;
}
.ts-pkg-btn {
  width:100%; height:44px; border-radius:8px; border:1px solid #D4D4D8;
  background:#FFF; font-size:14px; font-weight:600; color:#52525B; cursor:pointer;
  transition:background .15s;
}
.ts-pkg-btn:hover { background:#F4F4F5; }
.ts-pkg-btn-pink {
  background:var(--primary-color, #0F5C59); border:none; color:#FFF;
}
.ts-pkg-btn-pink:hover { background:#E8567F; }
.ts-pkg-btn-dark {
  background:#18181B; border:none; color:#FFF;
}
.ts-pkg-btn-dark:hover { background:#27272A; }
.ts-notice {
  display:flex; flex-direction:column; gap:12px; width:100%;
  padding:24px 28px; border-radius:12px; background:#F9FAFB;
}
.ts-notice-title {
  font-size:16px; font-weight:700; color:#18181B;
}
.ts-notice-list {
  display:flex; flex-direction:column; gap:8px;
}
.ts-notice-list p {
  margin:0; font-size:14px; color:#52525B; line-height:1.5;
}
.ts-notice-list p::before {
  content:'•'; margin-right:8px;
}

/* ======================== END MYPAGE ======================== */

/* ======================== SECTION 08: 고객님을 위한 상품 ======================== */
.section08 { background:#fff; padding:40px 0 60px; }
.section08 .section-hdr { margin:28px 0 18px; }

/* 상단 태그 칩 바 */
.sec08-tagbar {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 8px;
  padding:16px 12px;
  background:#fff;
  border-radius:8px;
}
.sec08-tagbar__item {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:4px;
  text-decoration:none;
  color:var(--text-color, #18181B);
  background:var(--surface-color-soft, #F7F7F8);
  transition:background .15s ease, box-shadow .15s ease;
  width:auto;
  flex:0 0 auto;
  white-space:nowrap;
}
.sec08-tagbar__item:hover { background:var(--section-bg, #fff); box-shadow:0 2px 6px rgba(0,0,0,.06); }
.sec08-tagbar__icon {
  flex:0 0 24px;
  width:24px; height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  color:#fff;
  overflow:hidden;
}
.sec08-tagbar__icon--c0 { background:linear-gradient(135deg,#F96798,#FFA8C3); }
.sec08-tagbar__icon--c1 { background:linear-gradient(135deg,#7C7CFA,#AEB8FF); }
.sec08-tagbar__icon--c2 { background:linear-gradient(135deg,#FFB547,#FFD89A); }
.sec08-tagbar__icon--c3 { background:linear-gradient(135deg,#34C9A3,#8EE3CE); }
.sec08-tagbar__icon--c4 { background:linear-gradient(135deg,#4BA3FF,#9ED0FF); }
.sec08-tagbar__icon--c5 { background:linear-gradient(135deg,#E5535B,#F99A9F); }
.sec08-tagbar__icon--c6 { background:linear-gradient(135deg,#9E6BE0,#C9A8F0); }
.sec08-tagbar__label {
  font-size:13px; font-weight:500; color:var(--text-color, #27272A);
  white-space:nowrap;
}

/* 상품 슬라이더 */
.sec08-wrapper { position:relative; }
.sec08-slider { list-style:none; padding:0; margin:0; }
.sec08-slider li { list-style:none; }
.sec08-nav {
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:var(--section-bg, #fff);
  border:1px solid var(--border-color, #E4E4E7);
  display:inline-flex;
  align-items:center; justify-content:center;
  cursor:pointer;
  z-index:5;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .15s ease;
}
.sec08-nav:hover { background:var(--surface-color, #F4F4F5); }
.sec08-nav--prev { left:-22px; }
.sec08-nav--next { right:-22px; }
.sec08-card {
  display:block;
  text-decoration:none;
  color:inherit;
}
.sec08-card__imgbox {
  position:relative;
  width:100%;
  aspect-ratio:1 / 1.2;
  background:var(--surface-color, #F4F4F5);
  border-radius:8px;
  overflow:hidden;
}
.sec08-card__imgbox > img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.sec08-card:hover .sec08-card__imgbox > img { transform:scale(1.04); }
.sec08-card__like {
  position:absolute;
  top:10px; right:10px;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--bg-alpha-92, rgba(255,255,255,.92));
  border:none;
  display:inline-flex;
  align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--text-muted, #A1A1AA);
  font-size:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  transition:all .15s ease;
}
.sec08-card__like:hover { background:var(--section-bg, #fff); color:var(--primary-color, #0F5C59); }
.sec08-card__like.active { color:var(--primary-color, #0F5C59); }
.sec08-card__body { padding:10px 2px 0; }
.sec08-card__brand {
  margin:0 0 4px;
  font-size:12px; font-weight:500;
  color:var(--text-muted, #71717A);
}
.sec08-card__name {
  margin:0 0 8px;
  font-size:13px; font-weight:500;
  color:var(--text-color, #27272A);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:36px;
}
.sec08-card__price {
  margin:0;
  display:flex; align-items:baseline; gap:2px;
  font-size:16px; font-weight:700; color:var(--primary-color, #18181B);
}
.sec08-card__amount { font-size:16px; font-weight:700; }
.sec08-card__unit { font-size:13px; font-weight:500; color:var(--text-muted, #52525B); }
.sec08-card__tags {
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.sec08-card__tag {
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  background:var(--surface-color, #F4F4F5);
  color:var(--text-muted, #52525B);
  font-size:11px;
  font-weight:500;
  border-radius:4px;
  line-height:1.2;
}

/* 반응형 */
@media (max-width:768px) {
  .section08 { padding:24px 0 40px; }
  .sec08-tagbar {
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:8px;
    padding:12px 12px;
    -webkit-overflow-scrolling:touch;
  }
  .sec08-tagbar::-webkit-scrollbar { display:none; }
  .sec08-card__name { font-size:12px; min-height:34px; }
  .sec08-card__price { font-size:15px; }
  .sec08-nav--prev { left:-10px; }
  .sec08-nav--next { right:-10px; }
  .sec08-nav { width:36px; height:36px; }
}
/* ======================== END SECTION 08 ======================== */

/* ======================== SECTION 09 — 숏폼 ======================== */
.section09 {
  background: var(--section-bg, #111);
  color: var(--text-color, #fff);
}
.section09 .section-inner { padding: 48px 60px 56px; }
.section09 .section-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px;
}
.section09 .section-hdr__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-color, #333) !important;
  letter-spacing: -0.02em;
  margin: 0;
}
.section09 .section-hdr__more {
  font-size: 13px;
  color: var(--text-muted, #D4D4D8);
  text-decoration: none;
}
.section09 .section-hdr__more:hover { color: var(--text-color, #fff); }

/* 카테고리 탭 */
.sf-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.18));
  background: var(--surface-color-soft, rgba(255,255,255,0.06));
  color: var(--text-muted, #D4D4D8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sf-tab:hover {
  background: var(--surface-color, rgba(255,255,255,0.12));
  color: var(--text-color, #fff);
}
.sf-tab.is-active {
  background: var(--primary-color, #fff);
  color: var(--primary-contrast, #111);
  border-color: var(--primary-color, #fff);
}

/* 슬라이더 영역 */
.sf-wrapper { position: relative; }
.sf-slider { list-style: none; padding: 0; margin: 0; }
.sf-slider li { list-style: none; }

.sf-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--text-alpha-55, rgba(0,0,0,0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s ease;
  backdrop-filter: blur(4px);
}
.sf-nav:hover { background: var(--text-alpha-80, rgba(0,0,0,0.8)); }
.sf-nav--prev { left: -18px; }
.sf-nav--next { right: -18px; }

/* 카드 — 9:16 세로 숏폼 비율 */
.sf-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.sf-card__imgbox {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-color-strong, #1F1F23);
}
.sf-card__imgbox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sf-card:hover .sf-card__imgbox > img { transform: scale(1.05); }

.sf-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.sf-card__badge.badge-hot { background: #E53639; }
.sf-card__badge.badge-new { background: #16A34A; }
.sf-card__badge.badge-end { background: #E53639; }

.sf-card__like {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--text-alpha-45, rgba(0,0,0,0.45));
  color: var(--primary-contrast, #fff);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  backdrop-filter: blur(4px);
}
.sf-card__like:hover { background: var(--text-alpha-70, rgba(0,0,0,0.7)); color: var(--primary-color, #0F5C59); }
.sf-card__like.active { color: var(--primary-color, #0F5C59); }

/* 오버레이 — 제품 정보 */
.sf-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 12px 12px;
  background: linear-gradient(
    to top,
    var(--text-alpha-82, rgba(0,0,0,0.82)) 0%,
    var(--text-alpha-55, rgba(0,0,0,0.55)) 45%,
    transparent 100%
  );
  color: var(--primary-contrast, #fff);
}
.sf-card__seller {
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-contrast-muted, rgba(255,255,255,0.72));
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-contrast, #fff);
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sf-card__price {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-contrast, #fff);
  margin: 0;
}

/* 반응형 */
@media (max-width: 1024px) {
  .section09 .section-inner { padding: 36px 32px 44px; }
  .section09 .section-hdr__title { font-size: 19px; }
  .sf-nav--prev { left: -8px; }
  .sf-nav--next { right: -8px; }
  .sf-nav { width: 38px; height: 38px; }
}
@media (max-width: 640px) {
  .section09 .section-inner { padding: 28px 14px 36px; }
  .section09 .section-hdr__title { font-size: 17px; }
  .sf-tab { padding: 7px 13px; font-size: 12px; }
  .sf-card__name { font-size: 12px; }
  .sf-card__price { font-size: 14px; }
  .sf-nav { width: 34px; height: 34px; }
}
/* ======================== END SECTION 09 ======================== */

/* ======================== SECTION 10 — 지금 인기있는 상품 (랭킹) ======================== */
.section10 { background: var(--section-bg, #fff); }
.section10 .section-inner { padding: 48px 60px 56px; }
.section10 .section-hdr { display: flex; justify-content: space-between; align-items: center; margin: 0 0 16px; }
.section10 .section-hdr__title { font-size: 22px; font-weight: 800; color: var(--text-color, #111) !important; letter-spacing: -0.02em; margin: 0; }
.section10 .section-hdr__more { font-size: 13px; color: var(--text-muted, #6B7280); text-decoration: none; }
.section10 .section-hdr__more:hover { color: var(--text-color, #111); }

/* 카테고리 탭 */
.pr-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-color, #F3F4F6);
  margin-bottom: 20px;
}
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6B7280);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.pr-tab:hover { color: var(--text-color, #111); background: var(--surface-color, #F3F4F6); }
.pr-tab.is-active {
  background: var(--primary-color, #111);
  color: var(--primary-contrast, #fff);
}

/* 패널 + 페이지 레이아웃: 왼쪽 1개 big + 오른쪽 4x2 그리드 */
.pr-panel { position: relative; }
.pr-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
  align-items: stretch;
}

/* BIG 카드 (rank 1) */
.pr-big {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--surface-color-soft, #F9FAFB);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.pr-big:hover { transform: translateY(-2px); }
.pr-big__imgbox {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-color-strong, #E5E7EB);
  overflow: hidden;
}
.pr-big__imgbox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pr-big:hover .pr-big__imgbox > img { transform: scale(1.04); }
.pr-big__info { padding: 14px 14px 16px; }
.pr-big__seller { font-size: 12px; color: var(--text-muted, #6B7280); margin: 0 0 4px; }
.pr-big__name {
  font-size: 15px; font-weight: 600; color: var(--text-color, #111);
  margin: 0 0 6px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-big__price { font-size: 17px; font-weight: 800; color: var(--primary-color, #111); margin: 0; }

/* 4x2 작은 카드 그리드 */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 14px 14px;
}
.pr-cell {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}
.pr-cell:hover { transform: translateY(-2px); }
.pr-cell--empty { visibility: hidden; }
.pr-cell__imgbox {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-color, #F3F4F6);
  border-radius: 10px;
  overflow: hidden;
}
.pr-cell__imgbox > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pr-cell:hover .pr-cell__imgbox > img { transform: scale(1.05); }
.pr-cell__info { padding: 10px 2px 0; }
.pr-cell__seller { font-size: 11px; color: var(--text-subtle, #9CA3AF); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-cell__name {
  font-size: 12px; font-weight: 500; color: var(--text-color, #374151);
  margin: 0 0 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-cell__price { font-size: 14px; font-weight: 700; color: var(--primary-color, #111); margin: 0; }

/* 랭킹 번호 */
.pr-rank {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-weight: 800;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-rank--big {
  width: 38px; height: 38px;
  font-size: 17px;
}
.pr-rank--small {
  width: 26px; height: 26px;
  font-size: 13px;
  top: 8px; left: 8px;
  background: rgba(0,0,0,0.7);
}

/* 배지 */
.pr-badge {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.pr-badge.badge-hot { background: #E53639; }
.pr-badge.badge-new { background: #16A34A; }
.pr-badge.badge-end { background: #E53639; }

/* 찜 버튼 */
.pr-like {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--text-muted, #6B7280);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.pr-like:hover { background: #fff; color: var(--primary-color, #0F5C59); }
.pr-like.active { color: var(--primary-color, #0F5C59); }
.pr-like--small { width: 28px; height: 28px; font-size: 12px; bottom: 6px; right: 6px; }

/* 페이지네이션 */
.pr-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.pr-pager-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #E5E7EB);
  background: var(--section-bg, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.pr-pager-btn:hover { background: var(--surface-color-soft, #F9FAFB); border-color: var(--text-color, #111); }
.pr-pager-ind {
  font-size: 13px;
  color: var(--text-muted, #6B7280);
  min-width: 36px;
  text-align: center;
}
.pr-pager-current { color: var(--primary-color, #111); font-weight: 700; }

/* 반응형 */
@media (max-width: 1024px) {
  .section10 .section-inner { padding: 36px 32px 44px; }
  .section10 .section-hdr__title { font-size: 19px; }
  .pr-page { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-big__imgbox { aspect-ratio: 16/10; }
}
@media (max-width: 640px) {
  .section10 .section-inner { padding: 28px 14px 36px; }
  .section10 .section-hdr__title { font-size: 17px; }
  .pr-tab { padding: 6px 12px; font-size: 13px; }
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pr-cell__name { font-size: 11px; }
  .pr-cell__price { font-size: 13px; }
  .pr-big__name { font-size: 13px; }
  .pr-big__price { font-size: 15px; }
  .pr-rank--big { width: 30px; height: 30px; font-size: 14px; }
  .pr-rank--small { width: 22px; height: 22px; font-size: 11px; }
}
/* ======================== END SECTION 10 ======================== */

.ft-brand__logo-text { color: #fff; font-family: Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: 0; margin-bottom: 22px; }