/* =====================================================================
   학습공동체(Learning Community) 디자인 시스템 — 토큰
   lc-tokens.css
   ---------------------------------------------------------------------
   원칙
   · 포털(i-누리) :root 토큰을 매핑 + 폴백 → 인수 후 포털 테마 자동 상속
   · 포털에 없는 값(상태색·중립색)은 lc 토큰으로 자체 정의
   · 컴포넌트 CSS는 이 토큰만 참조. hex 직접 사용 금지.

   ★ 접근성 검증 완료 (WCAG 2.1 대비비, 2026-06-05)
   · 브랜드색을 "색면(fill)용"과 "텍스트(text)용"으로 분리.
     포털 primary(#0C9DF3 하늘색)는 흰배경 대비 2.94로 글자/소형 색면 부적합 →
     글자엔 --lc-primary-text(#0670ad, 5.35), 색면 위 흰글자엔 --lc-fill-* 사용.
   · 모든 텍스트/배지 조합 AA(4.5+) 통과. (큰 텍스트는 3.0+)
   ===================================================================== */
:root{
  /* ── 브랜드: 색면(fill)용 — 큰 면적 배경. 위 텍스트는 --lc-on-* 사용 ── */
  --lc-primary:    var(--teacher-main-color, #0C9DF3);  /* 하늘색 — 포인트 색면/보더만 */
  --lc-grd:        var(--grd, linear-gradient(-90deg,#18aaff,#003caa));
  --lc-light:      var(--teacher-light-color,#E4F3FE);  /* 옅은 배경 */

  /* ── 브랜드: 텍스트/아이콘용 — 흰배경에서 AA 통과하는 진한 변형 ── */
  --lc-primary-text: #0670ad;  /* primary 글자색 (vs #fff = 5.35 AAA-) */
  --lc-fill:         #1b8fb5;  /* 흰글자 얹는 색면 (#fff on = 3.72, 큰박스 AA) */
  --lc-fill-strong:  var(--teacher-sub-color, #2072D5); /* 흰글자 색면 (4.74 AA) */
  --lc-dark:         var(--teacher-dark-color, #073787); /* 진한 네이비 (11.0 AAA) */
  --lc-accent:       var(--teacher-bg, #46C0E8);         /* 보조 색면(장식용, 글자X) */

  /* ── 표면/배경/구분선 ── */
  --lc-bg:         var(--teacher-basic-bg, #E8EBF0);
  --lc-surface:    #ffffff;
  --lc-border:     #eef1f6;
  --lc-divider:    #f2f4f7;
  --lc-divider-2:  #f6f8fb;

  /* ── 텍스트 (전부 흰배경 AA 통과) ── */
  --lc-text:       #222222;  /* 본문/제목 (15.9 AAA) */
  --lc-text-sub:   #555555;  /* 보조 (7.46 AAA) */
  --lc-text-mute:  #767676;  /* 흐림 (4.54 AA) — 기존 #999는 FAIL이라 교체 */
  --lc-text-faint: #767676;  /* 날짜 — 기존 #bbb(1.92 FAIL)는 사용 금지, mute로 통일 */
  --lc-on-brand:   #ffffff;  /* 브랜드 색면 위 텍스트 */

  /* ── 타이포 (포털 매핑) ── */
  --lc-font: 'pretendard','Noto Sans KR',sans-serif;
  --lc-fw-regular: var(--font-normal,  400);
  --lc-fw-bold:    var(--font-bold,    700);
  --lc-fw-exbold:  var(--font-exbold,  900);
  --lc-fs-sm:  var(--font-sm,  .875rem);
  --lc-fs-base:1rem;
  --lc-fs-lg:  var(--font-lg,  1.25rem);
  --lc-fs-xlg: var(--font-xlg, 1.5rem);
  --lc-fs-2xlg:var(--font-2xlg,2rem);
  --lc-fs-3xlg:var(--font-3xlg,2.5rem);

  /* ── 그림자/모션 (포털 매핑) ── */
  --lc-shadow:    var(--bx-shadow,   0 10px 20px rgba(0,0,0,.1));
  --lc-shadow-sm: var(--more-shadow, 0 2px 4px rgba(0,0,0,.1));
  --lc-ani: var(--all-ani, all cubic-bezier(0,1,.5,1) .2s);

  /* ── 반경 ── */
  --lc-radius-sm: 6px;  --lc-radius: 12px;  --lc-radius-lg: 18px;

  /* ── 상태 배지/자료형식 (글자색은 배경 대비 AA 통과값) ── */
  --lc-red:    #c0182a;  --lc-red-bg:    #ffe9e9;   /* 5.31 */
  --lc-green:  #157a39;  --lc-green-bg:  #eafaef;   /* 5.01 */
  --lc-orange: #985400;  --lc-orange-bg: #fff3e0;   /* 5.31 (기존 #e08600 FAIL 교체) */
  --lc-gray:   #5a6270;  --lc-gray-bg:   #eef0f4;   /* 5.39 */
  --lc-heart:  #d62b48;                              /* 4.89 (기존 #f0506e FAIL 교체) */
  --lc-warn:   #b56a00;  --lc-ok: #157a39;
}
