화면 골격의 원본 문서. 1부 대시보드 · 2부 서브페이지 · 3부 팝업으로 나뉜다. 새 화면은 해당 부의 골격을 그대로 재사용하고, 컴포넌트 낱개 스펙은 samples.html(공통)·dashboard.html(대시보드 전용)이 원본이다.
대시보드(홈).dc.html 기준
셸 — GNB 64px #161616(z-index 96 · 확장 패널 230px z 97 — 최대화 팝업 z 90보다 항상 위) · 탑바 48px #393939, 좌측 페이지 타이틀 20px/300 #c6c6c6, 우측 탑바우측.dc.html dc-import · 본문 배경 #FFFFFF, 좌측 패딩 20px.
컨트롤 바(54px 행) — 좌측: 층 선택 드롭다운 192×40(19px/600, 그림자 0 4px 12px, 열린 메뉴 항목 40px·선택 #eef1f6+#0f62fe) + 핀 토글(34×40, 고정 시 파랑). 우측 레일(폭 100px): 알람/정보 토글(38×40 셀 2개 — 선택 #161616+흰 아이콘, 통합탭에서만 노출) + 새로고침(28px) + 시계 14px.
탭 — 현황 · 시험 · 예지보전 · 통합. 층 선택은 전체 층 / 1F / 2F.
전체 층 화면. 챔버명은 카드에 표기하지 않는다(툴팁에서만)
실 카드 — 그림자 0 4px 14px rgba(22,22,22,.13) · 헤더에 실 이름 + 층 요약 배지 · 클릭 시 실 팝업(3부 P-1).
챔버 카드 — 헤더 아이디 + 연차(1Y/2Y)만, 챔버명 없음 · 폭·높이 화면 내 균일 · 온습도는 좌(온도)/우(습도) 배열, 단위는 아래 작게 흐린색 · 시료 셀 칩(경보 시 깜빡임, samples 19-3) · 한 줄 초과 시 +N 표기 · 하단 4px 진행률 바.
토글 모드 — 알람 모드(default): 아이디 + 알람 정보만 · 경고/위험 카드 면색 강조. 정보 모드: 온습도 + 상세(과전류·소자 분류 등은 카드 하단, 작은 폰트).
카드 툴팁 — 카드 전체 hover, #393939 · 챔버명 15px/600 → 알람(등급 아이콘 15px, samples 19-2) → 온습도 레벨(하단, 위 항목보다 흐린 배경) 순. 전체층 화면 전용 — 팝업·진단 상태에서는 챔버명만 또는 없음.
GNB + 탑바 + 콘텐츠 래퍼 — 시료.dc.html 기준
GNB 좌측 고정 64px · #161616 · 아이콘 26px · 링크는 대시보드·시료만.
탑바 49px · #393939 · border-bottom 1px #262626 · padding-left 32px · 페이지 탭 18px/자간 0.16px/간격 56px — active #FFFFFF 600, inactive #a8a8a8 · 우측은 탑바우측.dc.html dc-import (복제 금지).
콘텐츠 래퍼 padding 24px · 세로 gap 16px · 배경 #f4f4f4.
조회 바 한 줄: 기간 탭(44px 흰 카드, 항목 padding 0 22px) + 직접 지정 날짜 입력(158×40, #f4f4f4, 밑줄 1px #8d8d8d) + 검색(44px 흰 면, 그림자 없음, 돋보기 18px #6f6f6f). 화면 특성에 따라 기간 탭 생략 가능(등록·보관 현황).
목록 중심 화면의 기본형. 상단 집계 타일이 필터를 겸한다
단계 필터 타일 grid repeat(7,1fr) · gap 1px on #e0e0e0 · 타일 padding 16px 20px 18px · 라벨 16px/600 · 숫자 30px/300 + '건' 14px #6f6f6f · 색·hover는 samples 21-1 · 선택 시 outline 2px #0f62fe(offset −2).
페이지 타이틀 "시료 이력" 16px/600 · 행 높이 40px · 상태(필터) 타일보다 위에 놓는다 · 아래 여백 −10px 보정 → 타이틀-타일 간 6px.
상세 상태 컬럼 단계 컬럼은 태그만 · 하위상태는 마지막 "상세 상태" 컬럼에 15px #525252로 — 시험중 = 정상/이상, 보고 = 반출예정 / 반출완료.
y축 규칙(공통) 조회 바 44px → 타이틀 40px → 상태 타일 → 목록·상세 (margin-top 12px) — 좌 목록 카드와 우 상세 패널은 같은 y에서 시작(스페이서 없음).
목록 카드 그림자 0 4px 12px rgba(0,0,0,.10) · Total 바 46px #e0e0e0 — "Total" 14px #525252 + 건수 18px/600 #0f62fe 좌측, 정렬 셀렉트(120×32 흰 면) 우측 · 컬럼 헤더 44px 흰 면 14px/600 #525252, border-bottom 1px #e0e0e0, sticky · 행 52px/16px, hover #f7f9fb, active #eef2f6.
상세 패널 우측 420px 고정 · 헤더 46px #e0e0e0(ID 16px/600 + 보조 14px #525252) · 미선택 시 Empty state(samples 07).
생성 액션이 있는 목록 화면의 기본형
타이틀 행 40px — "접수" 16px/600 좌측, 신규접수 버튼(40px 높이 · #393939 · 흰 글자 16px · + 아이콘 17px · padding 0 50px · hover #161616) 우측 · 카드와 gap 10px.
목록 카드 Total 바·컬럼 헤더·행 스타일은 S-1과 동일(행 54px).
접수 상세 Drawer 우측 슬라이드 · 반투명 배경 없음 · 3단계 스텝 탭(기본 정보 → 시료 정보 → 시료 이미지, 원형 번호 + 연결선) · read 모드 = #f4f4f4 면 + 1px #8d8d8d 밑줄, edit 모드 = 흰 면 + 2px #0f62fe 밑줄 · 하단 버튼 3:7(좌 취소/수정 · 우 저장 #0f62fe) · 저장 시 확인 alert popup.
타이틀을 탭이 대체하는 화면의 기본형
조회 바 기간 탭 없음 — 검색만(그림자 없음).
상태 탭(타이틀 대체) 행 높이 48px · 탭 36px, padding 0 24px 20px(텍스트 y 중심이 타이틀 글자와 동일 지점) · 16px, active 600 #161616 + inset 밑줄 2px #161616, inactive 400 #8d8d8d · 건수 13px #8d8d8d · 카드와 gap 2px → 총 50px 유지.
탭 동작 등록 대기가 default · 상세 패널의 보류 버튼으로만 등록 보류 이동, 보류 탭에서는 같은 버튼이 "보류 해제".
배정 패널 우측 440px · margin-top 50px · 헤더 46px #e0e0e0 · 하단 버튼 보류(테두리 흰 면)/등록.
공간(슬롯) 중심 화면의 기본형
조회 바 기간 조회 기능 전체 제외(기간 탭·직접 지정 모두) — 검색만.
시료 슬롯 카드 점유 = #eaeef4 면 + 1px #c2ccd8 테두리 + ID #161616 · 빈 슬롯 = 흰 면 + 1px #e0e0e0 · hover 시 "ID 보관 중" 툴팁.
집계 타일·카드 그림자·헤더 스타일은 S-1과 동일.
시험.dc.html — 단계(계획→시험중→완료→보고) 흐름 화면의 기본형
컬럼 grid repeat(4,1fr) · 헤더 46px = 단계 색 면(계획 #e8d9b8 · 시험중 #a7f0ba · 완료 #bcdcf0 · 보고 #d7c1ff, 시료 단계 팔레트와 동일) + 라벨 16px/600 + 건수 18px/600 #0f62fe.
카드 흰 면 · 그림자 0 2px 6px rgba(0,0,0,.12) · ID 15px/600 · 시험명 14px 2줄 말줄임 · 시료·장비 13px #6f6f6f · 담당/기한 13px — 상태 점(10px 원형, ID 우측)·진행률 바는 시험중 컬럼에만 · 이상 = #da1e28 깜빡임 1.1s, 텍스트 없이 title 툴팁. 선택 = 2px #0f62fe 아웃라인(미선택 초기엔 없음).
편집 모드 우측 상단 "편집" 고스트 버튼(30px)으로 진입해야 drag & drop 활성(기본 읽기) · 드롭 대상 컬럼 2px dashed #8d8d8d.
상세 패널 420px · 계획 단계 = 시료 배정·장비 설정(장비 인라인 수정은 samples 06) + 완료 체크 2개 → 모두 체크 시 "시험 시작"(파랑) 활성 · 시험중 = 수집 데이터 표 + 시험명 우측 32px 아이콘 버튼(↗ 20px) → 챔버상세.dc.html 이동 · 결과 = 판정 체크 → "보고 단계로 이동" 활성 + 좌측 "재시험" 보조 버튼 · 보고 = 성적서 발행.
시험.dc.html — 회차별 비교 · 변경 이력(변경자/시점/사유) 화면의 기본형
조회 바(공통) 기간 세그먼트(당일·1주·1개월·1년·직접 지정, 기본 1주 — samples 05) + 검색바(시료ID·접수번호·의뢰자·담당자) 한 행 · 직접 지정 시 날짜 입력 2개(yyyy-mm-dd) 노출.
목록 Total 바(공통 규격 ↓) + 정렬(최신순·시험번호순·회차 많은순) · 컬럼 헤더 44px · 행 54px · 선택 행 #eef2f6(미선택 초기엔 없음).
회차별 비교 회차 카드(#f4f4f4 · 최신 회차 #f7f9fc + 1px #a6c8ff) — 판정 태그(부적합 #fff1f1 · 재시험 #fff4e0 · 적합 #defbe6) · 직전 회차 대비 변경된 조건 값은 파란색(#0f62fe).
변경 이력 카드마다 시점 · 변경자 · 필드 · 이전 값(취소선 #8d8d8d) → 새 값(#0f62fe/600) · 사유 14px #525252.
시료.dc.html 원본 — 시료 이력·접수·등록 / 시험 이력 등 모든 목록 카드 공용. 화면별 재구현 금지, 이 규격 그대로 복제
Total 바 높이 46px · 배경 #e0e0e0 · 좌우 패딩 20px · "Total" 14px/0.32px #525252 + 건수 18px/600 #0f62fe (baseline 정렬, gap 5px).
정렬 드롭다운(트리거) 흰 면 · 정확히 120×32px · 패딩 0 38px 0 12px · 라벨 14px/0.32px #161616 · 셰브론 12px #525252, 우측 14px 중앙 고정 · 바 우측 끝에서 margin-right −12px(면이 바 패딩을 8px 파고듦) · margin-left 10px.
열린 메뉴 트리거 아래 34px 지점 · 트리거와 같은 폭 · 흰 면 + 1px #e0e0e0 + 그림자 0 4px 10px rgba(0,0,0,.12) · 항목 34px, 패딩 0 12px, hover #eef1f6 · 현재 값 600/#eef1f6 · 바깥 클릭 닫힘(fixed 오버레이).
네이티브 <select> 사용 금지 — 화면 간 시각 불일치의 원인.
이동형 팝업 · 중앙 고정 모달 · Drawer — 낱개 스타일 스펙은 samples.html 09/10/12가 원본
① 이동형 팝업 — 실 팝업 · 타이틀바 52px #161616(제목 18px/600 흰색) · 바 드래그로 이동, 더블클릭 = 원래 크기 복귀 · 버튼 3종(최소화 – / 최대화 □ / 닫기 ×, 32px 셀 hover #393939) · 기본 크기 min(1200px, 100vw−120px) × min(760px, 100vh−200px), 화면 중앙 · 최대화 = left 64px, GNB를 가리지 않음(z-index 90 < GNB 96 — 최대화 중에도 사이드바 펼침 동작) · 최소화 = 우하단 260×46px 바.
② 이동형 팝업 — 영상 팝업 · 타이틀바 #e0e0e0(48px 계열) · 선택 단계 400px / 재생 단계 800px(플레이어 480px) · 바 드래그 이동 + 더블클릭 복귀 · 최대화 = left 64px, calc(100% − 64px) 채움, 반응형 · 재생 단계에서만 최대화 버튼 노출.
③ 중앙 고정 모달 · alert popup(380px, #f4f4f4 바탕, 하단 56px 버튼 — 확인형 1개 / confirm형 아니오·예 1:1) · 대형 콘텐츠 모달(이력 상세 1000px, 다크 타이틀바 52px #161616, 화면 정중앙) · 오버레이 rgba(22,22,22,.4).
④ Full window 팝업 · 다른 화면을 통째로 띄울 때만 사용(예: 시험 수행 → 챔버 상세) · position fixed inset 0, z-index 400 · 상단 바 49px #393939(제목 15px/600 흰색 + 대상 ID 14px #c6c6c6 + 우측 32px 닫기 ×, hover #525252) · 본문은 대상 화면을 그대로 임베드 · 화면 이동(링크) 대신 이 유형을 쓰면 작업 문맥이 유지된다.
공통 — 경보 토스트(420px)는 중앙 고정·수동 닫기(X로 닫으면 전 화면 재노출 금지), 성공 토스트는 중앙·3초 자동 소멸. 팝업 타이틀바 높이·색은 UI shell 규칙(48px #e0e0e0 / 52px #161616 / full window 49px #393939)을 따른다.
시료 접수 — 접수 상세 / 신규 입력 Drawer. 저장 confirm에서 "예" → 읽기모드 + 1단계(기본 정보) 복귀(신규 직접입력도 동일: 입력값으로 접수 레코드 생성 후 읽기모드)
위치·크기 — 우측 슬라이드 · 반투명 오버레이 없음(문서 영역 그대로 보임) · 타이틀바 46px #e0e0e0(접수번호 16px/600 + 닫기 32px).
단계 스텝 탭 — 3단계(기본 정보 → 시료 정보 → 시료 이미지) · 26px 원 + 2px 연결선 · 완료 = 파란 원+체크, 현재 = 파란 테두리, 대기 = 회색 테두리 (samples 14).
모드 — read: #f4f4f4 면 + 1px #8d8d8d 밑줄, 선택된 값만 노출(라디오·화살표 숨김) / edit: 흰 면 + 2px #0f62fe 밑줄, 라디오·항목 추가 활성 · 접수번호는 항상 읽기 전용.
하단 버튼 — read: 수정(좌하단) / edit: 취소:저장 = 3:7, 저장 #0f62fe · 저장 클릭 시 확인 alert popup · 신규 입력 1·2단계는 다음/이전(←) 버튼, 3단계에서 취소·저장.
1. 셸은 그대로 — 탑바 우측은 반드시 탑바우측.dc.html dc-import.
2. 서브페이지는 조회 바 아래 50px 지점에서 본문 카드 시작 — 타이틀형(40px 행 + 10px)이든 탭형(48px 행 + 2px)이든 합이 50px.
3. 목록 카드는 Total 바(46px #e0e0e0) → 컬럼 헤더(44px 흰 면) → 행(52~54px) 3층 구조 고정 · 정렬 셀렉트는 Total 바 우측.
4. 우측 패널은 목록 카드와 같은 y에서 시작(스페이서 50px), 헤더 46px #e0e0e0 — 미선택 Empty state에서도 이 회색 바를 남긴다.
5. 팝업은 P-1의 4유형(이동형 2 · 중앙 모달 · full window) 중에서 선택 — 새 유형을 만들지 않는다. 다른 화면 전체를 보여줄 때는 링크 이동이 아니라 full window 팝업.
6. 컴포넌트 낱개 스펙(버튼·태그·달력·alert 등)은 samples.html이 원본 — 여기에 중복 정의하지 않는다.