/* 소유: OpenCode (WP-OC) — Figma 파운데이션 토큰 기반 스타일 (RX GLOBAL_WEB_DESIGN v1.0)
   토큰 출처: 02_FOUNDATION / 03_COMPONENTS — dev handoff 초안용 */

:root {
	/* COLOR */
	--rxg-bg: #F7F7FA;
	--rxg-surface: #FFFFFF;
	--rxg-surface-2: #F2F2F2;
	--rxg-border: #EDEDF2;
	--rxg-primary: #1F1F1F;
	--rxg-primary-hover: #383838;
	--rxg-primary-pressed: #121212;
	--rxg-disabled: #E0E0E0;
	--rxg-text: #1F1F1F;
	--rxg-text-2: #666666;
	--rxg-accent: #2163D9;
	--rxg-danger: #C62828;
	/* RADIUS */
	--rxg-r4: 4px;
	--rxg-r8: 8px;
	--rxg-r12: 12px;
	--rxg-r16: 16px;
	--rxg-r-full: 999px;
	/* SPACING */
	--rxg-s4: 4px;
	--rxg-s8: 8px;
	--rxg-s12: 12px;
	--rxg-s16: 16px;
	--rxg-s20: 20px;
	--rxg-s24: 24px;
	--rxg-s32: 32px;
	--rxg-s40: 40px;
	--rxg-s48: 48px;
}

/* ── 공통 태그 (03_COMPONENTS 태그 규격) ────────────────────── */
.rxg-tag {
	display: inline-block;
	padding: var(--rxg-s4) var(--rxg-s8);
	border-radius: var(--rxg-r4);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: middle;
}
.rxg-tag--dark { background: var(--rxg-primary); color: #fff; }
.rxg-tag--light { background: var(--rxg-border); color: var(--rxg-primary); }

/* ── 가격 블록 (02_PRICE_BLOCK) ──────────────────────────────── */
.rxg-price-block {
	display: flex;
	flex-direction: column;
	gap: var(--rxg-s8);
	padding: var(--rxg-s16);
	background: var(--rxg-surface);
	border: 1px solid var(--rxg-border);
	border-radius: var(--rxg-r12);
	margin: var(--rxg-s12) 0;
}

.rxg-price-row {
	display: flex;
	align-items: center;
	gap: var(--rxg-s8);
	font-size: 15px;
}

.rxg-price-label { color: var(--rxg-text-2); font-size: 13px; min-width: 150px; }

.rxg-price-row del { color: #999; font-size: 13px; margin-right: var(--rxg-s8); }

.rxg-price-row b, .rxg-price-row .amount { font-variant-numeric: tabular-nums; }

.rxg-price-row--note { color: var(--rxg-text-2); font-size: 13px; }
.rxg-price-row--note a { color: var(--rxg-accent); font-weight: 600; }

.rxg-price-row--ta { font-weight: 700; color: var(--rxg-danger); }
.rxg-price-row--ta .amount, .rxg-price-row--ta b { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }

.rxg-event-banner {
	display: flex;
	align-items: center;
	gap: var(--rxg-s8);
	padding: var(--rxg-s12) var(--rxg-s16);
	background: var(--rxg-surface-2);
	border-radius: var(--rxg-r8);
	font-size: 13px;
	color: var(--rxg-text);
	margin-top: var(--rxg-s4);
}

/* ── 상태 배지 (03_PRODUCT_STATUS_BADGE) ─────────────────────── */
.rxg-status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rxg-s8);
	margin: var(--rxg-s8) 0;
	font-size: 12px;
	color: var(--rxg-text-2);
}
.rxg-status-badge__tag {
	display: inline-block;
	padding: var(--rxg-s4) var(--rxg-s8);
	border-radius: var(--rxg-r4);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--rxg-primary);
	letter-spacing: .4px;
}
.rxg-status-badge--soldout .rxg-status-badge__tag { background: var(--rxg-disabled); color: #777; }
.rxg-status-badge--lowstock .rxg-status-badge__tag { background: #333333; }

/* ── 추천 공유 패널 (09_REFERRAL_ACTION) ─────────────────────── */
.rxg-share-wrap {
	margin: var(--rxg-s16) 0;
	padding: var(--rxg-s16);
	background: var(--rxg-surface-2);
	border-radius: var(--rxg-r12);
	display: flex;
	flex-direction: column;
	gap: var(--rxg-s12);
}

.rxg-share-title {
	display: flex;
	align-items: center;
	gap: var(--rxg-s8);
	font-size: 14px;
	font-weight: 600;
}

.rxg-share-linkrow { display: flex; gap: var(--rxg-s8); flex-wrap: wrap; }

.rxg-share-url {
	flex: 1;
	min-width: 160px;
	padding: var(--rxg-s12);
	background: var(--rxg-surface);
	border-radius: var(--rxg-r8);
	font-size: 12px;
	color: #333;
	word-break: break-all;
	display: flex;
	align-items: center;
}

.rxg-share-hint { margin: 0; font-size: 12px; color: var(--rxg-text-2); }

.rxg-share-action {
	display: inline-block;
	padding: var(--rxg-s12) var(--rxg-s20);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--rxg-r8);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
}
.rxg-share-action--copy {
	background: var(--rxg-primary);
	color: #fff;
}
.rxg-share-action--copy:hover { background: var(--rxg-primary-hover); }
.rxg-share-action--open {
	background: var(--rxg-surface);
	color: var(--rxg-primary);
	border-color: #D8DBE2;
}
.rxg-share-action--kakao { background: #FEE500; color: #3B1E1E; }
.rxg-share-action--sms, .rxg-share-action--web { background: var(--rxg-surface); color: var(--rxg-primary); border-color: #D8DBE2; }

/* ── 공유 모달 (모바일 바텀시트 / PC 센터) ───────────────────── */
.rxg-modal-open { overflow: hidden; }

.rxg-share-modal {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.rxg-share-modal[hidden] { display: none; }

.rxg-share-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.rxg-share-modal__sheet {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: var(--rxg-r16) var(--rxg-r16) 0 0;
	padding: var(--rxg-s20) var(--rxg-s20) var(--rxg-s24);
	box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
	animation: rxgSheetUp .22s ease;
}

@keyframes rxgSheetUp {
	from { transform: translateY(24px); opacity: .4; }
	to   { transform: translateY(0);    opacity: 1; }
}

.rxg-share-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 22px;
	line-height: 1;
	border: 0;
	background: transparent;
	color: #666;
	cursor: pointer;
	padding: 6px;
}

.rxg-share-modal__title { margin: 0 0 6px; font-size: 17px; }

.rxg-share-modal__link {
	margin: 0 0 var(--rxg-s16);
	padding: 10px 12px;
	font-size: 12px;
	word-break: break-all;
	color: #555;
	background: var(--rxg-bg);
	border-radius: var(--rxg-r8);
}

.rxg-share-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rxg-s12);
}

@media (min-width: 600px) {
	.rxg-share-modal { align-items: center; padding: var(--rxg-s20); }

	.rxg-share-modal__sheet {
		border-radius: var(--rxg-r16);
		max-width: 420px;
	}
}

/* ── 타임어택 패널 (04_TIME_ATTACK) ──────────────────────────── */
.rxg-ta { min-height: 0; }

.rxg-ta-panel {
	display: flex;
	flex-direction: column;
	gap: var(--rxg-s12);
	padding: var(--rxg-s16);
	background: var(--rxg-primary);
	background-image: radial-gradient(600px 160px at 100% 0%, rgba(255,255,255,.08), transparent 60%);
	color: #fff;
	border-radius: var(--rxg-r12);
	margin: var(--rxg-s8) 0 var(--rxg-s16);
}

.rxg-ta-panel--ended { background: #757575; background-image: none; }

.rxg-ta-titlerow {
	display: flex;
	align-items: center;
	gap: var(--rxg-s8);
}

.rxg-ta-badge {
	display: inline-block;
	padding: var(--rxg-s4) var(--rxg-s8);
	border-radius: var(--rxg-r4);
	background: #fff;
	color: var(--rxg-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .4px;
}

.rxg-ta-title { font-size: 13px; font-weight: 500; }

.rxg-ta-stats {
	display: flex;
	gap: var(--rxg-s12);
	flex-wrap: wrap;
}

.rxg-ta-col { display: flex; flex-direction: column; gap: var(--rxg-s4); }

.rxg-ta-col__label { font-size: 11px; opacity: .8; }

.rxg-ta-col__value { font-size: 13px; font-weight: 700; }

.rxg-ta-timer { display: flex; align-items: center; gap: var(--rxg-s4); }

.rxg-ta-timer__chip {
	display: inline-block;
	padding: var(--rxg-s4) var(--rxg-s8);
	background: #333;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--rxg-r4);
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	min-width: 34px;
	text-align: center;
}

.rxg-ta-timer__sep { font-weight: 800; }

.rxg-ta--loop { margin-top: var(--rxg-s8); }

.rxg-ta--loop .rxg-ta-panel { padding: var(--rxg-s12); gap: var(--rxg-s8); margin: 0; }

.rxg-ta--loop .rxg-ta-titlerow { flex-wrap: wrap; }
.rxg-ta--loop .rxg-ta-title { font-size: 11px; }

.rxg-ta--loop .rxg-ta-timer__chip { padding: var(--rxg-s4); min-width: 24px; font-size: 12px; }

/* ── 토스트 ──────────────────────────────────────────────────── */
.rxg-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 99999;
	transform: translate(-50%, 16px);
	opacity: 0;
	transition: all .2s ease;
	padding: 10px 18px;
	font-size: 13px;
	color: #fff;
	background: rgba(18, 18, 18, .92);
	border-radius: var(--rxg-r8);
	pointer-events: none;
	max-width: 88vw;
	text-align: center;
}

.rxg-toast--show {
	transform: translate(-50%, 0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rxg-share-modal__sheet,
	.rxg-toast { animation: none; transition: none; }
}

/* ── 모바일 (390px / 카드 2열) — 좁은 카드에서 가격행 줄바꿈 ────── */
@media (max-width: 600px) {
	.rxg-price-block { padding: var(--rxg-s12); }
	.rxg-price-row { flex-wrap: wrap; gap: var(--rxg-s4) var(--rxg-s8); font-size: 13.5px; }
	.rxg-price-label { min-width: 0; width: 100%; margin-bottom: -2px; }
	.rxg-price-row--ta .amount, .rxg-price-row--ta b { font-size: 16px; }
	.rxg-ta-panel { padding: var(--rxg-s12); }
	.rxg-ta-stats { gap: var(--rxg-s16); }
	.rxg-ta--loop .rxg-ta-stats { flex-direction: column; gap: var(--rxg-s8); }
	.rxg-ta--loop .rxg-ta-timer__chip { min-width: 26px; font-size: 12px; }
	.rxg-share-linkrow { flex-direction: column; }
	.rxg-share-url { min-width: 0; }
}