/* ===================================================================== ktmwork v2 — 테마 토큰 단일 출처 (theme.css) 출처: 디자인-시안/design-system-4테마.html (2026-07-21) 토큰부 그대로. 규칙: 화면은 시맨틱 토큰(또는 아래 별칭)만 참조. 원시 HEX 직접 사용 금지. 새 테마 추가 = :root[data-theme="새이름"] 블록 1개 + theme.js THEMES 배열 + 셸의 스위처 칩 1개. 컴포넌트 CSS는 손대지 않는다. 레거시 화면(style.css·인라인 :root)과는 파일이 분리되어 충돌하지 않는다. ===================================================================== */ :root{ /* ---------- [고정] 상태(시맨틱) — 어느 테마에서도 동일 ---------- */ --success:#059669; --success-bg:#d1fae5; --warning:#c2410c; --warning-bg:#ffedd5; --danger:#dc2626; --danger-bg:#fee2e2; --info:#2563eb; --info-bg:#dbeafe; --neutral:#64748b; --neutral-bg:#f1f5f9; /* ---------- [고정] 인버스 표면 글자 (토스트·툴팁·다크카드) ---------- 배경 --inverse-bg 는 각 테마 블록에 두되 항상 어두운 값. 위 글자색은 여기 고정 — 그래서 cream(밝은 사이드바) 테마에서도 토스트·툴팁·다크카드는 어두운 표면을 유지한다. */ --inverse-ink:#ffffff; /* 인버스 표면 위 기본 글자 */ --inverse-ink-muted:#94a3b8; /* 인버스 표면 위 보조 글자 */ /* ---------- [고정] 신호등(발주 상태 전용) ---------- */ --sig-red:#dc2626; --sig-red-bg:#fee2e2; /* 안올림 */ --sig-orange:#ea580c; --sig-orange-bg:#ffedd5; /* 원본없음 */ --sig-yellow:#a16207; --sig-yellow-bg:#fef9c3; /* 미도착·없음 */ --sig-green:#047857; --sig-green-bg:#d1fae5; /* 정상 */ --sig-gray:#64748b; --sig-gray-bg:#f1f5f9; /* 휴무 */ /* ---------- [고정] 출처(소스) 체계 ---------- */ --src-internal:#0e7490; --src-internal-bg:#ecfeff; /* 사내 데이터 */ --src-google:#2563eb; --src-google-bg:#dbeafe; /* 구글 캘린더 */ --src-emart:#b45309; --src-emart-bg:#fef3c7; /* 이마트 휴무일 */ --src-ai:#7c3aed; --src-ai-bg:#f3e8ff; /* AI 생성 */ /* ---------- [고정] 차트 팔레트(8색, CVD 고려) ---------- */ --c1:#0e7490; /* teal */ --c2:#ea580c; /* orange */ --c3:#2563eb; /* blue */ --c4:#7c3aed; /* violet */ --c5:#059669; /* green */ --c6:#ca8a04; /* gold */ --c7:#db2777; /* pink */ --c8:#475569; /* slate */ /* ---------- [별칭] 기존 컴포넌트 토큰명 → 시맨틱 역할 토큰 ---------- (시안에서 온 컴포넌트 CSS는 이 이름들을 그대로 쓰고, 값은 테마가 결정) */ --bg:var(--content-bg); /* 페이지 배경 */ --surface:var(--card-bg); /* 카드·패널 표면 */ --surface-2:var(--sunken-2); /* 표 hover·연한 표면 */ --surface-3:var(--sunken-3); /* 태그·필드 배경 */ --navy:var(--sidebar-bg); /* 사이드바·다크카드 */ --navy-2:var(--sidebar-bg-2); /* 선택 nav 텍스트 */ --navy-line:var(--sidebar-line); /* 다크 위 구분선 */ --ink:var(--ink-1); /* 본문 진한 글자(제목) */ --text:var(--ink-2); /* 기본 본문 */ --text-muted:var(--muted); /* 보조 텍스트 */ --text-subtle:var(--subtle); /* 캡션·비활성 라벨 */ --border:var(--line); /* 얇은 보더(기본) */ --border-strong:var(--line-2); /* 진한 보더(입력 등) */ --cyan:var(--accent); /* 액센트(포인트) */ --cyan-300:var(--accent-strong); /* 선택 nav 배경 */ --cyan-700:var(--accent-ink); /* 진한 액센트(텍스트·강조) */ --cyan-bg:var(--accent-weak); /* 액센트 연배경 */ /* ---------- 타이포 ---------- */ --font:'Pretendard', system-ui, -apple-system, 'Malgun Gothic', '맑은 고딕', sans-serif; --font-title:'A2Z', 'Pretendard', system-ui, -apple-system, sans-serif; /* 제목 */ /* 모노 스택의 한글 폴백 = Pretendard (2026-07-22 두리님: 신호등 등 한글 라벨이 모노체에 한글 글리프가 없어 굴림 계열로 떨어져 안 보임 → 숫자·영문만 모노, 한글은 Pretendard) */ --mono:ui-monospace, 'Cascadia Mono', 'Consolas', 'Pretendard', system-ui, sans-serif; --fs-h1:28px; --lh-h1:1.2; --fw-h1:800; --fs-h2:20px; --lh-h2:1.3; --fw-h2:800; --fs-h3:15px; --lh-h3:1.4; --fw-h3:700; --fs-body:14px;--lh-body:1.55;--fw-body:400; --fs-sm:13px; --fs-cap:12px; --lh-cap:1.45; --fs-mono:11px;--ls-mono:.12em; /* ---------- 간격 ---------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; /* ---------- radius (각진 미니멀 — 최소치) ---------- */ --r-0:0px; --r-sm:2px; --r-md:3px; --r-pill:999px; /* ---------- 그림자 ---------- */ --sh-sm:0 1px 2px rgba(15,23,42,.06); --sh-md:0 4px 12px rgba(15,23,42,.10); --sh-lg:0 12px 32px rgba(15,23,42,.16); --sh-panel:-8px 0 24px rgba(15,23,42,.10); /* 우측 상세 패널 */ /* ---------- 버튼 크기 체계 ---------- */ --btn-h-sm:30px; --btn-px-sm:10px; --btn-fs-sm:12px; --btn-ico-sm:14px; --btn-gap-sm:5px; --btn-h:38px; --btn-px:14px; --btn-fs:13px; --btn-ico:16px; --btn-gap:7px; --btn-h-lg:46px; --btn-px-lg:20px; --btn-fs-lg:15px; --btn-ico-lg:18px; --btn-gap-lg:9px; /* ---------- 레이아웃 폭 ---------- */ --side-w:256px; /* 좌측 사이드바 */ --panel-w:360px; /* 우측 상세 패널 */ /* ---------- 밀도 ---------- */ --row-py:12px; /* 표/리스트 기본 */ --row-py-tight:6px; /* 촘촘 */ --cell-px:14px; } /* ===================================================================== [0계층] 화면 크기 7단계 — (2026-08-04 두리님 요청) "사람마다 전체 디자인 크기(글자·여백·버튼)를 조절할 수 있게, 7단계로." ★왜 `zoom` 인가 — 이 앱의 CSS 는 처음부터 **px 로 짜여 있다**(font-size:13px 등). 그래서 `html{font-size:…}` 를 키워도 px 값은 꿈쩍하지 않는다(rem 이 아니라서). 전부 rem 으로 바꾸는 건 화면 수십 개를 건드리는 큰 수술이고 그 과정에서 배치가 깨진다. `zoom` 은 **레이아웃을 다시 계산**하므로(= transform:scale 과 결정적으로 다른 점) 커진 만큼 줄바꿈·표 폭·사이드바가 자연스럽게 재배치된다 — 두리님이 말한 "각 크기마다 잘 배치될 수 있도록"이 공짜로 따라온다. · transform:scale 은 픽셀을 그냥 늘려 흐려지고 스크롤·클릭 좌표가 어긋난다 → 안 쓴다. · 브라우저 자체 확대(Ctrl +)와 같은 계산을 쓰므로 화질 손상이 없다. ★사이드바·패널 폭도 **같은 비율로** 함께 커진다(zoom 이 px 를 전부 스케일하므로 --side-w·--panel-w 를 따로 만질 필요가 없다). ★기본은 4단계(=100%, 지금과 완전히 같은 화면). 안 건드린 사람에게는 아무 변화가 없다. ===================================================================== */ /* ★배율은 **변수로** 정의하고 zoom 은 그 변수를 쓴다(2026-08-04 2차). 이유: 내 설정 화면의 **미리보기 상자**도 같은 배율을 써야 하는데, 셀렉터를 `:root[data-scale]` 로 못 박아 두면 미리보기가 이 숫자를 자기 CSS 에 **다시 적어야** 한다 = 두 곳이 되어 한쪽만 늙는다. `[data-scale]` 로 열어 두면 미리보기 상자에 data-scale 을 걸기만 해도 같은 값이 따라온다. 실제 화면 적용은 아래 :root 한 줄뿐이라 동작은 종전과 완전히 같다. */ [data-scale="1"]{ --scale-z:0.85; } /* 아주 작게 — 한 화면에 많이 */ [data-scale="2"]{ --scale-z:0.90; } [data-scale="3"]{ --scale-z:0.95; } [data-scale="4"]{ --scale-z:1; } /* 기본(지금 화면) */ [data-scale="5"]{ --scale-z:1.10; } [data-scale="6"]{ --scale-z:1.25; } [data-scale="7"]{ --scale-z:1.40; } /* 아주 크게 — 글자가 잘 보이게 */ :root{ zoom:var(--scale-z, 1); } /* 값이 없거나 이상하면 1 = 지금 화면 그대로 */ /* ★고정 위치 요소(사이드바·패널·오버레이)는 zoom 된 좌표계를 그대로 따르므로 별도 보정이 필요 없다. 다만 화면이 커질수록 좁은 화면 분기(≤900px)에 **먼저 걸리게** 되는데, 그건 의도한 동작이다 — 크게 볼수록 실제로 쓸 수 있는 폭이 좁아지기 때문. */ /* ===================================================================== [0계층-B] 부위별 크기 — 6칸 (2026-08-04 두리님 요청 2차) "글꼴 키우기 말고, 세부적으로 키우고 싶은 것만 키울 수 있게." 위 [0계층] 전체 배율(data-scale) 위에 **부위별 배율을 한 번 더** 곱한다. 값은 CSS 변수 6개이고, 실제 숫자는 JS(theme.js)가 `` 로 넣는다. · 전체를 105%로 두고 표만 125% — 같은 화면 안에서 부위별로 다르게 볼 수 있다. · 기본은 전부 1 = 지금과 완전히 같은 화면(안 건드린 사람에게 변화 0). ★왜 여기도 `zoom` 인가 — [0계층] 주석과 같은 이유다. 이 앱 CSS 는 px 로 짜여 있어 `font-size` 만 키우는 방식은 일부만 커지고 배치가 어긋난다. `zoom` 은 레이아웃을 다시 계산하므로 부위 하나만 키워도 그 안이 알아서 재배치된다. ★중첩(곱셈)은 의도된 것이다 — 표·버튼은 본문(.content) 안에 있으므로 실제 표 크기 = 전체 × 본문 × 표 다. 화면에서 눈으로 맞추는 값이라 "본문 대비" 로 이해하는 편이 오히려 직관적이다(설정 화면 미리보기가 그대로 보여준다). ★사이드바 높이 보정이 필요한 이유 — `.side` 는 height:100vh 다. zoom 이 걸리면 100vh 가 그 배율만큼 늘어나 사이드바가 화면보다 길어진다(아래로 잘림). 그래서 `calc(100vh / 배율)` 로 나눠 준다. 배율 1이면 100vh 그대로라 무변화. ===================================================================== */ :root{ --z-side:1; /* 왼쪽 메뉴 */ --z-top:1; /* 상단 제목줄 */ --z-content:1; /* 본문 카드(틀·여백) */ --z-text:1; /* 카드 안 글자 — 본문에 곱해짐 */ --z-table:1; /* 표 — 본문에 곱해짐 */ --z-ctrl:1; /* 버튼·입력칸 — 본문에 곱해짐 */ --z-float:1; /* 오른쪽 아래 알림·메시지 버튼 */ } /* ★`.app .side` 로 쓰는 이유(실측으로 잡힌 것) — 자산 순서가 theme.css → shell.css 라, 여기서 `.side{height:…}` 로 쓰면 **뒤에 오는 shell.css 의 `.side{height:100vh}` 에 밀린다** (같은 특이도면 나중 파일이 이긴다). 그러면 배율만 걸리고 보정은 안 돼서 사이드바가 화면보다 길어진다(160%에서 900px 화면에 1440px — 아래가 잘림). 클래스를 하나 더 얹어 특이도를 올리면 shell.css 와 좁은 화면 분기(v2-components.css) 양쪽을 다 이긴다. */ .app .side{ zoom:var(--z-side); height:calc(100vh / var(--z-side)); } .topbar{ zoom:var(--z-top); } .content{ zoom:var(--z-content); } /* 카드 '안쪽'만 한 번 더 — 카드 사이 간격·카드 폭은 그대로 두고 내용만 키우고 싶을 때 (2026-08-04 두리님: "본문 글자, 카드랑 글자도 크기 따로따로 할 수 있게 나눠줘"). 카드 틀(.card 의 테두리·카드끼리의 간격)은 --z-content 만 받고, 제목줄·본문 영역(.card-head/.card-pad)은 --z-text 를 한 번 더 받는다. */ .content .card-head, .content .card-pad{ zoom:var(--z-text); } /* 표는 본문 안의 것만 — 사이드바·패널의 표(없지만 생길 수 있다)까지 끌고 가지 않는다. */ .content table{ zoom:var(--z-table); } /* 버튼·입력칸도 본문 안으로 한정한다. 사이드바의 자물쇠·로그아웃 버튼과 상단 테마 버튼은 각자 부위 배율(--z-side·--z-top)을 이미 받으므로 제외. */ .content .btn, .content input, .content select, .content textarea{ zoom:var(--z-ctrl); } /* 오른쪽 아래 떠 있는 것들(작은 원형 버튼·알림 목록). 전면 오버레이(.chat-overlay· .panel)는 화면 전체를 덮는 요소라 일부러 뺐다 — 배율을 걸면 화면 밖으로 넘친다. 채팅 오버레이 속 내용은 액자(iframe) 안이 자기 설정을 그대로 받는다. */ .chat-fab, .notif-fab, .notif-pop, .chat-toast{ zoom:var(--z-float); } /* ===================================================================== [1계층] 브랜드 색 테마 — 시맨틱 역할 토큰만 재정의 (라이트 단일) • 기본값(테마 미지정) = navy. 로 전환. • 4테마: navy(기본)·coral·slate = 어두운 사이드바 / cream = 밝은 코랄크림 사이드바. • 상태·신호등·출처·차트색·인버스 글자는 위 :root 에 고정 — 테마가 건드리지 않는다. ┌─ 새 테마 추가법 (3단계) ────────────────────────────────────────┐ │ 1) 아래 형식으로 :root[data-theme="새이름"]{ … } 블록 하나 추가 │ │ 아래 그룹을 전부 채운다: │ │ · 사이드바 배경 3 · 액센트 4 · 표면 4 · 텍스트 4 · 보더/포커스 3│ │ · 사이드바 글자 9(--sidebar-ink … --sidebar-active-ink) │ │ → 밝은 사이드바면 어두운 글자로 채운다(cream 참고). │ │ · 인버스 배경 1(--inverse-bg, 항상 어두운 값) │ │ 2) 셸의 테마 스위처(.theme-sw)에 칩