/* 디자인 값 모음 (색·글꼴·간격·모서리·그림자). 화면 코드에는 이 값을 직접 쓰지 않고 변수 이름만 쓴다 (CLAUDE.md). * * 쓰는 곳 * - Tailwind 클래스: base_public.html 의 @theme 가 이 변수를 Tailwind 이름에 연결한다. * 색 bg-bg / bg-surface / bg-subtle / border-line / border-line-strong / text-ink / text-ink-2 / text-ink-3 * bg-accent / text-accent / bg-accent-soft / text-on-accent / text-danger / bg-warn-soft ... * 모서리 rounded-ctl(입력칸·버튼) / rounded-card(카드·창) / rounded-pill * 그림자 shadow-card / shadow-pop, 글꼴 font-sans / font-mono, 간격 p-4 등은 --sn-space 배수 * Tailwind 기본 색(slate, blue, amber ...)은 꺼 두었다. 써도 아무 색이 나오지 않는다. * - 부품 클래스(.sn-btn, .sn-input, .sn-tab ...): static/css/ui.css (변수만 참조) * * 2026-10-06 시안 A(맥 설정 앱 느낌)로 확정 (기획서 2.10). */ /* ── 글꼴·간격·상태 색 ── */ :root { --sn-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --sn-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* 글자 크기 (기획서 2.10 "글자 크기"). 화면 코드에는 크기 값을 쓰지 않고 아래 세 단계만 쓴다. * 기준값 --sn-root-size: 브라우저 글자 크기 설정의 몇 %. 모든 rem 값(글자·간격·폭)이 이 값을 따라 함께 바뀐다. * 브라우저 기본(16px)에서 93.75% = 15px. 나중에 "글자 크기: 크게" 설정은 이 값 하나만 키운다 (기획서 8장). * 세 단계 (Tailwind: text-base / text-lg / text-sm, 부품 CSS: var(--sn-text) / var(--sn-text-lg) / var(--sn-text-sm)) * 기본 --sn-text 표 내용·입력칸·버튼·왼쪽 메뉴·탭·모든 코드·본문 * 큰 --sn-text-lg 화면(창·패널) 제목, 상세 화면의 이름 * 작은 --sn-text-sm 보조 설명, 등록자·수정 일시 같은 부가 정보에만 * px 는 브라우저 기본 설정일 때 값. */ --sn-root-size: 93.75%; --sn-text: 0.9333rem; /* 14px */ --sn-text-lg: 1.1333rem; /* 17px */ --sn-text-sm: 0.8rem; /* 12px */ --sn-leading: 1.5; /* 줄 간격 (기본·작은) */ --sn-leading-lg: 1.35; /* 줄 간격 (큰) */ --sn-space: 0.25rem; /* Tailwind 간격 1단위 (p-4 = 4 × 이 값) */ --sn-focus-ring: 3px; /* 키보드 선택 테두리 굵기 */ --sn-dot: 8px; /* 연결 상태 점 크기 */ --sn-icon: 1.3333rem; /* 탭 줄 아이콘·로딩 표시 크기 (20px) */ /* 표: 업무용으로 촘촘하게. 글자는 기본 크기, 칸 안쪽 여백 4px (Tabulator 기본) — 여백은 줄이지도 늘리지도 않는다 */ --sn-table-font-size: var(--sn-text); --sn-table-cell-pad: 4px; /* 상태 색 (시안 공통) */ --sn-danger: #d70015; --sn-danger-soft: #fff0f1; --sn-danger-line: #f5c2c7; --sn-danger-hover: #b80012; --sn-warn-soft: #fff8e6; --sn-warn-line: #f0d58c; --sn-warn-ink: #6b4f00; --sn-ok: #1f9d55; --sn-dirty: #ff9500; /* 저장 안 된 변경 ● */ --sn-scrim: rgba(0, 0, 0, 0.32); /* 창 뒤 어두운 막 */ } /* ── 색·모양: 밝은 회색 바탕, 흰 카드, 애플 파랑, 선택 메뉴는 파랑 채움, 선택 탭 아래 파란 줄 ── */ :root { --sn-bg: #f5f5f7; --sn-surface: #ffffff; --sn-subtle: #f0f0f2; --sn-hover: rgba(0, 0, 0, 0.04); --sn-line: #e3e3e8; --sn-line-strong: #d2d2d7; --sn-ink: #1d1d1f; --sn-ink-2: #424245; --sn-ink-3: #86868b; --sn-accent: #0071e3; --sn-accent-hover: #0062c4; --sn-on-accent: #ffffff; --sn-accent-soft: #e8f1fc; --sn-focus: rgba(0, 113, 227, 0.35); --sn-side-bg: #f5f5f7; --sn-side-ink: #1d1d1f; --sn-side-muted: #86868b; --sn-side-hover: rgba(0, 0, 0, 0.05); --sn-side-line: #e3e3e8; --sn-nav-active-bg: #0071e3; --sn-nav-active-ink: #ffffff; --sn-nav-indicator: transparent; --sn-tabbar-bg: #f5f5f7; /* 맨 위 탭 줄 (메뉴 숨기기 · 탭 · 로그인 표시) */ --sn-tab-ink: #424245; --sn-tab-active-bg: #ffffff; --sn-tab-active-ink: #1d1d1f; --sn-tab-indicator: #0071e3; /* 선택 탭 아래 줄 */ --sn-tab-active-border: transparent; --sn-tab-radius: 0; --sn-tab-gap: 0; --sn-table-head-bg: #f5f5f7; --sn-table-stripe: transparent; --sn-table-selected: #e8f1fc; --sn-radius-ctl: 8px; --sn-radius-box: 2px; /* 아주 작은 네모(트리 펼침 표시 .sn-fold-box) */ --sn-radius-card: 12px; --sn-radius-pill: 9999px; /* 알약 모양 (작은 표시 .sn-chip) */ --sn-shadow-card: none; --sn-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); --sn-shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); /* 고르기 단추(.sn-seg)의 선택된 칸 */ --sn-toast-bg: #1d1d1f; --sn-toast-ink: #ffffff; --sn-sidebar-w: 16rem; --sn-topbar-h: 2.9333rem; /* 맨 위 탭 줄 높이 (44px). 글자 크기와 함께 커지게 rem */ } /* ── 문서 본문 (공지사항·전자결재 등 사용자가 편집기로 쓴 HTML). static/css/doc.css 가 사용 ── * 편집기와 조회 화면(iframe) 안에서 쓰는 값. 기존 앱 편집기(tinyeditor.py content_style)와 같은 모양: * 'Malgun Gothic' 14px, 줄 간격 1.6, 글자색 #333 (맑은 고딕이 없는 기기는 비슷한 한글 글꼴로) */ :root { --sn-doc-font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --sn-doc-font-size: 14px; --sn-doc-line-height: 1.6; --sn-doc-ink: #333333; --sn-doc-bg: #ffffff; /* 인쇄·PDF (기존 noticepopup.py save_pdf_BTN_clicked 양식과 같은 색·크기) */ --sn-print-title-ink: #2c3e50; --sn-print-title-size: 24px; --sn-print-font-size: 12px; /* 인쇄 본문 (기존: 편집기 바깥 페이지 글자 크기 12px, 글자색 기본 검정) */ --sn-print-ink: #000000; --sn-print-meta-size: 12px; --sn-print-footer-size: 10pt; --sn-print-line: #cccccc; --sn-print-head-bg: #f8f9fa; --sn-print-muted: #7f8c8d; --sn-print-page-margin: 15mm 15mm 20mm 15mm; /* A4 위·오른쪽·아래·왼쪽 (아래는 출력일시 자리) */ /* 전자결재 인쇄 (기존 edocpopup.py save_pdf_BTN_clicked 양식: 기안문서 + 결재란·합의란 표 + 결재 의견 + 첨부 목록, 같은 색·크기) */ --sn-print-edoc-title-gap: 2px; /* "기 안 문 서" 글자 사이 (letter-spacing) */ --sn-print-edoc-body-min: 350px; /* 본문 칸 최소 높이 */ --sn-print-sign-line: #808080; /* 결재란 선 */ --sn-print-sign-w: 80px; /* 결재란 칸 폭 */ --sn-print-sign-h: 70px; /* 결재란 이름 칸 높이 */ --sn-print-sign-date-h: 25px; /* 결재란 일시 칸 높이 */ --sn-print-sign-head-w: 25px; /* 결재란 왼쪽 "결재"·"합의" 칸 폭 */ --sn-print-sign-size: 12px; /* 결재란 이름 */ --sn-print-small-size: 11px; /* 결재란 일시·승인/반려, 결재 의견 일시 */ --sn-print-date-ink: #555555; --sn-print-approve-ink: #0000ff; /* 승인 (기존 'blue') */ --sn-print-deny-ink: #ff0000; /* 반려 (기존 'red') */ --sn-print-section-size: 13px; /* "결재 의견"·"첨부파일 목록" 제목 */ --sn-print-section-line: #94a3b8; --sn-print-row-line: #eeeeee; --sn-print-memo-name-bg: #fcfcfc; --sn-print-file-bg: #fafafa; --sn-print-file-head-bg: #f1f5f9; --sn-print-file-head-line: #cbd5e1; --sn-print-file-head-ink: #475569; --sn-print-file-ink: #333333; --sn-print-file-muted: #666666; /* 이미지 편집 창 (static/js/image_editor.js): 그리기 색은 그림 화소에 합쳐져 저장된다. 빨강은 기존 편집 창(PIL "red")과 같은 값 */ --sn-draw-red: #ff0000; --sn-draw-yellow: #ffd400; --sn-draw-blue: #0050ff; --sn-draw-green: #00a83a; --sn-draw-black: #000000; --sn-editor-shade: rgba(0, 0, 0, 0.45); /* 자르기: 버릴 부분을 어둡게 */ --sn-editor-crop: #ffffff; /* 자르기 영역 점선 */ /* 목록 행 강조 (기존 공지 목록: 상단 배치 행 배경 powderblue, 읽지 않음 빨간 글자) */ --sn-row-pinned: #dcedf2; --sn-row-unread: #d70015; }