@charset "UTF-8"; /* ======================================== Color Variables - 파스텔 디자인 시스템 ======================================== */ :root { /* Auth 영역 색상 (파스텔 민트) */ --auth-primary: #b4e7ce; --auth-secondary: #9dd9bc; --auth-focus: rgba(180, 231, 206, 0.5); /* 업체관리(copWok) 영역 색상 (파스텔 블루) */ --copwok-primary: #a8d5ff; --copwok-secondary: #8cc4ff; --copwok-focus: rgba(168, 213, 255, 0.5); /* 중앙관리(ctrMngt) 영역 색상 (파스텔 퍼플) */ --ctrmng-primary: #d4b5e8; --ctrmng-secondary: #c399db; --ctrmng-focus: rgba(212, 181, 232, 0.5); /* 파스텔 색상 팔레트 */ --pastel-primary: #a8d5ff; --pastel-secondary: #d0d4d9; --pastel-success: #b4e7ce; --pastel-danger: #ffb3ba; --pastel-warning: #ffe4a3; --pastel-info: #a8e6f1; --pastel-light: #f5f5f5; --pastel-dark: #2c2f33; /* 그림자 깊이 */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 2px 6px rgba(0,0,0,0.12); --shadow-lg: 0 4px 12px rgba(0,0,0,0.15); --shadow-xl: 0 8px 24px rgba(0,0,0,0.18); } /* ======================================== 버튼 스타일 - 파스텔 톤 ======================================== */ .btn { font-weight: 500; letter-spacing: 0.3px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-width: 1.5px; } .btn:active {transform: none;} .btn-primary {background-color: var(--pastel-primary) !important;border-color: #7ab8ff !important;color: #2c5aa0 !important;box-shadow: var(--shadow-sm) !important;} .btn-primary:hover,.btn-primary:focus {background-color: #8cc4ff !important;border-color: #5ca3ff !important;color: #1a3a6e !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-secondary {background-color: var(--pastel-secondary) !important;border-color: #b8bec5 !important;color: #5a5e62 !important;box-shadow: var(--shadow-sm) !important;} .btn-secondary:hover,.btn-secondary:focus {background-color: #b8bec5 !important;border-color: #9fa5ac !important;color: #3e4145 !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-success {background-color: var(--pastel-success) !important;border-color: #8fd4b3 !important;color: #2d8659 !important;box-shadow: var(--shadow-sm) !important;} .btn-success:hover,.btn-success:focus {background-color: #9dd9bc !important;border-color: #74c89f !important;color: #1f5f3f !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-danger {background-color: var(--pastel-danger) !important;border-color: #ff8a92 !important;color: #c63a47 !important;box-shadow: var(--shadow-sm) !important;} .btn-danger:hover,.btn-danger:focus {background-color: #ff9ca3 !important;border-color: #ff7580 !important;color: #9e2d37 !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-warning {background-color: var(--pastel-warning) !important;border-color: #ffd67a !important;color: #9d7b1f !important;box-shadow: var(--shadow-sm) !important;} .btn-warning:hover,.btn-warning:focus {background-color: #ffd98a !important;border-color: #ffc966 !important;color: #7a5f18 !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-info {background-color: var(--pastel-info) !important;border-color: #7dd9e6 !important;color: #147a8c !important;box-shadow: var(--shadow-sm) !important;} .btn-info:hover,.btn-info:focus {background-color: #8fd9e5 !important;border-color: #5eccdc !important;color: #0f5b68 !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-light {background-color: var(--pastel-light) !important;border-color: #bbb !important;color: #666 !important;box-shadow: var(--shadow-sm) !important;} .btn-light:hover,.btn-light:focus {background-color: #e8e8e8 !important;border-color: #999 !important;color: #444 !important;box-shadow: var(--shadow-md) !important;transform: none !important;} .btn-dark {background-color: var(--pastel-dark) !important;border-color: #1a1d20 !important;color: #fff !important;box-shadow: var(--shadow-sm) !important;} .btn-dark:hover,.btn-dark:focus {background-color: #1a1d20 !important;border-color: #0d0f11 !important;color: #fff !important;box-shadow: var(--shadow-md) !important;transform: none !important;} /* 아웃라인 버튼 */ .btn-outline-primary {border-color: #7ab8ff !important;color: #2c5aa0 !important;border-width: 1.5px !important;} .btn-outline-primary:hover,.btn-outline-primary:focus {background-color: var(--pastel-primary) !important;border-color: #5ca3ff !important;color: #1a3a6e !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-secondary {border-color: #b8bec5 !important;color: #5a5e62 !important;border-width: 1.5px !important;} .btn-outline-secondary:hover,.btn-outline-secondary:focus {background-color: var(--pastel-secondary) !important;border-color: #9fa5ac !important;color: #3e4145 !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-success {border-color: #8fd4b3 !important;color: #2d8659 !important;border-width: 1.5px !important;} .btn-outline-success:hover,.btn-outline-success:focus {background-color: var(--pastel-success) !important;border-color: #74c89f !important;color: #1f5f3f !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-danger {border-color: #ff8a92 !important;color: #c63a47 !important;border-width: 1.5px !important;} .btn-outline-danger:hover,.btn-outline-danger:focus {background-color: var(--pastel-danger) !important;border-color: #ff7580 !important;color: #9e2d37 !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-warning {border-color: #ffd67a !important;color: #9d7b1f !important;border-width: 1.5px !important;} .btn-outline-warning:hover,.btn-outline-warning:focus {background-color: var(--pastel-warning) !important;border-color: #ffc966 !important;color: #7a5f18 !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-info {border-color: #7dd9e6 !important;color: #147a8c !important;border-width: 1.5px !important;} .btn-outline-info:hover,.btn-outline-info:focus {background-color: var(--pastel-info) !important;border-color: #5eccdc !important;color: #0f5b68 !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-light {border-color: #bbb !important;color: #666 !important;border-width: 1.5px !important;} .btn-outline-light:hover,.btn-outline-light:focus {background-color: var(--pastel-light) !important;border-color: #999 !important;color: #444 !important;box-shadow: var(--shadow-sm) !important;} .btn-outline-dark {border-color: #2c2f33 !important;color: #2c2f33 !important;border-width: 1.5px !important;} .btn-outline-dark:hover,.btn-outline-dark:focus {background-color: var(--pastel-dark) !important;border-color: #1a1d20 !important;color: #fff !important;box-shadow: var(--shadow-sm) !important;} /* ======================================== 뱃지 스타일 ======================================== */ .badge { font-weight: 500; padding: 0.35em 0.65em; letter-spacing: 0.3px; } .badge-primary {background-color: var(--pastel-primary) !important;color: #2c5aa0 !important;} .badge-secondary {background-color: var(--pastel-secondary) !important;color: #5a5e62 !important;} .badge-success {background-color: var(--pastel-success) !important;color: #2d8659 !important;} .badge-danger {background-color: var(--pastel-danger) !important;color: #c63a47 !important;} .badge-warning {background-color: var(--pastel-warning) !important;color: #9d7b1f !important;} .badge-info {background-color: var(--pastel-info) !important;color: #147a8c !important;} .badge-light {background-color: var(--pastel-light) !important;color: #666 !important;border: 1px solid #ddd !important;} .badge-dark {background-color: var(--pastel-dark) !important;color: #fff !important;} /* ======================================== 카드 스타일 ======================================== */ .card { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-md); border: none; border-radius: 8px; overflow: hidden; } .card-header:not(.note-toolbar) { transition: all 0.3s ease; border-bottom: 1px solid rgba(0,0,0,0.08); background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); } .card-body {padding: 1.5rem;} /* ======================================== 폼 요소 스타일 ======================================== */ .form-control,.custom-select { border: 1.5px solid #ddd; } .form-control:focus,textarea.form-control:focus,select.form-control:focus,.custom-select:focus { border-color: #8fd4b3; box-shadow: 0 0 0 0.25rem var(--auth-focus); } .form-control:hover,.custom-select:hover {border-color: #b4e7ce;} textarea.form-control {resize: none; height: auto;} .input-group-append + .form-control {margin-left: -1px;} /* 체크박스, 라디오 개선 */ .form-check-input:checked {background-color: #198d5e;border-color: #198d5e;} .form-check-input:focus {box-shadow: 0 0 0 0.2rem rgba(25, 141, 94, 0.25);} /* ======================================== 알림(Alert) 스타일 ======================================== */ .alert { border: none; border-left: 4px solid; border-radius: 6px; box-shadow: var(--shadow-sm); } .alert-primary {background-color: rgba(168, 213, 255, 0.2) !important;border-left-color: #7ab8ff !important;color: #2c5aa0 !important;} .alert-success {background-color: rgba(180, 231, 206, 0.2) !important;border-left-color: #8fd4b3 !important;color: #2d8659 !important;} .alert-warning {background-color: rgba(255, 228, 163, 0.2) !important;border-left-color: #ffd67a !important;color: #9d7b1f !important;} .alert-danger {background-color: rgba(255, 179, 186, 0.2) !important;border-left-color: #ff8a92 !important;color: #c63a47 !important;} .alert-info {background-color: rgba(168, 230, 241, 0.2) !important;border-left-color: #7dd9e6 !important;color: #147a8c !important;} /* ======================================== 테이블 스타일 ======================================== */ .table {overflow: hidden; margin-bottom: 0; border-bottom: 1px solid #dee2e6;} .table tbody tr:last-child td {border-bottom: 1px solid #dee2e6;} .table tbody + tbody tr:first-child > td, .table tbody + tbody tr:first-child > th {border-top: 1px dashed #dee2e6 !important;} .table-hover tbody tr:hover {background-color: rgba(180, 231, 206, 0.15) !important;transition: background-color 0.2s ease;} .table-striped tbody tr:nth-of-type(odd) {background-color: rgba(245, 245, 245, 0.5);} /* ======================================== 텍스트 컬러 클래스 (파스텔 테마) ======================================== */ .text-primary {color: #2c5aa0 !important;} .text-secondary {color: #5a5e62 !important;} .text-success {color: #2d8659 !important;} .text-danger {color: #c63a47 !important;} .text-warning {color: #9d7b1f !important;} .text-info {color: #147a8c !important;} .text-light {color: #999 !important;} .text-dark {color: #2c2f33 !important;} .text-muted {color: #6c757d !important;} /* 링크 색상 */ a.text-primary:hover,a.text-primary:focus {color: #1a3a6e !important;} a.text-secondary:hover,a.text-secondary:focus {color: #3e4145 !important;} a.text-success:hover,a.text-success:focus {color: #1f5f3f !important;} a.text-danger:hover,a.text-danger:focus {color: #9e2d37 !important;} a.text-warning:hover,a.text-warning:focus {color: #7a5f18 !important;} a.text-info:hover,a.text-info:focus {color: #0f5b68 !important;} /* ======================================== 배경 컬러 클래스 (파스텔 테마) ======================================== */ .bg-primary {background-color: var(--pastel-primary) !important;color: #2c5aa0 !important;} .bg-secondary {background-color: var(--pastel-secondary) !important;color: #5a5e62 !important;} .bg-success {background-color: var(--pastel-success) !important;color: #2d8659 !important;} .bg-danger {background-color: var(--pastel-danger) !important;color: #c63a47 !important;} .bg-warning {background-color: var(--pastel-warning) !important;color: #9d7b1f !important;} .bg-info {background-color: var(--pastel-info) !important;color: #147a8c !important;} .bg-light {background-color: var(--pastel-light) !important;color: #666 !important;} .bg-dark {background-color: var(--pastel-dark) !important;color: #fff !important;} /* ======================================== 유틸리티 클래스 ======================================== */ .shadow-soft {box-shadow: var(--shadow-md) !important;} .shadow-lifted {box-shadow: var(--shadow-lg) !important;} .rounded-soft {border-radius: 8px !important;} .text-shadow {text-shadow: 0 1px 2px rgba(0,0,0,0.1);} /* ======================================== 폰트 사이즈 유틸리티 ======================================== */ .font-xs {font-size: 0.75rem !important;} .font-sm {font-size: 0.875rem !important;} .font-md {font-size: 1rem !important;} .font-lg {font-size: 1.125rem !important;} .font-xl {font-size: 1.25rem !important;} .font-2xl {font-size: 1.5rem !important;} .font-3xl {font-size: 1.75rem !important;} .font-4xl {font-size: 2rem !important;} .font-5xl {font-size: 2.5rem !important;} .font-6xl {font-size: 3rem !important;} .font-7xl {font-size: 3.5rem !important;} .font-8xl {font-size: 4rem !important;} .font-9xl {font-size: 4.5rem !important;} .font-10xl {font-size: 5rem !important;} /* ======================================== 컨테이너 ======================================== */ .container-fluid {padding-left: 0;padding-right: 0;} /* ======================================== Form Check 스타일 (Bootstrap 4) ======================================== */ .form-check {position: relative;display: block;padding-left: 1.5rem;} .form-check-input {position: absolute;top: 50%;left: 0;transform: translateY(-50%);margin-top: 0;margin-left: 0;width: 1.25rem;height: 1.25rem;border: 1px solid #ced4da;background-color: #fff;background-repeat: no-repeat;background-position: center;background-size: contain;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;flex-shrink: 0;transition: all 0.2s ease;} .form-check-input[type="checkbox"] {border-radius: 0.25rem;} .form-check-input[type="radio"] {border-radius: 50%;} .form-check-input[type="checkbox"]:checked {background-color: #198d5e;border-color: #198d5e;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");} .form-check-input[type="radio"]:checked {background-color: #198d5e;border-color: #198d5e;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");} .form-check-input:hover {border-color: #198d5e;} .form-check-input:disabled, .form-check-input[disabled] {opacity: 0.65;cursor: not-allowed;} .form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {color: #6c757d;cursor: not-allowed;} .form-check-label {margin-bottom: 0;cursor: pointer;} .form-check-inline {display: inline-flex;align-items: center;padding-left: 0;margin-right: 0.75rem;} .form-check-inline .form-check-input {position: static;margin-top: 0;margin-right: 0.3125rem;margin-left: 0;transform: translateY(0); vertical-align: bottom;} /* ======================================== 페이지네이션 ======================================== */ .pagination {display: flex;padding-left: 0;list-style: none;margin-bottom: 0;} .pagination .page-item {margin: 0 0.25rem;} .pagination .page-link {position: relative;display: block;padding: 0.5rem 0.75rem;text-decoration: none;background-color: #fff;border: 1.5px solid #dee2e6;color: #5a5c69;font-weight: 500;border-radius: 0.5rem;} .pagination .page-link:hover {background-color: var(--pastel-success);border-color: #8fd4b3;color: #2d8659;box-shadow: var(--shadow-sm);} .pagination .page-link:focus {box-shadow: 0 0 0 0.2rem rgba(180, 231, 206, 0.25);outline: 0;} .pagination .page-item.disabled .page-link {pointer-events: none;background-color: #f8f9fa;border-color: #dee2e6;color: #6c757d;opacity: 0.6;} .pagination .page-item.active .page-link {background-color: var(--pastel-success) !important;border-color: #8fd4b3 !important;color: #2d8659 !important;font-weight: 600;box-shadow: var(--shadow-sm) !important;} a.btn.d-flex {width: fit-content;justify-content: center;} /* 페이징 크기 변형 */ .pagination-sm .page-link {padding: 0.35rem 0.6rem;font-size: 0.875rem;border-radius: 0.4rem;} .pagination-lg .page-link {padding: 0.75rem 1rem;font-size: 1.125rem;border-radius: 0.6rem;} .pagination .page-item:first-child .page-link {border-top-right-radius: 0;border-bottom-right-radius: 0;border-top-left-radius: 0.5rem;border-bottom-left-radius: 0.5rem;} .pagination .page-item:last-child .page-link {border-top-left-radius: 0;border-bottom-left-radius: 0;border-top-right-radius: 0.5rem;border-bottom-right-radius: 0.5rem;} /* ======================================== 게시판 공통 스타일 ======================================== */ .board-table th, .board-table td {vertical-align: middle;} .board-table .col-no {width: 5%;} .board-table .col-type {width: 8%;} .board-table .col-title {width: 45%;} .board-table .col-writer {width: 12%;} .board-table .col-date {width: 15%;} .board-table .col-views {width: 8%;} .board-table .col-attach {width: 7%;} .board-table tbody tr {cursor: pointer;transition: background-color 0.15s ease;} .board-table {table-layout: fixed;width: 100%;} .board-card {border-left: 4px solid #dee2e6;transition: all 0.2s ease;} .board-card:active {background-color: rgba(180, 231, 206, 0.08);} .board-card.pinned {border-left-color: var(--pastel-danger);} .board-card .card-title {font-size: 1rem;line-height: 1.4;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;} .board-card .meta-info {font-size: 0.8rem;} .pin-icon {color: var(--pastel-danger);vertical-align: middle;} /* ======================================== sb-admin-2 통합 - Buttons ======================================== */ .btn-circle {border-radius: 100%;height: 2.5rem;width: 2.5rem;font-size: 1rem;display: inline-flex;align-items: center;justify-content: center;} .btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {height: 1.8rem;width: 1.8rem;font-size: 0.75rem;} .btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {height: 3.5rem;width: 3.5rem;font-size: 1.35rem;} .btn-icon-split {padding: 0;overflow: hidden;display: inline-flex;align-items: stretch;justify-content: center;} .btn-icon-split .icon {background: rgba(0, 0, 0, 0.15);display: inline-block;padding: 0.375rem 0.75rem;} .btn-icon-split .text {display: inline-block;padding: 0.375rem 0.75rem;} .btn-icon-split.btn-sm .icon, .btn-group-sm > .btn-icon-split.btn .icon {padding: 0.25rem 0.5rem;} .btn-icon-split.btn-sm .text, .btn-group-sm > .btn-icon-split.btn .text {padding: 0.25rem 0.5rem;} .btn-icon-split.btn-lg .icon, .btn-group-lg > .btn-icon-split.btn .icon {padding: 0.5rem 1rem;} .btn-icon-split.btn-lg .text, .btn-group-lg > .btn-icon-split.btn .text {padding: 0.5rem 1rem;} /* ======================================== Card 특수 스타일 ======================================== */ .card .card-header .dropdown {line-height: 1;} .card .card-header .dropdown .dropdown-menu {line-height: 1.5;} .card .card-header[data-bs-toggle="collapse"] {text-decoration: none;position: relative;padding: 0.75rem 3.25rem 0.75rem 1.25rem;} .card .card-header[data-bs-toggle="collapse"]::after {position: absolute;right: 0;top: 0;padding-right: 1.725rem;line-height: 51px;font-weight: 900;content: '\f107';font-family: 'Font Awesome 5 Free';color: #d1d3e2;} .card .card-header[data-bs-toggle="collapse"].collapsed {border-radius: 0.35rem;} .card .card-header[data-bs-toggle="collapse"].collapsed::after {content: '\f105';} /* ======================================== Border 두께 조정 ======================================== */ .border-left-primary {border-left: 0.25rem solid var(--pastel-primary) !important;} .border-bottom-primary {border-bottom: 0.25rem solid var(--pastel-primary) !important;} .border-left-secondary {border-left: 0.25rem solid var(--pastel-secondary) !important;} .border-bottom-secondary {border-bottom: 0.25rem solid var(--pastel-secondary) !important;} .border-left-success {border-left: 0.25rem solid var(--pastel-success) !important;} .border-bottom-success {border-bottom: 0.25rem solid var(--pastel-success) !important;} .border-left-info {border-left: 0.25rem solid var(--pastel-info) !important;} .border-bottom-info {border-bottom: 0.25rem solid var(--pastel-info) !important;} .border-left-warning {border-left: 0.25rem solid var(--pastel-warning) !important;} .border-bottom-warning {border-bottom: 0.25rem solid var(--pastel-warning) !important;} .border-left-danger {border-left: 0.25rem solid var(--pastel-danger) !important;} .border-bottom-danger {border-bottom: 0.25rem solid var(--pastel-danger) !important;} .border-left-light {border-left: 0.25rem solid var(--pastel-light) !important;} .border-bottom-light {border-bottom: 0.25rem solid var(--pastel-light) !important;} .border-left-dark {border-left: 0.25rem solid var(--pastel-dark) !important;} .border-bottom-dark {border-bottom: 0.25rem solid var(--pastel-dark) !important;} /* ======================================== Dropdown ======================================== */ .dropdown .dropdown-menu {font-size: 0.85rem;} .dropdown .dropdown-menu .dropdown-header {font-weight: 800;font-size: 0.65rem;color: #b7b9cc;} .dropdown.no-arrow .dropdown-toggle::after {display: none;} /* ======================================== Progress ======================================== */ .progress-sm {height: 0.5rem;} /* ======================================== Rotate ======================================== */ .rotate-15 {transform: rotate(15deg);} .rotate-n-15 {transform: rotate(-15deg);} /* ======================================== Chart Area ======================================== */ .chart-area {position: relative;height: 10rem;width: 100%;} .chart-pie {position: relative;height: 15rem;width: 100%;} @media (min-width: 768px) { .chart-area {height: 20rem;} .chart-pie {height: 20rem;} } /* ======================================== Gap 유틸리티 (Flexbox & Grid) ======================================== */ .gap-0 {gap: 0 !important;} .gap-1 {gap: 0.25rem !important;} .gap-2 {gap: 0.5rem !important;} .gap-3 {gap: 1rem !important;} .gap-4 {gap: 1.5rem !important;} .gap-5 {gap: 3rem !important;} .row-gap-0 {row-gap: 0 !important;} .row-gap-1 {row-gap: 0.25rem !important;} .row-gap-2 {row-gap: 0.5rem !important;} .row-gap-3 {row-gap: 1rem !important;} .row-gap-4 {row-gap: 1.5rem !important;} .row-gap-5 {row-gap: 3rem !important;} .column-gap-0 {column-gap: 0 !important;} .column-gap-1 {column-gap: 0.25rem !important;} .column-gap-2 {column-gap: 0.5rem !important;} .column-gap-3 {column-gap: 1rem !important;} .column-gap-4 {column-gap: 1.5rem !important;} .column-gap-5 {column-gap: 3rem !important;} /* ======================================== Width 유틸리티 ======================================== */ .w-280px {width: 280px !important;} .w-200px {width: 200px !important;} .mx-w-350px {max-width: 350px !important;} .mx-w-300px {max-width: 300px !important;} .mn-w-200px {min-width: 200px !important;} .mn-w-80px {min-width: 80px !important;} .mn-w-100px {min-width: 100px !important;} .mn-w-60px {min-width: 60px !important;} .w-50px {width: 50px !important;} /* ======================================== Height 유틸리티 ======================================== */ .mx-h-50vh {max-height: 50vh !important;} /* ======================================== Cursor 유틸리티 ======================================== */ .cursor-pointer {cursor: pointer !important;} /* ======================================== btn-group-toggle 스타일 ======================================== */ .btn-group[data-toggle="buttons"] input[type="radio"] {position: absolute;opacity: 0;pointer-events: none;} /* ======================================== Position 유틸리티 (Bootstrap 4 호환) ======================================== */ .position-static {position: static !important;} .position-relative {position: relative !important;} .position-absolute {position: absolute !important;} .position-fixed {position: fixed !important;} .position-sticky {position: sticky !important;} .bottom-0 {bottom: 0 !important;} .top-0 {top: 0 !important;} .left-0 {left: 0 !important;} .right-0 {right: 0 !important;} .end-0 {right: 0 !important;} .start-0 {left: 0 !important;} .top-50 {top: 50% !important;} .bottom-50 {bottom: 50% !important;} .start-50 {left: 50% !important;} .end-50 {right: 50% !important;} /* ======================================== Transform 유틸리티 ======================================== */ .translate-middle {transform: translate(-50%, -50%) !important;} .translate-middle-x {transform: translateX(-50%) !important;} .translate-middle-y {transform: translateY(-50%) !important;} /* ======================================== Opacity 유틸리티 (Bootstrap 4 호환) ======================================== */ .opacity-25 {opacity: 0.25 !important;} .opacity-50 {opacity: 0.5 !important;} .opacity-75 {opacity: 0.75 !important;} .opacity-100 {opacity: 1 !important;} /* ======================================== Margin 유틸리티 (Bootstrap 4 호환) ======================================== */ .m-0 {margin: 0 !important;} .m-1 {margin: 0.25rem !important;} .m-2 {margin: 0.5rem !important;} .m-3 {margin: 1rem !important;} .m-4 {margin: 1.5rem !important;} .m-5 {margin: 3rem !important;} .mt-0 {margin-top: 0 !important;} .mt-1 {margin-top: 0.25rem !important;} .mt-2 {margin-top: 0.5rem !important;} .mt-3 {margin-top: 1rem !important;} .mt-4 {margin-top: 1.5rem !important;} .mt-5 {margin-top: 3rem !important;} .mb-0 {margin-bottom: 0 !important;} .mb-1 {margin-bottom: 0.25rem !important;} .mb-2 {margin-bottom: 0.5rem !important;} .mb-3 {margin-bottom: 1rem !important;} .mb-4 {margin-bottom: 1.5rem !important;} .mb-5 {margin-bottom: 3rem !important;} .ms-0 {margin-left: 0 !important;} .ms-1 {margin-left: 0.25rem !important;} .ms-2 {margin-left: 0.5rem !important;} .ms-3 {margin-left: 1rem !important;} .ms-4 {margin-left: 1.5rem !important;} .ms-5 {margin-left: 3rem !important;} .me-0 {margin-right: 0 !important;} .me-1 {margin-right: 0.25rem !important;} .me-2 {margin-right: 0.5rem !important;} .me-3 {margin-right: 1rem !important;} .me-4 {margin-right: 1.5rem !important;} .me-5 {margin-right: 3rem !important;} .ml-0 {margin-left: 0 !important;} .ml-1 {margin-left: 0.25rem !important;} .ml-2 {margin-left: 0.5rem !important;} .ml-3 {margin-left: 1rem !important;} .ml-4 {margin-left: 1.5rem !important;} .ml-5 {margin-left: 3rem !important;} .mr-0 {margin-right: 0 !important;} .mr-1 {margin-right: 0.25rem !important;} .mr-2 {margin-right: 0.5rem !important;} .mr-3 {margin-right: 1rem !important;} .mr-4 {margin-right: 1.5rem !important;} .mr-5 {margin-right: 3rem !important;} .mx-0 {margin-left: 0 !important;margin-right: 0 !important;} .mx-1 {margin-left: 0.25rem !important;margin-right: 0.25rem !important;} .mx-2 {margin-left: 0.5rem !important;margin-right: 0.5rem !important;} .mx-3 {margin-left: 1rem !important;margin-right: 1rem !important;} .mx-4 {margin-left: 1.5rem !important;margin-right: 1.5rem !important;} .mx-5 {margin-left: 3rem !important;margin-right: 3rem !important;} .my-0 {margin-top: 0 !important;margin-bottom: 0 !important;} .my-1 {margin-top: 0.25rem !important;margin-bottom: 0.25rem !important;} .my-2 {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;} .my-3 {margin-top: 1rem !important;margin-bottom: 1rem !important;} .my-4 {margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;} .my-5 {margin-top: 3rem !important;margin-bottom: 3rem !important;} /* ======================================== Padding 유틸리티 (Bootstrap 4 호환) ======================================== */ .p-0 {padding: 0 !important;} .p-1 {padding: 0.25rem !important;} .p-2 {padding: 0.5rem !important;} .p-3 {padding: 1rem !important;} .p-4 {padding: 1.5rem !important;} .p-5 {padding: 3rem !important;} .pt-0 {padding-top: 0 !important;} .pt-1 {padding-top: 0.25rem !important;} .pt-2 {padding-top: 0.5rem !important;} .pt-3 {padding-top: 1rem !important;} .pt-4 {padding-top: 1.5rem !important;} .pt-5 {padding-top: 3rem !important;} .pb-0 {padding-bottom: 0 !important;} .pb-1 {padding-bottom: 0.25rem !important;} .pb-2 {padding-bottom: 0.5rem !important;} .pb-3 {padding-bottom: 1rem !important;} .pb-4 {padding-bottom: 1.5rem !important;} .pb-5 {padding-bottom: 3rem !important;} .ps-0 {padding-left: 0 !important;} .ps-1 {padding-left: 0.25rem !important;} .ps-2 {padding-left: 0.5rem !important;} .ps-3 {padding-left: 1rem !important;} .ps-4 {padding-left: 1.5rem !important;} .ps-5 {padding-left: 3rem !important;} .pe-0 {padding-right: 0 !important;} .pe-1 {padding-right: 0.25rem !important;} .pe-2 {padding-right: 0.5rem !important;} .pe-3 {padding-right: 1rem !important;} .pe-4 {padding-right: 1.5rem !important;} .pe-5 {padding-right: 3rem !important;} .pl-0 {padding-left: 0 !important;} .pl-1 {padding-left: 0.25rem !important;} .pl-2 {padding-left: 0.5rem !important;} .pl-3 {padding-left: 1rem !important;} .pl-4 {padding-left: 1.5rem !important;} .pl-5 {padding-left: 3rem !important;} .pr-0 {padding-right: 0 !important;} .pr-1 {padding-right: 0.25rem !important;} .pr-2 {padding-right: 0.5rem !important;} .pr-3 {padding-right: 1rem !important;} .pr-4 {padding-right: 1.5rem !important;} .pr-5 {padding-right: 3rem !important;} .px-0 {padding-left: 0 !important;padding-right: 0 !important;} .px-1 {padding-left: 0.25rem !important;padding-right: 0.25rem !important;} .px-2 {padding-left: 0.5rem !important;padding-right: 0.5rem !important;} .px-3 {padding-left: 1rem !important;padding-right: 1rem !important;} .px-4 {padding-left: 1.5rem !important;padding-right: 1.5rem !important;} .px-5 {padding-left: 3rem !important;padding-right: 3rem !important;} .py-0 {padding-top: 0 !important;padding-bottom: 0 !important;} .py-1 {padding-top: 0.25rem !important;padding-bottom: 0.25rem !important;} .py-2 {padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;} .py-3 {padding-top: 1rem !important;padding-bottom: 1rem !important;} .py-4 {padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;} .py-5 {padding-top: 3rem !important;padding-bottom: 3rem !important;} /* ======================================== 공통 컴포넌트 - 섹션 카드 + 탭 스타일 ======================================== */ .section-card {border: none !important;border-radius: 0.5rem !important;box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;background-color: #fff !important;} .section-card-header {padding: 1rem 1.5rem !important;display: flex !important;justify-content: space-between !important;align-items: center !important;border-bottom: 1px solid #e3e6f0 !important;background-color: #fff !important; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;} .section-title {margin: 0 !important;} .section-card-body {padding: 1.5rem !important; border-radius: 0.5rem;} .section-card-header + .section-card-body {border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;} .fl-prd-cop-info .section-card-body strong {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} /* 탭 네비게이션 스타일 */ /* ===== 탭 헤더 래퍼 스타일 ===== */ .tab-header-wrapper:has(.copwok-nav-tabs) {border-bottom: 1px solid #dee2e6;} .tab-header-wrapper .copwok-nav-tabs.nav-tabs {border-bottom: none;} .tab-header-wrapper + .table {margin-top: -1px;} .copwok-nav-tabs + .section-card {border-top-left-radius: 0 !important;border-top-right-radius: 0 !important;} /* ===== 업체관리 탭 스타일 ===== */ .copwok-nav-tabs.nav-tabs .nav-item {margin-bottom: 0;} .copwok-nav-tabs.nav-tabs .nav-link {border: 0.0625rem solid #ccc;border-bottom: none;border-radius: 0.5rem 0.5rem 0 0;color: #6c757d;padding: 0.5rem 1.25rem;font-weight: 500;font-size: 1rem;transition: all 0.2s ease;background-color: transparent;margin-right: 0.25rem;text-decoration: none;display: inline-flex;align-items: center;gap: 0.5rem;cursor: pointer;white-space: nowrap;} .copwok-nav-tabs.nav-tabs .nav-link:hover {color: #3c434f;border-color: #adb5bd;border-bottom-color: transparent;text-decoration: none;} .copwok-nav-tabs.nav-tabs .nav-link.active {color: #ffffff;border-color: #198d5e;border-bottom-color: #fff;border-bottom-width: 0.0625rem;font-weight: 700;text-decoration: none;margin-bottom: -0.0625rem;background-color: #198d5e;} .copwok-nav-tabs.nav-tabs.nav-tabs-sm .nav-link {padding: 0.375rem 0.75rem;font-size: 0.875rem; margin-right: 0.125rem;} /* ===== 업체관리 탭 뱃지 스타일 ===== */ .copwok-nav-tabs .nav-link .badge {display: inline-flex;align-items: center;justify-content: center;min-width: 1.25rem;height: 1.25rem;padding: 0 0.375rem;font-size: 0.6875rem;font-weight: 600;line-height: 1;border-radius: 0.625rem;white-space: nowrap;transition: all 0.2s ease;} .copwok-nav-tabs .nav-link:not(.active) .badge {box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);} /* 데이터 테이블 스타일 */ .data-table {margin-bottom: 0 !important;border-collapse: separate !important;border-spacing: 0 !important;} .data-table thead th {background-color: #f8f9fa !important;font-weight: 600 !important;color: #495057 !important;border-bottom: 2px solid #dee2e6 !important;padding: 0.75rem !important;font-size: 0.875rem !important;vertical-align: middle !important;white-space: nowrap !important;} .data-table tbody td {padding: 0.75rem !important;vertical-align: middle !important;border-bottom: 1px solid #e9ecef !important;font-size: 0.875rem !important;color: #212529 !important;} .data-table tbody tr {transition: background-color 0.15s ease !important;} .data-table tbody tr:hover {background-color: #f8f9fa !important;} /* 버튼 그룹 스타일 */ .btn-group .btn-outline-primary.active {background-color: var(--pastel-primary) !important;border-color: #7ab8ff !important;color: #2c5aa0 !important;box-shadow: var(--shadow-sm) !important;} .btn-group .btn-outline-primary.active:hover {background-color: #8cc4ff !important;border-color: #5ca3ff !important;color: #1a3a6e !important;} .btn-group .btn-primary.rounded-pill {background-color: var(--pastel-primary) !important;border-color: #7ab8ff !important;color: #2c5aa0 !important;box-shadow: var(--shadow-sm) !important;} .btn-group .btn-primary.rounded-pill:hover {background-color: #8cc4ff !important;border-color: #5ca3ff !important;color: #1a3a6e !important;box-shadow: var(--shadow-md) !important;} .btn-group .btn-success.rounded-pill {background-color: var(--pastel-success) !important;border-color: #8fd4b3 !important;color: #2d8659 !important;box-shadow: var(--shadow-sm) !important;} .btn-group .btn-success.rounded-pill:hover {background-color: #9dd9bc !important;border-color: #74c89f !important;color: #1f5f3f !important;box-shadow: var(--shadow-md) !important;} .btn-group .btn-secondary.rounded-pill {background-color: var(--pastel-secondary) !important;border-color: #b8bec5 !important;color: #5a5e62 !important;box-shadow: var(--shadow-sm) !important;} .btn-group .btn-secondary.rounded-pill:hover {background-color: #b8bec5 !important;border-color: #9fa5ac !important;color: #3e4145 !important;box-shadow: var(--shadow-md) !important;} .btn-group .btn-danger.rounded-pill {background-color: var(--pastel-danger) !important;border-color: #ff8a92 !important;color: #c63a47 !important;box-shadow: var(--shadow-sm) !important;} .btn-group .btn-danger.rounded-pill:hover {background-color: #ff9ca3 !important;border-color: #ff7580 !important;color: #9e2d37 !important;box-shadow: var(--shadow-md) !important;} /* ======================================== 빈 상태 메시지 (No Result) ======================================== */ .no-result {display: flex !important;flex-direction: column !important;align-items: center !important;justify-content: center !important;padding: 3rem 1.5rem !important;text-align: center !important;color: #6c757d !important;} .no-result i {font-size: 3rem !important;margin-bottom: 1rem !important;color: #d1d3e2 !important;} .no-result p {margin: 0 !important;font-size: 0.875rem !important;color: #858796 !important;} /* ======================================== Gradient Backgrounds ======================================== */ .bg-gradient-primary {background-color: var(--pastel-primary) !important;background-image: linear-gradient(180deg, var(--pastel-primary) 10%, #5ca3ff 100%) !important;background-size: cover;} .bg-gradient-secondary {background-color: var(--pastel-secondary) !important;background-image: linear-gradient(180deg, var(--pastel-secondary) 10%, #9fa5ac 100%) !important;background-size: cover;} .bg-gradient-success {background-color: var(--pastel-success) !important;background-image: linear-gradient(180deg, var(--pastel-success) 10%, #74c89f 100%) !important;background-size: cover;} .bg-gradient-info {background-color: var(--pastel-info) !important;background-image: linear-gradient(180deg, var(--pastel-info) 10%, #5eccdc 100%) !important;background-size: cover;} .bg-gradient-warning {background-color: var(--pastel-warning) !important;background-image: linear-gradient(180deg, var(--pastel-warning) 10%, #ffc966 100%) !important;background-size: cover;} .bg-gradient-danger {background-color: var(--pastel-danger) !important;background-image: linear-gradient(180deg, var(--pastel-danger) 10%, #ff7580 100%) !important;background-size: cover;} .bg-gradient-light {background-color: var(--pastel-light) !important;background-image: linear-gradient(180deg, var(--pastel-light) 10%, #e8e8e8 100%) !important;background-size: cover;} .bg-gradient-dark {background-color: var(--pastel-dark) !important;background-image: linear-gradient(180deg, var(--pastel-dark) 10%, #1a1d20 100%) !important;background-size: cover;} /* ======================================== Gray Colors ======================================== */ .bg-gray-100 {background-color: #f8f9fc !important;} .bg-gray-200 {background-color: #eaecf4 !important;} .bg-gray-300 {background-color: #dddfeb !important;} .bg-gray-400 {background-color: #d1d3e2 !important;} .bg-gray-500 {background-color: #b7b9cc !important;} .bg-gray-600 {background-color: #858796 !important;} .bg-gray-700 {background-color: #6e707e !important;} .bg-gray-800 {background-color: #5a5c69 !important;} .bg-gray-900 {background-color: #3a3b45 !important;} .text-gray-100 {color: #f8f9fc !important;} .text-gray-200 {color: #eaecf4 !important;} .text-gray-300 {color: #dddfeb !important;} .text-gray-400 {color: #d1d3e2 !important;} .text-gray-500 {color: #b7b9cc !important;} .text-gray-600 {color: #858796 !important;} .text-gray-700 {color: #6e707e !important;} .text-gray-800 {color: #5a5c69 !important;} .text-gray-900 {color: #3a3b45 !important;} /* ======================================== Text Sizes ======================================== */ .text-xs {font-size: 0.7rem;} .text-lg {font-size: 1.2rem;} /* ======================================== Utilities ======================================== */ .o-hidden {overflow: hidden !important;} .icon-circle {height: 2.5rem;width: 2.5rem;border-radius: 100%;display: flex;align-items: center;justify-content: center;} /* ======================================== 브레드크럼 ======================================== */ .breadcrumb {display: flex;flex-wrap: wrap;padding: 0.75rem 0;margin-bottom: 1rem;list-style: none;} .breadcrumb-item {display: flex;align-items: center;} .breadcrumb-item + .breadcrumb-item::before {content: '>';display: inline-block;padding: 0 0.5rem;color: #adb5bd;} .breadcrumb-item.active {color: #6c757d; font-weight: 600;} .breadcrumb-item a {color: var(--pastel-success);text-decoration: none; font-size: 0.875rem;} .breadcrumb-item a:hover {color: #74c89f;text-decoration: underline;} .breadcrumb-item a i {margin-right: 6px; color: #adb5bd;} .breadcrumb-item +.breadcrumb-item {padding-left: 0;} /* ======================================== 상품 선택 카드 (Product Card) ======================================== */ .card-fpbList .product-card { border: 2px solid #e9ecef !important; border-radius: 0.5rem !important; cursor: pointer !important; transition: all 0.3s ease !important; background-color: #fff !important; } .card-fpbList .product-card:hover { border-color: #8fd4b3 !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; } .card-fpbList .product-card.selected { border: 2px solid #8fd4b3 !important; background-color: var(--pastel-success) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-3px) !important; } .card-fpbList .product-card.selected .form-check-label { color: #2d8659 !important; } .card-fpbList .product-card.selected .text-primary { color: #2d8659 !important; font-weight: 700 !important; } .card-fpbList .product-card .form-check-input:checked ~ .form-check-label { color: #2d8659 !important; } /* info-list */ .info-list > li:not(:first-child) {margin-top: 1.25rem;} .info-list > li dl > dt + dd {margin-top: 0.5rem;} /* ======================================== COMMON_BUTTONSET (기본: 흰색, active: btn-primary 컬러) ======================================== */ .COMMON_BUTTONSET .ui-button {background-color: #fff !important;border-color: #dee2e6 !important;color: #495057 !important;box-shadow: var(--shadow-sm) !important;font-weight: 500 !important;letter-spacing: 0.3px !important;border-width: 1.5px !important;transition: none !important;transform: none !important;animation: none !important;} .COMMON_BUTTONSET .ui-button:hover, .COMMON_BUTTONSET .ui-button:focus {background-color: #f8f9fa !important;border-color: #7ab8ff !important;color: #2c5aa0 !important;box-shadow: var(--shadow-md) !important; z-index: 1;transition: none !important;transform: none !important;animation: none !important;} .COMMON_BUTTONSET .ui-button.ui-state-active {background-color: var(--pastel-primary) !important;border-color: #7ab8ff !important;color: #2c5aa0 !important;box-shadow: var(--shadow-md) !important;transition: none !important;transform: none !important;animation: none !important;} /* 배달장소 카드: 오토컴플릿트 목록이 카드 밖으로 표시되도록 overflow 조정 */ .card.JS-step-deliveryPlace { overflow: visible; } .card.JS-step-deliveryPlace .card-body { overflow: visible; } /* ======================================== 오토컴플릿트 카드 호환성 스타일 ======================================== */ /* 카드 내부의 오토컴플릿트가 카드 밖으로 표시되도록 overflow 조정 */ /* :has() 선택자 지원 브라우저용 */ .card:has(.autocomplete-wrap), .card:has(.autocomplete-items) { overflow: visible; position: relative; } .card:has(.autocomplete-wrap) .card-body, .card:has(.autocomplete-items) .card-body { overflow: visible; } /* 오토컴플릿트가 활성화될 때 카드의 z-index를 높여 다른 카드 위에 표시 */ .card.autocomplete-active { overflow: visible !important; position: relative; z-index: 100 !important; } .card.autocomplete-active .card-body { overflow: visible !important; } /* ======================================== 주문 목록 상세보기 스타일 (전역) ======================================== */ /* 완료정보 및 액션 섹션 */ .photo-review-section, .action-section-set { height: 100%; } .photo-review-section .section-title, .action-section-set .section-title { font-size: 0.9rem; font-weight: 600; color: #495057; padding-bottom: 0.5rem; margin-bottom: 1rem; } /* 설치사진 이미지 스타일 */ .install-photo-img { width: 50px; height: 50px; background-size: contain; background-position: center center; background-repeat: no-repeat; cursor: pointer; display: inline-block; flex-shrink: 0; border-radius: 0.25rem; } .JS-installPhotoImg { width: 50px !important; height: 50px !important; object-fit: contain !important; cursor: pointer; display: inline-block; flex-shrink: 0; border-radius: 0.25rem; } .photo-placeholder-small { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100px !important; height: 100px !important; background-color: #f8f9fa !important; border: 1px dashed #dee2e6 !important; border-radius: 4px !important; padding: 0.75rem !important; margin-bottom: 1rem !important; } .photo-placeholder-icon { font-size: 2rem !important; color: #adb5bd !important; } /* 리뷰 점수 표시 */ .review-score-display { text-align: center !important; } .star-rating { display: flex !important; justify-content: center !important; gap: 4px !important; } .star-rating i { font-size: 1rem !important; margin: 0 !important; } /* 스토어 정보 + 액션 버튼 통합 카드 스타일 */ .store-action-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid #e9ecef; border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; } .store-action-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #198d5e 0%, #157a50 100%); transition: width 0.3s ease; } .store-action-card-primary::before { background: linear-gradient(180deg, #007bff 0%, #0056b3 100%); } .store-action-card-success::before { background: linear-gradient(180deg, #198d5e 0%, #157a50 100%); } .store-action-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); border-color: #198d5e; } .store-action-card-primary:hover { border-color: #007bff; } .store-action-card-success:hover { border-color: #198d5e; } .store-action-card:hover::before { width: 6px; } .store-action-header { padding: 1rem; padding-bottom: 0.75rem; } .store-action-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, #e9ecef 20%, #e9ecef 80%, transparent 100%); margin: 0 1rem; position: relative; } .store-action-divider::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 1px; background: #198d5e; } .store-action-card-primary .store-action-divider::before { background: #007bff; } .store-action-buttons { padding: 0.75rem 1rem 1rem 1rem; display: flex; flex-direction: column; } .store-action-buttons .btn { transition: all 0.2s ease; } .store-action-buttons .btn:hover { transform: translateX(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .store-info-header { display: flex; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e9ecef; } .store-info-icon { font-size: 1rem; color: #198d5e; margin-right: 0.5rem; width: 20px; text-align: center; } .store-info-icon-group { display: inline-flex; align-items: center; gap: 2px; margin-right: 0.5rem; font-size: 0.875rem; color: #198d5e; } .store-info-icon-group i { font-size: 0.875rem; line-height: 1; } .store-action-card-primary .store-info-icon-group { color: #007bff; } .store-action-card-success .store-info-icon-group { color: #198d5e; } .store-info-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; } .store-info-body { display: flex; flex-direction: column; gap: 0.5rem; } .store-info-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem; } .store-info-region { display: inline-block; padding: 0.125rem 0.5rem; background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; color: #495057; border: 1px solid #ced4da; } .store-info-name-text { font-size: 0.95rem; font-weight: 700; color: #212529; line-height: 1.4; } .store-info-contact { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #495057; } .store-info-contact-icon { color: #6c757d; font-size: 0.875rem; } .store-info-contact-text { color: #212529; font-weight: 500; } /* 테이블 관련 재선언 */ .table tbody + tbody {border-top: 1px solid #dee2e6;} .table.table-striped:has(.JS-row) tbody tr {background-color: transparent !important;} .table.table-striped:has(.JS-row) tbody:nth-of-type(odd) {background-color: rgba(245, 245, 245, 0.5);} .table td, .table th {vertical-align: middle;} /* ======================================== 커스텀 팝업 다이얼로그 스타일 ======================================== */ .custom-popup-dialog { border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important; overflow: hidden !important; border: none !important; } .custom-popup-dialog .ui-dialog-titlebar { background: #2d8659 !important; border: none !important; border-bottom: 1px solid #2d8659 !important; border-radius: 0 !important; padding: 0.5rem !important; color: #ffffff !important; } .custom-popup-dialog .ui-dialog-title { font-size: 17px !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: -0.02em !important; line-height: 2.5rem !important;} .custom-popup-dialog .ui-dialog-titlebar-close { background: transparent !important; border: none !important; border-radius: 6px !important; width: 32px !important; height: 32px !important; top: 50% !important; transform: translateY(-50%) !important; right: 20px !important; margin: 0 !important; transition: all 0.2s ease !important; opacity: 0.7 !important; } .custom-popup-dialog .ui-dialog-titlebar-close:hover { background: rgba(255, 255, 255, 0.1) !important; transform: translateY(-50%) !important; opacity: 1 !important; } .custom-popup-dialog .ui-dialog-titlebar-close .ui-icon { background: none !important; text-indent: 0 !important; color: #ffffff !important; font-size: 20px !important; line-height: 32px !important; } .custom-popup-dialog .ui-dialog-titlebar-close .ui-icon:before { content: "×" !important; display: block !important; font-size: 26px !important; font-weight: 300 !important; } .custom-popup-dialog .ui-dialog-content { padding: 24px !important; background: #ffffff !important; overflow-y: auto !important; min-width: 500px !important; min-height: 400px !important; word-break: break-word !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } .custom-popup-dialog .ui-dialog-buttonpane { background: #ffffff !important; border-top: 1px solid #e5e7eb !important; padding: 12px 20px !important; margin: 0 !important; } .custom-popup-dialog .ui-dialog-buttonset { display: flex !important; gap: 8px !important; width: 100% !important; flex-wrap: wrap !important; justify-content: flex-end !important; } .custom-popup-dialog .ui-dialog-buttonset button { flex: 0 0 auto !important; min-width: 80px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 6px !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; white-space: nowrap !important; } .custom-popup-dialog .ui-dialog-buttonset button.btn-outline-secondary { background: #ffffff !important; color: #5a5e62 !important; border: 1.5px solid #b8bec5 !important; } .custom-popup-dialog .ui-dialog-buttonset button.btn-outline-secondary:hover { background: var(--pastel-secondary) !important; border-color: #9fa5ac !important; color: #3e4145 !important; } .custom-popup-dialog .ui-dialog-buttonset button.btn-secondary { background: var(--pastel-secondary) !important; color: #5a5e62 !important; border: 1.5px solid #b8bec5 !important; } .custom-popup-dialog .ui-dialog-buttonset button.btn-secondary:hover { background: #b8bec5 !important; border-color: #9fa5ac !important; color: #3e4145 !important; } .custom-popup-dialog .ui-dialog-buttonset button.btn-primary { background: var(--pastel-primary) !important; color: #2c5aa0 !important; font-weight: 500 !important; border: 1.5px solid #7ab8ff !important; } .custom-popup-dialog .ui-dialog-buttonset button.btn-primary:hover { background: #8cc4ff !important; border-color: #5ca3ff !important; color: #1a3a6e !important; } @media (max-width: 768px) { .custom-popup-dialog { max-width: calc(100% - 32px) !important; margin: 16px !important; } .custom-popup-dialog .ui-dialog-content { min-width: auto !important; padding: 1.5rem !important; } .custom-popup-dialog .ui-dialog-buttonpane { padding: 1rem !important; } .custom-popup-dialog .ui-dialog-buttonset { flex-direction: column !important; } .custom-popup-dialog .ui-dialog-buttonset button { width: 100% !important; min-width: auto !important; } } /* ======================================== 업체정보 버튼 스타일 (공통) ======================================== */ .JS-flCopMngtInfoBtn, .JS-flCopInfoBtn { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; color: #6c757d !important; text-decoration: none !important; font-weight: 500; transition: all 0.2s ease; padding-left: 1.125rem; } .JS-flCopMngtInfoBtn::before, .JS-flCopInfoBtn::before { content: ''; display: inline-block; width: 0.875rem; height: 0.875rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%232d8659' d='M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all 0.2s ease; } .JS-flCopMngtInfoBtn:hover, .JS-flCopInfoBtn:hover { color: #5a6268 !important; text-decoration: underline !important; } .JS-flCopMngtInfoBtn:hover::before, .JS-flCopInfoBtn:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231f5f3f' d='M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z'/%3E%3C/svg%3E"); transform: translateY(-50%) scale(1.1); } /* 양쪽 정렬 지원 */ .JS-flCopMngtInfoBtn.justify-between, .JS-flCopInfoBtn.justify-between { justify-content: space-between; padding-left: 0; padding-right: 1.125rem; } .JS-flCopMngtInfoBtn.justify-between::before, .JS-flCopInfoBtn.justify-between::before { left: auto; right: 0; } .JS-flCopMngtInfoBtn.text-center, .JS-flCopInfoBtn.text-center { justify-content: center; padding-left: 0; padding-right: 0; } .JS-flCopMngtInfoBtn.text-center::before, .JS-flCopInfoBtn.text-center::before { position: relative; left: auto; right: auto; transform: none; margin-right: 0.375rem; } /* ======================================== 자산 로그 버튼 스타일 (공통) ======================================== */ .JS-cmnAssetLogListBtn { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; color: #6c757d !important; text-decoration: none !important; font-weight: 500; transition: all 0.2s ease; padding-left: 1.125rem; } .JS-cmnAssetLogListBtn::before { content: ''; display: inline-block; width: 0.875rem; height: 0.875rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2317a2b8' d='M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: all 0.2s ease; } .JS-cmnAssetLogListBtn:hover { color: #5a6268 !important; text-decoration: underline !important; } .JS-cmnAssetLogListBtn:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23117a8b' d='M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z'/%3E%3C/svg%3E"); transform: translateY(-50%) scale(1.1); } /* 캐시 구분선 스타일 */ .cash-divider { color: #ffd700; } /* 진행현황 스타일 */ .progress-status-container{border: 1px solid #ced4da;border-radius: 0.25rem;overflow: hidden;} .progress-status-label{background-color: #f8f9fa;border-right: 1px solid #ced4da;font-size: 0.875rem;font-weight: 500;padding-left: 0.75rem;padding-right: 0.75rem;} .progress-status-content{background-color: #fff;} .progress-status-content .list-inline{width: 100%;} .progress-status-content .list-inline-item{display: flex;justify-content: center;} .progress-status-content .list-inline-item:not(:has(.progress-status-arrow)){flex: 1;} .progress-status-content .list-inline-item:has(.progress-status-arrow){flex: 0 0 auto;} .progress-status-content .list-inline-item.active .progress-status-badge{background-color: #f1f8e9 !important;color: #33691e !important;border-color: rgba(0,0,0,0.1) !important;} .progress-status-content .list-inline-item.active .progress-status-badge-label{font-weight: 500;color: #33691e !important;} .progress-status-content .list-inline-item.active .progress-status-badge-date{color: #6c757d !important;} .progress-status-content .list-inline-item:not(.active) .progress-status-badge{background-color: #f5f5f5 !important;color: #adb5bd !important;opacity: 0.8;} .progress-status-content .list-inline-item:not(.active) .progress-status-badge-date{color: #ced4da !important;} .progress-status-badge{font-size: 0.875rem;min-width: 80px;border: 1px solid rgba(0,0,0,0.1);cursor: default;transition: all 0.2s ease;text-decoration: none !important;display: inline-flex;} .progress-status-badge:hover{opacity: 0.9;text-decoration: none !important;} .progress-status-badge:focus{outline: none;text-decoration: none !important;} .progress-status-badge[data-title-body-url]{cursor: pointer;} .progress-status-badge[data-title-body-url]:hover{cursor: pointer;} .progress-status-badge.shuvic-tooltip-parent{cursor: pointer;} .progress-status-badge-label{font-weight: 500;} .progress-status-badge-date{font-size: 0.7rem;color: #6c757d;margin-top: 0.25rem;} .progress-status-arrow{font-size: 0.875rem;} .progress-status-badge.badge-success{background-color: #f1f8e9 !important;color: #33691e !important;} .progress-status-badge.badge-secondary{background-color: #f5f5f5 !important;color: #adb5bd !important;opacity: 0.8;} .progress-status-badge.badge-secondary .progress-status-badge-date{color: #ced4da !important;} /* ======================================== 날짜 표시 공통 스타일 ======================================== */ .common-date { position: relative; display: inline-block; padding-right: 15px; } /* ======================================== 금일 등록 NEW 뱃지 (공통) ======================================== */ .common-date-new::before { content: '●'; position: absolute; top: 50%; right: 0; color: #dc3545; font-size: 0.65rem; line-height: 1; transform: translateY(-50%); }