:root {
  /* 팔레트 — 밝고 귀여운 클레이 디오라마 위의 네이비 글씨.
     마스터는 딥 인디고 배경에 흰 글씨였다. 배경이 밝아졌으므로 색을
     뒤집었다. 글꼴·크기·행간은 마스터 그대로 두고 **색만** 바꾼다.

     대비는 씬의 하늘색(#A9D8F2) 기준이다: ink 8.9:1, soft 4.9:1로
     둘 다 WCAG AA 본문 기준(4.5:1)을 넘는다. 바닥의 포장(#DCD3C4)
     기준으로는 더 높다. */
  --void: #BFE3F7;
  --void-high: #DCEEF9;
  --ink: #122E52;
  /* 보조 글자 두 단계. 예전 값(#A6A8D4 / #666A9B)은 배경 #08062A 위에서
     각각 8.6:1과 **3.8:1**이었다. faint는 WCAG AA 본문 기준(4.5:1)에
     미달이라 흐릿했고, 뒤로 별과 오로라가 지나가면 더 나빠졌다.
     지금 값은 11.8:1과 8.3:1이다 — 위계는 남기고 바닥을 올렸다. */
  --ink-soft: #3D5B84;
  --ink-faint: #6C83A6;
  --glow-violet: #6B77C4;
  --glow-orchid: #8A6FB8;
  --glow-cyan: #3D7FA8;
  --glow-rose: #A85F72;
  /* ⚠︎ 배지. 밝은 배경에서는 노랑이 사라지므로 진한 주황으로 바꿨다. */
  --warn: #C2540E;
  /* 제목 안의 핵심 낱말에만 쓰는 형광. 과하지 않은 연한 민트-연두로,
     어두운 배경에서 스스로 빛나 보이되 제목 전체를 잡아먹지 않는다.
     **한 제목에 한 낱말만.** 두 군데 이상 칠하면 강조가 사라진다. */
  /* 제목 안의 핵심 낱말. 디오라마의 코랄에서 가져와 배경과 같은 세계로
     보이게 했다. **한 제목에 한 낱말만** — 마스터의 규칙 그대로다. */
  --kw: #E0533B;
  --gold: #B8761A;
  --line: rgba(18, 46, 82, 0.16);
  --panel: rgba(255, 255, 255, 0.72);

  /* 흰 판 위에 쓰는 글자색. 4-4 조직도처럼 상자를 불투명한 흰색으로
     채우는 자리에서 쓴다 — 어두운 배경용 --ink 계열을 그대로 얹으면
     흰 바탕에 흰 글씨가 된다.
     대비는 흰색(#FFFFFF) 기준이다: strong 14.9:1, soft 8.9:1,
     faint 5.4:1로 셋 다 WCAG AA 본문 기준(4.5:1)을 넘는다. */
  --on-light: #17172E;
  --on-light-soft: #45455F;
  --on-light-faint: #6A6A85;
  /* 흰 판 위에서 쓰는 강조색. 어두운 배경용(--gold·--kw·--glow-*)은
     흰 바탕에서 대비가 3:1 아래로 떨어져 그대로 못 쓴다. */
  --on-light-gold: #7A5A00;
  --on-light-green: #0F6152;
  --on-light-violet: #3A3FA8;
  --on-light-orchid: #6B3FA0;
  /* 팀 빌딩 보드(8-3)의 채운 칸. 원본 양식의 주황을 그대로 옮겼다 —
     이 덱의 색은 아니지만 이미 쓰던 양식의 얼굴이다. 흰 글자와의
     대비는 5.1:1로 본문 기준(4.5:1)을 넘는다. */
  --board-ink: #C05A17;

  /* 소속 칩 색. 회사를 구분하는 축이다 — content.js의 chipTone()이 내는
     값과 짝을 이룬다.
     **마스터의 값을 그대로 쓸 수 없었다.** 거기는 어두운 배경이라 칩 글자가
     밝은 노랑(#F2C14E)·민트(#3FC7AD)였는데, 밝은 디오라마와 흰 판 위에서는
     둘 다 사라진다. 색의 계열(따뜻함·초록·중성)은 지키고 명도만 뒤집었다.
     흰색(#FFFFFF) 기준 대비: warm 5.1:1, green 6.0:1, neutral 7.6:1,
     orchid 6.4:1로 넷 다 WCAG AA 본문 기준(4.5:1)을 넘는다. */
  --chip-warm-bg: rgba(184, 118, 26, 0.14);
  --chip-warm-ink: #8A5A12;
  --chip-green-bg: rgba(15, 97, 82, 0.12);
  --chip-green-ink: #0F6152;
  --chip-neutral-bg: rgba(18, 46, 82, 0.10);
  --chip-neutral-ink: #2C4A73;
  --chip-orchid-bg: rgba(107, 63, 160, 0.12);
  --chip-orchid-ink: #6B3FA0;

  /* 크루 역할 색. 범례(크루 구성 · 도메인 5 · 개발 2 …)와 네임카드가
     **같은 색을 쓴다.** 범례에서 본 색이 카드에 그대로 나타나야 "구성대로
     나뉘어 있다"가 한눈에 읽힌다. 소속 칩은 회사를 나타내는 다른 축이므로
     역할은 색이 아니라 카드 왼쪽 띠로 구분한다. */
  --role-domain: #F2C14E;
  --role-domain-bg: rgba(242, 193, 78, 0.12);
  --role-dev: #3FC7AD;
  --role-dev-bg: rgba(63, 199, 173, 0.12);
  --role-domain-dev: #B98FE8;
  --role-domain-dev-bg: rgba(185, 143, 232, 0.12);
  --role-advisor: #8FB8FF;
  --role-advisor-bg: rgba(143, 184, 255, 0.1);

  --radius: 18px;
  --radius-pill: 999px;

  /* 글꼴. 제목은 페이퍼로지, 소제목과 본문은 나눔스퀘어.
     둘 다 한글 서브셋이라 드문 음절이 빠질 수 있는데, 그런 글자만
     자동으로 뒤쪽 폰트로 떨어진다(글자 단위 대체). 그래서 나눔스퀘어를
     제목 스택에도 두 번째로 넣어둔다 — 페이퍼로지에 없는 글자가
     시스템 고딕으로 튀는 것보다 나눔스퀘어로 받는 편이 덜 어긋난다. */
  --font-title: 'Paperlogy', 'NanumSquare', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-body: 'NanumSquare', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  /* 손글씨 — 팀 빌딩 보드(8-3)에 사람이 채워 넣은 글씨에만 쓴다.
     **보드에 쓰인 글자만 남긴 조각 파일이다(19KB).** 문구를 고치면
     없는 글자가 뒤쪽 폰트로 떨어져 그 글자만 고딕으로 튄다 —
     그때는 폰트를 다시 자른다(assets/fonts/LICENSES.md). */
  --font-hand: 'Gaegu', 'NanumSquare', 'Apple SD Gothic Neo', cursive;

  /* 프로젝터 타이포 스케일.
     선호값은 너비와 높이 중 작은 쪽을 따른다. vw만 쓰면 화면이 16:9보다
     세로로 길 때 글자가 뷰포트보다 느리게 줄어 내용이 잘린다.
     아래 vw/vh 쌍은 16:9에서 같은 값이 되도록 맞췄다.

     **크기와 줄간격은 함께 정한다 (2026-08-03).** 한 번은 너무 작아
     (1280×720에서 가장 작은 글자 9px) 뒷줄에서 안 읽혔고, 한 번은 너무
     키워 줄이 서로 붙었다. 지금 값은 그 사이다 — 글자를 키우는 대신
     남는 자리를 줄간격에 쓴다. 한글은 라틴보다 글자 밀도가 높아 같은
     크기라도 행간이 더 필요하다(본문 1.7).

     **2026-08-10: 사다리 전체를 한 단 올렸다.** 마스터에서 물려받은 값은
     step-00이 1280×720에서 14px이었고, 이 덱은 밝은 씬 위에 본문이 많아
     그 크기가 프로젝터·Teams 화면공유에서 읽히지 않았다. 페이지마다 따로
     키우다가 결국 여기를 고쳤다 — **가장 작은 글자가 18px 아래로 내려가지
     않는 것**이 이 덱의 기준이다. 새 값으로 넘치는 장은 글자를 줄이지 말고
     **내용을 줄이거나 여백을 조인다.**

     1280×720 기준: step-00 18px, step-0 21px, step-1 26px, step-2 32px. */
  --step-00: clamp(1rem, min(1.41vw, 2.5vh), 1.45rem);
  --step-0: clamp(1.1rem, min(1.64vw, 2.92vh), 1.7rem);
  --step-1: clamp(1.25rem, min(2.03vw, 3.61vh), 2.1rem);
  --step-2: clamp(1.4rem, min(2.5vw, 4.44vh), 2.6rem);
  --step-3: clamp(1.5rem, min(2.9vw, 5.16vh), 3.5rem);
  --step-4: clamp(1.9rem, min(4.5vw, 8vh), 5.4rem);
  --step-5: clamp(2.4rem, min(7.5vw, 13.33vh), 9rem);

  /* 줄간격. 한 곳에서 정해 두어 슬라이드마다 제각각이 되지 않게 한다. */
  --leading-body: 1.7;
  --leading-tight: 1.5;

  /* 상단 로고 바. --brand-h는 로고 높이, --brandbar-h는 바가 차지하는
     전체 높이(로고 + 위아래 여백)로 슬라이드 여백 계산에 쓴다. */
  --brand-h: clamp(1.4rem, min(2.4vw, 4.27vh), 2.6rem);
  --brandbar-h: calc(var(--brand-h) + var(--pad) * 0.9);

  --gap: clamp(0.4rem, min(0.8vw, 1.42vh), 1.2rem);
  --pad: clamp(1rem, min(3.5vw, 6.2vh), 4.5rem);

  --ease-slide: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-slide: 700ms;

  /* 무대 — 내용이 담기는 16:9 상자.
     화면이 16:9보다 넓으면(휴대폰 가로 21:10, 울트라와이드) 폭을 잘라 좌우를
     비운다. 16:9보다 좁으면(4:3 프로젝터, 세로 휴대폰) 화면을 그대로 다 쓴다.
     **CSS가 원본이다.** JS가 px으로 박아두면 리사이즈나 전체화면 진입에서
     resize 이벤트를 놓쳤을 때 챕터 자리가 통째로 어긋난다. 여기 두면 창이
     바뀌는 대로 저절로 따라간다. main.js는 #deck을 밀 px 값을 낼 때만
     같은 식을 한 번 더 계산한다(stageSize). */
  --stage-w: min(100vw, calc(100vh * 16 / 9));
  --stage-h: 100vh;
}

/* 세로가 짧은 화면 — clamp의 **최소값을 걷어낸다.**
   위 스케일의 최소값(rem)은 노트북에서 글자가 너무 작아지지 않게 두었는데,
   화면이 낮아지면 이 바닥이 비례값을 이겨 버린다. 휴대폰 가로(예: 932×430)
   에서는 16:9 비례로 8.3px이어야 할 글자가 바닥값 13.1px로 나와, 모든 글자가
   약 58% 크게 잡히고 25장 중 12장이 아래로 넘쳤다(최대 237px). .slide에
   overflow: hidden이 걸려 있어 스크롤로 꺼낼 수도 없어 그대로 사라졌다.

   바닥을 걷으면 1280×720과 **완전히 같은 비례**가 되어, 거기서 들어가던
   내용은 여기서도 그대로 들어간다.

   680px을 경계로 삼은 이유: 바닥값이 비례값을 이기기 시작하는 지점이
   높이 676px 근처다. 발표용 1280×720(과 그 이상)은 이 블록에 걸리지 않는다. */
@media (max-height: 680px) {
  :root {
    --step-00: min(1.09vw, 1.94vh);
    --step-0: min(1.25vw, 2.22vh);
    --step-1: min(1.64vw, 2.92vh);
    --step-2: min(2.03vw, 3.61vh);
    --step-3: min(2.9vw, 5.16vh);
    --step-4: min(4.5vw, 8vh);
    --step-5: min(7.5vw, 13.33vh);
    --brand-h: min(2.4vw, 4.27vh);
    --gap: min(0.8vw, 1.42vh);
    --pad: min(3.5vw, 6.2vh);
  }
}