이 가이드와 화면 명세서는 같은 CSS 한 벌(spec-src/screens.css)을 쓴다. 가이드에서 보이는 모양이 곧 화면 모양이고, 토큰을 바꾸면 둘 다 바뀐다.

농장주가 하우스 밖에서, 폰 한 번 보고 "어느 동 · 어디서 · 무슨 일이 · 무엇을 했는지" 알 수 있어야 한다. 장식보다 읽히는 것이 먼저다.

색은 역할 이름(토큰)으로만 쓴다. 값은 라이트 · 다크에서 각각 다시 정의되어 있고, 오른쪽 위 테마를 바꾸면 아래 값도 바뀐다.

이 서비스에서 가장 중요한 색. 상태 클래스 하나(is-warn)를 붙이면 그 안의 --st 가 바뀌고, 배지 · 점 · 라벨 · 알림 아이콘이 모두 그 색을 쓴다. 항상 아이콘 + 글자와 함께.

글꼴은 Pretendard Variable 하나. 크기는 기본 14px × --u 에 em 배수로 쓴다 — 화면이 커지면(4K) --u 만 바뀌어 전부 같이 커진다.

간격은 em 으로 적는다 — 글자 크기(--u)를 따라 같이 커지고 작아진다. 아래 단계 안에서 고른다.

작은 것일수록 작게, 판일수록 크게. 상태 · 칩 · 스위치처럼 "값 하나"를 담는 것은 알약(999px).

층은 세 개 — 바탕(--bg) · 판(--panel + 테두리 + --shadow-1) · 떠 있는 것(드로어 · 다이얼로그 · 툴팁, --shadow-2). 3D 위에 뜬 도구는 반투명 판으로 뒤가 비친다.

24 × 24 격자 · 선 두께 1.9 · 둥근 끝 선 아이콘 한 벌. 색은 currentColor — 글자색을 따른다. 스프라이트 한 번 넣고 <use href="#i-이름"/> 로 쓴다. 칸을 누르면 코드가 복사된다.

움직임은 어디서 왔는지 · 어디로 갔는지를 알려줄 때만. 곡선은 하나 — cubic-bezier(0.2, 0.8, 0.2, 1) (빠르게 출발해 부드럽게 멈춤).

한 화면(또는 한 패널)에 주 버튼(primary)은 하나. 장비를 움직이는 버튼은 동사 + 목표값으로 적는다 (100% 열기).

화면을 떠나지 않고 보는 것만 바꿀 때 — 3D 표시 항목, 동 고르기, 지금 / 예보. 2 ~ 5개. 그 이상이면 칩.

목록을 거를 때 — 알림 등급 · 종류, 카메라 분할. 선택된 것은 글자색 반전(.is-on). 개수는 <b> 로.

입력칸은 라벨을 위에, 단위는 칸 안 오른쪽(.input__unit). 규칙 · 기준값처럼 숫자를 넣는 칸은 적정 범위를 바로 아래 보여준다.

상태를 알리는 기본 단위. 점(.dot)은 글자가 바로 옆에 있을 때만 (범례 · 칩 · 목록).

상태가 아닌 정보 — 장비를 지금 누가 움직이는지(자동 · 스케줄 · 수동 · 안전), 개수, 데이터 출처.

화면을 나누는 기본 판. 제목 줄(.card__h)은 아이콘 + 제목 + 오른쪽 "더 보기".

라벨 → 큰 값 → 한 줄 설명. 누르면 자세히(알림 센터 · 바람 · 비 3D)로. 3D 로 이어지는 칸은 오른쪽에 .kpi__go 표시.

값만 보여주지 않고 적정 범위 안에서 어디쯤인지를 같이 — 게이지는 위험 | 주의 | 적정 | 주의 | 위험 다섯 칸.

한 칸에 "무엇이 · 어디서 · 언제 → 무슨 일 → 자동이 무엇을 했나". 안 읽은 알림(.is-unread)은 상태색 바탕 · 테두리.

짧은 목록은 .log(시각 · 무엇 · 결과), 하나의 사건 경과는 .tl(점 + 세로선).

선은 2px 하나 + 적정 범위 띠(초록 옅게). 비교는 우수농가 띠(회색). 기준선은 경고색. 마우스를 올리면 세로선 + 시각별 값. 축은 하나만 (두 축 차트 금지).

3D 라벨 · 카메라 · 날씨를 누르면 뒤 화면(3D)을 그대로 두고 오른쪽에서 열린다. 폰에서는 같은 마크업이 아래에서 올라오는 바텀시트가 된다 (손잡이 자동).

되돌리기 어려운 동작 · 장비 명령 전에만. 제목은 질문, 내용은 지금 → 목표 · 걸리는 시간 · 멈추는 자동 규칙, 주 버튼은 질문의 동사.

껍데기는 화면에 적지 않고 data-shell="메뉴키" 로 넣는다 (spec.js). 화면 크기에 따라 같은 메뉴가 왼쪽 메뉴 → 아이콘 레일 → 하단 탭바로 바뀐다 (앱 껍데기 패턴).

16:9 판. 위에 카메라 이름 · LIVE · 시각, 아래에 설명. 알림 순간의 스냅샷도 같은 모양.

3D 엔진이 위치를 계산해 HTML 로 붙인다 (글자가 선명하고 누를 수 있음). 멀리서는 동 대표값 + 이상 센서만, 확대하면 센서 전부. 누르면 센서 상세 · 카메라 영상으로.

3D 모서리에 고정: 왼쪽 위 = 보는 항목, 왼쪽 아래 = 범례, 오른쪽 아래 = 시점(나침반 · 전체 보기 · 회전 · 바람). 날씨 칩은 바람 · 비가 켜졌을 때만.

모든 메뉴 화면은 같은 껍데기 안에 본문(.app__main)만 바뀐다. 메뉴 이동 때 메뉴 · 상단바는 그대로, 본문만 교체 (앱처럼). 아래 두 화면은 같은 마크업을 1920 · 390 폭으로 그린 것.

아래는 실제 3D 엔진이다 — 끌어서 돌리고, 휠로 확대하고, 온도 · 습도 · 히트맵을 바꿔 보세요. 테마를 바꾸면 3D 색도 바뀐다.

알림 하나를 열면 "무엇이 · 왜 · 무엇을 했고 · 결과는 · 누구에게 갔나"가 한 화면에 있어야 한다. 순서: 머리(상태 · 제목 · 메타 · 동작) → 발생 전후 차트 → 타임라인 → 전달 단계.

장비 카드 하나에 지금 상태 · 누가 움직이는지(배지) · 왜(한 줄). 사람이 누르면 자동 규칙이 멈춘다는 것을 누르기 전에 확인 창으로 알려준다. 안전 규칙(강풍 · 강우)은 항상 우선.

기준은 창(viewport)이 아니라 화면 루트의 폭(컨테이너 쿼리) — 명세서 · 가이드 안의 작은 화면에서도 같은 규칙이 걸린다. 큰 화면은 같은 내용을 키우지 않고 보여주는 양을 늘린다.

읽는 사람은 농장주 · 현장 관리자. 시스템 말 대신 농장에서 쓰는 말로, 짧게.