@charset "UTF-8"; /* ============================================================================ KSA Design System v1.0 — 고려해상화재손해사정(주) 업무포털 공용 스타일 ---------------------------------------------------------------------------- 이 파일에는 "토큰"과 "프리미티브"만 들어갑니다. 화면 고유 스타일은 각 페이지에서 작성하되, 색·크기·간격 값은 절대 직접 쓰지 말고 반드시 여기 정의된 var(--ksa-*)를 참조하십시오. 적용: 다크: (기존 포털 방식과 동일) ============================================================================ */ /* ========================================================================== 1. 원시 색 (primitive) — 화면에서 직접 쓰지 말 것. 2번 시맨틱을 쓸 것. ========================================================================== */ :root { --ksa-navy-900: #081A2E; --ksa-navy-800: #0E2745; --ksa-navy-700: #163A63; /* 회사 기본색 */ --ksa-navy-600: #1E4A7C; --ksa-navy-500: #2C5A96; --ksa-navy-100: #E4EDF7; --ksa-navy-50: #F2F6FB; --ksa-gold-700: #7E6110; /* 텍스트용 — 흰 배경 5.8:1, 골드틴트 위 5.1:1 */ --ksa-gold-600: #B08A1E; --ksa-gold-500: #C9A227; /* 면 채우기 · 강조 바 전용 */ --ksa-gold-100: #F7EFD6; --ksa-gray-950: #0B1220; --ksa-gray-900: #0F172A; --ksa-gray-800: #1E293B; --ksa-gray-700: #334155; --ksa-gray-600: #475569; --ksa-gray-500: #64748B; --ksa-gray-400: #94A3B8; --ksa-gray-300: #CBD5E1; --ksa-gray-200: #E2E8F0; --ksa-gray-100: #EEF2F7; --ksa-gray-50: #F5F7FA; --ksa-green-700: #047857; --ksa-green-100: #DCFCE7; --ksa-amber-700: #B45309; --ksa-amber-100: #FEF3C7; --ksa-red-700: #B91C1C; --ksa-red-600: #DC2626; --ksa-red-100: #FEE2E2; } /* ========================================================================== 2. 시맨틱 색 — 화면에서는 이것만 사용 원칙: 중립색 90% + 브랜드색 1개 + 의미색 3개(성공/주의/위험) ========================================================================== */ :root { --ksa-canvas: var(--ksa-gray-50); --ksa-surface: #FFFFFF; --ksa-surface-2: var(--ksa-gray-50); /* 표 헤더 · 인셋 영역 */ --ksa-surface-3: var(--ksa-gray-100); --ksa-line: var(--ksa-gray-200); --ksa-line-strong: var(--ksa-gray-300); --ksa-ink: var(--ksa-gray-900); /* 본문 */ --ksa-ink-2: var(--ksa-gray-600); /* 보조 설명 */ --ksa-ink-3: var(--ksa-gray-500); /* 캡션 (대비 4.8:1) */ --ksa-ink-disabled: var(--ksa-gray-400); /* 비활성 · 장식용에 한함 */ --ksa-brand: var(--ksa-navy-700); --ksa-brand-hover: var(--ksa-navy-800); --ksa-brand-soft: var(--ksa-navy-500); --ksa-brand-tint: var(--ksa-navy-100); --ksa-brand-wash: var(--ksa-navy-50); --ksa-on-brand: #FFFFFF; --ksa-accent: var(--ksa-gold-500); /* 바 · 배지 배경 */ --ksa-accent-ink: var(--ksa-gold-700); /* 골드 계열 텍스트 */ --ksa-accent-tint: var(--ksa-gold-100); --ksa-ok: var(--ksa-green-700); --ksa-ok-tint: var(--ksa-green-100); --ksa-warn: var(--ksa-amber-700); --ksa-warn-tint: var(--ksa-amber-100); --ksa-danger: var(--ksa-red-700); --ksa-danger-tint: var(--ksa-red-100); --ksa-focus: #2563EB; --ksa-overlay: rgba(11, 18, 32, 0.45); } body.dark-mode { --ksa-canvas: var(--ksa-gray-950); --ksa-surface: var(--ksa-gray-800); --ksa-surface-2: #17233A; --ksa-surface-3: var(--ksa-gray-700); --ksa-line: var(--ksa-gray-700); --ksa-line-strong: #44546B; --ksa-ink: #F1F5F9; --ksa-ink-2: #B6C2D2; --ksa-ink-3: #93A1B3; --ksa-ink-disabled: #6B7A8D; --ksa-brand: #7FB2F0; --ksa-brand-hover: #A3C8F6; --ksa-brand-soft: #5B93D6; --ksa-brand-tint: rgba(127, 178, 240, 0.16); --ksa-brand-wash: rgba(127, 178, 240, 0.08); --ksa-on-brand: var(--ksa-gray-950); --ksa-accent: #E0B33C; --ksa-accent-ink: #E8C566; --ksa-accent-tint: rgba(224, 179, 60, 0.16); --ksa-ok: #4ADE80; --ksa-ok-tint: rgba(74, 222, 128, 0.16); --ksa-warn: #FBBF24; --ksa-warn-tint: rgba(251, 191, 36, 0.16); --ksa-danger: #F87171; --ksa-danger-tint: rgba(248, 113, 113, 0.16); --ksa-focus: #7FB2F0; --ksa-overlay: rgba(0, 0, 0, 0.6); } /* ========================================================================== 3. 지점 색 — 차트 · 배지 전용. 일반 UI에는 절대 사용하지 말 것. (perf3 dashboard.css의 --br-* 도 추후 이 값을 참조하도록 통일) ========================================================================== */ :root { --ksa-br-서울: #2563EB; --ksa-br-인천: #3B82F6; --ksa-br-대전: #059669; --ksa-br-대구: #D97706; --ksa-br-광주: #DC2626; --ksa-br-부산: #7C3AED; --ksa-br-원주: #0D9488; --ksa-br-기타: #4B5563; } /* ========================================================================== 4. 타이포 · 간격 · 형태 글자 크기는 아래 7단계 밖으로 나가지 말 것. 11 눈썹라벨 / 12 캡션 / 13 조밀본문 / 14 본문 / 16 카드제목 / 20 섹션제목 / 28 지표 ========================================================================== */ :root { --ksa-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --ksa-font-num: 'Pretendard', ui-monospace, SFMono-Regular, Menlo, monospace; --ksa-fs-11: 11px; --ksa-fs-12: 12px; --ksa-fs-13: 13px; --ksa-fs-14: 14px; --ksa-fs-16: 16px; --ksa-fs-20: 20px; --ksa-fs-28: 28px; --ksa-lh-tight: 1.25; --ksa-lh: 1.55; --ksa-ls-tight: -0.02em; --ksa-ls-eyebrow: 0.08em; --ksa-s1: 4px; --ksa-s2: 8px; --ksa-s3: 12px; --ksa-s4: 16px; --ksa-s5: 20px; --ksa-s6: 24px; --ksa-s7: 32px; --ksa-s8: 48px; --ksa-r-sm: 4px; --ksa-r: 6px; --ksa-r-lg: 10px; --ksa-r-pill: 999px; --ksa-sh-1: 0 1px 2px rgba(15, 23, 42, 0.05); --ksa-sh-2: 0 2px 8px rgba(15, 23, 42, 0.07); --ksa-sh-pop: 0 10px 28px rgba(11, 32, 56, 0.16); --ksa-t-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --ksa-t: 180ms cubic-bezier(0.2, 0, 0.2, 1); --ksa-max: 1280px; --ksa-header-h: 56px; } body.dark-mode { --ksa-sh-1: 0 1px 2px rgba(0, 0, 0, 0.35); --ksa-sh-2: 0 2px 8px rgba(0, 0, 0, 0.4); --ksa-sh-pop: 0 10px 28px rgba(0, 0, 0, 0.55); } /* ========================================================================== 5. 기본값 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ksa-font); font-size: var(--ksa-fs-14); line-height: var(--ksa-lh); color: var(--ksa-ink); background: var(--ksa-canvas); -webkit-font-smoothing: antialiased; transition: background-color var(--ksa-t), color var(--ksa-t); } h1, h2, h3, h4 { margin: 0; line-height: var(--ksa-lh-tight); letter-spacing: var(--ksa-ls-tight); } p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } img { max-width: 100%; display: block; } /* 숫자는 업무 시스템의 본문입니다. 자릿수가 흔들리면 표가 읽히지 않습니다. */ .ksa-num, table, input[type="number"], .ksa-table td, .ksa-table th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 한글은 어절 단위로 끊어야 읽힙니다. */ .ksa-kr { word-break: keep-all; overflow-wrap: anywhere; } /* ========================================================================== 6. 레이아웃 ========================================================================== */ .ksa-container { max-width: var(--ksa-max); margin: 0 auto; padding: var(--ksa-s7) var(--ksa-s6) var(--ksa-s8); } .ksa-section { margin-bottom: var(--ksa-s7); } .ksa-grid { display: grid; gap: var(--ksa-s4); } /* 섹션 머리 — 눈썹라벨 + 제목 + 우측 액션 */ .ksa-eyebrow { display: block; font-size: var(--ksa-fs-11); font-weight: 700; letter-spacing: var(--ksa-ls-eyebrow); color: var(--ksa-ink-3); margin-bottom: var(--ksa-s1); } .ksa-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ksa-s4); flex-wrap: wrap; margin-bottom: var(--ksa-s4); } .ksa-section-title { font-size: var(--ksa-fs-20); font-weight: 700; color: var(--ksa-ink); } .ksa-section-desc { font-size: var(--ksa-fs-12); color: var(--ksa-ink-3); margin-top: 2px; } /* 괘선 — 이 시스템의 시그니처. 좌측 금색 구간이 "현재 유효 구간"을 뜻합니다. */ .ksa-rule { position: relative; height: 1px; background: var(--ksa-line-strong); } .ksa-rule::before { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--ksa-accent); } .ksa-rule--plain::before { display: none; } /* ========================================================================== 7. 표면 (카드 · 패널) ========================================================================== */ .ksa-card { background: var(--ksa-surface); border: 1px solid var(--ksa-line); border-radius: var(--ksa-r-lg); box-shadow: var(--ksa-sh-1); } .ksa-panel { composes: ksa-card; } .ksa-panel { background: var(--ksa-surface); border: 1px solid var(--ksa-line); border-radius: var(--ksa-r-lg); box-shadow: var(--ksa-sh-1); } .ksa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ksa-s3); padding: var(--ksa-s4) var(--ksa-s5); border-bottom: 1px solid var(--ksa-line); } .ksa-panel-title { display: flex; align-items: center; gap: var(--ksa-s2); font-size: var(--ksa-fs-16); font-weight: 700; color: var(--ksa-ink); } .ksa-panel-title svg { width: 17px; height: 17px; color: var(--ksa-ink-3); } .ksa-panel-body { padding: var(--ksa-s4) var(--ksa-s5) var(--ksa-s5); } .ksa-panel-body--flush { padding: 0 var(--ksa-s5); } /* ========================================================================== 8. 버튼 ========================================================================== */ .ksa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-size: var(--ksa-fs-13); font-weight: 600; letter-spacing: -0.01em; border: 1px solid var(--ksa-line-strong); border-radius: var(--ksa-r); background: var(--ksa-surface); color: var(--ksa-ink); cursor: pointer; white-space: nowrap; transition: background var(--ksa-t-fast), border-color var(--ksa-t-fast), color var(--ksa-t-fast); } .ksa-btn:hover { background: var(--ksa-surface-2); border-color: var(--ksa-brand); color: var(--ksa-brand); } .ksa-btn svg { width: 14px; height: 14px; } .ksa-btn[disabled], .ksa-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .ksa-btn--primary { background: var(--ksa-brand); border-color: var(--ksa-brand); color: var(--ksa-on-brand); } .ksa-btn--primary:hover { background: var(--ksa-brand-hover); border-color: var(--ksa-brand-hover); color: var(--ksa-on-brand); } .ksa-btn--onDark { background: #FFFFFF; border-color: #FFFFFF; color: var(--ksa-navy-700); } .ksa-btn--onDark:hover { background: var(--ksa-gray-100); border-color: var(--ksa-gray-100); color: var(--ksa-navy-800); } .ksa-btn--quiet { background: transparent; border-color: transparent; color: var(--ksa-ink-2); } .ksa-btn--quiet:hover { background: var(--ksa-brand-tint); border-color: transparent; color: var(--ksa-brand); } .ksa-btn--danger { border-color: var(--ksa-danger); color: var(--ksa-danger); background: var(--ksa-surface); } .ksa-btn--danger:hover { background: var(--ksa-danger-tint); border-color: var(--ksa-danger); color: var(--ksa-danger); } .ksa-btn--sm { padding: 5px 10px; font-size: var(--ksa-fs-12); } .ksa-btn--icon { padding: 0; width: 32px; height: 32px; border-color: transparent; background: transparent; color: var(--ksa-ink-3); } .ksa-btn--icon:hover { background: var(--ksa-brand-tint); border-color: transparent; color: var(--ksa-brand); } .ksa-btn--icon svg { width: 17px; height: 17px; } /* ========================================================================== 9. 칩 · 배지 ========================================================================== */ .ksa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--ksa-fs-12); font-weight: 600; border: 1px solid var(--ksa-line); border-radius: var(--ksa-r-pill); background: var(--ksa-surface); color: var(--ksa-ink-2); cursor: pointer; transition: all var(--ksa-t-fast); } .ksa-chip:hover { border-color: var(--ksa-brand); color: var(--ksa-brand); } .ksa-chip.is-active { background: var(--ksa-brand); border-color: var(--ksa-brand); color: var(--ksa-on-brand); } .ksa-chip svg { width: 13px; height: 13px; } .ksa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: var(--ksa-fs-11); font-weight: 700; line-height: 1.6; border-radius: var(--ksa-r-sm); background: var(--ksa-surface-3); color: var(--ksa-ink-2); white-space: nowrap; } .ksa-badge--brand { background: var(--ksa-brand-tint); color: var(--ksa-brand); } .ksa-badge--accent { background: var(--ksa-accent-tint); color: var(--ksa-accent-ink); } .ksa-badge--ok { background: var(--ksa-ok-tint); color: var(--ksa-ok); } .ksa-badge--warn { background: var(--ksa-warn-tint); color: var(--ksa-warn); } .ksa-badge--danger { background: var(--ksa-danger-tint); color: var(--ksa-danger); } .ksa-badge--solid { background: var(--ksa-danger); color: #fff; } /* 지점 배지 — 색은 데이터 식별용이므로 글자에도 지점색을 씁니다. */ .ksa-branch { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ksa-fs-12); font-weight: 600; } .ksa-branch::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--bch, var(--ksa-ink-3)); } /* ========================================================================== 10. 입력 ========================================================================== */ .ksa-field { width: 100%; padding: 8px 12px; font: inherit; font-size: var(--ksa-fs-13); color: var(--ksa-ink); background: var(--ksa-surface); border: 1px solid var(--ksa-line-strong); border-radius: var(--ksa-r); transition: border-color var(--ksa-t-fast), box-shadow var(--ksa-t-fast); } .ksa-field::placeholder { color: var(--ksa-ink-disabled); } .ksa-field:focus { outline: none; border-color: var(--ksa-brand); box-shadow: 0 0 0 3px var(--ksa-brand-tint); } .ksa-label { display: block; font-size: var(--ksa-fs-12); font-weight: 600; color: var(--ksa-ink-2); margin-bottom: var(--ksa-s1); } /* ========================================================================== 11. 표 ========================================================================== */ .ksa-table { width: 100%; border-collapse: collapse; font-size: var(--ksa-fs-13); } .ksa-table th { text-align: left; font-weight: 700; font-size: var(--ksa-fs-12); color: var(--ksa-ink-2); background: var(--ksa-surface-2); padding: 9px var(--ksa-s3); border-bottom: 1px solid var(--ksa-line-strong); white-space: nowrap; } .ksa-table td { padding: 9px var(--ksa-s3); border-bottom: 1px solid var(--ksa-line); color: var(--ksa-ink); } .ksa-table tbody tr:last-child td { border-bottom: none; } .ksa-table tbody tr:hover td { background: var(--ksa-brand-wash); } .ksa-table .ta-r { text-align: right; } .ksa-table .ta-c { text-align: center; } /* ========================================================================== 12. 상태 4종 — 로딩 / 비어있음 / 오류 / 권한없음 모든 서브시스템에서 같은 모양이어야 사용자가 학습합니다. ========================================================================== */ .ksa-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ksa-s2); text-align: center; padding: var(--ksa-s7) var(--ksa-s5); color: var(--ksa-ink-3); } .ksa-state svg { width: 22px; height: 22px; } .ksa-state-title { font-size: var(--ksa-fs-13); font-weight: 700; color: var(--ksa-ink-2); } .ksa-state-desc { font-size: var(--ksa-fs-12); color: var(--ksa-ink-3); max-width: 34ch; } .ksa-state--error { color: var(--ksa-danger); } .ksa-state--error .ksa-state-title { color: var(--ksa-danger); } .ksa-state--denied { color: var(--ksa-warn); } .ksa-state--denied .ksa-state-title { color: var(--ksa-warn); } .ksa-state--compact { padding: var(--ksa-s4) var(--ksa-s3); } @keyframes ksa-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ksa-skel { display: block; border-radius: var(--ksa-r-sm); background: linear-gradient(90deg, var(--ksa-surface-3) 25%, var(--ksa-surface-2) 50%, var(--ksa-surface-3) 75%); background-size: 200% 100%; animation: ksa-shimmer 1.4s infinite linear; } .ksa-skel--line { height: 14px; margin: 6px 0; } .ksa-skel--num { height: 28px; width: 72px; } /* ========================================================================== 13. 접근성 — 감사·실사에서 실제로 지적되는 항목입니다. ========================================================================== */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ksa-focus); outline-offset: 2px; border-radius: var(--ksa-r-sm); } .ksa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ksa-skip { position: absolute; left: var(--ksa-s4); top: -60px; z-index: 200; padding: 10px 16px; background: var(--ksa-brand); color: var(--ksa-on-brand); border-radius: var(--ksa-r); font-size: var(--ksa-fs-13); font-weight: 600; transition: top var(--ksa-t); } .ksa-skip:focus { top: var(--ksa-s2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 14. 인쇄 ========================================================================== */ @media print { :root { --ksa-canvas: #fff; --ksa-surface: #fff; } body { background: #fff; color: #000; } .ksa-no-print { display: none !important; } .ksa-card, .ksa-panel { box-shadow: none; border-color: #999; break-inside: avoid; } * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } } /* ========================================================================== 15. 구 스타일 호환 별칭 perf3 / users.php / hr 등 기존 페이지가 이 파일을 include 하는 것만으로 색이 통일되도록 하는 임시 다리입니다. 각 페이지를 --ksa-* 로 옮기고 나면 이 블록은 삭제하십시오. ========================================================================== */ :root { --primary: var(--ksa-brand); --primary-hover: var(--ksa-brand-tint); --bg: var(--ksa-canvas); --card: var(--ksa-surface); --border: var(--ksa-line); --gold: var(--ksa-accent); --text-main: var(--ksa-ink); --text-muted: var(--ksa-ink-3); --radius: var(--ksa-r-lg); }