@charset "utf-8";
/*
  bareunnutri 디자인 시스템 토큰 (컬러 외)
  - 컬러는 기존 css_color/c_*.css 시스템을 그대로 사용 (이 파일에서 정의 안 함)
  - 50대+ 고객 친화 (큰 글씨, 큰 터치영역)
  - 모바일 우선
  - 신규 클래스는 x_ 접두사 (CLAUDE.md 규칙)
*/

:root {
	/* 폰트 스택 (시스템 폰트만 사용 — 외부 웹폰트 추가 안 함) */
	--x-font-base: "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;

	/* 글자 크기 — 50대+ 친화 (12px 사용 금지) */
	--x-font-xs: 13px;
	--x-font-sm: 14px;
	--x-font-md: 16px;
	--x-font-lg: 18px;
	--x-font-xl: 20px;
	--x-font-2xl: 22px;

	/* 줄 높이 (게시판 한글 줄겹침 방지: 1.7em 기조 — 2026-03-03 수정 유지) */
	--x-lh-tight: 1.4;
	--x-lh-normal: 1.6;
	--x-lh-loose: 1.7;

	/* 간격 */
	--x-space-1: 4px;
	--x-space-2: 8px;
	--x-space-3: 12px;
	--x-space-4: 16px;
	--x-space-5: 20px;
	--x-space-6: 24px;
	--x-space-8: 32px;

	/* 모서리 */
	--x-radius-sm: 4px;
	--x-radius-md: 8px;
	--x-radius-lg: 16px;
	--x-radius-pill: 999px;

	/* 그림자 */
	--x-shadow-card: 0 2px 8px rgba(0,0,0,0.06);
	--x-shadow-fixed: 0 -2px 12px rgba(0,0,0,0.08);
	--x-shadow-overlay: 0 8px 24px rgba(0,0,0,0.12);

	/* 모바일 (하단 네비, 터치영역, 노치 안전영역) */
	--x-bottom-nav-height: 60px;
	--x-touch-target: 44px;
	--x-safe-bottom: env(safe-area-inset-bottom, 0px);

	/* 중립 회색 — 테마와 무관 */
	--x-c-bg: #ffffff;
	--x-c-bg-soft: #f7f8fa;
	--x-c-text: #1b1e26;
	--x-c-text-muted: #666666;
	--x-c-border: #eeeeee;
	--x-c-border-input: #dddddd;
	--x-c-input-focus-bg: #fcf8e3;
	--x-c-disabled: #cccccc;

	/* 강조 (할인가/할인율 — 테마와 무관하게 일관 적용) */
	--x-c-accent: #e04a2d;
	--x-c-success: #00a86b;

	/*
	  Primary/포인트 색은 css_color/c_*.css 의 셀렉터(.c_module 등)에서
	  테마별로 정의됨. 이 파일에서는 의도적으로 정의하지 않음.
	*/
}

/* 신규 컴포넌트 공통 베이스 (x_ 접두사) */
.x_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--x-touch-target);
	padding: 0 var(--x-space-4);
	font-size: var(--x-font-md);
	font-family: var(--x-font-base);
	border: 1px solid var(--x-c-border);
	border-radius: var(--x-radius-md);
	background: var(--x-c-bg);
	color: var(--x-c-text);
	cursor: pointer;
	box-sizing: border-box;
}
.x_btn[disabled],
.x_btn.x_disabled {
	background: var(--x-c-bg-soft);
	color: var(--x-c-disabled);
	cursor: not-allowed;
}
.x_btn_block { width: 100%; }
.x_btn_lg { min-height: 52px; font-size: var(--x-font-lg); }

.x_input {
	width: 100%;
	min-height: var(--x-touch-target);
	padding: 0 var(--x-space-3);
	font-size: var(--x-font-md);
	font-family: var(--x-font-base);
	border: 1px solid var(--x-c-border-input);
	border-radius: var(--x-radius-sm);
	background: var(--x-c-bg);
	color: var(--x-c-text);
	box-sizing: border-box;
}
.x_input:focus { background: var(--x-c-input-focus-bg); outline: none; }

.x_card {
	background: var(--x-c-bg);
	border: 1px solid var(--x-c-border);
	border-radius: var(--x-radius-md);
	box-shadow: var(--x-shadow-card);
	padding: var(--x-space-4);
}

.x_section { padding: var(--x-space-5) var(--x-space-4); }
.x_divider { height: 1px; background: var(--x-c-border); margin: var(--x-space-4) 0; }

/* 가격 표기 — 정가/할인가/할인율 (테마 공통) */
.x_price_origin { color: var(--x-c-text-muted); text-decoration: line-through; font-size: var(--x-font-sm); }
.x_price_sale { color: var(--x-c-text); font-weight: 700; font-size: var(--x-font-xl); }
.x_price_off { color: var(--x-c-accent); font-weight: 700; }

/* 뱃지 */
.x_badge {
	display: inline-block;
	padding: 2px var(--x-space-2);
	font-size: var(--x-font-xs);
	font-weight: 600;
	border-radius: var(--x-radius-sm);
	background: var(--x-c-bg-soft);
	color: var(--x-c-text);
}
.x_badge_accent { background: var(--x-c-accent); color: #fff; }
.x_badge_success { background: var(--x-c-success); color: #fff; }

/* 모바일 하단 고정바 (안전영역 처리) */
.x_fixed_bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: var(--x-safe-bottom);
	background: var(--x-c-bg);
	box-shadow: var(--x-shadow-fixed);
	z-index: 90;
}

/* 화면 외 숨김 (스크린 리더용) */
.x_sr_only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}