/* ───────────────────────────────────────────────────────────── tokens.css — 테마 3종의 값 전부. ⭐ 정본은 `apps/Hutchpad/테마-토큰.css` (유하람 과장 · 2026-08-11) 다. 2026-08-11 저녁 그 파일 내용으로 갈아끼웠다. 그 전까지 여기 있던 값은 오상길 과장이 급히 옮겨 적은 임시값이었고, **메모판이 지록에게 반려된 옛 조합 (파란 펠트 #35414E + 연노랑)으로 남아 있었다.** 확정본은 「먹과 회백」이다. ⚠️ 규칙: 다른 파일(base.css · 박스 css · 박스 js)에서는 색을 직접 쓰지 말고 여기 있는 이름만 쓴다. 이름이 모자라면 여기에 새로 만들고 세 테마 모두에 값을 준다. ⚠️ `--accent` 와 `--mark` 는 다른 것이다. 합치지 말 것 (실제로 한 번 합쳐서 화면이 망가졌다): --accent 주 버튼처럼 **꽉 채우는 자리**. 작업대에서는 먹(#171B15)이다 --mark 형광펜 자국 · 켜진 탭처럼 **표시하는 자리**. 작업대에서는 형광 노랑이다 노랑을 버튼 배경으로 쓰면 화면이 노란 덩어리가 된다 — 유하람: "노랑은 글자색으로 쓰지 않는다". 선택자가 `:root[data-theme=…]` 가 아니라 `[data-theme=…]` 인 이유: 그래야 뿐 아니라 아무
에나 걸 수 있고, 비교용 페이지에서 한 화면에 여러 테마를 동시에 띄울 수 있다. ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════ 공통 — 테마가 바꾸지 않는 값 ═══════════════════════════════════════════════════════════ */ :root { /* ⭐ 지록 2026-08-12 — 작업대·메모판의 기본 글꼴을 **프리텐다드**로 (인쇄물은 나눔명조 그대로). 시스템 글꼴은 0KB 였지만 윈도우·맥·안드로이드가 제각각이라 지록이 맞춘 자간·줄높이가 보는 사람마다 달라졌다. 뒤에 남긴 시스템 글꼴들은 폰트가 아직 안 왔을 때 잠깐 보이는 자리다. 정의는 `css/pretendard.css` (내장 · CDN 0). 굵기 45~920 이 한 파일에 다 들어 있다 */ --font: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* 숫자는 모노스페이스를 쓰지 않고 tabular-nums 로 자리를 맞춘다 (유하람 진단 ④ — 모노스페이스는 개발자 화면 말투다. 타깃이 아니다) */ --font-num: var(--font); --num-variant: tabular-nums; --fs: 13.5px; --fs-sm: 11.5px; --fs-title: 13.5px; --col-min: 260px; --top-h: 52px; --addbar-h: 40px; /* ── 자리 잡기(격자) ──────────────────────────────── --snap 박스를 끌 때 딱딱 맞물리는 눈금. 가로 위치와 폭이 전부 이 배수다. ⚠️ 지록이 값을 바꿀 수 있는 자리다 — 여기 한 줄만 고치면 화면 전체가 따라온다. --box-min-w / --box-max-w 박스 폭의 아래위 한계 (눈금 단위로 반올림해서 쓴다) --stack-at 이 폭보다 좁으면 자유 배치를 접고 한 줄로 세로로 쌓는다 */ /* ⭐ 조작하는 것들의 키 — 입력칸·버튼·고르는 칸·색칸이 전부 이 높이다 (지록 지시 2026-08-11: "입력창과 버튼의 크기를 통일해줘, 모든 부분에"). 전엔 23·30·34·37·41px 이 섞여 있었다. 여러 줄 입력칸(textarea)만 예외다 — 그건 높이가 내용이다 */ --ctl-h: 32px; --snap: 20px; --box-min-w: 200px; --box-max-w: 900px; --stack-at: 720px; /* 작업대 최대 폭 (지록 2026-08-12 — 큰 모니터에서 좌우가 놀지 않게). 화면을 그대로 따라 넓어지고, 이 값에서만 멈춘다. 4K 가로(3840)까지는 전부 쓰고 그보다 넓은 울트라와이드에서만 가운데로 모인다 — 한 눈에 안 들어오면 작업대가 아니라 벌판이 된다. ⚠️ 지록이 값을 바꿀 수 있는 자리다. 다시 예전처럼 묶고 싶으면 1280px 로 되돌리면 된다 */ --wrap-max: 3400px; } /* ═══════════════════════════════════════════════════════════ 작업대 / Workbench — 기본값 페인트칠한 금속 작업대. 회색 상판에 형광 노랑 한 점. ⚠️ 2026-08-11 지록 확인 — 이 테마는 원안 그대로 간다. 손대지 않는다. ═══════════════════════════════════════════════════════════ */ :root, [data-theme="workbench"] { color-scheme: light; /* 바탕·면 */ --bg: #DDE0D8; /* 초록기가 옅게 도는 회색. 크림도 흰색도 아니다 */ --bg-texture: repeating-linear-gradient(90deg, transparent 0 39px, rgba(23,27,21,.022) 39px 40px); --surface: #FFFFFF; --surface-2: #F2F4EF; /* 선 */ --line: #E3E7DE; --line-strong: #C8CDC1; /* 글자 — 박스 안 */ --ink: #171B15; /* 순검정이 아닌 올리브 먹 */ --ink-2: #565C50; --ink-3: #6E7468; /* 흰 바탕에서 4.6:1 — 작은 글씨도 읽힌다 */ /* 글자 — 박스 밖(헤더·판 탭). 작업대는 박스 안과 같다 */ --bg-ink: #171B15; --bg-ink-2: #565C50; --bg-line: #C8CDC1; /* 강조 */ --accent: #171B15; /* 주 버튼은 먹으로 꽉 채운다 */ --accent-ink: #FFFFFF; --mark: #FFDC1F; /* 형광 노랑 — 글자색으로 쓰지 않는다 (지록 통과) */ --mark-2: #F2CE1B; --mark-ink: #171B15; --warn: #B33A2B; --ok: #3E6B45; /* 간격·모양 */ --gap: 14px; --pad: 11px; /* 좌우 */ --pad-y: 11px; /* 위아래 */ --radius: 3px; --radius-sm: 3px; /* 박스 테두리 — 밑변만 두껍게. 사방 그림자 없음 */ --card-border-w: 1px; --card-top-w: 0px; --card-bottom-w: 3px; --card-edge: #171B15; --card-shadow: none; --font-title: var(--font); --title-weight: 700; /* 캔버스처럼 CSS 밖에서 색이 필요한 자리 (js 가 getComputedStyle 로 읽는다) */ --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%236E7468' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --overlay: rgba(23,27,21,.55); /* 자를 때 어둡게 덮는 막 */ --marker: #FFDC1F; /* 자를 자리 테두리 */ } /* ═══════════════════════════════════════════════════════════ 메모판 / Pinboard 짙은 먹색 판에 회백 종이를 붙여놓았다. ✅ 2026-08-11 지록 확정. 네 벌을 실제 화면으로 비교해서 뽑은 값이다(「먹과 회백」). 왜 처음 조합(남색·연노랑·빨강)이 반려됐는지는 `디자인-방향.md` 3-1 에 있다. ⚠️ 원칙: 셋 다 채도가 낮다. 여기에 원색을 하나라도 더하면 반려된 조합으로 되돌아간다. ═══════════════════════════════════════════════════════════ */ [data-theme="pinboard"] { color-scheme: dark; /* 스크롤바·기본 폼 컨트롤도 같이 어두워진다 */ --bg: #3A3735; /* 따뜻한 먹. 초록기 없음 */ --bg-texture: repeating-linear-gradient(45deg, rgba(255,255,255,.020) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.032) 0 2px, transparent 2px 4px); --surface: #E9E5DC; /* 회색기가 도는 종이. 크림(#F0EEE6)보다 어둡고 탁하다 */ --surface-2: #DFDACF; --line: #D3CDC1; --line-strong: #B9B2A4; /* 글자 — 박스 안(밝은 종이 위) */ --ink: #2B2723; --ink-2: #5A544C; --ink-3: #6F6960; /* 종이에서 4.7:1 */ /* 글자 — 박스 밖(어두운 판 위). 안팎이 뒤집히는 유일한 테마다 */ --bg-ink: #EDE9E2; --bg-ink-2: #ADA69E; /* 먹 바탕에서 4.9:1 */ --bg-line: #5B5652; --accent: #2B2723; --accent-ink: #F3F0EA; --mark: #5B7387; /* 탁한 청회. 형광펜보다 볼펜으로 그은 자국에 가깝다 */ --mark-2: #4C6274; --mark-ink: #FFFFFF; /* 신호색 위 흰 글자 4.5:1 */ --warn: #9E4A3E; --ok: #4A6B4F; --gap: 16px; --pad: 12px; --pad-y: 12px; --radius: 2px; --radius-sm: 2px; /* 종이는 테두리가 아니라 두께로 떠 있다 */ --card-border-w: 0px; --card-top-w: 0px; --card-bottom-w: 0px; --card-edge: transparent; --card-shadow: 0 1px 0 rgba(0,0,0,.14), 0 7px 16px rgba(0,0,0,.24); --font-title: var(--font); --title-weight: 700; --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%236F6960' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --overlay: rgba(34,33,30,.52); --marker: #5B7387; } /* ═══════════════════════════════════════════════════════════ 인쇄물 / Newsprint 신문 지면. 카드를 안 쓰고 굵은 룰선으로 나눈다. 빨강은 도장 하나. ═══════════════════════════════════════════════════════════ */ [data-theme="newsprint"] { color-scheme: light; /* ⭐ 눈부심 잡기 (지록 2026-08-12 — *"인쇄물 테마를 키면 눈이 부셔… 그래서 가독성이 떨어지는 거 같아"*) 재보니 원인이 둘이었다. ① **밝은 면이 화면 전체다.** 작업대는 카드만 흰색(100%)이고 바탕은 73.6% 라 흰 면이 섬처럼 흩어져 있다. 인쇄물은 바탕과 박스를 일부러 같은 값으로 뒀더니(룰선만 남기려고) **화면 전체가 91.4%** 가 됐다. 같은 밝기라도 면적이 넓으면 눈에 들어오는 빛의 양이 다르다. ② **대비가 17.3:1** 이었다. 흰 종이에 검정(21:1)에 가까운 값이라, 밝은 지면 위에서 획 둘레로 빛이 번져 보인다. 얇은 명조가 흐려 보이던 것도 여기서 온다 — "얇다"와 "눈부시다"는 같은 뿌리였다. → 지면 91.4% → **82.6%** (메모판 종이 78.5 와 작업대 바탕 73.6 사이) · 대비 17.3 → **12.9**. 둘 다 본문 기준 4.5 를 한참 넘으니 읽기에는 손해가 없다. 실제 신문 용지도 흰색이 아니다. */ --bg: #E8E3D8; --bg-texture: none; --surface: #EFEAE0; /* 바탕과 거의 같다 → 박스가 사라지고 룰선만 남는다 */ --surface-2: #EFEAE0; --line: #C7C2B7; --line-strong: #262420; --ink: #262420; /* 순검정이 아닌 따뜻한 먹 — 지면 위 12.9:1 */ --ink-2: #4B4842; --ink-3: #6B6862; /* 지면 위 4.6:1 — 작은 글씨도 기준을 넘는다 */ --bg-ink: #262420; --bg-ink-2: #4B4842; --bg-line: #262420; /* 지면은 굵은 룰선으로 나눈다 */ --accent: #262420; --accent-ink: #EFEAE0; --mark: #D0342C; /* 도장 빨강 — 한 화면에 두세 번만 */ --mark-2: #B32B24; --mark-ink: #FFFFFF; --warn: #D0342C; --ok: #2F6B45; --gap: 24px; /* ⚠️ 2026-08-11 지록이 같은 자리를 두 번 지적했다 — "박스와 내용 붙어있는거". 좌우를 0 으로 둔 근거가 "지면은 단 폭을 꽉 쓴다" 였는데 틀린 생각이었다. 실제 신문도 단 안에 여백이 있고, 활자가 지면 가장자리에 닿는 인쇄물은 없다. 게다가 이 테마는 테두리를 없앴으니 여백이 유일한 경계다 — 그게 2px 이면 경계가 없다. */ --pad: 16px; --pad-y: 15px; --radius: 0px; --radius-sm: 0px; /* 테두리 없음. 제목 위에 굵은 룰선 하나. ⭐ 지록 지시 2026-08-11: "박스에 약하게 쉐도우 줄수있어? 인쇄물에만" 테두리가 없고 박스 배경이 지면과 거의 같은 테마라, 아주 옅은 그림자가 유일한 경계가 된다. 진하게 주면 신문이 아니라 카드 UI 로 돌아간다 — 종이 한 장이 얹힌 정도로만. */ --card-border-w: 0px; --card-top-w: 2px; --card-bottom-w: 0px; --card-edge: #262420; --card-shadow: 0 1px 1px rgba(38,36,32,.05), 0 4px 12px rgba(38,36,32,.055); --fs-title: 15px; /* ⭐ 지록 지시 2026-08-11: "인쇄물은 한글도 명조로 바꿔줘" → "웹폰트로 해줘" 시스템 명조(맥 AppleMyungjo · 윈도우 바탕)는 0KB 지만 획이 가늘고 예스러워 반려됐다. 나눔명조를 `src/fonts/` 에 내장했다(CDN 0 — 레포 규칙). 정의는 `css/fonts.css`. ⚠️ 이 테마를 고른 사람만 폰트를 내려받는다. 작업대·메모판은 한 바이트도 안 받는다. 뒤의 시스템 명조는 폰트가 아직 안 왔을 때 잠깐 보이는 자리다 — 그때도 명조로 보인다. */ --font-title: "Nanum Myeongjo", Georgia, "Times New Roman", AppleMyungjo, Batang, 바탕, serif; /* 본문까지 명조로 — 제목만 세리프면 지면이 아니라 제목만 흉내 낸 화면이 된다 */ --font: "Nanum Myeongjo", Georgia, "Times New Roman", AppleMyungjo, Batang, 바탕, serif; --title-weight: 700; /* ⭐ 굵기는 400 이다 — 한 번 700 까지 갔다가 되돌아온 자리다 (기록으로 남긴다). 경위: 지록이 *"기본 폰트가 얇아서 가독성이 떨어진다"* → 나눔명조엔 500·600 이 없어 한 단계 위가 곧 700 이라 700 으로 올렸다. 그런데 다음 지적이 *"인쇄물을 키면 눈이 부셔"* 였고, 재보니 **둘이 같은 원인**이었다 — 지면 91.4% 에 대비 17.3:1 이라 획 둘레로 빛이 번져 가는 명조가 먹혀 보이고, 동시에 화면이 부셨다. 지면과 대비를 낮추자(82.6% · 12.9:1) 400 이 또렷해져서 굵기를 되돌렸다 (지록 2026-08-12 "인쇄물 400으로 부탁해"). ⚠️ 교훈: **"얇아 보인다"의 범인이 굵기가 아닐 수 있다.** 굵기를 올리기 전에 대비부터 잰다. */ --w-base: 400; --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%2366635D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --overlay: rgba(17,17,17,.55); --marker: #D0342C; }