--- src/main/webapp/publish/adm/css/popup.css
+++ src/main/webapp/publish/adm/css/popup.css
... | ... | @@ -1,60 +1,60 @@ |
| 1 |
-@charset "utf-8"; |
|
| 2 |
- |
|
| 3 |
-.mask{position:fixed;display:none;width:100%;height:100%;background:rgba(0,0,0,0.64);left:0;top:0;z-index:9;}
|
|
| 4 |
-.popup{background:#fff;}
|
|
| 5 |
-.popup_title_area{display:flex;width:100%;height:60px;padding:0 20px;border-bottom:1px solid #eee;background:#fff;align-items:center;justify-content:space-between;}
|
|
| 6 |
-.popup h1.popup_title{font-size:18px;font-weight:600;color:#222;}
|
|
| 7 |
-.popup_title_area .btn_popup_close{width:30px;height:30px;}
|
|
| 8 |
-.popup_title_wrap{display:flex;align-items:center;justify-content:space-between;}
|
|
| 9 |
-.popup_title_wrap h2{font-size:16px;font-weight:600;color:var(--primary-title-color);}
|
|
| 10 |
-.popup_content{padding:30px 24px 50px 24px;}
|
|
| 11 |
- |
|
| 12 |
-.popup .btn.large{height:40px;font-size:16px;padding:0 12px;font-weight:500;}
|
|
| 13 |
-.popup .btn.xlarge{height:50px;font-size:16px;padding:0 24px;font-weight:500;}
|
|
| 14 |
- |
|
| 15 |
-.popup .text_primary{font-size:16px;font-weight:500;}
|
|
| 16 |
-.popup .text_secondary{font-size:14px;font-weight:400;color:#444;}
|
|
| 17 |
- |
|
| 18 |
-.popup .search_area.box{padding:0 10px;font-size:14px;}
|
|
| 19 |
-.popup .search_item{padding:4px 0;}
|
|
| 20 |
- |
|
| 21 |
-.popup .input{height:30px;}
|
|
| 22 |
-.popup .input.medium{height:36px;}
|
|
| 23 |
-.popup select,.popup .select{height:30px;border:1px solid var(--default-line-color);border-radius:5px;padding:0 32px 0 12px;background:#fff url(/publish/adm/images/component/icon_arrow_down.png) no-repeat calc(100% - 4px) center;}
|
|
| 24 |
- |
|
| 25 |
-.popup .radio_wrap,.popup .checkbox_wrap{gap:8px;}
|
|
| 26 |
-.popup .radio_item,.popup .checkbox_item{font-size:14px;}
|
|
| 27 |
- |
|
| 28 |
-.popup_title_wrap+.table{margin:12px 0 40px 0;}
|
|
| 29 |
-.popup.table_type_cols thead>tr>th,.popup.table_type_cols tbody>tr>td{height:40px;font-size:15px;}
|
|
| 30 |
-.popup.table_type_rows tbody>tr>th, .popup.table_type_rows tbody>tr>td{height:40px;font-size:15px;padding:8px 12px;}
|
|
| 31 |
- |
|
| 32 |
-.popup .page a{width:32px;height:32px;}
|
|
| 33 |
- |
|
| 34 |
-/* 레이어 */ |
|
| 35 |
-.popup:not(.popup_window,.table){position:absolute;display:none;min-width:200px;min-height:200px;border-radius:12px;overflow:hidden;opacity:0;transition:all 0.3s;left:50%;top:50%;transform:translate(-50%,-50%);}
|
|
| 36 |
-.popup.active:not(.popup_window,.table){display:block;opacity:1;z-index:11;}
|
|
| 37 |
- |
|
| 38 |
- |
|
| 39 |
-/* 새창팝업 */ |
|
| 40 |
-.popup_window{padding:20px;box-sizing:border-box;}
|
|
| 41 |
-.popup_window h2.title{display:flex;width:100%;height:50px;font-size:20px;font-weight:bold;color:#fff;padding:0 20px;border-radius:4px;background:#f86a3c;align-items:center;}
|
|
| 42 |
-.popup_window h2.title .text_secondary{font-weight:300;color:#fff;}
|
|
| 43 |
- |
|
| 44 |
-.popup_window .content_title{margin:40px 0 12px 0;}
|
|
| 45 |
-.popup_window h3.title{font-size:18px;font-weight:bold;margin:0;padding:0;}
|
|
| 46 |
-.popup_window h3.title::before{display:none;}
|
|
| 47 |
- |
|
| 48 |
-.popup_window .search_title{font-weight:400;}
|
|
| 49 |
-.popup_window .search_title::after{top:12px;}
|
|
| 50 |
-.popup_window .search_area.box{border-radius:4px;}
|
|
| 51 |
-.popup_window input[type="text"]{height:30px;}
|
|
| 52 |
-.popup_window .search_item:has(input[type='hidden']:only-child){display:none;}
|
|
| 53 |
- |
|
| 54 |
-.popup_window .tree{display:flex;border:1px solid #CDD5E6;border-radius:4px;flex-direction:column;}
|
|
| 55 |
-.popup_window .tree_title{display:flex;width:100%;height:50px;font-weight:500;padding:0 12px;background:#eff2f9;align-items:center;gap:8px;}
|
|
| 56 |
-.popup_window .tree .tree_wrap{padding:4px 0;max-height:300px;overflow:scroll;}
|
|
| 57 |
-.popup_window .tree .row{display:flex;height:35px;font-size:14px;padding:0 12px;align-items:center;gap:4px;}
|
|
| 58 |
-.popup_window .tree .row label{display:flex;min-height:35px;align-items:center;gap:4px;}
|
|
| 59 |
-.popup_window .tree .rowgroup{display:flex;width:calc(100% - 24px);font-size:14px;background:#f2f4f5;flex-direction:column;gap:4px;border-radius:4px;padding:8px 12px;margin:0 auto;}
|
|
| 1 |
+@charset "utf-8"; |
|
| 2 |
+ |
|
| 3 |
+.mask{position:fixed;display:none;width:100%;height:100%;background:rgba(0,0,0,0.64);left:0;top:0;z-index:9;}
|
|
| 4 |
+.popup{background:#fff;}
|
|
| 5 |
+.popup_title_area{display:flex;width:100%;height:60px;font-size:18px;font-weight:600;padding:0 20px;border-bottom:1px solid #eee;background:#fff;align-items:center;justify-content:space-between;}
|
|
| 6 |
+.popup h1.popup_title{font-size:18px;font-weight:600;color:#222;}
|
|
| 7 |
+.popup_title_area .btn_popup_close{width:30px;height:30px;}
|
|
| 8 |
+.popup_title_wrap{display:flex;align-items:center;justify-content:space-between;}
|
|
| 9 |
+.popup_title_wrap h2{font-size:16px;font-weight:600;color:var(--primary-title-color);}
|
|
| 10 |
+.popup_content{padding:30px 24px 50px 24px;}
|
|
| 11 |
+ |
|
| 12 |
+.popup .btn.large{height:40px;font-size:16px;padding:0 12px;font-weight:500;}
|
|
| 13 |
+.popup .btn.xlarge{height:50px;font-size:16px;padding:0 24px;font-weight:500;}
|
|
| 14 |
+ |
|
| 15 |
+.popup .text_primary{font-size:16px;font-weight:500;}
|
|
| 16 |
+.popup .text_secondary{font-size:14px;font-weight:400;color:#444;}
|
|
| 17 |
+ |
|
| 18 |
+.popup .search_area.box{padding:0 10px;font-size:14px;}
|
|
| 19 |
+.popup .search_item{padding:4px 0;}
|
|
| 20 |
+ |
|
| 21 |
+.popup .input{height:30px;}
|
|
| 22 |
+.popup .input.medium{height:36px;}
|
|
| 23 |
+.popup select,.popup .select{height:30px;border:1px solid var(--default-line-color);border-radius:5px;padding:0 32px 0 12px;background:#fff url(/publish/adm/images/component/icon_arrow_down.png) no-repeat calc(100% - 4px) center;}
|
|
| 24 |
+ |
|
| 25 |
+.popup .radio_wrap,.popup .checkbox_wrap{gap:8px;}
|
|
| 26 |
+.popup .radio_item,.popup .checkbox_item{font-size:14px;}
|
|
| 27 |
+ |
|
| 28 |
+.popup_title_wrap+.table{margin:12px 0 40px 0;}
|
|
| 29 |
+.popup.table_type_cols thead>tr>th,.popup.table_type_cols tbody>tr>td{height:40px;font-size:15px;}
|
|
| 30 |
+.popup.table_type_rows tbody>tr>th, .popup.table_type_rows tbody>tr>td{height:40px;font-size:15px;padding:8px 12px;}
|
|
| 31 |
+ |
|
| 32 |
+.popup .page a{width:32px;height:32px;}
|
|
| 33 |
+ |
|
| 34 |
+/* 레이어 */ |
|
| 35 |
+.popup:not(.popup_window,.table){position:absolute;display:none;min-width:200px;min-height:200px;border-radius:12px;overflow:hidden;opacity:0;transition:all 0.3s;left:50%;top:50%;transform:translate(-50%,-50%);}
|
|
| 36 |
+.popup.active:not(.popup_window,.table){display:block;opacity:1;z-index:11;}
|
|
| 37 |
+ |
|
| 38 |
+ |
|
| 39 |
+/* 새창팝업 */ |
|
| 40 |
+.popup_window{padding:20px;box-sizing:border-box;}
|
|
| 41 |
+.popup_window h2.title{display:flex;width:100%;height:50px;font-size:20px;font-weight:bold;color:#fff;padding:0 20px;border-radius:4px;background:#f86a3c;align-items:center;}
|
|
| 42 |
+.popup_window h2.title .text_secondary{font-weight:300;color:#fff;}
|
|
| 43 |
+ |
|
| 44 |
+.popup_window .content_title{margin:40px 0 12px 0;}
|
|
| 45 |
+.popup_window h3.title{font-size:18px;font-weight:bold;margin:0;padding:0;}
|
|
| 46 |
+.popup_window h3.title::before{display:none;}
|
|
| 47 |
+ |
|
| 48 |
+.popup_window .search_title{font-weight:400;}
|
|
| 49 |
+.popup_window .search_title::after{top:12px;}
|
|
| 50 |
+.popup_window .search_area.box{border-radius:4px;}
|
|
| 51 |
+.popup_window input[type="text"]{height:30px;}
|
|
| 52 |
+.popup_window .search_item:has(input[type='hidden']:only-child){display:none;}
|
|
| 53 |
+ |
|
| 54 |
+.popup_window .tree{display:flex;border:1px solid #CDD5E6;border-radius:4px;flex-direction:column;}
|
|
| 55 |
+.popup_window .tree_title{display:flex;width:100%;height:50px;font-weight:500;padding:0 12px;background:#eff2f9;align-items:center;gap:8px;}
|
|
| 56 |
+.popup_window .tree .tree_wrap{padding:4px 0;max-height:300px;overflow:scroll;}
|
|
| 57 |
+.popup_window .tree .row{display:flex;height:35px;font-size:14px;padding:0 12px;align-items:center;gap:4px;}
|
|
| 58 |
+.popup_window .tree .row label{display:flex;min-height:35px;align-items:center;gap:4px;}
|
|
| 59 |
+.popup_window .tree .rowgroup{display:flex;width:calc(100% - 24px);font-size:14px;background:#f2f4f5;flex-direction:column;gap:4px;border-radius:4px;padding:8px 12px;margin:0 auto;}
|
|
| 60 | 60 |
.popup_window .tree .rowgroup .row{height:auto;} (No newline at end of file)
|
--- src/main/webapp/publish/adm/css/style.css
+++ src/main/webapp/publish/adm/css/style.css
... | ... | @@ -55,9 +55,9 @@ |
| 55 | 55 |
.input_desc.blue{color:var(--primary-color);}
|
| 56 | 56 |
|
| 57 | 57 |
.calendar_wrap{display:flex;align-items:center;gap:8px;}
|
| 58 |
-.calendar{width:140px;background:#fff/* url(../images/component/icon_calendar.png) no-repeat calc(100% - 8px) center */;}
|
|
| 59 |
-i.calendar{width:34px;height:20px;background:url(../images/component/icon_calendar.png) no-repeat calc(100% - 8px) center;}
|
|
| 60 |
-.calendar_wrap .btn_calendar{margin:0 0 0 -43px;}
|
|
| 58 |
+.calendar, .calendar[readonly]{width:140px;background:#fff/* url(../images/component/icon_calendar.png) no-repeat calc(100% - 8px) center */; cursor:auto;}
|
|
| 59 |
+i.calendar{width:34px;height:20px;background:url(../images/component/icon_calendar.png) no-repeat calc(100% - 8px) center;cursor:pointer;}
|
|
| 60 |
+.calendar_wrap .btn_calendar{margin:0 0 0 -43px;cursor:pointer;}
|
|
| 61 | 61 |
.calendar_wrap .btn_calendar:hover{box-shadow:none;}
|
| 62 | 62 |
|
| 63 | 63 |
.time_layer_wrap{position:relative;}
|
--- src/main/webapp/publish/adm/css/table.css
+++ src/main/webapp/publish/adm/css/table.css
... | ... | @@ -1,50 +1,52 @@ |
| 1 |
-@charset "utf-8"; |
|
| 2 |
- |
|
| 3 |
-.table{border-top:2px solid var(--primary-color);margin:0 0 40px 0;}
|
|
| 4 |
-.content_title.h4+.table{margin:0 0 20px 0;}
|
|
| 5 |
-.content_title.h5+.table{margin:12px 0 40px 0;}
|
|
| 6 |
- |
|
| 7 |
-.table table{table-layout:fixed;width:100%;}
|
|
| 8 |
-.table .mobile_show,.table .mobile_hide{display:none;}
|
|
| 9 |
-.table .required{color:var(--red-color);margin:0 4px 0 0;}
|
|
| 10 |
- |
|
| 11 |
-.table td.visible{overflow:visible !important;}
|
|
| 12 |
- |
|
| 13 |
-.table_type_cols{margin:12px 0 40px 0;}
|
|
| 14 |
-.table_type_cols tr{border-bottom:1px solid #DEE6F4;}
|
|
| 15 |
-.table_type_cols th,.table_type_cols td{padding:4px 8px;font-size:16px;text-align:center;box-sizing:border-box;}
|
|
| 16 |
-.table_type_cols thead>tr>th{height:50px;font-weight:500;color:#25272A;background:#eff2f9;}
|
|
| 17 |
-.table_type_cols tbody>tr>td{height:50px;font-weight:400;color:#444;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
| 18 |
-.table_type_cols .text_left a{width:100%;text-align:left;}
|
|
| 19 |
- |
|
| 20 |
- |
|
| 21 |
-.table_type_rows{margin:30px 0;}
|
|
| 22 |
-.table_type_rows>table>tbody>tr{border-bottom:1px solid #e2e7ef;}
|
|
| 23 |
-.table_type_rows tbody>tr>th,.table_type_rows tbody>tr>td{height:50px;padding:12px 20px;font-size:16px;color:#25272A;text-align:left;box-sizing:border-box;}
|
|
| 24 |
-.table_type_rows tbody>tr>th{font-weight:500;background:#F2F3F5;}
|
|
| 25 |
-.table_type_rows tbody>tr>td{font-weight:400;}
|
|
| 26 |
- |
|
| 27 |
-.file_top{display:flex;justify-content:space-between;align-items:flex-end;}
|
|
| 28 |
-.file_table{height:150px;margin:12px 0 0 0;border:1px solid var(--lightgray-color);border-radius:8px;}
|
|
| 29 |
-.file_table table{table-layout:fixed;width:100%;border-collapse: collapse;}
|
|
| 30 |
-.file_table tr{border-bottom:1px solid #E2E7EF;}
|
|
| 31 |
-.file_table tbody{width:100%;max-height:150px;overflow-y:auto;}
|
|
| 32 |
-.file_table th{height:36px;font-size:14px;color:#222;padding:0 8px;text-align:center;}
|
|
| 33 |
-.file_table tbody>tr>td{height:36px;font-size:14px;color:#444;padding:0 8px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
| 34 |
- |
|
| 35 |
-.file_table.before_file_table table{height:100%;}
|
|
| 36 |
-.file_table.before_file_table thead{opacity:0.3;}
|
|
| 37 |
-.file_table.before_file_table tbody{background:#EFF0F4;}
|
|
| 38 |
-.file_table.before_file_table tbody tr{height:100%;border:0;text-align:center;}
|
|
| 39 |
-.file_table.before_file_table p{font-size:14px;}
|
|
| 40 |
-.file_table.before_file_table b{color:var(--primary-color);}
|
|
| 41 |
- |
|
| 42 |
-.table_type_cols td>.file_table{height:auto;margin:0;border:0;}
|
|
| 43 |
-.table_type_cols td>.file_table tbody td{height:auto;font-size:16px;}
|
|
| 44 |
-.table_type_cols td>.file_table .file_row{display:flex;align-items:center;justify-content:center;gap:8px;}
|
|
| 45 |
-.table_type_cols td>.file_table .file_row span{width:calc(100% - 28px);text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
| 46 |
- |
|
| 47 |
-.file_table#egov_file_view_table{height:auto;margin:0;border:0;}
|
|
| 48 |
-.file_table#egov_file_view_table tr{border:0;}
|
|
| 49 |
-.file_table#egov_file_view_table td{height:auto;text-align:left;}
|
|
| 50 |
-.file_table#egov_file_view_table td .file_row{display:inline-flex;font-size:16px;font-weight:400;align-items:center;gap:8px;}
|
|
| 1 |
+@charset "utf-8"; |
|
| 2 |
+ |
|
| 3 |
+.table{border-top:2px solid var(--primary-color);margin:0 0 40px 0;}
|
|
| 4 |
+.content_title.h4+.table{margin:0 0 20px 0;}
|
|
| 5 |
+.content_title.h5+.table{margin:12px 0 40px 0;}
|
|
| 6 |
+ |
|
| 7 |
+.sort_wrap,.sort{display:inline-block;vertical-align:middle;font-size:11px;margin:0 0 0 4px;}
|
|
| 8 |
+ |
|
| 9 |
+.table table{table-layout:fixed;width:100%;}
|
|
| 10 |
+.table .mobile_show,.table .mobile_hide{display:none;}
|
|
| 11 |
+.table .required{color:var(--red-color);margin:0 4px 0 0;}
|
|
| 12 |
+ |
|
| 13 |
+.table td.visible{overflow:visible !important;}
|
|
| 14 |
+ |
|
| 15 |
+.table_type_cols{margin:12px 0 40px 0;}
|
|
| 16 |
+.table_type_cols tr{border-bottom:1px solid #DEE6F4;}
|
|
| 17 |
+.table_type_cols th,.table_type_cols td{padding:4px 8px;font-size:16px;text-align:center;box-sizing:border-box;}
|
|
| 18 |
+.table_type_cols thead>tr>th{height:50px;font-weight:500;color:#25272A;background:#eff2f9;}
|
|
| 19 |
+.table_type_cols tbody>tr>td{height:50px;font-weight:400;color:#444;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
| 20 |
+.table_type_cols .text_left a{width:100%;text-align:left;}
|
|
| 21 |
+ |
|
| 22 |
+ |
|
| 23 |
+.table_type_rows{margin:30px 0;}
|
|
| 24 |
+.table_type_rows>table>tbody>tr{border-bottom:1px solid #e2e7ef;}
|
|
| 25 |
+.table_type_rows tbody>tr>th,.table_type_rows tbody>tr>td{height:50px;padding:12px 20px;font-size:16px;color:#25272A;text-align:left;box-sizing:border-box;}
|
|
| 26 |
+.table_type_rows tbody>tr>th{font-weight:500;background:#F2F3F5;}
|
|
| 27 |
+.table_type_rows tbody>tr>td{font-weight:400;}
|
|
| 28 |
+ |
|
| 29 |
+.file_top{display:flex;justify-content:space-between;align-items:flex-end;}
|
|
| 30 |
+.file_table{height:150px;margin:12px 0 0 0;border:1px solid var(--lightgray-color);border-radius:8px;}
|
|
| 31 |
+.file_table table{table-layout:fixed;width:100%;border-collapse: collapse;}
|
|
| 32 |
+.file_table tr{border-bottom:1px solid #E2E7EF;}
|
|
| 33 |
+.file_table tbody{width:100%;max-height:150px;overflow-y:auto;}
|
|
| 34 |
+.file_table th{height:36px;font-size:14px;color:#222;padding:0 8px;text-align:center;}
|
|
| 35 |
+.file_table tbody>tr>td{height:36px;font-size:14px;color:#444;padding:0 8px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
| 36 |
+ |
|
| 37 |
+.file_table.before_file_table table{height:100%;}
|
|
| 38 |
+.file_table.before_file_table thead{opacity:0.3;}
|
|
| 39 |
+.file_table.before_file_table tbody{background:#EFF0F4;}
|
|
| 40 |
+.file_table.before_file_table tbody tr{height:100%;border:0;text-align:center;}
|
|
| 41 |
+.file_table.before_file_table p{font-size:14px;}
|
|
| 42 |
+.file_table.before_file_table b{color:var(--primary-color);}
|
|
| 43 |
+ |
|
| 44 |
+.table_type_cols td>.file_table{height:auto;margin:0;border:0;}
|
|
| 45 |
+.table_type_cols td>.file_table tbody td{height:auto;font-size:16px;}
|
|
| 46 |
+.table_type_cols td>.file_table .file_row{display:flex;align-items:center;justify-content:center;gap:8px;}
|
|
| 47 |
+.table_type_cols td>.file_table .file_row span{width:calc(100% - 28px);text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
|
|
| 48 |
+ |
|
| 49 |
+.file_table#egov_file_view_table{height:auto;margin:0;border:0;}
|
|
| 50 |
+.file_table#egov_file_view_table tr{border:0;}
|
|
| 51 |
+.file_table#egov_file_view_table td{height:auto;text-align:left;}
|
|
| 52 |
+.file_table#egov_file_view_table td .file_row{display:inline-flex;font-size:16px;font-weight:400;align-items:center;gap:8px;}
|
--- src/main/webapp/publish/common/css/reset.css
+++ src/main/webapp/publish/common/css/reset.css
... | ... | @@ -1,210 +1,209 @@ |
| 1 |
-/* ======================================================================== |
|
| 2 |
- reset.css — 2025 |
|
| 3 |
- 작성자: 정수빈 |
|
| 4 |
- 날짜: 2025-10-17 |
|
| 5 |
- ======================================================================== */ |
|
| 6 |
- |
|
| 7 |
-/* box-sizing & 기본 리셋 */ |
|
| 8 |
-*, *::before, *::after {
|
|
| 9 |
- box-sizing: border-box; |
|
| 10 |
- margin: 0; |
|
| 11 |
- padding: 0; |
|
| 12 |
-} |
|
| 13 |
- |
|
| 14 |
-/* HTML5 요소 기본 표시 보장 */ |
|
| 15 |
-article, aside, details, figcaption, figure, |
|
| 16 |
-footer, header, hgroup, menu, nav, section, main {
|
|
| 17 |
- display: block; |
|
| 18 |
-} |
|
| 19 |
- |
|
| 20 |
-/* root 설정 */ |
|
| 21 |
-html {
|
|
| 22 |
- scroll-behavior: smooth; |
|
| 23 |
- -webkit-text-size-adjust: 100%; |
|
| 24 |
- font-size: 16px; |
|
| 25 |
-} |
|
| 26 |
- |
|
| 27 |
-body {
|
|
| 28 |
- min-height: 100vh; |
|
| 29 |
- line-height: 1.5; |
|
| 30 |
- font-family: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; |
|
| 31 |
- -webkit-font-smoothing: antialiased; |
|
| 32 |
- -moz-osx-font-smoothing: grayscale; |
|
| 33 |
- letter-spacing: -0.35px; |
|
| 34 |
- color: #222; |
|
| 35 |
- background-color: #fff; |
|
| 36 |
-} |
|
| 37 |
- |
|
| 38 |
-/* 텍스트 요소 */ |
|
| 39 |
-h1, h2, h3, h4, h5, h6, p {
|
|
| 40 |
- font-weight: inherit; |
|
| 41 |
- font-size: inherit; |
|
| 42 |
- color: inherit; |
|
| 43 |
- margin: 0; |
|
| 44 |
- padding: 0; |
|
| 45 |
-} |
|
| 46 |
- |
|
| 47 |
-a {
|
|
| 48 |
- color: inherit; |
|
| 49 |
- text-decoration: none; |
|
| 50 |
- display: inline-block; |
|
| 51 |
-} |
|
| 52 |
-a:focus-visible {
|
|
| 53 |
- outline: 2px solid #222; |
|
| 54 |
- outline-offset: 3px; |
|
| 55 |
-} |
|
| 56 |
- |
|
| 57 |
-/* 리스트 */ |
|
| 58 |
-ol, ul {
|
|
| 59 |
- list-style: none; |
|
| 60 |
-} |
|
| 61 |
- |
|
| 62 |
-/* 이미지 및 미디어 */ |
|
| 63 |
-img, picture, video, canvas, svg {
|
|
| 64 |
- display: block; |
|
| 65 |
- max-width: 100%; |
|
| 66 |
- height: auto; |
|
| 67 |
- border: 0; |
|
| 68 |
- font-size: 0; |
|
| 69 |
-} |
|
| 70 |
- |
|
| 71 |
-/* 표 */ |
|
| 72 |
-table {
|
|
| 73 |
- border-collapse: collapse; |
|
| 74 |
- border-spacing: 0; |
|
| 75 |
- table-layout: fixed; |
|
| 76 |
- width: 100%; |
|
| 77 |
-} |
|
| 78 |
- |
|
| 79 |
-/* 폼 요소 */ |
|
| 80 |
-button, input, select, textarea {
|
|
| 81 |
- font: inherit; |
|
| 82 |
- color: inherit; |
|
| 83 |
- border: none; |
|
| 84 |
- background: none; |
|
| 85 |
- margin: 0; |
|
| 86 |
- padding: 0; |
|
| 87 |
- vertical-align: middle; |
|
| 88 |
- |
|
| 89 |
- appearance: none; |
|
| 90 |
-} |
|
| 91 |
- |
|
| 92 |
-/* 라디오, 체크박스는 appearance 제거 금지 (기본 표시 유지) */ |
|
| 93 |
-input[type="radio"], |
|
| 94 |
-input[type="checkbox"] {
|
|
| 95 |
- appearance: auto; |
|
| 96 |
- -webkit-appearance: auto; |
|
| 97 |
- -moz-appearance: auto; |
|
| 98 |
- display: inline-block; |
|
| 99 |
- width: auto; |
|
| 100 |
- height: auto; |
|
| 101 |
- cursor: pointer; |
|
| 102 |
- vertical-align: middle; |
|
| 103 |
-} |
|
| 104 |
- |
|
| 105 |
-button {
|
|
| 106 |
- cursor: pointer; |
|
| 107 |
- background: transparent; |
|
| 108 |
-} |
|
| 109 |
- |
|
| 110 |
-input::placeholder, |
|
| 111 |
-textarea::placeholder {
|
|
| 112 |
- color: #777; |
|
| 113 |
- font-weight: 400; |
|
| 114 |
- font-size:14px; |
|
| 115 |
-} |
|
| 116 |
- |
|
| 117 |
-input:not([type="button"]):disabled, |
|
| 118 |
-input:not([type="button"]):read-only, |
|
| 119 |
-textarea:disabled, |
|
| 120 |
-textarea:read-only, |
|
| 121 |
-select:disabled, |
|
| 122 |
-select:read-only |
|
| 123 |
-input.readonly, |
|
| 124 |
-textarea.readonly, |
|
| 125 |
-select.readonly{
|
|
| 126 |
- background-color: var(--disable-fill-bg-color) !important; |
|
| 127 |
- color: var(--disable-fill-text-color) !important; |
|
| 128 |
- border: 1px solid var(--disable-fill-line-color) !important; |
|
| 129 |
- cursor: not-allowed; |
|
| 130 |
-} |
|
| 131 |
- |
|
| 132 |
-/* 접근성 - label 숨김 처리 */ |
|
| 133 |
-caption,.caption, .label, .sr-only, .visually-hidden {
|
|
| 134 |
- position: absolute; |
|
| 135 |
- width: 1px; |
|
| 136 |
- height: 1px; |
|
| 137 |
- padding: 0; |
|
| 138 |
- margin: -1px; |
|
| 139 |
- overflow: hidden; |
|
| 140 |
- clip: rect(0, 0, 0, 0); |
|
| 141 |
- white-space: nowrap; |
|
| 142 |
- border: 0; |
|
| 143 |
-} |
|
| 144 |
- |
|
| 145 |
-/* 스크롤바 커스터마이징 */ |
|
| 146 |
-::-webkit-scrollbar {
|
|
| 147 |
- width: 7px; |
|
| 148 |
- height: 7px; |
|
| 149 |
-} |
|
| 150 |
-::-webkit-scrollbar-thumb {
|
|
| 151 |
- background: #adadad; |
|
| 152 |
- border-radius: 10px; |
|
| 153 |
-} |
|
| 154 |
-::-webkit-scrollbar-track {
|
|
| 155 |
- background: transparent; |
|
| 156 |
-} |
|
| 157 |
- |
|
| 158 |
-/* 인용, 기타 */ |
|
| 159 |
-blockquote, q {
|
|
| 160 |
- quotes: none; |
|
| 161 |
-} |
|
| 162 |
-blockquote::before, blockquote::after, |
|
| 163 |
-q::before, q::after {
|
|
| 164 |
- content: ''; |
|
| 165 |
-} |
|
| 166 |
- |
|
| 167 |
-/* 폼 예외 처리 */ |
|
| 168 |
-input[type="search"]::-webkit-search-cancel-button, |
|
| 169 |
-input[type="search"]::-webkit-search-decoration {
|
|
| 170 |
- appearance: none; |
|
| 171 |
-} |
|
| 172 |
- |
|
| 173 |
-/* 주소, 이탤릭 등 */ |
|
| 174 |
-address, em, i {
|
|
| 175 |
- font-style: normal; |
|
| 176 |
-} |
|
| 177 |
- |
|
| 178 |
-/* hr */ |
|
| 179 |
-hr {
|
|
| 180 |
- border: none; |
|
| 181 |
- height: 1px; |
|
| 182 |
- background: #e0e0e0; |
|
| 183 |
- margin: 0; |
|
| 184 |
-} |
|
| 185 |
- |
|
| 186 |
-/* 텍스트영역 기본 */ |
|
| 187 |
-textarea {
|
|
| 188 |
- resize: vertical; |
|
| 189 |
- color: #333; |
|
| 190 |
-} |
|
| 191 |
- |
|
| 192 |
-/* 접근성: 모션 줄이기 선호 시 */ |
|
| 193 |
-@media (prefers-reduced-motion: reduce) {
|
|
| 194 |
- *, *::before, *::after {
|
|
| 195 |
- animation-duration: 0.001ms !important; |
|
| 196 |
- transition-duration: 0.001ms !important; |
|
| 197 |
- scroll-behavior: auto !important; |
|
| 198 |
- } |
|
| 199 |
-} |
|
| 200 |
- |
|
| 201 |
-/* 다크모드 기본 대응 */ |
|
| 202 |
-@media (prefers-color-scheme: dark) {
|
|
| 203 |
- body {
|
|
| 204 |
- color: #e6e6e6; |
|
| 205 |
- background-color: #111; |
|
| 206 |
- } |
|
| 207 |
- ::-webkit-scrollbar-thumb {
|
|
| 208 |
- background: #666; |
|
| 209 |
- } |
|
| 210 |
-} |
|
| 1 |
+/* ======================================================================== |
|
| 2 |
+ reset.css — 2025 |
|
| 3 |
+ 작성자: 정수빈 |
|
| 4 |
+ 날짜: 2025-10-17 |
|
| 5 |
+ ======================================================================== */ |
|
| 6 |
+ |
|
| 7 |
+/* box-sizing & 기본 리셋 */ |
|
| 8 |
+*, *::before, *::after {
|
|
| 9 |
+ box-sizing: border-box; |
|
| 10 |
+ margin: 0; |
|
| 11 |
+ padding: 0; |
|
| 12 |
+} |
|
| 13 |
+ |
|
| 14 |
+/* HTML5 요소 기본 표시 보장 */ |
|
| 15 |
+article, aside, details, figcaption, figure, |
|
| 16 |
+footer, header, hgroup, menu, nav, section, main {
|
|
| 17 |
+ display: block; |
|
| 18 |
+} |
|
| 19 |
+ |
|
| 20 |
+/* root 설정 */ |
|
| 21 |
+html {
|
|
| 22 |
+ scroll-behavior: smooth; |
|
| 23 |
+ -webkit-text-size-adjust: 100%; |
|
| 24 |
+ font-size: 16px; |
|
| 25 |
+} |
|
| 26 |
+ |
|
| 27 |
+body {
|
|
| 28 |
+ min-height: 100vh; |
|
| 29 |
+ line-height: 1.5; |
|
| 30 |
+ font-family: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; |
|
| 31 |
+ -webkit-font-smoothing: antialiased; |
|
| 32 |
+ -moz-osx-font-smoothing: grayscale; |
|
| 33 |
+ letter-spacing: -0.35px; |
|
| 34 |
+ color: #222; |
|
| 35 |
+ background-color: #fff; |
|
| 36 |
+} |
|
| 37 |
+ |
|
| 38 |
+/* 텍스트 요소 */ |
|
| 39 |
+h1, h2, h3, h4, h5, h6, p {
|
|
| 40 |
+ font-weight: inherit; |
|
| 41 |
+ font-size: inherit; |
|
| 42 |
+ color: inherit; |
|
| 43 |
+ margin: 0; |
|
| 44 |
+ padding: 0; |
|
| 45 |
+} |
|
| 46 |
+ |
|
| 47 |
+a {
|
|
| 48 |
+ color: inherit; |
|
| 49 |
+ text-decoration: none; |
|
| 50 |
+ display: inline-block; |
|
| 51 |
+} |
|
| 52 |
+a:focus-visible {
|
|
| 53 |
+ outline: 2px solid #222; |
|
| 54 |
+ outline-offset: 3px; |
|
| 55 |
+} |
|
| 56 |
+ |
|
| 57 |
+/* 리스트 */ |
|
| 58 |
+ol, ul {
|
|
| 59 |
+ list-style: none; |
|
| 60 |
+} |
|
| 61 |
+ |
|
| 62 |
+/* 이미지 및 미디어 */ |
|
| 63 |
+img, picture, video, canvas, svg {
|
|
| 64 |
+ display: block; |
|
| 65 |
+ max-width: 100%; |
|
| 66 |
+ height: auto; |
|
| 67 |
+ border: 0; |
|
| 68 |
+ font-size: 0; |
|
| 69 |
+} |
|
| 70 |
+ |
|
| 71 |
+/* 표 */ |
|
| 72 |
+table {
|
|
| 73 |
+ border-collapse: collapse; |
|
| 74 |
+ border-spacing: 0; |
|
| 75 |
+ table-layout: fixed; |
|
| 76 |
+ width: 100%; |
|
| 77 |
+} |
|
| 78 |
+ |
|
| 79 |
+/* 폼 요소 */ |
|
| 80 |
+button, input, select, textarea {
|
|
| 81 |
+ font: inherit; |
|
| 82 |
+ color: inherit; |
|
| 83 |
+ border: none; |
|
| 84 |
+ background: none; |
|
| 85 |
+ margin: 0; |
|
| 86 |
+ padding: 0; |
|
| 87 |
+ vertical-align: middle; |
|
| 88 |
+ |
|
| 89 |
+ appearance: none; |
|
| 90 |
+} |
|
| 91 |
+ |
|
| 92 |
+/* 라디오, 체크박스는 appearance 제거 금지 (기본 표시 유지) */ |
|
| 93 |
+input[type="radio"], |
|
| 94 |
+input[type="checkbox"] {
|
|
| 95 |
+ appearance: auto; |
|
| 96 |
+ -webkit-appearance: auto; |
|
| 97 |
+ -moz-appearance: auto; |
|
| 98 |
+ display: inline-block; |
|
| 99 |
+ width: auto; |
|
| 100 |
+ height: auto; |
|
| 101 |
+ cursor: pointer; |
|
| 102 |
+ vertical-align: middle; |
|
| 103 |
+} |
|
| 104 |
+ |
|
| 105 |
+button {
|
|
| 106 |
+ cursor: pointer; |
|
| 107 |
+ background: transparent; |
|
| 108 |
+} |
|
| 109 |
+ |
|
| 110 |
+input::placeholder, |
|
| 111 |
+textarea::placeholder {
|
|
| 112 |
+ color: #777; |
|
| 113 |
+ font-weight: 400; |
|
| 114 |
+ font-size:14px; |
|
| 115 |
+} |
|
| 116 |
+ |
|
| 117 |
+input:not([type="button"]):disabled, |
|
| 118 |
+input[readonly], |
|
| 119 |
+textarea:disabled, |
|
| 120 |
+textarea[readonly], |
|
| 121 |
+select:disabled, |
|
| 122 |
+input.readonly, |
|
| 123 |
+textarea.readonly, |
|
| 124 |
+select.readonly {
|
|
| 125 |
+ background-color: var(--disable-fill-bg-color) !important; |
|
| 126 |
+ color: var(--disable-fill-text-color) !important; |
|
| 127 |
+ border: 1px solid var(--disable-fill-line-color) !important; |
|
| 128 |
+ cursor: auto; |
|
| 129 |
+} |
|
| 130 |
+ |
|
| 131 |
+/* 접근성 - label 숨김 처리 */ |
|
| 132 |
+caption,.caption, .label, .sr-only, .visually-hidden {
|
|
| 133 |
+ position: absolute; |
|
| 134 |
+ width: 1px; |
|
| 135 |
+ height: 1px; |
|
| 136 |
+ padding: 0; |
|
| 137 |
+ margin: -1px; |
|
| 138 |
+ overflow: hidden; |
|
| 139 |
+ clip: rect(0, 0, 0, 0); |
|
| 140 |
+ white-space: nowrap; |
|
| 141 |
+ border: 0; |
|
| 142 |
+} |
|
| 143 |
+ |
|
| 144 |
+/* 스크롤바 커스터마이징 */ |
|
| 145 |
+::-webkit-scrollbar {
|
|
| 146 |
+ width: 7px; |
|
| 147 |
+ height: 7px; |
|
| 148 |
+} |
|
| 149 |
+::-webkit-scrollbar-thumb {
|
|
| 150 |
+ background: #adadad; |
|
| 151 |
+ border-radius: 10px; |
|
| 152 |
+} |
|
| 153 |
+::-webkit-scrollbar-track {
|
|
| 154 |
+ background: transparent; |
|
| 155 |
+} |
|
| 156 |
+ |
|
| 157 |
+/* 인용, 기타 */ |
|
| 158 |
+blockquote, q {
|
|
| 159 |
+ quotes: none; |
|
| 160 |
+} |
|
| 161 |
+blockquote::before, blockquote::after, |
|
| 162 |
+q::before, q::after {
|
|
| 163 |
+ content: ''; |
|
| 164 |
+} |
|
| 165 |
+ |
|
| 166 |
+/* 폼 예외 처리 */ |
|
| 167 |
+input[type="search"]::-webkit-search-cancel-button, |
|
| 168 |
+input[type="search"]::-webkit-search-decoration {
|
|
| 169 |
+ appearance: none; |
|
| 170 |
+} |
|
| 171 |
+ |
|
| 172 |
+/* 주소, 이탤릭 등 */ |
|
| 173 |
+address, em, i {
|
|
| 174 |
+ font-style: normal; |
|
| 175 |
+} |
|
| 176 |
+ |
|
| 177 |
+/* hr */ |
|
| 178 |
+hr {
|
|
| 179 |
+ border: none; |
|
| 180 |
+ height: 1px; |
|
| 181 |
+ background: #e0e0e0; |
|
| 182 |
+ margin: 0; |
|
| 183 |
+} |
|
| 184 |
+ |
|
| 185 |
+/* 텍스트영역 기본 */ |
|
| 186 |
+textarea {
|
|
| 187 |
+ resize: vertical; |
|
| 188 |
+ color: #333; |
|
| 189 |
+} |
|
| 190 |
+ |
|
| 191 |
+/* 접근성: 모션 줄이기 선호 시 */ |
|
| 192 |
+@media (prefers-reduced-motion: reduce) {
|
|
| 193 |
+ *, *::before, *::after {
|
|
| 194 |
+ animation-duration: 0.001ms !important; |
|
| 195 |
+ transition-duration: 0.001ms !important; |
|
| 196 |
+ scroll-behavior: auto !important; |
|
| 197 |
+ } |
|
| 198 |
+} |
|
| 199 |
+ |
|
| 200 |
+/* 다크모드 기본 대응 */ |
|
| 201 |
+@media (prefers-color-scheme: dark) {
|
|
| 202 |
+ body {
|
|
| 203 |
+ color: #e6e6e6; |
|
| 204 |
+ background-color: #111; |
|
| 205 |
+ } |
|
| 206 |
+ ::-webkit-scrollbar-thumb {
|
|
| 207 |
+ background: #666; |
|
| 208 |
+ } |
|
| 209 |
+} |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?