/*
* 화면 공통 규칙 -- 한 줄로 불러온다.
*
* 화면은 이 파일 하나만 걸면 된다. 어디에 무엇이 있는지는 아래 순서가 말한다.
* 순서를 바꾸면 나중 것이 앞의 것을 덮으므로, 토큰이 가장 앞이어야 한다.
*
* ui-tokens.css 색 · 글자 눈금 · 간격 · 깊이 · 뼈대 치수 (값을 정하는 유일한 자리)
* ui-base.css 바탕 · 레이아웃 · 카드 격자 · 코드 예제
* ui-shell.css 화면 뼈대 (사이드바 · 머리 · 빵부스러기 · 액션 바)
* ui-parts.css 카드 · 정보 나열 · 버튼
* ui-dash.css 대시보드의 부품 (계기 타일 · 구성도 · 자주 보는 핀 · 겹쳐 뜨는 창)
* ui-plan.css 대시보드의 도면 (시제품에서 그대로 옮긴 것)
* ui-drawer.css 서랍함 -- 보기 레일 · 줄기 · 상세칸 · 핀 격자
* ui-timeline.css 조작 이력의 시간 줄
* ui-sheet.css 구성의 표계산형 -- 이름 붙이기 · 별 달기
* ui-map.css 현장 지도 (본사 화면들이 함께 쓴다)
* ui-forms.css 폼 · 표 · 목록 · 핀 목록
* ui-status.css 상태 표식 · 알림 · 토스트 · 진행 막대 · 로그판
* ui-help.css 도움말 · 반응 · 잠금 표시 · 동의 자리
*/
/* ── ui-tokens.css ─────────────────────────────── */
/*
* 디자인 토큰 -- 이 제품의 색·글자·간격·깊이를 정하는 유일한 자리.
*
* 값을 여기서만 정한다. 화면이나 부품 CSS 에 색·간격을 직접 적지 않는다.
*
* ══ 2026-10-04 판 — 제로베이스 검토 ═══════════════════════════
*
* 앞 판을 지킬 것으로 두지 않고 색·글꼴·모서리를 처음부터 다시 쟀다. 네 가지가 나왔다.
*
* 1. **`--accent` 와 `--info` 가 같은 값이었다**(#2f6bff). soft·line 짝까지 같았다.
* 색은 설비 상태의 뜻으로 쓰기로 해 놓고(아래 <상태> 절) 상태색 하나가 작용색과
* 겹쳐 있었던 것이다. 그래서 **파란 배지가 누를 수 있는 것처럼** 보였다.
* `--info` 를 무채색으로 내렸다. 뜻이 없는 상태는 색도 없어야 한다.
*
* 2. **강조색이 AA 최저선에 정확히 걸쳐 있었다.** #2f6bff 는 흰 바탕 대비 4.50 --
* 본문 기준 4.5 와 소수점까지 같다. 채도는 100%. 가장 자주 나오는 색이 가장 강한
* 색이면서 동시에 읽힘의 바닥이었다.
*
* 3. **브랜드 남색이 화면에 없었다.** `--shell` 갈래 다섯을 선언해 두고 실제로 부르는
* 곳은 다섯, 그중 셋은 아래 <옛 이름> 의 별명이다. 남는 건 머리단의 23px 네모 하나.
*
* 4. **글꼴을 고른 적이 없었다.** 스택에서 Pretendard 가 Segoe UI 뒤에 있어 윈도에서는
* 걸리지 않았고, Segoe UI 에 한글이 없어 **한글만 맑은 고딕으로** 떨어지고 있었다.
*
* 그래서 강조색을 **브랜드 남색에서 끌어올려** 다시 골랐다(#0a1a2f 214° → #1d5aa0 212°).
* 어디서 가져온 파랑이 아니라 우리 남색을 쓸 수 있는 밝기까지 올린 값이다.
*
* 중간에 페트롤 틸(#0e6b78)로 가려다 **버렸다** -- 재 보니 정상 녹색과 색상각이 31° 밖에
* 안 떨어져, 지금 파랑(63°)보다 오히려 가까웠다. 램프가 녹색인 표 옆에 청록 단추를 두면
* 같은 가족으로 읽힌다. 작용색은 **녹·황·적 어느 쪽과도 55° 이상** 떨어져야 한다.
*
* **무채색 바탕 + 파랑 액센트.** 초록은 설비 상태 전용.
*
* ── 앞 판이 낡아 보인 까닭 ───────────────────────────────────
*
* 색을 세 번 갈아입혔는데도 "디자인이 그대로" 라는 지적이 이어졌다. 이유는 색이 아니라
* **짜임새**였다 -- 좌측 아이콘 레일, 숫자 다섯 칸 띠, 그 아래 카드와 표. 그 틀이
* 2010년대 관리자 화면의 틀이라 토큰을 아무리 바꿔도 같은 화면이 나왔다.
*
* 그래서 이번 판은 토큰만 바꾸지 않는다. 뼈대(레일→위 두 줄)와 화면의 형태(도면 · 트리 ·
* 타임라인 · 표계산)를 함께 바꾼다. 여기서는 그 형태들이 공통으로 쓸 **부품의 값**만 정한다.
*
* ── 무엇이 달라졌나 ──────────────────────────────────────────
*
* 1. **회색이 무채색이 되었다.** 옛 회색은 푸른 기가 섞여 있어(#f5f8fc) 파랑 옆에서
* 탁했다. 바탕·선·글자를 전부 중립 회색으로 옮겨, 색이 붙은 것은 **뜻이 있는 것**
* 뿐이게 한다.
*
* 2. **어두운 판독부를 걷었다.** 흰 화면에 남색 띠 하나를 얹으면 붙인 스킨으로 보인다.
* 값은 상태 한 줄로 훑고, 화면은 조작할 것에 자리를 준다.
*
* 3. **모서리를 다시 키웠다(6px → 10px).** 6px 은 정밀해 보이라고 깎은 것이었는데,
* 선으로만 층을 만드는 화면에서는 각진 상자가 표처럼 보였다. 카드는 10px, 안에 드는
* 작은 것은 8px.
*
* ── 지키는 것 ────────────────────────────────────────────────
*
* 색만으로 말하지 않는다. 색을 못 보는 사람에게는 아무 말도 하지 않는 셈이다.
* 어디서든 색과 함께 글자나 모양을 준다. 손가락으로 누르는 것은 --touch 아래로
* 내려가지 않는다 -- 밀도가 그것을 이기지 못한다.
*
* **폭으로 다른 디자인을 만들지 않는다**(docs/검토지침.md §3). 여기에 폭을 묻는 값은
* 하나도 없고, 좁아질 때 달라지는 것은 요소의 줄바꿈뿐이다.
*/
/*
* ── 글꼴 파일 (2026-10-04) ────────────────────────────────
*
* Pretendard. 한국어 업무용 화면에서 사실상의 표준이고, 숫자가 폭이 고르다 --
* 표를 세로로 훑을 때 자릿수가 어긋나지 않는다.
*
* ── 왜 직접 깎았나 ────────────────────────────────────────
*
* Pretendard 가 내주는 다이내믹 subset 은 조각이 92개인데 **한 화면이 11~14개를 당긴다.**
* 재 보니 화면당 274~358KB 에 왕복이 열넷이다. 문서→꾸밈을 529ms 에서 102ms 로 줄여 놓은
* 자리라 그만한 값을 치를 수 없다.
*
* 굵기 축 400~700 만 남김 (45~920 전부 두면 309KB → 438KB)
* 한글 완성형 KS X 1001 2,350자
* ※ 유니코드 음절 전체(11,172자)를 담으면 1.7MB 다. 2,350자로 실제 한국어는
* 거의 다 덮이고, 빠진 음절은 그 **글자 하나만** 시스템 글꼴로 떨어진다
* 그 밖 라틴 · 문장부호 · ₩ · 화살표 · 네모/동그라미 기호
* 결과 316KB 한 장. 400·500·600·700 이 이 한 파일에서 나온다
*
* 다시 깎으려면 `node tools/make-font.mjs`.
*
* ── preload 를 걸지 않는다 ────────────────────────────────
*
* 316KB 를 머리에서 당기면 **이 꾸밈 자신과 대역을 다툰다.** 꾸밈은 그려야 멈춤이 풀리는
* 것이라(hq/console.css 의 await-shell) 그쪽이 밀리면 고쳐 둔 것이 도로 나빠진다.
* 느린 줄에서 preload 가 화면을 더 늦추는 것이 바로 그 모양이다.
*
* `swap` 이다 -- 글자는 **시스템 글꼴로 즉시** 서고, 글꼴이 닿으면 바뀐다. 한 번 받으면
* 오래 품으므로(edge/worker.mjs 의 KEEP_FONT) 바뀌는 것이 보이는 것은 처음 한 번뿐이다.
*/
@font-face {
font-family: "Pretendard Variable";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/app/font/pretendard-kr.woff2") format("woff2-variations");
}
:root {
/*
* ── 바탕과 면 ───────────────────────────────────────────
*
* **바탕이 희다.** 카드도 희다. 둘을 가르는 것은 선이다(--line).
* 아래 두 겹은 자리를 눌러 두는 데만 쓴다 -- 표 머리, 접힌 자리, 진행 막대의 홈.
*/
--canvas: #ffffff;
--surface: #ffffff;
--surface-2: #f4f6f9; /* 면 위의 한 겹 아래 (표 머리, 접힌 자리) */
--surface-3: #eceff4; /* 눌린 자리, 진행 막대의 홈 */
/*
* ── 구조 (사이드바·상단 머리) ───────────────────────────
*
* 네이비. 옛 값보다 어둡고 **푸른 쪽**으로 옮겼다 -- 옛 것은 초록이 조금 섞여 있어
* 라이트 블루와 나란히 두면 탁했다.
*/
--shell: #0a1a2f;
--shell-2: #102a4c; /* 사이드바 안에서 한 단계 밝은 면 */
--shell-line: #1c3a63;
--shell-ink: #eaf2fb;
--shell-ink-2: #8ba6c9;
/*
* ── 글자 · 무채색 ──────────────────────────────────────
*
* 푸른 기를 뺐다. 옛 값(#46536b · #6a778d)은 파랑 옆에 서면 <흐린 파랑>으로 보여,
* 액센트가 무엇을 가리키는지 흐려졌다.
*/
--ink: #11161d; /* 본문·숫자 */
--ink-2: #4d5767; /* 설명 */
/*
* 라벨·보조 설명. **두 번 올렸다**(#8a93a3 → #79838f → #636d7c, 2026-10-04).
*
* 두 번째 값도 모자랐다. 흰 바탕에서는 3.85 로 아슬아슬했는데, 이 글자가 실제로 서는
* 자리는 흰 바탕이 아니라 **`--surface-2` 를 깐 띠**다(판독부·표 머리). 거기서는
* 3.56 까지 떨어진다. 화면에 띄워 재 보고서야 알았다.
*
* 지금 값은 흰 바탕 5.24 · 옅은 바탕 4.84 다. 둘 다 본문 기준(4.5)을 넘는다.
*/
--ink-3: #636d7c;
/*
* **비활성과 자리표시 전용이다.** 흰 바탕 대비 2.14 -- 읽으라고 두는 글자에 쓰면
* 안 된다. 실제로 빈 목록 안내문과 판독부 보조 줄이 이 색이어서 1.98 로 떠 있었다.
* 읽을 글은 `--ink-3` 이다.
*/
--ink-4: #aab2be;
/*
* ── 선 ─────────────────────────────────────────────────
* 흰 바탕에서 층을 만드는 것이 이 둘이다. 그림자가 아니라.
*/
--line: #e4e8ee; /* 기본 경계 */
--line-2: #ccd3dc; /* 강조 경계 (입력칸) -- 카드 테두리를 걷은 뒤로 선이 층을 혼자 만든다 */
/*
* ── 라이트 블루 · 이 제품이 사람에게 거는 말 ────────────
*
* 두 가지 파랑을 쓴다. 하나로는 안 된다 --
*
* --accent 흰 바탕에 **글자와 단추**로 설 수 있을 만큼 진하다.
* 밝은 파랑을 그대로 쓰면 흰 바탕에서 글자가 읽히지 않는다.
* --accent-bright 네이비 위에 서는 **라이트 블루.** 사이드바의 켜진 줄, 초점 테두리,
* 진행 막대처럼 어두운 데 얹거나 선으로 긋는 자리에 쓴다.
*
* ── 값을 고른 기준 (2026-10-04) ────────────────────────
*
* 셋을 동시에 만족해야 한다. 하나라도 어기면 다른 색을 고른다.
*
* 흰 바탕 대비 4.5 이상 -- 글자로 설 수 있어야 한다
* --ok · --warn 과 55° 이상 -- 상태색과 같은 가족으로 읽히면 안 된다
* --ink 와 대비 1.6 이상 -- 본문 먹색과 구분돼야 누를 것으로 보인다
*
* #1d5aa0 : 6.95 / 56° / 2.61. 색상각 212° 로 --shell(214°)과 같은 줄기다.
*/
--accent: #1d5aa0;
--accent-strong: #16477f; /* 눌렀을 때 */
--accent-bright: #6ea2ff; /* 어두운 면 위 · 선 · 초점 */
--accent-soft: #eaf1f9; /* 선택된 줄의 바탕 */
--accent-line: #c2d7ec;
/*
* ── 상태 ──────────────────────────────────────────────
*
* **설비의 상태에만 쓴다.** 켜졌는가·정상인가·고장인가.
* 제품이 사람에게 거는 말(누를 것·고른 것·지금 여기)은 파랑이 맡는다 -- 그것을
* 섞어 두었더니 첫 화면이 초록으로 덮여, 정작 초록이 뜻을 잃었다.
*/
--ok: #0f7a4f; --ok-soft: #eaf5ef; --ok-line: #a9dcc6;
--warn: #9a5b00; --warn-soft: #fbf3e6; --warn-line: #f0d5a6;
--err: #b32424; --err-soft: #fbecec; --err-line: #f2c0c0;
/*
* `--info` 는 **`--accent` 와 같은 값이었다**(#2f6bff). soft·line 짝까지 똑같았다.
* 그래서 "참고" 뜻의 배지가 파랗게 떠서, 누를 수 있는 것처럼 보였다 -- 이 콘솔에서
* 파랑은 <누르시오> 라는 말이다.
*
* 무채색으로 내린다. **정보는 상태가 아니다.** 켜졌는지 고장인지를 말하지 않는 것은
* 색을 가질 까닭이 없고, 색을 빼면 정작 색이 붙은 줄이 눈에 든다.
*/
--info: #4d5767; --info-soft: #f1f3f6; --info-line: #d7dbe2;
/*
* ── 사람이 붙인 표시 ──────────────────────────────────
* 자주 보는 핀의 별이 이 색이다. **경고가 아니다** -- 경고의 주황(--warn)을 쓰면
* 별을 붙인 줄이 전부 "무슨 문제가 있는 줄" 로 읽힌다. 상태가 아니라 사람이 붙인
* 표시라는 것을 색으로 갈라 둔다.
*/
--mark: #b58200; --mark-soft: #fdf8e6; --mark-strong: #8a6300;
/*
* ── 이름표 · **이 창이 무엇인가** ─────────────────────
*
* 머리단의 26px 네모 하나에만 쓴다(app/ui-shell.css). 창을 여럿 늘어놓고 훑을 때
* 이 색이 먼저 걸린다 -- 화면 어디에도 색 띠가 서지 않는 대신, 이 한 자리가 그 일을
* 전부 맡는다.
*
* **네 화면이 각각 제 색을 갖는다.** 한때 셋을 한 색의 밝기로만 갈랐는데, 그러면
* 나란히 놓고 볼 때 <같은 것의 정도 차이> 로 읽힌다. 이 넷은 정도가 아니라 **다른
* 자리**다 -- 설비에 붙은 보드와 고객 사무실은 같은 것의 밝고 어두움이 아니다.
*
* 값을 여기 둔다. 한때 `ui-shell.css` 안에 #17626f 처럼 직접 적었는데, 그것은 이
* 파일 머리가 금지한 바로 그 일이다 -- 색이 두 곳에 살면 한쪽만 고쳐진다.
*
* ── 고른 기준 ────────────────────────────────────────
*
* 1. **상태색을 안 쓴다.** 초록·주황·빨강은 설비 상태의 몫이다. 정체에 끌어 쓰면
* 멀쩡한 화면이 경고로 읽힌다(그래서 금색 `--mark` 를 여기서 걷었다 -- 주황
* 계열이라 같은 머리단의 `구독 발급 불가` 와 겹쳤다)
* 2. **우리 화면은 상징색이다.** 이 제품의 얼굴에 빌려 온 색을 두면 정작 상징색이
* 아무 데도 안 선다
* 3. 남색 바탕 위에서 재서 고른다. 그림 글자는 각 바탕에서 읽히는 쪽으로 뒤집는다
*/
--sign-field: #3fb6c9; /* 현장 제어기 -- 설비에 붙어 있는 보드. 청록 */
--sign-center: #2c5282; /* 중앙 제어기 -- 그 현장의 보드들을 쥔 보드. 네이비 */
--sign-hq: #a3a9b0; /* 고객사 원격 관제 -- 고객 사무실에서 본다. 회색 */
--sign-vendor: var(--accent-bright); /* iotop 공급 관리 -- **우리 화면.** 상징색 */
/*
* ── 네이비 네모는 **테두리가 있어야 보인다** ────────────
*
* 머리단 바탕이 네이비다(`--shell`). 그래서 네이비 이름표는 어떤 값을 골라도 바와
* 안 갈린다 -- 재 보니 네이비라 부를 수 있는 가장 밝은 값도 바 위 대비 2.81 이고,
* 3 을 넘기려면 그때부터는 네이비가 아니라 파랑이다. 그러면 상징색과 겹친다.
*
* 색을 바꾸는 대신 **모양을 세운다.** 옅은 테두리 한 줄이면 네모의 윤곽이 서고,
* 안의 네이비는 네이비로 남는다. 다른 셋은 바와 충분히 갈리므로 테두리가 없다 --
* 없어도 되는 데 두르면 그쪽이 더 또렷해져서, 정작 흐린 것이 더 흐려 보인다.
*/
--sign-edge: rgba(255, 255, 255, .34);
/*
* ── 모서리 ─────────────────────────────────────────────
*
* 6 → 10 으로 올렸다가 **다시 내렸다(2026-10-04).** 10px 은 각진 상자가 표의 칸으로
* 보이는 것을 막으려고 키운 값인데, 그 문제는 모서리가 아니라 **카드 테두리**가 만들고
* 있었다. 테두리를 걷고 머리단에 굵은 선 한 줄을 그으니 구획이 또렷해져, 모서리를
* 키워 둘 까닭이 없어졌다.
*
* 기계를 다루는 화면에 10px 은 물렁하다. 이 제품이 붙는 곳은 배전반이다.
*/
--r-sm: 2px; /* 카드 안에 드는 것 (단추·입력칸·배지) */
--r: 3px; /* 카드 · 구획 */
--r-lg: 5px; /* 떠 있는 것 (겹쳐 뜨는 창) */
--r-pill: 999px;
/*
* ── 깊이 ──────────────────────────────────────────────
*
* **거의 쓰지 않는다.** 층은 선이 만든다. 그림자는 <이것은 다른 것 위에 떠 있다> 를
* 말할 때만 -- 겹쳐 뜨는 창, 열린 목록. 카드에는 한 겹의 아주 옅은 것만 둔다.
*/
--sh-xs: 0 1px 1px rgba(13, 17, 23, .04);
--sh-sm: 0 1px 2px rgba(13, 17, 23, .06);
--sh-md: 0 4px 12px rgba(13, 17, 23, .08);
--sh-lg: 0 16px 40px rgba(13, 17, 23, .16);
/*
* ── 초점 ──────────────────────────────────────────────
* 키보드로 다니는 사람에게 **지금 어디인가**를 말한다. 한 곳에서 정해 두어야
* 화면마다 다른 테두리가 뜨지 않는다.
*/
--focus: 0 0 0 3px rgba(29, 90, 160, .26);
/*
* 어두운 면 위의 초점(머리단). 위의 것은 남색 위에서 남색이라 **안 보인다** --
* 키보드로 다니는 사람이 머리단에 들어서는 순간 자기가 어디 있는지를 잃는다.
*/
--focus-bright: 0 0 0 3px rgba(110, 162, 255, .45);
/* ── 간격 ──────────────────────────────────────────────── */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
/*
* ── 글자 눈금 ─────────────────────────────────────────
*
* 본문은 그대로 두고 **큰 것만 키웠다.** 이 제품에서 사람이 멀리서 읽는 것은
* 숫자다 -- 몇 대가 붙었나, 몇 개가 켜졌나. 본문을 줄이면 키오스크에서 읽히지 않는다.
*
* **반 픽셀을 걷었다(2026-10-04).** 11.5 / 12.5 / 13.5 은 세 단이 서로 1px 차이라
* 나란히 두면 구분이 안 됐다 -- 눈금이 셋인데 보이기는 하나였다. 정수로 내리고
* 본문을 13.5 → 14 로 한 칸 올린다. 하루 종일 표를 읽는 화면이다.
*/
--t-xs: 12px; /* 라벨 · 배지 */
--t-sm: 13px; /* 보조 설명 */
--t-md: 14px; /* 본문 · 표 */
--t-lg: 16px; /* 카드 제목 */
--t-xl: 24px; /* 화면 제목 */
--t-2xl: 32px; /* 숫자 강조 -- 어두운 판독부를 걷은 뒤로 쓰는 자리가 적다 */
/*
* 글꼴.
*
* **Pretendard 를 맨 앞으로 옮겼다(2026-10-04).** 전에는 Segoe UI 뒤에 있었다. 그러면
* 윈도에서는 영영 걸리지 않고, 게다가 Segoe UI 에는 한글이 없어서 **한글만 맑은 고딕으로**
* 떨어진다 -- 영문과 한글이 서로 다른 글꼴로 나란히 서 있었다는 뜻이다. 고른 글꼴이
* 아니라 남은 글꼴이었다.
*
* ── 인터넷에서 받아 오지 않는다. **우리가 들고 있다** ──
*
* 한때 이 자리에 <웹 글꼴을 받아 오지 않는다 -- 현장에는 인터넷이 없다> 고 적혀 있었다.
* 맞는 걱정인데 결론이 한 칸 어긋나 있었다. 막아야 하는 것은 **남의 서버에서 받아 오는
* 것**이지 글꼴 파일 자체가 아니다.
*
* 그래서 깎아서 **제품에 넣는다**(app/font/). 보드가 제 디스크에서 스스로 내주므로
* 인터넷이 끊긴 현장에서도 그대로 서고, 공급 관리 콘솔·고객사 관제·보드 키오스크가
* **한 글꼴로** 선다. 같은 화면이 어디서 열리느냐에 따라 두 모습이 되지 않는다.
*
* 아래 @font-face 가 그 파일을 건다. 왜 이만큼만 깎았는지는 거기 적어 두었다.
*/
--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Segoe UI Variable Text", "Segoe UI", "Noto Sans KR", "Malgun Gothic",
"Apple SD Gothic Neo", sans-serif;
/*
* 고정폭 짜임의 **끝에 Pretendard 를 둔다.**
*
* 글꼴 되돌림은 글자 하나씩 일어난다 -- 영문·숫자는 앞의 고정폭 글꼴에서 찾히므로
* 칸이 그대로 맞고, 한글만 뒤로 밀려 Pretendard 로 떨어진다.
*
* 이 줄이 없었을 때 보드의 **조작 패널 편집기가 통째로 네모**였다. 우리가 싣는 글꼴은
* Pretendard 하나뿐인데 그것은 `--font` 에만 걸려 있었고, 어플라이언스 이미지에는
* 한글 글꼴이 한 벌도 없을 수 있다 -- 실제로 검증한 기계에 0개였다. 그 화면은
* 한글 주석으로 가득한 코드를 보여 주는 화면이라, 쓸 수가 없는 화면이 된다.
*
* 칸이 어긋나는 것과 글자가 안 보이는 것 중에서는 어긋나는 쪽이 낫다.
*/
--mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, "D2Coding",
"Pretendard Variable", Pretendard, monospace;
/* ── 뼈대 치수 ─────────────────────────────────────────── */
/*
* ── 명령 레일 ─────────────────────────────────────────
*
* 216px 짜리 목록이었다. 구획이 다섯인데 그 다섯을 세로로 늘어놓느라 화면 가로의
* 1/6 을 늘 쓰고 있었고, 정작 그 자리에 적히는 것은 두세 글자였다.
*
* 레일은 **아이콘과 아주 작은 글자**를 세로로 쌓는다. 아이콘만 두지 않는 이유는
* 이 제품을 처음 만지는 사람이 설치기사이기 때문이다 -- 그림만으로는 <관제> 와
* <현장 제어기> 를 가를 수 없다.
*/
--nav-w: 76px;
--nav-w-min: 76px; /* 접히지 않는다. 이미 가장 좁다 */
--head-h: 60px; /* 위 머리. 문맥 제목이 서므로 한 단계 높다 */
--bar-h: 48px; /* 액션 바 */
--touch: 36px; /* 손가락으로 누르는 것의 최소 높이. 밀도가 이것을 이기지 못한다 */
--page-max: 1440px;
/*
* 본문 좌우 여백. **상단바 · 머리 · 형제 줄 · 본문이 같은 선에 서게 하는 값**이다.
* 쓰는 곳은 ui-base.css 의 .page 와 ui-shell.css 의 세 자리다 -- 한 곳만 고치면
* 딱 그만큼 어긋나고, 어긋난 선은 맞춘 것보다 눈에 더 걸린다.
*/
/*
* 본문 좌우 여백. **폭을 따라 저절로 준다** -- 좁은 화면에서 여백을 줄이던 갈림목을
* 걷은 자리다(app/ui-help.css 의 주석). 넓으면 24px, 390px 짜리 화면에서는 15px 쯤.
*/
--page-pad: min(var(--s-6), 4vw);
/*
* ── 움직임 ────────────────────────────────────────────
* 빠르게 시작해 부드럽게 선다. 기계가 반응하는 느낌이지 애니메이션이 아니다.
*/
--ease: cubic-bezier(.16, 1, .3, 1);
--fast: .12s;
--med: .2s;
}
/* 움직임을 원치 않는 사람에게는 움직이지 않는다. 현장에서 어지럼을 호소하는 경우가 있다. */
@media (prefers-reduced-motion: reduce) {
:root { --fast: 0s; --med: 0s; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/*
* ── 옛 이름 ────────────────────────────────────────────────
* 화면과 부품이 아직 옛 이름으로 색을 부른다. 한꺼번에 바꾸면 무엇이 깨졌는지 알 수 없으므로
* 여기서 새 값으로 이어 준다. 화면을 하나씩 뼈대로 옮기면서 이 묶음도 함께 줄여 나간다.
*/
:root {
--navy-900: var(--shell);
--navy-800: var(--shell);
--navy-700: var(--shell-2);
--navy-600: var(--shell-line);
--blue-700: var(--accent-strong);
--blue-600: var(--accent);
--blue-100: var(--accent-line);
--blue-50: var(--accent-soft);
--gray-50: var(--surface-2);
--gray-100: var(--surface-2);
--gray-200: var(--line);
--gray-300: var(--line-2);
--gray-400: var(--ink-4);
--gray-500: var(--ink-3);
--gray-600: var(--ink-2);
--gray-700: var(--ink);
--white: var(--surface);
--black: var(--ink);
--ok-700: var(--ok); --ok-50: var(--ok-soft);
--warn-700: var(--warn); --warn-50: var(--warn-soft);
--err-700: var(--err); --err-50: var(--err-soft);
/*
* `--amber-50` 은 이 갈래에서 빠져 있었다. 본사 화면의 주의 알림 하나가 그 이름을
* 쓰면서 `var(--amber-50, #fffbeb)` 처럼 **뒤에 색을 하나 더 적어** 버티고 있었는데,
* 그 순간 그 알림만 팔레트 바깥의 노랑이 된다 -- 이름이 없어서 생긴 색이다.
*/
--amber-50: var(--warn-soft);
/*
* `--r-md` 는 **정의된 적이 없었다.** 아홉 자리가 그 이름으로 모서리를 정하고 있었고
* (ui-forms.css · ui-shop.css · hq/console.css), 없는 이름은 조용히 무시되므로 그
* 아홉 자리만 **각진 모서리**로 떴다 -- 같은 화면 안에서 어떤 상자는 둥글고 어떤 것은
* 각져 있었다. 눈금은 셋뿐이므로(sm · 기본 · lg) 가운데 이름은 기본에 붙인다.
*/
--r-md: var(--r);
--radius: var(--r);
--radius-sm: var(--r-sm);
--shadow-sm: var(--sh-xs);
--shadow: var(--sh-sm);
}
/* ── ui-base.css ─────────────────────────────── */
/*
* 공용 디자인 시스템
*
* 업무용 도구의 톤앤매너를 유지한다. 현장에서 오래 들여다보는 화면이라
* 장식보다 밀도와 가독성이 먼저다.
*
* 색 네이비(구조) · 그레이(면과 경계) · 블루(주요 동작에만) · 화이트(작업면) · 블랙(본문)
* 여백 4px 배수
* 모서리 4~6px 로 절제
* 강조는 큰 색면이 아니라 작은 배지와 굵기로
*
* setup / slave / master / front 가 모두 이 한 벌을 쓴다.
*/
/* 색·간격·글자 눈금은 app/ui-tokens.css 한 곳에 있다. 여기서는 쓰기만 한다. */
* { box-sizing: border-box; }
/*
* hidden 속성이 항상 이기게 한다.
* 아래에서 .badge 나 .check 처럼 display 를 지정하면 그 규칙이 브라우저 기본
* [hidden] { display: none } 보다 우선해, 감춰야 할 요소가 그대로 보인다.
*/
[hidden] { display: none !important; }
html, body {
margin: 0;
padding: 0;
background: var(--gray-50);
color: var(--black);
font-family: var(--font);
font-size: var(--t-md);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
/*
* ── 한글은 **낱말 안에서 끊지 않는다** (2026-10-04) ────────
*
* CSS 의 기본값(`normal`)은 한글을 **아무 글자 사이에서나** 끊는다. 좁은 칸에 들어간
* 한 줄이 <회선 없 / 음> 처럼 갈라진다. 실제로 보드 대시보드의 중앙 제어기 카드가
* 그랬다 -- 148px 칸에서 <없음> 이 두 줄로 쪼개져 있었다.
*
* 이 규칙은 저장소가 이미 알고 있었다. 다만 **스물두 곳에 손으로 하나씩** 적혀 있어서,
* 눈에 띈 자리만 고쳐져 있었다. 한 곳에 두면 새로 만드는 화면도 저절로 따른다.
*
* 짝으로 `overflow-wrap` 을 둔다. 낱말을 안 끊기로 했으니 긴 식별자(현장 번호 ·
* 주소)가 칸을 넘칠 수 있는데, 넘치는 것보다는 끊는 편이 낫다. `break-word` 를
* 쓰는 이유는 `anywhere` 가 flex·grid 의 최소 폭 셈을 바꿔 짜임을 흔들기 때문이다.
*
* 일부러 끊어야 하는 자리는 제 규칙으로 덮는다(ui-dash.css 의 `break-all`).
*/
word-break: keep-all;
overflow-wrap: break-word;
}
/* ── 상단바 ─────────────────────────────────────────────── */
.topbar {
background: var(--navy-800);
color: var(--white);
border-bottom: 1px solid var(--navy-900);
}
.topbar-inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 0 20px;
height: 52px;
display: flex;
align-items: center;
gap: 12px;
}
.topbar .brand {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -0.01em;
}
/* 뜻은 글자가 갖는다. 마크는 같은 색·같은 굵기로 옆에 서기만 한다. */
.topbar .brand svg {
width: 17px; height: 17px;
flex: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
fill: none;
}
.topbar .brand-sub {
font-size: var(--t-xs);
color: #9db4cc;
font-weight: 400;
margin-left: 2px;
}
.topbar .spacer { flex: 1; }
/* ── 액션 바 ────────────────────────────────────────────── */
/*
* 이동과 주요 동작만 담는 한 줄. 제목과 설명은 카드가 갖는다.
* 스크롤해도 따라오므로 긴 화면에서도 저장이 손에 닿는다.
*/
.toolbar {
position: sticky;
top: 0;
z-index: 20;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
}
.toolbar-inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 9px 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 48px;
}
.toolbar .spacer { flex: 1; }
/*
* **폭을 묻지 않는다**(docs/검토지침.md §3).
*
* 좁을 때만 줄을 바꾸게 해 두었는데, 줄바꿈은 좁을 때만 쓸 일이 아니다 -- 단추가 많은
* 화면에서는 넓어도 넘친다. 늘 바꿀 수 있게 두면 갈림목이 없어도 같은 결과가 나온다.
* 여백은 한 값으로 둔다. 720px 언저리에서 14px 과 20px 이 튀는 것을 볼 이유가 없다.
*/
/* ── 레이아웃 ───────────────────────────────────────────── */
/*
* ── 좌우 여백은 **한 값이다** ─────────────────────────────
*
* 여기가 20px, 머리와 형제 줄은 24px(--s-6), 상단바 두 줄은 아예 다른 셈법이었다.
* 그래서 넓은 화면에서 제품 이름은 x=43, 화면 제목은 x=67, 카드는 x=63 에 섰다 --
* **세 개의 왼쪽 선**이 20px 과 4px 씩 어긋난 채 겹쳐 있었다.
*
* 값을 `--page-pad` 하나로 모은다. 이 값을 쓰는 곳은 넷이다.
*
* .page 본문
* .head-inner 화면 제목 줄 (ui-shell.css)
* .subnav-inner 형제 줄 (ui-shell.css)
* .nav-top · .nav-tabs 상단바 두 줄 (ui-shell.css -- 여기만 셈이 다르다)
*
* 상단바는 **띠가 화면 끝까지 그어져야** 하므로 상한을 두고 가운데로 모을 수 없다.
* 대신 남는 폭의 절반에 이 값을 더해, 결과가 같은 자리에 오게 한다.
*/
.page {
max-width: var(--page-max);
margin: 0 auto;
padding: var(--s-5) var(--page-pad) 64px;
}
/*
* 구획 사이. **여기가 그 값을 쥔다** (2026-10-05).
*
* 20px 이라고 적혀 있었는데 app/ui-dash.css 가 30px 로 덮고 있었다. 그 파일은
* 이름대로라면 대시보드의 것인데 `.section` 에는 자리를 안 매어 두어서, 결국
* **모든 화면이 30px** 이었다 -- 여기 적힌 20px 는 한 번도 안 먹었다.
*
* 지금 보이는 값을 그대로 둔다(30px). 바꾸는 것은 이 고침의 일이 아니다.
*/
.section { margin-bottom: 30px; }
/*
* ── 넓은 화면이 앉는 판 ───────────────────────────────────
*
* 도면(.plan) · 서랍함(.dw) · 시간 줄(.tl) 셋은 제 안을 **테두리로 나눈다** -- 검사칸의
* 왼쪽 선, 줄기 칸의 오른쪽 선, 옆칸의 왼쪽 선. 그래서 바깥 테두리가 하나 더 필요하다.
* 없으면 안쪽 선들이 허공에서 시작해 허공에서 끝난다.
*
* 카드(.card)를 쓰지 않는 이유는 여백이다. 카드는 안쪽에 여백을 두는데, 이 셋은 제 칸이
* 각자 여백을 들고 있어 두 겹이 된다 -- 실제로 그렇게 떴다.
*/
.screen {
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
/* 안쪽 칸의 배경(캔버스 · 보기 레일)이 둥근 모서리 밖으로 비어져 나온다. */
overflow: hidden;
}
/* 생김새는 ui-parts.css 가 정한다(.card-title 과 한 획). 여기서는 아래 여백만 둔다. */
.section-title { margin: 0 0 var(--s-3); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-end { justify-content: flex-end; }
/*
* 남는 자리를 밀어내는 빈 칸. 상단바·액션 바뿐 아니라 카드 머리말에서도 쓴다.
* 여기서 전역으로 두지 않으면, 쓰는 곳마다 규칙을 따로 적어야 하고
* 빠뜨리면 오른쪽으로 가야 할 배지가 제목 옆에 붙어 버린다.
*/
.spacer { flex: 1 1 auto; }
/*
* 두 칸 배치 -- 왼쪽에 목록, 오른쪽에 고른 항목의 내용.
* 기기가 늘어도 세로로만 길어지지 않도록 화면 폭이 되는 만큼은 가로를 쓴다.
* 좁아지면 위아래로 쌓는다. 가로 스크롤은 만들지 않는다.
*/
.cols {
/*
* 목록 칸은 이름과 상태만 담으므로 좁아도 된다. 남는 폭은 실제 작업면인 오른쪽에 준다.
* 오른쪽이 넓어야 핀 목록이 두 열로 접혀 세로 길이가 반으로 준다.
*/
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
}
/*
* 상한을 넉넉히 준다. 300px 로 묶어 두었더니 넓은 화면에서 설비 이름이 "컨베…" 로
* 잘렸다 -- 좁은 휴대폰에서는 온전히 보이는데 데스크톱에서 잘리는, 거꾸로 된
* 반응형이었다. 관제에서 가장 먼저 읽어야 하는 것이 설비 이름이다.
*/
.cols > * { min-width: 0; }
.cols > *:first-child { flex: 1 1 240px; max-width: 26rem; }
/* 남는 폭은 실제 작업면인 오른쪽이 가져간다. 넓어야 핀 목록이 두 열로 접힌다. */
.cols > *:last-child { flex: 999 1 320px; }
/* 칸이 하나뿐이면 그 하나가 폭을 다 쓴다 -- 26rem 에 묶이면 안 된다. */
.cols > *:only-child { flex: 1 1 100%; max-width: none; }
/* 칸 사이 간격은 격자가 gap 으로 준다. 카드가 자기 여백까지 들고 있으면 아래가 두 배로 벌어진다. */
.cols > .card { margin-bottom: 0; }
/*
* ── `is-flat` 은 **없앴다.** 다시 만들지 말 것 ──────────────
*
* 장치가 적을 때 이 두 칸을 한 칸으로 접는 모드가 있었다(관제 상세에서 장치 셋 이하).
* 왼쪽 카드가 짧아 화면이 비어 보인다는 이유였는데, 값보다 대가가 컸다.
*
* · 같은 일을 하는 두 화면(master.html 의 상세 · slave.html)이 **서로 다른 배치**로 떴다.
* 원격으로 만지던 사람이 현장에 가면 다시 익혀야 한다.
* · 접으면서 `.rowlist` 를 격자에서 flex 로 바꾸는데, 그러면 `.rowgroup` 의
* `grid-column: 1 / -1` 이 무력해진다. 구획 머리(출력·쓰기 / 입력·읽기)가 핀과
* 한 줄에 늘어서고 좁은 상자에 갇힌 글자가 잘렸다. 장치 셋 이하가 대부분이라
* **그 깨진 모습이 곧 기본 모습**이었다.
*
* 비어 보이는 것은 배치를 갈아서 풀 일이 아니다. 현장 제어기 화면도 같은 모양이고
* 그쪽은 문제로 여겨지지 않았다 -- 두 화면을 같게 두는 쪽이 먼저다.
*/
/*
* ── 두 칸은 **스스로 접힌다** ─────────────────────────────
*
* 900px 아래에서 한 칸으로 바꾸는 갈림목이 있었다(지침 §3 이 금지한 것). 격자를
* 줄바꿈 상자로 바꾸면 갈림목 없이 같은 일이 된다 -- 늘어나는 몫을 오른쪽에 몰아
* 두면(999 대 1) 넓은 화면의 모습은 그대로고(목록 26rem 까지), 좁아지면 목록이
* 스스로 위로 올라가 폭을 다 쓴다. 어느 폭에서 접힐지는 두 칸의 최소 폭이 정한다.
*/
/*
* 카드 격자 -- 무엇이 몇 개 있는지를 먼저 보여 주고, 하나를 고르면 그 안으로 들어간다.
* 목록이 길어질수록 한 화면에 전부 늘어놓는 것보다 이쪽이 머리에 덜 부담이다.
*/
.cardgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
/* 카드마다 갖고 있던 아래 여백을 격자가 대신 갖는다. 없으면 다음 카드와 맞붙는다. */
margin-bottom: 16px;
}
.cardgrid .card { margin-bottom: 0; }
/*
* 이 보드 자신을 가리키는 카드. 남의 보드와 같은 모양이면 어느 것이 눈앞의 기기인지 알 수 없다.
* 색면을 넓게 쓰지 않고 테두리와 옅은 바탕으로만 구분한다.
*/
/* 이 보드 자신. 상자를 없앴으므로 바탕이 아니라 **왼쪽 띠**로 말한다. */
.card.is-self { border-left: 3px solid var(--accent); padding-left: var(--s-3); }
/*
* **고르는 대상은 상자로 남는다.**
*
* 제어기 카드처럼 눌러서 고르는 것은 하나하나가 만질 수 있는 물건이다. 경계가 없으면
* 어디까지가 하나인지 알 수 없고, 누를 자리도 흐려진다 -- 구획(.card)과는 성질이 다르다.
*/
.card-click {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r);
padding: var(--s-3) var(--s-4);
cursor: pointer;
transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.card-click:hover { border-color: var(--accent); background: var(--accent-soft); }
.card-click:focus-visible { outline: none; box-shadow: var(--focus); }
/* 카드 안의 숫자 요약. 값이 먼저 읽히고 이름은 거든다. */
.statrow { display: flex; gap: 20px; flex-wrap: wrap; }
/*
* 비율 막대 -- 목록 카드에서 "지금 얼마나 돌고 있나" 를 한눈에.
*
* 숫자 두 개(켜짐 9 / 꺼짐 36)로는 비율이 읽히지 않고, 카드끼리 비교하려면 매번 머리로 나눠야 한다.
* 막대는 길이가 카드마다 같아서 눈으로 바로 비교된다. 남는 폭도 막대가 가져가므로
* 자리를 채우겠다고 배지를 늘릴 이유가 없어진다.
*/
.meter { display: flex; align-items: center; gap: 10px; }
.meter + .meter { margin-top: 9px; }
.meter-k {
flex: none; width: 26px;
font-size: var(--t-xs); font-weight: 600; color: var(--gray-500);
}
/*
* 막대. **모서리를 깎지 않는다.**
*
* 둥근 끝을 가진 막대는 앱의 진행 표시이고, 계기의 눈금은 각지다. 게다가 둥근 끝은
* 값이 아주 작을 때 **실제보다 커 보인다** -- 3px 짜리 채움이 6px 짜리 알약이 된다.
* 값을 읽는 자리에서 그것은 거짓말이다.
*/
.meter-bar {
display: flex;
flex: 1 1 auto; min-width: 0;
height: 6px;
background: var(--surface-3);
overflow: hidden;
}
/*
* 막대는 왼쪽부터 채워진다: 켜짐(측정) → 켜짐(강제) → 꺼짐(강제) → 남은 자리(꺼짐, 측정).
* 그래서 색이 찬 왼쪽 길이가 곧 "켜짐" 이고, 파란 구간은 사람이 정해 둔 값이다.
* 강제는 켜짐/꺼짐과 다른 축이라 색으로만 구분한다 -- 숫자(9/45)는 건드리지 않는다.
*/
.meter-fill { flex: none; height: 100%; background: var(--ok-700); }
.meter-fill.on-forced { background: var(--blue-600); }
.meter-fill.off-forced { background: var(--blue-100); }
.meter-v {
flex: none;
font-size: var(--t-xs); color: var(--gray-600);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.meter-none { flex: 1 1 auto; font-size: var(--t-xs); color: var(--ink-3); }
/* 색이 무슨 뜻인지 설명할 때. 글자로 색 이름을 적는 것보다 색 자체를 보여 주는 편이 빠르다. */
.swatch {
display: inline-block;
width: 10px; height: 10px;
border-radius: 2px;
vertical-align: -1px;
margin-right: 6px;
background: var(--gray-300);
}
.swatch.on { background: var(--ok-700); }
.swatch.forced { background: var(--blue-600); }
.swatch.forced-off { background: var(--blue-100); }
.stat-v {
font-size: 20px; font-weight: 600; line-height: 1.2;
color: var(--navy-800);
font-variant-numeric: tabular-nums;
}
.stat-k {
font-size: var(--t-xs); font-weight: 600; color: var(--gray-500);
text-transform: uppercase; letter-spacing: .05em;
}
/*
* 조작 타일 -- front 의 본체.
*
* front 는 현장에서 장갑 낀 손으로 누르는 화면이다. 표의 작은 버튼이 아니라
* 이름이 크게 보이고 손가락으로 눌리는 덩어리여야 한다.
* 무엇을 띄울지는 front/front-logic.mjs 의 HIGHLIGHTS 가 정한다.
*/
.tiles {
display: grid;
/* 장갑 낀 손가락이 목표다. 손끝(약 9mm)보다 넉넉해야 오조작이 없다. */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.tile {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
min-height: 116px;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
background: var(--white);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.tile:hover:not(:disabled) { border-color: var(--blue-600); }
.tile:focus-visible { outline: none; box-shadow: var(--focus); }
.tile:disabled { cursor: default; }
.tile.is-on { border-color: var(--ok-700); background: var(--ok-50); }
.tile.is-forced { border-color: var(--blue-600); background: var(--blue-50); }
.tile.is-missing { border-style: dashed; background: var(--gray-50); }
/* 멀리서도 읽혀야 한다. 이 화면은 손에 쥐고 보는 게 아니라 벽에 붙어 있다. */
.tile-name {
font-size: var(--t-lg); font-weight: 600; color: var(--navy-800);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.tile-hint { font-size: var(--t-xs); color: var(--gray-500); }
/* ── 코드 예제 ──────────────────────────────────────────── */
/*
* 문서 안의 코드. 로그판과 같은 네이비 바탕을 써서 "이건 기계의 말" 이라는 결을 맞춘다.
* 코드는 줄을 바꾸면 오히려 읽기 어려우므로 이 블록 안에서만 가로로 넘긴다.
* 페이지 자체는 절대 가로로 넘기지 않는다.
*/
.code {
margin: 0;
padding: 12px 14px;
background: var(--navy-900);
color: #cbd5e1;
border-radius: var(--radius);
font-family: var(--mono);
font-size: var(--t-xs);
line-height: 1.75;
white-space: pre;
overflow-x: auto;
}
.code .c { color: #64748b; } /* 주석 */
.code .s { color: #86efac; } /* 문자열 */
.code .f { color: #93c5fd; } /* 함수 이름 */
/* 예제 한 덩어리: 설명 → 코드 → 실행 → 결과 */
.demo + .demo { margin-top: 18px; border-top: 1px solid var(--gray-100); padding-top: 18px; }
.demo-title { font-size: var(--t-sm); font-weight: 600; color: var(--navy-800); margin: 0 0 4px; }
.demo-desc { font-size: var(--t-xs); color: var(--gray-500); margin: 0 0 8px; }
.demo-run { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.demo-out {
flex: 1 1 200px; min-width: 0;
font-family: var(--mono); font-size: var(--t-xs); color: var(--gray-600);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-out.err { color: var(--err-700); }
/*
* 사람이 읽는 글이 아니라 **기계가 지은 값** -- 현장 번호, 주문 번호, 토큰.
*
* 규칙이 없어서 오래 본문과 같은 모양으로 서 있었다(rest.html · network.html ·
* master/alerts.mjs). 이런 값은 한 글자가 다르면 다른 값인데, 비례 글꼴에서는
* l 과 1, O 와 0 이 같은 자리에서 같아 보인다. 옮겨 적을 때 그 차이가 드러난다.
*/
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* ── 단계 탭 ────────────────────────────────────────────── */
/* 한 번에 한 단계만 보여 준다. 지나온 단계는 눌러서 되돌아갈 수 있다. */
.steps {
display: flex;
align-items: stretch;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 20px;
}
.step {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 0;
border-right: 1px solid var(--gray-200);
background: var(--white);
font-family: inherit;
text-align: left;
min-width: 0;
cursor: default;
}
.step:last-child { border-right: 0; }
.step[data-enabled="1"] { cursor: pointer; }
.step[data-enabled="1"]:hover { background: var(--gray-50); }
.step:focus-visible { outline: none; box-shadow: var(--focus); }
.step-num {
flex: none;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--gray-200);
color: var(--gray-600);
font-size: var(--t-xs);
font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.step-label {
font-size: var(--t-sm); color: var(--ink-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step.done .step-num { background: var(--ok-700); color: var(--white); }
.step.done .step-label { color: var(--gray-700); }
.step.active { background: var(--blue-50); box-shadow: inset 0 -2px 0 var(--blue-600); }
.step.active .step-num { background: var(--blue-600); color: var(--white); }
.step.active .step-label { color: var(--navy-800); font-weight: 600; }
/* ── 단계 화면 ──────────────────────────────────────────── */
.panel { display: none; }
.panel.active { display: block; }
/*
* `body.wide` 를 걷었다.
*
* 관제만 넓은 판(1560px)을 쓰던 규칙이다. 그러자 제어기 한 대를 보는 자리도 함께
* 넓어져, 보드 앞의 같은 화면(slave.html)과 폭이 달라졌다 -- 오가는 사람에게는 그것이
* 다른 화면으로 읽힌다. 제품의 폭은 --page-max 한 벌로 둔다(app/ui-tokens.css).
/* ── ui-shell.css ─────────────────────────────── */
/*
* 화면 뼈대의 모습.
*
* 위에 구획 줄 하나, 그 아래 얇은 머리, 액션 바, 그리고 본문.
*
* ── 왼쪽 레일을 걷었다 (2026-09-12) ───────────────────────
*
* 오래 왼쪽에 세로 목록을 두었다. 근거는 <구획이 늘어나도 규칙이 변하지 않는다> 였고,
* 그 자체는 지금도 맞다. 그런데 이 제품의 구획은 여섯에서 늘지 않았고, 76px 짜리 레일은
* **화면 가로의 1/6 을 늘 쓰면서** 거기 적히는 것은 두세 글자였다.
*
* 무엇보다 그 레일이 화면을 낡아 보이게 하는 첫째 이유였다. 색을 세 번 갈아입혀도
* "그대로" 라는 지적이 이어졌는데, 바뀐 것이 색뿐이고 **짜임새가 2010년대 관리자 화면의
* 틀** 그대로였기 때문이다.
*
* 그래서 세로를 가로로 눕힌다. 이름은 그대로 온전히 서고(아이콘만 두지 않는다는 규칙은
* 유지된다), 가로가 모자라면 **줄이 바뀐다** -- 숨지 않는다. 폭을 묻는 갈림목은 없다
* (docs/검토지침.md §3).
*/
/* ── 틀 ─────────────────────────────────────────────────── */
body.has-shell {
margin: 0;
background: var(--canvas);
color: var(--ink);
font-family: var(--font);
font-size: var(--t-md);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* 한 열이다. 레일이 없으므로 나눌 것이 없다. */
.shell { display: block; min-height: 100vh; }
.shell-main { display: flex; flex-direction: column; min-width: 0; }
.shell-body { flex: 1 1 auto; min-width: 0; }
/* ── 위 구획 줄 ─────────────────────────────────────────── */
/*
* 흰 줄이다. 어두운 레일이었을 때는 **이 띠가 화면에서 가장 진한 덩어리**였고, 그래서
* 눈이 늘 그리로 먼저 갔다 -- 정작 볼 것은 본문인데.
*
* 화면마다 색을 섞던 것(`--screen`)도 함께 걷었다. 흰 줄에 파비콘 색을 섞으면 여덟
* 화면이 여덟 가지 옅은 색으로 물들어, 같은 제품으로 보이지 않는다. 창을 가르는 일은
* 탭 제목과 파비콘이 이미 하고 있다.
*/
/*
* ── **이 창이 무엇인지**는 이름표가 말한다 ─────────────────
*
* 한때 화면 맨 위에 색을 꽉 채운 띠를 둘렀다. 다섯 창을 가르는 데는 성공했지만, 그
* 모양이 **배포 환경 경고 배너**였다 -- 개발 판이나 점검 중인 서버가 쓰는 그 언어라,
* 멀쩡한 제품이 <지금 무언가 이상하다> 고 말하는 꼴이 됐다. 36px 을 매 화면에서
* 가져가는 것도 한 번만 읽으면 되는 값치고는 비쌌다.
*
* 이름표가 그 일을 한다. **제품 이름 옆에 역할을 적고**, 그 아래 줄에 어디인지를 적는다 --
* `iotop 중앙 제어기 / 한빛공장 3동`. 띠가 아니라 **이 화면의 이름**이다.
*
* 색은 마크 하나에만 쓴다(26px). 창을 늘어놓고 훑을 때 색이 먼저 눈에 걸리되, 화면
* 어디에도 색 띠가 서지 않는다.
*/
/*
* ── 붙어 있는 것이 **셋이다** ─────────────────────────────
*
* 구획 줄(.nav) · 머리(.head) · 그 아래 탭(.subnav). 셋 다 스크롤을 따라오는데,
* **둘이 같은 자리(top: 0)에 붙어 있었다.** 스크롤을 내리는 순간 머리가 구획 줄 위로
* 올라타서 제품 이름과 탭 윗줄을 덮었다 -- 화면 맨 위에 <대시보드>가 있고 그 아래
* 구획 탭이 서는, 안 내렸을 때와 차례가 뒤집힌 모양이 된다.
*
* 아래 `.subnav` 는 처음부터 `top: var(--head-h)` 로 **쌓을 생각이었다.** 구획 줄이
* 붙어 있다는 것만 그 셈에서 빠져 있었다.
*
* .nav 0
* .head 구획 줄 높이
* .subnav 구획 줄 + 머리
*
* 구획 줄 높이는 고정값이 아니다 -- 탭이 많거나 좁은 화면에서는 줄이 접힌다. 그래서
* 뼈대가 재서 `--nav-h` 에 적어 둔다(app/shell.mjs). 여기 적힌 90px 은 그 값이 아직
* 없을 때의 기본값이고, 두 줄짜리 구획 줄의 실제 높이다.
*/
:root { --nav-h: 90px; }
/*
* ── 머리단은 **남색**이다 (2026-10-04) ────────────────────
*
* 흰 바탕에 흰 머리단이었다. 틀과 내용을 가르는 것이 선 한 줄뿐이라, 화면을 훑으면
* 어디까지가 길이고 어디부터가 일감인지가 흐렸다.
*
* 그보다 큰 것은 이것이다 -- `--shell` 갈래 다섯 색을 선언해 두고 **실제로 쓰는 곳이
* 다섯, 그중 셋은 옛 이름 별명**이었다(app/ui-tokens.css 의 맨 아래). 화면에 남아
* 있던 것은 26px 짜리 이름표 네모 하나다. 선언만 있고 보이지 않는 색은 없는 색이다.
*
* 머리단을 그 색으로 깐다. 틀과 내용이 갈리고, 브랜드색이 처음으로 화면에 선다.
*
* **아래 이 구획의 글자색을 전부 함께 옮겼다.** 바탕만 어둡게 하면 `--ink-2` 로 적힌
* 글자들이 남색 위의 남색이 된다 -- 안 보이는 글자는 깨진 것보다 찾기 어렵다.
*/
.nav {
position: sticky; top: 0; z-index: 21;
display: block;
background: var(--shell);
border-bottom: 0;
color: var(--shell-ink);
}
/*
* 윗줄 -- 여기가 어느 제품인가. 오른쪽 끝에 읽는 글.
* 아랫줄 -- 어디로 갈 수 있는가.
*
* 한 줄에 몰았더니 제품 이름이 **첫 탭처럼** 보였고, 탭 밑줄이 이름 옆에서 시작해
* 어디까지가 길인지 흐렸다.
*/
/*
* ── 본문과 **같은 선에 선다** ─────────────────────────────
*
* 두 줄을 `padding: 4px 20px` 로 두었더니, 1440px 보다 넓은 화면에서 위 줄만 왼쪽 끝에
* 붙고 본문(`.page`·`.head-inner`)은 가운데로 모였다 -- 24인치에서 제품 이름과 화면
* 제목이 190px 어긋나 있었다.
*
* 띠는 화면 끝까지 긋되(아래 선이 full-bleed 여야 한다), **속은 본문과 같은 자리**에
* 서야 한다. 그래서 상한을 두고 가운데로 모으는 대신 **여백을 계산해서** 준다 --
* 화면이 좁으면 --s-6, 넓으면 남는 폭의 절반. 폭을 묻는 갈림목이 아니라 값 하나다.
*/
.nav-top, .nav-tabs {
/*
* 남는 폭의 절반에 **본문 여백을 더한다.** 더하지 않으면 상단바는 본문 상자의
* 바깥선에, 본문은 그 안쪽 여백만큼 들어간 자리에 서서 20px 이 어긋난다 --
* 실제로 제품 이름이 카드보다 20px 왼쪽에 있었다.
*/
padding-inline: max(var(--page-pad),
calc((100% - var(--page-max)) / 2 + var(--page-pad)));
}
.nav-top {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
min-height: 44px; padding-block: 4px;
border-bottom: 1px solid var(--shell-line);
}
.nav-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
min-height: 42px;
}
/*
* 브랜드는 **글리프 하나**다. 제 화면을 보는 사람에게 제품 이름은 매번 읽을 것이 아니다 --
* 한 번 알면 끝이다. 이름은 문 앞(로그인)과 문서에서 온전히 선다.
*/
/*
* 제품 표기. 마크 옆에 **이름을 적는다.**
*
* 레일이었을 때는 76px 안에 글자가 들어가지 않아 마크만 남기고 이름은 읽어 주는 기계에만
* 두었다. 가로줄에는 자리가 있고, 이름이 서면 그 줄이 <제품의 줄>인 것이 분명해진다.
*/
.nav-brand {
display: flex; align-items: center; gap: 9px;
flex: none; height: 38px;
color: var(--shell-ink); text-decoration: none;
border-radius: var(--r-sm);
}
/*
* 마크. **이 창이 무엇인지를 색으로 말하는 유일한 자리**다.
*
* 26px 짜리 하나뿐이라 화면을 덮지 않는다. 창을 여럿 늘어놓고 훑을 때는 이 사각형의
* 색이 먼저 걸리고, 한 창 안에서는 옆의 글자가 그것을 다시 말해 준다.
*
* 상태색(초록·주황·빨강)은 쓰지 않는다. 그 셋은 설비의 상태에만 쓰는 색이라
* (app/ui-tokens.css), 정체를 나타내는 데 끌어 쓰면 멀쩡한 화면이 경고로 읽힌다.
*/
/*
* 머리단이 남색이 되면서 **바탕과 글자가 뒤집혔다.** 전에는 흰 머리단 위의 색 네모라
* 네모가 색을 갖고 글자가 희었다. 남색 위에서는 그 반대다 -- 네모가 밝고 그림이 어둡다.
* 특히 `hq` 는 바탕과 **같은 색**이라 그대로 두면 사라진다.
*/
.nav-brand-mark {
display: grid; place-items: center; flex: none;
width: 26px; height: 26px; border-radius: var(--r-sm);
background: rgba(255, 255, 255, .15); color: var(--shell-ink);
}
.nav-brand-mark svg { width: 18px; height: 18px; display: block; }
/*
* ── 네 화면, **각각 제 색** ───────────────────────────────
*
* field 현장 제어기 -- 설비에 붙어 있는 보드
* center 중앙 제어기 -- 그 현장의 보드들을 쥔 보드
* hq 고객사 원격 관제 -- 고객 사무실에서 제 공장들을 본다
* vendor iotop 공급 관리 -- **우리 화면.** 상징색이 여기 붙는다
*
* 값은 팔레트에 있다(app/ui-tokens.css 의 `--sign-*`). 왜 그 색들인지도 거기 적었다.
* 여기서는 **어느 자리에 어느 이름을 거는지**만 정한다 -- 색을 여기 적으면 팔레트와
* 두 곳에 살게 되고, 그러면 한쪽만 고쳐진다.
*
* 그림 글자만 여기서 뒤집는다. 바탕의 밝기에 따라 달라지는 값이라 색과 짝으로 다닌다 --
* 어두운 바탕에는 흰 그림, 밝은 바탕에는 남색 그림.
*
* ※ `field` 에는 규칙이 아예 없어 기본값으로 떨어지고 있었다. 떨어진 값이 마침 쓸
* 만해서 아무도 몰랐는데, 그러면 기본값을 고치는 날 현장 제어기가 같이 바뀐다.
*/
.nav-brand-mark[data-role="field"] { background: var(--sign-field); color: var(--shell); }
.nav-brand-mark[data-role="hq"] { background: var(--sign-hq); color: var(--shell); }
.nav-brand-mark[data-role="vendor"] { background: var(--sign-vendor); color: var(--shell); }
/*
* 네이비는 바탕과 같은 색이라 **테두리로 윤곽을 세운다**(app/ui-tokens.css 의 까닭).
* 그림도 흰 쪽이다 -- 어두운 네모 위에서 남색 그림은 안 보인다.
*/
.nav-brand-mark[data-role="center"] {
background: var(--sign-center); color: var(--shell-ink);
box-shadow: inset 0 0 0 1px var(--sign-edge);
}
.nav-brand-text { display: block; line-height: 1.2; min-width: 0; }
/*
* 제품 이름과 **역할이 한 덩어리**다. 이름이 굵고 역할은 그 뒤에 한 단계 가볍게 선다 --
* `iotop 중앙 제어기`. 배지로 떼어 놓으면 이름 옆에 붙은 꼬리표가 되지만, 이어 적으면
* **이 화면의 이름**이 된다.
*/
.nav-brand-name { display: block; font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em;
white-space: nowrap; }
.nav-brand-name em { font-style: normal; font-weight: 500; color: var(--shell-ink-2); }
/* 어디인가. 이름 아래 한 줄 -- 현장 이름이거나, 본사에서는 보는 범위다. */
.nav-brand-where {
display: block; font-size: var(--t-xs); color: var(--shell-ink-2); font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch;
}
/* 읽어 주는 기계에만 남기는 글. 매번 읽을 것이 아니다. */
.nav-brand-sub {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.nav-brand:focus-visible { outline: none; box-shadow: var(--focus-bright); }
.nav-list {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
min-width: 0;
}
/*
* 구획 한 칸.
*
* **아이콘을 걷고 글자만 남겼다.** 아이콘을 둔 근거는 <처음 만지는 사람이 설치기사라
* 그림만으로는 관제와 현장 제어기를 가를 수 없다> 였는데, 그 결론이 가리키던 것은
* 실은 **글자를 두라**는 것이었다. 가로줄에서는 글자가 온전히 서므로 그림이 할 일이 없다.
* (본사 관제도 같은 이유로 아이콘이 없다 -- 거기 서는 것은 설비가 아니라 장부다.)
*
* 손가락으로 누르는 자리라 높이는 --touch 아래로 내려가지 않는다.
*/
.nav-item {
display: flex; align-items: center; gap: 6px;
min-height: var(--touch);
padding: 0 11px;
border-radius: var(--r-sm);
color: var(--shell-ink-2);
text-decoration: none;
font-size: var(--t-md); font-weight: 500; letter-spacing: -.01em;
white-space: nowrap;
transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
position: relative;
}
.nav-item:hover { background: var(--shell-2); color: #fff; }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus-bright); }
/*
* 지금 있는 자리.
*
* 색만으로 말하지 않는다 -- 글자를 굵게 하고 **아래에 띠**를 둔다. 색을 못 보는 사람도
* 어디에 있는지 알아야 한다. 띠는 액센트가 아니라 글자색이다 -- 파랑은 <누를 것>의
* 색이고, 지금 서 있는 자리는 누를 것이 아니다.
*/
.nav-item.is-here { color: var(--shell-ink); font-weight: 700; }
/*
* 띠는 **머리단의 아래 끝에 딱 붙어야** 한다.
*
* -8px 이었다. 그때는 머리단이 희고 아래에 1px 선이 있어서, 띠가 그 선 위에 얹혀
* 자연스러웠다. 머리단을 남색으로 깔고 그 선을 걷자(위 `.nav`) 띠만 **남색 밖
* 흰 바탕으로 5px 떨어져** 떴다 -- 탭과 이어지지 않은 짧은 막대 하나가 됐다.
*
* 칸 아래와 머리단 아래 사이는 3px 이다(탭 줄 42px, 칸 36px). 그만큼만 내린다.
*/
.nav-tabs .nav-item.is-here::after {
content: ''; position: absolute; left: 11px; right: 11px; bottom: -3px;
height: 2px; border-radius: 2px 2px 0 0;
background: var(--shell-ink);
}
/*
* ── 머리단 안의 상태 표식 ─────────────────────────────────
*
* 상태색은 **흰 바탕에 맞춰 고른 값**이다(app/ui-tokens.css). 남색 위에 그대로 얹으면
* 안 읽힌다 -- 안 읽은 편지 수가 대비 3.2 로 떠 있었다(기준 4.5).
*
* 머리단 안에서만 옅은 쪽으로 바꿔 단다. 뜻은 같고 바탕만 다르다. 값을 새로 짓지 않고
* 이미 있는 `--*-line` 을 쓴다 -- 그 셋은 원래 어두운 데 긋는 선의 색이다.
*/
.nav .badge-ok { color: var(--ok-line); }
.nav .badge-warn { color: var(--warn-line); }
.nav .badge-err { color: var(--err-line); }
.nav .badge-info,
.nav .badge-mute { color: var(--shell-ink-2); }
/* 아이콘은 그리지 않는다. 표시는 shell.mjs 가 계속 붙이지만 화면에는 서지 않는다. */
.nav-ico { display: none; }
.nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/*
* 어디의 화면인가 -- **이름표 안으로 들어갔다**(.nav-brand-where).
*
* 제품 이름 옆에 따로 서 있었다. 그러면 `iotop` · `한빛공장 3동` · 배지 셋이 한 줄에
* 나란히 서서, 어느 것이 제품이고 어느 것이 자리인지가 크기로만 갈렸다.
* 이름표 한 덩어리로 묶으면 위가 <무엇>, 아래가 <어디>로 층이 생긴다.
*
* 본사 화면들은 아직 이 이름을 쓴다(hq/shell.mjs). 그쪽도 이름표로 옮기면 함께 걷는다.
*/
.nav-where { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nav-site { font-size: var(--t-md); font-weight: 600; color: var(--shell-ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 문서는 오른쪽 끝으로. 매일 쓰는 것과 읽는 글을 같은 줄의 양끝으로 갈라 둔다. */
.nav-foot { margin-left: auto; display: flex; align-items: center; gap: 2px; }
/* 탭 줄 안에서 오른쪽으로 밀어내는 빈 칸. */
.nav-gap { flex: 1 1 auto; }
/*
* 들어와 있는 계정. **오른쪽 끝**이다.
*
* 탭 줄에 두지 않는 까닭은 하나다 -- 그 줄은 <무엇을 보는가>를 고르는 자리이고,
* 계정은 보는 대상이 아니라 **보고 있는 사람**이다. 업무용 도구가 대개 이 자리에
* 사람을 두는 것도 같은 이유다.
*
* 글자는 계정 아이디로 바뀐다(ui/account.mjs). 주소가 길어도 줄을 밀지 않게 잘라 둔다.
*/
.nav-user {
margin-left: auto; max-width: 28ch;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 5px 10px; border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 600; color: var(--shell-ink-2); text-decoration: none;
}
.nav-user:hover { background: var(--shell-2); color: #fff; }
.nav-user.is-here { background: var(--shell-2); color: var(--accent-bright); }
/*
* 나가기. **계정 이름 바로 옆**이다 -- 이름을 확인한 자리에서 끊는 것이 사람이 찾는 차례다.
*
* 이름보다 **약하게** 그린다. 매일 누르는 단추가 아니고, 관제 화면에서 실수로 눌리면
* 보던 값이 통째로 사라진다. 눈에 띄되 손이 먼저 가지는 않아야 한다.
*/
.nav-out {
flex: none; margin-left: 2px;
padding: 5px 9px; border: 0; border-radius: var(--r-sm);
background: none; color: var(--shell-ink-2);
font-family: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}
.nav-out:hover { background: var(--shell-2); color: var(--shell-ink); }
.nav-out:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 1px; }
/*
* 묶음 이름. 가로줄에는 글자로 설 자리가 없다 -- **선 하나**로 나눈다.
* 이름은 읽어 주는 기계에만 남긴다. 눈으로는 선이, 귀로는 이름이 나눈다.
*/
.nav-group {
width: 1px; height: 16px; margin: 0 var(--s-2);
background: var(--line-2);
font-size: 0; color: transparent; padding: 0; overflow: hidden;
flex: none;
}
.nav-group:first-child { display: none; } /* 맨 앞에는 나눌 것이 없다 */
/* 새 창으로 열린다는 표시. 글자와 겨루지 않게 흐리고 작게. */
.nav-ext { font-size: 10px; color: var(--shell-ink-2); opacity: .75; }
/* 문서 줄도 손가락으로 누른다. 글자만 한 단계 작다. */
.nav-item-sm { font-size: var(--t-sm); color: var(--shell-ink-2); }
/* 머리단은 app/ui-head.css · 마법사 단계 띠는 app/ui-wizard.css 로 나갔다. */
/* ── ui-head.css ─────────────────────────────── */
/*
* **머리단** -- 화면 제목과 되돌아갈 길, 그리고 한 대상 안의 형제 화면들.
*
* 뼈대(app/ui-shell.css)에서 떼어 냈다. 한 파일이 766줄이었다.
*
* **걸리는 차례가 원본과 같아야 한다.** 그래서 ui-shell(틀·구획 줄) 바로 뒤,
* ui-wizard 앞에 선다(app/ui.css). 펼친 결과를 전후로 맞대어 규칙이 차례까지
* 같은 것을 확인했다.
*/
/* ── 위 머리 ─────────────────────────────────────────────── */
/*
* 띠는 화면 끝까지, **속은 본문과 같은 폭.**
*
* 둘을 한 요소로 두었더니 단추가 화면 맨 끝으로 밀려, 가운데 모인 본문과 최대 868px
* 어긋났다(3440px 화면 기준). 바탕과 아래 선은 끝까지 가야 하므로 겉과 속을 나눈다.
*/
.head {
/* 구획 줄 **아래에** 붙는다. 같은 자리에 붙어 있던 것이 위 `.nav` 머리말의 그 일이다. */
position: sticky; top: var(--nav-h); z-index: 20;
min-height: var(--head-h);
background: var(--surface);
border-bottom: 1px solid var(--line);
/*
* ── 상태 척추 ────────────────────────────────────────────
*
* 머리 아래에 라이트 블루 한 줄. **이 화면이 살아 있는 계기라는 표시**다.
* 정지 화면과 계기를 가르는 것은 결국 <지금 값인가> 하나이고, 그 말을 늘 하고 있는
* 자리가 화면에 없었다 -- 배지는 읽어야 알고, 이 줄은 눈에 그냥 들어온다.
*
* 회선이 끊기면 `body.is-offline` 이 붙어 흐려진다(app/shell.mjs).
*/
box-shadow: inset 0 -1px 0 0 var(--accent-bright);
}
body.is-offline .head { box-shadow: inset 0 -1px 0 0 var(--line-2); }
.head-inner {
display: flex; align-items: center; gap: var(--s-3);
min-height: var(--head-h);
/*
* 본문(.page)과 같은 상한·같은 좌우 여백이라 두 오른쪽 끝이 한 선에 선다.
* 좌우는 아래 `.has-shell .page` 의 --s-6 과 **같은 값**이어야 한다 -- 다르면 딱 그만큼
* 카드와 어긋나고, 4px 어긋난 것은 맞춘 것보다 눈에 더 걸린다.
*/
max-width: var(--page-max);
margin-inline: auto;
padding: var(--s-2) var(--page-pad);
flex-wrap: wrap;
}
/* 제목이 서는 자리라 상태 배지와 동작은 **아래 선에 맞춰** 가운데 정렬한다. */
.head-state, .head-actions { align-self: center; }
/* 머리의 단추가 둘 이상이면 붙지 않는다(조작 이력: CSV 내려받기 · 새로고침). */
.head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.head-gap { flex: 1 1 auto; }
.head-menu {
display: none; align-items: center; justify-content: center;
width: 34px; height: 34px; flex: none;
border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.head-menu svg { width: 18px; height: 18px; }
.head-state { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
/* ── 한 대상 안의 화면들 ────────────────────────────────── */
/*
* 제어기 한 대 안의 화면을 오가는 줄(app/shell.mjs 의 setTabs).
*
* **머리에 붙어 함께 따라 올라온다.** 따로 떼어 두면 핀이 서른두 개인 목록에서 스크롤을
* 조금만 내려도 사라지고, 그러면 다른 화면으로 가려고 맨 위까지 되돌아가야 한다.
* `top` 은 머리 높이와 **같은 값**이라야 둘 사이가 벌어지지 않는다.
*
* 밑줄로 지금 자리를 말한다. 칸을 통째로 칠하면 이 줄이 액션 바처럼 읽혀,
* 방금 머리에서 걷어낸 그 혼동이 한 칸 아래에서 되살아난다.
*/
/*
* 머리와 같이 **두 겹**이다. 바깥이 배경과 아래 선을 화면 끝까지 긋고, 안쪽이 본문과
* 같은 상한·같은 여백으로 가운데 선다. 한 겹으로 두면 넓은 모니터에서 선이 본문 폭까지만
* 그어져 머리와 어긋난다.
*/
.subnav {
/* 구획 줄과 머리를 **둘 다** 지나야 한다. 머리 하나만 세고 있었다. */
position: sticky; top: calc(var(--nav-h) + var(--head-h)); z-index: 19;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
/*
* ── 탭과 **동작이 한 줄**이다 ─────────────────────────────
*
* 탭이 있는 화면에서는 동작 단추가 이 줄로 내려온다(app/shell.mjs 의 _placeActions).
* 왼쪽이 <어느 화면인가>, 오른쪽이 <여기서 무엇을 하는가> 다.
*
* 머리에 두었을 때는 단추가 탭보다 **위**에 서서, 저장이 이 제어기 전체의 일인지 지금
* 선 탭의 일인지 화면에서 읽히지 않았다.
*
* ── 바깥 띠를 건드리지 않는다 ─────────────────────────────
*
* 한 번 `.subnav` 자체를 flex 로 만들고 max-width·margin:auto 를 줬다가 줄이 통째로
* 463px 으로 오므라들었다. 세로 flex 안의 칸에 **가로 auto 여백**을 주면 늘어나던 것이
* 내용 폭으로 줄어든다 -- 띠가 화면 끝까지 그어지지 않아 머리와 어긋났다.
*
* 그래서 단추는 **안쪽 줄에** 들어간다. 바깥은 선을 긋는 일만 계속한다.
*/
.subnav-inner > .head-actions { margin-left: auto; flex: none; padding-block: var(--s-2); }
.subnav[hidden] { display: none; }
.subnav-inner {
display: flex; align-items: stretch; gap: var(--s-1);
/* 좌우는 `.head-inner`·`.has-shell .page` 와 **같은 값**이어야 한다. */
max-width: var(--page-max);
margin-inline: auto;
padding: 0 var(--page-pad);
/*
* 가로로 밀어 볼 수는 있게 두되 막대는 감춘다. 칸이 넷뿐이라 좁은 화면에서만
* 넘치고, 그때 막대가 뜨면 줄 높이가 흔들린다.
*/
overflow-x: auto;
scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-item {
flex: none;
display: flex; align-items: center;
min-height: var(--touch);
padding: 0 var(--s-3);
border: 0; border-bottom: 2px solid transparent; background: none;
font: inherit; font-size: var(--t-md); font-weight: 600;
color: var(--ink-3); text-decoration: none; cursor: pointer;
white-space: nowrap;
transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.subnav-item:hover { color: var(--ink); }
.subnav-item:focus-visible { outline: none; box-shadow: var(--focus); }
.subnav-item.is-here {
color: var(--accent-strong);
border-bottom-color: var(--accent);
cursor: default;
}
/* ── 빵부스러기 ─────────────────────────────────────────── */
/*
* 위치와 되돌아갈 길을 **한 줄**이 함께 갖는다. 되돌아가기 버튼을 따로 두지 않는다.
* 마디는 키오스크에서 손가락으로 누를 수 있는 크기여야 한다.
*/
/*
* ── 지금 어디인가 -- **사슬이 아니라 제목** ────────────────
*
* `관제 › 1라인 제어기 › 장치 등록 [3단계]` 처럼 마디를 이어 붙였다. 그런데 그 사슬의
* 첫 마디는 이미 **레일이 말하고 있고**(켜진 칸), 마지막 마디는 이 화면의 제목이다.
* 가운데만 새 정보인데, 셋을 같은 크기로 늘어놓으니 정작 <여기가 어디인가> 가
* 작은 글자 셋 사이에 묻혔다. 깊이를 숫자로 적어 두던 배지는 그 증상이었다 --
* 눈으로 세기 어려우니 세어 준 것이다.
*
* 이제 **마지막이 제목**이고, 그 위에 <어디에서 왔는가> 한 줄이 작게 선다.
* 깊이 배지는 걷었다. 셀 것이 없다.
*/
.crumb { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; }
.crumb-link {
border: 0; background: none; font: inherit; cursor: pointer;
color: var(--ink-3); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .04em;
padding: 0; text-align: left;
display: inline-flex; align-items: center; gap: 3px;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 되돌아가는 길이라는 것을 화살표가 말한다. 글자만으로는 눌러도 되는지 알 수 없다. */
.crumb-link::before { content: '‹'; font-size: var(--t-md); line-height: 1; }
/*
* 어디에 속한 화면인지만 말하는 윗마디. 누를 수 없으므로 화살표를 붙이지 않는다 --
* 붙이면 눌러도 아무 일이 없는 것이 되고, 그것은 고장으로 읽힌다.
* 생김새는 되돌아가는 길과 같다. 다른 것은 손가락 모양과 화살표뿐이다.
*/
.crumb-up {
color: var(--ink-3); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .04em;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb-link:hover { color: var(--accent); }
.crumb-link:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
/* 지금 자리 = 이 화면의 제목. 크고 조인다. */
.crumb-here {
font-size: var(--t-xl); font-weight: 680; letter-spacing: -.02em;
color: var(--ink); line-height: 1.15;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 사슬의 가운데 마디와 구분자는 걷었다. 제목과 되돌아갈 곳 둘이면 족하다. */
.crumb-sep { display: none; }
.crumb-link:not(:first-of-type) { display: none; }
/* 줄이 넘치면 앞쪽 마디부터 접는다. 지금 자리와 깊이는 끝까지 남는다. */
.crumb { flex-wrap: nowrap; }
.crumb-link, .crumb-here { min-width: 0; }
/* 넘치면 말줄임은 위 .crumb-link 가 이미 건다. 여기서 또 적지 않는다. */
/* ── ui-wizard.css ─────────────────────────────── */
/*
* **마법사 단계 띠** -- 초기 설정이 몇 걸음이고 지금 어디인가.
*
* 뼈대에서 떼어 냈다. 선택자가 이 구획 안에서만 돈다.
*/
/* ── 마법사 단계 띠 ─────────────────────────────────────── */
/*
* 단계를 **위에 가로로** 세운다. 지금 어디인지, 무엇이 남았는지가 한눈에 보여야
* 계속할지 그만둘지 판단할 수 있다.
*
* ── 왜 옆이 아니라 위인가 ────────────────────────────────
*
* 옆에 세로로 세워 두었다. 그러면 폭에 따라 **모양이 두 벌**이 된다 -- 넓으면 옆에
* 세로로, 좁으면 위에 가로로. 같은 제품인데 기기마다 다른 화면이 되고, 그 사이
* 어중간한 폭에서는 레일이 200px 을 붙들어 카드를 좁히는 일까지 났다.
*
* 위로 올리면 모양이 **한 벌**이다. 스마트폰이든 27인치든 같은 띠가 같은 자리에 선다.
* 걸음이 셋뿐이라 가로로 세워도 좁아지지 않고, 본문은 폭을 통째로 쓴다.
*
* ── 폭에 숫자를 박지 않는다 ──────────────────────────────
*
* 갈림목(@media)이 하나도 없다. 칸은 늘 셋이고 저마다 1fr 이라, 폭이 얼마든 같은 비율로
* 줄고 는다. 글자만 좁은 자리에서 두 줄이 될 뿐이다.
*/
.wizard-page {
display: grid;
gap: clamp(var(--s-4), 2.5vw, var(--s-6));
}
/*
* **판의 폭 = 카드의 폭.** 레일이 옆에서 비켜났으니 더 넓힐 이유가 없다.
* 가운데로 보내는 `margin: 0 auto` 는 .page 가 이미 갖고 있다(ui-base.css).
*
* 숫자는 고른 것이 아니라 **더한 것**이다 -- 본문 상한 + 안여백(40).
*/
.wizard-page { max-width: 900px; }
/*
* 계정 연결은 묻는 것이 계정과 비밀번호 둘뿐이라 더 좁다(680 + 40).
* 지금 서 있는 단계를 :has 로 본다 -- 셋 중 하나만 .active 다.
* :has 를 모르는 브라우저에서는 900 으로 서는데, 그래도 깨지지 않고 조금 넓을 뿐이다.
*/
.wizard-page:has(.panel.active[data-view="link"]) { max-width: 720px; }
.wizard-main { min-width: 0; }
/*
* 카드가 판보다 좁아지는 일이 있으면 **그 안에서도 가운데** 선다.
* 한쪽에만 붙으면 위의 띠는 꽉 찼는데 카드만 치우쳐 줄이 어긋나 보인다.
*/
.wizard-main > .panel { max-width: 860px; margin-inline: auto; }
.wizard-main > .panel[data-view="link"] { max-width: 680px; }
/*
* ── 단계를 넘기는 단추 ─────────────────────────────────────
*
* 머리 오른쪽에 있었다. 넓은 화면에서 카드는 가운데 있는데 단추는 화면 맨 끝이라
* **거기 있는 줄도 모르는** 자리였다 -- 1920px 에서 둘 사이가 1000px 넘게 벌어진다.
*
* 읽기가 끝나는 자리에 둔다. 카드와 **같은 폭·같은 축**이라, 카드 오른쪽 아래에서
* 눈이 자연스럽게 다음 단추에 닿는다.
*/
.wizard-act {
display: flex; align-items: center; gap: var(--s-2);
/* 카드와 같은 자리에 선다. 위 .panel 과 같은 상한·같은 가운데맞춤. */
max-width: 860px; margin-inline: auto;
/* 카드에서 조금 떼어 둔다. 붙으면 카드의 일부로 읽힌다. */
margin-top: calc(var(--s-2) * -1);
flex-wrap: wrap;
/* 주 동작은 오른쪽 끝. 눈이 카드를 다 읽고 내려오는 자리다. */
justify-content: flex-end;
}
.wizard-page:has(.panel.active[data-view="link"]) .wizard-act { max-width: 680px; }
/* <이전> 만 왼쪽으로 민다. 뒤로 가는 것은 앞으로 가는 것과 같은 자리에 있으면 안 된다. */
.wizard-act .act-back { margin-right: auto; }
/*
* 머리에 있을 때는 작은 단추(btn-sm)였다. 여기서는 이 화면의 주 동작이므로 제 크기를 준다.
* 44px 은 손가락으로 눌러도 빗나가지 않는 높이다 -- 카드 속 단추와 같은 값.
*/
.wizard-act .btn { min-height: 44px; padding: 0 var(--s-5); font-size: var(--t-md); }
.wizard-act .btn-primary { font-weight: 600; }
/*
* 칸은 **늘 셋**이다. auto-fit 으로 접지 않는다 -- 접히는 순간 좁은 화면만 다른 모양이
* 되고, 그게 바로 걷어내려던 것이다.
*/
.rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.rail-step {
/* 잇는 선을 이 칸 안에 그린다. */
position: relative;
display: flex; flex-direction: column; align-items: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-2);
border: 0; background: none; text-align: center;
border-radius: var(--r-sm); font: inherit; color: var(--ink-3);
}
/*
* 걸음을 **선으로 잇는다.** 동그라미만 셋 떨어뜨려 두면 나란한 세 개일 뿐,
* 하나를 지나야 다음이 온다는 것이 보이지 않는다.
*
* 선은 동그라미 한가운데 높이에 건다 -- 위여백(12) + 동그라미 반지름(12).
* 양옆 18px 을 비워 동그라미에 닿지 않게 한다.
*/
.rail-step::before, .rail-step::after {
content: ''; position: absolute; top: calc(var(--s-3) + 12px);
height: 1px; background: var(--line);
}
.rail-step::before { left: 0; right: 50%; margin-right: 18px; }
.rail-step::after { right: 0; left: 50%; margin-left: 18px; }
/* 첫 걸음 왼쪽과 마지막 걸음 오른쪽에는 이어질 것이 없다. */
.rail-step:first-child::before, .rail-step:last-child::after { display: none; }
button.rail-step { cursor: pointer; }
button.rail-step:hover { background: var(--surface-2); }
.rail-no {
flex: none; width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
border: 1px solid var(--line-2); color: var(--ink-3); background: var(--surface);
/* 잇는 선이 동그라미 뒤로 지나가지 않게 한 겹 위에 올린다. */
position: relative; z-index: 1;
}
.rail-body { display: grid; gap: 2px; min-width: 0; }
/*
* 이름은 좁은 자리에서 두 줄이 된다. 낱말 단위로만 끊는다 --
* "아두이 / 노 등록" 이 되면 읽는 데 한 박자가 더 든다.
*/
.rail-name { font-size: var(--t-sm); word-break: keep-all; line-height: 1.4; }
.rail-why { font-size: var(--t-xs); color: var(--ink-3); word-break: keep-all; }
/* 지나온 것 · 지금 것 · 남은 것을 색만이 아니라 모양으로도 구분한다. */
.rail-step.is-done .rail-no { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.rail-step.is-done .rail-name { color: var(--ink-2); }
/*
* 지금 걸음에 바탕을 칠했었다. 칸이 세로로 길쭉하던 시절의 모양이라, 가로 띠에서는
* 파란 덩어리 하나가 놓인 꼴이 된다. 동그라미와 글자 굵기로만 말한다.
*/
.rail-step.is-now .rail-no { background: var(--accent); border-color: var(--accent); color: #fff; }
.rail-step.is-now .rail-name { color: var(--ink); font-weight: 650; }
.rail-step.is-locked .rail-name { text-decoration: line-through; }
/*
* 지나왔지만 이루지 못한 걸음. 초록 ✓ 를 주면 안 된다 -- 장치 없이 넘어간 사람에게
* 띠는 "끝났다", 배너는 "등록된 장치가 없습니다" 라고 서로 반대로 말하게 된다.
* 번호를 그대로 두고 주의 색만 입혀, 돌아갈 곳이 있다는 것을 보인다.
*/
.rail-step.is-skip .rail-no { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.rail-step.is-skip .rail-name { color: var(--ink-2); }
/* 지나온 구간은 잇는 선도 함께 지나왔다. */
.rail-step.is-done::before, .rail-step.is-done::after { background: var(--ok-line); }
/*
* 여기 있던 `@media (max-width: 1000px)` 를 걷었다. 레일이 세로로 설지 가로로 누울지는
* 이제 위의 auto-fit 이 제 폭을 보고 정한다 -- 창 크기를 물어볼 일이 없어졌다.
*/
/*
* ── 품긴 화면 ──────────────────────────────────────────────
*
* 다른 화면 안에 품길 때(mountShell 의 bare) 자기 틀을 벗는다.
*
* 벗기지 않았더니 카드가 **네 겹**으로 겹쳤다 -- 마법사 카드 안에 장치 추가 카드,
* 그 안에 값 상자 둘, 또 로그판. 테두리가 네 번 그어지면 어디까지가 한 덩어리인지
* 읽히지 않고, 안여백이 네 번 겹쳐 정작 내용이 들어갈 자리가 좁아진다.
*
* 품는 쪽(마법사)이 이미 카드 한 겹을 그렸으므로, 안쪽은 **선 없이 내용만** 낸다.
*/
/*
* 바탕을 **html 까지** 지운다.
*
* body 만 지웠더니 회색 덩어리가 그대로 남았다 -- 바탕색은 html 에 걸려 있고, 그것이
* 흰 카드 안에서 회색 상자로 보인다. 품긴 화면은 자기 바탕을 갖지 않아야 한다.
*/
html:has(> body.is-bare) { background: transparent; }
.is-bare { background: transparent; }
.is-bare .page { padding: 0; max-width: none; }
.is-bare .card {
border: 0; box-shadow: none; background: transparent;
margin: 0 0 var(--s-5);
}
.is-bare .card-head { padding: 0 0 var(--s-3); border-bottom: 0; }
/*
* 품긴 화면의 제목은 **곁제목**이다.
*
* 품는 쪽이 이미 이 걸음의 제목을 달았다(<1. 아두이노 등록>). 안쪽 제목까지 같은 크기로
* 서면 둘 중 무엇이 이 화면의 이름인지 흐려진다. 다만 지우지는 않는다 -- 흐름이 나아가면
* 이 제목이 <장치 추가>에서 <장치 구성>으로 바뀌며 지금 어디인지를 말한다.
*/
.is-bare .card-title { font-size: var(--t-md); color: var(--ink-2); }
.is-bare .card-desc { font-size: var(--t-sm); }
.is-bare .card-body { padding: 0; }
/* 동작은 맨 위. 누르는 것부터 시작하는 화면이다. */
/*
* 동작은 맨 위, **왼쪽부터**.
*
* 머리에 있을 때는 오른쪽 끝에 붙는 것이 맞았다(.head-actions 의 flex-end). 그런데 여기서는
* 머리가 아니라 **내용의 첫 줄**이다. 오른쪽에 붙여 두었더니 왼쪽이 통째로 비어, 눈이
* 글을 읽던 자리에서 단추까지 화면을 가로질러야 했다.
*/
.is-bare .bare-actions {
display: flex; gap: var(--s-2); flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: var(--s-4);
}
/*
* **아직 안 채워진 값 상자는 접는다.**
*
* 포트를 고르기 전에는 대상 장치도 칩 시그니처도 알 수 없다. 그 자리에 `—` 를 다섯 개
* 늘어놓으면 처음 보는 사람에게는 고장으로 읽힌다 -- 값이 비어 있는 것과 아직 물어보지
* 않은 것은 다른 말인데 화면은 같게 보여 준다.
*
* setFact 가 값을 넣을 때 muted 를 뗀다(app/setup/screen.mjs). 그러니 muted 아닌 칸이
* 하나도 없는 상자는 아직 아무것도 모르는 상자다.
*/
.is-bare .facts:not(:has(.fact-v:not(.muted))) { display: none; }
/*
* ── 품는 쪽이 이미 말한 것은 **두 번 말하지 않는다** ───────
*
* 마법사의 아두이노 등록 걸음을 재어 보니 430px 중 실제 표는 148px 이었다. 나머지는
* 겹친 머리와 로그판이었다. 그중 이 둘이 순전한 되풀이였다.
*
* 안쪽 목록의 카드 머리 <연결된 장치 / USB 에 연결하면 이 보드가 알아서 잡습니다>
* 바깥이 이미 적었다 -- <아두이노 등록 / 아두이노 한 대를 USB 로
* 연결해 등록합니다>. 같은 말이 두 크기로 두 번 섰다.
* <새로고침> 단추 이 화면은 스스로 계속 물어본다(app/setup/screen.mjs 의
* setInterval(pull)). 안 눌러도 뜨는 것을 누르라고 내놓고 있었다.
*
* **목록 걸음에서만** 걷는다. 핀을 정하는 걸음으로 넘어가면 안쪽 제목이 <장치 구성> 으로
* 바뀌어 지금 어디인지를 말하고, 단추도 <저장>·<되돌리기> 로 바뀐다 -- 그것은 되풀이가
* 아니라 그 걸음에만 있는 것이라 그대로 둔다.
*/
.is-bare .panel[data-view="list"] .card-head { display: none; }
.is-bare:has(.panel.active[data-view="list"]) .bare-actions { display: none; }
/* ── ui-parts.css ─────────────────────────────── */
/*
* 조각 -- 카드 · 정보 나열 · 버튼
*
* 업무용 도구의 화면 규칙을 한곳에 둔다. 색·간격·글자 크기를 화면마다 다시 정하면
* 같은 제품 안에서 화면마다 다른 인상이 된다.
*
* 어느 화면에나 서는 것만 여기 둔다. 대시보드에만 서는 부품은 app/ui-dash.css 로
* 갈랐다 -- 한 장이 852줄이 되어 한 번에 읽히지 않았다(목표 400 · 상한 800).
* 전체 차례는 app/ui.css 가 적어 둔다.
*/
/* ── 구획 ───────────────────────────────────────────────── */
/*
* ── 카드는 **상자가 아니라 구획**이다 ─────────────────────
*
* 모든 묶음이 테두리·모서리·그림자를 두른 상자였다. 그런데 그 안에 든 것이 이미 제
* 판을 갖는다 -- 표(.table), 핀 격자(.rowlist), 정보 나열(.facts). **판 안에 판이
* 겹치면** 테두리가 두 겹으로 보이고, 안쪽 것이 무엇의 일부인지가 흐려진다.
*
* 그래서 기본을 뒤집었다. 구획은 **제목 + 선 + 내용**이고, 판은 내용이 필요할 때만
* 스스로 갖는다. 화면이 넓어지고, 테두리가 한 겹으로 줄어든다.
*
* 상자로 남는 것은 **고르는 대상**뿐이다(.card-click) -- 제어기 카드처럼 눌러서 고르는
* 것은 하나하나가 만질 수 있는 물건이라, 경계가 있어야 어디까지가 하나인지 안다.
*/
.card {
margin-bottom: var(--s-6);
}
/*
* 알아 두어야 하는 카드.
*
* 왼쪽에 굵은 선 하나만 세운다. 통째로 칠하면 그 카드가 화면에서 가장 세게 보여,
* 정작 눌러야 하는 자리(연결 요청·설정)보다 앞서 읽힌다 -- 알림은 **알리는 것**이지
* 시키는 것이 아니다.
*/
/*
* 알아 두어야 하는 구획. 왼쪽 띠 하나 -- 화면 어디서나 상태를 말하는 그 자리, 그 굵기다.
* 띠를 세우려면 그만큼 안쪽으로 물러나야 한다.
*/
.card.card-warn { border-left: 3px solid var(--warn); padding-left: var(--s-3); }
/*
* 구획 머리. 주요 동작은 여기 둔다 -- 긴 화면에서 아래까지 스크롤하지 않아도 닿는다.
* 아래 선이 **구획을 가르는 선**이 된다. 상자를 없앤 지금 이것이 유일한 경계다.
*/
/*
* **선 아래로 한 칸 띄운다.**
*
* 선만 긋고 여백을 안 줬더니, 구독 화면의 <약정>·<값> 처럼 머리 바로 밑에서 내용이
* 시작하는 구획에서 첫 줄이 선에 붙어 보였다 -- 카드 테두리가 사라진 판에서 이 선이
* 유일한 경계이므로, 붙으면 경계가 아니라 밑줄로 읽힌다.
*
* 머리와 내용 사이가 이미 벌어져 있던 구획은 저마다 위쪽 여백을 갖고 있었다. 그것을
* 지우지 않고 여기에 얹으면 그 자리만 두 배가 되므로, 간격은 **여기 한 곳에서만** 준다.
*/
.card-head {
padding: 0 0 var(--s-3);
margin-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.card-head > div:not(.spacer) { min-width: 0; }
/*
* 구획 이름.
*
* 12px 소문자 대문자꼴(.section-title)과 14px 반굵은 글자(.card-title)가 따로 있었다.
* 같은 뜻(여기서부터 다른 이야기다)을 두 모양으로 그리던 것이라 **한 획으로 모았다** --
* 두 이름을 다 받는 것은 쓰는 자리가 열한 곳이라, 이름을 갈아 끼우는 대신 여기서 잇는다.
*
* 판독부의 값이 40px 을 넘으므로 이 글자는 작아도 밀리지 않는다. 작게 두되 **또렷하게**
* 둔다 -- 흐린 회색 대문자꼴은 제목이 아니라 꼬리표처럼 읽힌다.
*/
.card-title, .section-title {
font-size: var(--t-lg); font-weight: 700; letter-spacing: -.012em;
color: var(--ink); margin: 0;
text-transform: none;
}
/* 구획 이름 옆의 셈. 이름과 같은 줄에 서되 제목의 무게를 가져가지 않는다. */
.section-count {
margin-left: var(--s-2);
font-size: var(--t-sm); font-weight: 500; color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/*
* 카드 제목 앞의 별. <자주 보는 핀> 카드가 쓴다.
*
* 줄 맨 앞의 별과 **같은 획, 같은 색**이라 "여기 모인 것이 그 별을 붙인 것들" 이
* 말 없이 읽힌다. 제목 글자보다 조금 작게 두어 제목을 밀어내지 않는다.
*/
.title-star {
width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px;
fill: var(--mark); stroke: var(--mark); stroke-width: 1.7; stroke-linejoin: round;
}
.card-desc { font-size: var(--t-xs); color: var(--gray-500); margin: 2px 0 0; }
/*
* 좌우 여백을 두지 않는다. 안에 든 판(표·격자)이 **구획 머리와 같은 선에서** 시작해야
* 한 덩어리로 읽힌다 -- 여백을 두면 판이 구획 안에서 한 번 더 들여쓰기 된다.
*/
.card-body { padding: var(--s-4) 0 0; }
/*
* ── 카드 한 장 안의 묶음 ──────────────────────────────────
*
* 다루는 것이 둘인데 그 둘이 **한 가지 일**일 때가 있다. 구성 화면이 그렇다 --
* 이 보드에 붙은 장치와, 화면이 이 보드를 부를 이름. 따로 볼 일이 없고 저장도 한 번이다.
*
* 그런 것을 카드 두 장으로 세우면 머리(제목·설명·테두리·그림자)가 두 벌 서고, 정작
* 안에 든 것은 입력칸 하나다. 실제로 구성 화면이 그랬다 -- 칸 하나를 담으려고 90px
* 짜리 카드가 서 있었고, 카드 사이의 빈 띠가 "여기서 저기로 넘어간다" 고 말하는 바람에
* 한 번에 저장되는 것들이 서로 남처럼 보였다.
*
* 카드는 한 장으로 두고 **안에서** 나눈다. 선 하나와 작은 제목이면 족하다.
*/
.card-part { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.card-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* 제목과 설명은 한 덩어리다. 사이를 묶음 간격(12px)으로 벌리면 둘이 남처럼 보인다. */
.part-head { display: grid; gap: 3px; }
.part-title { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin: 0; }
.part-desc { font-size: var(--t-xs); color: var(--ink-3); margin: 0; max-width: 70ch; }
/* 칸 사이는 격자가 벌린다. 칸이 제 아래 여백까지 들고 있으면 마지막 줄만 두 배로 뜬다. */
.card-part .field-grid .field { margin-bottom: 0; }
.card-foot {
padding: var(--s-3) 0 0;
margin-top: var(--s-4);
border-top: 1px solid var(--line);
display: flex; gap: var(--s-2); align-items: center;
}
/* ── 정보 나열 ──────────────────────────────────────────── */
/*
* 항목 수가 열 수의 배수가 아닐 때가 대부분이다. 그때 마지막 줄에 홀로 남은 항목이
* 가로로 늘어나 버리면 만들다 만 화면처럼 보인다(6개짜리에서 실제로 그랬다).
*
* auto-fit 은 **전체에서 비는 칸만** 접는다. 그래서
* 항목이 적어 첫 줄도 못 채우면 -> 빈 칸이 접히고 항목이 고르게 늘어난다
* 항목이 많아 줄이 넘어가면 -> 칸 너비가 고정되어 마지막 항목도 제 폭을 지킨다
* 두 경우 모두 빈 칸이 회색으로 남지 않는다. 칸에 따로 배경이나 선을 주지 않기 때문이다.
*/
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
padding: 4px 0;
}
/* 묶음이 둘 이상 이어지면 서로 붙어 한 덩어리로 보인다. 사이를 띄워 구분한다. */
.facts + .facts { margin-top: 12px; }
.fact { min-width: 0; padding: 10px 16px; }
.fact-k {
font-size: var(--t-xs); color: var(--gray-500);
text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.fact-v { font-size: var(--t-md); color: var(--black); margin-top: 3px; font-weight: 500; word-break: break-all; }
.fact-v.muted { color: var(--gray-400); font-weight: 400; }
/* ── 버튼 ───────────────────────────────────────────────── */
/*
* 단추. **기계의 단추**다.
*
* 옛것은 흰 바탕에 회색 테두리, 500 굵기였다 -- 웹 양식의 기본값이고, 그래서 어느
* 제품에나 있는 모양이었다. 셋을 바꿨다.
*
* · 바탕을 비운다. 흰 판 위의 흰 단추는 테두리로만 서 있어 있으나 마나다.
* · 글자를 굵힌다(600). 누르는 것은 읽는 것보다 무거워야 한다.
* · 모서리를 4px 로 깎는다. 둥근 단추는 부드럽고, 이 제품은 설비를 켠다.
*/
.btn {
appearance: none;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 7px 13px;
font-family: inherit;
font-size: var(--t-md);
font-weight: 600;
line-height: 1.3;
cursor: pointer;
background: transparent;
color: var(--ink);
transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
/* 화면 이동 버튼은 로 만든다. 밑줄이 남으면 다른 버튼과 따로 논다. */
text-decoration: none;
/* 는 inline 이라 padding 만으로는