@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 토큰 (색 · 글꼴 · 간격 · 그림자) — index.html 에 적힌 순서대로 불러온다 */
/* ============ TOKENS ============ */
:root{
  --bg:#EDF6FF; --bg-2:#E1EFFF; --bg-3:#F5FAFF; --card:#FFFFFF;
  --ink:#0B1F3A; --ink-2:rgba(11,31,58,.68); --ink-3:rgba(11,31,58,.66);
  --ink-deco:rgba(11,31,58,.34);
  --on-dark:#F4F2EC;   /* 어두운 면(푸터·클로징) 위 글자 — 테마 불문 고정 */
  --line:rgba(11,31,58,.10); --line-2:rgba(11,31,58,.06);
  --cobalt:#57A1EA; --cobalt-soft:rgba(87,161,234,.12);
  /* --brand-grad 는 <image> 라 background 에만 쓸 수 있다. color·outline·color-mix 처럼
     <color> 가 필요한 자리는 --brand(그라데이션 시작색)를 쓴다. 둘을 섞으면 선언이 통째로 무효가 된다. */
  --brand:#5AA3EE;
  --brand-2:#88C3FF;
  --brand-grad:linear-gradient(100deg,#459EFA 0%,#4DA3FC 52%,#68B2FF 100%);   /* 버튼 그라데이션 (피그마 지정값) */
  --brand-glow:rgba(69,158,250,.48);
  --wood:#5E7A3C; --fire:#D9508C; --earth:#B08A3C; --metal:#6B7480; --water:#3B88D6;
  --wood-s:rgba(94,122,60,.10); --fire-s:rgba(217,80,140,.10);
  --earth-s:rgba(176,138,60,.12); --metal-s:rgba(107,116,128,.12); --water-s:rgba(59,136,214,.10);
  /* ── 오행 그래프 바 전용 색 ──
     위의 --wood~--water 는 카드·그라데이션·오브·한자까지 쓰는 브랜드 팔레트다.
     바 색만 따로 두어, 막대를 바꿔도 PRD §5 의 오행 팔레트가 흔들리지 않게 한다. */
  --wood-b:#5E7A3C; --fire-b:#D9508C; --earth-b:#B08A3C; --metal-b:#8A94A0; --water-b:#2F7FD1;
  /* 원국 한자 색. 지금까지 인라인으로 계산하던 식을 토큰으로 옮긴 것뿐이다. */
  --gz-wood:color-mix(in srgb, var(--wood) 66%, var(--ink));
  --gz-fire:color-mix(in srgb, var(--fire) 66%, var(--ink));
  --gz-earth:color-mix(in srgb, var(--earth) 66%, var(--ink));
  --gz-metal:color-mix(in srgb, var(--metal) 66%, var(--ink));
  --gz-water:color-mix(in srgb, var(--water) 66%, var(--ink));
  /* 라운드 별칭 — 기존 선언 호환용. 실제 값은 아래 --r-1~4 가 정의한다 */
  --r-s:var(--r-2); --r-m:var(--r-3); --r-l:var(--r-4);
  --shadow:0 1px 2px rgba(56,140,235,.06), 0 18px 40px -24px rgba(56,140,235,.26);   /* 맑은 블루 그림자 — 네이비는 탁하게 읽힌다 */
  --shadow-lg:0 1px 2px rgba(56,140,235,.08), 0 40px 80px -36px rgba(56,140,235,.42);
  --plate-bg:#fff;   /* 오행 그래픽 플레이트 배경 (이전 #D5E4F3) */
  --maxw:1200px;
  /* ── 오행 색 : 텍스트 전용 변형 ──
     원본 색은 그래픽·채우기용. 작은 글자에 쓰면 흰 배경에서도 CR 4.5 를 못 넘긴다.
     밝기를 낮춘 변형을 텍스트에만 쓴다. (--fire 4.30 → --fire-t 7.78) */
  --cobalt-t:#0072D9;   /* 스카이 포인트의 텍스트 변형 — 바탕(#EEF5FC) 4.3 · 하늘 섹션(#BFD8F4) 3.3 */
  --wood-t:#3F5A24; --fire-t:#A0305F; --earth-t:#7A5B20; --metal-t:#4A535E; --water-t:#1E5FA6;

  /* ── 라운드 ── 11종 → 5단계 + 기기 예외 2 */
  --r-1:4px;     /* 체크박스 · 포커스 링 */
  --r-2:14px;    /* 작은 카드 · 기둥 */
  --r-3:22px;    /* 카드 */
  --r-4:30px;    /* 큰 카드 · 스택 카드 */
  --r-full:999px;
  --r-device:44px; --r-screen:34px;   /* 폰 목업 — 동심 라운드(외곽 44 / 화면 34, 차이 10 = 베젤) */

  /* ── 그림자 ── 높이(elevation) 3단계 + 브랜드 글로우 2 */
  --sh-glow:0 10px 24px -10px var(--brand-glow);
  --sh-glow-lg:0 14px 30px -10px var(--brand-glow);

  /* ── 스페이싱 스케일 ──
     41종으로 흩어져 있던 여백을 10단계로 통합했다. 4의 배수 그리드.
     --sp-0 은 그리드가 아니라 광학 보정용(뱃지 안쪽 등)으로만 쓴다. */
  --sp-0:2px;   --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px;  --sp-6:32px;  --sp-7:48px;  --sp-8:64px;  --sp-9:96px;

  /* ── 타입 스케일 ──
     42종으로 흩어져 있던 크기를 14개 토큰으로 통합했다.
     본문 16px(--fs-4)을 기준으로 약 1.19 비율. 새 화면을 만들 때 이 밖의 값은 쓰지 않는다. */
  --fs-1:10px;  /* mono 최소 라벨 */
  --fs-2:12px;  /* mono 라벨 기본 · 태그 */
  --fs-3:14px;  /* 보조 설명 · 캡션 */
  --fs-4:16px;  /* 본문 기준 */
  --fs-5:18px;  /* 리드 · 강조 본문 */
  --fs-6:21px;  /* 소제목 · 카드 제목 */
  --fs-7:25px;  /* h4 */
  --fs-8:30px;  /* h3 */

  /* 디스플레이 — 뷰포트에 따라 유동 */
  --fd-t:clamp(30px,3.6vw,44px);   /* 제목 : 섹션 헤드 · 앱 헤드 · 폼 제목 */
  --fd-4:clamp(44px,7vw,86px);     /* 히어로 */

  /* 그래픽 예외 — 글자가 아니라 도형으로 쓰이는 곳 */
  --fg-0:clamp(22px,2.6vw,33px);   /* 한자 글리프 */
  --fg-1:52px;   /* 스텝 번호 */
  --fg-2:150px;  /* 앱 오브 글리프 */

  /* ── 디스플레이 램프 : 타이틀은 미디엄으로 균일하게 ──
     세미볼드(600)에서 한 단계 내린 500. 원래 램프(250–500)보다는 확실히 굵되,
     명조의 획 대비가 살아 있어 파스텔 배경·헤어라인과 부딪히지 않는다.
     위계는 굵기가 아니라 크기(fd 램프)가 만든다 — 다섯 단계가 같은 무게로 읽힌다.
     자간은 굵기를 따라간다 : 500 은 250 보다 자기 폭을 먹으므로 d1·d2 만 조금 푼다
     (원래 -.035/-.030 → -.032/-.028). d3 이하는 원래 값 그대로. */
  --fw-d1:500; --ls-d1:-.032em;   /* 60px+   히어로 */
  --fw-d2:500; --ls-d2:-.028em;   /* 40–60   섹션 헤드 */
  --fw-d3:500; --ls-d3:-.025em;   /* 28–40   부제·대형 한자 */
  --fw-d4:500; --ls-d4:-.020em;   /* 20–28   카드 제목 */
  --fw-d5:500; --ls-d5:-.010em;   /* 14–20   소제목·라벨 */

  --nav-h:68px; --stk-r:var(--r-4);
  /* ── 인덱스 스택 (활성 1 + 접힘 2 = 읽히는 타이틀 3개) ── */
  --sb-active:48px;      /* 활성 줄 */
  --sb-fold:28px;        /* 접힘 줄 */
  --sb-trace:3px;        /* 흔적 = 색 띠만 (1px 은 층 분리 헤어라인) */
  --sb-keep:1;           /* 활성 아래로 접힘 상태로 남길 개수 */
  --sb-dur:.48s;         /* 내려앉는 속도 — 막이 그 자리를 비우기 전에 끝난다 */
  --sb-ease:cubic-bezier(.22,.61,.36,1);
  --stack-h:0px;         /* 지금 판에서 실제로 쌓인 띠 높이. layoutStack() 이 판마다 갱신한다.
                            첫 화면은 판 0(히어로)이라 0 이 그대로 맞는 초기값이다 */
  /* 판 서피스 래더 — 위에서 아래로 점점 깊어져 CLOSING 그라데이션으로 착지 */
  --sf1:#F8FCFF; --sf2:#EDF6FF; --sf3:#E1F0FF; --sf4:#D4E9FF; --sf5:#C6E2FF; --sf6:#B7DBFF;   /* 회색기 뺀 맑은 파스텔 하늘 */
  --serif:"Fraunces","Noto Serif KR",serif;
  --sans:"Pretendard",system-ui,-apple-system,sans-serif;
  /* 폰트 폴백은 글자 단위로 일어난다 — 한 스택 안에서 문자별로 갈라진다.
     IBM Plex Mono 에는 한글이 없어서, 그냥 두면 --mono 를 쓰는 라벨의 한글이
     ui-monospace(→ Consolas, 역시 한글 없음)를 지나 시스템 최종 폴백(윈도우 굴림)까지
     떨어진다. 10px 굴림이 작은 라벨의 가독성을 깎아먹던 원인이다.
     라틴·숫자는 Plex Mono 그대로(등폭 = 수치 열 정렬), 한글은 Pretendard,
     한자는 Noto Serif KR 이 받는다. 뒤의 둘은 이미 로드 중이라 추가 요청이 없다. */
  --mono:"IBM Plex Mono","Pretendard","Noto Serif KR",ui-monospace,monospace;
}