@charset "utf-8";
/* 자동 생성(scripts/design/scope-felix-css.mjs) — 손으로 고치지 말 것. /felixlab/custom/custom.css 를 data-fx~="fx_custom" 화면에서만 */
/* 공식몰 화면 조정(원본 테마 위에 덧붙임 — 사용자 결정 2026-10-20~). 상품 카드(ProductCard.tsx)는 원본 테마 CSS 와 겹치지 않게 fx- 이름만 쓴다 */
:where(:root:has([data-fx~="fx_custom"])) .fx-card {display: block; position: relative; width: 100%; text-align: left;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card a {text-decoration: none;}
/* 테두리는 바깥 칸에(둥근 모서리 그대로). 원본 테마가 슬라이드 목록 그림에 직각 1px 테두리(.rb_swiper .rb_swiper_list img)를 줘서, 칸이 둥글게 잘라내면 모서리에서 테두리가 끊겨 보였다 */
:where(:root:has([data-fx~="fx_custom"])) .fx-card__img {position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; overflow: hidden; background: #f4f4f6;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__img img {display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border: 0 !important; border-radius: 0 !important; transition: transform .3s ease;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card:hover .fx-card__img img {transform: scale(1.03);}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__off {position: absolute; top: 10px; right: 10px; background: #FF5A5A; color: #fff; font-family: 'font-B', sans-serif; font-size: 12px; line-height: 1; padding: 5px 7px; border-radius: 6px;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__soldout {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55);}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__soldout span {background: rgba(0, 0, 0, .75); color: #fff; font-family: 'font-B', sans-serif; font-size: 12px; line-height: 1; padding: 7px 12px; border-radius: 999px;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__body {padding: 12px 2px 0;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__badges {display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge {display: inline-block; color: #fff; font-family: 'font-B', sans-serif; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 5px; letter-spacing: -0.2px;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--hit {background: #AA20FF;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--rec {background: #FFC700;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--new {background: #00A3FF;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--pop {background: #8ED100;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--sale {background: #FF5A5A;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--coupon {background: #d45959;}
:where(:root:has([data-fx~="fx_custom"])) .fx-badge--free {background: #25282B;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__cat {font-size: 13px; line-height: 1.3; color: #999; margin-bottom: 4px;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__name {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'font-B', sans-serif; font-size: 15px; line-height: 1.4; color: #25282b !important; word-break: keep-all;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__desc {margin-top: 4px; font-size: 13px; line-height: 1.4; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__price {margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__price s {font-size: 13px; color: #aaa;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__price b {font-family: 'font-B', sans-serif; font-weight: normal; font-size: 17px; color: #25282b;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__price b.is-sale {color: #AA20FF;}
:where(:root:has([data-fx~="fx_custom"])) .fx-card__wish {margin-top: 8px; display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1; color: #999;}

@media (max-width: 767px) {
  :where(:root:has([data-fx~="fx_custom"])) .fx-card__img {border-radius: 10px;}
  :where(:root:has([data-fx~="fx_custom"])) .fx-card__body {padding-top: 10px;}
  :where(:root:has([data-fx~="fx_custom"])) .fx-badge {padding: 5px 7px;} /* 원본 화면 배율 0.9 라 글자는 PC 와 같은 12px */
}

/* 휴대폰 바닥글: 원본 mobile.css 가 .inner 를 width:100% !important 로 강제해 회사 정보가 화면 왼쪽 끝에 붙던 것 → 좌우 20px 여백 */
@media (max-width: 1024px) {
  :where(:root:has([data-fx~="fx_custom"])) #footer .inner {box-sizing: border-box; padding-left: 20px !important; padding-right: 20px !important;}
}

/* 휴대폰 메인: 섹션 좌우 여백은 PC 값이 그대로 들어가(베스트셀러 50px) 상품 칸이 좁아지던 것 → 휴대폰에선 섹션 좌우 여백 없이(모듈 자체 20px 만) */
@media (max-width: 1024px) {
  :where(:root:has([data-fx~="fx_custom"])) .index .rb_section_box {padding-left: 0 !important; padding-right: 0 !important;}
}

/* 19금 입장 팝업(AdultGatePopup — 레퍼런스 몰 구성). 그룹 팝업(.rb_popups z-index 9999999999 → 브라우저 최대값)보다 위: 같은 최대값 + 문서에서 뒤 */
:where(:root:has([data-fx~="fx_custom"])) .fx-adult {position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(0, 0, 0, .7);}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__box {width: 100%; max-width: 720px; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(0, 0, 0, .35);}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__main {display: flex; align-items: center; gap: 32px; padding: 40px 44px; background: linear-gradient(135deg, #161616, #2b1515 55%, #6b1111); color: #fff !important; text-decoration: none; transition: filter .2s;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__main:hover {filter: brightness(1.1);}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__mark {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; border: 7px solid #fff; border-radius: 50%; background: #c51515; font-size: 52px; line-height: 1; box-shadow: 0 16px 40px rgba(0, 0, 0, .4);}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__text {display: block; min-width: 0;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__eyebrow {display: block; font-size: 13px; letter-spacing: .28em; color: #fecaca;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__title {display: block; margin-top: 10px; font-size: 34px; line-height: 1.25; font-weight: normal;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__desc {display: block; margin-top: 14px; font-size: 15px; line-height: 1.7; color: #fee2e2; word-break: keep-all;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__cta {display: inline-block; margin-top: 20px; padding: 12px 22px; border-radius: 999px; background: #fff; color: #a80f0f; font-size: 14px; transition: transform .2s;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__main:hover .fx-adult__cta {transform: translateX(4px);}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__btns {display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e5e7eb;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__btns button {padding: 16px 12px; border: 0; background: #fff; color: #555; font-size: 14px; cursor: pointer;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__btns button + button {border-left: 1px solid #e5e7eb;}
:where(:root:has([data-fx~="fx_custom"])) .fx-adult__btns button:hover {background: #f8fafc; color: #111;}
@media (max-width: 767px) {
  :where(:root:has([data-fx~="fx_custom"])) .fx-adult__main {flex-direction: column; gap: 20px; padding: 32px 24px; text-align: center;}
  :where(:root:has([data-fx~="fx_custom"])) .fx-adult__mark {width: 100px; height: 100px; border-width: 6px; font-size: 40px;}
  :where(:root:has([data-fx~="fx_custom"])) .fx-adult__title {font-size: 26px;}
  :where(:root:has([data-fx~="fx_custom"])) .fx-adult__desc {font-size: 14px;}
}