/* ============================================================
   디자인 토큰 · 색 모음 · 접근성 바닥값
   ------------------------------------------------------------
   이 파일이 하는 일은 셋이다.

   1) **색을 이름으로 부른다.** 화면 코드에 #1F5C99 를 직접 적지 않고
      --kc-primary 로 부른다. 학교마다 색을 바꿔야 하는 상용 배포에서,
      색을 바꾸는 일이 «파일 한 곳을 고치는 일» 이 되어야 한다.

   2) **색 모음(테마)을 고른다.** <html data-theme="teal"> 처럼 한 글자만 바꾸면
      내부 화면과 학생 포털이 함께 바뀐다.

   3) **접근성 바닥값을 세운다.** 대비 4.5:1, 최소 글자 11.5px,
      손가락 표적 32px, 키보드 포커스 표시.
      이 세 가지는 테마와 무관하게 언제나 지켜진다.

   ⚠️ 고칠 때 지킬 것
   · 새 색을 화면 코드에 직접 적지 말 것. 여기 토큰을 하나 더 만들어 쓸 것.
   · 회색 글씨를 더 흐리게 만들지 말 것. --kc-text-muted 는 흰 바탕에서 4.5:1 을
     겨우 넘는 값이다. 한 단계만 더 흐려도 밝은 사무실 모니터에서 읽히지 않는다.
   · 상태(출석·결석·미납 …)를 색으로만 말하지 말 것. 반드시 글자를 함께 둘 것.
     이 나라 남성의 약 5%가 붉은색과 초록색을 구분하지 못한다.
   ============================================================ */

:root {
  /* ── 바탕과 글자 (테마가 바뀌어도 중성은 거의 그대로 둔다) ── */
  --kc-bg:            #f1f5f9;   /* 화면 바탕 */
  --kc-surface:       #ffffff;   /* 카드·표 바탕 */
  --kc-surface-2:     #f8fafc;   /* 표 머리·줄무늬 */
  --kc-border:        #e2e8f0;   /* 옅은 경계 */
  --kc-border-strong: #cbd5e1;   /* 또렷한 경계 */

  --kc-text:          #1e293b;   /* 본문 — 흰 바탕에서 13.9:1 */
  --kc-text-muted:    #475569;   /* 보조 설명 — 7.4:1 */
  --kc-text-subtle:   #64748b;   /* 더 옅게 써도 되는 곳 — 4.8:1 (바닥값) */
  --kc-text-on-dark:  #f8fafc;

  /* ── 주 색 (테마가 바꾸는 것은 주로 여기다) ── */
  --kc-primary:       #1F5C99;
  --kc-primary-dark:  #16406B;
  --kc-primary-deep:  #0F2E4E;
  --kc-primary-light: #2F7CC4;
  --kc-primary-pale:  #E8F0F8;
  --kc-on-primary:    #ffffff;

  /* ── 뜻이 있는 색 — 테마가 바뀌어도 뜻은 바뀌지 않는다 ── */
  --kc-ok:      #047857;   /* 확인·승인·출석 */
  --kc-ok-pale: #ecfdf5;
  --kc-warn:    #b45309;   /* 주의·지각·대기 */
  --kc-warn-pale: #fffbeb;
  --kc-danger:  #b91c1c;   /* 결석·반려·삭제 */
  --kc-danger-pale: #fef2f2;
  --kc-info:    #0369a1;
  --kc-info-pale: #f0f9ff;

  /* ── 골격 ── */
  --kc-radius:     8px;
  --kc-radius-sm:  6px;
  --kc-shadow:     0 1px 2px rgba(15, 23, 42, .06);
  --kc-shadow-pop: 0 8px 24px rgba(15, 23, 42, .12);
  --kc-focus:      0 0 0 3px rgba(47, 124, 196, .45);

  /* ── 글자 바닥값 ── */
  --kc-font-min: 11.5px;
}

/* ============================================================
   색 모음 — <html data-theme="..."> 로 고른다
   기본(jj)은 남색이다(1호 고객의 색에서 출발했다). 아래는 상용 배포에서 학교마다 고르는 것.
   ============================================================ */

/* 청록 — 차분하고 눈이 덜 피로하다. 하루 종일 보는 행정 화면에 맞는다 */
:root[data-theme="teal"] {
  --kc-primary:       #0F766E;
  --kc-primary-dark:  #115E59;
  --kc-primary-deep:  #0B3F3B;
  --kc-primary-light: #14B8A6;
  --kc-primary-pale:  #E6F5F3;
  --kc-focus:         0 0 0 3px rgba(20, 184, 166, .45);
}

/* 자주 — 표가 많은 화면에서 파랑 계열 링크와 겹치지 않아 구분이 쉽다 */
:root[data-theme="plum"] {
  --kc-primary:       #6D28D9;
  --kc-primary-dark:  #5B21B6;
  --kc-primary-deep:  #3C1478;
  --kc-primary-light: #8B5CF6;
  --kc-primary-pale:  #F3EEFE;
  --kc-focus:         0 0 0 3px rgba(139, 92, 246, .45);
}

/* 중성 회색 — 색을 거의 쓰지 않는다. 자료 자체가 잘 보인다 */
:root[data-theme="slate"] {
  --kc-primary:       #334155;
  --kc-primary-dark:  #1E293B;
  --kc-primary-deep:  #0F172A;
  --kc-primary-light: #475569;
  --kc-primary-pale:  #EEF2F6;
  --kc-focus:         0 0 0 3px rgba(71, 85, 105, .45);
}

/* 고대비 — 저시력 사용자용. 경계를 진하게, 옅은 회색 글씨를 없앤다 */
:root[data-theme="contrast"] {
  --kc-bg:            #ffffff;
  --kc-surface:       #ffffff;
  --kc-surface-2:     #f1f5f9;
  --kc-border:        #94a3b8;
  --kc-border-strong: #475569;
  --kc-text:          #000000;
  --kc-text-muted:    #1e293b;
  --kc-text-subtle:   #1e293b;
  --kc-primary:       #14356B;
  --kc-primary-dark:  #0B2350;
  --kc-primary-deep:  #061634;
  --kc-primary-light: #1D4ED8;
  --kc-primary-pale:  #DBEAFE;
  --kc-ok:      #065F46;
  --kc-warn:    #92400E;
  --kc-danger:  #991B1B;
  --kc-focus:   0 0 0 3px #1D4ED8;
}

/* 야간 — 어두운 사무실·야간 당직용.
   ⚠️ 어두운 바탕에서는 대비가 뒤집히므로 회색 글씨를 «밝게» 잡아야 한다. */
:root[data-theme="night"] {
  --kc-bg:            #0f172a;
  --kc-surface:       #1e293b;
  --kc-surface-2:     #273449;
  --kc-border:        #334155;
  --kc-border-strong: #475569;
  --kc-text:          #f1f5f9;
  --kc-text-muted:    #cbd5e1;
  --kc-text-subtle:   #94a3b8;
  --kc-primary:       #3B82F6;
  --kc-primary-dark:  #1E293B;
  --kc-primary-deep:  #0B1220;
  --kc-primary-light: #60A5FA;
  --kc-primary-pale:  #1E3A5F;
  --kc-on-primary:    #0b1220;
  --kc-ok:      #34D399;
  --kc-ok-pale: #064E3B;
  --kc-warn:    #FBBF24;
  --kc-warn-pale: #451A03;
  --kc-danger:  #F87171;
  --kc-danger-pale: #450A0A;
  --kc-info:    #38BDF8;
  --kc-info-pale: #082F49;
  --kc-shadow:  0 1px 2px rgba(0, 0, 0, .5);
  --kc-focus:   0 0 0 3px rgba(96, 165, 250, .5);
}

/* ============================================================
   접근성 바닥값 — 테마와 무관하게 언제나 적용된다
   ============================================================ */

/* 1) 너무 흐린 회색 글씨를 한 번에 올린다.
      화면 서른 곳에 흩어진 text-slate-400 을 하나씩 고치는 대신 여기서 잡는다.
      (흰 바탕 위 slate-400 은 2.56:1 로, 기준 4.5:1 에 한참 못 미친다) */
.text-slate-400 { color: var(--kc-text-subtle) !important; }
.text-slate-500 { color: var(--kc-text-muted) !important; }
.text-slate-300 { color: var(--kc-border-strong) !important; }

/* 2) 글자 바닥값 — 10px 짜리 꼬리표가 여럿 있었다 */
.text-\[10px\], .text-\[10\.5px\], .text-\[11px\] { font-size: var(--kc-font-min) !important; }

/* 3) 키보드 포커스 — 마우스로 누를 때는 보이지 않고, Tab 으로 올 때만 보인다 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--kc-focus);
  border-radius: var(--kc-radius-sm);
}

/* 4) 손가락 표적 — 휴대전화에서 24px 짜리 단추는 잘 눌리지 않는다 */
@media (pointer: coarse) {
  button, a[href], [role="button"] { min-height: 32px; }
}

/* 5) 움직임을 줄여 달라고 한 사용자에게는 전환 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* 6) 상태 조각 — 색과 «글자» 를 함께 쓴다. 색만으로 말하지 않는다 */
.kc-state {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
  border: 1px solid transparent;
}
.kc-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.kc-state-ok     { color: var(--kc-ok);     background: var(--kc-ok-pale);     border-color: color-mix(in srgb, var(--kc-ok) 25%, transparent); }
.kc-state-warn   { color: var(--kc-warn);   background: var(--kc-warn-pale);   border-color: color-mix(in srgb, var(--kc-warn) 25%, transparent); }
.kc-state-danger { color: var(--kc-danger); background: var(--kc-danger-pale); border-color: color-mix(in srgb, var(--kc-danger) 25%, transparent); }
.kc-state-info   { color: var(--kc-info);   background: var(--kc-info-pale);   border-color: color-mix(in srgb, var(--kc-info) 25%, transparent); }
.kc-state-mute   { color: var(--kc-text-muted); background: var(--kc-surface-2); border-color: var(--kc-border); }

/* 7) 뜻을 지닌 색 글씨의 대비 — Tailwind 의 -600 은 흰 바탕에서 4.5:1 에 못 미친다.
      (amber-600 3.2:1 · emerald-600 3.4:1 · red-600 4.4:1)
      한 단계 진하게 눌러 한 곳에서 바로잡는다. 뜻(초록=좋음, 빨강=나쁨)은 그대로다. */
.text-amber-600, .text-amber-700 { color: var(--kc-warn) !important; }
.text-emerald-600, .text-emerald-700 { color: var(--kc-ok) !important; }
.text-red-600, .text-rose-600, .text-red-700, .text-rose-700 { color: var(--kc-danger) !important; }
.text-sky-700, .text-blue-700 { color: var(--kc-info) !important; }

/* 8) 작은 배지 — 11.5px 로 올리고 글자색을 진하게. 배경은 그대로 둔다 */
.kc-badge, .kc-state { letter-spacing: -0.01em; }

/* 9) 탭 제목 — 회색 위 회색이었다 */
.kc-tab { color: var(--kc-text-muted); }
.kc-tab.active { color: var(--kc-primary); }

/* 10) 학생 포털 — 손가락 표적.
       머리줄의 «알림»·«로그아웃» 이 18px 높이였다. 44px 은 손가락이 닿는 최소 크기다. */
.p-tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* 11) 색 고르개 */
.kc-theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(15,23,42,.18); }

/* 12) 알림 쪽지(토스트) — 흰 글자가 읽히는 진하기로 고정한다.
       Tailwind 의 -600 계열은 흰 글자 대비가 3.8:1 안팎이라 기준에 못 미친다. */
.kc-toast-ok     { background: var(--kc-ok); }
.kc-toast-warn   { background: var(--kc-warn); }
.kc-toast-danger { background: var(--kc-danger); }
.kc-toast-info   { background: var(--kc-primary-deep); }

/* 13) 작업창 탭 제목 — 회색 위 회색이었다(4.4:1) */
.kc-tab .kc-tab-title { color: inherit; }
.kc-tab:not(.active) { color: var(--kc-text); opacity: .78; }
.kc-tab:not(.active):hover { opacity: 1; }

/* ============================================================
   야간 모드에서 남는 밝은 칠 걷어내기
   ------------------------------------------------------------
   화면 코드가 Tailwind 유틸리티(bg-white, text-slate-700 …)로 색을 직접 칠한 곳이
   서른 곳쯤 된다. 그것을 한 파일씩 고치는 대신, 야간 모드에서만 토큰으로 돌려 놓는다.

   ⚠️ 이 블록은 **어두운 테마에서만** 적용된다. 밝은 테마는 원래 색 그대로다.
   ⚠️ 새 화면을 만들 때는 처음부터 토큰(kc-card·kc-table 등)을 쓰는 편이 낫다.
      여기 목록이 길어질수록 어느 색이 진짜인지 알기 어려워진다.
   ============================================================ */
:root[data-theme="night"] body { background: var(--kc-bg); color: var(--kc-text); }

:root[data-theme="night"] .bg-white { background-color: var(--kc-surface) !important; }
:root[data-theme="night"] .bg-slate-50,
:root[data-theme="night"] .bg-slate-100 { background-color: var(--kc-surface-2) !important; }
:root[data-theme="night"] .bg-slate-200 { background-color: var(--kc-border) !important; }

:root[data-theme="night"] .text-slate-900,
:root[data-theme="night"] .text-slate-800,
:root[data-theme="night"] .text-slate-700 { color: var(--kc-text) !important; }
:root[data-theme="night"] .text-slate-600 { color: var(--kc-text-muted) !important; }

:root[data-theme="night"] .border,
:root[data-theme="night"] .border-t,
:root[data-theme="night"] .border-b,
:root[data-theme="night"] .border-slate-100,
:root[data-theme="night"] .border-slate-200 { border-color: var(--kc-border) !important; }

/* 옅은 색 알림 상자 — 어두운 바탕에서는 배경을 눌러야 글자가 읽힌다 */
:root[data-theme="night"] .bg-amber-50 { background-color: var(--kc-warn-pale) !important; }
:root[data-theme="night"] .bg-rose-50,
:root[data-theme="night"] .bg-red-50 { background-color: var(--kc-danger-pale) !important; }
:root[data-theme="night"] .bg-emerald-50 { background-color: var(--kc-ok-pale) !important; }
:root[data-theme="night"] .bg-sky-50,
:root[data-theme="night"] .bg-blue-50 { background-color: var(--kc-info-pale) !important; }
:root[data-theme="night"] .text-amber-900,
:root[data-theme="night"] .text-amber-800 { color: var(--kc-warn) !important; }
:root[data-theme="night"] .text-sky-900,
:root[data-theme="night"] .text-sky-800 { color: var(--kc-info) !important; }

/* 흐릿한 회색 배지도 토큰으로 */
:root[data-theme="night"] .bg-slate-100.text-slate-600,
:root[data-theme="night"] .bg-slate-100.text-slate-500 { color: var(--kc-text-muted) !important; }

/* 야간 모드의 «옅은 배지» — 밝은 바탕을 전제로 만든 색이라 그대로 두면 글자가 사라진다.
   배경을 살짝 밝힌 투명으로 바꾸고 글자는 뜻에 맞는 밝은 색으로 돌린다. */
:root[data-theme="night"] .bg-blue-100, :root[data-theme="night"] .bg-sky-100,
:root[data-theme="night"] .bg-emerald-100, :root[data-theme="night"] .bg-amber-100,
:root[data-theme="night"] .bg-rose-100, :root[data-theme="night"] .bg-red-100,
:root[data-theme="night"] .bg-slate-100, :root[data-theme="night"] .bg-purple-100 {
  background-color: rgba(255, 255, 255, .10) !important;
}
:root[data-theme="night"] .text-blue-700, :root[data-theme="night"] .text-sky-700,
:root[data-theme="night"] .text-blue-800, :root[data-theme="night"] .text-sky-800 { color: var(--kc-info) !important; }
:root[data-theme="night"] .text-emerald-700, :root[data-theme="night"] .text-emerald-800 { color: var(--kc-ok) !important; }
:root[data-theme="night"] .text-amber-700, :root[data-theme="night"] .text-amber-800,
:root[data-theme="night"] .text-amber-900 { color: var(--kc-warn) !important; }
:root[data-theme="night"] .text-rose-700, :root[data-theme="night"] .text-red-700 { color: var(--kc-danger) !important; }
:root[data-theme="night"] .text-slate-500, :root[data-theme="night"] .text-slate-400 { color: var(--kc-text-subtle) !important; }

/* 어두운 화면에서는 «위험» 색이 밝아진다 — 그 위의 글자는 검정이어야 읽힌다 */
:root[data-theme="night"] .kc-btn-danger { color: #0b1220; }
:root[data-theme="night"] .bg-red-600, :root[data-theme="night"] .bg-rose-600 { color: #0b1220 !important; }

/* 고른 메뉴·탭 — 밝은 파랑 위 흰 글자는 3.7:1 이다. 어두운 파랑으로 칠한다 */
:root[data-theme="night"] .kc-menu-active {
  background: var(--kc-primary-pale);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--kc-primary);
}
:root[data-theme="night"] .kc-tab.active { color: var(--kc-primary-light); }