/* tws_reboot 팔레트 시스템 (신규 파일 — 원본 css 4종은 무수정 유지)
   html[data-theme]가 없으면 원본 그대로 OS 라이트/다크(auto)를 따른다.
   data-theme 지정 시 원본 변수 세트를 통째로 덮어쓰고,
   html[data-ui="light|dark"]가 이미지 스왑(-dark.svg)을 담당한다 (JS가 함께 세팅).
   커스텀 팔레트 출처: Nord, Dracula, Gruvbox, Solarized, Catppuccin,
   Tokyo Night, Rosé Pine, Everforest, Kanagawa, GitHub Primer. */
@charset "utf-8";

/* ══ 팔레트를 바꾸는 순간만 — 화면 전체가 함께 페이드한다 ═══════════════════════
   `data-theme`를 갈면 색이 한 프레임에 튄다. 그런데 원본 CSS가 몇몇 요소에 걸어 둔
   `transition: all`(미끄러지는 알약·노브용)이 **색까지 딸고 가서**, 화면은 이미 다
   바뀌었는데 노란 알약만 200ms 동안 진흙색을 지나며 남았다(2026-09-01 실측:
   #twsTimeBtn 254,191,2 → 242,186,15 → … → 130,138,127).
   전부 즉시로 맞추는 대신 **전부 함께 페이드하게** 한다(2026-09-01 지시).

   ── 왜 `!important`인가 ─────────────────────────────────────────────────────
   원본의 `transition: all 0.2s`를 이겨야 하는데 그 규칙의 특이도가 더 높다
   (`.tws-info-3>div:nth-child(2)` 같은 것들). 이 파일은 색의 소유자이고,
   이 규칙은 **속성 하나가 켜져 있는 동안만** 존재한다 — layout.css의 `!important`가
   금지인 것과 다른 사정이다(거기서는 JS 인라인이 남았다는 신호다).

   ── 왜 축약형이 아니라 longhand인가 ────────────────────────────────────────
   `transition: …`으로 쓰면 원본이 걸어 둔 `left`·`transform` 전환까지 지워져 알약이
   미끄러지지 않는다. 색 속성만 나열해 그 창 동안 색만 가져간다.

   ⚠ **첫 배치에는 안 걸린다** — `applyTheme`이 첫 호출에서 이 속성을 안 붙인다.
   ⚠ 이 규칙은 `*`라 **켜져 있는 동안 화면의 모든 요소가 전환 대상**이다. 그래서
   팔레트를 바꾸는 그 순간에만 켜고 곧바로 끈다(theme.ts). 타건 경로에는 없다.     */
/* ⚠ `:root`를 **따로 적는다.** `*`는 자손만 잡으므로 `html` 자신은 안 걸리고,
   그러면 페이지 배경만 혼자 즉시 바뀐다(2026-09-01 실측: 배경 1단계 · 나머지 9단계). */
:root[data-theme-fading],
:root[data-theme-fading] * {
	/* ⚠ **팔레트로 실제로 변하는 것만 적는다.** box-shadow는 이 앱에서 전부 고정 검정이고
	   (`twsButton`의 오프셋 그림자·노브의 inset), svg는 배경 이미지라 fill/stroke가 없다 —
	   넣어 봐야 3,000개 요소에서 헛돌기만 한다(2026-09-01 실측: 최대 프레임 87 → 아래 참고). */
	transition-property: background-color, color, border-color !important;
	transition-duration: 200ms !important;
	transition-timing-function: ease-out !important;
}

/* ── 라이트 고정 (원본 :root 값 복사) ── */
:root[data-theme="light"] {
	--bg: #e6e6e1; --timebg: #dbdddc; --timebtn: #febf02; --timeclr: #181818;
	--pangbox: #ccc; --pangbtn: #f4f5f4; --font: #181818; --font2: #ffffff;
	--boxbg: #f4f4f4; --output: #181818; --input: #444444; --caret: #f2bf01;
	--gb: #dbdddc; --gbs: #f2bf01; --npt: #898989; --button: #dbdddc;
	--wrong: #f6646d; --arrow: 0.5rem solid #000000; --vkb: #a1a19d;
}

/* ── 다크 고정 (원본 다크 값 복사) ── */
:root[data-theme="dark"] {
	--bg: #222222; --timebg: #222222; --timebtn: #63a080; --timeclr: #fafafa;
	--pangbox: #222; --pangbtn: #cecece; --font: #cecece; --font2: #f2bf01;
	--boxbg: #222222; --output: #fff; --input: #cecece; --caret: #63a080;
	--gb: #8b8b8b; --gbs: #63a080; --npt: #575757; --button: #858585;
	--wrong: #f6646d; --arrow: 0.5rem solid #aaaeb7; --vkb: #131415;
}

/* ── 세피아 (서재 — 라이트 기반) ── */
:root[data-theme="sepia"] {
	--bg: #e8e0d0; --timebg: #ddd3c0; --timebtn: #c98d4b; --timeclr: #2e2a20;
	--pangbox: #cfc5b0; --pangbtn: #f4ede0; --font: #3a3226; --font2: #f6efe1;
	--boxbg: #f6efe1; --output: #3a3226; --input: #55503f; --caret: #b5803c;
	--gb: #d6cbb6; --gbs: #b5803c; --npt: #97917f; --button: #d6cbb6;
	--wrong: #d8574f; --arrow: 0.5rem solid #3a3226; --vkb: #b9ae99;
}

/* ── 민트 (라이트 기반) ── */
:root[data-theme="mint"] {
	--bg: #dfeae4; --timebg: #d3e0d9; --timebtn: #63a080; --timeclr: #16241d;
	--pangbox: #bfd0c7; --pangbtn: #f4f8f6; --font: #1f3129; --font2: #f2f7f4;
	--boxbg: #f2f7f4; --output: #1f3129; --input: #37493f; --caret: #4b8a6a;
	--gb: #c9d8d0; --gbs: #4b8a6a; --npt: #8fa39a; --button: #c9d8d0;
	--wrong: #f6646d; --arrow: 0.5rem solid #1f3129; --vkb: #a9bcb2;
}

/* ── 미드나잇 (다크 기반) ── */
:root[data-theme="midnight"] {
	--bg: #101623; --timebg: #101623; --timebtn: #4f74b3; --timeclr: #e6ecf7;
	--pangbox: #1b2438; --pangbtn: #c3cee3; --font: #c3cee3; --font2: #f2bf01;
	--boxbg: #161e30; --output: #e6ecf7; --input: #b6c2d9; --caret: #4f74b3;
	--gb: #2a3550; --gbs: #4f74b3; --npt: #46536e; --button: #55648a;
	--wrong: #f6646d; --arrow: 0.5rem solid #aab6cf; --vkb: #0b101c;
}

/* ── Nord ── */
:root[data-theme="nord"] {
	--bg: #2e3440; --timebg: #3b4252; --timebtn: #88c0d0; --timeclr: #2e3440;
	--pangbox: #434c5e; --pangbtn: #d8dee9; --font: #d8dee9; --font2: #88c0d0;
	--boxbg: #3b4252; --output: #eceff4; --input: #d8dee9; --caret: #88c0d0;
	--gb: #4c566a; --gbs: #88c0d0; --npt: #616e88; --button: #4c566a;
	--wrong: #bf616a; --arrow: 0.5rem solid #d8dee9; --vkb: #242933;
}

/* ── Dracula ── */
:root[data-theme="dracula"] {
	--bg: #282a36; --timebg: #343746; --timebtn: #bd93f9; --timeclr: #282a36;
	--pangbox: #44475a; --pangbtn: #f8f8f2; --font: #f8f8f2; --font2: #bd93f9;
	--boxbg: #343746; --output: #f8f8f2; --input: #e0e0da; --caret: #bd93f9;
	--gb: #44475a; --gbs: #bd93f9; --npt: #6272a4; --button: #44475a;
	--wrong: #ff5555; --arrow: 0.5rem solid #f8f8f2; --vkb: #21222c;
}

/* ── Gruvbox (dark) ── */
:root[data-theme="gruvbox"] {
	--bg: #282828; --timebg: #3c3836; --timebtn: #fabd2f; --timeclr: #282828;
	--pangbox: #504945; --pangbtn: #ebdbb2; --font: #ebdbb2; --font2: #fabd2f;
	--boxbg: #3c3836; --output: #fbf1c7; --input: #ebdbb2; --caret: #fabd2f;
	--gb: #504945; --gbs: #fabd2f; --npt: #928374; --button: #504945;
	--wrong: #fb4934; --arrow: 0.5rem solid #ebdbb2; --vkb: #1d2021;
}

/* ── Gruvbox light ── */
:root[data-theme="gruvbox-light"] {
	--bg: #fbf1c7; --timebg: #f2e5bc; --timebtn: #d79921; --timeclr: #3c3836;
	--pangbox: #d5c4a1; --pangbtn: #fbf1c7; --font: #3c3836; --font2: #d79921;
	--boxbg: #f2e5bc; --output: #282828; --input: #3c3836; --caret: #d79921;
	--gb: #d5c4a1; --gbs: #d79921; --npt: #928374; --button: #d5c4a1;
	--wrong: #cc241d; --arrow: 0.5rem solid #3c3836; --vkb: #d5c4a1;
}

/* ── Solarized (dark) ── */
:root[data-theme="solarized"] {
	--bg: #002b36; --timebg: #073642; --timebtn: #b58900; --timeclr: #002b36;
	--pangbox: #0e4b5a; --pangbtn: #93a1a1; --font: #93a1a1; --font2: #b58900;
	--boxbg: #073642; --output: #eee8d5; --input: #93a1a1; --caret: #b58900;
	--gb: #0e4b5a; --gbs: #b58900; --npt: #586e75; --button: #0e4b5a;
	--wrong: #dc322f; --arrow: 0.5rem solid #93a1a1; --vkb: #00212b;
}

/* ── Solarized light ── */
:root[data-theme="solarized-light"] {
	--bg: #fdf6e3; --timebg: #eee8d5; --timebtn: #b58900; --timeclr: #fdf6e3;
	--pangbox: #d9d2c2; --pangbtn: #fdf6e3; --font: #586e75; --font2: #b58900;
	--boxbg: #eee8d5; --output: #073642; --input: #586e75; --caret: #b58900;
	--gb: #d9d2c2; --gbs: #b58900; --npt: #93a1a1; --button: #d9d2c2;
	--wrong: #dc322f; --arrow: 0.5rem solid #586e75; --vkb: #d5cdb4;
}

/* ── Catppuccin Mocha ── */
:root[data-theme="mocha"] {
	--bg: #1e1e2e; --timebg: #313244; --timebtn: #cba6f7; --timeclr: #1e1e2e;
	--pangbox: #45475a; --pangbtn: #cdd6f4; --font: #cdd6f4; --font2: #cba6f7;
	--boxbg: #313244; --output: #f5f5f7; --input: #cdd6f4; --caret: #cba6f7;
	--gb: #45475a; --gbs: #cba6f7; --npt: #6c7086; --button: #45475a;
	--wrong: #f38ba8; --arrow: 0.5rem solid #cdd6f4; --vkb: #181825;
}

/* ── Catppuccin Latte ── */
:root[data-theme="latte"] {
	--bg: #eff1f5; --timebg: #e6e9ef; --timebtn: #8839ef; --timeclr: #eff1f5;
	--pangbox: #ccd0da; --pangbtn: #eff1f5; --font: #4c4f69; --font2: #8839ef;
	--boxbg: #e6e9ef; --output: #4c4f69; --input: #5c5f77; --caret: #8839ef;
	--gb: #ccd0da; --gbs: #8839ef; --npt: #8c8fa1; --button: #ccd0da;
	--wrong: #d20f39; --arrow: 0.5rem solid #4c4f69; --vkb: #bcc0cc;
}

/* ── Tokyo Night ── */
:root[data-theme="tokyonight"] {
	--bg: #1a1b26; --timebg: #24283b; --timebtn: #7aa2f7; --timeclr: #1a1b26;
	--pangbox: #3b4261; --pangbtn: #c0caf5; --font: #c0caf5; --font2: #7aa2f7;
	--boxbg: #24283b; --output: #e2e8ff; --input: #c0caf5; --caret: #7aa2f7;
	--gb: #3b4261; --gbs: #7aa2f7; --npt: #565f89; --button: #3b4261;
	--wrong: #f7768e; --arrow: 0.5rem solid #c0caf5; --vkb: #16161e;
}

/* ── Rosé Pine ── */
:root[data-theme="rosepine"] {
	--bg: #191724; --timebg: #26233a; --timebtn: #ebbcba; --timeclr: #191724;
	--pangbox: #403d52; --pangbtn: #e0def4; --font: #e0def4; --font2: #ebbcba;
	--boxbg: #26233a; --output: #f2f0fc; --input: #e0def4; --caret: #ebbcba;
	--gb: #403d52; --gbs: #ebbcba; --npt: #6e6a86; --button: #403d52;
	--wrong: #eb6f92; --arrow: 0.5rem solid #e0def4; --vkb: #12101a;
}

/* ── Rosé Pine Dawn ── */
:root[data-theme="dawn"] {
	--bg: #faf4ed; --timebg: #fffaf3; --timebtn: #d7827e; --timeclr: #fffaf3;
	--pangbox: #dfdad9; --pangbtn: #fffaf3; --font: #575279; --font2: #d7827e;
	--boxbg: #fffaf3; --output: #464261; --input: #575279; --caret: #d7827e;
	--gb: #dfdad9; --gbs: #d7827e; --npt: #9893a5; --button: #dfdad9;
	--wrong: #b4637a; --arrow: 0.5rem solid #575279; --vkb: #cecacd;
}

/* ── Everforest ── */
:root[data-theme="everforest"] {
	--bg: #2d353b; --timebg: #343f44; --timebtn: #a7c080; --timeclr: #2d353b;
	--pangbox: #475258; --pangbtn: #d3c6aa; --font: #d3c6aa; --font2: #a7c080;
	--boxbg: #343f44; --output: #e9e2cc; --input: #d3c6aa; --caret: #a7c080;
	--gb: #475258; --gbs: #a7c080; --npt: #859289; --button: #475258;
	--wrong: #e67e80; --arrow: 0.5rem solid #d3c6aa; --vkb: #232a2e;
}

/* ── Kanagawa ── */
:root[data-theme="kanagawa"] {
	--bg: #1f1f28; --timebg: #2a2a37; --timebtn: #7e9cd8; --timeclr: #1f1f28;
	--pangbox: #363646; --pangbtn: #dcd7ba; --font: #dcd7ba; --font2: #7e9cd8;
	--boxbg: #2a2a37; --output: #efead6; --input: #dcd7ba; --caret: #7e9cd8;
	--gb: #363646; --gbs: #7e9cd8; --npt: #727169; --button: #363646;
	--wrong: #e46876; --arrow: 0.5rem solid #dcd7ba; --vkb: #16161d;
}

/* ── GitHub light ── */
:root[data-theme="github-light"] {
	--bg: #f6f8fa; --timebg: #eaeef2; --timebtn: #0969da; --timeclr: #ffffff;
	--pangbox: #d0d7de; --pangbtn: #ffffff; --font: #1f2328; --font2: #0969da;
	--boxbg: #ffffff; --output: #1f2328; --input: #24292f; --caret: #0969da;
	--gb: #d0d7de; --gbs: #0969da; --npt: #656d76; --button: #d0d7de;
	--wrong: #cf222e; --arrow: 0.5rem solid #1f2328; --vkb: #d8dee4;
}

/* ── GitHub dark ── */
:root[data-theme="github-dark"] {
	--bg: #0d1117; --timebg: #161b22; --timebtn: #58a6ff; --timeclr: #0d1117;
	--pangbox: #30363d; --pangbtn: #e6edf3; --font: #e6edf3; --font2: #58a6ff;
	--boxbg: #161b22; --output: #f0f6fc; --input: #e6edf3; --caret: #58a6ff;
	--gb: #30363d; --gbs: #58a6ff; --npt: #7d8590; --button: #30363d;
	--wrong: #f85149; --arrow: 0.5rem solid #e6edf3; --vkb: #010409;
}

/* ── One Dark (야행) ── */
:root[data-theme="onedark"] {
	--bg: #282c34; --timebg: #333842; --timebtn: #61afef; --timeclr: #282c34;
	--pangbox: #3e4451; --pangbtn: #abb2bf; --font: #abb2bf; --font2: #61afef;
	--boxbg: #333842; --output: #d7dae0; --input: #abb2bf; --caret: #61afef;
	--gb: #3e4451; --gbs: #61afef; --npt: #5c6370; --button: #3e4451;
	--wrong: #e06c75; --arrow: 0.5rem solid #abb2bf; --vkb: #21252b;
}

/* ── Monokai (라임) ── */
:root[data-theme="monokai"] {
	--bg: #272822; --timebg: #3e3d32; --timebtn: #a6e22e; --timeclr: #272822;
	--pangbox: #49483e; --pangbtn: #f8f8f2; --font: #f8f8f2; --font2: #a6e22e;
	--boxbg: #3e3d32; --output: #f8f8f2; --input: #e8e8e2; --caret: #a6e22e;
	--gb: #49483e; --gbs: #a6e22e; --npt: #75715e; --button: #49483e;
	--wrong: #f92672; --arrow: 0.5rem solid #f8f8f2; --vkb: #1e1f1c;
}

/* ── Ayu Light (귤) ── */
:root[data-theme="ayu-light"] {
	--bg: #f8f9fa; --timebg: #eef1f4; --timebtn: #ff9940; --timeclr: #ffffff;
	--pangbox: #e7eaed; --pangbtn: #ffffff; --font: #5c6166; --font2: #ff9940;
	--boxbg: #ffffff; --output: #2a2f33; --input: #5c6166; --caret: #ff9940;
	--gb: #e7eaed; --gbs: #ff9940; --npt: #8a9199; --button: #e7eaed;
	--wrong: #e65050; --arrow: 0.5rem solid #5c6166; --vkb: #d8dde2;
}

/* ── Ayu Mirage (황혼) ── */
:root[data-theme="ayu-mirage"] {
	--bg: #1f2430; --timebg: #232834; --timebtn: #ffcc66; --timeclr: #1f2430;
	--pangbox: #363e4f; --pangbtn: #cccac2; --font: #cccac2; --font2: #ffcc66;
	--boxbg: #232834; --output: #e6e1d5; --input: #cccac2; --caret: #ffcc66;
	--gb: #363e4f; --gbs: #ffcc66; --npt: #707a8c; --button: #363e4f;
	--wrong: #f28779; --arrow: 0.5rem solid #cccac2; --vkb: #171b24;
}

/* ── Horizon (수평선) ── */
:root[data-theme="horizon"] {
	--bg: #1c1e26; --timebg: #232530; --timebtn: #e95678; --timeclr: #fdf0ed;
	--pangbox: #2e303e; --pangbtn: #d5d8da; --font: #d5d8da; --font2: #e95678;
	--boxbg: #232530; --output: #eceff4; --input: #d5d8da; --caret: #e95678;
	--gb: #2e303e; --gbs: #e95678; --npt: #6c6f93; --button: #2e303e;
	--wrong: #f43e5c; --arrow: 0.5rem solid #d5d8da; --vkb: #16161c;
}

/* ── Zenburn (다도) ── */
:root[data-theme="zenburn"] {
	--bg: #3f3f3f; --timebg: #4f4f4f; --timebtn: #f0dfaf; --timeclr: #3f3f3f;
	--pangbox: #5f5f5f; --pangbtn: #dcdccc; --font: #dcdccc; --font2: #f0dfaf;
	--boxbg: #4f4f4f; --output: #eeeedd; --input: #dcdccc; --caret: #f0dfaf;
	--gb: #5f5f5f; --gbs: #f0dfaf; --npt: #8f8f7f; --button: #5f5f5f;
	--wrong: #cc9393; --arrow: 0.5rem solid #dcdccc; --vkb: #333333;
}

/* ── 한지 ── */
:root[data-theme="hanji"] {
	--bg: #f2ecdd; --timebg: #e9e1cd; --timebtn: #b3433b; --timeclr: #faf6ec;
	--pangbox: #ddd5c0; --pangbtn: #faf6ec; --font: #33302a; --font2: #b3433b;
	--boxbg: #faf6ec; --output: #33302a; --input: #4a463d; --caret: #b3433b;
	--gb: #ddd5c0; --gbs: #b3433b; --npt: #98917e; --button: #ddd5c0;
	--wrong: #d8574f; --arrow: 0.5rem solid #33302a; --vkb: #cfc7b0;
}

/* ── 단청 ── */
:root[data-theme="dancheong"] {
	--bg: #14211c; --timebg: #1c2e26; --timebtn: #cf5340; --timeclr: #f4ede0;
	--pangbox: #2c443a; --pangbtn: #d8e2d5; --font: #d8e2d5; --font2: #cf5340;
	--boxbg: #1c2e26; --output: #eef3ec; --input: #d8e2d5; --caret: #cf5340;
	--gb: #2c443a; --gbs: #cf5340; --npt: #5d7a6d; --button: #2c443a;
	--wrong: #ff7b66; --arrow: 0.5rem solid #d8e2d5; --vkb: #0e1713;
}

/* ══ 이미지 스왑: data-ui가 라이트/다크 이미지 세트를 결정 ══
   (남은 이미지 의존: 모바일 메뉴 버튼/아이콘, 모바일 info-3 박스)
   모바일 로고는 인라인 SVG로 옮겨 갔다(TwsLogo의 compact) — 스왑이 필요 없다. */
[data-ui="light"] .tws-info-btn { background-image: url(../img/mobile/mtwsMenu.svg); }
[data-ui="dark"] .tws-info-btn { background-image: url(../img/mobile/mtwsMenu-dark.svg); }

@media (max-width: 600px) {
	[data-ui="light"] .tws-info-7 > h1 { background-image: url(../img/mobile/mtwsSpd.svg); }
	[data-ui="light"] .tws-info-8 > h1 { background-image: url(../img/mobile/mtwsAcc.svg); }
	[data-ui="dark"] .tws-info-7 > h1 { background-image: url(../img/mobile/mtwsSpd-dark.svg); }
	[data-ui="dark"] .tws-info-8 > h1 { background-image: url(../img/mobile/mtwsAcc-dark.svg); }
	/* 라이트 커스텀 팔레트: svg 흰 박스를 boxbg로 물들인다 (다크는 라벨이 밝아 블렌드 불가) */
	[data-ui="light"] .tws-info-1,
	[data-ui="light"] .tws-info-3,
	[data-ui="light"] .tws-info-5 {
		background-color: var(--boxbg);
		background-blend-mode: multiply;
	}
}

@media (min-width: 601px) {
	/* 로고는 인라인 SVG(src/components/TwsLogo.tsx)다. 파일을 배경으로 깔면 겹치므로 끈다. */
	.tws-logo-box > h1 { background-image: none; }
}

/* ── 로고의 색 — 라이트/다크 두 벌 ────────────────────────────────────────────
   그리는 쪽은 `src/components/TwsLogo.tsx` 하나다(글자: antws_origin 타이틀의 Poppins — 2026-10-15).
   · **다크는 그전 그대로**(2026-10-15 지시: 「다크는 기존처럼 검은 배경 사용하고」) — 원본 다크 SVG(twsLogo-dark.svg)의 값.
   · **라이트는 순위표의 «내 줄»과 같은 짝을 뒤집은 것이다**(같은 날 지시 둘: 「라이트는 랭크 순위표의 나를 나타내는 아이템
     배경에 접속 표시(강조색)과 같은 대비로 배경과 프롬프트를」 → 「라이트에서 배경하고 프롬프트 색상 반대로」) — 판은 켜짐색
     그대로(접속 점의 색), 점과 캐럿은 켜짐색 40% 를 칸 바탕(`--boxbg`)과 **미리 섞은 불투명색**(내 줄 `RankPage.MINE_ROW` 이 칸
     위에서 보이는 그 색). 글자는 켜진 버튼의 짝(`--timeclr` — 켜짐색 위에 읽히라고 팔레트마다 정해 둔 글자색), 아래 줄과 밑줄은
     그 글자색을 판에 45% 섞은 색이다. ⚠ 판이 진한 켜짐색이 되며 그전 글자색(본문 · «안 친 글자»)은 못 쓰게 됐다 — latte 1.47 ·
     solarized-light 1.68, 아래 줄은 github-light 1.01(실측). 지금 값: 글자 2.12(ayu-light) ~ 10.71 · 아래 줄 1.40 ~ 2.63 ·
     캐럿 1.26 ~ 2.84(접속 점이 내 줄 위에서 보이는 그 대비를 뒤집은 것).
     ⛔ **반투명으로 두지 않는다**(같은 날 지시: 「라이트 투명도 안됨」) — 로고는 칸 왼쪽 밖으로 1.5rem 나가 있어(`twstb.css` 의
     `.tws-logo-box>h1 { left: -1.5rem }`) 반투명이면 그 자리에 칸 사이 검은 틈이 비친다. 섞을 것은 늘 불투명한 두 색끼리 섞는다.
     그전 라이트는 주황 판(#FF5224) · 흰 글자 · 검은 고스트의 고정색이었다.
   ⚠ 점과 캐럿은 다크에서 `--caret`(그전 그대로) · 라이트에서 위의 섞은 색이다. 좁은 화면 로고는 판이 없어 늘 `--caret` 이다.
   ⚠ `color-mix` 를 쓴다 — 로고는 공유 이미지(html2canvas)에 안 찍힌다(그 금지는 결과 상세 · 버튼 글자의 이야기다).
   ⚠ 2026-08-25 에 «판을 팔레트 변수로 칠했더니 29종 중 14종에서 캐럿 · 밑줄이 판에 묻혔다(대비 1.0~1.6)»는 기록이 있다 —
     그때는 판 위의 색이 고정이었다. 라이트의 캐럿은 이제 일부러 그 대비다(지시). */
:root {
	--logo-plate: var(--timebtn); --logo-line: var(--timeclr);
	--logo-ghost: color-mix(in srgb, var(--timeclr) 45%, var(--timebtn)); --logo-bar: color-mix(in srgb, var(--timeclr) 45%, var(--timebtn));
	--logo-caret: color-mix(in srgb, var(--timebtn) 40%, var(--boxbg));
}
@media (prefers-color-scheme: dark) {
	/* 팔레트가 아직 안 섰을 때 OS를 따른다. 사용자가 라이트를 고르면 그게 이긴다. */
	:root:not([data-ui="light"]) {
		--logo-plate: #121212; --logo-line: #FFFFFF; --logo-ghost: #6D6D6D; --logo-bar: #3D3D3D; --logo-caret: var(--caret);
	}
}
:root[data-ui="light"] {
	--logo-plate: var(--timebtn); --logo-line: var(--timeclr);
	--logo-ghost: color-mix(in srgb, var(--timeclr) 45%, var(--timebtn)); --logo-bar: color-mix(in srgb, var(--timeclr) 45%, var(--timebtn));
	--logo-caret: color-mix(in srgb, var(--timebtn) 40%, var(--boxbg));
}
:root[data-ui="dark"] {
	--logo-plate: #121212; --logo-line: #FFFFFF; --logo-ghost: #6D6D6D; --logo-bar: #3D3D3D; --logo-caret: var(--caret);
}

/* ══ 결과 상세의 자판 — 손가락 구역과 느린/빠른 키 ═════════════════════════════
   ⚠ **팔레트마다 정하지 않는다.** 팔레트가 스물여덟이라 손가락 다섯 색을 각각 적으면
   140줄이 되고, 하나만 빠져도 그 팔레트에서 자판이 통째로 회색이 된다. 이 색들이
   말하는 것은 **손가락의 자리**이지 그 팔레트의 성격이 아니므로, 라이트/다크 두 벌이면
   충분하다 — 아래 로고 색이 쓰는 방식(`data-ui` + `prefers-color-scheme`)을 그대로 따른다.

   ⚠ **채도를 낮게 잡는다.** 이 앱의 색은 강조색 하나(`--timebtn`)로 도는데 자판에만
   무지개가 뜨면 화면이 갈라진다. 글자는 `--font`가 그대로 얹히므로 밝은 쪽은 아주 옅게,
   어두운 쪽은 아주 짙게 둬서 대비를 지킨다.

   왼손·오른손은 **거울처럼 같은 색**이다 — 자리가 이미 좌우를 말해 주므로 색까지 갈라
   놓으면 열 가지를 외우게 된다.

   ⚠ **호박색은 엄지(스페이스)에만 준다.** 크림색 바탕의 팔레트(볏짚 `--boxbg: #f2e5bc`,
   한지·세피아…)에서는 옅은 호박색이 **바탕과 같은 색조**라 통째로 묻힌다 —
   명도로 풀려고 어둡게 하면 이번엔 키캡 글자가 안 보인다(2026-09-03 실측:
   배경 대비 1.01 → 1.37로 올리는 동안 글자 대비 4.32 → 3.12). 그래서 색조로 푼다:
   손가락 넷(파랑·분홍·초록·보라)은 어떤 바탕에서도 색으로 읽히고, 남은 호박색은
   **스페이스 하나**에만 간다 — 그 키는 폭으로 이미 구별되므로 색이 옅어도 잃을 게 없다. */
/* **랭크전의 «이김» 색**(`--rank-win` — 2026-10-08 지시: 「승리 시 아이콘 색상을 다크, 라이트 기준 연두 계열로 css 지정하고 사용하자」).
   이긴 문장 · 이긴 판의 ✓ 칸(`RankViews` 의 `MARK_WIN`)이 쓴다. 그전에는 켜짐색(`--timebtn`)이라 **팔레트를 따라** 색이 갈렸고, 한지처럼
   켜짐색이 붉은 팔레트에서는 진 칸(`--wrong`)과 같은 빨강이 되어 ✓ · ✕ 모양으로만 갈렸다(한지 실측 `--timebtn` #b3433b 대 `--wrong` #d8574f). 승패는 팔레트의 성격이
   아니라 뜻이라 위 자판 색과 같이 **라이트/다크 두 벌**이다. ✓ 는 검정 획이라 두 벌 다 밝은 연두다(검정과의 대비 라이트 14.1 · 다크 9.7 — 계산값) */
/* **순위표의 오르내림 글자 색**(`--rank-up` · `--rank-down` — 2026-10-15 · `RankPage` 의 «▲3 · ▼1»). `--rank-win` 은 검정 ✓ 를 얹는 **바탕**이라
   글자로 쓰면 밝은 바탕에서 안 읽힌다 — 그래서 글자용을 따로 둔다. 오름은 이김과 같은 초록 계열 · 내림은 빨강 계열(이 앱의 «진 칸»과 같은 쪽)이다.
   «이김» 색과 같은 까닭으로 팔레트마다가 아니라 **라이트/다크 두 벌**이다. 값은 스물여덟 팔레트의 `--boxbg` 위 대비로 골랐다(계산값 — 가장 낮은 곳:
   오름 4.93 zenburn · 내림 4.82 zenburn · 라이트는 둘 다 5.2 이상 gruvbox-light). 작은 글자라 4.5 를 넘겨야 해서 처음 값(#2e7d32 · #f08a80 — 4.08 · 3.37)에서 고쳤다. */
:root {
	--kb-pinky: #cfe0f0; --kb-ring: #f0d5dc; --kb-middle: #d5e9d6; --kb-index: #ded8ef;
	--kb-thumb: #f7e4c6; --kb-slow: #f2c8c8; --kb-fast: #cbe6d2;
	--rank-win: #a8d86e;
	--rank-up: #226b2a; --rank-down: #b3261e;
}
@media (prefers-color-scheme: dark) {
	/* auto(팔레트 미지정)일 때 OS를 따른다. 사용자가 라이트를 고르면 그게 이긴다. */
	:root:not([data-ui="light"]) {
		--kb-pinky: #2b3d4f; --kb-ring: #482e36; --kb-middle: #2e4736; --kb-index: #38314c;
		--kb-thumb: #4a3d25; --kb-slow: #563135; --kb-fast: #2b4835;
		--rank-win: #8cbf4f;
		--rank-up: #9fd884; --rank-down: #ffb4ab;
	}
}
:root[data-ui="light"] {
	--kb-pinky: #cfe0f0; --kb-ring: #f0d5dc; --kb-middle: #d5e9d6; --kb-index: #ded8ef;
	--kb-thumb: #f7e4c6; --kb-slow: #f2c8c8; --kb-fast: #cbe6d2;
	--rank-win: #a8d86e;
	--rank-up: #226b2a; --rank-down: #b3261e;
}
:root[data-ui="dark"] {
	--kb-pinky: #2b3d4f; --kb-ring: #482e36; --kb-middle: #2e4736; --kb-index: #38314c;
	--kb-thumb: #4a3d25; --kb-slow: #563135; --kb-fast: #2b4835;
	--rank-win: #8cbf4f;
	--rank-up: #9fd884; --rank-down: #ffb4ab;
}

/* ══ 버튼 안의 글자 · 아이콘 색 — `--btn-ink` ═══════════════════════════════════
   (2026-10-12 지시: 「버튼의 아이콘이나 텍스트 색상을 저걸로 통일 … 버튼과 본문 텍스트 색상을 같도록해서 사용하지말고 밝은 모드에서는
   좀 더 진하게 다크 모드에서는 좀 더 밝게 … 나중에 한번에 변경하기 쉽게 버튼의 색상으로 정의해서」 — «저것»은 언어 다이얼의 막대다).
   유휴 버튼의 글자 · 아이콘이 쓴다(`twsButton` 의 `BUTTON_IDLE` · `BUTTON_DISABLED` · `SEGMENT_IDLE` 과 폰 막대의 맨 아이콘 · 기록의 보관 단추).
   그전에는 `--npt`(«입력 안 한 글자» 색)라 버튼 바탕 위 대비가 1.95~4.64 였고, 지금은 3.86~8.53 이다(스물여덟 팔레트 계산값).
   ⚠ **바꿀 자리는 아래 `:root` 의 네 값뿐이다** — 평소 · 호버 × 밝은 바탕용(밝은 팔레트의 버튼 · 다이얼 막대)과 어두운 바탕용(어두운 팔레트의 버튼).
   ⚠ 값의 출처: 밝은 쪽은 다이얼 막대(그때 `rgba(0,0,0,.65)`)를 기본 버튼 바탕(`#dbdddc`)에 얹은 색, 어두운 쪽은 그 거울(흰색 65% 를
     기본 어두운 바탕 `#222222` 에)이다. 팔레트마다가 아니라 **두 벌**인 것은 위 `--kb-*` · `--rank-win` 과 같은 까닭이다.
   ⛔ **반투명으로 두지 않는다** — 아이콘 열일곱이 획 여러 개로 그려져 있어 겹치는 자리마다 색이 두 번 얹혀 **점이 박힌다**(실측:
     트로피 손잡이 · 눈 아이콘의 사선).
   ⛔ **`color-mix` · 상대 색(`rgb(from …)`)으로 팔레트에 섞지 않는다** — 둘 다 계산값이 `color(srgb …)` 라(실측) html2canvas 가 못 읽고,
     결과 상세의 공유 이미지 영역에 탭 · 토글이 들어 있어 **공유 이미지가 통째로 실패한다.**
   ⚠ **본문색(`--font`)이 아니다**(지시). 그래서 본문색이 원래 부드러운 팔레트(Solarized 둘 · Latte · Dawn · Ayu light · One Dark)에서는
     버튼 글자가 본문과 같거나 더 진하다.
   ⚠️ **탭 · 토글의 호버는 `--btn-ink-hover` 다**(같은 날 — 위 다섯 팔레트 때문이다). 그전 호버는 «본문색으로 진해지기»(`SEGMENT_HOVER`)라
     버튼 글자가 본문보다 진한 팔레트에서 호버가 안 보이거나 거꾸로 옅어졌다. 값은 같은 식으로 검정 · 흰색 **90%** 다 — 그래서 유휴 → 호버의
     걸음이 **어느 팔레트에서나 같다**(대비 비 밝은 쪽 2.14 · 어두운 쪽 1.75, 계산값). 호버 대 바탕은 6.75~17.42.
   ⚠ 켜짐(노란 알약 등)의 글자는 여기가 아니다 — 팔레트마다의 `--timeclr` 다(바탕이 팔레트의 강조색이라 두 벌로는 못 맞춘다). */
:root {
	--btn-ink-on-light: #4d4d4d; --btn-ink-on-dark: #b2b2b2;
	--btn-ink-hover-on-light: #161616; --btn-ink-hover-on-dark: #e9e9e9;
	--btn-ink: var(--btn-ink-on-light); --btn-ink-hover: var(--btn-ink-hover-on-light);
}
@media (prefers-color-scheme: dark) {
	/* auto(팔레트 미지정)일 때 OS를 따른다. 사용자가 라이트를 고르면 그게 이긴다. */
	:root:not([data-ui="light"]) {
		--btn-ink: var(--btn-ink-on-dark); --btn-ink-hover: var(--btn-ink-hover-on-dark);
	}
}
:root[data-ui="light"] {
	--btn-ink: var(--btn-ink-on-light); --btn-ink-hover: var(--btn-ink-hover-on-light);
}
:root[data-ui="dark"] {
	--btn-ink: var(--btn-ink-on-dark); --btn-ink-hover: var(--btn-ink-hover-on-dark);
}

/* ── 폼 칸의 안내 글(placeholder) — 문의(2026-10-13) ───────────────────────────
   원본의 전역 `::placeholder`(`twsm.css:243`)는 `--gb` 인데 **라이트에서 `--gb` 가 칸 바탕(`--timebg`)과 같은 값**(#dbdddc)이라
   안내 글이 통째로 안 보인다(실측 — 문의의 내용 칸). «아직 안 친 글자»의 색(`--npt`)을 쓴다 — 스물여덟 팔레트에 이미 있고 뜻도 같다.
   ⚠ 클래스를 단 칸에만 걸린다(`tws-field`) — 전역 규칙을 덮지 않는다. 지금 소비자는 문의의 두 칸이다.
   ⛔ `color-mix` 를 쓰지 않는다(위 `--btn-ink` 의 그 까닭). */
.tws-field::placeholder {
	color: var(--npt);
	opacity: 1;
}

/* ══ 랭크전 신호등의 색 — `--lamp-red` · `--lamp-yellow` · `--lamp-green` ══════════════════════════
   (2026-10-19 지시: 「신호등처럼 빨간불 > 노란불 > 초록불」 · 「원형 아이콘(빨강, 노랑, 초록)」 — 그리는 쪽은 layout.css «신호등»).
   팔레트마다가 아니라 **한 벌**이다 — 신호등은 어느 팔레트에서나 빨강 · 노랑 · 초록으로 읽혀야 해서 강조색(`--timebtn` — 팔레트에 따라 빨강이다)이나
   틀린 글자 색(`--wrong`)을 빌리지 않는다. 검은 테두리 안을 채우는 색이라 밝은 · 어두운 바탕 어디서나 같은 값으로 읽힌다. 꺼진 불은 빈 티켓 칸과
   같은 유휴 바탕(`--timebg`)이다.
   ⛔ `color-mix` · 반투명으로 만들지 않는다(위 `--btn-ink` 의 그 까닭). */
:root {
	--lamp-red: #e5484d;
	--lamp-yellow: #ffc53d;
	--lamp-green: #30a46c;
}