/* ==========================================================================
File: public/styles/core.css
Purpose:
  글로벌 토큰/텍스트 정책/레이아웃 공통 기초 규칙을 정의한다.
Primary Responsibility:
  감성 토큰(색/간격/타입)과 텍스트 무결성 정책을 중앙에서 유지한다.
Design Intent:
  - 레이아웃 메커니즘과 브랜드 톤을 분리하면서도 동일한 토큰을 공유한다.
  - 카드 문장 줄바꿈이 음절 단위로 깨지는 실패 모드를 예방한다.
  - 가로 스크롤이 생기지 않도록 기본 안전장치를 둔다.
Non-Goals:
  - 카드의 그리드 열 정책과 플립 변환은 담당하지 않는다.
Dependencies:
  - 없음.
Constraints & Assumptions:
  - 본 파일의 커스텀 속성은 components-cards.css, app.css에서 참조된다.
  - 모바일/데스크톱 분기는 각 구성 파일의 미디어 쿼리 정책을 따른다.
Extension Points:
  - :root 토큰 확장으로 색상/간격/타입 스케일 변경 가능.
========================================================================== */

:root{
  font-size: clamp(14px, 1.1vw, 18px);

  --color-bg: #000;
  --color-fg: #fff;
  --color-front-bg: #fff;
  --color-front-fg: #111;
  --color-front-muted: #444;
  --color-front-meta: #888;
  --color-back-bg: #151515;
  --color-back-fg: #eee;
  --color-accent: #d4a373;

  --gap-1: clamp(8px, 1vw, 16px);
  --gap-2: clamp(12px, 1.5vw, 24px);
  --gap-3: clamp(16px, 2vw, 32px);

  --radius-2: clamp(14px, 1.2vw, 22px);

  --h1: clamp(1.7rem, 2.8vw, 2.7rem);
  --h2: clamp(1.2rem, 1.9vw, 1.75rem);
  --h3: clamp(1.05rem, 1.4vw, 1.35rem);
  --body: clamp(0.94rem, 1vw, 1.05rem);
  --small: clamp(0.8rem, 0.9vw, 0.95rem);

  --card-height: min(74vh, 58rem);
}

html,
body{
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body{
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: var(--body);
  line-height: 1.55;
  overflow-y: hidden;
}

*{
  box-sizing: border-box;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.site-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  padding: clamp(14px, 2.2vh, 24px) clamp(14px, 2vw, 32px);
}

.top-header h1{
  margin: 0 0 var(--gap-3) 0;
  text-align: center;
  font-size: var(--h1);
  letter-spacing: 0.08em;
}