/* 웹폰트 — assets/fonts/에 파일을 함께 넣어 배포한다.
   지금까지는 선언 없이 폰트 이름만 썼는데, 그건 "보는 사람 기기에 그 폰트가 깔려 있을 때만"
   맞게 보인다(디자이너 맥에는 깔려 있어 정상으로 보였다). 배포본에서도 같게 보이려면 이 선언이 필요하다.
   Hahmlet·NEXON은 원본 otf를 서브셋한 woff2다 — 7벌 합쳐 1.5MB.
      NEXON은 한글 음절 전체(U+AC00–D7A3)를 담고, Hahmlet은 상용 음절만 담는다.
      원본 otf는 ~/Library/Fonts에 그대로 있다.
      재생성: python3 -m fontTools.subset <원본.otf> --unicodes=U+AC00-D7A3,U+0020-007E --flavor=woff2
   Lumos 는 결과 첫 화면(completed1)의 "tap to continue" 안내 한 줄에만 쓴다(.hres1__tap · .pres1__tap · .pat1__tap).
   ⚠️ Lumos.ttf는 원본의 cmap 서브테이블 하나(platform 1 / length 0)가 깨져 있어 브라우저가
      통째로 거부했다(OTS: Bad cmap subtable). 그 서브테이블을 걷어낸 복구본을 넣어 두었다 —
      원본으로 덮어쓰면 다시 serif로 대체되니 주의. */
@font-face {
  font-family: 'Lumos';
  src: url('../assets/fonts/Lumos.woff2') format('woff2'),
       url('../assets/fonts/Lumos.ttf') format('truetype');
  font-display: swap;
}

/* ────────────────────────────────────────────────────────────────────────
   2026-09-03 폰트 체계 교체 — accent(Hahmlet) / base(NEXON Lv2 Gothic OTF)
   출처: Figma HarryPotter_UI node 3474-16640(base) · 3479-16859(accent).
   화면 텍스트는 이 두 축으로만 간다.

   두 폰트 모두 ~/Library/Fonts의 원본(Hahmlet .ttf/.otf, NEXON Lv2 Gothic OTF .otf)을
   서브셋한 woff2다 — 7벌 합쳐 1.5MB.
   재생성:
     python3 -m fontTools.subset <원본> \
       --unicodes=U+0020-007E,U+00A0,U+00B7,U+00D7,U+2018-201D,U+2026,U+2192,U+AC00-D7A3 \
       --layout-features='*' --flavor=woff2 --output-file=<이름>.woff2

   ⚠️ Hahmlet은 한글 상용 음절만 담고 있다(서브셋 후 3,033 글리프 — NEXON은 11,277로 U+AC00–D7A3
      전체를 덮는다). 지금 앱 카피에 쓰이는 793자는 전부 포함돼 문제없지만, 앞으로 accent 자리에
      희귀 음절(예: 옛말·조어)이 들어가면 그 글자만 fallback(serif)으로 빠진다. 새 결과 콘텐츠
      카피를 넣을 때 확인이 필요하다. base(NEXON)에는 이 제약이 없다. */
@font-face {
  font-family: 'Hahmlet';
  font-weight: 300;
  src: url('../assets/fonts/Hahmlet-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Hahmlet';
  font-weight: 400;
  src: url('../assets/fonts/Hahmlet-Regular.woff2') format('woff2');
  font-display: swap;
}
/* 피그마 스펙의 accent 강조 웨이트는 SemiBold 하나뿐이다. 600만 등록하고 700 이상은
   비워 둔다 — font-weight:bold가 잘못 걸리면 브라우저 합성(faux bold)이 아니라
   SemiBold로 떨어지도록 600 900 범위로 받는다. */
@font-face {
  font-family: 'Hahmlet';
  font-weight: 600 900;
  src: url('../assets/fonts/Hahmlet-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'NEXON Lv2 Gothic OTF';
  font-weight: 300;
  src: url('../assets/fonts/NEXONLv2Gothic-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'NEXON Lv2 Gothic OTF';
  font-weight: 400;
  src: url('../assets/fonts/NEXONLv2Gothic-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'NEXON Lv2 Gothic OTF';
  font-weight: 500;
  src: url('../assets/fonts/NEXONLv2Gothic-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'NEXON Lv2 Gothic OTF';
  font-weight: 600 900;
  src: url('../assets/fonts/NEXONLv2Gothic-Bold.woff2') format('woff2');
  font-display: swap;
}
/* Nimbus Roman No9 L Regular — 홈 체험 완료 캡션의 결과 이름(Figma 4981-56403 "WALNUT WAND", 36px 대문자).
   라틴 전용이라 ASCII + Latin-1 + 따옴표만 담는다(19KB). 원본 otf(Regular)와 라이선스는 assets/fonts/nimbus-roman-no9-l/ (2026-10-14 안 쓰는 Med · MedIta · RegIta 원본 삭제).
   ⚠️ 라이선스 GPL v2(URW++) — 같은 폴더의 라이선스 파일을 함께 배포한다.
   재생성: python3 -m fontTools.subset nimbus-roman-no9-l/NimbusRomNo9L-Reg.otf
             --unicodes=U+0020-007E,U+00A0-00FF,U+2018-201D --flavor=woff2 --layout-features='*' */
@font-face {
  font-family: 'Nimbus Roman No9 L';
  font-weight: 400;
  src: url('../assets/fonts/NimbusRomNo9L-Regular.woff2') format('woff2');
  font-display: swap;
}
/* EASTARJET Heavy — 홈 퀴디치 체험 완료 캡션 "닉네임 점수"(Figma 5070-30226, 36px, 2026-10-12).
   닉네임이 무엇이든 그려야 해서 한글 음절 전체(11,172)를 담은 파일 그대로다(294KB) — 쓰는 화면에서만 받는다. */
@font-face {
  font-family: 'EASTARJET';
  font-weight: 800;
  src: url('../assets/fonts/EASTARJET-Heavy.woff2') format('woff2');
  font-display: swap;
}
/* 퀴디치 결과 점수 숫자 — Figma Monoplex KR Bold 48(4357-14118, 2026-10-13). 숫자 · 쉼표 · 붙임표만 잘라 낸 7.8KB 다.
   Monoplex KR 은 SIL Open Font License 1.1 이고 "Monoplex" 가 예약 글꼴 이름이라, 고친 판(부분 집합)은 이름을
   "HP Quidditch Score" 로 바꿨다(저작권 · 라이선스 표기는 파일 안에 그대로). 원본 Monoplex KR Bold 1.1.0 에서
   다시 자르려면 fontTools subset 으로 같은 글자만 남기고 이름 표의 1 · 4 · 6 · 16 번을 이 이름으로 바꾼다. */
@font-face {
  font-family: 'HP Quidditch Score';
  font-weight: 700;
  src: url('../assets/fonts/HPQuidditchScore-Bold.woff2') format('woff2');
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════
   Design Tokens — Harry Potter 특별전 · 관람객 앱
   ──────────────────────────────────────────────────────────────────────
   컬러 체계 — 2026-10-07 개편: **메인 컬러가 보라에서 남색(HP Mobile)으로 바뀌었다.**

     1) 메인 — HP Mobile 네이비        Figma "Color · HP Mobile" 5000-51857 과 1:1.
          원색 21 · 역할 30 · 페인트 3. 새 화면은 여기만 쓴다.
     2) 서브 — 메인 밖에서 아직 쓰는 색  Figma Color-system / Kiosk 변수.
          보라 · 파랑(페리윙클) · 노랑 · 초록 · 빨강 · 회색 · 흑백 · 흰색 알파.
          결과 화면의 메타 글자 · 기숙사 그래프 · 저장 버튼 라벨이 쓴다.
          **보라는 이제 메인이 아니다** — 저장 버튼 라벨 한 단계(700)만 서브로 남았다(500 은 2026-10-14 삭제).
     3) 앱 공통 역할 — Figma 변수 밖      딤 · 키보드 포커스 테두리.

   정리 원칙
     · 서브는 실제로 쓰는 단계만 둔다(2026-10-07 전수 확인 — 주석에 쓰는 곳을 적어 둔다).
       결과 화면이 남색 시안으로 옮겨 가 쓰는 곳이 비면 그 토큰을 지우고, 그룹이 비면 그룹째 지운다.
     · 메인(HP Mobile)은 Figma 와 1:1 이라 아직 화면이 쓰지 않는 역할도 그대로 둔다.
     · 2026-10-07 에 쓰는 곳이 없던 49개를 지웠다 — 보라 시절의 의미 토큰 27개(--bg-* · --surface-accent ·
       --surface-glass-strong · --content-* · --border-default/accent/highlight · --accent-* · --highlight* · --status-*),
       원색 17개(보라 100~400·600 · 파랑 200·300 · 라이트블루 300·500 · 노랑 100~300·500·600 · 초록 500·700 · 빨강 500),
       알파 5개(white-a40·a70 · purple-500-a24·a40 · purple-700-a60 — white-a40 은 10-13 다시 들였다). 의미 토큰은 이제 메인의 역할 30개뿐이다.
     · 2026-10-14 디자인시스템 정돈 — purple-500 · 예외 타이포 클래스 7개 · 학생증 글꼴 2종 · EB Garamond 를 지웠다.
     · legacy-colors.css(구 A/ · Fastpass · 홈 리뉴얼)는 이 체계 밖의 deprecated 층이다 — 따로 정리한다.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ════════════════════════════════════════════════════════════════
     1) 메인 — HP Mobile 네이비 (2026-10-06 도입 · 2026-10-07 메인으로)
     출처: Figma HarryPotter_UI "Color · HP Mobile" 5000-51857 — 홈 세 화면(완드 체험 전 4981-54844 ·
     체험 완료 4981-56403 · 나의 QR 4981-54982)에서 뽑은 원색 21개 · 역할 30개 · 그라디언트 3개.
     스플래시 · 로그인 · 온보딩 · 동의 시트 · 홈 · 탈퇴 팝업이 이 체계로 그려지고, 결과 화면은 시안이 나오는 대로 옮긴다.

     규칙(시안 "적용 범위와 확장 원칙")
       · 화면에서는 원색보다 **역할(semantic) 토큰**을 먼저 쓴다.
       · 이름은 Figma 변수 경로의 '/' 를 '-' 로 바꾼 것이다(예: background/canvas-start → --background-canvas-start).
       · 색과 alpha 는 분리한다 — 시안이 "paint 30%" 처럼 투명도를 붙인 역할만 여기서 섞어 둔다.
       · 세 화면에 근거가 없는 success / warning / error 는 추가하지 않는다. 없는 단계(ramp)도 만들지 않는다.
     ════════════════════════════════════════════════════════════════ */
  /* ── 1) 원색 · Primitives (21) ── */
  /* Navy — 깊이 · 바탕 · 선택 표면 */
  --navy-950:      #000517;
  --navy-900:      #040919;
  --navy-chrome:   #030A11;
  --navy-800:      #0D1739;
  --navy-700:      #1A1F3B;
  --navy-selected: #202248;
  /* Slate — 유리 · 트랙 · 활성 테두리 */
  --slate-600: #414F70;
  --slate-300: #9DAFC8;
  --slate-500: #1B2430;
  /* Neutral — 카드 · 컨트롤 · 글자 */
  --neutral-950:  #141417;
  --neutral-800:  #363539;
  --neutral-600:  #54575F;
  --neutral-100:  #D7D7D7;
  --neutral-0:    #FFFFFF;
  --neutral-1000: #000000;
  /* Ice — 강조 · 진행 · 차가운 빛 */
  --ice-500: #4288C0;
  --ice-200: #C2E2FF;   /* 2026-10-07 Figma 변경(전: #A3D2FC) — text/accent · 버튼 보더 · 포커스 테두리가 같이 바뀐다 */
  --ice-100: #C5DAF3;
  --ice-50:  #DEE9FF;
  /* Lavender — 비활성 · 내부 발광 */
  --lavender-400: #CFB8FB;
  --lavender-600: #7A7C98;

  /* ── 2) 역할 · Semantic (30) ── */
  /* Background / Surface */
  --background-canvas-start: var(--navy-950);    /* 바탕 시작점 */
  --background-canvas-end:   var(--navy-900);    /* 바탕 끝점 */
  --background-chrome:       var(--navy-chrome); /* 제품 크롬의 경계 — 사파리 상하 바 색 */
  --surface-card:     var(--neutral-950);        /* 신분증 카드 */
  --surface-control:  var(--neutral-800);        /* 닫기 등 보조 컨트롤 */
  --surface-glass:    color-mix(in srgb, var(--slate-600) 30%, transparent);  /* 유리 표면 · paint 30% */
  --surface-selected: var(--navy-selected);      /* 선택된 아이콘 표면 */
  /* Text / Icon */
  --text-primary:   var(--neutral-0);                                       /* 제목·본문 */
  --text-secondary: color-mix(in srgb, var(--neutral-0) 50%, transparent);  /* 보조 설명 · paint 50% */
  --text-id-number: var(--neutral-100);    /* 신분증 번호 */
  --text-accent:    var(--ice-200);        /* 신분증 진입 강조 */
  --text-on-light:  var(--neutral-1000);   /* 밝은 액션 위 텍스트 */
  --text-disabled:  var(--lavender-600);   /* 비활성 텍스트 */
  --icon-primary:   var(--neutral-0);      /* 활성 아이콘 */
  --icon-on-light:  var(--neutral-1000);   /* 흰색 액션 위 아이콘 */
  --icon-disabled:  var(--lavender-600);   /* 비활성 아이콘 */
  /* Border / Progress / Action */
  --border-subtle: color-mix(in srgb, var(--neutral-600) 80%, transparent);   /* 미세 테두리 · 원본 80% */
  --border-card:   color-mix(in srgb, var(--lavender-600) 16%, transparent);  /* 카드 경계 · 원본 16% */
  --border-active: var(--slate-300);       /* 선택 상태의 경계 */
  --progress-track: var(--slate-500);      /* 전체 체험 트랙 */
  --progress-fill:  var(--ice-100);        /* 완료 체험 구간 */
  --action-primary-background: var(--neutral-0);   /* 주요 액션의 흰색 바탕 */
  /* Glow / Gradient stop */
  --glow-blue:     color-mix(in srgb, var(--ice-500) 20%, transparent);       /* 푸른 발광 · alpha 20% (+ blur) */
  --glow-slate:    var(--slate-600);                                          /* 슬레이트 광원 */
  --glow-ambient:  color-mix(in srgb, var(--ice-50) 40%, transparent);        /* 주변광 · alpha 40% (+ blur) */
  --glow-progress: var(--ice-100);                                            /* 진행 구간의 빛 */
  --glow-lavender: color-mix(in srgb, var(--lavender-400) 40%, transparent);  /* 내부 발광 · alpha 40% */
  --gradient-ambient-light: var(--slate-300);   /* 안개 밝은 stop */
  --gradient-ambient-mid:   var(--navy-700);    /* 안개 중간 stop */
  --gradient-ambient-dark:  var(--navy-800);    /* 안개 어두운 stop */

  /* ── 3) 그라디언트 · Paint styles (3) — 단일 HEX 로 환원할 수 없는 바탕과 복합 표면 ── */
  /* HP Mobile/Background/Midnight radial — 오른쪽 위 모서리에서 퍼지는 바탕 깊이(navy/950 0% → navy/900 89.43%).
     시안은 회전·기울기가 든 행렬(matrix -24.75 44 -37.5 -21.094 375 0, r 10)인데, 두 색이 거의 같아(#000517 · #040919)
     축 길이만 옮긴 타원(505 × 430)으로 근사했다 — 눈으로 구분되지 않는다. */
  --paint-midnight-radial: radial-gradient(505px 430px at 100% 0,
    var(--background-canvas-start) 0%, var(--background-canvas-end) 89.43%);
  /* HP Mobile/Background/Ambient mist — 위에서 아래로 slate/300 53.10% → navy/700 70.35% → navy/800 100%, paint 80%.
     원본은 blur 120 · 레이어 opacity 60% 로 한 번 더 합성한다(그건 스타일 밖의 합성 속성 — 쓰는 자리에서 준다). */
  --paint-ambient-mist: linear-gradient(180deg,
    color-mix(in srgb, var(--gradient-ambient-light) 80%, transparent) 53.10%,
    color-mix(in srgb, var(--gradient-ambient-mid) 80%, transparent) 70.35%,
    color-mix(in srgb, var(--gradient-ambient-dark) 80%, transparent) 100%);
  /* HP Mobile/Surface/ID glass — neutral/950 위에 아래에서 위로 #FFFFFFE5 0% → #769AE066 50% → #2F3A5C00 100%, paint 90%.
     ⚠️ 보조 stop 은 복합 paint 의 추출값이라 원색 ramp 로 확장하지 않는다(⚠️ non-token stop). */
  --paint-id-glass:
    linear-gradient(0deg, rgba(255, 255, 255, 0.81) 0%, rgba(118, 154, 224, 0.36) 50%, rgba(47, 58, 92, 0) 100%),
    var(--surface-card);

  /* ════════════════════════════════════════════════════════════════
     2) 서브 — 메인 밖에서 아직 쓰는 색 (Figma Color-system / Kiosk 변수)
     실제로 쓰는 단계만 남겼다. 주석의 "쓰는 곳"이 비면 그 토큰을 지운다.
     화면에서 원색 그대로 쓴다(서브에는 역할 토큰을 두지 않는다 — 결과 화면이 남색으로 옮겨 가면 사라질 색들이다).
     ════════════════════════════════════════════════════════════════ */
  /* Purple — 보라 시절의 메인. 이제 서브다(500 은 쓰던 체험중 화면이 사라져 2026-10-14 삭제) */
  --purple-700: #543296;   /* Kiosk/purple_700 — 저장 버튼 색 variant 의 라벨 그라디언트(.btn-cta--blue · red · green · yellow · gray) */

  /* Blue(페리윙클) */
  --blue-50:  #EFEEFF;     /* Kiosk/blue_50 — 결과 머리말 kicker(.content-title__kicker) · 결과 메타 라벨(.wres · .pres · .hres__note 등) */
  --blue-100: #BDBBFE;     /* Kiosk/blue_100 — 기숙사 결과 래번클로 막대 라벨 · 퍼센트(app.js HOUSE_SKIN) */

  /* Yellow(골드) */
  --yellow-50:  #FFFBF2;   /* Kiosk/yellow_50 — 기숙사 결과 후플푸프 막대 라벨(app.js HOUSE_SKIN) */
  --yellow-400: #FFDA7D;   /* Kiosk/yellow_400 — 기숙사 결과 후플푸프 퍼센트(app.js HOUSE_SKIN) · ⚠️ 2026-08-25 미확인 값 그대로 */

  /* Green */
  --green-300: #D5FFC8;    /* Color-system/green_300 — 기숙사 결과 슬리데린 막대 라벨(app.js HOUSE_SKIN) */
  --green-500: #92FA9B;    /* Color-system/green_500 — 성공 토스트 테두리 · 반짝이(.toast--success) */
  --green-600: #67FF6F;    /* Color-system/green_600 — 기숙사 결과 슬리데린 퍼센트(app.js HOUSE_SKIN) */

  /* Red */
  --red-200: #E2A8A8;      /* Color-system/red_200 — 기숙사 결과 그리핀도르 막대 라벨 */
  --red-400: #FA9292;      /* Color-system/red_400 — 기숙사 결과 그리핀도르 퍼센트 */
  --red-500: #FF8484;      /* Color-system/red_500 — 실패 토스트 테두리 · 반짝이(.toast--fail) */
  --red-800: #6F1F1F;      /* Color-system/red_800 — 기숙사 결과 그리핀도르 막대 */

  /* Gray */
  --gray-100: #D7D7D7;     /* Color-system/gray_100 — Button 면 · 탈퇴 팝업 [확인] · 결과 메타 줄 · 기숙사 막대 라벨 (값은 메인 neutral/100 과 같다) */
  --gray-200: #AAAAAA;     /* Color-system/gray_200 — 보조 본문(결과 설명 · 동의 시트 · 닉네임 시트 등 12곳) */
  --gray-600: #7A7C98;     /* Color-system/gray_600 — 기숙사 결과 막대 퍼센트(.hres__bar-pct) (값은 메인 lavender/600 과 같다 — 보랏빛이 돈다) */

  /* 흑백 */
  --white: #FFFFFF;        /* Kiosk/white — 흰 글자 전반 (값은 메인 neutral/0 과 같다) */
  --black: #010101;        /* Color-system/Black — 기숙사 · 물약 결과 화면 바탕(.hres1 · .hres · .pres1 · .pres) */

  /* 흰색 알파 — Figma 에 알파 변수가 없어 투명도로 파생한다(새 색이 아니다) */
  --white-a08: color-mix(in srgb, var(--white) 8%,  transparent);   /* 약관 · 동의서 표 머리 줄 · 머리 칸(10-19 — 전 동의 시트 본문 펼침 상자) */
  --white-a16: color-mix(in srgb, var(--white) 16%, transparent);   /* 탈퇴 팝업 테두리 */
  --white-a24: color-mix(in srgb, var(--white) 24%, transparent);   /* ⚠️ 2026-10-19 쓰는 곳 없음 — 동의서 v2 시안의 [전체 동의] 테두리가 흰 100% 로 바뀌었다(전 동의 시트 · 전 --border-default) */
  --white-a40: color-mix(in srgb, var(--white) 40%, transparent);   /* ⚠️ 2026-10-19 쓰는 곳 없음 — 동의서 v2 시안의 체크 테두리가 흰 100%(check-off.svg)로 바뀌었다 */

  /* ════════════════════════════════════════════════════════════════
     3) 앱 공통 역할 — Figma 변수 밖에서 앱이 정한 역할
     ════════════════════════════════════════════════════════════════ */
  /* 딤 — 시트 · 팝업 뒤를 누르는 막 (2026-10-07).
     Figma 변수에는 없고, 계정관리 닉네임 시트 3480-18314 실측값(#0A0A0A 70%)이다. 화면마다 조금씩 달랐던 딤
     (#0A0A0A 70% · #05090A 70% · black_60 50%)을 이 하나로 모았다 — 닉네임 시트 · 동의 시트 · 탈퇴/동의 거부 팝업 ·
     결과 상세 시트가 같이 쓴다. 번짐(backdrop-filter)은 쓰는 자리 몫이다. */
  --surface-scrim: rgba(10, 10, 10, 0.7);
  /* 키보드 포커스 테두리 — 2026-10-06 네이비 강조색(전: blue_200 보라빛) */
  --focus-ring: var(--ice-200);
  /* 밝은 면 칠 — background(-image) 로 쓰는 단색 그림 (2026-10-27).
     삼성 인터넷 강제 다크 모드(갤럭시 다크 모드 · 절전 모드)는 밝은 CSS 바탕 · 테두리를 어둡게 바꾸지만 SVG 의 밝은
     단색 칠은 그대로 둔다(페이지 쪽에서 강제 다크를 끌 방법은 없다 — 사용성 테스트 10-27). 그래서 강제 다크에서도
     밝게 남아야 하는 면(CTA 면 등)은 색 대신 이 그림으로 칠한다. 그 위 어두운 글자는 어두운 그라디언트를 글자에
     클립한다 — 단색 글자는 어두우면 밝게 뒤집힌다. 규칙과 그림 변환은 scripts/svg-alpha-gradients.py 머리말. */
  --paint-gray-100:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23D7D7D7'/%3E%3C/svg%3E");
  --paint-ice-200:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23C2E2FF'/%3E%3C/svg%3E");
  --paint-white:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23FFFFFF'/%3E%3C/svg%3E");
  /* 코치마크 [다음] · 확인 팝업 실행 버튼 면 — Figma scanner/token/purple-100(관람객 토큰에 없다) */
  --paint-purple-100: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23EEF1FE'/%3E%3C/svg%3E");

  /* Font Family
     2026-09-03 교체: 이제 화면 텍스트는 accent / base 두 축으로만 간다.
       --font-accent (Hahmlet)              타이틀·결과카드 등 강조 자리
       --font-base   (NEXON Lv2 Gothic OTF) 그 외 모든 텍스트
     그 밖의 글꼴은 정해진 자리에만 쓴다 — 결과 이름(Nimbus) · 퀴디치 점수(EASTARJET · HP Quidditch Score) ·
     결과 첫 화면 "tap to continue"(Lumos).
 */
  --font-accent: 'Hahmlet', serif;
  --font-base: 'NEXON Lv2 Gothic OTF', 'Noto Sans KR', sans-serif;

  --font-display: 'Lumos', serif;                 /* ⚠️ 예외 — 결과 첫 화면 "tap to continue" 한 줄 */
  /* 2026-10-14 삭제 — EB Garamond(파일 없음) · AquilineTwo · Callifont Samulnori(학생증 화면과 함께 쓰는 곳이 사라졌다),
     Harry Beast Cyr(--font-display-alt, 2026-10-08 사용 불가) · Noto Sans KR(--font-secondary) — 옛 결과 화면과 함께 걷었다. */

  /* ── 글꼴 — 홈 체험 완료 캡션의 결과 이름(Figma Nimbus Roman No9 L Regular 36) ──
     위 @font-face 로 실어 나른다. 못 받으면 같은 계열(Times 클론)인 Times New Roman 으로 떨어진다. */
  --font-serif-title: 'Nimbus Roman No9 L', 'Nimbus Roman', 'Times New Roman', Times, serif;
  /* ── 글꼴 — 홈 퀴디치 캡션의 닉네임 · 점수(Figma EASTARJET Heavy 36) ── */
  --font-score: 'EASTARJET', 'NEXON Lv2 Gothic OTF', sans-serif;
  /* ── 글꼴 — 퀴디치 결과 화면의 점수 숫자(Figma Monoplex KR Bold 48) ── */
  --font-score-digits: 'HP Quidditch Score', 'EASTARJET', sans-serif;

  /* Spacing (8pt grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 9999px;
}

/* ══════════════════════════════════════════════════════════════════════
   Typography — 2026-09-03 신규 체계 (accent / base)
   출처: Figma HarryPotter_UI node 3474-16640(base · NEXON Lv2 Gothic OTF) +
         3479-16859(accent · Hahmlet). 값은 node 3085-5553 컴포넌트 시트의
         get_variable_defs로 교차 확인했다.

   클래스명은 피그마 토큰명을 그대로 kebab-case로 옮긴다 —
     "accent/display1/SB-64" → .accent-display1-sb-64
     "base/body1/M-16"       → .base-body1-m-16
   디자이너가 부르는 이름과 코드의 클래스명이 항상 같게 유지한다(기존 규칙 그대로).

   웨이트 약어: SB=SemiBold(600) · B=Bold(700) · M=Medium(500) · R=Regular(400) · L=Light(300)

   ⚠️ **line-height·letter-spacing은 크기가 아니라 웨이트가 정한다.** 사이즈별로 외우지 말 것.
      letter-spacing은 피그마가 PERCENT로 준 값이라 px로 환산하지 않고 em으로 둔다 —
      같은 토큰을 다른 크기에 얹어도 비율이 유지되고 환산 실수가 생기지 않는다.

        base    B·M → 150% / +0.5%        accent   SB → 130% / -1%
                R·L → 150% / +1%                   R  → 150% / -1%
                                                   L  → 150% /  0

      즉 base는 두 조합, accent는 세 조합이 전부다. 사이즈는 이 값에 영향을 주지 않는다.
      (출처: 3474-16640 · 3479-16859의 get_variable_defs 전수 확인 — 48개 토큰 모두 이 규칙을 따른다)

      검증 — 피그마가 코드로 내보낸 tracking과 정확히 일치한다:
        base/head2/M-18  → 18 × +0.5% = +0.09px
        base/body1/R-16  → 16 × +1%   = +0.16px
        accent/body4/R-12 → 12 × -1%  = -0.12px
   ══════════════════════════════════════════════════════════════════════ */

/* Accent — Hahmlet. 타이틀·결과카드 등 강조 자리에만.
   자간: SB·R = -1% · L = 0 (Figma 3479-16859 변수 실측) */
.accent-display1-sb-64 { font-family: var(--font-accent); font-weight: 600; font-size: 64px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-display1-sb-60 { font-family: var(--font-accent); font-weight: 600; font-size: 60px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-display1-sb-48 { font-family: var(--font-accent); font-weight: 600; font-size: 48px; line-height: 1.3; letter-spacing: -0.01em; }

.accent-head1-sb-24 { font-family: var(--font-accent); font-weight: 600; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-head1-r-24 { font-family: var(--font-accent); font-weight: 400; font-size: 24px; line-height: 1.5; letter-spacing: -0.01em; }
.accent-head1-l-24  { font-family: var(--font-accent); font-weight: 300; font-size: 24px; line-height: 1.5; letter-spacing: 0; }
.accent-head2-sb-22 { font-family: var(--font-accent); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-head2-r-22 { font-family: var(--font-accent); font-weight: 400; font-size: 22px; line-height: 1.5; letter-spacing: -0.01em; }
.accent-head2-l-22  { font-family: var(--font-accent); font-weight: 300; font-size: 22px; line-height: 1.5; letter-spacing: 0; }

.accent-body1-sb-18 { font-family: var(--font-accent); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-body1-r-18 { font-family: var(--font-accent); font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; }
.accent-body1-l-18  { font-family: var(--font-accent); font-weight: 300; font-size: 18px; line-height: 1.5; letter-spacing: 0; }
.accent-body2-sb-16 { font-family: var(--font-accent); font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-body2-r-16 { font-family: var(--font-accent); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; }
.accent-body2-l-16  { font-family: var(--font-accent); font-weight: 300; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.accent-body3-sb-14 { font-family: var(--font-accent); font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-body3-r-14 { font-family: var(--font-accent); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; }
.accent-body3-l-14  { font-family: var(--font-accent); font-weight: 300; font-size: 14px; line-height: 1.5; letter-spacing: 0; }
.accent-body4-sb-12 { font-family: var(--font-accent); font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: -0.01em; }
.accent-body4-r-12 { font-family: var(--font-accent); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; }
.accent-body4-l-12  { font-family: var(--font-accent); font-weight: 300; font-size: 12px; line-height: 1.5; letter-spacing: 0; }

/* Base — NEXON Lv2 Gothic OTF. 타이틀 제외 서브 텍스트 전반. line-height 150% 고정.
   자간: B·M = +0.5% · R·L = +1% (Figma 3474-16640 변수 실측) */
.base-display1-m-52 { font-family: var(--font-base); font-weight: 500; font-size: 52px; line-height: 1.5; letter-spacing: 0.005em; }
.base-display2-m-44 { font-family: var(--font-base); font-weight: 500; font-size: 44px; line-height: 1.5; letter-spacing: 0.005em; }
.base-display3-m-36 { font-family: var(--font-base); font-weight: 500; font-size: 36px; line-height: 1.5; letter-spacing: 0.005em; }
.base-display3-r-36 { font-family: var(--font-base); font-weight: 400; font-size: 36px; line-height: 1.5; letter-spacing: 0.01em; }
.base-display3-l-36 { font-family: var(--font-base); font-weight: 300; font-size: 36px; line-height: 1.5; letter-spacing: 0.01em; }
.base-display4-m-32 { font-family: var(--font-base); font-weight: 500; font-size: 32px; line-height: 1.5; letter-spacing: 0.005em; }
.base-display4-r-32 { font-family: var(--font-base); font-weight: 400; font-size: 32px; line-height: 1.5; letter-spacing: 0.01em; }
.base-display4-l-32 { font-family: var(--font-base); font-weight: 300; font-size: 32px; line-height: 1.5; letter-spacing: 0.01em; }

.base-head1-b-20 { font-family: var(--font-base); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: 0.005em; }
.base-head1-m-20 { font-family: var(--font-base); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: 0.005em; }
.base-head1-r-20 { font-family: var(--font-base); font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: 0.01em; }
.base-head1-l-20 { font-family: var(--font-base); font-weight: 300; font-size: 20px; line-height: 1.5; letter-spacing: 0.01em; }
.base-head2-b-18 { font-family: var(--font-base); font-weight: 700; font-size: 18px; line-height: 1.5; letter-spacing: 0.005em; }
.base-head2-m-18 { font-family: var(--font-base); font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: 0.005em; }
.base-head2-r-18 { font-family: var(--font-base); font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: 0.01em; }
.base-head2-l-18 { font-family: var(--font-base); font-weight: 300; font-size: 18px; line-height: 1.5; letter-spacing: 0.01em; }

.base-body1-b-16 { font-family: var(--font-base); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0.005em; }
.base-body1-m-16 { font-family: var(--font-base); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.005em; }
.base-body1-r-16 { font-family: var(--font-base); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.01em; }
.base-body1-l-16 { font-family: var(--font-base); font-weight: 300; font-size: 16px; line-height: 1.5; letter-spacing: 0.01em; }
.base-body2-m-14 { font-family: var(--font-base); font-weight: 500; font-size: 14px; line-height: 1.5; letter-spacing: 0.005em; }
.base-body2-r-14 { font-family: var(--font-base); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; }
.base-body2-l-14 { font-family: var(--font-base); font-weight: 300; font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; }
.base-body3-m-12 { font-family: var(--font-base); font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: 0.005em; }
.base-body3-r-12 { font-family: var(--font-base); font-weight: 400; font-size: 12px; line-height: 1.5; letter-spacing: 0.01em; }
.base-body4-m-10 { font-family: var(--font-base); font-weight: 500; font-size: 10px; line-height: 1.5; letter-spacing: 0.005em; }
.base-body4-r-10 { font-family: var(--font-base); font-weight: 400; font-size: 10px; line-height: 1.5; letter-spacing: 0.01em; }

/* 2026-10-14 삭제 — .type-beast-r-36/28/22/18(Harry Beast 사용 불가) · .type-lumos-caps-24 · .type-garamond-m-24/14 는
   쓰는 곳이 없었다. 예외 글꼴은 클래스 없이 쓰는 자리에서 var(--font-*) 로 부른다. */