/* 색 값은 전부 여기에만 적는다(app.css 본문에는 0개, 태스크32 재확인). 화면 꾸미기(app.css)는
   이 이름을 부른다.
   태스크32(병합 전 검수 권고 ②) - 크기 값은 "전부"가 아니다. 여기 모은 크기는 설계서 §4 에서
   docs/참고화면 의 그림을 직접 재어 온 값(캐릭터 상자 6종·흰 알약 단추·넓은 화면 축하 상자)과
   admin.js·collection.js 의 입력칸 크기(아래 문단 참고)뿐이다. app.css 본문에는 이 목록 밖의
   레이아웃용 리터럴 px 가 197개 남아 있다(여백·간격·둥근모서리·글자크기 등 - 설계 실측 대상이
   아니라서 안 옮기기로 함, 태스크32 실측 - 옮기는 건 위험 대비 효과가 낮아 이 태스크 범위 밖으로
   미룸). 대신 사실에 맞는 좁은 문장으로 못박는다 - "위에 나열한 설계 실측값(캐릭터·알약·무대
   규격)만큼은 예외 없이 전부 여기 토큰으로만 있고, app.css 에 그 값과 같은 리터럴 px 를 그대로
   되풀이해 적은 곳이 없다"(app.css 를 직접 훑어 확인, 태스크32).
   새 색이 필요하면 이 파일에 이름을 만들고, app.css 에는 절대 # 값을 직접 적지 않는다
   (설계서 §9-1 5번·12번 함정). */
:root {
  /* 화면 성격별 바탕색(설계서 §4-1) — 뒤에 만들 부화·축하·도감 등 화면이 쓴다 */
  --hatch-bg: #0E9BE2;       /* 부화 */
  --celebrate-bg: #5AB67A;   /* 축하(가득·단계 오름) */
  /* 축하 덮개 카드(2026-09-08 사용자 결정) - 카드 바탕을 초록에서 **흰색**으로 바꿨다. 캐릭터 색은
     사용자가 6종 중 고르는데 카드가 초록 하나로 고정이라 어떤 색을 골라도 부딪쳤다. 참고로 삼은
     축하 화면들(Alan·Nibble·Duolingo)이 전부 흰 바탕에 색깔 캐릭터다. --celebrate-bg 는 없애지
     않고 단추·막대의 강조색으로 계속 쓴다. */
  --celebrate-card: #ffffff;   /* 축하 카드 바탕 */
  --celebrate-ink: #1f2937;    /* 축하 카드 글자(= --ink 와 같은 값이지만 뜻이 달라 따로 이름 붙임) */
  /* 캐릭터 뒤에서 사방으로 뻗는 햇살 무늬(Me+·Kit 참고). 색을 app.css 에 못 적으므로 무늬 자체를
     여기서 만든다 - 축하 초록을 옅게 깐 살(6도)과 빈칸(14도)이 번갈아 돈다. */
  --burst-rays: repeating-conic-gradient(from 0deg, rgba(90, 182, 122, .34) 0deg 6deg, rgba(90, 182, 122, 0) 6deg 20deg);
  /* 햇살 무늬를 가운데는 비우고 바깥으로 갈수록 사라지게 오려 내는 틀. 색을 app.css 에 못 적으므로
     이것도 여기서 만든다(mask 는 색이 아니라 「얼마나 보이나」를 나타내지만 값 자체는 색 표기다). */
  --burst-mask: radial-gradient(closest-side, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 0) 70%);
  --grow-bg: #7FAD5A;        /* 성장 알림 */
  --intro-bg: #F8D585;       /* 동물 소개 */
  --collection-bg: #BDDAA5;  /* 도감 */
  --overlay-bg: #232235;     /* 덮개 뒤 어둡게(부화·축하 넓은 화면용, 불투명) */

  /* 입장 화면 그라데이션(설계서 §5-1) - 07_웹구도/hashnode_입장.png 에서 실측(위→중간→아래) */
  --login-bg-1: #CAC6FD;
  --login-bg-2: #9DB1FB;
  --login-bg-3: #C7E0FD;

  /* 캐릭터 상자 크기(설계서 §6-1) — 뒤에 character.js 호출부가 이 이름을 쓴다 */
  --char-xs: 28px;   /* 상단 메뉴 */
  --char-sm: 40px;   /* 나라 카드·보드 머리띠 */
  --char-done: 48px; /* 나라 카드 완료 표시 */
  --char-md: 96px;   /* 도감 칸 */
  --char-me: 120px;  /* 도감 내 캐릭터 */
  --char-lg: 140px;  /* 부화·단계 오름 */
  --char-xl: 180px;  /* 진화 화면의 「진화 후」 - 다른 화면의 가장 큰 자리(140)보다 커야 한다 */

  /* 흰 알약 단추(설계서 §4-2) */
  --pill-h: 43px;
  --pill-r: 22px;
  --pill-gap: 52px;     /* 워터마크를 몇 줄로 세느냐에 따라 50~52 */
  --pill-ratio: 83.5%;  /* 담긴 상자 폭 대비. 넓은 화면에서는 상자 안에서만 적용(§9-1 6번) */

  /* 넓은 화면 축하 상자(설계서 §4-3) */
  --stage-w: 40%;
  --stage-h: 38%;

  /* ---- 여기부터는 원래 app.css 맨 위 :root 에 있던 값이다(이름·값 그대로, 자리만 옮김) ---- */
  --bg: #f6f7fb; --card: #ffffff; --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb;
  --primary: #2563eb; --primary-ink: #ffffff; --hold: #0ea5e9; --danger: #dc2626; --warn: #d97706;
  --match: #16a34a; --changed: #ea580c; --none: #6b7280; --stamp-hold: #0284c7;
  --radius: 14px; --shadow: 0 6px 24px rgba(17, 24, 39, .08);
  /* 색종이 6종(confetti - app.css 의 .confetti:nth-child). 2026-09-08 사용자 결정으로
     쨍한 색에서 **파스텔**로 바꿨다 - 축하 카드가 흰 바탕이 되면서 쨍한 보라(#a855f7)가 특히
     부딪쳤다. 덤으로 색끼리 더 잘 갈린다(가장 가까운 두 색의 색상각 차이 20도 -> 33도).
     태스크3(2026-09-10) - 예전엔 사람 캐릭터(bird_c0~5.png)도 이 여섯을 색칠했지만, 캐릭터가
     목록(characters.json) 기반 햄스터 그림으로 바뀌면서 그 쓰임은 없어졌다(tools/make_person_
     colors.py 와 그 색상 대조 시험도 함께 지웠다) - 지금은 색종이 전용이다. */
  --c0: #F2A08A; --c1: #86CFAF; --c2: #8FC5E8; --c3: #B7A6E0; --c4: #EFA0BE; --c5: #EBD07A;

  /* ---- 여기부터는 app.css 본문에 직접 적혀 있던 색이다. 뜻별로 이름을 붙였다 ---- */
  /* 안내 띠(banner·band)·꼬리표·배지가 함께 쓰는 톤(tone) — 같은 색이 여러 곳에 그대로 반복되던 것을
     하나로 묶었다. 글자색은 이미 있는 --danger·--warn 과 진하기가 달라 배경과 짝지어 새로 이름 붙였다. */
  --tone-red-bg: #fee2e2;     /* 오류 계열 바탕(안내띠·꼬리표·배지 공용) */
  --tone-red-fg: #991b1b;     /* 오류 계열 바탕 위 진한 글자(꼬리표·배지) */
  --tone-amber-bg: #fef3c7;   /* 경고 계열 바탕(안내띠·꼬리표 공용) */
  --tone-orange-bg: #ffedd5;  /* 바뀜 계열 바탕(꼬리표·배지) */
  --tone-orange-fg: #9a3412;  /* 바뀜 계열 바탕 위 글자 */
  --tone-green-bg: #dcfce7;   /* 일치·완료 계열 바탕(꼬리표·배지 공용) */
  --tone-green-fg: #166534;   /* 일치·완료 계열 바탕 위 글자 */
  --tone-gray-bg: #f3f4f6;    /* 없음 계열 바탕(꼬리표·배지 공용) */
  --tone-gray-fg: #374151;    /* 없음 계열 바탕 위 글자 */
  --band-info-bg: #dbeafe;    /* 안내(파랑) 바탕 — 배너·안내띠·「선택됨」 꼬리표 공용 */
  --band-info-fg: #1d4ed8;    /* 안내 띠(.band.info) 글자 */

  /* 꼬리표(.tag) 전용 — 다른 곳과 안 겹치는 값 */
  --tag-default-bg: #eef2ff; --tag-default-fg: #3730a3;
  --tag-ai-fg: #92400e;       /* .tag.ai 글자(경고 바탕 위, --warn 과는 다른 진하기라 따로 둠) */
  --tag-chosen-fg: #1e40af;   /* .tag.chosen 글자(안내 바탕 위, --band-info-fg 와는 다른 진하기라 따로 둠) */
  --tag-edit-bg: #fde68a; --tag-edit-fg: #78350f;

  /* 배지(.stamp-badge) 「보류」 전용 — 기존 --hold·--stamp-hold 보다 옅은 색이라 따로 둠 */
  --badge-hold-bg: #e0f2fe; --badge-hold-fg: #075985;

  /* 표 행(tr) 강조 */
  --row-chosen-bg: #eff6ff;  /* 고른 행·마우스 올린 내 행 공용(원래도 같은 색이었다) */
  --row-ours-bg: #f8fafc;    /* 우리 쪽 행 */
  --row-faint-fg: #cbd5e1;   /* 제외·없음 행 글자 */
  --disabled-fg: #9ca3af;    /* 못 누르는 단추·약한 행 글자 공용(원래도 같은 색이었다) */

  /* 입력칸 오류 바탕(연한 붉은 기) */
  --input-error-bg: #fff5f5;

  /* 알림(toast) — 글자는 흰색이라 기존 --primary-ink 를 그대로 쓴다(같은 값) */
  --toast-bg: #111827;
  --toast-link-fg: #93c5fd;

  /* 도장(stamp) 뒤 반투명 흰 바탕 */
  --stamp-overlay-bg: rgba(255, 255, 255, .85);
  /* 국가 카드 에너지 반원 고리(설계서 §5-2 - countries.js renderEnergy 가 그리는 svg 도) 채움 색.
     원래 countries.js 안에 #f59e0b 로 직접 적혀 있던 것을 옮겼다(값은 그대로, 9-1 5번 함정) */
  --energy-ring-fg: #f59e0b;

  /* 관리 화면 입력칸 크기(admin.js)·도감 이름 입력칸(collection.js) - 코덱스 교차검토
     2026-09-07 ④: 이 머리말이 "크기 값은 전부 여기에만 적는다"고 못박아 뒀는데 실제로는
     admin.js·collection.js 에 style="width:70px" 류 리터럴 값이 그대로 남아 있었다.
     참고화면 실측 대상인 게임 화면과 달리 순수 관리용 화면이라 딱 맞는 실측값은 없고, 원래
     코드에 있던 값을 이름만 붙여 그대로 옮겼다. */
  --admin-code-input-w: 70px;    /* 나라 약자 입력칸(admin.js countryRow, maxlength=5 와 짝) */
  --admin-reason-input-w: 180px; /* 「다시 볼 것」 목록의 근거 입력칸(admin.js loadReviewList) */
  --admin-actions-gap: 10px;     /* 나라 추가·설정 저장 단추 줄 위 간격(admin.js) */
  --name-input-w: 160px;         /* 도감 이름 바꾸기 입력칸(collection.js) */

  /* 시안 배경(설계서 §4-2 · 개정 1) - 두 화면이 같은 그림을 쓰고 「흰 막의 진하기」만 다르다.
     옅게 하는 방법은 이 막 하나로 못 박는다(흐리게 하는 blur 는 쓰지 않는다 - 매 프레임 다시
     계산해 스크롤이 끊기고, 흐린 정도와 밝기가 따로 놀아 대비를 잴 수가 없다). 막의 색은
     --bg 와 같은 값이라, 막이 진해질수록 지금 화면 바탕색으로 자연스레 되돌아간다. */
  --scene-url: url("/assets/bg/meadow.png");
  --veil-clear: linear-gradient(rgba(246, 247, 251, 0), rgba(246, 247, 251, 0));      /* 국가 고르기 - 그림 그대로 */
  --veil-heavy: linear-gradient(rgba(246, 247, 251, .82), rgba(246, 247, 251, .82));  /* 검수 표 - 82% 덮어 옅게 */
  --scene-veil: var(--veil-heavy);   /* 기본값. 없으면 클래스를 안 붙인 자리에서 배경 선언 자체가 무효가 된다 */

  /* 카드가 날아갈 때 드리우는 그림자(Task 5 가 쓴다) */
  --fly-shadow: 0 18px 40px rgba(17, 24, 39, .28);
}