/* ───────────────────────────────────────────────────────── OMR Lab · design.css — Single source of truth for design tokens & shared components. Edit ONLY this file. (시각 정본: .planning/tmp/app-redesign-mockup-v2.html :root + 컴포넌트) "Precision staffroom tool" — Emerald brand · paper neutrals · monospaced metrics builder 단일(B1/B2/B3) · 모집단 동결 게이팅 · 채널/알림 캐스케이드 ※ --font/--mono 는 폰트 STACK만 DECLARE한다. 실제 폰트 파일 로드는 각 페이지 의 (Pretendard Variable · IBM Plex Mono)가 담당한다 (Plan 02). ───────────────────────────────────────────────────────── */ /* ── canonical tokens (시안 v2 L19-35 verbatim) ── */ :root{ --e50:#ecfdf5; --e100:#d1fae5; --e200:#a7f3d0; --e300:#6ee7b7; --e400:#34d399; --e500:#10b981; --e600:#059669; --e700:#047857; --e800:#065f46; --e900:#064e3b; --paper:#eef1ef; --surface:#ffffff; --surface-2:#f8faf9; --ink-900:#13201b; --ink-700:#3a463f; --ink-500:#6a756e; --ink-400:#9aa39d; --line:#e4e9e6; --line-2:#d4dbd7; --ok:#059669; --ok-bg:#ecfdf5; --warn:#b45309; --warn-bg:#fffaeb; --warn-400:#fbbf24; --bad:#dc2626; --bad-bg:#fef2f2; --bad-400:#f87171; --talk:#7c5e10; --talk-bg:#fef9e7; --talk-bd:#f5e3a3; --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px; --sh-sm:0 1px 2px rgba(19,32,27,.05), 0 1px 3px rgba(19,32,27,.05); --sh:0 6px 20px -6px rgba(19,32,27,.12), 0 2px 6px -2px rgba(19,32,27,.06); --sh-lg:0 28px 60px -20px rgba(19,32,27,.24); /* Phase 48 WIDE-01: 콘솔 페이지 공유 wide 컨테이너 폭(빌더 builder-wide 동일). 단일 출처. ※ design.css 미로드 페이지(admin·franchise)는 각 :root에 동일값을 복제하고 "SYNC: design.css --wide-max" 주석으로 표기한다(토큰 시스템이 분리돼 있어 로드 불가). */ --wide-max:min(1800px,96vw); } /* ── back-compat aliases (옛 변수명 → 캐논 토큰, D-04) ── 페이지 로컬 클래스 CSS가 옛 이름을 광범위 참조하므로 마크업 재작성 대신 single source에 별칭을 둔다. 이 블록은 캐논 블록 뒤에 위치해 var() 가 먼저 해석되게 한다. ※ 카카오 브랜드색(#FEE500)은 캐논 팔레트에 대응이 없는 외부색 → 별칭 대상 아님(index.html에 그대로 둠). */ :root{ /* grade 별칭 (grade.html L14) */ --primary:var(--e600); --primary-light:var(--e50); --success:var(--ok); --error:var(--bad); --bg:var(--paper); --card:var(--surface); /* dashboard 별칭 (dashboard.html L19-26) — --blue-* 는 에메랄드 오기 → 캐논 e* 로 수렴 */ --blue-50:var(--e50); --blue-100:var(--e100); --blue-200:var(--e200); --blue-300:var(--e300); --blue-500:var(--e500); --blue-600:var(--e600); --blue-700:var(--e700); --slate-50:var(--surface-2); --slate-100:var(--surface-2); --slate-200:var(--line); --slate-300:var(--line-2); --slate-400:var(--ink-400); --slate-500:var(--ink-500); --slate-600:var(--ink-500); --slate-700:var(--ink-700); --slate-800:var(--ink-900); --radius:14px; /* 캐논 r 토큰 중 14px 대응 없음 → 리터럴 유지(대시보드 레이아웃 보존) */ /* index 별칭 (index.html L83-92) — --emerald-*→e*, --red-*→bad 계열, --gray-*→ink/line/surface */ --emerald-50:var(--e50); --emerald-100:var(--e100); --emerald-200:var(--e200); --emerald-300:var(--e300); --emerald-400:var(--e400); --emerald-500:var(--e500); --emerald-600:var(--e600); --emerald-700:var(--e700); --emerald-900:var(--e900); --red-50:var(--bad-bg); --red-100:#fee2e2; --red-400:var(--bad-400); --red-500:var(--bad); --gray-50:var(--surface-2); --gray-100:var(--surface-2); --gray-200:var(--line); --gray-300:var(--line-2); --gray-400:var(--ink-400); --gray-500:var(--ink-500); --gray-600:var(--ink-500); --gray-700:var(--ink-700); --gray-800:var(--ink-900); --gray-900:var(--ink-900); } /* ── shared components (시안 v2 verbatim, 3개 페이지 실사용분만) ── */ /* 숫자 정렬 metric (시안 L43) */ .num{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:0} /* 버튼 (시안 L92-98, L150-151) */ .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;cursor:pointer; font-size:.84rem;font-weight:700;border:1px solid transparent;transition:transform .12s,background .16s,box-shadow .16s,border-color .16s} .btn svg{width:16px;height:16px} .btn:active{transform:translateY(1px)} .btn-ghost{background:transparent;color:var(--ink-700);border-color:var(--line)} .btn-ghost:hover{background:var(--surface);border-color:var(--line-2)} .btn-primary{background:var(--e600);color:#fff;box-shadow:0 8px 18px -8px rgba(5,150,105,.7)} .btn-primary:hover{background:var(--e700)} .btn-warn{background:var(--warn);color:#fff;box-shadow:0 8px 18px -8px rgba(180,83,9,.6)} .btn-warn:hover{background:#92400e} /* 칩 (시안 L83-85) */ .chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill); background:var(--surface);border:1px solid var(--line);font-size:.82rem;font-weight:600;box-shadow:var(--sh-sm);white-space:nowrap} .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--e500);box-shadow:0 0 0 3px var(--e100)} /* 상태 pill (시안 L109-112) */ .status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700; color:var(--e700);background:var(--e50);border:1px solid var(--e200);padding:5px 11px;border-radius:var(--r-pill)} .status-pill .tick{width:14px;height:14px;border-radius:50%;background:var(--e600);display:grid;place-items:center} .status-pill .tick svg{width:9px;height:9px;color:#fff} /* 카드 (시안 L154-158) */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden} .card-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap} .card-top h2{font-size:1rem;font-weight:800} .card-top .cnt{font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--e700);background:var(--e50);padding:2px 8px;border-radius:var(--r-pill)} .card-top .grow{flex:1} /* 상태 배지 (시안 L220-224) */ .badge-st{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap} .badge-st.ok{color:var(--ink-500);background:var(--surface-2);border:1px solid var(--line)} .badge-st.warn{color:var(--warn);background:var(--warn-bg);border:1px solid #fde68a} .badge-st .d{width:6px;height:6px;border-radius:50%} .badge-st.ok .d{background:var(--ink-400)} .badge-st.warn .d{background:var(--warn-400)} /* 표 (시안 L166-172) ※ .tbl-wrap 으로 SCOPE한다(WR-01): 전역 table{min-width:1000px}/sticky thead 가 dashboard 의 소형 인라인 테이블(studentHistoryTable 등, .tbl-wrap 미사용)에 누출되어 1000px 가로 오버플로를 유발하던 회귀를 차단. Phase 21 리디자인 표는 .tbl-wrap 으로 opt-in. */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .tbl-wrap table{width:100%;min-width:1000px;border-collapse:collapse;font-size:.86rem} .tbl-wrap thead th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-size:.7rem;font-weight:700; letter-spacing:.05em;color:var(--ink-400);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl-wrap tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl-wrap tbody tr{transition:background .12s} .tbl-wrap tbody tr:hover{background:var(--surface-2)} .tbl-wrap tbody tr:last-child td{border-bottom:none}