/*
 * 스킨 공통 토큰 — 시안 design/storefront-templates/shared/base.css 와 같은 파생 규칙.
 * --brand / --on-brand / --sk-accent 는 서버가 <style id="afs-theme-tokens"> 로 넣는다(ThemeTokens).
 * 스킨 CSS 는 색을 직접 쓰지 말고 이 파생 토큰을 쓴다.
 *
 * 변수 이름 규칙 (코어 CSS 와 같은 페이지에 실리므로 충돌 금지)
 *   - 브랜드 계열: --brand, --on-brand, --brand-50 … --brand-900, --brand-a10/a20 (코어에 없는 이름)
 *   - 스킨 중립색·기타: 반드시 --sk- 접두사 (--sk-bg, --sk-surface, --sk-text, --sk-muted, --sk-line, --sk-font, --sk-accent)
 *     코어 tokens.css 의 --muted·--accent 는 "배경색" 의미라, 시안 이름을 그대로 쓰면 회원·게시판 화면이 깨진다.
 *   - 전역 리셋·폰트는 넣지 않는다. 각 스킨 skin.css 가 자기 래퍼 범위 안에서 정한다.
 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --brand: #2f6df6;
  --on-brand: #ffffff;
  --sk-accent: var(--brand);
  --brand-50: color-mix(in oklab, var(--brand) 6%, white);
  --brand-100: color-mix(in oklab, var(--brand) 12%, white);
  --brand-200: color-mix(in oklab, var(--brand) 24%, white);
  --brand-300: color-mix(in oklab, var(--brand) 42%, white);
  --brand-400: color-mix(in oklab, var(--brand) 70%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 86%, black);
  --brand-700: color-mix(in oklab, var(--brand) 70%, black);
  --brand-800: color-mix(in oklab, var(--brand) 52%, black);
  --brand-900: color-mix(in oklab, var(--brand) 34%, black);
  --brand-a10: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-a20: color-mix(in srgb, var(--brand) 20%, transparent);
  --sk-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

[hidden] { display: none !important; }
.sf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-clamp-3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sf-icon { display: inline-block; flex: none; vertical-align: -0.125em; }
/* 구매하기 버튼 아래 작은 제휴 표시 (Policy::buyNote). 모든 스킨·basic 공통. 스킨은 color 만 덧씌운다 */
.afs-buy-note { display: block; margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; color: inherit; opacity: 0.78; word-break: keep-all; text-align: inherit; }