/* ============================================= OLLA Academy — Design System v1.0.0 - 신규 Brand/Ink/Paper 스케일 + 의미 토큰 - 레거시 토큰(--color-*, --B*, --G*, --OK/WN/ER)은 신규 토큰으로 alias - 폰트는 index.html 에서 Pretendard Variable + JetBrains Mono 로드 ============================================= */ :root { /* ═══ 1. 신규 디자인 토큰 ═══ */ /* ── Brand (Blue) ─────────────────────── */ --brand-50:#EFF6FF; --brand-100:#DBEAFE; --brand-400:#60A5FA; --brand-500:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8; /* ── Ink (Text / Borders) — Toss 영감 라이트 톤 ──────────────── */ --ink-50:#F2F4F6; --ink-100:#E5E8EB; --ink-200:#DBE0E5; --ink-300:#B0B8C1; --ink-400:#8B95A1; --ink-500:#6B7684; --ink-600:#4E5968; --ink-700:#333D4B; --ink-800:#252C36; --ink-900:#191F28; /* ── Paper (Surfaces) — Toss 깨끗한 화이트 ─────────────────── */ --paper-0:#FFFFFF; --paper-1:#F9FAFB; --paper-2:#F4F6F8; /* ── Semantic ──────────────────────────── */ --success-100:#DCFCE7; --success-600:#16A34A; --success-700:#15803D; --warning-100:#FEF3C7; --warning-500:#F59E0B; --warning-600:#D97706; --warning-700:#B45309; --danger-100:#FEE2E2; --danger-600:#DC2626; --danger-700:#B91C1C; --violet-100:#EDE9FE; --violet-500:#8B5CF6; --violet-600:#7C3AED; --violet-700:#6D28D9; /* 화면 곳곳에서 var(--danger-800) 처럼 쓰면서 정의가 없던 단계들 — 값이 없으면 그 색 지정이 통째로 무시돼 글자색·테두리가 엉뚱하게 나온다(버튼 인라인 색을 살리면서 드러남, 2026-09-11). */ --brand-200:#BFDBFE; --brand-300:#93C5FD; --brand-800:#1E40AF; --success-300:#86EFAC; --success-800:#166534; --warning-800:#92400E; --danger-50:#FEF2F2; --danger-300:#FCA5A5; --danger-500:#EF4444; --danger-800:#991B1B; /* ── Extended Accents (Phase 2) ──────────── */ --purple-400:#A855F7; --purple-500:#9333EA; --purple-100:#F3E8FF; --cyan-400:#0EA5E9; --cyan-500:#0891B2; --cyan-600:#0E7490; --cyan-100:#CFFAFE; --yellow-500:#EAB308; --yellow-600:#CA8A04; --yellow-100:#FEF9C3; /* ── Typography ────────────────────────── */ --font-main: 'Pretendard Variable','Pretendard','Noto Sans KR','Malgun Gothic',sans-serif !important; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Spacing (4px base) ────────────────── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; /* ── Radius ────────────────────────────── */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --r-full:9999px; /* ── Shadows ───────────────────────────── */ --sh-xs: 0 1px 2px rgba(15,23,42,.04); --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.04); --sh-md: 0 2px 4px rgba(15,23,42,.04), 0 8px 16px rgba(15,23,42,.06); --sh-lg: 0 4px 8px rgba(15,23,42,.06), 0 16px 32px rgba(15,23,42,.08); --sh-focus: 0 0 0 3px rgba(37,99,235,.14); /* ── Motion ────────────────────────────── */ --ease-out: cubic-bezier(.2,.8,.2,1); --dur-1:120ms; --dur-2:180ms; --dur-3:240ms; /* ── Layout & Heights ──────────────────── */ --h-btn-sm:28px; --h-btn-md:36px; --h-btn-lg:40px; --h-btn-xl:52px; --h-input:38px; --w-sidebar:240px; /* ═══ 1.5 하이브리드 디자인 시스템 (2026 v2) ═══════════════════ 라이트=Toss 영감, 다크=Linear 영감 (다크 토큰은 base.css :root.dark 참조) ────────────────────────────────────────────────────────── */ /* ── Type Scale (Linear/Toss 13단) ──────────────── */ --t-display-size: 32px; --t-display-line: 40px; --t-display-weight: 700; --t-display-track: -0.022em; --t-h1-size: 24px; --t-h1-line: 32px; --t-h1-weight: 700; --t-h1-track: -0.018em; --t-h2-size: 18px; --t-h2-line: 26px; --t-h2-weight: 700; --t-h2-track: -0.014em; --t-h3-size: 15px; --t-h3-line: 22px; --t-h3-weight: 600; --t-h3-track: -0.006em; --t-body-size: 13px; --t-body-line: 20px; --t-body-weight: 400; --t-body-lg-size: 14px; --t-body-lg-line: 22px; --t-body-lg-weight: 400; --t-label-size: 12px; --t-label-line: 16px; --t-label-weight: 500; --t-caption-size: 11px; --t-caption-line: 14px; --t-caption-weight: 400; --t-num-size: 22px; --t-num-weight: 800; --t-num-track: -0.01em; --t-num-lg-size: 28px; --t-num-lg-weight: 800; --t-num-lg-track: -0.014em; /* ── Interaction State Tokens ──────────────── */ --state-hover-bg: rgba(0, 0, 0, 0.04); --state-hover-bg-strong: rgba(0, 0, 0, 0.06); --state-active-bg: var(--brand-50); --state-press-scale: 0.98; --state-disabled-opacity: 0.5; /* ── Focus Rings (접근성 강화) ──────────────── */ --ring-default: 0 0 0 3px rgba(37, 99, 235, 0.18); --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.18); --ring-success: 0 0 0 3px rgba(22, 163, 74, 0.18); --ring-warning: 0 0 0 3px rgba(217, 119, 6, 0.18); /* ── Motion (Linear 표준 cubic-bezier) ────── */ --motion-quick: 120ms cubic-bezier(0.2, 0, 0, 1); --motion-base: 180ms cubic-bezier(0.2, 0, 0, 1); --motion-slow: 240ms cubic-bezier(0.2, 0, 0, 1); --ease-linear: cubic-bezier(0.2, 0, 0, 1); /* ═══ 2. 레거시 토큰 → 신규 alias ═══ */ /* ── 레거시 변수 재정의 (네이비 → 라이트 테마) ── */ --WH: var(--ink-900); /* ── 레거시 color-* alias (기존 클래스 호환) ── */ --color-primary: var(--brand-600); --color-primary-hover: var(--brand-700); --color-primary-light: var(--brand-50); --color-success: var(--success-600); --color-success-hover: var(--success-700); --color-danger: var(--danger-600); --color-danger-hover: var(--danger-700); --color-warning: var(--warning-600); --color-warning-hover: var(--warning-700); --color-sidebar-bg: var(--paper-1); --color-sidebar-border: var(--ink-100); --color-sidebar-hover: var(--ink-50); --color-sidebar-active-bg: var(--brand-50); --color-sidebar-active: var(--brand-600); --color-content-bg: var(--paper-1); --color-card-bg: var(--paper-0); --color-card-border: var(--ink-100); --color-header-bg: var(--paper-0); --color-header-border: var(--ink-100); --color-text-primary: var(--ink-900); --color-text-secondary: var(--ink-700); --color-text-muted: var(--ink-500); /* ── 레거시 치수 → 신규 스케일 ── */ --btn-height-sm: 28px; --btn-height-md: 36px; --btn-height-lg: 40px; --btn-font-sm: 12px; --btn-font-md: 13px; --btn-font-lg: 14px; --btn-padding-sm: 0 12px; --btn-padding-md: 0 16px; --btn-padding-lg: 0 20px; --radius-sm: var(--r-xs); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --sidebar-width: var(--w-sidebar); /* ═══ 3. Accent Semantic Pairs (뱃지·칩·달력·알림) ═══ */ /* 기본 토큰을 참조 → :root.dark에서 자동 반전 (일부는 base.css에서 추가 오버라이드) */ --accent-blue-bg: var(--brand-100); --accent-blue-fg: var(--brand-700); --accent-green-bg: var(--success-100); --accent-green-fg: var(--success-700); --accent-amber-bg: var(--warning-100); --accent-amber-fg: var(--warning-700); --accent-red-bg: var(--danger-100); --accent-red-fg: var(--danger-700); --accent-violet-bg: var(--violet-100); --accent-violet-fg: var(--violet-700); --accent-cyan-bg: var(--cyan-100); --accent-cyan-fg: var(--cyan-600); --accent-purple-bg: var(--purple-100); --accent-purple-fg: var(--purple-500); /* 알림/공지 박스 */ --notice-info-bg: var(--brand-50); --notice-info-border: var(--brand-100); --notice-info-fg: var(--brand-700); --notice-warn-bg: var(--warning-100); --notice-warn-border: #FDE68A; --notice-warn-fg: var(--warning-700); --notice-error-bg: #FEF2F2; --notice-error-border: #FECACA; --notice-error-fg: var(--danger-700); /* 시간표 라인 5종 */ --sched-time-fg: var(--brand-700); --sched-lunch-fg: var(--warning-700); --sched-ncs-fg: var(--success-700); --sched-inst-fg: var(--violet-700); --sched-room-fg: var(--warning-700); /* 공지사항 분류 8색 (의미 보존) */ --notice-new-fg: var(--success-600); --notice-end-fg: var(--danger-600); --notice-ncs-last-fg: var(--violet-600); --notice-jaerang-fg: var(--cyan-600); --notice-room-chg-fg: var(--warning-700); --notice-inst-chg-fg: var(--purple-500); --notice-conflict-fg: var(--danger-700); --notice-exam-fg: var(--warning-600); /* 요일 */ --dow-sun-fg: var(--danger-600); --dow-sat-fg: var(--brand-600); /* 특수 (의미 보존 — 다크에서도 어두움 유지) */ --modal-overlay: rgba(15,23,42,.40); --seat-board-bg: #0F172A; --header-brand-bg: var(--brand-700); --on-brand-fg: #FFFFFF; /* 파란 배경 th/헤더 위 흰 글씨 (다크에서도 유지) */ --on-dark-fg: #FFFFFF; /* 항상 어두운 배경 위 흰 글씨 */ } /* ── 전역 글꼴 ── */ html, body, input, select, textarea, button { font-family: var(--font-main) !important; } /* ═══════════════════════════════════════════════════ [수정 1] 버튼 공통 기반 + 색상 시스템 통일 ═══════════════════════════════════════════════════ */ .btn, button.btn, .fbtn, .nbtn, .abtn, .bp, .pbtn, .ptb-btn-ok, .ptb-btn-primary, .login-btn, .er-btn, .pdf-export-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: var(--h-btn-md) !important; padding: 0 var(--s-4) !important; font-size: 13px !important; font-weight: 500 !important; font-family: var(--font-main) !important; border-radius: var(--r-md) !important; cursor: pointer !important; white-space: nowrap !important; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out) !important; text-decoration: none !important; } .btn-sm { height: var(--h-btn-sm) !important; padding: 0 var(--s-3) !important; font-size: 12px !important; } .btn-lg { height: var(--h-btn-lg) !important; padding: 0 var(--s-5) !important; font-size: 14px !important; } /* ── 기존 버튼 클래스 — 기본(분류 없는) 색상 ── !important 는 예전 규칙(.ptb button 등 특이도가 더 높은 선택자)을 이기려고 붙였는데, 그 바람에 style="background:…" 로 직접 정한 색까지 전부 덮어썼다. 그래서 탭처럼 쓰는 토글 버튼(환경설정 문서·양식의 수료증 4종, 문자 템플릿 탭, 참조 카테고리 탭)이 선택 여부와 상관없이 모두 파란색으로 보였고, 빨강이어야 할 발송·반려 버튼도 파란색이었다(원장 신고, 2026-09-11). → '배경을 직접 정한 버튼'만 규칙에서 빼 준다. 글자색만 정한 버튼은 예전처럼 토큰 색 한 쌍을 쓴다 (배경은 파랑인데 글자만 회색으로 남아 안 보이게 되는 것을 막는다). 색상 변형(.bp.btn-success 등)은 이 규칙 '뒤'에 있어야 이긴다 — 특이도가 같으면 나중 규칙이 이긴다. */ .fbtn:not([style*="background"]), .bp:not([style*="background"]), .login-btn:not([style*="background"]) { background: var(--brand-600) !important; color: var(--on-brand-fg) !important; } .nbtn:not([style*="background"]), .abtn:not([style*="background"]) { background: var(--ink-100) !important; color: var(--ink-700) !important; } .bs:not([style*="background"]) { background: var(--paper-0) !important; color: var(--ink-700) !important; } /* 배경만 바꾸고 글자색은 안 준 버튼(예: 빨간 발송 버튼) — 글자는 흰색으로 */ .fbtn[style*="background"]:not([style*="color:"]), .bp[style*="background"]:not([style*="color:"]), .login-btn[style*="background"]:not([style*="color:"]) { color: var(--on-brand-fg) !important; } .fbtn:not([style*="border:"]), .bp:not([style*="border:"]), .login-btn:not([style*="border:"]) { border: none !important; } .nbtn:not([style*="border:"]), .abtn:not([style*="border:"]), .bs:not([style*="border:"]) { border: 1px solid var(--ink-300) !important; } /* ── 파랑 (조회·저장·확인·다운로드) ── */ .btn-primary, .fbtn.btn-primary, .bp.btn-primary, .ptb-btn-ok, .ptb-btn-primary, .login-btn { background: var(--brand-600) !important; color: var(--paper-0) !important; border: none !important; } .btn-primary:hover, .fbtn.btn-primary:hover, .bp.btn-primary:hover, .ptb-btn-ok:hover, .ptb-btn-primary:hover, .login-btn:hover { background: var(--brand-700) !important; } /* ── 초록 (발급·SMS·이메일·복사) ── */ .btn-success, .fbtn.btn-success, .bp.btn-success, .abtn.sms, .abtn.copy { background: var(--success-600) !important; color: var(--paper-0) !important; border: none !important; } .btn-success:hover, .fbtn.btn-success:hover, .bp.btn-success:hover, .abtn.sms:hover, .abtn.copy:hover { background: var(--success-700) !important; } /* ── 주황 (일괄퇴실·알림) ── */ .btn-warning, .fbtn.btn-warning, .bp.btn-warning { background: var(--warning-600) !important; color: var(--paper-0) !important; border: none !important; } .btn-warning:hover, .fbtn.btn-warning:hover, .bp.btn-warning:hover { background: var(--warning-700) !important; } /* ── 빨강 (삭제·위험) ── */ .btn-danger, .fbtn.btn-danger, .bp.btn-danger { background: var(--danger-600) !important; color: var(--paper-0) !important; border: none !important; } .btn-danger:hover, .fbtn.btn-danger:hover, .bp.btn-danger:hover { background: var(--danger-700) !important; } /* ── 흰색 (취소·닫기·초기화) ── */ .btn-secondary, .fbtn.btn-secondary, .bp.btn-secondary, .abtn.clr { background: var(--paper-0) !important; color: var(--ink-800) !important; border: 1px solid var(--ink-200) !important; } .btn-secondary:hover, .fbtn.btn-secondary:hover, .bp.btn-secondary:hover, .abtn.clr:hover { background: var(--paper-2) !important; border-color: var(--ink-300) !important; } /* ── ghost ── */ .btn-ghost { background: transparent; color: var(--ink-700); border: 1px solid transparent; } .btn-ghost:hover { background: var(--ink-50); border-color: var(--ink-100); } /* ── 버튼 focus 링 ── */ .btn:focus-visible, .fbtn:focus-visible, .nbtn:focus-visible, .abtn:focus-visible, .bp:focus-visible, .pbtn:focus-visible, .ptb-btn-ok:focus-visible, .ptb-btn-primary:focus-visible, .login-btn:focus-visible, .er-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); } /* ── 뱃지 (Design System v1.0.0) ── */ .badge { display: inline-flex; align-items: center; padding: 2px var(--s-2); border-radius: var(--r-full); font-size: 11px; font-weight: 700; line-height: 1.4; } .badge-blue { background: var(--brand-50); color: var(--brand-700); } .badge-green { background: var(--success-100); color: var(--success-700); } .badge-red { background: var(--danger-100); color: var(--danger-700); } .badge-amber { background: var(--warning-100); color: var(--warning-700); } .badge-gray { background: var(--ink-50); color: var(--ink-700); } /* ── 사이드바 (LNB) ── Design System: 240px ── */ .sidebar { width: var(--w-sidebar) !important; min-width: var(--w-sidebar) !important; max-width: var(--w-sidebar) !important; flex-shrink: 0 !important; flex-grow: 0 !important; overflow: hidden !important; box-sizing: border-box !important; position: relative !important; resize: none !important; background: var(--color-sidebar-bg) !important; border-right: 1px solid var(--color-sidebar-border) !important; } .nav-section-label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 12px 14px 4px; opacity: 1; } .nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--color-text-primary) !important; cursor: pointer; border-right: 2px solid transparent; transition: background 0.1s; opacity: 1; } .nav-item:hover { background: var(--color-sidebar-hover); color: var(--ink-900) !important; } .nav-item.active { background: var(--color-sidebar-active-bg) !important; color: var(--color-sidebar-active) !important; font-weight: 700; border-right: 2px solid var(--color-primary); text-shadow: 0 0 1px rgba(37,99,235,0.25); } .nav-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 1; } /* ── 환경설정 글꼴 선택 UI ── */ #font-setting-row { align-items: flex-start; } .font-option-wrap { flex: 1; } .font-options { display: flex; flex-direction: column; gap: 6px; } .font-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; } .font-opt input[type="radio"] { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .font-opt-inner { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border: 1px solid var(--color-card-border); border-radius: var(--radius-md); font-size: 13px; font-weight: 500; color: var(--color-text-primary); background: var(--paper-0); width: 100%; transition: border-color 0.15s, background 0.15s; } .font-opt input[type="radio"]:checked + .font-opt-inner { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); } .font-opt-inner em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--color-text-muted); } .font-opt input[type="radio"]:checked + .font-opt-inner em { color: var(--color-primary); opacity: 0.7; } .font-hint { margin-top: 8px; font-size: 11px; color: var(--color-text-muted); } /* ── LNB 섹션 펼침/접힘 (Linear 영감) ── */ .lnb-sec-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; font-size: 11px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; user-select: none; transition: color var(--motion-quick); } .lnb-sec-label:hover { color: var(--ink-700); } .sec-arrow { transition: transform 0.2s; opacity: 0.5; flex-shrink: 0; } .lnb-sec-items { display: none; flex-direction: column; } .lnb-sec.open .lnb-sec-items { display: flex; } .lnb-sec.open .sec-arrow { transform: rotate(180deg); } /* ── nav-icon SVG 강제 표시 ── */ .nav-item svg.nav-icon { display: inline-block !important; visibility: visible !important; width: 14px !important; height: 14px !important; flex-shrink: 0; opacity: 1; } /* ── 로그인 화면 ── */ #login-overlay { background: var(--paper-1) !important; display: flex; align-items: center; justify-content: center; } .login-card { background: var(--paper-0) !important; border: 1px solid var(--ink-100) !important; border-radius: var(--r-xl) !important; padding: 36px 40px !important; width: 380px !important; box-shadow: var(--sh-lg) !important; } .login-title { font-size: 20px !important; font-weight: 700 !important; color: var(--ink-900) !important; text-align: center !important; margin-bottom: 4px !important; letter-spacing: -0.02em !important; } .login-subtitle { font-size: 12px !important; color: var(--ink-500) !important; text-align: center !important; margin-bottom: 24px !important; } .login-card label { font-size: 12px !important; font-weight: 600 !important; color: var(--ink-700) !important; display: block !important; margin-bottom: 5px !important; } .login-card input[type="text"], .login-card input[type="password"] { width: 100% !important; height: var(--h-input) !important; padding: 0 var(--s-3) !important; font-size: 13px !important; font-family: var(--font-main) !important; border: 1px solid var(--ink-200) !important; border-radius: var(--r-md) !important; background: var(--paper-0) !important; color: var(--ink-900) !important; margin-bottom: 14px !important; outline: none !important; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out) !important; } .login-card input:hover { border-color: var(--ink-300) !important; } .login-card input:focus { border-color: var(--brand-600) !important; box-shadow: var(--sh-focus) !important; } .login-btn { width: 100% !important; height: var(--h-btn-lg) !important; background: var(--brand-600) !important; color: var(--paper-0) !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--font-main) !important; border: none !important; border-radius: var(--r-md) !important; cursor: pointer !important; margin-top: 6px !important; transition: background var(--dur-1) var(--ease-out) !important; } .login-btn:hover { background: var(--brand-700) !important; } .login-card .agree-box { background: var(--notice-warn-bg) !important; border: 1px solid var(--notice-warn-border) !important; border-radius: var(--r-md) !important; padding: 10px 12px !important; font-size: 11.5px !important; color: var(--notice-warn-fg) !important; margin-bottom: 14px !important; } .login-logo-wrap { text-align: center !important; margin-bottom: 16px !important; } /* 브랜드 마크 — LNB 머리(메인 앱·LMS·PASS 공용, 2026-09-12) */ .lnb-logo-img { width: 20px; height: 20px; border-radius: 5px; vertical-align: -5px; margin-right: 6px; } /* ── LNB 크기 고정 ── */ .sidebar { width: 250px !important; min-width: 250px !important; max-width: 250px !important; flex-shrink: 0 !important; flex-grow: 0 !important; overflow: hidden !important; box-sizing: border-box !important; position: relative !important; resize: none !important; user-select: none !important; } .sidebar-header, .lnb-head { padding: 10px 12px 8px !important; } .logo-text { font-size: 12px !important; font-weight: 700 !important; } .logo-sub { font-size: 9px !important; } .logo-icon { width: 22px !important; height: 22px !important; border-radius: 5px !important; } .logo-icon svg { width: 13px !important; height: 13px !important; } .lnb-sec-label, .nav-section-label { font-size: 10px !important; padding: 10px 14px 4px !important; letter-spacing: 0.5px !important; } .nav-item { font-size: 13px !important; padding: 6px 14px !important; gap: 8px !important; } .nav-icon { width: 14px !important; height: 14px !important; min-width: 14px !important; } #lnb-nav .nav-item svg { width: 14px !important; height: 14px !important; min-width: 14px !important; } .sec-arrow { width: 10px !important; height: 10px !important; } .sidebar-footer, .lnb-foot { padding: 8px 10px !important; } .btn-settings { font-size: 10.5px !important; padding: 5px 8px !important; } .btn-logout { font-size: 10.5px !important; padding: 5px 8px !important; } /* ── LNB 너비 완전 고정 (flex-grow 차단) ── */ #lnb { width: 250px !important; min-width: 250px !important; max-width: 250px !important; flex: 0 0 250px !important; flex-shrink: 0 !important; flex-grow: 0 !important; } /* ── LNB 사용자 영역 ── */ #lnb-user { font-size: 11px !important; color: var(--color-text-muted) !important; padding: 2px 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ── 전역 텍스트 가독성 강제 적용 ── */ /* 흰색/밝은 배경 위의 모든 텍스트 → 진한 색 강제 */ body, .main, .content, .panel, .card, .topbar, .topbar-title, table, th, td, input, select, textarea, label, span, p, div { color: var(--color-text-primary); } /* 콘텐츠 영역 배경 → 순수 흰색 */ .main, #main-content, .content-area, .section-content, [class*="section"] { background: var(--paper-0) !important; color: var(--ink-900) !important; } /* 테이블 헤더 */ th { background: var(--ink-100) !important; color: var(--ink-900) !important; font-weight: 600 !important; } /* 테이블 데이터 셀 */ td { color: var(--ink-900) !important; } /* 입력 필드 (텍스트 계열만) */ input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { color: var(--ink-900) !important; background: var(--paper-0) !important; } /* 체크박스·라디오: 네이티브 렌더링 유지 */ input[type=checkbox], input[type=radio] { appearance: auto !important; -webkit-appearance: auto !important; background: revert !important; background-color: revert !important; color: revert !important; } /* placeholder */ input::placeholder, textarea::placeholder { color: var(--ink-400) !important; } /* 패널/카드 제목 */ .panel-title, .card-title, .section-title, .page-title, [class*="title"], [class*="header"] { color: var(--ink-900) !important; } /* 라벨 */ label { color: var(--ink-800) !important; } /* 비활성/보조 텍스트 */ .muted, .sub, .desc, [class*="muted"], [class*="hint"], [class*="sub-"] { color: var(--ink-600) !important; } /* ── [수정 3] 특정 화면 텍스트 가독성 보장 ── */ /* 오늘의 출결현황 */ #center table td, #center table th, #center .panel-title, #center label, #center span:not([class*="badge"]):not([class*="btn"]) { color: var(--ink-900); } /* 경쟁사 현황 */ #competitor-panel table td, #competitor-panel table th, #competitor-panel label, #competitor-panel span:not([class*="badge"]):not([class*="btn"]) { color: var(--ink-900); } /* 강사료 계산 */ #instructor-fee-panel table td, #instructor-fee-panel table th, #instructor-fee-panel label, #instructor-fee-panel input, #instructor-fee-panel span:not([class*="badge"]):not([class*="btn"]) { color: var(--ink-900); } /* 서류 발급 */ #certificate-panel label, #certificate-panel input, #certificate-panel span:not([class*="badge"]):not([class*="btn"]), #completion-cert-panel label, #completion-cert-panel input, #completion-cert-panel span:not([class*="badge"]):not([class*="btn"]) { color: var(--ink-900); } /* 환경설정 모달 */ #settMo label, #settMo input, #settMo select, #settMo span:not([class*="badge"]):not([class*="btn"]) { color: var(--ink-800); } /* ═══════════════════════════════════════════════════════ [수정 4] 오리엔테이션 자료 — 텍스트 가독성 ═══════════════════════════════════════════════════════ */ #orientation-panel label, #orientation-panel span, #orientation-panel p, #orientation-panel div:not([style*="background"]) { color: var(--ink-900); } .ort-info-lbl { color: var(--ink-600) !important; } .ort-info-val { color: var(--ink-900) !important; } .ort-day-table td { color: var(--ink-900) !important; } .ort-day-table th { color: var(--ink-900) !important; } /* ═══════════════════════════════════════════════════════ [수정 5] 시간표(달력) — 폰트 확대 + 훈련시간 색상 ═══════════════════════════════════════════════════════ */ .sched-cal-grid { font-size: 14px !important; } .sched-day-num { font-size: 16px !important; font-weight: 700 !important; color: var(--ink-900) !important; } .sched-day-num.sun { color: var(--dow-sun-fg) !important; } .sched-day-num.sat { color: var(--dow-sat-fg) !important; } .sched-time-line { font-size: 13px !important; color: var(--sched-time-fg) !important; } .sched-lunch-line { font-size: 12px !important; color: var(--sched-lunch-fg) !important; } .sched-ncs-line { font-size: 11px !important; color: var(--sched-ncs-fg) !important; } .sched-inst-line { font-size: 11px !important; color: var(--sched-inst-fg) !important; } .sched-room-line { font-size: 11px !important; color: var(--sched-room-fg) !important; } .sched-cal-grid td { color: var(--ink-900) !important; } .sched-month-title { color: var(--ink-900) !important; } /* ── 훈련일정 안내 강사 체크박스 ── */ #is-day-list input[type=checkbox].is-send-chk { appearance: checkbox !important; -webkit-appearance: checkbox !important; width: 14px !important; height: 14px !important; background: revert !important; background-color: revert !important; accent-color: var(--brand-600) !important; cursor: pointer !important; flex-shrink: 0 !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* ═══════════════════════════════════════════════════════ [수정 6] 교과편성 및 평가일정 — 텍스트 검은색 ═══════════════════════════════════════════════════════ */ .sched-ncs-table td { color: var(--ink-900) !important; } .sched-ncs-table th { color: var(--on-brand-fg) !important; } .sched-ncs-meta { color: var(--ink-900) !important; } .sched-ncs-meta strong { color: var(--ink-900) !important; } #ncs-panel table td { color: var(--ink-900) !important; } #ncs-panel table th { color: var(--on-brand-fg) !important; } #ncs-panel label, #ncs-panel span { color: var(--ink-900); } /* ═══════════════════════════════════════════════════════ [수정 7] 재량교과 달력 날짜 색상 ═══════════════════════════════════════════════════════ */ .jr-day-num { color: var(--ink-900) !important; } .jr-day-num.sun { color: var(--dow-sun-fg) !important; } .jr-day-num.sat { color: var(--dow-sat-fg) !important; } .jr-cal td { color: var(--ink-900) !important; } .jr-cal th { color: var(--on-brand-fg) !important; } .jr-year-label { color: var(--ink-900) !important; } .jr-popup-title { color: var(--ink-900) !important; } /* ═══════════════════════════════════════════════════════ 수료증 발급 양식 선택 탭 버튼 ═══════════════════════════════════════════════════════ */ .cc-type-btn { background: var(--paper-0) !important; color: var(--ink-700) !important; border: 1px solid var(--ink-300) !important; height: 32px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 6px !important; cursor: pointer !important; transition: all 0.15s !important; display: inline-flex !important; align-items: center !important; } .cc-type-btn.cc-tab-on { background: var(--brand-600) !important; color: var(--paper-0) !important; border-color: var(--brand-600) !important; } .cc-type-btn:hover:not(.cc-tab-on) { background: var(--ink-100) !important; border-color: var(--ink-400) !important; } /* ═══════════════════════════════════════════════════════ [수정 1] 과정 조회 버튼 — 명시적 색상 보장 ═══════════════════════════════════════════════════════ */ .fbtn.btn-primary, button.btn-primary.fbtn { color: var(--on-brand-fg) !important; background: var(--color-primary) !important; } /* ── 오리엔테이션 섹션 제목 (파란 배경 위 흰 글씨) ── */ .ort-sec-title, .ort-sec-title *, #orientation-panel .ort-sec-title { color: var(--on-brand-fg) !important; } /* ── 오리엔테이션 출석인정 해당 뱃지 ── */ /* 진한 파란 헤더 위에서 뱃지가 구분되도록 흰 배경 + 파란 글씨 */ .ort-sec-title .ort-badge, .ort-sec-title .ort-badge-green, .ort-sec-title .ort-badge-red, .ort-sec-title .ort-badge-blue, .ort-sec-title .ort-badge-amber { background: var(--on-brand-fg) !important; color: var(--brand-700) !important; border: 1px solid var(--on-brand-fg) !important; border-radius: 4px !important; padding: 2px 8px !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════ [수정 6] 경쟁사 현황 대시보드 기관명 가독성 ═══════════════════════════════════════════════════ */ #cmp-dashboard td, #cmp-dashboard td * { color: var(--ink-900) !important; } #cmp-dashboard td a, #cmp-dashboard td span[style*="underline"] { color: var(--brand-700) !important; } /* ═══════════════════════════════════════════════════ [수정 9] 강사료 계산 테이블 테두리 통일 ═══════════════════════════════════════════════════ */ #instructor-fee-panel table { border-collapse: collapse !important; } #instructor-fee-panel table th { border: 1px solid var(--brand-600) !important; background: var(--brand-50) !important; color: var(--brand-700) !important; font-weight: 600 !important; } #instructor-fee-panel table td { border: 1px solid var(--ink-200) !important; color: var(--ink-900) !important; } /* ═══════════════════════════════════════════════════ [수정 11] 비활성 버튼 disabled 스타일 ═══════════════════════════════════════════════════ */ button:disabled, button[disabled] { opacity: 0.4 !important; cursor: not-allowed !important; pointer-events: none !important; } /* ═══════════════════════════════════════════════════ [수정 10] 인쇄/엑셀 버튼 툴팁 ═══════════════════════════════════════════════════ */ [title] { position: relative; } [title]:hover::after { content: attr(title); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background: var(--ink-900); color: var(--paper-0); font-size: 11px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; z-index: 9999; pointer-events: none; } /* ═══════════════════════════════════════════════════ 전체 강의장 현황 — 과정 팝업 가독성 ═══════════════════════════════════════════════════ */ #course-modal-overlay #course-modal { background: var(--paper-0) !important; color: var(--ink-900) !important; } /* ═══════════════════════════════════════════════════ 출결 메모 — 카드·뱃지·폼 스타일 ═══════════════════════════════════════════════════ */ /* 메모 카드 */ .memo-card { background: var(--paper-0); border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: var(--s-3) var(--s-3); margin-bottom: var(--s-2); transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .memo-card:hover { background: var(--brand-50); box-shadow: var(--sh-xs); } .memo-card-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .memo-card-meta { font-size: 11px; color: var(--ink-500); margin-left: auto; font-family: var(--font-mono); } .memo-card-body { font-size: 12.5px; color: var(--ink-900); line-height: 1.5; } .memo-card-extra { font-size: 11.5px; color: var(--ink-500); margin-top: 4px; } .memo-card-footer { display: flex; justify-content: flex-end; margin-top: 8px; } /* 요청 유형 뱃지 */ .memo-badge { display: inline-flex; align-items: center; padding: 2px var(--s-2); border-radius: var(--r-full); font-size: 11px; font-weight: 700; } .memo-badge-general { background: var(--ink-50); color: var(--ink-700); } .memo-badge-late { background: var(--warning-100); color: var(--warning-700); } .memo-badge-absent { background: var(--danger-100); color: var(--danger-700); } .memo-badge-request { background: var(--brand-50); color: var(--brand-700); } .memo-badge-approved { background: var(--success-100); color: var(--success-700); font-weight: 700; } /* 메모 작성 폼 */ .memo-form { background: var(--paper-1); border: 1px solid var(--ink-200); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; } .memo-form label { display: block; font-size: 13px !important; font-weight: 700 !important; color: var(--ink-800) !important; margin-bottom: 4px; } .memo-form textarea { width: 100%; border: 1px solid var(--ink-300) !important; border-radius: 6px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; resize: vertical; box-sizing: border-box; background: var(--paper-0) !important; color: var(--ink-900) !important; transition: border-color 0.15s; } .memo-form textarea:focus { outline: none; border-color: var(--brand-600) !important; box-shadow: var(--sh-focus); } .memo-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .memo-radio-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .memo-radio-opt { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12.5px; color: var(--ink-800); } .memo-radio-opt input[type="radio"] { width: 14px; height: 14px; accent-color: var(--brand-600); cursor: pointer; } .memo-form-save-row { display: flex; justify-content: flex-end; margin-top: 10px; } /* 메모 아이콘 (학생 목록) */ .memo-icon { font-size: 13px; cursor: pointer; margin-left: 3px; opacity: 0.85; } .memo-icon:hover { opacity: 1; } /* 출결 메모 현황 모달 테이블 */ .memo-status-table { width: 100%; border-collapse: collapse; font-size: 12px; } .memo-status-table th { background: var(--ink-100) !important; color: var(--ink-900) !important; padding: 7px 10px; font-weight: 600; border-bottom: 2px solid var(--ink-200); text-align: left; white-space: nowrap; } .memo-status-table td { padding: 6px 10px; border-bottom: 1px solid var(--ink-100); color: var(--ink-900) !important; vertical-align: middle; } .memo-status-table tr:hover td { background: var(--paper-1); } /* 팝업 바깥에 적용된 .mo .mbox 전역 규칙 보조 */ .mo .mbox { background: var(--paper-0) !important; color: var(--ink-900) !important; } .mo .mbox .mh { background: var(--header-brand-bg) !important; } .mo .mbox .mh * { color: var(--on-brand-fg) !important; } .mo .mbox table th { background: var(--brand-50) !important; color: var(--brand-700) !important; border: 1px solid var(--brand-100) !important; font-weight: 600 !important; } .mo .mbox table td { color: var(--ink-900) !important; border: 1px solid var(--ink-200) !important; }