.main-container { max-width: 100%; padding: 0 8px; margin:0 auto;} ul.pagination { background: #fff; border-radius: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 0.5rem 1.5rem; display: inline-flex; align-items: center; gap: 0.25rem; } ul.pagination .page-link { border: none; background: transparent; color: #007bff; font-weight: 500; border-radius: 50%; width: 38px; height: 38px; line-height: 38px; text-align: center; transition: background 0.15s, color 0.15s; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } ul.pagination .page-link i { font-size: 1.1em; vertical-align: middle; } ul.pagination .page-item.active .page-link, ul.pagination .page-link:hover, ul.pagination .page-item .page-link:focus { background: #007bff; color: #fff !important; box-shadow: 0 2px 8px rgba(0,123,255,0.08); } ul.pagination .page-item.disabled .page-link { color: #ccc !important; background: transparent !important; cursor: not-allowed; box-shadow: none; } /* QHD 이상 (1920~2559px) */ @media (min-width: 1920px) and (max-width: 2559px) { .main-container { max-width: 1600px; zoom:0.85;} .card-body { padding: 0.75rem 1rem; /* 줄이기 */ } .card-title { font-size: 1.25rem !important; /* h2 → 줄임 */ } .card-subtitle { font-size: 0.85rem;} .main-content {max-width:1700px;} .table > thead > tr > th {font-size:0.85rem !important;} .table > tbody > tr > td {font-size:0.85rem !important;} .btn, .nav-link, label, input, option, select, textarea, span {font-size:0.85rem !important;} ul.pagination{ padding:0.25rem 0.7rem;} ul.pagination .page-link { width:25px; height:25px;} } /* 4K 이상 (2560px 이상) */ @media (min-width: 2560px) { .main-container { max-width: 1850px;} .main-content {max-width:2050px;} } #imgModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; } .autocomplete-items { border: 1px solid #d4d4d4; border-top: none; max-height: 200px; overflow-y: auto; position: absolute; background: #fff; z-index: 1000; width: 100%; display: none; } .autocomplete-item { padding: 8px 12px; cursor: pointer; } .autocomplete-item:hover { background-color: #e9e9e9; } #autocomplete-list { position: absolute; width: inherit; } .event-card:hover { box-shadow: 0 0 0 0.2rem rgba(0,123,255,.15), 0 4px 16px rgba(0,0,0,0.10); background: #f8f9fa; filter: brightness(1.03); } .event-card.selected { border-color: #0d6efd !important; background: #e7f1ff !important; box-shadow: 0 0 0 0.2rem rgba(13,110,253,.15), 0 4px 16px rgba(0,0,0,0.10); } .company-list .list-group-item { border: none; border-radius: 12px; margin-bottom: 6px; background: none; transition: box-shadow 0.2s, background 0.2s; box-shadow: none; display: flex; align-items: center; padding: 0.6em 0.7em; } .company-list .list-group-item:hover, .company-list .list-group-item:focus-within { background: #f3f8fd; box-shadow: 0 2px 8px rgba(0,123,255,0.06); } .company-list .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } .company-list .form-check-input { width: 1.1em; height: 1.1em; margin-right: 1em; } .company-list .company-name { flex: 1 1 0; font-weight: 600; font-size: 1em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .company-list .company-distance { flex: 0 0 70px; text-align: center; color: #555; font-size: 0.96em; } .company-list .company-rating { text-align: right; color: #f5b301; font-size: 0.96em; font-family: 'Pretendard', 'Apple SD Gothic Neo', Arial, sans-serif; flex : 0 0 120px; } .list-group-header { width:100%;display: flex; align-items: center; padding: 0.6em 0.7em 0.6em 2.1em; font-size: 0.97em; color: #aaa; font-weight: 500; border-bottom: 1px solid #eee; background: none; margin-bottom: 2px; } .list-group-header .header-name { flex: 1 1 0; min-width: 0; text-align: left; } .list-group-header .header-distance { flex: 0 0 100px; text-align: center; } .list-group-header .header-rating { flex: 0 0 100px; text-align: right; } .list-group-header .header-ontime { flex: 0 0 100px; text-align: right; } .list-group-header .header-favorite { flex: 0 0 100px; text-align: right; } body { background: #f8fafc; } .modern-card { background: #fff; border-radius: 1.25rem; box-shadow: 0 4px 24px rgba(0,0,0,0.08); padding: 2.5rem 2rem 2rem 2rem; max-width: 900px; margin: 2rem auto; } .modern-title { font-size: 2rem; font-weight: 700; color: #2d3748; margin-bottom: 1.5rem; letter-spacing: -1px; } .modern-section-title { font-size: 1.1rem; font-weight: 600; color: #4a5568; margin-bottom: 0.5rem; } .modern-btn { border-radius: 2rem; font-weight: 600; padding: 0.6rem 2.5rem; font-size: 1.1rem; } .modern-input:focus { border-color: #38a169; box-shadow: 0 0 0 0.2rem rgba(56,161,105,.15); } .modern-divider { border-top: 1px solid #e2e8f0; margin: 2rem 0 1.5rem 0; } .modern-label { font-weight: 500; color: #2d3748; } .modern-required { color: #e53e3e; font-size: 0.95em; margin-left: 2px; } .modern-file-area { background: #f1f5f9; border-radius: 0.5rem; padding: 1rem; margin-top: 0.5rem; } .modern-success { color: #38a169; } .modern-danger { color: #e53e3e; } .modern-input { border-radius: 0.5rem; padding: 0.75rem; border: 1px solid #e2e8f0; transition: border-color 0.3s; } .modern-input:hover { border-color: #38a169; } .modern-btn:hover { background-color: #38a169; color: #fff; } .badge{ color: #fff; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600; } label.required::after { content: " *"; color: red; font-weight: bold; font-size: 1.2rem; vertical-align:middle; } input.is-invalid { border-color: #dc3545; } input.is-valid { border-color: #38a169; } /* loginForm.jsp 에서 사용하는 커스텀 스타일 */ html, body { height: 100%; margin: 0; background-color: #f5f7fa; } .login-container { height: 100%; display: flex; justify-content: center; align-items: center; } .login-box { background-color: white; border: 1px solid #dee2e6; border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 400px; } .login-box h2 { font-weight: bold; margin-bottom: 2rem; text-align: center; color: #212529; } .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .brand-icon { font-size: 2rem; color: #0d6efd; } .brand-title { font-size: 1.25rem; font-weight: bold; color: #0d6efd; } .btn-signup { background-color: #6c757d; color: white; } .btn-signup:hover { background-color: #5c636a; } /* layout.jsp 에서 사용하는 커스텀 스타일 */ .sticky-top .nav-link.active { color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important; font-weight: bold; } .hasDatepicker{ background-color: #f8f9fa !important; padding : 0 !important; } .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight { border: 2px solid red; background: #fffa90; } .ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,html .ui-button.ui-state-disabled:hover,html .ui-button.ui-state-disabled:active {/* border: 1px solid #c5c5c5 !important; */ background: #f6f6f6 !important; font-weight: normal !important; } .mtz-monthpicker-month.ui-state-active { background: #007bff !important; color: #fff !important; font-weight: bold; } .ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close { background: inherit !important; } .ui-state-highlight-holiday { background: #ffebee !important; color: #d32f2f !important; font-weight: bold; } .ui-state-highlight-holiday > a{ color: #d32f2f !important; } .ui-state-highlight { border: 2px solid #1976d2 !important; } .menu-disabled{ pointer-events: none; opacity: 0.5; } .order-card { margin-bottom: 20px; border-left: 4px solid #0d6efd; } .cancle-order-card { margin-bottom: 20px; border-left: 4px solid #d32f2f; } .addn-order-card { margin-bottom: 20px; border-left: 4px solid #ffa000; } .modify-order-card { margin-bottom: 20px; border-left: 4px solid #ffc107; } .order-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); cursor: pointer; } .order-badge { position: absolute; top: 10px; right: 10px; } .order-count-badge { font-size: 0.9rem; margin-left: 5px; } .review-preset-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; text-align: left; } .review-preset-item { display: flex; align-items: center; padding: 0.7rem 1rem; border-radius: 1.5rem; border: 1.5px solid #e0e0e0; background: #fafbfc; font-size: 1.05rem; cursor: pointer; transition: background 0.2s, border 0.2s; user-select: none; } .review-preset-item:hover { background: #f0f4ff; border-color: #b6d0ff; } .review-preset-item input[type="checkbox"] { margin-right: 0.7em; accent-color: #1976d2; width: 1.1em; height: 1.1em; } .review-preset-item input[type="checkbox"]:checked + span, .review-preset-item input[type="checkbox"]:checked { font-weight: 600; color: #1976d2; } .review-preset-item input[type="checkbox"]:checked ~ * { color: #1976d2; } .review-preset-item input[type="checkbox"]:checked { outline: 2px solid #1976d2; } /* index.jsp 에서 사용하는 커스텀 스타일 */ .highlight { background-color: #f8f9fa; } .urgent { color: #dc3545; font-weight: bold; } .nav-pills .nav-link.active { background-color: #0d6efd; color: white; } .toast-body { min-width: 280px; padding-bottom: 0; min-height: 85px; } .toast-hide-area { width: 100%; background: #f0f4ff; border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; padding: 0.5rem 1rem 0.5rem 0.5rem; text-align: right; z-index: 2; margin-top: 0; } .info-box { background: #f8f9fa; border-radius: 0.5rem; padding: 0.5rem 1rem; display: flex; align-items: center; min-height: 40px; margin-bottom: 0.5rem; } .info-box i { font-size: 1.2rem; margin-right: 0.5rem; } .info-box .label { font-weight: 600; margin-right: 0.5rem; } .image-container img { transition: transform 0.2s; } .image-container img:hover { transform: scale(1.05); } .btn-teal { color: #fff; /* 검정 */ background-color: #d648b3; border-color: #d648b3;} .upload-modal-content{ border-radius: 1.2rem; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 0.8rem 0.8rem 0.6rem 0.6rem; background: #fff;} .upload-modal-header{ border-bottom: 1px solid #f0f0f0 !important; padding-bottom: 0.4rem !important; margin-bottom: 1.6rem !important;} .upload-modal-title{font-weight: 700; font-size: 1.2rem; color: #222;} .upload-modal-content .form-label{font-weight:600; color:#1976d2} .upload-box { border: 1.5px dashed #b6d0ff; border-radius: 0.8rem; background: #f8faff; padding: 1.2rem 1rem; text-align: center; margin-bottom: 1rem; } .upload-empty-state i { color: #90caf9; font-size: 2.2rem; } .upload-guide { color: #888; font-size: 0.97rem; } .upload-modal-content ul.file-list { list-style: none; padding: 0; margin: 0; text-align: left; } li.file-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 0.5rem; background: #f8f9fa; margin-bottom: 0.4rem; font-size: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } .upload-modal-content .file-icon { color: #1976d2; font-size: 1.2em; margin-right: 0.5rem; } .upload-modal-content .file-name { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upload-modal-content .file-size { color: #888; font-size: 0.97em; margin-left: 0.5rem; } .upload-modal-content .file-delete { color: #e53e3e; cursor: pointer; font-size: 1.1em; margin-left: 0.7rem; transition: color 0.2s; } .upload-modal-content .file-delete:hover { color: #b71c1c; } .upload-modal-content .upload-box.empty { border: 1px dashed #ddd; background-color: #fafafa; text-align: center; padding: 30px 15px; cursor: pointer; } .upload-modal-content .upload-box.empty:hover { background-color: #f5f5f5; } .company-pagination a {cursor: pointer;} .note-editor .dropdown-toggle::after { display: none !important;} .info-section { border-left: 4px solid; padding: 15px; margin-bottom: 25px; background-color: #f8f9fa; border-radius: 0 5px 5px 0;} .info-section.business { border-color: #dc3545;} .info-section.account { border-color: #0d6efd; } .info-section.contact { border-color: #198754; } .info-section.manager { border-color: #6f42c1; } .info-section.operation { border-color: #fd7e14; } .info-section.delivery { border-color: #20c997; } .section-title { font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #dee2e6; } .business-title { color: #dc3545 } .account-title { color: #0d6efd; } .contact-title { color: #198754; } .manager-title { color: #6f42c1; } .operation-title { color: #fd7e14; } .delivery-title { color: #20c997; } .tag-item { background-color: #e9f5ff; color: #007bff; border: 1px solid #cce5ff; padding: 5px 10px; border-radius: 20px; font-size: 14px; display: flex; align-items: center; } .tag-item .remove-tag { margin-left: 8px; cursor: pointer; font-weight: bold; } .table tbody tr td { padding-top: 1.2rem; padding-bottom: 1.2rem; } .table > thead > tr > th { padding-top: 1.2rem; padding-bottom: 1.2rem; white-space: nowrap; max-width: none; text-align: center; vertical-align: middle;} .product-image {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;} .image-dim {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1;} .checkmark-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 36px; z-index: 2; } #userDetailModal .form-control, #userDetailModal .form-select { border-radius: 8px;border: 1px solid #dee2e6;padding: 12px 16px;font-size: 14px;transition: all 0.2s ease;} .left-column, .right-column { height: 650px; overflow-y: auto; padding-right: 15px; } .left-column::-webkit-scrollbar { width: 6px; } .left-column::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .left-column::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .left-column::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } .ellipsis { max-width: 19em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }