/* 종과 디자인 토큰 = Unlock Prep(joonkwon94-beta) src/styles/global.css 의 :root/.dark 변수를
   순수 CSS 변수로 옮긴 것이다(Tailwind @theme 계층 0 - 이 저장소는 Next.js/Tailwind 가 없다).
   이름 유지 원칙 = 뒤에 Next.js 로 이식할 때 이 파일을 그대로 복사해 쓸 수 있게, 구조(변수)적
   토큰(배경·글자·카드·brand·success 등)은 Unlock 과 같은 이름을 쓴다.
   예외 1건 = --area-* 5종. Unlock 원본은 reading/listening/writing/speaking/grammar(토플 영역)
   축이라 종과(정치·경제·지리·역사·Practice) 축과 이름이 안 맞는다 - 값(hex)은 Unlock 이 이미
   AA 대비 검증을 마친 5색을 그대로 재사용하고, 변수 이름만 종과 축으로 바꿨다(발주 A항 지시).
   대응표는 회신 참고. 발주 범위 밖(차트색·task-*·clerk-link·glass·apple-shadow·grammar-hl 등)은
   이번 증분에서 옮기지 않는다 - 이 페이지가 쓰지 않는 토큰을 옮기는 것은 빼기 원칙 위반이다. */

:root {
  --radius: 1rem; /* Unlock 과 동일 - 둥근 모서리 톤 유지 */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans:
    'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', 'Noto Sans JP', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Noto Sans KR/JP 를 폴백에 더한 것 = 이 저장소 index.html 이 이미 그 웹폰트를 쓰고(일본어
     원문 렌더 대비) · Pretendard 미로드시 대체(발주 실측 "Pretendard(CDN) + Inter" 문구에 잇는다). */

  /* Apple 라이트 팔레트(Unlock 값 그대로) */
  --background: oklch(0.985 0 0); /* #F5F5F7 */
  --foreground: oklch(0.205 0 0); /* #1D1D1F */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.205 0 0);
  --popover: oklch(1 0 0 / 0.8);
  --popover-foreground: oklch(0.205 0 0);
  --primary: oklch(0.45 0.16 260); /* Apple 블루 */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.95 0 0);
  --muted-foreground: #6b6b6b; /* Unlock 판정 162차 D-7 AA 수리값 그대로(재계산 4.89~5.33 실측 - 회신 참고) */
  --accent: oklch(0.95 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.55 0.22 25);
  --border: oklch(0.92 0 0);
  --input: oklch(0.92 0 0);
  --ring: oklch(0.45 0.16 260);

  /* 의미 상태 토큰(Unlock 이름 그대로) */
  --brand: #534ab7;
  --success: #15803d;
  --warning: #a16207;
  --danger: #d40924;

  /* 테마 불변 토큰(Unlock 규약 그대로 - .dark 에서 재정의하지 않는다) */
  --ink-on-light: oklch(0.205 0 0);
  --brand-on-light: #534ab7;
  --on-accent: #ffffff;
  --primary-ink: var(--primary);

  /* 히어로 브랜드 띠 전용 - 테마와 무관한 고정 그라데이션 2색(다크에서도 재정의하지 않는다).
     이유 = 이 배경 위에는 항상 흰 글자(--on-accent 고정값)가 얹히므로, --brand 처럼 다크에서
     밝아지는 토큰을 그대로 쓰면 흰 글자 대비가 무너진다(실측 - 다크 --brand #8b80ee 위 흰 글자는
     미검증). 두 정지점 다 흰 글자 대비 실측 완료(회신 표 참고 - 6.93 / 8.74, AA 여유 통과). */
  --brand-band-start: #453e99;
  --brand-band-end: #534ab7;
  --on-brand-band: #ffffff; /* 이 띠 전용 흰 글자 - 테마 불변(다크에서도 재정의 0). --on-accent 를
    여기 쓰면 안 되는 이유(실측 결함, 회신 참고) = --on-accent 는 테마 반전 토큰이라 다크에서
    #17171a(먹색)로 뒤집힌다 - 테마 불변 배경 위에 테마 반전 글자를 얹었더니 다크에서 2.05~2.58:1
    로 AA(4.5) 붕괴(렌더 실증으로 발견 - home.html 히어로/CTA 최초 구현은 결함이었다). */

  /* 영역색 5종 - 종과 축(정치·경제·지리·역사·Practice). 값은 Unlock area-* 값 재사용(대응표 =
     회신 참고). 전부 흰 카드 위 실측 5.38~8.24 로 AA(4.5) 여유 통과. */
  --area-politics: #1a63cd;   /* Unlock area-listening */
  --area-economy: #0f795b;    /* Unlock area-writing */
  --area-geography: #b04723;  /* Unlock area-speaking */
  --area-history: #86198f;    /* Unlock area-reading */
  --area-practice: #6d28d9;   /* Unlock area-grammar */

  /* 유리 재질 v1(design/glass-v1 · 아이브 설계 · 보리스 조건부 채택 2026-09-06, glass-v1-review.md) -
     Apple Liquid Glass 의 원리(뒤 흐림 · 반투명 표면 · 단색 반투명 테두리 + 안쪽 하이라이트)를 CSS 로
     옮긴 것. 그라데이션 0. alpha 는 node 로 WCAG 대비를 직접 돌려 고른 값이다(glass-v1.md 3절).
     --glass-bg 라이트 값은 --popover 라이트 값과 바이트 일치한다(조건 2 각주) - 아이브의 독립
     스윕이 이 저장소가 Unlock 에서 이미 물려받은 값과 같은 데 떨어졌다(좋은 신호). 다만 --popover
     는 shadcn 팝오버 전용이라 별도 토큰을 둔다(역할 분리 - 팝오버 불투명도를 만질 때 헤더가 같이
     움직이면 안 된다). Unlock 정본 `.glass`(테두리 흰색 0.2 · 배경 흰 0.7 · blur 12px)와는 규격이
     다르다 - Next.js 이식일에는 이 종과 값이 정본이다(조건 3): 라이트에서 흰 테두리는 흰 표면 위에서
     안 보이는 Unlock 쪽 결함이고, 이 값의 먹 테두리(저알파)가 그 결함의 수리다.
     조건 7 재결정(2026-09-06 · 포퍼 반증 1) = --glass-border alpha 를 0.10 에서 0.15 로 올렸다.
     0.10 은 흰 표면 위 합성이 #e6e6e6 이라 원래 테두리 --line #ddd 보다 옅어 경계 대비가
     내려갔다(header 1.27 -> 1.16 · 유리 칩 1.34 -> 1.22). 0.15 는 그 둘을 다시 넘는 최소
     두자리 alpha 다(1.29 · 1.36). index.html :root 의 직접값과 바이트 일치를 유지한다(조건 9-B). */
  --glass-bg: oklch(1 0 0 / 0.8);
  --glass-border: oklch(0.205 0 0 / 0.15); /* --foreground 재사용 · 저채도 하이라인 */
  --glass-highlight: oklch(1 0 0 / 0.35);  /* 안쪽 상단 하이라이트 · 반투명 표면 위 칩 틴트 겸용.
     라이트에서 뒤가 흰색이면 이득이 0 에 수렴하고, 뒤로 색이 지나갈 때 값을 한다 - 그래서
     불투명 부모 위의 칩에는 쓰지 않는다(조건 7 재결정 · 사소 ① = 「inset 전용」 문면 정정) */
  --glass-shadow: 0 8px 24px oklch(0.205 0 0 / 0.12);
  --glass-blur: 20px; /* 테마 불변 - .dark 에서 재정의하지 않는다(--radius/--font-sans 관례와 같다) */
}

.dark {
  /* Apple 다크 팔레트(Unlock 값 그대로) */
  --background: oklch(0.12 0 0);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.18 0 0 / 0.8);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.55 0.16 260);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.25 0 0);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.25 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.25 0 0);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.6 0.22 25);
  --border: oklch(0.25 0 0);
  --input: oklch(0.25 0 0);
  --ring: oklch(0.55 0.16 260);

  --brand: #8b80ee;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;

  /* 테마 반전 토큰만 여기서 뒤집는다(Unlock 규약 그대로) - ink-on-light/brand-on-light 는
     여기 없다(있으면 안 된다 - 위 :root 주석 참조). */
  --on-accent: #17171a;
  --primary-ink: oklch(0.68 0.16 260);

  /* 영역색 5종 다크 변형(Unlock 다크 값 재사용) */
  --area-politics: #5b9bf5;
  --area-economy: #5eead4;
  --area-geography: #fdba74;
  --area-history: #ec4899;
  --area-practice: #d8b4fe;

  /* 유리 재질 v1 다크 - alpha 는 0.7 이 아니라 0.8(조건 1 채택) = --popover 다크(0.8)와 한 자로
     맞춘다. 근거 = ㉮ 아이브 자신의 스윕 구간(0.72~0.82) 밖의 값이 원래 설계에 있었다 · ㉯ 보리스
     재측 = 0.8 에서 foreground 대비 13.44(오히려 개선) · muted-foreground 는 4.41 로 여전히
     미달이라 아래 유틸리티 블록의 색 승격(재바인딩) 규칙이 그대로 필요하다(alpha 를 올려도
     규칙은 안 바뀐다) · ㉰ 0.8 이면 이 저장소 안에 반투명 alpha 가 한 종류만 선다. */
  --glass-bg: oklch(0.18 0 0 / 0.8);
  --glass-border: oklch(0.98 0 0 / 0.14); /* 다크에서는 밝은 저알파 하이라인 - 빛을 받는 가장자리 인상 */
  --glass-highlight: oklch(1 0 0 / 0.10);
  --glass-shadow: 0 8px 24px oklch(0 0 0 / 0.45);
}

/* Unlock motion.css 의 .rise/riseIn 만 최소 이식(히어로 진입 1회용 - 발주 범위 밖 모션은 0). */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
}

/* ===== 유리 재질 v1 유틸리티 (design/glass-v1 · 이 커밋 시점 소비자 0 - 토큰만 먼저 선다) =====
   형제 유리 요소는 한 컨테이너 안에 담고 겹쳐 쌓지 않는다(중첩 반패턴 금지 - ecc:liquid-glass-design).
   backdrop-filter 미지원 폴백은 넣지 않는다(조건 11-가 채택) - 그 폴백이 발화하는 브라우저는
   backdrop-filter 를 모르는 브라우저이고 oklch() 는 backdrop-filter 보다 늦게 표준에 실렸다.
   곧 폴백이 켜지는 자리에서 oklch() 도 모를 공산이 크고, 그러면 background 선언이 무효가 되어
   불투명 카드가 아니라 투명이 된다(설계 5절 "폴백 = 원판과 같은 시각"이 그 상태에서 거짓이 된다).
   2단계 구현이 header 유리로 좁아진 오늘(조건 7)은 폴백이 죽어도 헤더 뒤는 페이지 배경이라
   --ink 대비가 그대로 살아 실피해가 0이다 - 그래서 뺀다. */
.glass-surface {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  /* 색 승격 = 자리 열거가 아니라 변수 재바인딩(조건 4) - 유리 표면 위에서는 보조 글자도 본문
     글자색을 쓴다(위계는 크기로만 - WCAG 1.4.1 과도 맞다). 자손 전원이 var(--muted-foreground)
     를 쓰면 다음 자리가 생겨도 게이트도 사람도 다시 셀 필요 없이 자동 적용된다. */
  --muted-foreground: var(--foreground);
}

/* 유리 표면 안의 상호작용 칩(버튼) - 흐림은 부모 것을 그대로 쓰고 칩 자신은 얇은 반투명 틴트 +
   테두리만 얹는다(부모가 이미 가진 흐림을 또 만들지 않는다 - 이중 흐림 방지). */
.glass-chip {
  background: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  transition-property: background-color, border-color, box-shadow, transform;
  transition-duration: 130ms;
  transition-timing-function: ease-out;
}
.glass-chip:hover { box-shadow: var(--glass-shadow); }
.glass-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.glass-chip:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .glass-chip { transition: none; }
}

/* 재바인딩(위 --muted-foreground)이 자동으로 안 미치는 자리를 위한 명시적 escape hatch
   (조건 5 - 두 색계 중 tokens.css 색계 짝. index.html 색계 짝은 index.html 자체에 있다). */
.glass-ink { color: var(--foreground); }