/* 등급 색 — 한 곳에서만 정한다.
 *
 * 예전에는 페이지마다 색을 따로 적어 뒀고, 그 색은 순서가 없는 무지개였다.
 * S=금색 A=초록 B=파랑 C=주황 D=회색 E=빨강. S와 C가 사실상 같은 주황이라
 * 색만으로는 최상위와 보통이 구분되지 않았다.
 *
 * 지금 규칙 — 위로 갈수록 선명하고, 아래로 갈수록 옅어진다.
 *   가치 = 파랑, 성장 = 초록.
 *   S    색이 꽉 찬 배지 + 광택(그라데이션·발광·윗면 하이라이트)
 *   A    색이 꽉 찬 배지 (광택 없음 — 전부 반짝이면 아무것도 반짝이지 않는다)
 *   B~E  옅은 배경 + 진한 글자. 아래로 갈수록 배경이 밝아져 E는 페이지에 묻힌다.
 *   E는 두 축이 같은 회색이다. "신호 없음"은 어느 축이든 같아 보여야 한다.
 *
 * 배경 위 글자는 여섯 칸 모두 명암비 4.65:1 이상이다(계산으로 맞춘 값).
 * 색을 바꿀 일이 생기면 이 파일과 grades.js를 함께 고치면 전 페이지가 따라온다.
 */

:root {
    /* 가치 — 파랑 */
    --gv-s-bg: linear-gradient(135deg, #5994F8, #1E6CF3);
    --gv-s-solid: #1E6CF3;  --gv-a-bg: #2A6FD8;
    --gv-b-bg: #D2E2FD;  --gv-b-fg: #0F4BC4;
    --gv-c-bg: #E2ECFD;  --gv-c-fg: #2A5CB8;
    --gv-d-bg: #EFF5FE;  --gv-d-fg: #566072;
    /* 성장 — 초록 */
    --gg-s-bg: linear-gradient(135deg, #07AB5F, #06864A);
    --gg-s-solid: #06864A;  --gg-a-bg: #0A7A46;
    --gg-b-bg: #CDE7DB;  --gg-b-fg: #065C35;
    --gg-c-bg: #DFEFE7;  --gg-c-fg: #1E6B45;
    --gg-d-bg: #EEF7F2;  --gg-d-fg: #566072;
    /* 공통 — E */
    --g-e-bg: #F5F6F8;   --g-e-fg: #5F6773;
    /* 광택 */
    --gv-glow: 0 2px 10px rgba(30,108,243,.45), inset 0 1px 0 rgba(255,255,255,.34);
    --gg-glow: 0 2px 10px rgba(6,134,74,.45), inset 0 1px 0 rgba(255,255,255,.34);
}

/* 가치 배지 */
.grade-S { background: var(--gv-s-bg); color: #fff; box-shadow: var(--gv-glow); }
.grade-A { background: var(--gv-a-bg); color: #fff; }
.grade-B { background: var(--gv-b-bg); color: var(--gv-b-fg); }
.grade-C { background: var(--gv-c-bg); color: var(--gv-c-fg); }
.grade-D { background: var(--gv-d-bg); color: var(--gv-d-fg); }
.grade-E { background: var(--g-e-bg);  color: var(--g-e-fg); }

/* 성장 배지 */
.ggrade-S { background: var(--gg-s-bg); color: #fff; box-shadow: var(--gg-glow); }
.ggrade-A { background: var(--gg-a-bg); color: #fff; }
.ggrade-B { background: var(--gg-b-bg); color: var(--gg-b-fg); }
.ggrade-C { background: var(--gg-c-bg); color: var(--gg-c-fg); }
.ggrade-D { background: var(--gg-d-bg); color: var(--gg-d-fg); }
.ggrade-E { background: var(--g-e-bg);  color: var(--g-e-fg); }

/* 글자만 색을 쓰는 곳 — 기준표, 비교표.
 *
 * 여기서는 배지처럼 '밝아지며 옅어지기'가 불가능하다. 흰 배경 위 글자는 명암비
 * 4.5:1을 지키려면 휘도가 0.183을 넘을 수 없어서, 아래로 갈수록 밝게 만들면
 * 곧바로 읽히지 않는 글자가 된다. 그래서 밝기 대신 채도를 뺀다 — S가 가장
 * 선명하고 E로 갈수록 색기가 빠져 회색이 된다. 전부 4.65:1 이상이다. */
.gtext-S { color: #1E6CF3; }
.gtext-A { color: #2A6FD8; }
.gtext-B { color: #3568B8; }
.gtext-C { color: #4A6C9E; }
.gtext-D { color: #566072; }
.gtext-E { color: #5F6773; }

.ggtext-S { color: #06864A; }
.ggtext-A { color: #0A7A46; }
.ggtext-B { color: #2A7554; }
.ggtext-C { color: #456F5C; }
.ggtext-D { color: #566072; }
.ggtext-E { color: #5F6773; }