/* ACUAR 체험판 디자인 토큰
   ─────────────────────────────────────────────
   세 층으로 나뉜다. 층 번호가 클수록 이름에 "무엇에 쓰는지"가 담긴다.
     1층 기본(primitive) : 실제 값. 색 팔레트, 글자 크기·간격·모서리 단계
     2층 의미(semantic)  : 쓰임새 이름. 라이트/다크에서 값이 바뀐다 (--color-text 등)
     3층 컴포넌트         : 한 화면·한 부품에서만 쓰는 값 (--detail-kmcric-btn-ksub-color 등)
   새 코드는 2층 → 1층 순서로 고른다. 3층은 기존 값을 그대로 옮겨 둔 것이다.

   주의: 지금 값은 2026-10-31 화면을 한 픽셀도 바꾸지 않도록 그대로 옮긴 것이다.
   그래서 비슷하지만 다른 값(회색 여러 개, 반 픽셀 글자 크기 등)이 아직 남아 있다.
   값을 합치면 화면이 바뀌므로, 디자인을 정한 뒤 이 파일에서 한 번에 손본다.
   (design-system/README.md "토큰" 절 참고) */

:root{
  /* ═══ 1층 · 기본 색 ═══ */
  --white:#ffffff;
  --black:#000000;
  /* 브랜드 */
  --purple-600:#4a2fc4;  /* 진한 보라(그라데이션·카드) */
  --purple-500:#6a4df0;  /* 브랜드 보라 */
  --purple-400:#8b78ff;  /* 다크모드 기본 버튼 */
  --purple-300:#b9a8ff;  /* 어두운 바탕 위 보라 */
  --purple-200:#cbbdff;  /* AR 스위치 켬 라벨 */
  --purple-100:#ece9fb;  /* 옅은 보라 면 */
  --purple-50:#efeaff;  /* 정렬 메뉴 선택 */
  --lime-500:#bfe93a;  /* 라임 그라데이션 끝 */
  --lime-400:#cdf24e;  /* 포인트 라임 */
  --navy-700:#25324a;  /* 라임 위 글자 */
  /* 페이지 라이트 */
  --ink-900:#1b1830;  /* 본문 글자 */
  --ink-700:#2a2740;  /* 버튼 설명 글자 */
  --ink-600:#3a3550;  /* 아이콘(상세·퀴즈) */
  --ink-icon:#33404f;  /* 아이콘(검색·내 경혈) */
  --gray-600:#5b6270;  /* 정렬 메뉴 글자 */
  --gray-500:#948fa6;  /* 보조 글자(홈) */
  --gray-450:#9095a3;  /* 작은 아이콘·cm */
  --gray-440:#8b90a0;  /* 번호 원 글자·정보 아이콘 */
  --gray-400:#a9a4b8;  /* 출처 글자 */
  --lavender-300:#e7ddf5;  /* 사진 자리 */
  --lavender-200:#e7e3f6;  /* 카드 보조 면 */
  --lavender-150:#ebe7f4;  /* 구분선 */
  --lavender-100:#f0eef6;  /* 드롭다운 테두리 */
  --lavender-75:#f3f0fb;  /* 옅은 면 */
  --lavender-50:#f4f2fb;  /* 타일 밝은 면 */
  /* 페이지 다크 */
  --night-950:#141119;  /* 바탕 */
  --night-900:#211d2b;  /* 카드 */
  --night-850:#262233;  /* 칩·필 */
  --night-820:#2a2438;  /* 보조 면 */
  --night-800:#2c2839;  /* 구분선 */
  --night-780:#2f2846;  /* 보라 면 */
  --night-750:#322c42;  /* 구분선(퀴즈) */
  --night-ink:#ece9f4;  /* 글자 */
  --night-ink-2:#e2ddef;  /* 목록 글자 */
  --night-ink-3:#d3cee2;  /* 본문 */
  --night-gray-400:#b4aec6;  /* 정렬 메뉴 글자 */
  --night-gray-500:#9a94ad;  /* 보조 글자 */
  --night-gray-600:#807a95;  /* 흐린 글자 */
  --night-gray-700:#6f6980;  /* 출처 글자 */
  --night-icon:#c6cdd8;  /* 아이콘 */
  /* 상태 */
  --ok-500:#3f9a63;  /* 정답 */
  --ok-300:#6cc58f;  /* 정답(다크) */
  --ok-50:#eaf6ee;  /* 정답 면 */
  --ok-900:#1f2e26;  /* 정답 면(다크) */
  --no-500:#c4515f;  /* 오답 */
  --no-300:#ec7f8b;  /* 오답(다크) */
  --no-50:#fbecee;  /* 오답 면 */
  --no-900:#36222a;  /* 오답 면(다크) */
  --warn-500:#d99a00;  /* 주의 문구 */
  --gold-500:#f5c518;  /* 보관용 금색 */
  /* AR */
  --slate-950:#0b0f14;  /* AR 바탕 */
  --slate-900:#111820;  /* 오류 보고 창 */
  --slate-700:#2b3a47;  /* 테두리 */
  --slate-650:#33424e;  /* 진한 테두리 */
  --slate-400:#8b98a5;  /* 더 흐린 글자 */
  --slate-300:#b9c6d2;  /* 흐린 글자 */
  --slate-200:#c9d3dc;  /* 창 본문 */
  --slate-100:#e8edf2;  /* 글자 */
  --lilac-100:#e8e4f6;  /* 메뉴 라벨 */
  --slate-surface:rgba(20,28,36,.85);  /* 칩·둥근 버튼 바탕 */
  --mint-600:#10b981;  /* 칩 켬 */
  --mint-400:#69d6b3;  /* 경맥 버튼 켬 */
  --mint-300:#6ee7b7;  /* 연초록 */
  --mint-ink:#04110c;  /* 초록 위 글자 */
  --teal-link:#a5c9c7;  /* 링크 */
  /* 바탕 빛(페이지 공통 보라 원 4개) */
  --blob-1:rgba(150,110,236,.2);
  --blob-1-0:rgba(150,110,236,0);
  --blob-2:rgba(174,134,244,.15);
  --blob-2-0:rgba(174,134,244,0);
  --blob-3:rgba(138,102,228,.17);
  --blob-3-0:rgba(138,102,228,0);
  --blob-4:rgba(160,122,240,.13);
  --blob-4-0:rgba(160,122,240,0);
  /* 흰색·검정 투명도 */
  --black-a25:rgba(0,0,0,.25);
  --black-a30:rgba(0,0,0,.3);
  --black-a40:rgba(0,0,0,.4);
  --black-a45:rgba(0,0,0,.45);
  --black-a50:rgba(0,0,0,.5);
  --black-a60:rgba(0,0,0,.6);
  --white-a00:rgba(255,255,255,0);
  --white-a07:rgba(255,255,255,.07);
  --white-a10:rgba(255,255,255,.1);
  --white-a12:rgba(255,255,255,.12);
  --white-a14:rgba(255,255,255,.14);
  --white-a16:rgba(255,255,255,.16);
  --white-a18:rgba(255,255,255,.18);
  --white-a25:rgba(255,255,255,.25);
  --white-a50:rgba(255,255,255,.5);
  --white-a60:rgba(255,255,255,.6);
  --white-a70:rgba(255,255,255,.7);
  --white-a72:rgba(255,255,255,.72);
  --white-a75:rgba(255,255,255,.75);
  --white-a82:rgba(255,255,255,.82);
  --white-a85:rgba(255,255,255,.85);
  /* 그림자(여러 화면 공용) */
  --shadow-card:0 8px 24px rgba(45,32,95,.07);
  --shadow-card-sm:0 4px 16px rgba(45,32,95,.06);
  --shadow-menu:0 12px 30px rgba(30,20,70,.18);

  /* ═══ 1층 · 글자 크기 ═══ */
  --font-size-10:10px; --font-size-10-5:10.5px; --font-size-11:11px; --font-size-11-5:11.5px; --font-size-12:12px; --font-size-12-5:12.5px; --font-size-13:13px; --font-size-13-5:13.5px; --font-size-14:14px; --font-size-15:15px; --font-size-15-5:15.5px; --font-size-16:16px; --font-size-16-5:16.5px; --font-size-17:17px; --font-size-18:18px; --font-size-19:19px; --font-size-20:20px; --font-size-20-5:20.5px; --font-size-21:21px; --font-size-22:22px; --font-size-26:26px; --font-size-27:27px; --font-size-28:28px; --font-size-30:30px; --font-size-40:40px; --font-size-52:52px;
  /* ═══ 1층 · 간격 ═══ */
  --space-0:0px; --space-1:1px; --space-2:2px; --space-3:3px; --space-4:4px; --space-5:5px; --space-6:6px; --space-7:7px; --space-8:8px; --space-9:9px; --space-10:10px; --space-11:11px; --space-12:12px; --space-13:13px; --space-14:14px; --space-15:15px; --space-16:16px; --space-17:17px; --space-18:18px; --space-19:19px; --space-20:20px; --space-22:22px; --space-24:24px; --space-26:26px; --space-28:28px; --space-30:30px; --space-34:34px; --space-36:36px; --space-40:40px; --space-46:46px; --space-60:60px; --space-96:96px; --space-104:104px;
  /* ═══ 1층 · 모서리 ═══ */
  --radius-7:7px; --radius-8:8px; --radius-10:10px; --radius-11:11px; --radius-12:12px; --radius-13:13px; --radius-14:14px; --radius-16:16px; --radius-18:18px; --radius-20:20px; --radius-22:22px; --radius-24:24px; --radius-26:26px; --radius-28:28px; --radius-30:30px; --radius-pill:999px; --radius-circle:50%;

  /* ═══ 2층 · 의미 이름: 글자 크기 · 간격 · 모서리 (새 코드용) ═══ */
  --text-caption:var(--font-size-11);   /* 출처·크레딧 */
  --text-small:var(--font-size-12);     /* 작은 글 */
  --text-ui:var(--font-size-13);        /* AR 칩·라벨·상태 */
  --text-body:var(--font-size-15);      /* 본문 */
  --text-body-lg:var(--font-size-16);   /* 상세 본문 */
  --text-title:var(--font-size-18);     /* 페이지 제목 */
  --text-heading:var(--font-size-26);   /* 큰 제목 */
  --space-xs:var(--space-4); --space-sm:var(--space-8); --space-md:var(--space-12); --space-lg:var(--space-16); --space-xl:var(--space-24);
  --space-page-x:var(--space-22);       /* 홈·퀴즈 좌우 여백 */
  --radius-chip:var(--radius-pill);
  --radius-control:var(--radius-10);    /* 창 안 버튼·입력란 */
  --radius-panel:var(--radius-16);      /* 메뉴·창·퀴즈 보기 */
  --radius-card:var(--radius-18);       /* 페이지 카드 */
  --radius-hero:var(--radius-24);       /* 큰 카드·바텀시트 */

  /* ═══ 2층 · 의미 색 (라이트) ═══ */
  --color-bg:var(--white);  /* 페이지 바탕 */
  --color-text:var(--ink-900);  /* 본문 글자 */
  --color-text-muted:var(--gray-500);  /* 보조 글자 */
  --color-surface:var(--white);  /* 카드 면 */
  --color-surface-alt:var(--lavender-200);  /* 보조 카드 면 */
  --color-soft:var(--lavender-75);  /* 옅은 면 */
  --color-line:var(--lavender-150);  /* 구분선 */
  --color-brand:var(--purple-500);  /* 브랜드 보라(면·막대) */
  --color-brand-text:var(--purple-500);  /* 보라 강조 글자 */
  --color-brand-soft:var(--purple-100);  /* 보라 옅은 면 */
  --color-icon:var(--ink-icon);  /* 헤더 아이콘 */
  --color-accent:var(--lime-400);  /* 라임 포인트 */
  --color-on-accent:var(--navy-700);  /* 라임 위 글자 */
  --color-ok:var(--ok-500);  /* 정답 */
  --color-ok-soft:var(--ok-50);  /* 정답 면 */
  --color-no:var(--no-500);  /* 오답 */
  --color-no-soft:var(--no-50);  /* 오답 면 */
  --color-credit:var(--gray-400);  /* 출처 글자 */
  --color-menu-bg:var(--white);  /* 드롭다운 바탕 */
  --color-menu-text:var(--gray-600);  /* 드롭다운 글자 */
  --color-menu-active-bg:var(--purple-50);  /* 드롭다운 선택 면 */

  /* ═══ 3층 · 컴포넌트 (한 곳에서만 쓰는 값, 라이트) ═══ */
      linear-gradient(140deg,#361c86 0%,#552fd2 55%,#6a3fe4 100%);
}
:root[data-theme="dark"]{
  /* 2층 · 의미 색 (다크) */
  --color-bg:var(--night-950);
  --color-text:var(--night-ink);
  --color-text-muted:var(--night-gray-500);
  --color-surface:var(--night-900);
  --color-surface-alt:var(--night-820);
  --color-soft:var(--night-820);
  --color-line:var(--night-750);
  --color-brand:var(--purple-500);
  --color-brand-text:var(--purple-300);
  --color-brand-soft:var(--night-780);
  --color-icon:var(--night-icon);
  --color-accent:var(--lime-400);
  --color-on-accent:var(--navy-700);
  --color-ok:var(--ok-300);
  --color-ok-soft:var(--ok-900);
  --color-no:var(--no-300);
  --color-no-soft:var(--no-900);
  --color-credit:var(--night-gray-700);
  --color-menu-bg:var(--night-900);
  --color-menu-text:var(--night-gray-400);
  --color-menu-active-bg:var(--night-780);
  /* 3층 · 컴포넌트 (다크) */
}

/* ═══ B안 · AR 렌즈 (2026-11-02~) ═══════════════════════════
   새 디자인 방향의 토큰. 화면을 하나씩 옮길 때마다 이 --ui-* 토큰을 쓴다(지금: 홈).
   라이트가 :root, 다크가 [data-theme="dark"]. 카메라 카드(--ui-cam-*)는 두 테마 모두 어둡다. */
:root{
  /* 1층 · 기본 */
  --b-slate-50:#eef1f4; --b-slate-75:#f6f8fa; --b-slate-150:#d9e0e6; --b-slate-600:#56636f; --b-slate-900:#0d141b;
  --b-night-950:#0b0f14; --b-night-900:#121921; --b-night-850:#17202a; --b-night-800:#1f2a35; --b-night-300:#93a1ae; --b-night-100:#e9eef3;
  --b-cam:#05080b; --b-cam-sub:#a9b6c2; --b-lime-ink:#3f5c00;
  --meridian-lu:#4fc3f7; --meridian-li:#81c784; --meridian-pc:#f48fb1; --meridian-te:#ffb74d; --meridian-ht:#e57373; --meridian-si:#ba68c8;
  --font-ui:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;

  /* 2층 · 의미 (라이트) */
  --ui-bg:var(--b-slate-50);
  --ui-panel:var(--white);
  --ui-panel-2:var(--b-slate-75);
  --ui-line:var(--b-slate-150);
  --ui-ink:var(--b-slate-900);
  --ui-sub:var(--b-slate-600);          /* 바탕 대비 5.4:1 */
  --ui-accent:var(--lime-400);          /* 버튼·켬 표시 바탕 */
  --ui-on-accent:var(--b-night-950);
  --ui-accent-text:var(--b-lime-ink);   /* 라임을 글자로 쓸 때 (대비 6.8:1) */
  --ui-star-on:var(--b-lime-ink);       /* 켜진 별 테두리(라임 채움 위) */
  --ui-ok:#2b7d4d;                      /* 정답 */
  --ui-no:#b8434f;                      /* 오답 */
  --ui-cam:var(--b-cam);                /* 카메라처럼 보이는 카드: 두 테마 모두 어둡게 */
  --ui-cam-ink:var(--b-night-100);
  --ui-cam-sub:var(--b-cam-sub);
  --ui-cam-grid:rgba(205,242,78,.07);
  --ui-cam-scan:rgba(205,242,78,.55);
  --ui-cam-line:var(--b-night-800);
  --ui-logo-filter:none;
  --ui-line-strong:#b4bec8;             /* 마우스를 올렸을 때 테두리 */
  --ui-accent-hover:#bfe33b;            /* 라임 버튼 hover */
  --ui-focus:var(--b-slate-900);        /* 키보드 포커스 고리 */
  --ui-scrim:rgba(5,8,11,.55);          /* 모달 뒤 어둡게 */
  --ui-photo-bg:var(--white);          /* 경혈 위치 그림 바탕 */
  --ui-photo-filter:none;
  --ui-hud:var(--b-slate-900);          /* 그림 모서리의 렌즈 표시 */
  --ui-star-bg:rgba(255,255,255,.9);    /* 그림 위 별 버튼 바탕 */
  --ui-warn:#8a5a00;                    /* 주의·안내 아이콘 (바탕 대비 5.2:1) */
  --ui-warn-bg:#fbf1dc;                 /* 주의 문구 띠 (글자 대비 5.6:1) */
  --ui-r-panel:14px;
  --ui-r-control:12px;
}
:root[data-theme="dark"]{
  --ui-bg:var(--b-night-950);
  --ui-panel:var(--b-night-900);
  --ui-panel-2:var(--b-night-850);
  --ui-line:var(--b-night-800);
  --ui-ink:var(--b-night-100);
  --ui-sub:var(--b-night-300);          /* 바탕 대비 7.3:1 */
  --ui-accent-text:var(--lime-400);
  --ui-star-on:var(--lime-400);
  --ui-ok:var(--ok-300);
  --ui-no:var(--no-300);
  --ui-logo-filter:invert(1);
  --ui-line-strong:#33424f;
  --ui-accent-hover:#dbf77a;
  --ui-focus:var(--lime-400);
  --ui-scrim:rgba(0,0,0,.65);
  --ui-photo-bg:var(--b-cam);
  --ui-photo-filter:invert(1) hue-rotate(180deg) brightness(.85);   /* 흰 선 그림 → 카메라처럼. 빨간 경혈 점은 빨간색 유지 */
  --ui-hud:var(--lime-400);
  --ui-star-bg:rgba(5,8,11,.6);
  --ui-warn:#f2c46b;
  --ui-warn-bg:rgba(242,196,107,.12);
}

/* ═══ B안 · AR 화면 (늘 어둡다: 라이트/다크와 무관) ═══ */
:root{
  --ar-bg:var(--b-night-950);
  --ar-panel:var(--b-night-900);
  --ar-panel-2:var(--b-night-850);
  --ar-line:var(--b-night-800);
  --ar-control:#26323e;                 /* 칩·버튼 테두리, 꺼진 스위치 */
  --ar-text:var(--b-night-100);
  --ar-text-muted:var(--b-night-300);   /* 대비 7.3:1 */
  --ar-text-dim:#7c8996;                /* 출처 글자 (대비 5.1:1) */
  --ar-on:var(--lime-400);              /* 켬 표시 · 기본 버튼 */
  --ar-on-ink:var(--b-night-950);
  --ar-link:var(--teal-link);
  --ar-error-banner-bg:#7f1d1d;
  --ar-error-banner-color:#fecaca;
  --ar-r-control:12px;
  --ar-r-panel:14px;
  --black-load:#05070a;                 /* AR 로딩 화면 바탕(원래 값) */
}