/* =====================================================================
   디자인 토큰 — 발주처 피그마 rjd2BwOXTF772ErX1ownKQ **Section 4** (노드 33:2) 실측값.
   색·치수는 전부 여기에만 둔다. 화면 CSS 는 var() 만 쓴다.

   출처 노드: 대기 33:3 · 프롤로그 33:581 · 이름 33:614 · Q1 33:752 · 결과 33:918
   대조 기준 PNG: app/design-ref/section4/*.png (1080×1920, 피그마 렌더 그대로)
   → `npm run parity` 가 이 PNG 와 실제 화면을 픽셀 비교한다.
   ===================================================================== */

:root {
  /* ── 지면 ── */
  --bg-top:      #FFFFF9;   /* 프레임 배경 그라데이션 위 (33:3 fill) */
  --bg-bottom:   #FFFDE2;   /* 그라데이션 아래 */
  --paper:       #FFFEF6;   /* 선택카드 번호 알약(비선택) */
  --nav:         #DFD9CB;   /* 선택카드 · 입력칸 · 진행바 트랙 · 결과 상태 박스 · 밝은 키 */
  --nav-face:    #E2DDD7;   /* 뒤로/홈 원형 버튼 면 */
  --dash:        #B9AE97;   /* 점선 (stroke 5 · dash 14 14) */
  --dot-off:     #D9D9D9;   /* 프롤로그 비활성 점 */

  /* ── 잉크 ── */
  --ink:         #585243;   /* 제목·본문·진행바 필·선택 테두리 */
  --ink-btn:     #5E5341;   /* 버튼 면 · 입력 글자 · 활성 점 */
  --sub:         #6E644E;   /* 설명·선택지 답변·결과 상태 글자 */
  --muted:       #787878;   /* 라벨 (PROLOGUE 01/03 · 01/03 · 결과 리드) */

  /* ── 버튼 ── */
  --btn:         #5E5341;
  --btn-label:   #E2DDD7;

  /* ── 판정 4색 (대기화면 닷 33:566 실측 — 24px, 테두리 #5E5341 50%) ── */
  --judge-BLK:   #2B2B2B;
  --judge-MNT:   #5BC8AF;
  --judge-PNK:   #F291B2;
  --judge-WHT:   #FFFFFF;
  --judge-ring:  rgba(94, 83, 65, 0.5);

  /* ── 키보드 (Section 4 키 SVG 실측: 어두운 키 #4D4D4D · 밝은 키 #DFD9CB) ── */
  --key-dark:      #4D4D4D;
  --key-dark-ink:  #FFFFFF;
  --key-light:     #DFD9CB;
  --key-light-ink: #2A2A2A;
  --key-radius:    12.55px;
  --key-shadow:    0 6px 0 rgba(0, 0, 0, 0.3);   /* feOffset dy=6 · 흐림 없음 */

  /* ── 딱 떨어지는 그림자 (선택카드 33:893 · 뒤로/홈 버튼 실측 10px) ── */
  --shadow-hard: 0 10px 0 rgba(0, 0, 0, 0.25);

  /* ── 스테이지 ── */
  --stage-w: 1080px;
  --stage-h: 1920px;

  /* ── 종이 (자산 7 · 708×896 @ 186,325 · 그림자 0 20 40 15%) ──
     paper.png 은 그림자를 구운 @2x 이라 여백이 있다: 좌우 40 · 위 20 · 아래 60. */
  --paper-left:  146px;
  --paper-top:   305px;
  --paper-w:     788px;
  --paper-h:     976px;

  /* ── 하단 고정 크롬 (33:613 · 33:579) ── */
  --nav-size:    90px;
  --nav-top:     1699px;
  --nav-back-x:  140px;
  --nav-home-x:  850px;
  --logo-left:   386px;
  --logo-w:      308px;
  --logo-h:      111px;

  /* ── 큰 버튼 (33:9 · 640×140 @ 220,1345) ── */
  --btn-left:    220px;
  --btn-top:     1345px;
  --btn-w:       640px;
  --btn-h:       140px;
  --btn-radius:  80px;

  /* ── 반복 치수 ── */
  --rule-w:      802px;   /* 점선 가로폭 (x=139) */
  --choice-w:    958px;   /* 선택카드 (x=61) */

  /* ── 타이포 ── */
  --f-serif: "Noto Serif KR", "Malgun Gothic", serif;
  --f-sans:  "Noto Sans KR", "Malgun Gothic", sans-serif;
  --f-mono:  "IBM Plex Mono", "Consolas", monospace;
}

/* =====================================================================
   번들 폰트 — 전부 OFL. 가변 폰트라 파일 1개로 100~900 을 다 쓴다.
   설치 불필요(앱 안에서만 로드). font-display:block 이라 폰트 없는
   한 프레임이 화면에 새지 않는다 — 키오스크는 FOUT 가 더 나쁘다.
   ===================================================================== */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../assets/fonts/NotoSansKR-var.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Noto Serif KR";
  src: url("../assets/fonts/NotoSerifKR-var.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}