/* 플랫폼 공통 디자인 토큰. 플레이어 공간(discover.css), 창작 공간(creator.css), 스튜디오(studio.css)가 같은 값을 쓴다.
   표는 docs/ux-principles.md의 '디자인 토큰'에 있다. 값을 바꿀 때는 이 파일과 그 표만 고친다.
   작품 플레이 화면(play.css)의 색은 세계팩 ui.theme이 정하므로 여기와 별개다. 크기, 둥근 정도, 간격, 움직임 토큰은 play.css도 가져다 쓸 수 있다.
   이 파일은 토큰과 글꼴 선언만 둔다. 초기화와 공통 바탕은 base.css. */

/* Pretendard 1.3.9 (SIL OFL 1.1, styles/fonts/pretendard/OFL.txt). 한글 2,350자와 라틴 부분 글꼴.
   부분 글꼴에 없는 글자는 아래 --font 목록의 시스템 글꼴로 넘어간다. 외부 CSS 없이 Artifact에서도 열린다. */
@font-face { font-family: 'Pretendard WL'; font-style: normal; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), local('Pretendard-Regular'), url("fonts/pretendard/pretendard-regular.woff2") format('woff2'); }
@font-face { font-family: 'Pretendard WL'; font-style: normal; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), local('Pretendard-Medium'), url("fonts/pretendard/pretendard-medium.woff2") format('woff2'); }
@font-face { font-family: 'Pretendard WL'; font-style: normal; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), local('Pretendard-SemiBold'), url("fonts/pretendard/pretendard-semibold.woff2") format('woff2'); }
@font-face { font-family: 'Pretendard WL'; font-style: normal; font-weight: 700 900; font-display: swap; src: local('Pretendard Bold'), local('Pretendard-Bold'), url("fonts/pretendard/pretendard-bold.woff2") format('woff2'); }

:root {
  color-scheme: dark;

  /* ── 색: 바탕과 면 (어두운 쪽에서 밝은 쪽으로) ── */
  --bg: #0d0e12;            /* 화면 바탕 */
  --bg-2: #121419;          /* 그림이 들어올 자리 */
  --surface-1: #16181e;     /* 카드, 묶음, 판 */
  --surface-2: #1e2129;     /* 카드 위 조각, 보조 버튼, 칩 */
  --surface-3: #282c36;     /* 누른 보조 버튼, 고른 탭 */
  --elevated: #1b1e25;      /* 대화 상자, 시트 (그림자와 함께) */
  --field: rgba(255,255,255,.055);       /* 입력칸 채움. 어느 면 위에서도 같은 차이 */
  --field-hover: rgba(255,255,255,.08);
  --glass: rgba(13,14,18,.84);           /* 위아래 고정 바 (흐림과 함께) */
  --scrim: rgba(5,6,9,.66);              /* 대화 상자 뒤 */
  --image-fade: rgba(10,11,15,.94);      /* 그림 위 글자를 위한 아래쪽 그늘 */

  /* ── 색: 글자 (바탕 #0d0e12 기준 대비) ── */
  --text-1: #f2f3f5;        /* 16.9:1 제목, 본문 */
  --text-2: #b4b9c4;        /* 9.6:1 설명 */
  --text-3: #878d9a;        /* 5.7:1 보조, 날짜, 개수 (surface-2 위 4.6:1) */
  --text-4: #5b606c;        /* 쓸 수 없음. 읽어야 하는 글에는 쓰지 않는다 */
  --text-on-image: #e8eaef; /* 그림 위 본문 */

  /* ── 색: 선 ── */
  --hair: 1px;              /* 고해상도 화면에서는 0.5px */
  --line-1: rgba(255,255,255,.07);   /* 나눔선 */
  --line-2: rgba(255,255,255,.12);   /* 테두리가 꼭 필요한 조각 (점선 추가 버튼, 무대) */
  --line-3: rgba(255,255,255,.22);   /* 강한 테두리, 끌 때 */

  /* ── 색: 포인트와 의미 ── */
  --accent: #ffc83d;
  --accent-hover: #ffd466;
  --accent-pressed: #f2b81f;
  --on-accent: #1b1400;
  --accent-soft: rgba(255,200,61,.13);
  --accent-line: rgba(255,200,61,.38);
  --danger: #ff6680;
  --danger-soft: rgba(255,102,128,.12);
  --danger-line: rgba(255,102,128,.38);
  --success: #4fd1a5;
  --success-soft: rgba(79,209,165,.13);
  --info: #74b4ff;
  --info-soft: rgba(116,180,255,.13);
  --focus: #ffc83d;

  /* ── 글꼴 ── */
  --font: 'Pretendard WL', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  /* 크기 / 줄 높이 / 자간. 한글은 큰 글자만 조금 좁힌다 */
  --fs-12: 12px; --lh-12: 16px; --ls-12: 0;
  --fs-13: 13px; --lh-13: 18px; --ls-13: 0;
  --fs-14: 14px; --lh-14: 20px; --ls-14: -0.005em;
  --fs-15: 15px; --lh-15: 22px; --ls-15: -0.01em;
  --fs-17: 17px; --lh-17: 24px; --ls-17: -0.015em;
  --fs-20: 20px; --lh-20: 28px; --ls-20: -0.02em;
  --fs-24: 24px; --lh-24: 32px; --ls-24: -0.025em;
  --fs-28: 28px; --lh-28: 36px; --ls-28: -0.03em;
  --fs-34: 34px; --lh-34: 42px; --ls-34: -0.03em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ── 간격 (4px 격자) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --gutter: 16px;

  /* ── 둥근 정도 (안쪽 조각 = 바깥 − 안쪽 여백) ── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* ── 조작 높이 ── */
  --h-xl: 52px;   /* 화면 아래 고정 주요 버튼 */
  --h-lg: 44px;   /* 기본 버튼, 입력칸, 목록 줄 */
  --h-md: 36px;   /* 작은 버튼, 탭 칩 (누르는 자리는 44px로 넓힌다) */
  --h-sm: 28px;   /* 표시 칩 */
  --h-xs: 22px;   /* 배지 */

  /* ── 아이콘 ── */
  --icon-16: 16px; --icon-20: 20px; --icon-24: 24px;
  /* 24px 칸 기준 선 굵기. 작게 그릴수록 굵혀서 화면의 선이 1.5px 안팎으로 같게 보인다 */
  --stroke-24: 1.75; --stroke-20: 1.9; --stroke-16: 2.2;

  /* ── 그림자 (어두운 바탕이라 약하게) ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 6px 20px rgba(0,0,0,.32);
  --shadow-3: 0 18px 48px rgba(0,0,0,.5);

  /* ── 움직임 ── */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ── 자리 ── */
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 60px; --bar-h: 56px;
}
@media (min-resolution: 2dppx) { :root { --hair: .5px; } }