/* brand.css — 프로젝트(클라이언트)마다 교체하는 레이어.
   아래 값은 "브리프가 없을 때"의 미니멀 기본값. */

/* Satoshi (Fontshare, ITF Free Font License 2.0: assets/fonts/satoshi/FFL.txt).
   Self-hosting is allowed; the file must stay the official one (no subsetting or conversion).
   One variable file covers 300–900; the site uses 400 / 500 / 700. Not preloaded
   (it slowed the hero poster on slow connections; see PROGRESS.md 2026-10-10) */
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 컬러: 역할 이름으로 정의하고, 컴포넌트는 역할만 참조 */
  --color-bg: #FFFFFF;
  --color-surface: #F5F5F4;      /* 구획이 필요한 배경 */
  --color-text: #1C1C1C;
  --color-text-muted: #6B6B6B;
  --color-logo-ink: #2A2A2C;     /* 로고 SVG의 fill과 같은 색. 히어로 글자·헤더 링크에 사용 */
  --color-line: #E4E4E2;         /* 구분선, 인풋 테두리 */
  --color-action: #1C1C1C;       /* 일반 버튼, 링크, 포커스. 항상 무채색 */
  --color-action-contrast: #FFFFFF;
  --color-accent: #E01B24;             /* 포인트 컬러: Signal red (흰 글자 대비 4.8:1).
                                          선명하게, 면적은 작게, 한 곳(문의 보내기 버튼)에만 */
  --color-accent-contrast: #FFFFFF;
  --color-error: #C0362C;

  /* Film player: dark surround so the video reads as the only thing on screen */
  --color-backdrop: #0C0C0C;
  --color-video: #000000;
  --color-on-backdrop: #FFFFFF;
  --color-on-backdrop-muted: rgb(255 255 255 / 0.64);

  /* 서체: Satoshi (위 @font-face, 셀프 호스팅). 시스템 스택은 폴백으로 유지 */
  --font-system: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Satoshi", var(--font-system);
  --font-body: "Satoshi", var(--font-system);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* 필요 시 라운드 오버라이드 (예: 각진 브랜드면 0) */
  /* --radius-sm: 0; --radius-md: 0; */

  /* 룩북 북 전용: 클릭/키보드 넘김 시간과 페이지 깊이 표현(책등, 넘김 그림자) */
  --duration-turn: 900ms;
  --ease-turn: cubic-bezier(0.45, 0.05, 0.25, 1);
  --shade-spine-strong: rgb(0 0 0 / 0.16);
  --shade-spine-soft: rgb(0 0 0 / 0.04);
  --shade-turn-strong: rgb(0 0 0 / 0.28);
  --shade-turn-soft: rgb(0 0 0 / 0.05);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-turn: 0ms;
  }
}