/* RLCNF Learn — Design Tokens
 * 학습 페이지(exam.php·note.php) 공통 토큰 + 글로벌 룰
 * 디자인 시스템 v0.9 (docs/design/design-system.md)
 */

:root{
  /* === Color: Primary === */
  --rl-primary:#2563eb;
  --rl-primary-hover:#1d4ed8;
  --rl-primary-light:#3B82F6;
  --rl-primary-soft:#EFF4FF;
  --rl-primary-edge:#DBE6FF;

  /* === Color: 연습 안정도 단계 게이지 (5단계 고정 명도) ===
     도달 단계만 각 단계 고유색·이후 단계 회색. light→dark 램프. stage-1은 비활성 회색으로
     오독되지 않도록 최소 파랑감 유지(edge). 5단계 도달 시 옅은→진한 파랑으로 자연스럽게 이어짐. */
  --rl-stab-stage-1:var(--rl-primary-edge);
  --rl-stab-stage-2:#A6C3F9;
  --rl-stab-stage-3:#6F9FF6;
  --rl-stab-stage-4:var(--rl-primary-light);
  --rl-stab-stage-5:var(--rl-primary);

  /* === Color: Accent (보조 — data-accent="violet"로 분기) === */
  --rl-accent:#7C3AED;
  --rl-accent-hover:#6D28D9;
  --rl-accent-light:#A78BFA;
  --rl-accent-soft:#F3EBFF;
  --rl-accent-edge:#E9DFFA;
  --rl-accent-deep:#5B21B6;
  --rl-accent-bg:#FBF8FF;

  /* === Color: Neutral / Text === */
  --rl-ink:#0F172A;
  --rl-text:#1F2937;
  --rl-text-2:#4B5563;
  --rl-text-3:#6B7280;
  --rl-text-4:#9CA3AF;
  --rl-text-5:#B0B6BE;

  /* === Color: Surface ===
   * surface는 사용자가 가장 오래 응시하는 면 → 순백(#FFFFFF) 대신 cool neutral 오프화이트.
   * surface-elev만 #FFFFFF 유지해 모달·팝오버·시트·드로어 lift 시각 (§2.1.4). */
  --rl-bg:#ECEEF1;
  --rl-surface:#F7F8FA;
  --rl-surface-2:#EFF1F4;
  --rl-surface-elev:#FFFFFF;
  /* 본문 위 "어두운 강조 면" — snackbar·tooltip (§3.5.2/§3.5.4). 모드 무관 어두운 톤 + 흰 글자로
     의미 일관(§7.2). 다크 override(#1F2940)는 modal.css .rl-snackbar 스코프에서. */
  --rl-surface-strong:#0F172A;
  --rl-on-surface-strong:#FFFFFF;
  --rl-line:#E8EBF0;
  --rl-line-2:#E5E7EB;
  --rl-overlay:rgba(15,23,42,.32);
  --rl-overlay-soft:rgba(15,23,42,.50);
  --rl-scrim-solid:#000000; /* 불투명 검정 — 전체화면 이미지 뷰어 백드롭(letterbox) */
  --rl-img-viewer-max-w:768px; /* 전체화면 이미지 뷰어 콘텐츠 최대폭 — page-shell --rl-page-container와 동일값. :root 전역이라 body 직속 뷰어에도 적용 */
  --rl-page-shell-bg:#ECEEF1; /* 페이지 외측 여백 배경(page-shell body.rl-mnav-page와 동일). :root 전역이라 body 직속 라이트박스 여백에도 적용 */
  --rl-on-primary:#FFFFFF;

  /* === Color: Semantic === */
  --rl-good:#16A34A;
  --rl-good-soft:#E8F6EE;
  --rl-good-edge:#C8EAD3;
  --rl-good-text:#0E5C2A;

  --rl-bad:#DC2626;
  --rl-bad-hover:#B91C1C;
  --rl-bad-soft:#FDECEC;
  --rl-bad-edge:#F6CFCF;
  --rl-bad-text:#991B1B;

  --rl-warn:#B45309;
  --rl-warn-soft:#FEF3C7;
  --rl-warn-text:#92400E;

  /* 앱 설치 유도 전용 브랜드 오렌지 — 시스템 시맨틱(primary/warn)과 구분되는 앱 강조.
     WebView 래퍼 앱(기출넷) 아이콘/스토어 CTA 톤. 채도 높은 버튼이라 다크에서도 동일값 유지
     (surface·text 토큰은 자동 다크 매핑되어 모달 자체는 테마 대응). soft 타일만 다크 override(root-tokens.css). */
  --rl-app-brand:#FD7E14;
  --rl-app-brand-2:#F59E0B;
  --rl-app-brand-soft:#FFF7ED;
  --rl-app-brand-shadow:rgba(253,126,20,.30);
  --rl-app-brand-icon-shadow:rgba(253,126,20,.22);

  --rl-info:#0EA5E9;
  --rl-info-soft:#E0F2FE;
  --rl-info-text:#075985;

  /* 보기 셀 정/오답 피드백 — good/bad보다 한 톤 약화. accent 채도는 인식성 유지. */
  --rl-grade-correct-bg:#F0FAF4;
  --rl-grade-correct-edge:#D7EFE0;
  --rl-grade-correct-accent:#22C55E;
  --rl-grade-wrong-bg:#FEF4F4;
  --rl-grade-wrong-edge:#FCDFDF;
  --rl-grade-wrong-accent:#EF4444;
  --rl-grade-wrong-accent-soft:#F36464;

  /* accent-edge에서 ~15% 약화 — 풀이 카드 강한 border 톤 다운. */
  --rl-accent-edge-soft:#EEE3FA;

  /* === Typography === */
  --rl-fs-display:clamp(26px, 3vw, 36px);
  --rl-fs-h2:20px;
  --rl-fs-h3:16px;
  --rl-fs-h4:15.5px;
  --rl-fs-bodylg:17px;
  --rl-fs-body:15px;
  --rl-fs-body-sm:13.5px;
  --rl-fs-label:13px;
  --rl-fs-caption:12px;
  --rl-fs-caption-sm:11px;
  --rl-fs-micro:10.5px;
  --rl-fs-num-display:26px;
  --rl-fs-num-meta:15px;
  --rl-fs-num-hero:clamp(40px, 8vw, 64px);

  /* === 문제 풀이 화면 전용 본문 사이즈 그룹 (design-system.md §2.2.1 / §3.8.1·§3.8.2) ===
     4 토큰(문제·보기·해설·CTA)을 한 묶음으로 두어, 향후 사용자 본문 크기 토글이 도입될 때
     하나의 attribute(data-quiz-scale)로 모든 본문이 일관 스케일링되도록 한다.
     기본값(미지정) = 'base'. learn 스코프(.rl-learn) 안 학습 본문 셀렉터만 이 토큰을 참조 — 형제 페이지/타 게시판 본문은 영향 없음. */
  --rl-fs-quiz-q:17px;
  --rl-fs-quiz-a:17px;
  --rl-fs-quiz-e:16px;
  --rl-fs-quiz-cta:16px;
}

/* 학습 본문 크기 — 작게(sm) */
:root[data-quiz-scale="sm"] {
  --rl-fs-quiz-q:15px;
  --rl-fs-quiz-a:15px;
  --rl-fs-quiz-e:14px;
  --rl-fs-quiz-cta:15px;
}

/* 학습 본문 크기 — 크게(lg) */
:root[data-quiz-scale="lg"] {
  --rl-fs-quiz-q:19px;
  --rl-fs-quiz-a:19px;
  --rl-fs-quiz-e:18px;
  --rl-fs-quiz-cta:17px;
}

:root {
  --rl-ls-display:-0.025em;
  --rl-ls-h2:-0.02em;
  --rl-ls-tight:-0.015em;
  --rl-ls-body:-0.01em;
  --rl-ls-num:-0.01em;

  --rl-lh-tight:1.2;
  --rl-lh-snug:1.35;
  --rl-lh-normal:1.5;
  --rl-lh-relaxed:1.6;

  /* === Spacing === */
  --rl-sp-1:4px;
  --rl-sp-2:8px;
  --rl-sp-3:12px;
  --rl-sp-4:14px;
  --rl-sp-5:16px;
  --rl-sp-6:24px;
  --rl-sp-7:32px;
  --rl-sp-8:48px;
  --rl-sp-9:96px;

  /* === Radius === */
  --rl-r-2xs:6px; /* 가장 각진 라운드 — 작은 메타 칩 등(.rl-study-pill) */
  --rl-r-xs:8px;
  --rl-r-sm:10px;
  --rl-r-btn:12px;
  --rl-r-md:14px;
  --rl-r-lg:18px;
  --rl-r-card:20px;
  --rl-r-xl:24px;
  --rl-r-full:999px;

  /* === Elevation === */
  --rl-shadow-sm:0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.04);
  --rl-shadow-md:0 1px 0 rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
  --rl-shadow-pop:0 16px 40px -16px rgba(15,23,42,.18);
  --rl-shadow-sheet:0 -16px 40px -16px rgba(15,23,42,.22);
  --rl-shadow-knob:0 1px 2px rgba(15,23,42,.18);

  /* === Motion === */
  --rl-dur-micro:150ms;
  --rl-dur-base:200ms;
  --rl-dur-emph:280ms;
  --rl-dur-sheet:320ms;
  --rl-ease-sheet:cubic-bezier(.2,.75,.25,1);
  /* 범용 ease — rl_mock_result/rl_note_archive/mock의 transition timing. 시스템 --ease-out에 정합
     (값 단일 출처: root-tokens.css). 미정의 시 invalid var()로 transition이 all 0s 무전환 폴백됨. */
  --rl-ease:var(--ease-out);
  --rl-ease-out:var(--ease-out);
  /* 배경 페이지 occlusion — sheet/modal 오버레이 종류별 강도 분리 (design-system.md §3.7.0).
     sheet는 아래에서 올라와 배경 CTA와 직접 경쟁하므로 "뒤로 물리는" 강한 후퇴, modal은 원래 화면
     중앙을 점유하므로 "잠시 비활성화하는" 약한 색감 감쇠. modal 처방은 transition 없이 instant
     적용 — backdrop·panel fade와 동시에 시각이 정착해 보간 깜빡임 회피. */
  --rl-scale-bg-sheet:0.94;
  --rl-occluded-bg-filter-sheet:saturate(0.5) opacity(0.72);
  --rl-occluded-bg-filter-modal:saturate(0.75);   /* 색감만 약하게 감쇠, alpha 합성(opacity) 없음. modal은 scale 미적용. */

  /* === Sizing === */
  --rl-h-btn-lg:52px;
  --rl-h-btn-md:44px;
  --rl-h-btn-sm:36px;
  --rl-h-iconbtn:40px;
  --rl-h-appbar:52px;
  --rl-h-mark:22px;
}

/* === data-accent="violet" — 보조 액센트 영역 === */
[data-accent="violet"]{
  --rl-primary:var(--rl-accent);
  --rl-primary-hover:var(--rl-accent-hover);
  --rl-primary-light:var(--rl-accent-light);
  --rl-primary-soft:var(--rl-accent-soft);
  --rl-primary-edge:var(--rl-accent-edge);
}

/* === A11y: focus ring === */
.rl-learn :focus-visible{
  outline:2px solid var(--rl-primary);
  outline-offset:2px;
  border-radius:inherit;
}
.rl-learn button:focus:not(:focus-visible){ outline:none; }

/* === A11y: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce){
  .rl-learn *,
  .rl-learn *::before,
  .rl-learn *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* --rl-page-shell-bg 다크 — page-shell body.rl-mnav-page 다크 마진(#0B1220)과 동일. 라이트박스(body 직속) 여백용 :root 스위치. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rl-page-shell-bg:#0B1220; }
}
:root[data-theme="dark"] { --rl-page-shell-bg:#0B1220; }

/* semantic soft/text 다크값 — .rl-notice(§3.5.3) 스코프 한정 공급.
   전역 --rl-warn-soft/-text·--rl-info-soft/-text는 라이트 리터럴이라 페이지 다크에서 누출(밝은 box).
   .rl-notice는 soft를 배경으로 쓰는 첫 페이지 소비처라 다크값이 필수. 전역 채움은 mock·study·note·banner 등
   기존 소비처를 일제히 바꿔 blast radius가 커지므로(§8.4 백로그), 여기선 .rl-notice 엘리먼트 스코프로만 override
   (specificity 0,2,1 > :root 0,1,0 → 해당 카드만 변경, 전역 소비처 무영향). modal.css amber 다크 매핑과 동일 패턴.
   토큰 값 정의이므로 본 토큰 원천 파일에 둔다(§8.5.1 — notice.css는 var() 소비만, 리터럴 G1 회피). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rl-notice {
    --rl-warn-soft: rgba(245,158,11,.14);
    --rl-warn-text: #FCD34D;
    --rl-info-soft: rgba(56,189,248,.14);
    --rl-info-text: #7DD3FC;
  }
}
:root[data-theme="dark"] .rl-notice {
  --rl-warn-soft: rgba(245,158,11,.14);
  --rl-warn-text: #FCD34D;
  --rl-info-soft: rgba(56,189,248,.14);
  --rl-info-text: #7DD3FC;
}

/* 앱 설치 모달 다크 토큰 재매핑 — #rl-app-banner 엘리먼트 스코프(modal.css 동일 패턴, specificity > :root, 전역 무영향).
   surface/ink/text는 라이트 리터럴이라 다크 surface 위에서 흰 패널·어두운 글자로 누출 → modal.css 다크값과 동일하게 override.
   브랜드 오렌지(채도 버튼)·on-primary(흰 글자)는 다크 동일값 유지. soft 타일(#FFF7ED)만 다크 alpha tint로.
   raw hex는 토큰 값 정의라 토큰 원천 파일에 둔다(§8.5.1 — 소비처 app_install_banner.css는 var() 소비만, G1 회피). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #rl-app-banner {
    --rl-surface-elev:#1F2940;
    --rl-ink:#F8FAFC;
    --rl-text-2:#A8B3C7;
    --rl-text-3:#7E8AA0;
    --rl-text-4:#5A6478;
    --rl-app-brand-soft:rgba(253,126,20,.12);
  }
}
:root[data-theme="dark"] #rl-app-banner {
  --rl-surface-elev:#1F2940;
  --rl-ink:#F8FAFC;
  --rl-text-2:#A8B3C7;
  --rl-text-3:#7E8AA0;
  --rl-text-4:#5A6478;
  --rl-app-brand-soft:rgba(253,126,20,.12);
}