/*
 * KOSMO 디자인 토큰 — 2026-09-28 "에디토리얼 모노크롬" 개편 (D-39, 참고: assets/웹디자인/Revolut/DESIGN.md).
 * 원칙: UI는 무채색(흰 캔버스 · #1f1f1f 잉크 · #c9c9cd 헤어라인), 색은 사진이 담당한다.
 *       브랜드 청록(#006677, 공식 CI D-35)은 로고와 상단 안내 띠에만 쓴다 — 버튼·카드·배경에 쓰지 않는다.
 * 변수 이름(tape/rose/skin)은 기존 코드 호환을 위해 유지하고 값만 무채색으로 바꿨다.
 * 대비(흰 배경 기준): --ink 16.1:1, --ink-soft 9.7:1, --ink-muted 4.9:1 / --on-ink-muted on --ink 7.3:1
 * 이전 청록 테마 백업: assets/웹디자인/backup-2026-09-28-teal/
 */
:root {
  --ink: #1F1F1F;          /* 본문·제목·주 버튼·어두운 띠·푸터 */
  --ink-soft: #4C4C4C;     /* 보조 본문 (Graphite) */
  --ink-muted: #717173;    /* 캡션·메타·조용한 소제목 (Slate) */
  --tape: #1F1F1F;         /* (호환) 강조선 — 잉크 */
  --tape-deep: #1F1F1F;    /* (호환) 주 버튼·링크 — 잉크 */
  --tape-tint: #F7F7F7;    /* (호환) 연한 면 = Mist */
  --rose: #C9C9CD;         /* (호환) 보조 장식 */
  --rose-deep: #1F1F1F;    /* (호환) 후원 버튼 — 잉크 */
  --skin: #EDEDEF;         /* 사진 자리 */
  --skin-tint: #F7F7F7;    /* 오목한 면 (목록·그룹 배경) */
  --paper: #FFFFFF;        /* 캔버스 */
  --white: #FFFFFF;
  --line: #C9C9CD;         /* 헤어라인 (Ash Grey) — 그림자 대신 경계 */
  --line-soft: #E4E4E7;    /* 표 안쪽 등 약한 구분선 */
  --danger: #B42318;       /* 오류·위험 전용 */
  --danger-bg: #FDECEA;
  --on-ink-muted: #A8A8AC; /* 어두운 배경 위 보조 글자 */

  --brand: #006677;        /* KOSMO Deep Teal — 로고·안내 띠 전용 */
  --brand-ribbon: linear-gradient(90deg, #004D5A 0%, #006677 55%, #007A8C 100%);

  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px;
  --radius-sm: 12px;       /* 작은 컨트롤 */
  --radius-md: 20px;       /* 목록·패널 */
  --radius-lg: 22.5px;     /* 카드 */
  --radius-pill: 9999px;   /* 버튼·태그·입력 */

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-zh: "Pretendard Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  --container: 1200px;
  --gutter: 20px;
  --header-h: 72px;
  --focus: 0 0 0 2px var(--white), 0 0 0 4px var(--ink);
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}