/* ============================================================ * SW Manager — 디자인 시스템 (중앙 토큰 + 공용 컴포넌트) * SoT: docs/DESIGN.md (Deep Teal). 페이지별 인라인 색/레거시 팔레트(SB-Admin·Material) 통일용. * 적용: 에 1줄 link → 토큰(var) 전역 제공. 컴포넌트는 클래스 opt-in(점진 마이그레이션). * 레거시색 매핑은 docs/design-docs/color-token-map.md 참조. * ============================================================ */ :root { /* ── 색 (DESIGN.md Source of Truth) ── */ --primary: #0F766E; /* 브랜드 액센트 / Primary CTA */ --primary2: #115E59; /* hover / 강조 텍스트 */ --primary-lt: #F0FDFA; /* hover 배경 / selected */ --bg: #FAFAF9; /* body 배경 (웜 오프화이트) */ --surface: #FFFFFF; /* 카드/패널 */ --surface-2: #F5F5F4; /* hover 배경 */ --border: #E7E5E4; /* 일반 테두리 */ --border2: #D6D3D1; /* 강조 테두리 */ --text: #1C1917; /* 본문 */ --text2: #57534E; /* 보조 */ --muted: #A8A29E; /* 힌트/라벨 */ --success: #059669; /* 완료 */ --warning: #D97706; /* 진행/주의 */ /* inspect-infra-diff-alert 알림 토큰 (NFR-2) — amber 계열, WCAG AA(amber-100+700=5.0:1) */ --alert-bg: #FEF3C7; /* amber-100 배경 */ --alert-fg: #B45309; /* amber-700 글씨 (= --scope-std) */ --alert-border: #FCD34D; /* amber-300 테두리 */ --alert-icon: #D97706; /* amber-600 인라인 ⚠ (= --warning) */ --danger: #DC2626; /* 삭제/에러 */ --info: #0891B2; /* 정보 */ /* ── 유지보수 스코프 (InspectMaintProfile.badgeTone) — WCAG AA 통과 ── */ --scope-gis: #0F766E; /* teal-700 — GIS만 (= --primary 와 동일 톤) */ --scope-std: #B45309; /* amber-700 — GIS+표준 (--warning #D97706 보다 한 톤 진함) */ --scope-all: #1E3A5F; /* navy — 전체 (HS·DHS·미지정) */ /* ── 사업 단계 칸반 (process-status .step-N) — teal 단일 hue 명도 progression ── SoT: WorkPlanController.stepLabels (1=대상선정 … 7=대금신청). 진행 = 색 진해짐. */ --step-1: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%); /* teal-50 → teal-100 */ --step-2: linear-gradient(135deg, #CCFBF1 0%, #99F6E4 100%); /* teal-100 → teal-200 */ --step-3: linear-gradient(135deg, #99F6E4 0%, #5EEAD4 100%); /* teal-200 → teal-300 */ --step-4: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%); /* teal-300 → teal-400 */ --step-5: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%); /* teal-400 → teal-500 */ --step-6: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%); /* teal-500 → teal-700 */ --step-7: linear-gradient(135deg, #0F766E 0%, #115E59 100%); /* teal-700 → teal-800 */ /* ── 반경 / 간격 / 전환 ── */ --r-btn: 8px; --r-card: 13px; --r-sm: 6px; --tr: .16s ease; --ring: 0 0 0 3px rgba(15,118,110,.12); --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06); /* ── 타이포 ── */ --font: 'Inter','Noto Sans KR',system-ui,sans-serif; --font-mono: 'JetBrains Mono',monospace; } /* inspect-infra-diff-alert 다크 변종 — 토큰 재정의(SoT). 컴포넌트는 var(--alert-*) 만 사용 (NFR-2/6). */ [data-theme="dark"] { --alert-bg: #451A03; /* amber-950 */ --alert-fg: #FDE68A; /* amber-200 */ --alert-border: #92400E; /* amber-800 */ --alert-icon: #FBBF24; /* amber-400 — 다크 surface 위 대비 확보 */ } /* ============================================================ * 공용 컴포넌트 — 클래스 opt-in (페이지 마이그레이션 시 채택) * prefix 'ds-' 는 기존 bare 요소/클래스와 충돌 없이 점진 적용 위함. * ============================================================ */ /* 버튼 */ .ds-btn{ font-family:var(--font); font-size:.86rem; font-weight:600; line-height:1; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-btn); border:1px solid var(--border2); background:transparent; color:var(--text2); cursor:pointer; transition:var(--tr); } .ds-btn:hover{ background:var(--surface-2); } .ds-btn:active{ transform:scale(.97); } .ds-btn--primary{ background:var(--primary); border-color:var(--primary); color:#fff; } .ds-btn--primary:hover{ background:var(--primary2); border-color:var(--primary2); } .ds-btn--subtle{ background:var(--primary-lt); border-color:#99F6E4; color:var(--primary); } .ds-btn--danger{ border-color:var(--danger); color:var(--danger); } .ds-btn--danger:hover{ background:#FEF2F2; } /* 카드 */ .ds-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; transition:var(--tr); } .ds-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); } .ds-card__head{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text2); margin-bottom:10px; } .ds-card__head i{ color:var(--primary); } .ds-card__value{ font-size:1.55rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; } .ds-card__value .unit{ font-size:.8rem; color:var(--muted); margin-left:3px; } .ds-card__meta{ font-size:.74rem; color:var(--text2); margin-top:8px; display:flex; align-items:center; gap:6px; } .ds-card--primary{ background:linear-gradient(135deg,var(--primary),var(--primary2)); border-color:var(--primary2); } .ds-card--primary .ds-card__head, .ds-card--primary .ds-card__value, .ds-card--primary .ds-card__meta{ color:#fff; } .ds-card--primary .ds-card__head i{ color:#CFFAFE; } /* 페이지 헤더 */ .ds-page-header{ padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; } .ds-page-header h2{ font-size:1.35rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:10px; } .ds-page-header h2 i{ color:var(--primary); font-size:1.1rem; } /* 테이블 */ .ds-table{ width:100%; border-collapse:collapse; font-size:.84rem; } .ds-table thead th{ background:var(--surface); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; font-weight:600; padding:11px 12px; border-bottom:1px solid var(--border); text-align:left; } .ds-table tbody td{ padding:14px 12px; border-bottom:1px solid var(--surface-2); color:var(--text); } .ds-table tbody tr:hover td{ background:var(--bg); } .ds-table tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 0 var(--primary); } .ds-table .is-emphasis{ background:var(--primary-lt); } /* 상태 뱃지 */ .ds-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:600; border:1px solid transparent; } .ds-badge--success{ background:#F0FDF4; color:#166534; border-color:#BBF7D0; } .ds-badge--warning{ background:#FFFBEB; color:#92400E; border-color:#FDE68A; } .ds-badge--danger{ background:#FEF2F2; color:#B91C1C; border-color:#FECACA; } .ds-badge--info{ background:#ECFEFF; color:#155E75; border-color:#A5F3FC; } /* 스켈레톤 로딩 */ .ds-skeleton{ background:linear-gradient(90deg,#F5F5F4 0%,#EDEDEC 50%,#F5F5F4 100%); background-size:200% 100%; animation:ds-shimmer 1.4s linear infinite; border-radius:4px; color:transparent!important; } @keyframes ds-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }