/* =========================================================
   다다베이프(Dadavape) 스킨 — dadavape 톤 클린/모던 표준 스킨
   전략: 기본 스킨의 구조 CSS를 @import 로 상속받고,
         dadavape 톤(그린 브랜드 · 라운드 · 타이포)만 오버라이드한다.
   ========================================================= */

/* 1) 기본 스킨 구조 CSS 상속 (반드시 최상단) */
@import url("../../default/assets/skin.css");

/* 2) 폰트 (Pretendard + Noto Sans KR, latin 보조 DM Sans) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap");

/* =========================================================
   3) 디자인 토큰 (커스터마이저 미설정 시 fallback)
   ========================================================= */
:root {
	--fhs-primary: #1f9d55;      /* 인터랙션용 그린 (AA 대비 확보) */
	--fhs-primary-strong: #17803f;
	--fhs-brand: #51c568;        /* dadavape 로고 그린 (틴트) */
	--fhs-accent: #e8323c;       /* 할인/긴급 포인트 */
	--fhs-ink: #191919;          /* 제목 */
	--fhs-text: #333333;         /* 본문 */
	--fhs-muted: #6b7280;
	--fhs-line: #ececec;
	--fhs-surface: #ffffff;
	--fhs-bg: #f7f8f7;
	--fhs-radius: 14px;
	--fhs-radius-pill: 999px;
	--fhs-font: "Pretendard", "Noto Sans KR", "DM Sans", -apple-system, sans-serif;
	--fhs-shadow: 0 4px 20px rgba(0, 0, 0, .06);
	--fhs-shadow-hover: 0 10px 30px rgba(0, 0, 0, .10);
}

/* =========================================================
   4) 베이스 타이포
   ========================================================= */
.fluxshop, .fhs-shop, body.fluxshop-page {
	font-family: var(--fhs-font);
	color: var(--fhs-text);
	-webkit-font-smoothing: antialiased;
}
.fhs-section-title, .fhs-shop h1, .fhs-shop h2 {
	color: var(--fhs-ink);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* =========================================================
   5) 버튼 — 라운드 필 + 그린
   ========================================================= */
.fhs-btn,
.fhs-add-to-cart,
.fhs-cart-checkout,
.fhs-buy-now,
button.fhs-primary,
.fhs-checkout-submit,
#fhs-pay-btn {
	background: var(--fhs-primary);
	color: #fff;
	border: none;
	border-radius: var(--fhs-radius-pill);
	font-weight: 700;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fhs-btn:hover,
.fhs-add-to-cart:hover,
.fhs-cart-checkout:hover,
.fhs-buy-now:hover,
.fhs-checkout-submit:hover,
#fhs-pay-btn:hover {
	background: var(--fhs-primary-strong);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(31, 157, 85, .28);
}
.fhs-btn:focus-visible,
#fhs-pay-btn:focus-visible {
	outline: 3px solid rgba(31, 157, 85, .35);
	outline-offset: 2px;
}
/* 보조(아웃라인) 버튼 */
.fhs-btn--outline,
.fhs-cart-continue {
	background: #fff;
	color: var(--fhs-ink);
	border: 1.5px solid var(--fhs-line);
	border-radius: var(--fhs-radius-pill);
	font-weight: 600;
}
.fhs-btn--outline:hover,
.fhs-cart-continue:hover {
	border-color: var(--fhs-primary);
	color: var(--fhs-primary);
	background: #fff;
}

/* =========================================================
   6) 상품 카드 — 라운드 + 호버 리프트
   ========================================================= */
.fhs-product-card,
.fhs-card,
.fhs-loop-item {
	border-radius: var(--fhs-radius);
	overflow: hidden;
	background: var(--fhs-surface);
	border: 1px solid var(--fhs-line);
	transition: transform .22s ease, box-shadow .22s ease;
}
.fhs-product-card:hover,
.fhs-card:hover,
.fhs-loop-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--fhs-shadow-hover);
}
.fhs-product-card img,
.fhs-card img { transition: transform .4s ease; }
.fhs-product-card:hover img,
.fhs-card:hover img { transform: scale(1.03); }

/* 배지 — 브랜드 그린/포인트 */
.fhs-badge {
	border-radius: var(--fhs-radius-pill);
	font-weight: 700;
	font-size: 12px;
	padding: 3px 10px;
	background: var(--fhs-brand);
	color: #fff;
}
.fhs-badge--sale, .fhs-badge.is-sale { background: var(--fhs-accent); }
.fhs-badge--soldout, .fhs-badge.is-soldout { background: #9ca3af; }

/* 가격 */
.fhs-card-discount-rate, .fhs-price-sale { color: var(--fhs-accent); font-weight: 700; }
.fhs-price-origin { color: var(--fhs-muted); text-decoration: line-through; }

/* =========================================================
   7) 카테고리 탭 (dadavape 상단 카테고리 내비 톤)
   ========================================================= */
.fhs-category-tabs { border-bottom: 1px solid var(--fhs-line); gap: 4px; }
.fhs-cat-tab {
	font-weight: 600;
	color: var(--fhs-muted);
	border-radius: var(--fhs-radius-pill);
	padding: 8px 16px;
	transition: color .2s, background .2s;
}
.fhs-cat-tab:hover { color: var(--fhs-ink); }
.fhs-cat-tab.is-active, .fhs-cat-tab[aria-current="true"] {
	color: #fff;
	background: var(--fhs-primary);
}

/* =========================================================
   8) 폼/체크아웃 다듬기
   ========================================================= */
.fhs-form-row input[type="text"],
.fhs-form-row input[type="tel"],
.fhs-form-row input[type="email"],
.fhs-form-row select,
.fhs-cart-qtyinput {
	border-radius: 10px;
	border: 1px solid #d7dbd8;
}
.fhs-form-row input:focus,
.fhs-form-row select:focus {
	border-color: var(--fhs-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(31, 157, 85, .12);
}
.fhs-checkout-section, .fhs-cart-summary {
	border-radius: var(--fhs-radius);
	border: 1px solid var(--fhs-line);
	background: var(--fhs-surface);
}
.fhs-cart-summary__total, .fhs-summary-total { color: var(--fhs-ink); font-weight: 800; }

/* 무통장 결제 선택 시 강조 (FluxPay 애드온 결제수단) */
input[name="fhs_pg"][value="bank_transfer"]:checked + label,
.fhs-pg-option.is-bank.is-selected {
	border-color: var(--fhs-primary);
	box-shadow: 0 0 0 2px rgba(31, 157, 85, .18);
}

/* =========================================================
   9) 반응형 (360/768/1024/1280)
   ========================================================= */
@media (max-width: 1024px) {
	.fhs-products-grid, .fhs-loop-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
	.fhs-products-grid, .fhs-loop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
	.fhs-section-title, .fhs-shop h2 { font-size: 22px; }
}
@media (max-width: 480px) {
	#fhs-pay-btn, .fhs-cart-checkout { width: 100%; }
}

/* 접근성: 터치 타겟 */
.fhs-cat-tab, .fhs-btn, .fhs-add-to-cart, .fhs-icon-btn { min-height: 44px; }