/* ══════════════════════════════════════════════════════════════════ sogero 디자인 토큰 2026-08-21 최초 · 2026-08-22 색 방침 변경 반영 ── 색 방침 (2026-08-22 사용자 결정) ──────────────────────────── 이전 판은 남색(#2C3A5C) + 따뜻한 회백(#F7F6F2) 팔레트였다. 사용자가 "이전색이 훨씬 좋은데" 로 이를 취소했다. **새 색을 들이지 않는다. sogero 가 지금 쓰는 색을 그대로 토큰화한다.** 토큰 이름은 바꾸지 않았다 — cowSelectionList.jsp 가 이미 참조 중이고, 이름을 바꾸면 그 화면이 조용히 무채색으로 떨어진다. 값만 갈아 끼웠다. 기존 화면에서 실측한 빈도 (상위): 152 #1C1F30 본문 108 #FDFDFD 카드 94 #2CA89A 틸 76 #D8DCE5 구분선 69 #24A5AA 틸2 49 #4A4F6C 보조 ── 대비비 실측 (지면 #F0F2F5 기준 · 이 파일 작성 시 계산) ────── ink 14.54 AAA ink-2 7.13 AAA ink-3 4.05 큰글자만 ink-4 1.93 (장식 전용 · 글자 금지) accent 2.61 (면·아이콘 전용 · 글자로 쓰지 말 것) accent-ink 4.53 AA accent-txt 위 흰글자 4.51 AA up 4.50 AA · down 4.51 AA **틸(#2CA89A)은 글자색이 아니다.** 배경 위 2.61:1, 흰 글자를 얹으면 2.93:1 로 둘 다 기준 미달이다. 브랜드색이므로 면·아이콘·테두리에만 쓰고, 글자에는 --s-accent-ink, 흰 글자를 얹는 버튼 면에는 --s-accent-txt 를 쓴다. 지시서는 --s-accent-txt 를 #0E869B(4.28:1)로 적었으나 실측 4.28 은 일반 텍스트 AA 기준 4.5 에 **미달**이다(큰 글자만 통과). 명도만 4단계 낮춘 #0E8297 로 4.51:1 을 확보했다 — 육안으로는 같은 색이다. **다크 테마는 넣지 않는다** — sogero 는 라이트 전용이다. ══════════════════════════════════════════════════════════════════ */ :root { /* 2026-09-22 폰 공통 끝단: 본문 카드 밑선 = 하단 메뉴 윗선 − 이 값 (gnb BottomRef.gap) — 모든 페이지 동일 간격 */ --m-bot-gap: 8px; /* ── 지면 · 면 ─────────────────────────────────────────── */ --s-bg: #F0F2F5; /* 페이지 배경 */ --s-surface: #FDFDFD; /* 카드 · 패널 · 모달 */ --s-surface-2: #E9EBF3; /* 표 머리글 · 비활성 · 구역 구분 */ --s-surface-3: #DDE1EB; /* 눌린 상태 · 스크롤 트랙 */ --s-line: #D8DCE5; /* 기본 경계선 */ --s-line-2: #C4C9D8; /* 강한 경계선 · 입력칸 */ /* ── 글자 ──────────────────────────────────────────────── */ --s-ink: #1C1F30; /* 본문 14.54:1 AAA */ --s-ink-2: #4A4F6C; /* 보조 본문·라벨 7.13:1 AAA */ --s-ink-3: #6D749C; /* 약한 텍스트 4.05:1 — 12px 이하 금지 */ --s-ink-4: #AAAFCA; /* 장식·비활성 1.93:1 — 글자로 쓰지 말 것 */ --s-on-accent: #FFFFFF; /* accent-txt 면 위 글자 */ /* ── 브랜드 액센트 (틸) ────────────────────────────────── */ --s-accent: #2CA89A; /* 면·아이콘·테두리 전용. 글자 금지(2.61:1) */ --s-accent-hov: #24A5AA; /* hover 면 */ --s-accent-ink: #207B71; /* 배경 위 틸 글자 4.53:1 AA */ --s-accent-txt: #0E8297; /* 흰 글자를 얹는 면 4.51:1 AA (버튼·배지) */ --s-accent-bg: #E4F2F0; /* 틸 헤일로 배경 */ /* ── 의미색 ────────────────────────────────────────────── */ --s-up: #CE360D; /* 상승 (국내 관행: 상승 적색) 4.50:1 AA */ --s-up-bg: #FDECE6; --s-down: #096CD8; /* 하락 4.51:1 AA */ --s-down-bg: #E6F0FC; --s-warn: #9A6304; /* 주의 4.50:1 AA */ --s-warn-bg: #FBF0DC; --s-danger: #CE360D; /* 되돌릴 수 없는 동작 = 상승색과 동일 톤 */ --s-danger-bg: #FDECE6; --s-ok: #2D7F0A; /* 정상 4.51:1 AA */ --s-ok-bg: #EAF6E4; /* ── 등급 램프 ─────────────────────────────────────────── */ /* sogero 기존 등급색 그대로. 면(-s) 과 글자(-그대로) 를 나눠 둔다 — 면에는 원색, 글자에는 4.5:1 을 넘긴 값. */ --s-gS: #CE360D; --s-gS-s: #D4380D; /* S */ --s-gA: #9A6304; --s-gA-s: #D48806; /* A */ --s-gB: #096CD8; --s-gB-s: #096DD9; /* B */ --s-gC: #2D7F0A; --s-gC-s: #389E0D; /* C */ --s-gD: #696F79; --s-gD-s: #8A8F99; /* D */ --s-on-grade: #FFFFFF; /* 등급 면 위 글자 */ /* ── 규격 ──────────────────────────────────────────────── */ --s-r-sm: 4px; --s-r: 7px; --s-r-lg: 10px; --s-shadow: 0 1px 2px rgba(28,31,48,.05), 0 8px 22px -14px rgba(28,31,48,.26); --s-shadow-lg: 0 20px 50px -18px rgba(28,31,48,.42); /* ── 글자 크기 · 자간 ──────────────────────────────────── */ --s-fs-xs: 11px; --s-fs-sm: 12.5px; --s-fs: 14px; --s-fs-lg: 16px; --s-fs-xl: 20px; --s-lh: 1.65; /* 한글은 1.6 아래로 내리면 답답해진다 */ /* ── 로그인 화면 (2026-10-07 · 시놀로지 SRM 로그인 형식) ───────────── 사용자 지시(2026-10-07, 스크린샷 "이거처럼"): 이 화면에 한해 시놀로지 형식 + 청록·흰색 조합을 쓴다(2026-10-07 남색 → 청록). HEX 는 이 블록 안에서만 정의한다. index.jsp 는 var(--s-login-*) · var(--s-*) 만 참조한다. 쓰는 곳: WEB-INF/jsp/public/index.jsp 하나뿐 — 다른 화면 색은 바뀌지 않는다. 배경(PC만 — 폰은 배경 없음): 2026-10-07 사용자 지시 "그라데이션 색을 sogero 기존 로그인 버튼 색상으로" → 기존 버튼 청록(--s-accent #2CA89A)을 중심으로 밝은 청록 → 버튼 청록 띠 → 짙은 청록 구석 + 아래 가운데 흐린 밝은 청록 */ --s-login-bg-1: #C1E0DF; /* 왼쪽 위 — 지면 회색에 청록 24% · 2026-10-07 사용자 "청녹색 약간 더 진하게" */ --s-login-bg-2: #F0F2F5; /* 가운데 대각선 띠 — 지면 회색 그대로(--s-bg 와 같은 값) · 2026-10-07 사용자 "배경색 많게 + 원래 청록 조금 · 밝은 느낌" */ --s-login-bg-3: #D8E9EA; /* 띠 옆 — 청록 12% · 2026-10-07 사용자 "청녹색 약간 더 진하게" */ --s-login-bg-4: #CDE5E5; /* 구석 — 청록 18% · 2026-10-07 사용자 "청녹색 약간 더 진하게" */ --s-login-glow: #D3E7E7; /* 아래 가운데 은은한 빛 — 청록 15% · 2026-10-07 사용자 "청녹색 약간 더 진하게" */ --s-login-accent: #299F92; /* 청록 — 윗변 막대 · 브랜드 · 포커스 밑줄 · 둥근 버튼 · 체크. 2026-10-07 사용자 "청록색과 하얀색 조합": 기존 버튼 #2CA89A(흰색 대비 2.93)를 5% 진하게 → 흰색과 3.25:1(큰 글자·그림 요소 기준 3 이상) */ --s-login-accent-hov: #23867B; /* 둥근 버튼 hover — 조금 더 진한 청록(흰색 4.40:1) */ --s-login-focus: #071A17; /* 키보드 포커스 링 — 아주 짙은 청록. 흰 카드 18:1 · 배경 가장 어두운 구석(bg-4) 3.2:1 · 밝은 곳 ≥7:1 (버튼과 링 사이 흰 3px 띠) */ --s-login-title: #414B55; /* '로그인' 제목 — 진회색(시놀로지 부제 색) */ --s-login-card: #FFFFFF; /* 카드 바탕 — 순백(시놀로지와 같음 · 자리표시 글자 ink-3 대비 4.5 확보) */ --s-login-info-bg: #E4F2F0; /* 안내 상자('자동 로그인 중...') · 아이디 칩 hover 바탕 — 옅은 청록 */ --s-login-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2); /* 카드 — 시놀로지 로그인 카드 그림자 그대로 */ --s-login-go-shadow: 0 5px 14px 0 rgba(41, 159, 146, .34); /* 둥근 버튼 — 버튼 청록 그림자(시놀로지와 같은 방식) */ --s-login-ping: rgba(41, 159, 146, .30); /* 둥근 버튼 맥박 고리(입력이 있을 때) */ } /* 눈 피로 완화 — 전역 기본값. 색을 바꾸지 않고 읽기만 편하게 한다. */ html { -webkit-text-size-adjust: 100%; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* 숫자가 열로 늘어서는 곳에서 자릿수를 고정한다 — 눈이 덜 흔들린다 */ table, .num, .tnum, input[type="number"] { font-variant-numeric: tabular-nums; } /* 키보드 포커스를 보이게 한다 (기존에 outline:none 이 흩어져 있다) */ :focus-visible { outline: 2px solid var(--s-accent-txt); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }