diff --git a/WebContent/css/basic_new.css b/WebContent/css/basic_new.css index 55bcd0c..7d40282 100644 --- a/WebContent/css/basic_new.css +++ b/WebContent/css/basic_new.css @@ -2,24 +2,26 @@ /* 깔끔하고 전문적인 업무용 시스템 디자인 */ :root { - --primary-color: #3b82f6; - --primary-hover: #2563eb; - --primary-light: #dbeafe; - --secondary-color: #64748b; - --success-color: #10b981; - --danger-color: #ef4444; - --warning-color: #f59e0b; - --background: #f8fafc; + --primary-color: #1a73e8; + --primary-hover: #1557b0; + --primary-light: #d2e3fc; + --secondary-color: #5f6368; + --success-color: #34a853; + --danger-color: #ea4335; + --warning-color: #fbbc04; + --background: #f5f5f5; --surface: #ffffff; - --border-color: #e2e8f0; - --text-primary: #1e293b; - --text-secondary: #64748b; - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --radius-sm: 6px; + --border-color: #dadce0; + --text-primary: #202124; + --text-secondary: #5f6368; + --label-bg: #f8f9fa; + --input-bg: #f8f9fa; + --shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.3); + --shadow-md: 0 1px 3px 0 rgba(60, 64, 67, 0.3); + --shadow-lg: 0 2px 6px 2px rgba(60, 64, 67, 0.15); + --radius-sm: 4px; --radius-md: 8px; - --radius-lg: 12px; + --radius-lg: 8px; } /* 기본 바디 스타일 - 깔끔한 배경 */ @@ -52,8 +54,8 @@ section, aside { border-radius: var(--radius-lg); margin: 0 auto 20px; padding: 0; - box-shadow: var(--shadow-sm); - max-width: 1200px; + box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15); + max-width: 1400px; animation: fadeIn 0.3s ease-out; } @@ -70,7 +72,7 @@ section, aside { cursor: pointer; } -/* 페이지 제목 스타일 - 파란 배경 (모든 방식으로 최우선 적용) */ +/* 페이지 제목 스타일 - 진한 파란 배경 (모든 방식으로 최우선 적용) */ html body section .plm_menu_name h2, html body .plm_menu_name h2, body section .plm_menu_name h2, @@ -79,24 +81,44 @@ section .plm_menu_name h2, div.plm_menu_name h2, .plm_menu_name > h2, .plm_menu_name h2 { - background: #3b82f6 !important; - background-color: #3b82f6 !important; - background-image: linear-gradient(135deg, #4285f4 0%, #3b82f6 100%) !important; + background: #1a73e8 !important; + background-color: #1a73e8 !important; + background-image: none !important; color: #ffffff !important; - padding: 16px 24px !important; + padding: 10px 16px !important; margin: 0 !important; - font-size: 16px !important; - font-weight: 600 !important; + font-size: 14px !important; + font-weight: 500 !important; border: none !important; border-bottom: none !important; border-top: none !important; border-left: none !important; border-right: none !important; - border-radius: 12px 12px 0 0 !important; + border-radius: 8px 8px 0 0 !important; display: flex !important; align-items: center !important; + justify-content: space-between !important; position: relative !important; - box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important; + box-shadow: none !important; +} + +/* 헤더 옵션 버튼 */ +.plm_menu_name .option-btn { + background: rgba(255, 255, 255, 0.2); + color: white; + border: 1px solid rgba(255, 255, 255, 0.3); + padding: 6px 16px; + border-radius: 6px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + backdrop-filter: blur(10px); +} + +.plm_menu_name .option-btn:hover { + background: rgba(255, 255, 255, 0.3); + border-color: rgba(255, 255, 255, 0.5); } html body section .plm_menu_name h2 span, @@ -121,11 +143,11 @@ div.plm_menu_name h2 span, #businessPopupFormWrap h4 { background: white; color: var(--text-primary); - padding: 8px 16px; - margin: 0 0 8px 0; + padding: 6px 12px; + margin: 0; font-size: 13px; - font-weight: 600; - border-bottom: 1px solid #e2e8f0; + font-weight: 500; + border-bottom: 1px solid var(--border-color); border-left: none; display: flex; align-items: center; @@ -140,7 +162,7 @@ div.plm_menu_name h2 span, } #businessPopupFormWrap h4 span::before { - content: '📎'; + content: '📋'; font-size: 14px; flex-shrink: 0; } @@ -213,11 +235,11 @@ div.plm_menu_name h2 span, #EntirePopupFormWrap .form_popup_title { background: white; color: var(--text-primary); - padding: 8px 28px; + padding: 4px 14px; margin: 0; - font-size: 15px; - font-weight: 600; - border-bottom: 2px solid #e2e8f0; + font-size: 13px; + font-weight: 500; + border-bottom: 1px solid var(--border-color); border-left: none; display: flex; align-items: center; @@ -227,13 +249,13 @@ div.plm_menu_name h2 span, #EntirePopupFormWrap .form_popup_title span { display: flex; align-items: center; - gap: 8px; + gap: 6px; flex: 1; } #EntirePopupFormWrap .form_popup_title span::before { content: '📋'; - font-size: 18px; + font-size: 14px; flex-shrink: 0; } @@ -259,8 +281,8 @@ div.plm_menu_name h2 span, .pmsPopupForm td, .pmsPopuptable td { height: auto; - font-size: 11px; - padding: 6px 12px; /* 8px에서 6px로 더욱 압축 */ + font-size: 12px; + padding: 3px 10px; border-bottom: 1px solid var(--border-color); vertical-align: middle; } @@ -272,21 +294,54 @@ div.plm_menu_name h2 span, /* 라벨 셀 스타일 - 심플하고 읽기 쉽게 */ .input_title { - background: #f8fafc; + background: var(--label-bg); color: var(--text-primary); border-right: 1px solid var(--border-color); - font-weight: 600; + font-weight: 500; position: relative; - padding: 20px 24px; + padding: 4px 10px; vertical-align: middle !important; + width: 140px; + white-space: nowrap; } .input_title label { color: var(--text-primary); - font-weight: 600; + font-weight: 500; + font-size: 12px; + display: flex; + align-items: center; + text-align: left; +} + +/* 필수 항목 표시 */ +.input_title label::after { + content: ''; + display: none; +} + +.input_title.required label::after { + content: '*'; + color: var(--danger-color); + margin-left: 4px; + font-weight: 700; + display: inline; +} + +/* 서브 타이틀 (세로 섹션 제목) */ +.sub_title { + background: linear-gradient(135deg, #4285f4 0%, #3b82f6 100%); + color: white; + font-weight: 700; font-size: 14px; - display: block; - text-align: center; + text-align: center; + vertical-align: middle; + padding: 20px 16px; + border-right: 1px solid var(--border-color); + writing-mode: vertical-rl; + text-orientation: mixed; + letter-spacing: 2px; + min-width: 50px; } /* 테이블 셀 세로 정렬 강제 적용 */ @@ -310,9 +365,10 @@ div.plm_menu_name h2 span, .input_sub_title { background: var(--surface); - color: var(--text-secondary); - font-weight: 500; - font-size: 13px; + color: var(--text-primary); + font-weight: 400; + font-size: 12px; + padding: 3px 10px; } .input_title_b { @@ -323,7 +379,7 @@ div.plm_menu_name h2 span, padding: 20px 24px; } -/* 입력 필드 스타일 - 최소 크기로 압축 (16px) */ +/* 입력 필드 스타일 - 컴팩트 크기 (22px = 32px의 70%) - 어두운 배경 */ .pmsPopupForm input[type="text"], .pmsPopupForm input[type="number"], .pmsPopupForm select, @@ -331,17 +387,18 @@ div.plm_menu_name h2 span, .pmsPopuptable input[type="number"], .pmsPopuptable select { width: 100%; - height: 16px !important; /* 20px에서 16px로 축소 */ - line-height: 14px !important; /* 텍스트 세로 정렬 */ + height: 22px !important; + line-height: 20px !important; border: 1px solid var(--border-color); - border-radius: 4px; - padding: 0 6px !important; - font-size: 11px !important; + border-radius: var(--radius-sm); + padding: 0 8px !important; + font-size: 12px !important; color: var(--text-primary); - background: var(--surface); - transition: all 0.2s ease; + background: var(--input-bg); + transition: all 0.15s ease; font-family: inherit; vertical-align: middle; + box-sizing: border-box; } /* 셀렉트 박스 전용 스타일 */ @@ -364,8 +421,7 @@ div.plm_menu_name h2 span, .pmsPopuptable input[type="text"]:hover, .pmsPopuptable input[type="number"]:hover, .pmsPopuptable select:hover { - border-color: var(--secondary-color); - box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.05); + border-color: #80868b; } .pmsPopupForm input[type="text"]:focus, @@ -376,8 +432,8 @@ div.plm_menu_name h2 span, .pmsPopuptable select:focus { border-color: var(--primary-color); outline: none; - box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); - background: var(--surface); + box-shadow: 0 0 0 1px var(--primary-color); + background: #ffffff; } .pmsPopupForm input[type="text"]:disabled, @@ -397,13 +453,13 @@ div.plm_menu_name h2 span, width: 100%; min-height: 60px; border: 1px solid var(--border-color); - border-radius: 4px; - padding: 8px; - font-size: 11px; + border-radius: var(--radius-sm); + padding: 8px 10px; + font-size: 12px; color: var(--text-primary); - background: var(--surface); + background: var(--input-bg); resize: vertical; - transition: all 0.2s ease; + transition: all 0.15s ease; font-family: inherit; line-height: 1.5; } @@ -431,58 +487,108 @@ div.plm_menu_name h2 span, margin: 0 4px 0 0; } +/* 라디오 버튼 스타일 */ +.pmsPopupForm input[type="radio"], +.pmsPopuptable input[type="radio"] { + width: 18px; + height: 18px; + accent-color: var(--primary-color); + cursor: pointer; + margin: 0 6px 0 0; + vertical-align: middle; +} + +.pmsPopupForm input[type="radio"] + label, +.pmsPopuptable input[type="radio"] + label { + font-size: 13px; + font-weight: 500; + color: var(--text-primary); + cursor: pointer; + margin-right: 16px; + vertical-align: middle; +} + /* 버튼 래퍼 */ .btn_wrap { margin: 0; - padding: 24px 32px; + padding: 16px 24px; border-top: 1px solid var(--border-color); - background: #fafbfc; + background: #f8fafc; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .plm_btn_wrap_center { display: flex; justify-content: center; - gap: 12px; + gap: 8px; + flex-wrap: wrap; } /* 버튼 스타일 - 깔끔하고 명확하게 */ .plm_btns { - height: 42px; - border-radius: var(--radius-md); + height: 28px; + border-radius: var(--radius-sm); background: var(--primary-color); color: white; cursor: pointer; - font-size: 14px; + font-size: 13px; border: none; - padding: 0 24px; - font-weight: 600; - transition: all 0.2s ease; - box-shadow: var(--shadow-sm); + padding: 0 16px; + font-weight: 500; + transition: background 0.15s ease; + box-shadow: none; display: inline-flex; align-items: center; justify-content: center; - gap: 6px; - margin: 0; + gap: 4px; + margin: 0 4px; float: none; } .plm_btns:hover { background: var(--primary-hover); - box-shadow: var(--shadow-md); - transform: translateY(-1px); } .plm_btns:active { - transform: translateY(0); - box-shadow: var(--shadow-sm); + background: #1346af; +} + +/* 세컨더리 버튼 (복사, 다시작성 등) */ +.plm_btns.secondary { + background: white; + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.plm_btns.secondary:hover { + background: var(--label-bg); +} + +/* 위험 버튼 (사용중단 등) */ +.plm_btns.danger { + background: var(--danger-color); + border: none; +} + +.plm_btns.danger:hover { + background: #d33426; +} + +/* 성공 버튼 (재사용 등) */ +.plm_btns.success { + background: var(--success-color); + border: none; +} + +.plm_btns.success:hover { + background: #2d8f47; } /* 닫기 버튼은 세컨더리 스타일 */ #btn_close { background: white; color: var(--text-primary); - border: 1.5px solid var(--border-color); + border: 1px solid var(--border-color); } #btn_close:hover { @@ -615,49 +721,48 @@ div.plm_menu_name h2 span, background: var(--text-primary); } -/* Select2 스타일 조정 - 16px로 통일 */ +/* Select2 스타일 조정 - 22px로 통일 (70%) */ .select2-container--default .select2-selection--single { border: 1px solid var(--border-color) !important; - border-radius: 4px !important; - height: 16px !important; /* 입력 필드와 동일하게 16px */ + border-radius: var(--radius-sm) !important; + height: 22px !important; display: flex !important; align-items: center !important; - background: var(--surface); - transition: all 0.2s ease; + background: var(--input-bg) !important; + transition: border-color 0.15s ease; } .select2-container--default .select2-selection--single:hover { - border-color: var(--secondary-color) !important; - box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.05); + border-color: #80868b !important; } .select2-container--default .select2-selection--single:focus, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--primary-color) !important; - box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important; + box-shadow: 0 0 0 1px var(--primary-color) !important; outline: none !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { - line-height: 14px !important; /* 텍스트 세로 정렬 */ - padding-left: 6px !important; + line-height: 20px !important; + padding-left: 8px !important; padding-right: 22px !important; color: var(--text-primary) !important; - font-size: 11px !important; + font-size: 12px !important; } .select2-container--default .select2-selection--single .select2-selection__placeholder { - color: var(--text-secondary) !important; + color: #80868b !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { - height: 14px !important; + height: 20px !important; right: 4px !important; top: 1px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { - border-color: var(--text-secondary) transparent transparent transparent !important; + border-color: #5f6368 transparent transparent transparent !important; border-width: 3px 3px 0 3px !important; margin-left: -3px !important; margin-top: -1px !important; @@ -665,30 +770,31 @@ div.plm_menu_name h2 span, /* Select2 드롭다운 스타일 */ .select2-container--default .select2-results__option { - padding: 4px 6px !important; - font-size: 11px !important; + padding: 6px 8px !important; + font-size: 12px !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary-light) !important; - color: var(--primary-color) !important; + color: var(--text-primary) !important; } .select2-dropdown { border: 1px solid var(--border-color) !important; - border-radius: 4px !important; - box-shadow: var(--shadow-lg) !important; + border-radius: var(--radius-sm) !important; + box-shadow: 0 2px 8px rgba(60, 64, 67, 0.15) !important; } .select2-search--dropdown .select2-search__field { border: 1px solid var(--border-color) !important; - border-radius: 3px !important; - padding: 3px 5px !important; - font-size: 11px !important; + border-radius: var(--radius-sm) !important; + padding: 4px 8px !important; + font-size: 12px !important; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--primary-color) !important; + box-shadow: 0 0 0 1px var(--primary-color) !important; outline: none !important; } @@ -1050,6 +1156,163 @@ div.plm_menu_name h2 span, border-color: var(--secondary-color); } +/* 탭 스타일 */ +.tab-container { + border-bottom: 1px solid var(--border-color); + background: white; + padding: 0; + margin: 0; +} + +.tab-list { + display: flex; + list-style: none; + margin: 0; + padding: 0 16px; + gap: 0; +} + +.tab-item { + flex: 0 0 auto; +} + +.tab-button { + display: block; + padding: 12px 20px; + background: transparent; + border: none; + border-bottom: 2px solid transparent; + color: var(--text-secondary); + font-size: 14px; + font-weight: 400; + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; +} + +.tab-button:hover { + color: var(--text-primary); +} + +.tab-button.active { + color: var(--primary-color); + border-bottom-color: var(--primary-color); + font-weight: 500; +} + +/* 탭 컨텐츠 */ +.tab-content { + display: none; + padding: 20px; + animation: fadeIn 0.3s ease-out; +} + +.tab-content.active { + display: block; +} + +/* 주소 검색 아이콘 버튼 및 기능 버튼 */ +.address-search-btn, +.icon-btn, +button.icon-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 32px; + height: 32px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + background: white; + cursor: pointer; + transition: all 0.15s ease; + margin-left: 4px; + vertical-align: middle; + padding: 0 8px; + font-size: 12px; + font-weight: 500; + color: var(--text-primary); +} + +.address-search-btn:hover, +.icon-btn:hover, +button.icon-btn:hover { + background: var(--primary-light); + border-color: var(--primary-color); + color: var(--primary-color); +} + +/* Fn 버튼 스타일 */ +.fn-btn { + background: #f8fafc; + border: 1px solid var(--border-color); + padding: 0 8px; + font-family: 'Courier New', monospace; + font-weight: bold; + font-size: 11px; +} + +/* 국기 아이콘 및 플래그 */ +.flag-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border-radius: 50%; + overflow: hidden; + margin-right: 6px; + vertical-align: middle; + border: 1px solid var(--border-color); +} + +/* 입력 필드 그룹 (아이콘 + 입력) */ +.input-group { + display: flex; + align-items: center; + gap: 6px; +} + +.input-group input { + flex: 1; +} + +.input-group .icon-btn { + margin-left: 0; + flex-shrink: 0; +} + +/* 버튼 그룹 스타일 */ +.button-group { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; +} + +.button-group .plm_btns { + margin: 0; +} + +/* 상태 배지 스타일 */ +.status-badge { + display: inline-block; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: 600; + white-space: nowrap; +} + +.status-badge.active { + background: #d1fae5; + color: #065f46; +} + +.status-badge.inactive { + background: #fee2e2; + color: #991b1b; +} + /* 프린트 스타일 */ @media print { body { @@ -1065,11 +1328,16 @@ div.plm_menu_name h2 span, .plm_btns, .btns, .upload_btns, - .delete_btn { + .delete_btn, + .tab-container { display: none; } .dropzone { display: none; } + + .tab-content { + display: block !important; + } } \ No newline at end of file