/* * 코스모스 트랜스퍼 디자인 시스템 (인디고 테마) * * common.css / header.css / button.css / bootstrap.min.css 뒤에 로드되어 * 기존 스타일을 덮어쓰는 오버라이드 레이어입니다. * 이 파일을 로드하지 않는 화면(openCMS, qr, errorPage 등)은 영향을 받지 않습니다. * * 기존 vendor 및 common.css 는 수정하지 않으므로, * 되돌리려면 한 줄만 제거하면 원래 테마로 복구됩니다. */ /* ============================================================ * 00. 토큰 * ============================================================ */ :root { /* 브랜드 - Indigo */ --ds-indigo-50: #eef0fb; --ds-indigo-200: #c7ccf0; --ds-indigo-400: #7b84dd; --ds-indigo-600: #4a54c8; --ds-indigo-700: #3a43a8; --ds-indigo-hover: #3f48b5; --ds-indigo-tint-hover: #e0e3f8; /* 그레이 스케일 (쿨 그레이) */ --ds-gray-50: #f9fafc; --ds-gray-100: #f2f3f8; --ds-gray-200: #e5e8f0; --ds-gray-300: #d1d6e0; --ds-gray-500: #8b95a1; --ds-gray-600: #6b7684; --ds-gray-700: #333d4b; --ds-gray-900: #191f28; /* 시맨틱 */ --ds-success: #17b26a; --ds-success-bg: #e9f9f1; --ds-success-fg: #0e9355; --ds-error: #e5484d; --ds-error-bg: #fdecec; --ds-error-fg: #d13438; --ds-warning: #f79009; --ds-warning-bg: #fef4e6; --ds-warning-fg: #b54708; /* 형태 */ --ds-radius-sm: 8px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 16px; --ds-radius-pill: 999px; --ds-shadow-card: 0 1px 3px rgba(25, 31, 40, 0.06); --ds-shadow-modal: 0 12px 32px rgba(25, 31, 40, 0.16); --ds-shadow-toast: 0 8px 20px rgba(25, 31, 40, 0.25); --ds-focus-ring: 0 0 0 3px rgba(74, 84, 200, 0.15); --ds-focus-ring-error: 0 0 0 3px rgba(229, 72, 77, 0.12); /* 사이드바 폭. common.css 는 200px 를 하드코딩해 콘텐츠 폭을 계산하므로 * 이 값을 바꾸면 .manager-article 의 width 도 함께 따라가야 합니다. */ --ds-sidebar-width: 224px; /* 헤더 높이. common.css 는 80px 를 가정해(.contents / .content-mh) 계산하는데 * 실제 navbar 는 56px 이므로 24px 이 어긋나 있었습니다. 이 값으로 통일합니다. */ --ds-header-height: 56px; /* 콘텐츠 좌우 여백. breadcrumb·표·버튼이 모두 이 선에서 시작해야 합니다. */ --ds-content-padding: 16px; /* 로그인 계열 화면이 참조하던 기존 변수를 인디고 정본으로 재지정 */ --transfer-blue: var(--ds-indigo-600); --transfer-blue-weak: var(--ds-indigo-50); --transfer-text: var(--ds-gray-900); --transfer-subtext: var(--ds-gray-600); --transfer-border: var(--ds-gray-300); --transfer-bg: var(--ds-gray-100); --transfer-card: #ffffff; --transfer-shadow: var(--ds-shadow-card); } /* ============================================================ * 01. 베이스 · 앱 셸 레이아웃 * * 헤더와 사이드바는 고정하고 콘텐츠 영역만 스크롤합니다. * body 가 세로로 스크롤하지 않으므로 navbar 는 문서 흐름에 둔 채로도 상단에 고정됩니다 * (position:fixed 가 필요 없습니다). * * 가로 스크롤은 body 가 담당합니다. body 에 min-width:1200px 인라인 스타일이 있어 * 창이 그보다 좁으면 가로로 넘치는데, overflow-x 까지 hidden 으로 막으면 * 오른쪽 내용에 접근할 수 없게 됩니다. * * 주의: 의 Bootstrap `overflow-auto` 클래스(overflow:auto !important)는 * 여기서 덮을 수 없어 mainHeader.php 마크업에서 제거했습니다. * ============================================================ */ html { height: 100%; } body { background: var(--ds-gray-100); color: var(--ds-gray-900); -webkit-font-smoothing: antialiased; } body.scroll-laby { height: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; } /* 헤더 아래 남은 높이를 모두 차지하고, 자신은 스크롤하지 않습니다. */ .contents { height: calc(100% - var(--ds-header-height)); padding: 0; overflow: hidden; background: var(--ds-gray-100); } /* .row 의 기본 음수 마진(-15px)을 없애 사이드바를 좌측 끝에 붙입니다. * nowrap 으로 두어 폭 계산이 어긋나도 콘텐츠가 아래로 떨어지지 않게 합니다. */ .contents > .row { height: 100%; margin: 0; flex-wrap: nowrap; } /* common.css 의 min-height: calc(100vh - 80px) 를 무효화합니다. * 앱 셸에서는 높이를 부모가 결정하므로 최소 높이를 강제하면 안 됩니다. */ .content-mh { min-height: 0; } a { color: var(--ds-indigo-600); text-decoration: none; } a:hover { color: var(--ds-indigo-700); text-decoration: underline; } /* 콘텐츠 영역은 Gray 100, 카드/표는 흰색 */ .contents { background: var(--ds-gray-100); } .manager-headbox, .transfer-headbox, .user-headbox { background: transparent; } /* 콘텐츠 영역(.manager-article)이 이미 흰 배경이므로 카드로 띄우지 않고 평평하게 둡니다. * 표와 주변의 구분은 표 헤더(Gray 50)와 행 구분선이 맡습니다. * overflow:hidden 을 걸면 폭이 넓은 표의 우측 컬럼이 잘려 접근할 수 없으므로 쓰지 않습니다. */ .manager-list { background: transparent; border-radius: 0; box-shadow: none; } .text-muted { color: var(--ds-gray-500); } .text-primary { color: var(--ds-indigo-600); } /* 숫자 열 정렬 안정화 */ .table-manager td, .pagingType01 { font-variant-numeric: tabular-nums; } /* ============================================================ * 02. 버튼 * * button.css 의 `.btn-orange:not(:disabled):not(.disabled):active` 처럼 * 특이도가 높은 셀렉터가 있어, 동일한 형태로 재선언해 캐스케이드 순서로 이깁니다. * ============================================================ */ .btn { border-radius: var(--ds-radius-md); font-weight: 600; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .btn:focus, .btn.focus { box-shadow: var(--ds-focus-ring); } /* --- Primary: 기존 주황 버튼을 인디고 채움으로 대체 --- */ .btn-orange { color: #ffffff; background-color: var(--ds-indigo-600); border-color: var(--ds-indigo-600); } .btn-orange:hover { color: #ffffff; background-color: var(--ds-indigo-hover); border-color: var(--ds-indigo-hover); } .btn-orange:focus, .btn-orange.focus { color: #ffffff; background-color: var(--ds-indigo-hover); border-color: var(--ds-indigo-hover); box-shadow: var(--ds-focus-ring); } .btn-orange.disabled, .btn-orange:disabled { color: #ffffff; background-color: var(--ds-indigo-200); border-color: var(--ds-indigo-200); } .btn-orange:not(:disabled):not(.disabled):active, .btn-orange:not(:disabled):not(.disabled).active, .show > .btn-orange.dropdown-toggle { color: #ffffff; background-color: var(--ds-indigo-700); border-color: var(--ds-indigo-700); } .btn-orange:not(:disabled):not(.disabled):active:focus, .btn-orange:not(:disabled):not(.disabled).active:focus, .show > .btn-orange.dropdown-toggle:focus { box-shadow: var(--ds-focus-ring); } /* --- Secondary: 인디고 틴트 --- */ .btn-primary, .btn-blue { color: var(--ds-indigo-600); background-color: var(--ds-indigo-50); border-color: transparent; } .btn-primary:hover, .btn-blue:hover { color: var(--ds-indigo-700); background-color: var(--ds-indigo-tint-hover); border-color: transparent; } .btn-primary:focus, .btn-primary.focus, .btn-blue:focus, .btn-blue.focus { color: var(--ds-indigo-700); background-color: var(--ds-indigo-tint-hover); border-color: transparent; box-shadow: var(--ds-focus-ring); } .btn-primary.disabled, .btn-primary:disabled, .btn-blue.disabled, .btn-blue:disabled { color: var(--ds-gray-500); background-color: var(--ds-gray-100); border-color: transparent; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .btn-blue:not(:disabled):not(.disabled):active, .btn-blue:not(:disabled):not(.disabled).active, .show > .btn-blue.dropdown-toggle { color: var(--ds-indigo-700); background-color: var(--ds-indigo-200); border-color: transparent; } /* --- Outline: 흰 배경 + 회색 테두리 --- */ .btn-light, .btn-prev { color: var(--ds-gray-700); background-color: #ffffff; border-color: var(--ds-gray-300); } .btn-light:hover, .btn-prev:hover { color: var(--ds-gray-900); background-color: var(--ds-gray-50); border-color: var(--ds-gray-300); } .btn-light:focus, .btn-light.focus, .btn-prev:focus, .btn-prev.focus { color: var(--ds-gray-900); background-color: var(--ds-gray-50); border-color: var(--ds-gray-300); box-shadow: var(--ds-focus-ring); } .btn-light.disabled, .btn-light:disabled { color: var(--ds-gray-300); background-color: #ffffff; border-color: var(--ds-gray-200); } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle, .btn-prev:not(:disabled):not(.disabled):active, .btn-prev:not(:disabled):not(.disabled).active { color: var(--ds-gray-900); background-color: var(--ds-gray-100); border-color: var(--ds-gray-300); } /* --- Danger: 틴트 --- */ .btn-danger { color: var(--ds-error-fg); background-color: var(--ds-error-bg); border-color: transparent; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus { color: var(--ds-error-fg); background-color: #fadddd; border-color: transparent; } .btn-outline-danger:not(.btn-icon) { color: var(--ds-error-fg); background-color: var(--ds-error-bg); border-color: transparent; } .btn-outline-danger:not(.btn-icon):hover, .btn-outline-danger:not(.btn-icon):focus, .btn-outline-danger:not(.btn-icon):not(:disabled):not(.disabled):active { color: var(--ds-error-fg); background-color: #fadddd; border-color: transparent; } /* --- 사이즈 --- */ .btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; border-radius: var(--ds-radius-sm); } .btn-xs, .btn-group-xs > .btn { padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: var(--ds-radius-sm); } /* --- 테이블 액션 아이콘 버튼: 회색 라인 → 호버 시 인디고 틴트 --- * 뷰에서 ,