@things-factory/shell 10.0.18 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -60,14 +60,22 @@ body {
60
60
  /* material design component themes */
61
61
  --mdc-danger-button-primary-color: var(--status-danger-color);
62
62
 
63
- /* button style */
64
- --button-background-color: var(--md-sys-color-surface-variant);
63
+ /*
64
+ * button style
65
+ *
66
+ * 바탕을 회색(surface-variant)으로 채우고 있었다. 버튼이 서넛 놓이는 툴바에서 회색 덩어리가
67
+ * 나란히 서면 어느 것이 중요한지 보이지 않는다. 기본은 **면 색 + 테두리**로 두고, 채우는 것은
68
+ * 주 동작과 위험한 동작에만 남긴다(그 둘은 `[raised]`·`[danger]` 가 그린다).
69
+ */
70
+ --button-background-color: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
65
71
  --button-background-focus-color: var(--md-sys-color-primary);
66
72
  --button-border: var(--border-dim-color);
67
- --button-border-radius: var(--border-radius);
73
+ /* 4px 은 모서리가 둥근지 각진지 애매하다 — 다른 면(카드·표)과 같은 눈금을 쓴다. */
74
+ --button-border-radius: var(--ui-r-small, 6px);
68
75
  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
69
76
  --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
70
- --button-color: var(--md-sys-color-secondary);
77
+ /* 글자는 본문색으로 — 강조는 아이콘과 주 동작이 맡는다. 글자까지 색을 주면 링크로 읽힌다. */
78
+ --button-color: var(--md-sys-color-on-surface);
71
79
  --button-font: 600 var(--fontsize-default) var(--theme-font);
72
80
  --button-text-transform: capitalize;
73
81
  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
@@ -27,7 +27,7 @@ body {
27
27
  --grid-header-top-border: 2px solid var(--md-sys-color-primary);
28
28
  --grid-header-bottom-border: var(--grid-container-border-color);
29
29
  --grid-header-padding: var(--spacing-small) var(--spacing-tiny);
30
- --grid-header-sorter-size: 18px;
30
+ --grid-header-sorter-size: 14px;
31
31
  --grid-header-splitter-border: var(--grid-container-border-color);
32
32
  --grid-header-splitter-border-hover: 1px solid var(--md-sys-color-inverse-primary);
33
33
  --grid-header-color: var(--md-sys-color-primary);
@@ -35,7 +35,7 @@ body {
35
35
  --group-bar-active-line-color: var(--md-sys-color-on-secondary-container);
36
36
  --group-bar-line: solid 3px var(--md-sys-color-outline);
37
37
 
38
- --button-container-margin: inintial;
38
+ --button-container-margin: initial;
39
39
  --button-container-padding: 0 var(--padding-default) var(--padding-wide) var(--padding-default);
40
40
  --button-container-background: transparent;
41
41
  --button-container-height: initial;
@@ -46,6 +46,86 @@ body {
46
46
  --button-container-button-height: initial;
47
47
  --button-container-button-border: var(--button-border);
48
48
 
49
+ /* ── 동작 버튼 ──────────────────────────────────────────────────────── */
50
+ /*
51
+ * 버튼 — 페이지의 동작 버튼(발행·취소·내보내기 …).
52
+ *
53
+ * ── 무엇이 어긋나 있었나 (2026-08-31, 실측) ─────────────────────────────────
54
+ * 이 버튼들은 `md-assist-chip` 으로 그려진다(`ox-page-action-context-bar`). 그런데 그 부품이 읽는
55
+ * `--md-assist-chip-*` 토큰을 **아무도 정하지 않았다.** 그래서 머티리얼 기본값으로 떨어졌고,
56
+ * 브라우저에서 잰 값이 이랬다.
57
+ *
58
+ * ```
59
+ * 글자색 rgb(0, 0, 0) 순수 검정. 본문 글자색(on-surface)과 다르다
60
+ * 굵기 400 본문과 같은 굵기라 누를 것으로 안 보인다
61
+ * 크기 13.33px 지정한 적 없는 값(1em 의 브라우저 기본에서 나온 것)
62
+ * 모서리 5px 둥근 것도 각진 것도 아닌 어중간한 값
63
+ * 높이 32px 손가락으로 누르기에 작다(WCAG 최소 44px)
64
+ * ```
65
+ *
66
+ * 즉 「낡아 보인다」의 상당 부분이 취향이 아니라 **값이 비어 있어서** 생긴 것이었다.
67
+ *
68
+ * ── 무엇을 정하나 ───────────────────────────────────────────────────────────
69
+ * 부품은 `@operato/*` 에 있어 고칠 수 없지만, 이 토큰들은 상속되므로 문서 수준에서 정하면 모든 앱의
70
+ * 모든 동작 버튼에 닿는다.
71
+ *
72
+ * ── 아직 못 하는 것 ─────────────────────────────────────────────────────────
73
+ * 지금은 **주 동작과 보조 동작이 똑같이 보인다.** 「발행」과 「취소」가 구별되지 않는다.
74
+ * 부품이 그 구분을 나타내는 표식(속성)을 붙이지 않아서, 문서 수준의 토큰으로는 가를 수 없다
75
+ * (속성 선택자는 shadow DOM 안으로 들어가지 못한다). 부품 쪽에 `[danger]` 는 이미 있으므로,
76
+ * 주 동작 표식이 생기면 여기서 채운다.
77
+ */
78
+
79
+ /* ── 크기 ────────────────────────────────────────────────────────────── */
80
+ /*
81
+ * 마우스로 쓰는 화면의 기본은 36px 이다. 44px(손가락 최소)을 기본으로 두었더니 관리 화면에서
82
+ * 버튼이 커 보였다 — 마우스는 조준이 정확해서 그만큼 필요하지 않다.
83
+ *
84
+ * 나누는 기준은 화면 폭이 아니라 **입력 장치**다. 폭으로 나누면 창을 좁힌 데스크톱에서 버튼이
85
+ * 커지고, 큰 태블릿에서는 작은 채로 남는다. 아래 pointer: coarse 가 그 자리를 넓힌다.
86
+ */
87
+ --md-assist-chip-container-height: 36px;
88
+ --md-assist-chip-container-shape: var(--ui-r-small, 6px);
89
+ --md-assist-chip-leading-space: 14px;
90
+ --md-assist-chip-trailing-space: 16px;
91
+ --md-assist-chip-with-leading-icon-leading-space: 12px;
92
+ --md-assist-chip-icon-size: 18px;
93
+ --md-assist-chip-icon-label-space: 7px;
94
+
95
+ /* ── 글자 ────────────────────────────────────────────────────────────── */
96
+ /* 굵기 600 — 본문(400)과 같으면 문장인지 버튼인지 구별되지 않는다. */
97
+ --md-assist-chip-label-text-font: var(--theme-font);
98
+ --md-assist-chip-label-text-size: var(--ui-t-body, 13px);
99
+ --md-assist-chip-label-text-weight: 600;
100
+ --md-assist-chip-label-text-line-height: 1;
101
+ --md-assist-chip-label-text-color: var(--md-sys-color-on-surface);
102
+
103
+ /* ── 테두리 ──────────────────────────────────────────────────────────── */
104
+ --md-assist-chip-outline-width: 1px;
105
+ --md-assist-chip-outline-color: var(--md-sys-color-outline-variant);
106
+
107
+ /* ── 아이콘 ──────────────────────────────────────────────────────────── */
108
+ /* 아이콘만 강조색을 준다 — 버튼 전체를 칠하면 여러 개가 나란히 있을 때 화면이 시끄럽다. */
109
+ --md-assist-chip-leading-icon-color: var(--md-sys-color-primary);
110
+
111
+ /* ── 손을 올렸을 때 ──────────────────────────────────────────────────── */
112
+ --md-assist-chip-hover-state-layer-color: var(--md-sys-color-primary);
113
+ --md-assist-chip-hover-state-layer-opacity: 0.08;
114
+ --md-assist-chip-hover-label-text-color: var(--md-sys-color-primary);
115
+ --md-assist-chip-hover-leading-icon-color: var(--md-sys-color-primary);
116
+
117
+ /* ── 키보드로 왔을 때 ────────────────────────────────────────────────── */
118
+ /* 테두리 색이 바뀌지 않으면 키보드로 이동할 때 지금 어디인지 알 수 없다. */
119
+ --md-assist-chip-focus-outline-color: var(--md-sys-color-primary);
120
+ --md-assist-chip-focus-label-text-color: var(--md-sys-color-primary);
121
+ --md-assist-chip-focus-leading-icon-color: var(--md-sys-color-primary);
122
+
123
+ /* ── 누를 수 없을 때 ─────────────────────────────────────────────────── */
124
+ --md-assist-chip-disabled-label-text-color: var(--md-sys-color-on-surface);
125
+ --md-assist-chip-disabled-label-text-opacity: 0.38;
126
+ --md-assist-chip-disabled-outline-color: var(--md-sys-color-outline-variant);
127
+ --md-assist-chip-disabled-outline-opacity: 0.5;
128
+
49
129
  --popup-content-background-color: var(--md-sys-color-background);
50
130
  --popup-content-color: var(--md-sys-color-on-background);
51
131
  --popup-content-padding: 10px 20px;
@@ -110,3 +190,16 @@ body {
110
190
  --overlay-center-large-height: 80%;
111
191
  }
112
192
  }
193
+
194
+ /*
195
+ * 손가락으로 누르는 장치 — 태블릿·현장 단말. 자리를 손가락 최소치까지 넓힌다.
196
+ *
197
+ * `pointer: coarse` 는 주 입력 장치가 정밀하지 않다는 뜻이다. 마우스가 달린 데스크톱은 창을 아무리
198
+ * 좁혀도 여기에 걸리지 않고, 큰 태블릿은 폭이 넓어도 걸린다 — 폭으로 나눌 때와 반대다.
199
+ */
200
+ @media (pointer: coarse) {
201
+ body {
202
+ --md-assist-chip-container-height: var(--ui-tap, 44px);
203
+ --md-assist-chip-icon-size: 20px;
204
+ }
205
+ }
@@ -1,7 +1,29 @@
1
+ /*
2
+ * 툴팁 — 화면 위에 잠깐 떠 있는 것.
3
+ *
4
+ * ── 반전 면을 쓴다 ─────────────────────────────────────────────────────────
5
+ * 툴팁은 화면과 같은 면이 아니다. 표나 카드와 같은 밝은 면에 두면 어디까지가 툴팁인지 안 보인다.
6
+ * 그래서 어두운 면에 밝은 글자다.
7
+ *
8
+ * 색을 직접 적지 않고 Material 의 반전 면에서 가져온다 — 그 값이 밝은 모드와 어두운 모드에서 함께
9
+ * 뒤집힌다. 직접 적으면 어두운 모드에서 어두운 배경에 어두운 툴팁이 된다.
10
+ *
11
+ * --md-sys-color-inverse-surface 밝은 모드에서 rgb(43 49 56)
12
+ * --md-sys-color-inverse-on-surface 그 위의 글자 rgb(236 239 242)
13
+ *
14
+ * ── 전에 무엇이었나 ────────────────────────────────────────────────────────
15
+ * `rgba(0, 0, 0, 0.7)` 검정 반투명 · 여백 4px · `bold 11px`. 앱의 색을 하나도 보지 않아서 화면이 어떤
16
+ * 테마를 쓰든 툴팁만 브라우저 기본처럼 보였다. 굵은 글씨도 어울리지 않는다 — 툴팁은 값이 아니라 값을
17
+ * 거드는 말이라 조용해야 한다.
18
+ *
19
+ * 글자 크기는 본문보다 한 단 작게 두고 굵기는 보통이다. 크기·여백·둥글기는 부품이 기본을 갖고 있어
20
+ * (`tooltip-reactive-controller.ts`) 여기서는 색과 글꼴만 정한다.
21
+ */
1
22
  body {
2
- --tooltip-padding: 4px 4px 4px 4px;
3
- --tooltip-background-color: rgba(0, 0, 0, 0.7);
4
- --tooltip-font: bold 11px var(--theme-font);
5
- /*
6
- */
23
+ --tooltip-background-color: var(--md-sys-color-inverse-surface, rgba(23, 36, 44, 0.94));
24
+ --tooltip-color: var(--md-sys-color-inverse-on-surface, #ffffff);
25
+ --tooltip-font-family: var(--theme-font);
26
+ --tooltip-font-size: 12px;
27
+ --tooltip-font-weight: 400;
28
+ --tooltip-padding: 6px 8px;
7
29
  }
@@ -0,0 +1,191 @@
1
+ /*
2
+ * 화면을 그릴 때 쓰는 토큰 — 면·글자·눈금·모서리.
3
+ *
4
+ * ── 왜 필요한가 ─────────────────────────────────────────────────────────────
5
+ * 지금은 페이지가 `--md-sys-color-*` 를 직접 가져다 쓴다. 그 이름은 색의 **역할**을 말할 뿐이라
6
+ * (surface-container 가 카드인지 배경인지 구분하지 않는다), 페이지마다 다른 것을 고른다. 그래서
7
+ * 같은 뜻의 자리가 앱마다·페이지마다 다른 회색이 됐다.
8
+ *
9
+ * 여기서 한 겹 위의 이름을 붙인다. 값은 전부 md 역할색에서 오므로 라이트·다크가 자동으로 따라온다.
10
+ * 페이지는 `--ui-panel`(카드가 놓이는 면) 처럼 **무엇인지**로 고른다.
11
+ *
12
+ * ── 글자 눈금 ───────────────────────────────────────────────────────────────
13
+ * 눈금을 정하지 않으면 페이지마다 0.72 / 0.78 / 0.83 / 0.88rem 같은 값이 생긴다(operato-plant 한
14
+ * 파일에 아홉 가지가 있었다). 크기가 아홉이면 위계가 없는 것과 같다.
15
+ *
16
+ * 단을 늘릴 때는 **역할이 새로 생겼을 때만** 늘린다 — 「14.5px 도 필요하다」는 늘릴 이유가 아니다.
17
+ * 눈금의 값은 고를 수 있는 것이 적다는 데 있다.
18
+ *
19
+ * ── 이 파일 이름 ────────────────────────────────────────────────────────────
20
+ * 테마 파일은 같은 이름이면 파일 단위로 대체된다(builder 의 ThemeOverridePlugin). `ui-tokens.css`
21
+ * 는 앱이 같은 이름을 두지 않는 한 항상 번들에 들어간다. 앱이 값을 바꾸고 싶으면 자기 light.css /
22
+ * dark.css 에서 해당 토큰만 다시 정하면 된다.
23
+ */
24
+
25
+ :root,
26
+ body {
27
+ /* ── 면 ──────────────────────────────────────────────────────────────── */
28
+ /** 페이지 바탕. */
29
+ --ui-bg: var(--md-sys-color-surface);
30
+ /** 카드·표·패널이 놓이는 면. 바탕보다 한 단계 앞이다. */
31
+ --ui-panel: var(--md-sys-color-surface-container-lowest);
32
+ /**
33
+ * 같은 면 안에서 한 단 구분되는 띠 — 구역 머리, 표 머리, 접히는 절의 손잡이.
34
+ *
35
+ * 이것이 없어서 화면들이 `--ui-surface-2` 같은 없는 이름에 `#f3f6f7` 폴백을 달아 썼다. 없는
36
+ * 이름은 야간 모드에서 폴백이 그대로 나온다 — **밝은 띠에 밝은 글자**가 되어 글이 사라진다
37
+ * (검사 명세의 「판단 기준」 머리. 2026-09-05 실측: 대비 1.05:1).
38
+ */
39
+ --ui-panel-2: var(--md-sys-color-surface-container);
40
+ /** 면의 테두리. 회색으로 채우는 대신 이 선으로 구분한다. */
41
+ --ui-line: var(--md-sys-color-outline-variant);
42
+ /** 같은 면 안에서 행을 나누는 선. 테두리보다 흐리다. */
43
+ --ui-line-soft: var(--md-sys-color-surface-container-high);
44
+
45
+ /* ── 글자 ────────────────────────────────────────────────────────────── */
46
+ /** 본문. */
47
+ --ui-ink: var(--md-sys-color-on-surface);
48
+ /** 라벨·보조 설명. */
49
+ --ui-muted: var(--md-sys-color-on-surface-variant);
50
+ /**
51
+ * 곁말·단위·시각처럼 있어도 그만인 글자.
52
+ *
53
+ * ── outline 을 그대로 쓰면 안 읽힌다 (2026-09-05) ──────────────────────
54
+ * md 의 outline 은 **선을 그으라고** 있는 색이다. 글자에 쓰면 어두운 화면에서 3.42:1 밖에
55
+ * 안 나온다(실측: 성숙도 화면의 표준 이름 · 「선언」·「구현」 라벨, 11.8px). 표의 쪽 넘김
56
+ * 화살표는 2.35:1 이었다.
57
+ *
58
+ * 곁말이라도 글자는 글자다. 본문색을 바탕에 섞어 **AA(4.5:1)를 넘기는 자리**로 옮긴다.
59
+ *
60
+ * 60% 로 두었다가 65% 로 올렸다. 60% 를 고를 때 밝은 바탕을 흰색으로 잡았는데 이 제품의 밝은
61
+ * 바탕은 #f0f2f4 다 — 실제로 재니 4.38:1 로 아슬하게 모자랐다(성숙도 화면의 「담당자가 확인」).
62
+ * 65% 면 밝은 화면 5.0 · 어두운 화면 6.2 이고, 본문(--ui-ink)·라벨(--ui-muted)과의 단계는
63
+ * 그대로 남는다.
64
+ */
65
+ --ui-faint: color-mix(in srgb, var(--md-sys-color-on-surface) 65%, var(--md-sys-color-surface));
66
+
67
+ /* ── 강조·상태 ───────────────────────────────────────────────────────── */
68
+ --ui-accent: var(--md-sys-color-primary);
69
+ /** 강조색 위에 얹는 글자·아이콘. 강조색을 칠했으면 글자색은 반드시 이것이다. */
70
+ --ui-on-accent: var(--md-sys-color-on-primary);
71
+ /**
72
+ * 위험색 위에 얹는 글자.
73
+ *
74
+ * 흰색을 박아 두면 야간 모드에서 못 읽는다 — 어두운 팔레트의 error 는 밝은 살구색
75
+ * (rgb 255 138 124)이라 흰 글자와의 대비가 2.28:1 이다. 현장의 「폐기」 단추가 그랬다.
76
+ */
77
+ --ui-on-crit: var(--md-sys-color-on-error);
78
+ /** 강조색을 아주 옅게 깐 면 — 마우스를 올린 행, 선택된 칩. */
79
+ --ui-accent-wash: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
80
+
81
+ /* ── 손이 닿은 자리 ──────────────────────────────────────────────────── */
82
+ /*
83
+ * 누를 수 있는 것 위에 얹는 엷은 막이다. **색이 아니라 글자색을 섞는다** — 그래야 밝은 화면에서는
84
+ * 어둡게, 어두운 화면에서는 밝게 깔린다. 화면들이 `rgba(0,0,0,0.05)` 를 폴백으로 달아 쓰던 자리라,
85
+ * 야간 모드에서 검은 막이 검은 면에 얹혀 아무 일도 일어나지 않았다.
86
+ *
87
+ * 8% · 12% 는 Material 의 state layer 값이다.
88
+ */
89
+ --ui-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
90
+ --ui-active: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
91
+ /* 상태 의미색은 state-color.css 가 정본이다. 여기서는 짧은 이름만 잇는다. */
92
+ --ui-good: var(--status-success-color);
93
+ --ui-warn: var(--status-warning-color);
94
+ --ui-crit: var(--status-danger-color);
95
+ /*
96
+ * 알림 — 「지금 다른 사람의 판단을 기다리는 중」처럼 좋지도 나쁘지도 않은 상태.
97
+ *
98
+ * 셋만 있을 때는 이런 상태에 warn 을 쓰거나 각 화면이 자기 파랑을 골랐다. worklist 의 상태
99
+ * ribbon 이 후자였다 — 제출됨 #428df3 · 상위승인중 #595de5 · 위임됨 #8654b0 이 하드코딩되어
100
+ * 있었고 앱 팔레트를 따르지 않았다.
101
+ */
102
+ --ui-info: var(--status-info-color);
103
+
104
+ /* ── 글꼴 ────────────────────────────────────────────────────────────── */
105
+ /* 숫자·식별자·시각에 쓴다. 자릿수가 흔들리지 않아 값으로 읽힌다. */
106
+ --ui-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
107
+
108
+ /* ── 글자 크기 ───────────────────────────────────────────────────────── */
109
+ /** 화면에서 가장 큰 수 하나(지표 값). */
110
+ --ui-t-hero: 26px;
111
+ /**
112
+ * **화면이 자기 제목을 그릴 때.**
113
+ *
114
+ * ── 왜 단이 하나 더 필요한가 (2026-09-06) ──────────────────────────────
115
+ * 나머지 다섯은 본문 계열이다(지표 값 · 구역 제목 · 본문 · 보조 · 라벨). 「화면 제목」은 그
116
+ * 계열에 없다.
117
+ *
118
+ * 대부분의 화면은 이 단이 필요 없다 — shell 제목줄(16px)이 제목을 갖는다. 필요한 것은 **자기
119
+ * frame 을 가진 화면**이다. twin console 이 그렇고, 그래서 그 화면 21곳이 18px 을 각자 적고
120
+ * 있었다. 어긋난 것이 아니라 이름이 없었다.
121
+ *
122
+ * `--ui-t-hero`(26px)로 대신하지 않는다. 그것은 「가장 큰 수 하나」의 자리이고 실제로 그렇게
123
+ * 쓰이고 있다(설비 OEE 지표 · 숫자패드). 제목이 그 이름을 빌리면 지표 값이 갈 곳을 잃는다.
124
+ */
125
+ --ui-t-page: 18px;
126
+ /** 구역 제목. */
127
+ --ui-t-title: 15px;
128
+ /** 본문·표의 칸. */
129
+ --ui-t-body: 13px;
130
+ /** 보조 설명·범례. */
131
+ --ui-t-small: 11.5px;
132
+ /**
133
+ * 라벨.
134
+ *
135
+ * 처음에는 10px 로 두고 「대문자 라벨 전용」이라고 적었다. 그것은 라틴 문자의 관습이다 —
136
+ * 작은 대문자는 소문자와 모양이 달라서 작아도 라벨로 읽힌다.
137
+ *
138
+ * **한국어에는 대소문자가 없다.** `text-transform: uppercase` 가 아무 일도 하지 않고, 남는 것은
139
+ * 10px 짜리 작은 글씨뿐이다. 이 제품의 화면은 한국어가 먼저이므로 11px 로 둔다.
140
+ * (`work-shift` 화면에서 절 제목이 안 읽힌다고 MES 레인이 알려 왔다.)
141
+ *
142
+ * 대문자 변환은 그대로 둔다 — 한국어에 해가 없고 라틴 라벨에는 도움이 된다.
143
+ */
144
+ --ui-t-micro: 11px;
145
+
146
+ /*
147
+ * 화면에서 가장 큰 수 — 서서 보는 작업대용. `--ui-t-hero` 는 앉아서 보는 관리 화면 기준이라
148
+ * 현장에서는 작다. 두 값을 나눠 두어야 같은 컴포넌트를 두 곳에서 쓸 수 있다.
149
+ */
150
+ --ui-t-display: 40px;
151
+
152
+ /* ── 손으로 누르는 자리 ──────────────────────────────────────────────── */
153
+ /*
154
+ * 현장 화면은 마우스가 아니라 손가락이 누른다. 크기를 화면마다 정하면 어떤 화면은 44px 이고
155
+ * 어떤 화면은 96px 이 된다 — 같은 사람이 같은 장갑으로 누르는데.
156
+ *
157
+ * 세 단계면 충분하다. 값의 근거는 각각 다르다.
158
+ */
159
+ /** 손가락 최소 — WCAG 2.2 Target Size(AAA)가 정한 44px. 마우스 화면에도 이 아래로 두지 않는다. */
160
+ --ui-tap: 44px;
161
+ /** 장갑 낀 손. 목장갑을 끼면 접촉 면적이 넓어져 44px 에서는 옆 버튼이 함께 눌린다. */
162
+ --ui-tap-glove: 64px;
163
+ /** 서서 보는 작업대. 팔을 뻗어 누르므로 조준이 거칠다. */
164
+ --ui-tap-station: 96px;
165
+
166
+ /* ── 모서리 ──────────────────────────────────────────────────────────── */
167
+ /** 카드·표. */
168
+ --ui-r: 10px;
169
+ /** 버튼·칩처럼 작은 것. */
170
+ --ui-r-small: 6px;
171
+
172
+ /* ── 읽기 폭 ─────────────────────────────────────────────────────────── */
173
+ /*
174
+ * 넓은 화면에서 한 줄이 너무 길어지면 눈이 다음 줄의 첫머리를 놓친다. 좁은 화면에서는 폭을 다
175
+ * 써야 하므로 min() 으로 잡는다. 값이 px 인 이유: 한글은 전각이라 ch(숫자 0 의 폭)로 재면 실제
176
+ * 글자 수와 두 배 가까이 어긋난다.
177
+ */
178
+ --ui-measure: min(1080px, 100%);
179
+ }
180
+
181
+ /*
182
+ * ── 글자색의 바닥 (2026-09-05) ──────────────────────────────────────────────
183
+ * body 에 color 가 없었다. 자기 색을 정하지 않은 부품은 브라우저 기본값인 **검정**으로 그려지고,
184
+ * 밝은 화면에서는 티가 나지 않다가 어두운 화면에서 사라진다.
185
+ *
186
+ * [재봤음] 2026-09-05 · 작업지시 화면(야간) 「레시피 전체」 체크상자 — 검정 글자, 대비 1.18:1.
187
+ * 부품 하나를 고치는 대신 바닥을 깐다. 자기 색을 정한 부품은 그대로 이긴다.
188
+ */
189
+ body {
190
+ color: var(--ui-ink);
191
+ }
@@ -8,6 +8,7 @@ export * from './middlewares/index.js';
8
8
  export * from './bootstrap-hooks.js';
9
9
  export * from './graphql-local-client.js';
10
10
  export * from './service/index.js';
11
+ export * from './typeorm/long-text-column.js';
11
12
  export * from './typeorm/encrypt-transform.js';
12
13
  export * from './typeorm/encrypt-json-transform.js';
13
14
  export * from './typeorm/json5-transform.js';
@@ -11,6 +11,7 @@ tslib_1.__exportStar(require("./middlewares/index.js"), exports);
11
11
  tslib_1.__exportStar(require("./bootstrap-hooks.js"), exports);
12
12
  tslib_1.__exportStar(require("./graphql-local-client.js"), exports);
13
13
  tslib_1.__exportStar(require("./service/index.js"), exports);
14
+ tslib_1.__exportStar(require("./typeorm/long-text-column.js"), exports);
14
15
  tslib_1.__exportStar(require("./typeorm/encrypt-transform.js"), exports);
15
16
  tslib_1.__exportStar(require("./typeorm/encrypt-json-transform.js"), exports);
16
17
  tslib_1.__exportStar(require("./typeorm/json5-transform.js"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../server/index.ts"],"names":[],"mappings":";;;AAAA,gEAAqC;AACrC,4EAAiD;AACjD,qEAA0C;AAC1C,2DAAgC;AAChC,sDAA2B;AAC3B,oEAAyC;AACzC,iEAAsC;AACtC,+DAAoC;AACpC,oEAAyC;AACzC,6DAAkC;AAElC,yEAA8C;AAC9C,8EAAmD;AACnD,uEAA4C;AAC5C,uEAA4C","sourcesContent":["export * from './migrations/index.js'\nexport * from './initializers/naming-strategy.js'\nexport * from './initializers/database.js'\nexport * from './utils/index.js'\nexport * from './pubsub.js'\nexport * from './pubsub-log-transport.js'\nexport * from './middlewares/index.js'\nexport * from './bootstrap-hooks.js'\nexport * from './graphql-local-client.js'\nexport * from './service/index.js'\n\nexport * from './typeorm/encrypt-transform.js'\nexport * from './typeorm/encrypt-json-transform.js'\nexport * from './typeorm/json5-transform.js'\nexport * from './typeorm/round-transform.js'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../server/index.ts"],"names":[],"mappings":";;;AAAA,gEAAqC;AACrC,4EAAiD;AACjD,qEAA0C;AAC1C,2DAAgC;AAChC,sDAA2B;AAC3B,oEAAyC;AACzC,iEAAsC;AACtC,+DAAoC;AACpC,oEAAyC;AACzC,6DAAkC;AAElC,wEAA6C;AAC7C,yEAA8C;AAC9C,8EAAmD;AACnD,uEAA4C;AAC5C,uEAA4C","sourcesContent":["export * from './migrations/index.js'\nexport * from './initializers/naming-strategy.js'\nexport * from './initializers/database.js'\nexport * from './utils/index.js'\nexport * from './pubsub.js'\nexport * from './pubsub-log-transport.js'\nexport * from './middlewares/index.js'\nexport * from './bootstrap-hooks.js'\nexport * from './graphql-local-client.js'\nexport * from './service/index.js'\n\nexport * from './typeorm/long-text-column.js'\nexport * from './typeorm/encrypt-transform.js'\nexport * from './typeorm/encrypt-json-transform.js'\nexport * from './typeorm/json5-transform.js'\nexport * from './typeorm/round-transform.js'\n"]}