/* base.css — 브랜드 유틸 · body · button */
/* 브랜드 컬러 유틸 — :root 토큰 기반 (CDN @theme 대신 단일 CSS 소스) */
.text-brand-green { color: var(--brand-green); }
.text-brand-gold { color: var(--brand-gold); }
.text-brand-fresh { color: var(--brand-fresh); }
.text-brand-brown { color: var(--brand-brown); }
.text-brand-cream { color: var(--brand-cream); }

.text-brand-green\/50 { color: color-mix(in srgb, var(--brand-green) 50%, transparent); }

.text-neutral-900 { color: var(--gray-900); }
.text-neutral-800 { color: var(--gray-800); }
.text-neutral-700 { color: var(--gray-700); }
.text-neutral-600 { color: var(--gray-600); }
.text-neutral-300 { color: var(--gray-300); }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-strong { color: var(--text-strong); }
.text-secondary { color: var(--text-secondary); }
.text-body { color: var(--text-body); }

.bg-brand-green { background-color: var(--brand-green); }
.bg-brand-gold { background-color: var(--brand-gold); }
.bg-brand-fresh { background-color: var(--brand-fresh); }
.bg-brand-brown { background-color: var(--brand-brown); }
.bg-brand-cream { background-color: var(--brand-cream); }
.bg-surface-white { background-color: var(--white); }

.bg-surface-subtle { background-color: var(--surface-subtle); }
.bg-surface-muted { background-color: var(--surface-muted); }
.bg-surface-panel { background-color: var(--surface-panel); }
.bg-surface-placeholder { background-color: var(--surface-placeholder); }
.bg-neutral-100 { background-color: var(--gray-100); }
.bg-neutral-200 { background-color: var(--gray-200); }
.bg-neutral-900 { background-color: var(--gray-900); }

.hover\:bg-surface-muted-hover:hover { background-color: var(--surface-muted-hover); }
.hover\:text-neutral-900:hover { color: var(--gray-900); }

.bg-brand-green\/5 { background-color: color-mix(in srgb, var(--brand-green) 5%, transparent); }
.bg-brand-green\/10 { background-color: color-mix(in srgb, var(--brand-green) 10%, transparent); }
.bg-brand-green\/60 { background-color: color-mix(in srgb, var(--brand-green) 60%, transparent); }
.bg-brand-fresh\/10 { background-color: color-mix(in srgb, var(--brand-fresh) 10%, transparent); }

.border-brand-green { border-color: var(--brand-green); }
.border-brand-green\/10 { border-color: color-mix(in srgb, var(--brand-green) 10%, transparent); }
.border-surface-subtle { border-color: var(--surface-subtle); }
.border-neutral-100 { border-color: var(--gray-100); }
.border-neutral-200 { border-color: var(--gray-200); }
.border-neutral-900 { border-color: var(--gray-900); }

.hover\:text-brand-gold:hover { color: var(--brand-gold); }
.hover\:text-brand-green:hover { color: var(--brand-green); }
.hover\:border-brand-green:hover { border-color: var(--brand-green); }

.group:hover .group-hover\:text-brand-green { color: var(--brand-green); }
.group:hover .group-hover\:bg-brand-gold { background-color: var(--brand-gold); }
.group:hover .group-hover\:bg-brand-green { background-color: var(--brand-green); }

.rounded-card { border-radius: var(--radius-card); }
.rounded-card-md { border-radius: var(--radius-card-md); }
.rounded-pill { border-radius: var(--radius-pill); }

@media (min-width: 768px) {
    .md\:rounded-card-md { border-radius: var(--radius-card-md); }
}

.shadow-card-sm { box-shadow: var(--shadow-card-sm); }
.shadow-card-md { box-shadow: var(--shadow-card-md); }
.shadow-card-soft { box-shadow: var(--shadow-card-soft); }
.shadow-promo { box-shadow: var(--shadow-promo); }

.hover\:shadow-card-md:hover { box-shadow: var(--shadow-card-md); }

body {
    font-family: 'Pretendard', sans-serif;
    line-height: var(--leading-ko-body);
    letter-spacing: var(--tracking-ko-body);
}

button {
    cursor: pointer;
}