/* 디자인 토큰 (2026-08 리디자인 → 2026-08-12 디자인 시스템)
   기준: docs/final/screen-design.md 「토큰 — 색 · 치수 · 다크 모드」
   눈으로 보는 카탈로그: /design (모바일 /m/design)

   ⚠ 색 · 간격 · 반지름 · 글자 크기 · 그림자 · 층을 더하거나 고칠 곳은 이 파일 한 곳이다.
     ui.css · stock.css · mobile.css · design.css 에는 var() 만 쓴다.

   왜 한 파일인가 — 화면이 PC(/stock/...)와 모바일(/m/...) 두 벌이고 각각 stock.css · mobile.css 를
   싣는다. 값을 그쪽에 적으면 같은 것이 두 벌이 되어 한쪽만 바뀐다(별 색이 #f6c23e ↔ #f0a93b 로
   갈라졌던 것이 그 사례다). 그래서 값은 여기, 규칙은 저기로 나눈다.

   다크 모드는 이 파일 아래 「다크 모드」 절의 :root[data-theme="dark"] 블록 하나가 값을 덮는다 —
   그것으로 되도록 색을 전부 여기 모아 두었다. 다른 파일에 색을 적으면 그 한 블록으로 못 덮는다. */
:root {

	/* ==== 바탕 · 글자 · 선 ==== */
	--bg: #f4f6fb;            /* 페이지 배경 */
	--surface: #ffffff;       /* 카드 · 표 · 입력 표면 */
	--ink: #1a2033;           /* 본문 글자 */
	/* 흐린 세 단은 **모두 WCAG AA(4.5:1)를 넘긴다**(2026-08-25). 예전 값은 흰 바탕에서
	   ink-2 4.57 · ink-3 3.06 · muted 1.94 라 열두 화면에서 1,472곳이 문턱 아래였다 —
	   특히 muted 는 비텍스트 문턱 3:1 도 못 넘으면서 「미수집」과 「0」을 가르는 표시를 칠했다.
	   ink-3 만 올리면 ink-2 보다 진해져 층이 뒤집히므로 셋을 함께 내렸다.
	   층은 6.6 · 5.3 · 4.5 로 벌어져 있어 눈으로도 갈린다 */
	--ink-2: #525c78;         /* 보조 글자 (6.6:1) */
	--ink-3: #616b88;         /* 라벨 · 흐린 글자 (5.3:1) */
	--muted: #6d7694;         /* 미수집 · 꺼진 별 · 못 누르는 것 (4.5:1) */
	--line: #e6eaf4;          /* 경계선 */
	--line-2: #dde2ee;        /* 입력 테두리 (line 보다 한 단 진하다) */
	--line-soft: #eef1f8;     /* 표 행 구분선 · 옅은 칩 배경 */
	--th: #f8f9fd;            /* 표 머리 배경 */
	--row-hover: #f6f8fe;     /* 표 행 호버 */
	/* 노랑처럼 **두 테마에서 다 밝은** 바탕 위의 글자. 사이드바(남색)와 같은 갈래로,
	   다크 블록에서 일부러 다시 정의하지 않는다 — 뒤집으면 밝은 바탕에 밝은 글자가 된다 */
	--ink-on-bright: #1a2033;
	/* 가로 · 세로로 밀리는 줄의 끝 그림자 — 「더 있다」를 알리는 자리다(--shadow 는 카드용이라 따로 둔다) */
	--fade: rgba(26, 32, 51, .20);

	/* ==== 브랜드 ==== */
	--brand: #3b6ef0;         /* 포인트 · 링크 · 주 버튼 */
	--brand-ink: #2c50b5;     /* 호버 · 눌림 */
	--brand-soft: #eaf0fe;    /* soft 버튼 배경 · 개수 칩 */
	--brand-soft-2: #dbe6fd;  /* soft 버튼 호버 */
	--brand-fill: rgba(59, 110, 240, .08);   /* 볼린저 띠 안 */
	--brand-line: rgba(59, 110, 240, .35);   /* 볼린저 띠 테두리 · 사이드바 드래그 핸들 */
	--focus: rgba(59, 110, 240, .25);        /* 입력 포커스 링 */
	--tap: rgba(59, 110, 240, .12);          /* 모바일 탭 하이라이트 */

	/* ==== 레일 셸 치수 (2026-09-23 · pc-redesign) ====
	   다른 프로젝트 messenger 의 웹 규격 §12.3 의 값에서 시작했다. 한 영역에 머물며 목록 ↔ 본문을
	   계속 오가는 화면의 규격이고, 이 서비스가 그렇다.
	   레일 60 → 80 · 열 264 → 280 은 2026-10-03(home-col-pins) — 메뉴 글자를 키우며 함께 넓혔다.
	   **레일은 같은 날 60 으로 되줄였다**(사용자 : 50 을 보고 「60px로」) — 키우려던 것은 목록 열의 글자였고,
	   오른쪽 열(280)이 같이 서는 종목 상세에서는 레일의 30px 이 그대로 차트 폭이다. 열 280 은 그대로다.
	   드래그는 `--col-w` 를 200~420 안에서 `<html>` inline 으로 바꾸고(stock.js 가 localStorage 에
	   남긴다), 접으면 `html.stock-col-fold` 가 `--col-now` 를 0 으로 바꾼다. **둘이 다른 변수여야**
	   inline 이 접기 클래스를 이기지 않는다.
	   `--track-w` 는 칸이 **있을 때만** 쓰인다(맥락 트랙이 없으면 격자 열 자체가 없다). */
	--rail-w: 60px;
	--col-w: 280px;           /* 목록 열 기본 폭 */
	--col-now: var(--col-w);  /* 지금 폭 — 격자가 읽는 값. 접기만 이것을 바꾼다 */
	--col-min: 200px;
	--col-max: 420px;
	--col-fold: 0px;          /* 접으면 열이 통째로 빠진다 — 펴는 길은 본면 머리의 단추 */
	--track-w: 280px;         /* 오른쪽 열 — 왼쪽 목록 열과 같은 폭. 1280 이상이면 펼친 채 선다(chart-side-panel) · 드래그는 240~560 */
	--track-fold: 40px;       /* 접으면 세로 띠로 남는다 — 얼굴 이름과 수가 거기 선다 */
	--track-now: var(--track-w);  /* 지금 폭 — 격자가 읽는 값. 접기(html.stock-track-fold)만 이것을 바꾼다 */

	/* ==== 사이드바 (남색 바탕이라 글자색이 따로 필요하다) ==== */
	--sidebar: #1e2a4a;
	--sidebar-ink: #ffffff;   /* 브랜드 · 활성 항목 글자 */
	--sidebar-ink-2: #d7deee; /* 평소 항목 글자 (#aab4d4 는 남색 위에서 흐렸다 — 대비 약 10:1) */

	/* ==== 등락 — 국내 관례(상승 빨강 · 하락 파랑) ====
	   표 · 배지 · 차트가 모두 이 두 색을 쓴다. 차트만 #e74a3b · #4e73df 를 따로 쓰면
	   같은 「상승」에 빨강이 두 개가 된다. */
	--up: #d64545;
	--down: #2563c9;
	--up-soft: #fdecec;       /* 매수 라벨 · 오류 배지 배경 */
	--down-soft: #e8f0fd;     /* 매도 라벨 배경 */
	/* 신호 칸의 방향 묶음 테두리 (2026-09-09 · MIN-292) — soft 배경만으로는 두 묶음의
	   경계가 안 보인다. 배경보다 한 단만 진하게 두어 칸이 시끄러워지지 않게 한다 */
	--up-line: rgba(214, 69, 69, .26);
	--down-line: rgba(37, 99, 201, .26);
	--up-fill: rgba(214, 69, 69, .55);   /* 거래량 상승 막대 */
	--down-fill: rgba(37, 99, 201, .55); /* 거래량 하락 막대 */
	/* 차트에서 흰 테두리를 두르고 캔들 위에 얹는 글자. --up 은 그 자리에서 묻힌다 */
	--up-ink: #c0392b;
	--down-ink: #2c50b5;

	/* ==== 상태 ==== */
	--ok: #128f62;            /* 수집중 · 지지선 글자 */
	--ok-soft: #e9f8f1;
	/* 박스권 순환의 하단 구역(rec-ui-polish) — 지지 자리라 지지선과 같은 초록이다. 글자는 본색,
	   박스 안 위치 막대의 구역 바탕은 옅은 값(`--ok-soft` 는 회색 막대 위에서 안 보인다) */
	--zone-lo: var(--ok);
	--zone-lo-soft: rgba(18, 143, 98, .26);
	--warn: #8a6d1a;          /* 주의 버튼 글자 */
	--warn-soft: #fff7e0;
	--warn-line: #f0dfa8;

	/* PER 눈금 다섯 단 — 저PER 탭 chip 의 **PER 숫자에 입히는 색**(per-chip-color).
	   등락색(빨강 · 파랑)을 안 쓰는 것은 「올랐다 · 내렸다」로 읽히지 않게 하려는 것이다.
	   **글자에 쓰는 색이라 다섯 단 다 바탕과 대비가 있어야 한다** — 연한 쪽을 그대로 두면
	   「20 이상」이 흰 바탕에서 안 읽힌다. 색은 보조이고 **값은 숫자가 말한다**.
	   구간은 PER 5 · 10 · 15 · 20 (`ValueModel::PER_LEVEL` 이 정본) */
	--per-lv1: #0a6b4f;       /* < 5 — 가장 싸다 (짙은 초록) */
	--per-lv2: #1f8a67;       /* 5 ~ 10 */
	--per-lv3: #5b7f73;       /* 10 ~ 15 (중립 청록) */
	--per-lv4: #96762a;       /* 15 ~ 20 */
	--per-lv5: #8a5a1e;       /* 20 + — 가장 비싸다 (짙은 황토) */
	--per-lv0: #98a0ab;       /* 표본이 모자라 못 낸 눈금 */

	/* ==== 차트 계열 색 ====
	   계열을 구별하기 위한 것이라 의미색과 나눠 둔다. 다만 「상승/하락의 뜻」이 있는 것
	   (캔들 · 거래량 · 매매 깃발 · 다이버전스 · 패턴 마커 · 저항선)은 var(--up)/var(--down) 을
	   가리켜 차트 안에 빨강 · 파랑이 하나씩만 있게 한다. */
	--c-ma5: var(--up);
	--c-ma20: #f6c23e;
	--c-ma60: #1cc88a;
	--c-ma120: var(--down);
	/* 이동평균은 **기간마다 색이 고정**이다(MIN-163) — 일봉에서 주봉으로 바꿔도 「1년」선은
	   같은 색이어야 「봉을 바꿔도 같은 이름 = 같은 시간」이 눈으로 보인다.
	   앞의 넷은 위의 `--c-ma5` · `--c-ma20` · `--c-ma60` · `--c-ma120` 을 가리키고, 긴 셋만 새로 둔다.
	   긴 선일수록 가라앉는 색인 것은 배경처럼 깔려야 짧은 선이 읽히기 때문이다 */
	--c-ma-1w: var(--c-ma5);
	--c-ma-1m: var(--c-ma20);
	--c-ma-3m: var(--c-ma60);
	--c-ma-6m: var(--c-ma120);
	--c-ma-1y: #0b7285;             /* 깊은 청록 — 볼린저 주봉(--c-bbw)은 점선이라 안 겹친다 */
	--c-ma-2y: #862e9c;             /* 깊은 보라 — 지그재그(--c-zz)보다 어둡다 */
	--c-ma-3y: #495057;             /* 슬레이트 — 월봉에만 나오는 가장 긴 선 */
	--c-gap: #adb5bd;               /* 결측 경계 세로 점선 */
	--c-gap-t: #6c757d;             /* 결측 경계 글자 */
	--c-bb-fill: var(--brand-fill);
	--c-bb-line: var(--brand-line);
	--c-bbw: #20c997;               /* 볼린저 주봉 점선 — 일봉 띠(brand) · 이동평균 넷과 겹치지 않는 청록 (MIN-154) */
	--c-bbm: #e83e8c;               /* 볼린저 월봉 점선 — 분홍 */
	--c-rsi: #6f42c1;
	--c-macd: var(--down);
	--c-signal: var(--c-ma20);
	--c-zz: var(--c-rsi);           /* 지그재그(엘리엇 파동) */
	--c-cb: #fd7e14;                /* 전환사채 발행 표시 */
	--c-cb-line: rgba(253, 126, 20, .45);
	--c-eb: #20c997;                /* 교환사채 발행 표시 */
	--c-eb-line: rgba(32, 201, 151, .5);
	--c-tl-s: var(--c-ma60);        /* 자동 지지선 */
	--c-tl-r: var(--up);            /* 자동 저항선 */
	--c-draw: #d63384;              /* 손으로 그은 선 */
	/* 내가 건 알림 규칙의 가로선 (MIN-165). **계열색을 주지 않고 UI 색을 준다** —
	   차트 팔레트가 이미 빽빽해 새 hue 를 밀어 넣으면 어느 계열과든 헷갈린다.
	   이것은 자료가 아니라 「내가 걸어 둔 것」이라 점선 + 라벨 칩으로 읽히면 된다 */
	--c-rule: #343a40;
	--c-rule-t: #ffffff;            /* 라벨 칩 안 글자 */
	--c-fib: #b98b12;               /* 피보나치 (수동 — 금색) */
	--c-fib-auto: #8e6cc3;          /* 피보나치 (자동 — 수동과 구분되는 보라) */
	--c-avg: var(--c-ma20);         /* 평균 취득 단가 */
	--c-avg-t: var(--c-fib);
	--c-havg: #f6993f;              /* 보유자 평단 (접수일 종가 추정치) */
	--c-havg-t: #d97b1f;
	/* 비교 다계열 — 여러 항목(통화 · 지수 …)을 한 차트에 겹칠 때의 순번 색.
	   기존 계열 색의 별칭이라 다크 블록이 원본을 바꾸면 저절로 따라온다.
	   순서는 색각이상 시뮬레이션(ΔE 전수 검사)으로 고른 것 — 바꾸려면 다시 검증할 것
	   (specs/2026-08-14-fx-compare-design.md) */
	--c-cmp-1: var(--c-ich-a);
	--c-cmp-2: var(--c-ich-t);
	--c-cmp-3: var(--c-ich-k);
	--c-cmp-4: var(--c-fib);
	--c-cmp-5: var(--c-ich-b);
	--c-cmp-6: var(--c-ich-g);
	/* 수급(투자자별 매매동향) 세 계열. 개인 · 외국인 · 기관을 한 그림에서 가르는 색이고,
	   등락이 아니라 **주체**를 뜻하므로 캔들의 빨강 · 파랑을 쓰지 않는다.
	   새 hex 를 만들지 않고 이미 쓰던 색을 가리키게 두어 팔레트를 늘리지 않았다 */
	--c-si-ind: var(--c-fib-auto);  /* 개인 */
	--c-si-frgn: var(--c-ich-k);    /* 외국인 */
	--c-si-orgn: var(--c-ich-g);    /* 기관 */
	/* 트리맵 「한 방향 축」의 색 (2026-08-21 · MIN-102).
	   공매도 비중 · 신용잔고율은 **0 부터 커지기만 하는 값**이라 ±로 갈리는 등락 · 순매수와
	   같은 눈금으로 그릴 수 없다 — 그쪽은 두 색이고 이쪽은 **한 색의 진하기**다.
	   빨강 · 파랑을 쓰지 않는 것은 「많으면 나쁘다」가 아니라 「많다」만 뜻하기 때문이고,
	   두 축이 서로 다른 색이어야 범례를 안 보고도 무엇을 보고 있는지 안다.
	   새 hex 를 만들지 않고 이미 쓰던 색을 가리킨다 */
	--c-ramp-short: var(--c-rsi);   /* 공매도 비중 — 보라 */
	--c-ramp-credit: var(--c-cb);   /* 신용잔고율 — 주황 */
	/* 일목균형표 : 전환선 빨강 · 기준선 파랑 · 후행 초록 · 스팬 A 주황 · 스팬 B 보라.
	   캔들의 빨강 · 파랑과 겹치지 않으려고 등락색을 쓰지 않는다 */
	--c-ich-t: #e03131;
	--c-ich-k: #1c62d6;
	--c-ich-g: #12a06b;
	--c-ich-a: #f08c00;
	--c-ich-b: #7048e8;
	--c-ich-up-fill: rgba(224, 49, 49, .10);
	--c-ich-dn-fill: rgba(28, 98, 214, .10);
	--c-ich-c-d: rgba(112, 72, 232, .35);   /* 구름 범례 견본 */
	/* 고전 차트 패턴 : 상승(쌍바닥 · 역H&S) 주황 · 하락(쌍봉 · H&S) 남색 */
	--c-pat-u: #d9480f;
	--c-pat-d: #3b5bdb;
	--c-pat-ut: #c23c0d;
	--c-pat-dt: #3450c4;
	/* 성질 영역(pattern-chart) : 박스권 순환 청록 · 계단 상승 보라 — 캔들(빨강 · 파랑) ·
	   이동평균 · 고전 패턴(주황 · 남색)과 안 겹치는 색. 박스는 캔들을 가리지 않게 옅게 칠한다 */
	--c-pbox: #0c8599;
	--c-pbox-fill: rgba(12, 133, 153, .10);
	/* 하단권 · 상단권 띠(박스의 위 · 아래 4분의 1) — 사용자 지적 「왜 하단에 있지 않는데
	   매칭된건지 알수 없다」에 차트가 답하는 자리다(pattern-live-check). 박스칠보다 짙게
	   두되 캔들은 비치게 한다 */
	--c-pbox-edge: rgba(12, 133, 153, .18);
	/* **하단 ±3% 띠** — 추천 · 목록 · 알림이 「하단」이라 부르는 그 자리다(cycle-low-box).
	   방문을 세는 자(몸통 아래 4분의 1 · `--c-pbox-edge`)와 **겹쳐 그리므로 더 짙어야** 한다 —
	   둘이 같은 짙기면 어느 것이 문턱인지 안 갈린다 */
	--c-pbox-band: rgba(12, 133, 153, .34);
	--c-pstair: #6741d9;
	/* 지금 되돌림 — 기준 고점에서 오늘 종가까지. 계단색과 한 벌이되 선이 가늘다 */
	--c-pstair-back: rgba(103, 65, 217, .55);
	/* **계단을 지키는 선**(stair-broken) — 직전 걸음의 저점. 빗각(통로)은 지나온 길이고
	   「깨지면 끝」이라 말할 수 있는 선은 이것 하나라, 계단 보라와 **다른 계열**이어야 한다.
	   주의색(`--warn`)이 이미 「여기서 멎는다」를 뜻하고 캔들 · 이동평균 어느 것과도 안 겹친다 */
	--c-pstair-guard: #c2410c;
	/* 겹쳐 본 지수 — 등락색도 이동평균색도 쓰지 않는다. 그 색들은 이미 뜻이 있어서
	   (빨강 상승 · 노랑 MA20) 지수에 주면 읽는 사람이 다른 것으로 받아들인다.
	   견줄 기준선이라 종목보다 먼저 눈에 들어오면 안 되므로 보조 글자색을 가리킨다 */
	--c-idx: var(--ink-2);
	--c-doji: #9aa1b3;              /* 도지 마커 */
	--c-axis: var(--ink-3);         /* 눈금 글자 · 십자선 */
	--c-line: var(--ink-2);         /* 종가 흐름 · 마지막 종가 */
	--tip-bg: rgba(255, 255, 255, .96);  /* 마우스 값 상자 */
	--dim: rgba(26, 32, 51, .45);        /* 바텀시트 뒤 어둠 */

	/* ==== 그밖의 의미색 ==== */
	--star: #f6c23e;          /* 관심 별 (모바일의 #f0a93b 을 여기로 통일) */

	/* ==== 간격 ====
	   지금 쓰는 값을 그대로 담았다. 새 규칙은 이 중에서 고른다 */
	--sp-1: 4px;
	--sp-2: 6px;
	--sp-3: 8px;
	--sp-4: 10px;
	--sp-5: 12px;
	--sp-6: 14px;
	--sp-7: 18px;
	--sp-8: 24px;

	/* ==== 모서리 ==== */
	--r-sm: 6px;              /* 배지 · 페이징 · 드롭다운 항목 */
	--r: 8px;                 /* 입력 · 버튼 */
	--r-lg: 10px;             /* 카드 · 표 래퍼 · 요약 카드 */
	--r-xl: 12px;             /* 모바일 카드 · 타일 */
	--r-2xl: 16px;            /* 바텀시트 위 모서리 */
	--r-pill: 999px;
	--r-round: 50%;           /* 점 · 원형 단추 */

	/* ==== 글자 크기 ====
	   역할로 이름을 붙였다. 반쪽 값(11.5 · 12.5 · 13.5)은 지금 화면 그대로 굳힌 것이다 */
	--fs-micro: 8px;          /* 모바일 축약 차트의 날짜 눈금 — 폭이 좁아 이보다 크면 겹친다 */
	--fs-nano: 10px;          /* 차트 안 라벨(파동 · 되돌림 · 평단) · 위젯 배지 */
	--fs-label: 11px;         /* 요약 카드 위줄 · 툴바 묶음 이름 */
	--fs-mini: 11.5px;        /* 배지 · 카드 부제 · 표 머리 · 건수 안내 */
	--fs-tiny: 12px;          /* 보조 글자 · 위젯 표 · 페이징 */
	--fs-cell: 12.5px;        /* 표 본문 · 버튼 · 드롭다운 · 검색줄 라벨 */
	--fs-body: 13px;          /* 본문 · 탭 · 구획 제목 */
	--fs-head: 13.5px;        /* 카드 제목 */
	--fs-sec: 15px;           /* 모바일 본문 · 모바일 구역 제목 */
	--fs-icon: 16px;          /* 아이콘 · 모바일 입력(16px 미만이면 iOS 가 화면을 확대한다) */
	--fs-title: 18px;         /* 화면 제목 (톱바) */
	--fs-value: 19px;         /* 요약 카드 값 */
	--fs-value-sm: 15px;      /* 요약 카드 값이 날짜일 때 — 19px 로는 YYYY-MM-DD 가 카드 폭을 넘긴다 */
	--fs-value-lg: 22px;      /* 모바일 타일 값 */

	/* ==== 검색줄 입력 폭 ====
	   검색어 칸이 화면마다 10 · 12 · 14 · 16rem 으로 갈려 있었다(2026-08-18 실측 — 34칸 중
	   14rem 이 19, 나머지가 제각각). 뜻이 있어 갈린 것이 아니라 손으로 적다 보니 갈린 것이라
	   기본을 하나 두고 좁게 · 넓게만 이름으로 남긴다. **뷰에 인라인 width 를 적지 않는다** */
	--w-input: 14rem;         /* 검색어 칸 기본 (회사명 / 종목코드) */
	--w-input-sm: 12rem;      /* 짧은 값 (매체명 · 분류) */
	--w-input-lg: 16rem;      /* 긴 값 (보유자명 · 회사명 전체) */
	--w-input-num: 6rem;      /* 숫자 범위 칸 (부채비율 이상 ~ 이하 · PBR) */

	/* ==== 그림자 ==== */
	--shadow: 0 1px 4px rgba(30, 42, 74, .08);     /* 카드 · 표 래퍼 */
	--shadow-pop: 0 2px 8px rgba(30, 42, 74, .12); /* 드롭다운 · 컨텍스트 메뉴 · 툴팁 */
	--shadow-fab: 0 4px 12px rgba(30, 42, 74, .20); /* 피드백 단추 */

	/* ==== 층 ====
	   숫자를 규칙마다 적으면 무엇이 무엇을 덮는지 알 수 없어 이름으로 둔다.
	   Bootstrap 모달(1055)보다 낮게 유지한다 */
	--z-handle: 20;           /* 사이드바 드래그 핸들 · 차트 마우스 값 상자 */
	--z-sticky: 30;           /* 모바일 상단바 · 하단 탭바 · 사이드바 접기 단추 · 차트 컨텍스트 메뉴 */
	--z-dim: 40;              /* 바텀시트 뒤 어둠 */
	--z-sheet: 41;            /* 바텀시트 */
	--z-pop: 1020;            /* 날짜 달력처럼 칸에 붙어 뜨는 것 — 표 머리 · 카드 위에 서고 피드백 단추 밑이다 */
	--z-fab: 1030;            /* 피드백 단추 */
	--z-dialog: 1060;         /* 확인 창 — Bootstrap 모달(1055) 위. 모달이 떠 있으면 그 안에 붙는다 */
	--z-toast: 1090;          /* 토스트 — 무엇이 떠 있든 맨 위 */

	/* ==== Bootstrap 다리 ====
	   Bootstrap 의 의미색을 우리 팔레트로 잇는다. bootstrap.css 가 먼저 실려 여기서 덮인다.

	   왜 필요한가 — 신호 배지 · 피드백 구분/상태 배지는 stock.js 의 공용 렌더러
	   (stockSignalBadge · stockFeedbackType · stockFeedbackStatus)가 Bootstrap 클래스
	   (badge bg-primary · bg-danger …)로 만든다. 그 유틸리티는 !important 로 박혀 있어
	   선택자로 덮으려면 !important 싸움이 되고, 클래스명을 바꾸면 JS·뷰 열한 곳을 고쳐야 한다.
	   Bootstrap 자신의 변수를 바꾸면 JS 를 한 줄도 안 고치고 팔레트 안으로 들어온다.

	   -rgb 짝이 필요한 것은 Bootstrap 이 rgba(var(--bs-*-rgb), 투명도) 로 쓰기 때문이다.
	   영향 범위는 .bg-* · .text-* · .border-* 유틸리티뿐이다 (.btn-* 은 색을 직접 적어 두어
	   stock.css 가 맡는다). 색을 고칠 때는 hex 와 -rgb 를 함께 고친다. */
	--bs-primary: var(--brand);
	--bs-primary-rgb: 59, 110, 240;
	--bs-danger: var(--up);
	--bs-danger-rgb: 214, 69, 69;
	--bs-info: var(--down);
	--bs-info-rgb: 37, 99, 201;
	--bs-success: var(--ok);
	--bs-success-rgb: 18, 143, 98;
	--bs-warning: var(--c-ma20);
	--bs-warning-rgb: 246, 194, 62;
	--bs-secondary: var(--ink-2);
	--bs-secondary-rgb: 107, 117, 147;
	--bs-light: var(--line-soft);
	--bs-light-rgb: 238, 241, 248;
	--bs-dark: var(--ink);
	--bs-dark-rgb: 26, 32, 51;
	--bs-body-color: var(--ink);
	--bs-body-bg: var(--surface);

	/* ==== 모바일 셸 치수 ====
	   모바일 셸 치수의 :root 블록도 이 파일 한 곳에 둔다 — :root 가 두 파일에 있으면
	   「토큰은 한 곳」이 깨진다 */
	--m-top: 52px;            /* 상단바 높이 */
	--m-tab: 58px;            /* 하단 탭바 높이 (safe-area 제외) */
	--m-pad: 14px;            /* 좌우 여백 */
	--m-tap: 44px;            /* 누를 수 있는 것의 최소 크기 — /m/design 의 「손가락으로 쓰는 화면」 규칙 */
	--m-btn: 48px;            /* 그 화면의 목적인 단추 (로그인 · 저장 · 보내기). 최소보다 한 단 크다 */
	--m-dot: 5px;             /* 일정 달력의 나라 점 (칸이 좁아 글자 칩 대신 쓴다) */
}

/* ── 모바일 본문 글자 눈금 (2026-08-26 · mobile-theme-and-scale) ────────────────
   눈금(`--fs-*`)은 PC · 모바일이 **한 벌**이다. 그것을 가르지 않으면서 모바일만 올리는 길이
   이것이다 — 커스텀 속성은 **물려받으므로** `.m-body` 에서 값만 다시 적으면 그 아래 `var()`
   가 전부 따라온다. 규칙은 한 줄도 안 늘어나고 PC 는 한 자도 안 바뀐다.

   왜 올리나 : 재 보니 12px 미만이 1,693건인데 그 가운데 `--fs-mini`(11.5px)가 **1,111건**,
   곧 카드 부제 · 배지 · 표 머리 — **모바일 본문의 대부분**이었다(mobile-fit-audit).
   PC 는 50~60cm 밖에서 보고 폰은 25~30cm 에서 본다지만, 그건 「더 크게 보인다」가 아니라
   **눈을 그만큼 가까이 대야 한다**는 뜻이다.

   **작은 쪽 넷만 한 단 올린다.** 차트 안 글자(`--fs-micro` 8px · `--fs-nano` 10px)는 그대로다 —
   그건 본문이 아니라 눈금이고, 키우면 좁은 폭에서 서로 겹친다(토큰 주석이 그렇게 적고 있다).
   `--fs-body`(13px) 위로는 이미 읽을 만해 안 건드린다 — 다 키우면 카드가 길어져
   한 화면에 들던 것이 안 든다 */
.m-body {
	--fs-label: 12px;    /* 11 — 요약 카드 위줄 · 하단 탭 이름 */
	--fs-mini: 12.5px;   /* 11.5 — 배지 · 카드 부제 · 표 머리 (가장 많다) */
	--fs-tiny: 13px;     /* 12 — 보조 글자 · 페이징 */
	--fs-cell: 13.5px;   /* 12.5 — 표 본문 · 드롭다운 */
}
/* `<small>` 은 부모의 0.875배라 **부모가 작으면 같이 작아진다** — 배지(12.5px) 안의
   `+6` · `-0` 이 10.9px 이었다. 비율은 남기되 바닥을 두어 12px 밑으로는 안 가게 한다 */
.m-body small { font-size: max(0.875em, var(--fs-label)); }

/* ==== 다크 모드 ====
   위 :root 의 값을 덮어쓰는 한 블록이다. 규칙(ui.css · stock.css · mobile.css)은 손대지 않는다 —
   그쪽이 var() 만 쓰기 때문에 여기서 값만 바꾸면 전부 따라온다.

   `data-theme` 은 서버가 <html> 에 찍는다(STOCK_THEME 쿠키). JS 로 켜면 밝은 화면이
   한 번 보였다가 어두워진다.

   무엇을 바꾸고 무엇을 두는가
     바꾼다 : 바탕 · 글자 · 선 · 표면처럼 「밝고 어두움」 자체인 것,
              그리고 밝은 바탕을 전제로 만든 옅은 배경들(--*-soft).
     둔다   : 뜻이 있는 색(등락 빨강 · 파랑, 관심 별 노랑, 차트 계열)의 **정체성**.
              다만 어두운 바탕에서 묻히지 않게 채도 · 밝기만 올린다.
     rgba 로 박아 둔 것들(--brand-fill · --focus · --up-fill …)은 var() 를 못 따라오므로
     여기서 다시 적는다. 이것을 빠뜨리면 다크에서 옛 파랑이 그대로 남는다. */
:root[data-theme="dark"] {

	/* ==== 바탕 · 글자 · 선 ==== */
	--bg: #12151f;
	--surface: #1a1f2e;
	--ink: #e4e8f2;
	--ink-2: #a4adc4;
	--ink-3: #8890a8;
	--muted: #828ba6;        /* 카드 위 4.8:1 — #5c6479 로 내리면 2.78 이라 문턱 아래다 */
	--line: #2a3145;
	--line-2: #353d54;
	--line-soft: #232a3b;
	--th: #1f2534;
	--row-hover: #232b3d;

	/* ==== 브랜드 — 어두운 바탕에서 #3b6ef0 은 가라앉아 한 단 밝게 올린다 ==== */
	--brand: #5b8cff;
	--brand-ink: #86a9ff;
	--brand-soft: #1e2a45;
	--brand-soft-2: #263355;
	--brand-fill: rgba(91, 140, 255, .12);
	--brand-line: rgba(91, 140, 255, .40);
	--focus: rgba(91, 140, 255, .35);
	--tap: rgba(91, 140, 255, .18);

	/* ==== 사이드바 — 원래 어두운 자리라 바탕과 구분될 만큼만 손본다 ==== */
	--sidebar: #171d2e;
	--sidebar-ink: #ffffff;
	--sidebar-ink-2: #ccd5ea;

	/* ==== 등락 — 빨강 · 파랑은 그대로 두되 어두운 바탕에서 읽히게 밝힌다 ==== */
	--up: #ff6b6b;
	--down: #6b9dff;
	--up-soft: #35191c;
	--down-soft: #182541;
	--up-line: rgba(255, 107, 107, .30);
	--down-line: rgba(107, 157, 255, .30);
	--up-fill: rgba(255, 107, 107, .50);
	--down-fill: rgba(107, 157, 255, .50);
	/* 밝은 화면에서는 흰 테두리를 두르고 캔들 위에 얹는 글자였다. 어두운 화면에서는
	   본색보다 더 밝아야 캔들 위에서 읽힌다 */
	--up-ink: #ff8f8f;
	--down-ink: #9ec0ff;

	/* ==== 상태 ==== */
	--ok: #35d6a4;
	--ok-soft: #14302a;
	--zone-lo-soft: rgba(53, 214, 164, .26);
	--warn: #e0be5e;
	--fade: rgba(0, 0, 0, .6);
	--warn-soft: #302a17;
	--warn-line: #4a4126;

	/* PER 눈금 — 어두운 바탕에서는 짙은 색이 가라앉는다. 글자에 쓰는 색이라 다섯 단을 통째로 올린다 */
	--per-lv1: #35d6a4;
	--per-lv2: #4fc79b;
	--per-lv3: #93b3a8;
	--per-lv4: #d3b45e;
	--per-lv5: #d9954a;
	--per-lv0: #79818f;

	/* ==== 차트 ====
	   var() 를 가리키는 것(--c-ma5 · --c-ma120 · --c-bb-* · --c-idx …)은 위에서 바뀐 값을
	   저절로 따라오므로 다시 적지 않는다. 어두운 바탕에서 가라앉는 것만 손본다 */
	--c-ma20: #ffd45e;
	--c-ma60: #35d6a4;
	/* 긴 이동평균 셋은 어두운 바탕에서 가라앉아 안 보인다 — 밝기만 올린다 */
	--c-ma-1y: #3bc9db;
	--c-ma-2y: #da77f2;
	--c-ma-3y: #adb5bd;
	--c-gap: #5a6169;
	--c-gap-t: #8b949e;
	--c-bbw: #3ee0c0;
	--c-bbm: #ff6fb0;
	--c-rsi: #a98aff;
	--c-cb: #ff9640;
	--c-cb-line: rgba(255, 150, 64, .50);
	--c-eb: #3ee0b0;
	--c-eb-line: rgba(62, 224, 176, .55);
	--c-draw: #ff5fa8;
	--c-rule: #ced4da;
	--c-rule-t: #16181d;
	--c-fib: #dcb43c;
	--c-fib-auto: #b28cff;
	--c-havg: #ffab5e;
	--c-havg-t: #ffc78a;
	--c-doji: #78819a;
	--c-ich-t: #ff6b6b;
	--c-ich-k: #6b9dff;
	--c-ich-g: #35d6a4;
	--c-ich-a: #ffa53d;
	--c-ich-b: #a98aff;
	--c-ich-up-fill: rgba(255, 107, 107, .14);
	--c-ich-dn-fill: rgba(107, 157, 255, .14);
	--c-ich-c-d: rgba(169, 138, 255, .40);
	--c-pat-u: #ff8a4c;
	--c-pat-d: #7b95ff;
	--c-pat-ut: #ffa070;
	--c-pat-dt: #9db0ff;
	--c-pbox: #3bc9db;
	--c-pbox-fill: rgba(59, 201, 219, .14);
	--c-pbox-edge: rgba(59, 201, 219, .24);
	--c-pstair: #b197fc;
	--c-pstair-back: rgba(177, 151, 252, .60);
	--c-pstair-guard: #ff922b;
	/* 값 상자 · 시트 뒤 어둠 — 흰색을 그대로 두면 다크에서 눈이 부시다 */
	--tip-bg: rgba(26, 31, 46, .96);
	--dim: rgba(0, 0, 0, .62);

	/* ==== 그밖의 의미색 ==== */
	--star: #ffd45e;

	/* ==== Bootstrap 다리 ====
	   badge bg-* 를 만드는 stock.js 를 고치지 않고 팔레트 안에 들어오게 하는 자리다.
	   여기를 빠뜨리면 다크에서 배지만 밝은 화면 색으로 남는다 */
	--bs-primary: var(--brand);
	--bs-primary-rgb: 91, 140, 255;
	--bs-danger: var(--up);
	--bs-danger-rgb: 255, 107, 107;
	--bs-success: var(--ok);
	--bs-success-rgb: 53, 214, 164;
	--bs-warning: var(--warn);
	--bs-warning-rgb: 224, 190, 94;
	--bs-info: var(--down);
	--bs-info-rgb: 107, 157, 255;
	--bs-secondary: var(--ink-2);
	--bs-secondary-rgb: 164, 173, 196;
	/* 이 두 줄이 없으면 `badge bg-light text-dark` 가 **밝은 바탕 + 밝은 글자**가 된다 —
	   .bg-light 는 --bs-light-rgb 를 쓰는데 그것만 라이트 값으로 남고 .text-dark 는
	   --bs-dark 를 따라 뒤집히기 때문이다(2026-08-25 실측 대비 1.07:1 · 알림 배지가 안 보였다).
	   위 「빠뜨리면 배지만 밝은 화면 색으로 남는다」가 가리키는 바로 그 자리다 */
	--bs-light: var(--line-soft);
	--bs-light-rgb: 35, 42, 59;
	--bs-dark: var(--ink);
	--bs-dark-rgb: 228, 232, 242;
	--bs-body-color: var(--ink);
	--bs-body-bg: var(--surface);
}