@charset "utf-8";

/* =============================================================================
   BellRiver Lab Design System (BRL DS)

   [무엇]  이 사이트 전용 디자인 시스템. 대한민국 정부 디자인 시스템 KRDS의
           "토큰 아키텍처"를 참고해 직접 만든 별개의 시스템이다.
           KRDS 코드를 가져다 쓰는 게 아니라 구조만 참고했다.

   [KRDS 에서 가져온 것]
     · 프리미티브 → 시맨틱 2층 토큰 구조
     · 색상군을 5(밝음)~95(어두움) 단계로 끊는 방식
     · gap / padding / size-height / radius 를 별도 스케일로 분리하는 방식
     · surface / text / border / action / status 로 나눈 역할 이름

   [KRDS 와 다르게 간 것]
     · KRDS 는 라이트 우선, 여기는 다크 우선이라 회색 단계 값이 완전히 다르다.
     · KRDS 는 1rem=10px 전제. 이 사이트는 루트가 16px 이라 전부 px 로 환산했다.
     · KRDS 회색은 중립. 여기는 콘텐츠 영역이 푸른기 도는 회색이라 그대로 살렸다.

   [3개 층]
     1층 프리미티브 — 원시 색/치수. 페이지 CSS 가 직접 쓰지 않는다.
     2층 시맨틱     — 역할 기반 토큰. 페이지는 이것만 쓴다. 테마가 갈아끼운다.
     3층 불변 규약  — 테마가 무엇이든 지켜지는 조작성 규칙. 페이지가 못 덮는다.

   [페이지마다 디자인이 달라도 되는 이유]
     페이지 컨셉(계산기=종이, 모스=전술 콘솔, 인터벌=링피트)은 2층을 갈아끼우는
     "테마"로 시스템 안에 들어와 있다. 시스템 밖으로 나가서 하드코딩하는 게 아니라,
     시스템이 허용한 방식으로 달라진다. 3층은 어느 테마에서도 동일하게 걸린다.
   ============================================================================= */


/* =============================================================================
   1층 · 프리미티브
   원시 값. 여기 있는 토큰을 페이지 CSS 에서 직접 참조하지 말 것.
   테마를 만들 때만 참조한다.
   ============================================================================= */

:root {

    /* ---- 회색 · 콘텐츠 영역 (푸른기 도는 중성회색) ------------------------
       기존에 두 갈래로 갈라져 있던 다크 팔레트를 한 줄로 합친 결과다.
       (#0a0b0d/#0d0e11, #14161a/#16181d, #282c34/#2c313b, #8b909b/#9aa0ac ...)
       KRDS 는 0~100 을 13단계로 끊지만, 다크 UI 는 어두운 쪽 해상도가 더 필요해서
       85 / 93 / 97 을 추가했다. */
    --brl-gray-0:   #ffffff;
    --brl-gray-5:   #f4f5f7;
    --brl-gray-10:  #e4e7ec;
    --brl-gray-20:  #cbd0d9;
    --brl-gray-30:  #aeb5c0;
    --brl-gray-40:  #939aa6;
    --brl-gray-50:  #878e9a;
    --brl-gray-60:  #6e7480;
    --brl-gray-70:  #454b56;
    --brl-gray-80:  #333944;
    --brl-gray-85:  #2a2f38;
    --brl-gray-90:  #212630;
    --brl-gray-93:  #1a1e24;
    --brl-gray-95:  #15181c;
    --brl-gray-97:  #0c0d10;
    --brl-gray-100: #000000;

    /* ---- 회색 · 사이트 셸 (완전 중립) -------------------------------------
       사이드바/헤더는 푸른기 없는 순회색 계열로 콘텐츠와 의도적으로 분리돼 있다.
       콘텐츠 회색으로 흡수하면 셸 전체 색온도가 바뀌므로 별도 군으로 둔다. */
    --brl-shell-55: #777777;
    --brl-shell-60: #666666;
    --brl-shell-65: #555555;
    --brl-shell-70: #444444;   /* 사이드바·상단 탭바 바탕. 셸에서 가장 밝은 면이다. */
    --brl-shell-75: #3d3d3d;
    --brl-shell-80: #3a3a3a;
    --brl-shell-85: #333333;   /* body 바탕 */
    --brl-shell-90: #2b2b2b;

    /* ---- 파랑 · 도구 페이지 기본 액션 -------------------------------------
       KRDS primary 램프를 그대로 채택했다. 도구 페이지들이 쓰던 #4c8dff 는
       KRDS primary-40(#4c87f6)과 육안 구분이 안 되는 거리라 40 단계로 흡수했다. */
    --brl-blue-5:   #ecf2fe;
    --brl-blue-10:  #d8e5fd;
    --brl-blue-20:  #b1cefb;
    --brl-blue-30:  #86aff9;
    --brl-blue-40:  #4c87f6;
    --brl-blue-50:  #256ef4;
    --brl-blue-60:  #0b50d0;
    --brl-blue-70:  #083891;
    --brl-blue-80:  #052561;
    --brl-blue-90:  #03163a;
    --brl-blue-95:  #020f27;

    /* ---- 청록 · BellRiver Lab 브랜드 액센트 -------------------------------
       사이트 셸(사이드바 링크/호버/위젯)이 쓰는 정체성 색. 기존 #00ccff 가 40단계. */
    --brl-cyan-5:   #e6faff;
    --brl-cyan-10:  #ccf5ff;
    --brl-cyan-20:  #99ebff;
    --brl-cyan-30:  #5ce0ff;
    --brl-cyan-40:  #00ccff;
    --brl-cyan-50:  #00a6d1;
    --brl-cyan-60:  #0084a8;
    --brl-cyan-70:  #00637f;
    --brl-cyan-80:  #004356;
    --brl-cyan-90:  #002733;
    --brl-cyan-95:  #001a22;

    /* ---- 마젠타 · 브랜드 포인트 -------------------------------------------
       프로필 장식, 후원 버튼, 검색어 하이라이트. 기존 #fa2080 이 40단계,
       기존 --hover-color #c41a6a 가 60단계다. */
    --brl-magenta-5:  #ffe9f2;
    --brl-magenta-10: #ffd0e2;
    --brl-magenta-20: #ffa1c5;
    --brl-magenta-30: #fd6ba5;
    --brl-magenta-40: #fa2080;
    --brl-magenta-50: #e01a72;
    --brl-magenta-60: #c41a6a;
    --brl-magenta-70: #8f1049;
    --brl-magenta-80: #5f0a31;
    --brl-magenta-90: #38061d;
    --brl-magenta-95: #260413;

    /* ---- 초록 · 성공/추가 -------------------------------------------------
       기존 --good #22c55e 가 50, diff/맞춤법의 --ok-ink #6ee7a0 가 30,
       --ok-bg #12351f 가 85 단계에 앉는다. */
    --brl-green-5:   #eafaef;
    --brl-green-10:  #d0f4dc;
    --brl-green-20:  #a3e8bd;
    --brl-green-30:  #6ee7a0;
    --brl-green-40:  #34d17c;
    --brl-green-50:  #22c55e;
    --brl-green-60:  #1a9c4b;
    --brl-green-70:  #157a3b;
    --brl-green-80:  #0f4a24;
    --brl-green-85:  #12351f;
    --brl-green-90:  #0d2415;
    --brl-green-95:  #08170d;

    /* ---- 빨강 · 위험/삭제 -------------------------------------------------
       diff/맞춤법의 --err-ink #ff8095 가 30, --err-bg #3a1620 이 85,
       인터벌의 --red #ff3b57 이 40 단계다. */
    --brl-red-5:   #ffecef;
    --brl-red-10:  #ffd4da;
    --brl-red-20:  #ffa8b5;
    --brl-red-30:  #ff8095;
    --brl-red-40:  #ff3b57;
    --brl-red-50:  #e01e3c;
    --brl-red-60:  #b8162e;
    --brl-red-70:  #8a1023;
    --brl-red-80:  #5c0a17;
    --brl-red-85:  #3a1620;
    --brl-red-90:  #2a0a12;
    --brl-red-95:  #1a060b;

    /* ---- 노랑 · 경고 ------------------------------------------------------ */
    --brl-amber-5:   #fff8e6;
    --brl-amber-10:  #ffefc2;
    --brl-amber-20:  #ffdd85;
    --brl-amber-30:  #ffc94a;
    --brl-amber-40:  #fbbf24;
    --brl-amber-50:  #d99521;
    --brl-amber-60:  #a8720f;
    --brl-amber-70:  #7d5409;
    --brl-amber-80:  #533705;
    --brl-amber-90:  #2f1f03;
    --brl-amber-95:  #1f1502;

    /* ---- 주황 · ember 테마(인터벌 타이머) 씨앗 ---------------------------- */
    --brl-orange-20: #ffb082;
    --brl-orange-30: #ff8642;
    --brl-orange-40: #ff6a1a;
    --brl-orange-50: #e05306;
    --brl-orange-60: #b34104;
    --brl-orange-80: #4a1a02;
    --brl-orange-90: #2b0f01;

    /* ---- CRT · 로또 섹션의 레트로 픽셀 정체성 -----------------------------
       Galmuri 픽셀 폰트와 짝을 이루는 8비트 원색. 채도를 낮추면 컨셉 자체가
       사라지므로 순색 그대로 둔다. KRDS 의 point 계열에 대응하는 자리다.
       본문 글자에는 쓰지 않는다 — 강조/테두리/배경 전용. */
    --brl-crt-yellow: #ffff00;
    --brl-crt-green:  #00ff00;
    --brl-crt-cyan:   #00ffff;

    /* ---- 청록(teal) / 보라 · 보조 상태와 차트 ----------------------------- */
    --brl-teal-30:   #4fdccb;
    --brl-teal-40:   #17c3b2;
    --brl-teal-60:   #0d8a7e;
    --brl-violet-30: #a99fff;
    --brl-violet-40: #8a7dff;
    --brl-violet-60: #5a4bd6;

    /* ---- 차트/그래픽 카테고리 색 -----------------------------------------
       KRDS 의 graphic 토큰군에 대응. 인접 색끼리 명도가 겹치지 않게 골랐다. */
    --brl-graphic-1: var(--brl-blue-40);
    --brl-graphic-2: var(--brl-orange-40);
    --brl-graphic-3: var(--brl-teal-40);
    --brl-graphic-4: var(--brl-violet-40);
    --brl-graphic-5: var(--brl-amber-40);
    --brl-graphic-6: var(--brl-magenta-30);

    /* ---- 투명도 ----------------------------------------------------------- */
    --brl-alpha-white-5:  #ffffff0d;
    --brl-alpha-white-10: #ffffff1a;
    --brl-alpha-white-25: #ffffff40;
    --brl-alpha-white-50: #ffffff80;
    --brl-alpha-black-25: #00000040;
    --brl-alpha-black-50: #00000080;
    --brl-alpha-black-75: #000000bf;


    /* ---- 치수 스케일 -------------------------------------------------------
       KRDS 의 gap / padding / size-height / radius 분리를 따랐다.
       KRDS 는 1rem=10px 전제라 값이 rem 이지만, 이 사이트 루트는 16px 이므로
       전부 px 로 환산해 적었다. (KRDS 1.6rem → 16px) */

    /* 요소 사이 간격 */
    --brl-space-1:  2px;
    --brl-space-2:  4px;
    --brl-space-3:  8px;
    --brl-space-4:  12px;
    --brl-space-5:  16px;
    --brl-space-6:  20px;
    --brl-space-7:  24px;
    --brl-space-8:  32px;
    --brl-space-9:  40px;
    --brl-space-10: 48px;
    --brl-space-11: 64px;
    --brl-space-12: 80px;

    /* 컨테이너 안쪽 여백 */
    --brl-pad-1:  2px;
    --brl-pad-2:  4px;
    --brl-pad-3:  8px;
    --brl-pad-4:  10px;
    --brl-pad-5:  12px;
    --brl-pad-6:  16px;
    --brl-pad-7:  20px;
    --brl-pad-8:  24px;
    --brl-pad-9:  32px;
    --brl-pad-10: 40px;

    /* 컨트롤 높이 — 폼/버튼은 이 단계에만 앉힌다 */
    --brl-control-xs: 24px;
    --brl-control-sm: 32px;
    --brl-control-md: 40px;
    --brl-control-lg: 48px;
    --brl-control-xl: 56px;

    /* 모서리 */
    --brl-radius-xs:   2px;
    --brl-radius-sm:   4px;
    --brl-radius-md:   6px;
    --brl-radius-lg:   8px;
    --brl-radius-xl:   12px;
    --brl-radius-2xl:  16px;
    --brl-radius-full: 9999px;

    /* 테두리 굵기 */
    --brl-stroke-1: 1px;
    --brl-stroke-2: 2px;
    --brl-stroke-3: 3px;


    /* ---- 타이포 ------------------------------------------------------------
       KRDS 의 display/heading/body/label 4계열 구조를 따르고 px 로 환산했다.
       사다리에 없는 크기(14px, 14.5px 같은 것)를 새로 만들지 말 것. */
    --brl-font-body: 'Pretendard', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --brl-font-pixel: 'Galmuri11', 'Pretendard', sans-serif;
    --brl-font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* 본문·UI 단계. 13px 이 바닥이고 그 아래는 이 시스템에 없다.
       KRDS 도 최소가 13px(1.3rem)이다. 도구 페이지가 9~12px 로 라벨을 쓰고
       있었는데, 작은 글씨는 저시력·고령 사용자에게 그냥 안 읽힌다.
       크기로 못 나누는 위계는 굵기(--brl-weight-*)와 색(--brl-text-muted 등)으로
       만든다. 그래서 캡션과 본문이 같은 13px 이어도 구분이 된다. */
    --brl-text-body-xs:    13px;
    --brl-text-body-s:     14px;
    --brl-text-body-m:     15px;
    --brl-text-body-l:     16px;
    --brl-text-heading-xs: 18px;
    --brl-text-heading-s:  20px;
    --brl-text-heading-m:  24px;
    --brl-text-heading-l:  28px;
    --brl-text-heading-xl: 32px;

    /* 디스플레이 단계. 404 숫자나 히어로 제목처럼 읽는 글이 아니라 보는 글. */
    --brl-text-display-s:   40px;
    --brl-text-display-m:   44px;
    --brl-text-display-l:   60px;
    --brl-text-display-xl:  72px;
    --brl-text-display-2xl: 96px;

    --brl-leading-tight:  1.3;
    --brl-leading-normal: 1.5;
    --brl-leading-loose:  1.7;
    --brl-leading-read:   1.9;

    --brl-weight-regular: 400;
    --brl-weight-bold:    700;
    --brl-weight-heavy:   800;

    /* ---- 그림자 ----------------------------------------------------------- */
    --brl-shadow-sm: 0 1px 2px var(--brl-alpha-black-25);
    --brl-shadow-md: 0 4px 12px var(--brl-alpha-black-50);
    --brl-shadow-lg: 0 12px 32px var(--brl-alpha-black-75);

    /* ---- 모션 --------------------------------------------------------------
       실제 재생 여부는 3층(불변 규약)에서 결정한다. 여기는 길이/곡선만 정의. */
    --brl-motion-instant: 80ms;
    --brl-motion-fast:    150ms;
    --brl-motion-normal:  240ms;
    --brl-motion-slow:    400ms;
    --brl-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --brl-ease-out:      cubic-bezier(0, 0, 0, 1);

    /* ---- 레이어 순서 -------------------------------------------------------
       z-index 를 페이지마다 즉흥으로 정하면 서로 덮어버린다. 이 사다리만 쓴다. */
    --brl-z-base:     0;
    --brl-z-raised:   10;
    --brl-z-sticky:   100;
    --brl-z-sidebar:  200;
    --brl-z-overlay:  300;
    --brl-z-modal:    400;
    --brl-z-toast:    500;
}


/* =============================================================================
   2층 · 시맨틱
   페이지 CSS 가 쓰는 유일한 색 토큰. 아래 테마들이 이 값을 갈아끼운다.
   기본값은 사이트 표준 다크(lab 테마와 동일).
   ============================================================================= */

:root {
    /* 면 */
    --brl-surface-canvas:   var(--brl-gray-97);
    --brl-surface-panel:    var(--brl-gray-95);
    --brl-surface-raised:   var(--brl-gray-93);
    --brl-surface-highest:   var(--brl-gray-90);
    --brl-surface-overlay:  var(--brl-gray-93);
    --brl-surface-disabled: var(--brl-gray-90);

    /* 글자 — 4단계. 옆의 비율은 이 테마의 네 가지 면(canvas/panel/raised/highest)
       중 "가장 불리한" 조합 기준이다. 어느 면에 얹어도 그 값 이상은 나온다.
       subtle 까지가 본문에 쓸 수 있는 하한(AA 4.5:1)이고, disabled 는 그 아래라
       "정보를 담은 글자"에 쓰면 안 된다. 비활성 표시 전용이다. */
    --brl-text-strong:    var(--brl-gray-0);    /* 제목        · 15.2:1 */
    --brl-text-default:   var(--brl-gray-5);    /* 본문        · 13.9:1 */
    --brl-text-muted:     var(--brl-gray-40);   /* 보조 설명    ·  5.4:1 */
    --brl-text-subtle:    var(--brl-gray-50);   /* 3차 · 힌트   ·  4.6:1 */
    --brl-text-disabled:  var(--brl-gray-60);   /* 비활성 전용  ·  3.2:1 */
    /* 채워진 버튼 위 글자. 액센트가 밝아서 흰 글자는 3.4:1 밖에 안 나온다.
       주황(ember)·초록(console) 버튼이 이미 어두운 글자를 쓰던 것과 같은 방식. */
    --brl-text-on-action: var(--brl-blue-95);

    /* 선 */
    --brl-border-subtle:      var(--brl-gray-90);
    --brl-border-default:     var(--brl-gray-85);
    --brl-border-strong:      var(--brl-gray-80);
    /* 폼 컨트롤 테두리. 배경 대비 3:1 을 넘어야 해서 장식용 선보다 밝다.
       (WCAG 1.4.11 — 조작 가능한 요소의 경계는 보여야 한다) */
    --brl-border-interactive: var(--brl-gray-60);
    --brl-divider:            var(--brl-gray-85);
    --brl-divider-strong:     var(--brl-gray-80);   /* 표의 합계 줄처럼 의미가 있는 구분선 */

    /* 액션 */
    --brl-action-primary:         var(--brl-blue-40);
    --brl-action-primary-hover:   var(--brl-blue-30);
    --brl-action-primary-pressed: var(--brl-blue-50);
    --brl-action-secondary:       var(--brl-gray-93);
    --brl-action-secondary-hover: var(--brl-gray-90);
    --brl-action-disabled:        var(--brl-gray-90);

    /* 링크 */
    --brl-link:       var(--brl-blue-30);
    --brl-link-hover: var(--brl-blue-20);

    /* 상태 — 각각 글자색/면색 한 쌍 */
    --brl-status-success:         var(--brl-green-30);
    --brl-status-success-surface: var(--brl-green-85);
    --brl-status-danger:          var(--brl-red-30);
    --brl-status-danger-surface:  var(--brl-red-85);
    --brl-status-warning:         var(--brl-amber-40);
    --brl-status-warning-surface: var(--brl-amber-90);
    --brl-status-info:            var(--brl-blue-30);
    --brl-status-info-surface:    var(--brl-blue-90);

    /* 포커스 링 색 — 테마가 바꿔도 되지만, 링 자체는 3층이 강제한다 */
    --brl-focus-color:  var(--brl-cyan-40);
    --brl-focus-width:  2px;
    --brl-focus-offset: 2px;
}


/* =============================================================================
   테마
   페이지 컨셉이 달라지는 지점. 페이지 루트 요소에 클래스를 붙여 쓴다.
   예) <div class="mrs brl-theme-console">
   테마는 2층만 갈아끼운다. 3층 규약은 어느 테마에서도 그대로 걸린다.
   ============================================================================= */

/* lab — 사이트 기본. 셸(사이드바/상단 탭바)과 홈/블로그가 쓰는 청록 액센트.
   대비 계산의 기준면은 사이드바 바탕(#444)이다. body(#333)가 아니라 이쪽인
   이유는, 셸에서 글자가 가장 많이 얹히는 면이 사이드바이고 그게 가장 밝기
   때문이다. 여기서 통과하면 더 어두운 면에서는 자동으로 통과한다. */
.brl-theme-lab {
    --brl-surface-canvas:   var(--brl-shell-85);   /* #333 body */
    --brl-surface-panel:    var(--brl-shell-90);   /* #2b2b2b 카드 */
    --brl-surface-raised:   var(--brl-shell-75);   /* #3d3d3d 위젯 */
    --brl-surface-highest:  var(--brl-shell-70);   /* #444 사이드바·탭바 */
    --brl-surface-overlay:  var(--brl-shell-70);

    /* 셸은 테두리를 두 굵기로 쓴다 — 사이드바 카드 테두리(#555)가 진하고,
       블로그 글 카드 테두리(#444)가 옅다. 한 단계로 합치면 둘 중 하나가 어긋난다. */
    --brl-border-subtle:    var(--brl-shell-80);   /* #3a3a3a */
    --brl-border-default:   var(--brl-shell-70);   /* #444444 콘텐츠 카드 */
    --brl-border-strong:    var(--brl-shell-65);   /* #555555 셸 카드 */
    --brl-border-interactive: #909090;
    --brl-divider:          var(--brl-shell-70);
    --brl-divider-strong:   var(--brl-shell-65);

    --brl-action-secondary:       var(--brl-shell-80);
    --brl-action-secondary-hover: var(--brl-shell-65);

    --brl-text-strong:   #ffffff;   /*  9.7:1 */
    --brl-text-default:  #ededed;   /*  8.3:1 */
    --brl-text-muted:    #bdbdbd;   /*  5.2:1 */
    /* 사이드바가 쓰던 잔글씨 #8f8f8f / #9a9a9a 는 #444 위에서 3.0 / 3.4:1 로
       본문 하한에 한참 못 미쳤다. 회색 톤은 유지하고 4.6:1 까지 올렸다. */
    --brl-text-subtle:   #b2b2b2;   /*  4.6:1 */
    --brl-text-disabled: #8a8a8a;

    --brl-action-primary:         var(--brl-cyan-40);
    --brl-action-primary-hover:   var(--brl-cyan-30);
    --brl-action-primary-pressed: var(--brl-cyan-50);
    --brl-text-on-action:         var(--brl-cyan-95);
    --brl-link:                   var(--brl-cyan-40);
    --brl-link-hover:             var(--brl-cyan-30);
}

/* studio — 색상/QR/이미지/diff/맞춤법 같은 실무 도구. 파란 액센트, 가장 중립적.
   :root 기본값과 같은 값이지만 전부 다시 적는다. 테마는 어떤 조상 아래에 놓여도
   같은 결과가 나와야 해서(lab 테마 안에 들어가도), 상속에 기대지 않는다. */
.brl-theme-studio {
    --brl-surface-canvas:   var(--brl-gray-97);
    --brl-surface-panel:    var(--brl-gray-95);
    --brl-surface-raised:   var(--brl-gray-93);
    --brl-surface-highest:   var(--brl-gray-90);
    --brl-surface-overlay:  var(--brl-gray-93);

    --brl-text-strong:    var(--brl-gray-0);
    --brl-text-default:   var(--brl-gray-5);
    --brl-text-muted:     var(--brl-gray-40);
    --brl-text-subtle:    var(--brl-gray-50);
    --brl-text-disabled:  var(--brl-gray-60);
    --brl-text-on-action: var(--brl-blue-95);

    --brl-border-subtle:      var(--brl-gray-90);
    --brl-border-default:     var(--brl-gray-85);
    --brl-border-strong:      var(--brl-gray-80);
    --brl-border-interactive: var(--brl-gray-60);
    --brl-divider:            var(--brl-gray-85);

    --brl-action-primary:         var(--brl-blue-40);
    --brl-action-primary-hover:   var(--brl-blue-30);
    --brl-action-primary-pressed: var(--brl-blue-50);
    --brl-link:                   var(--brl-blue-30);
    --brl-link-hover:             var(--brl-blue-20);
    --brl-focus-color:            var(--brl-blue-30);
}

/* ember — 인터벌 타이머. 운동 앱 톤의 주황을 주로, 청록을 회복 구간에.
   면과 글자는 studio 와 같은 다크지만, 테마는 상속에 기대지 않고 직접 적는다. */
.brl-theme-ember {
    --brl-surface-canvas:   var(--brl-gray-97);
    --brl-surface-panel:    var(--brl-gray-95);
    --brl-surface-raised:   var(--brl-gray-93);
    --brl-surface-highest:   var(--brl-gray-90);
    --brl-surface-overlay:  var(--brl-gray-93);

    --brl-text-strong:    var(--brl-gray-0);
    --brl-text-default:   var(--brl-gray-5);
    --brl-text-muted:     var(--brl-gray-40);
    --brl-text-subtle:    var(--brl-gray-50);
    --brl-text-disabled:  var(--brl-gray-60);

    --brl-border-subtle:      var(--brl-gray-90);
    --brl-border-default:     var(--brl-gray-85);
    --brl-border-strong:      var(--brl-gray-80);
    --brl-border-interactive: var(--brl-gray-60);
    --brl-divider:            var(--brl-gray-85);

    --brl-action-primary:         var(--brl-orange-40);
    --brl-action-primary-hover:   var(--brl-orange-30);
    --brl-action-primary-pressed: var(--brl-orange-50);
    /* 주황 위에는 흰 글자가 2.8:1 밖에 안 나온다. 어두운 글자라야 읽힌다. */
    --brl-text-on-action:         var(--brl-gray-97);
    --brl-link:                   var(--brl-orange-30);
    --brl-link-hover:             var(--brl-orange-20);
    --brl-focus-color:            var(--brl-orange-30);
}

/* console — 모스 부호. 톤다운된 전술 콘솔. 배경까지 녹색이 섞인다. */
.brl-theme-console {
    --brl-surface-canvas:   #0b0f0c;
    --brl-surface-panel:    #121813;
    --brl-surface-raised:   #172016;
    --brl-surface-highest:   #0f140f;
    --brl-surface-overlay:  #172016;

    --brl-text-strong:    #e2ecdc;
    --brl-text-default:   #cdd9c6;
    --brl-text-muted:     #a3b89a;
    /* 원래 3차 글자색이 #52634b 라 패널 위 2.9:1 밖에 안 나왔다. 콘솔 톤을 유지한
       채 4.7:1 까지만 끌어올렸다. */
    --brl-text-subtle:    #798d70;
    --brl-text-disabled:  #5e7057;
    --brl-text-on-action: #08120a;

    --brl-border-subtle:      #1d2a19;
    --brl-border-default:     #24331f;
    --brl-border-strong:      #33492b;
    --brl-border-interactive: #5c7a50;
    --brl-divider:            #24331f;
    --brl-divider-strong:     #33492b;

    --brl-action-primary:         #4ea56d;
    --brl-action-primary-hover:   #7cc596;
    --brl-action-primary-pressed: #3d8557;
    --brl-link:                   #7cc596;
    --brl-link-hover:             #a3d9b6;
    --brl-focus-color:            #7cc596;

    --brl-status-warning: #d99521;
    --brl-status-danger:  #d94f4f;
    --brl-status-info:    #3fb4bd;
}

/* arcade — 로또. 픽셀 아케이드. 보라기 도는 패널이 셸 배경보다 어둡게 파인 구조라
   면 사다리가 다른 테마와 반대로 간다(canvas 가 가장 밝다).
   포커스 링은 CRT 노랑 3px — 두께를 올리는 건 허용된다(규약 1 참고). */
.brl-theme-arcade {
    --brl-surface-canvas:   var(--brl-shell-85);
    --brl-surface-panel:    #1b1b24;
    --brl-surface-raised:   #262633;
    --brl-surface-highest:  #30303f;
    --brl-surface-overlay:  #262633;

    --brl-text-strong:    #ffffff;
    --brl-text-default:   #cfcfe2;
    --brl-text-muted:     #a9a9c4;
    --brl-text-subtle:    #9e9eb8;
    --brl-text-disabled:  #7d7d99;

    --brl-border-subtle:      #30303f;
    --brl-border-default:     #3a3a4a;
    --brl-border-strong:      #4a4a5f;
    --brl-border-interactive: #7d7d99;
    --brl-divider:            #3a3a4a;
    --brl-divider-strong:     #4a4a5f;

    --brl-action-primary:         var(--brl-cyan-40);
    --brl-action-primary-hover:   var(--brl-cyan-30);
    --brl-action-primary-pressed: var(--brl-cyan-50);
    --brl-text-on-action:         var(--brl-cyan-95);
    --brl-link:                   var(--brl-cyan-40);
    --brl-link-hover:             var(--brl-cyan-30);

    --brl-focus-color: var(--brl-crt-yellow);
    --brl-focus-width: 3px;
}

/* mystic — 타로. 검정에서 자주색으로 넘어가는 바탕에 양피지색 글씨.
   화면 대부분이 카드 이미지라 UI 색은 적다. 면은 거의 검정이어서 대비 여유가 크다. */
.brl-theme-mystic {
    --brl-surface-canvas:   #14001f;
    --brl-surface-panel:    #220033;
    --brl-surface-raised:   #2c0442;
    --brl-surface-highest:  #370a50;
    --brl-surface-overlay:  #220033;

    --brl-text-strong:    #ffffff;
    --brl-text-default:   #ece7db;
    --brl-text-muted:     #c9c4b8;   /* 양피지 */
    --brl-text-subtle:    #a49e90;
    --brl-text-disabled:  #6f6a5e;
    --brl-text-on-action: #14001f;

    --brl-border-subtle:      #2c0442;
    --brl-border-default:     #3d1258;
    --brl-border-strong:      #55246f;
    --brl-border-interactive: #8a7fa0;
    --brl-divider:            #3d1258;
    --brl-divider-strong:     #55246f;

    --brl-action-primary:         #c9a45a;   /* 청동 */
    --brl-action-primary-hover:   #ddbd7d;
    --brl-action-primary-pressed: #a8853f;
    --brl-link:                   #ddbd7d;
    --brl-link-hover:             #f0d9a6;
    --brl-focus-color:            #ddbd7d;
}

/* paper — 계산기. 유일한 라이트 테마. 서류 봉투 크림색 종이 + 관인 청람색. */
.brl-theme-paper {
    --brl-surface-canvas:   #f5f1e8;
    --brl-surface-panel:    #fbf9f3;
    --brl-surface-raised:   #ffffff;
    --brl-surface-highest:   #f1ede2;
    --brl-surface-overlay:  #ffffff;
    --brl-surface-disabled: #e8e3d6;

    --brl-text-strong:    #1c1a17;
    --brl-text-default:   #1c1a17;
    --brl-text-muted:     #57534a;
    /* 원래 #8a8578 은 종이 위 3.5:1 로 본문 하한 미달. 종이 톤은 유지하고 4.7:1 로. */
    --brl-text-subtle:    #6e695d;
    --brl-text-disabled:  #8a8578;
    --brl-text-on-action: #ffffff;

    --brl-border-subtle:      #ded7c5;
    --brl-border-default:     #c9c1ad;
    --brl-border-strong:      #a89e86;
    --brl-border-interactive: #8a8172;
    --brl-divider:            #c9c1ad;
    --brl-divider-strong:     #56514444;

    --brl-action-primary:         #1f3a5f;
    --brl-action-primary-hover:   #2b4d7a;
    --brl-action-primary-pressed: #16293f;
    --brl-link:                   #1f3a5f;
    --brl-link-hover:             #2b4d7a;
    --brl-focus-color:            #1f3a5f;

    --brl-status-success:         #1d6b3f;
    --brl-status-success-surface: #e4f0e8;
    --brl-status-danger:          #a5341f;
    --brl-status-danger-surface:  #f7e6e1;
    --brl-status-warning:         #8a5c00;
    --brl-status-warning-surface: #fff3db;
    --brl-status-info:            #1f3a5f;
    --brl-status-info-surface:    #eef1f6;

    --brl-shadow-sm: 0 1px 2px #56514426;
    --brl-shadow-md: 0 4px 12px #5651442e;
    --brl-shadow-lg: 0 12px 32px #56514440;
}


/* =============================================================================
   3층 · 불변 규약
   테마가 무엇이든, 페이지가 어떤 컨셉이든 여기 규칙은 그대로 걸린다.
   "디자인은 달라도 쓰기 불편하면 안 된다"를 코드로 강제하는 자리.
   ============================================================================= */

/* ---- 규약 1 · 키보드 포커스는 언제나 보인다 --------------------------------
   페이지 8곳이 각자 `outline: none` 으로 포커스 링을 지워놨었다. 마우스로 쓰면
   티가 안 나지만 키보드로 탐색하면 지금 어디에 있는지 알 수 없게 된다.
   그래서 링을 지우는 것 자체를 !important 로 막고, 색(--brl-focus-color)과
   두께(--brl-focus-width)는 테마가 바꿀 수 있게 열어뒀다.
   두께는 올리는 것만 허용한다 — 2px 아래로 내리면 규약을 어기는 것이다.
   (로또의 arcade 테마가 3px 노랑으로 올려 쓰는 예다)
   :where() 로 감싼 건 이 규칙이 다른 스타일의 우선순위를 흔들지 않게 하려는 것. */
:where(a[href], area, button, input, select, textarea, summary, iframe, [tabindex], [contenteditable="true"]):focus-visible {
    outline: var(--brl-focus-width) solid var(--brl-focus-color) !important;
    outline-offset: var(--brl-focus-offset) !important;
}

/* 마우스 클릭으로 잡힌 포커스에는 링을 띄우지 않는다(:focus-visible 가 아닌 경우).
   페이지가 `:focus { outline: none }` 을 따로 쓸 이유를 없애준다. */
:where(a[href], button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

/* ---- 규약 2 · 모션은 끌 수 있어야 한다 -------------------------------------
   전정기관 이상이 있으면 큰 화면 전환이 어지럼증을 유발한다. OS 설정을 켠
   사용자에게는 어느 페이지든 애니메이션이 멈춰야 한다. 지금은 interval 과
   lotto 만 이걸 지키고 있었다.
   0 이 아니라 1ms 로 두는 건, 완료 이벤트(transitionend)에 기대는 스크립트가
   멈춰버리는 걸 막기 위해서다. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 규약 3 · 못 쓰는 것은 못 쓰게 보인다 ---------------------------------- */
:where(button, input, select, textarea, [role="button"])[disabled],
:where([aria-disabled="true"]) {
    cursor: not-allowed;
}

/* ---- 규약 4 · 모바일에서 입력하면 화면이 확대되지 않는다 --------------------
   iOS 사파리는 글자 16px 미만인 입력칸에 포커스가 가면 화면을 강제로 확대한다.
   사용자가 손으로 되돌려야 해서, 입력이 잦은 도구 페이지에서 특히 성가시다.
   페이지들이 이미 13~14px 로 입력칸을 잡아놨기 때문에, 우선순위로는 이길 수
   없어 !important 로 하한을 건다. 터치 기기에서만 걸리므로 데스크톱 조판은
   그대로다. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

/* ---- 규약 5 · 손가락으로 누를 것은 충분히 크다 -----------------------------
   KRDS 와 WCAG 2.5.8 의 최소 타깃(44px) 기준.

   전역으로 걸지 않는 이유: 눌리는 영역을 넓히면 색상 팔레트 격자처럼 촘촘한
   UI 에서 옆 버튼의 클릭을 가로챈다. 조작성을 지키려다 반대로 망가뜨리는 셈이라,
   시스템이 그린 버튼(.brl-btn)에는 기본으로 걸고, 페이지가 직접 그린 버튼에는
   `.brl-hit` 로 붙이게 했다.

   보이는 크기는 건드리지 않고 가상요소로 눌리는 영역만 넓힌다. */
@media (pointer: coarse) {
    .brl-btn:not([data-brl-dense]),
    .brl-hit {
        position: relative;
    }
    .brl-btn:not([data-brl-dense])::after,
    .brl-hit::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 100%;
        height: 100%;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---- 규약 6 · 선택 영역과 탭 하이라이트는 보인다 ---------------------------
   reset.css 가 -webkit-tap-highlight-color 를 지워놔서 모바일에서 탭 피드백이
   전혀 없다. 눌렸는지 알 수 없으면 같은 버튼을 두 번 누르게 된다. */
::selection {
    background: var(--brl-action-primary);
    color: var(--brl-text-on-action);
}
:where(button, [role="button"], a[href]):active {
    -webkit-tap-highlight-color: var(--brl-alpha-white-10);
}

/* ---- 규약 7 · 앵커로 이동해도 제목이 헤더에 가리지 않는다 ------------------ */
:where(h1, h2, h3, h4, [id]) {
    scroll-margin-top: var(--brl-space-8);
}

/* ---- 규약 8 · 스크린리더 전용 텍스트 --------------------------------------- */
.brl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 평소엔 숨어 있다가 탭으로 포커스가 오면 나타나는 "본문 바로가기" 링크용 */
.brl-sr-only:focus-visible {
    position: fixed;
    top: var(--brl-space-4);
    left: var(--brl-space-4);
    z-index: var(--brl-z-toast);
    width: auto;
    height: auto;
    margin: 0;
    padding: var(--brl-pad-4) var(--brl-pad-6);
    clip-path: none;
    border-radius: var(--brl-radius-lg);
    background: var(--brl-surface-overlay);
    color: var(--brl-text-strong);
    font-size: var(--brl-text-body-s);
    font-weight: var(--brl-weight-bold);
}


/* =============================================================================
   폼 컨트롤 기본값
   :where() 로 감싸 우선순위를 0 으로 뒀다. 페이지가 자기 스타일을 쓰면 그게 이긴다.
   아무 스타일도 안 준 컨트롤이 "테두리가 안 보이는" 상태로 남지 않게 하는 안전망.
   ============================================================================= */

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    border: var(--brl-stroke-1) solid var(--brl-border-interactive);
    border-radius: var(--brl-radius-md);
    background: var(--brl-surface-highest);
    color: var(--brl-text-default);
    font-family: inherit;
}

:where(input, select, textarea)::placeholder {
    color: var(--brl-text-subtle);
    opacity: 1;   /* 파이어폭스는 기본 opacity 를 낮춰서 대비가 더 떨어진다 */
}


/* =============================================================================
   컴포넌트 프리미티브
   페이지가 자기 컨셉대로 버튼을 새로 그리는 건 자유다. 다만 매번 처음부터
   만들 필요는 없어서, 시스템에 맞는 기본형을 둔다.
   ============================================================================= */

.brl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--brl-space-3);
    min-height: var(--brl-control-md);
    padding: 0 var(--brl-pad-7);
    border: var(--brl-stroke-1) solid transparent;
    border-radius: var(--brl-radius-lg);
    background: var(--brl-action-secondary);
    color: var(--brl-text-default);
    font-family: inherit;
    font-size: var(--brl-text-body-s);
    font-weight: var(--brl-weight-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--brl-motion-fast) var(--brl-ease-standard),
                border-color var(--brl-motion-fast) var(--brl-ease-standard),
                color var(--brl-motion-fast) var(--brl-ease-standard);
}
.brl-btn:hover { background: var(--brl-action-secondary-hover); }
.brl-btn[disabled],
.brl-btn[aria-disabled="true"] {
    background: var(--brl-action-disabled);
    color: var(--brl-text-disabled);
}

.brl-btn--primary {
    background: var(--brl-action-primary);
    color: var(--brl-text-on-action);
}
.brl-btn--primary:hover { background: var(--brl-action-primary-hover); }
.brl-btn--primary:active { background: var(--brl-action-primary-pressed); }

.brl-btn--ghost {
    background: transparent;
    border-color: var(--brl-border-default);
}
.brl-btn--ghost:hover {
    background: var(--brl-action-secondary);
    border-color: var(--brl-border-strong);
}

.brl-btn--sm { min-height: var(--brl-control-sm); padding: 0 var(--brl-pad-5); font-size: var(--brl-text-body-xs); }
.brl-btn--lg { min-height: var(--brl-control-lg); padding: 0 var(--brl-pad-9); font-size: var(--brl-text-body-m); }

.brl-panel {
    border: var(--brl-stroke-1) solid var(--brl-border-default);
    border-radius: var(--brl-radius-xl);
    background: var(--brl-surface-panel);
    padding: var(--brl-pad-8);
}

.brl-input {
    width: 100%;
    min-height: var(--brl-control-md);
    padding: 0 var(--brl-pad-5);
    border: var(--brl-stroke-1) solid var(--brl-border-interactive);
    border-radius: var(--brl-radius-md);
    background: var(--brl-surface-highest);
    color: var(--brl-text-default);
    font-family: inherit;
    font-size: var(--brl-text-body-s);
}
.brl-input:hover { border-color: var(--brl-border-strong); }

/* 오류 상태는 색만으로 알리지 않는다. 색각 이상 사용자에게는 색 변화가 안 보인다.
   테두리 굵기까지 같이 바꿔서 색을 못 봐도 구분되게 한다. */
.brl-input[aria-invalid="true"] {
    border-color: var(--brl-status-danger);
    border-width: var(--brl-stroke-2);
}