/* *****************************************************************
* filename : common.css
* description : reset 에서 제어하는 class 중 변경되는 CSS + 공통으로 사용되는 CSS
* date : 2025-09-03
***************************************************************** */
/* ───────── Reset / Base ───────── */
html, body { height: auto; overflow-y: auto; }
body, input, button, select, textarea, sub { color: #333; font-family: Pretendard, '돋움', dotum, sans-serif; font-feature-settings: 'tnum'; letter-spacing: -0.1px; outline: none; }
input, select, textarea { font-size: 14px; }
.navbar-brand img { max-width: 160px; }
label { cursor: default; }
/* ───────── Buttons ───────── */
/* 프라이머리 버튼(차별점만 정의: 나머지는 .btn에서 상속) */
.btn-primary { flex-shrink: 0; height: 28px; background: #3396ff; color: #fff; font-weight: 500; font-size: 14px; border-radius: 5px; border: 1px solid #0091db; width: 4.8em; transition: background-color .15s ease, transform .12s ease; }
.btn-primary:hover { background: #3aa3ff; /* 채도 ↑, 명도 약간 ↑ */ border-color: #0b8be8; }
.btn-primary:focus { outline: none !important; box-shadow: none !important; animation: btnPulse .14s ease-out; /* 아주 짧게 */ }
.btn-primary:active { outline: none !important; box-shadow: none !important; transform: translateY(1px) scale(0.985); /* 눌림 감 */ }
.btn-w-mc { width: max-content; }
.btn-w-2kor { flex: 0 0 4.3em; width: 4.3em !important; box-sizing: border-box; }
@keyframes btnPulse {
0% { transform: scale(1); }
50% { transform: scale(0.992); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.btn-primary { transition: none; }
.btn-primary:focus { animation: none; }
}
/*.btn-primary:focus { outline: none !important; box-shadow: none !important; border-color: inherit !important; }*/
/* 그리드 컬럼 정렬 */
.dxbl-align-center { text-align: center; }
.dxbl-align-right { text-align: right; }
/* DevExpress 아이콘 공통 */
.dxbl-image { vertical-align: middle; width: 14px; height: 12px; padding: 0 2px; margin-top: 0 !important; }
.dxbl-pager .dxbl-btn .dxbl-image,
.dxbl-pager .dxbl-btn svg { display: inline-block; }
.dxbl-pager .dxbl-btn svg { fill: currentColor; stroke: currentColor; }
/* HiDPI select 화살표 */
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
select { padding-right: 20px; background: #fff url('../images/common/ico_arrow.png') right 7px top 50% no-repeat; background-size: 8px auto; }
}
/* 반응형 폰트 */
@media screen and (max-width:1200px) {
body, input, button, select, textarea, sub { font-size: 16px; }
input, select, textarea { font-size: 14px; }
}
@media screen and (max-width:620px) {
body, input, button, select, textarea, sub { font-size: 13.5px; }
}
/* [250930 SYE] 지오펜스 등록 & 거리 측정 PC 제외 전부 숨김 */
@media (max-width:1024px) {
.zone-draw-custom-control,
.zone-save-custom-control,
.zone-cancel-custom-control,
.btn-distance { display: none !important; }
}
/* 포커스 컬러(버튼/폼 공통) */
.btn:focus,
.btn:active:focus,
.form-input:focus,
.form-check-input:focus { outline: none; box-shadow: inset 0 0 0 0.1rem #fff, inset 0 0 0 0.25rem #3E408C; }
/* ───────── Utilities ───────── */
.hidden { position: absolute; width: 0; height: 0; margin: 0; padding: 0; background: none; font-size: 0; line-height: 0; }
.blind, .skip { position: absolute; top: -1000px; left: -10000px; overflow: hidden; font-size: 1px; text-indent: -9999px; line-height: 0; }
.none { display: none !important; }
.block { display: none !important; }
/* 원문 유지 */
.overflow { overflow: hidden; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.clear:after { display: block; clear: both; content: ''; }
.v_align { display: table-cell; vertical-align: middle; }
.dxbl-display-none { display: none; }
.w100 { width: 100% !important; margin: 0 auto; }
.w100 > div { padding: 0; }
.w60 { width: 60% !important; margin: 0 auto; }
.mb10 { margin-bottom: 10px !important; }
/* ───────── Forms ───────── */
input::placeholder { color: #999; font-weight: 300; }
/* input / select */
.form-input { color: #212529; border: 1px solid #ced4da; }
.form-input:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.form-input:disabled,
.form-input[readonly] { background-color: #e9ecef; }
.form-select { color: #212529; border: 1px solid #ced4da; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-size: 16px 12px; }
.form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.form-select:disabled { background-color: #e9ecef; }
/* file input 버튼 */
.form-input::file-selector-button,
.form-input::-webkit-file-upload-button { color: #212529; background-color: #e9ecef; border-inline-end: 1px solid #ced4da; }
.form-input:hover:not(:disabled):not([readonly])::file-selector-button,
.form-input:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: #dde0e3; }
/* 커스텀 파일 UI */
textarea.textarea { padding: 2px 5px; border: 1px solid #d4d4d4; resize: none; }
select.select { height: 42px; padding: 0 30px 0 7px; border: 1px solid #d4d4d4; background: #fff url('../images/common/ico_arr_down.png') right 10px top 50% no-repeat; background-size: 12px auto; }
select.select::-ms-expand { display: none; }
:root select.select { padding: 0 30px 0 7px; }
input.text { max-width: 100%; height: 42px; padding: 0 7px; border: 1px solid #d4d4d4; }
input.num { width: 60px; }
input.calender { height: 42px; padding: 0 7px; border: 1px solid #d2d2d2; background: url('../images/bbs/ico_cal.jpg') 93% 51% no-repeat; background-size: 15px; }
input.text:hover, select.select:hover, textarea.textarea:hover, input.calender:hover, span.format > button:hover { border: 1px solid #8695bb; outline: none; }
input.text:focus, select.select:focus, textarea.textarea:focus, input.calender:hover, span.format > button:focus { border: 1px solid #8695bb; outline: none; }
/* range */
.form-range::-webkit-slider-thumb { background-color: #0d6efd; }
.form-range::-webkit-slider-thumb:active { background-color: #b6d4fe; }
.form-range::-webkit-slider-runnable-track { background-color: #dee2e6; }
.form-range::-moz-range-thumb { background-color: #0d6efd; }
.form-range::-moz-range-track { background-color: #dee2e6; }
/* 커스텀 체크박스/라디오 */
.input { position: relative; display: inline-block }
.input label { cursor: pointer; }
.input:last-child { margin-right: 0; }
.checkbox, .radio { position: absolute; left: 0; top: 0; opacity: 0; }
.checkbox + label, .radio + label { padding-left: 27px; }
.checkbox + label:before, .radio + label:before { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border: 1px solid #d0d0d0; background-color: #fff; content: ''; }
.checkbox + label:after, .radio + label:after { position: absolute; left: 6px; top: 8px; width: 10px; height: 10px; content: ''; transition: all 0.2s; }
.checkbox:checked + label:after, .radio:checked + label:after { background-color: #4285f4; }
.checkbox:focus + label:before, .radio:focus + label:before { outline: 1px dotted #000; }
.checkbox.disabled + label, .radio.disabled + label { cursor: default; }
.checkbox.disabled + label:before, .radio.disabled + label:before { background-color: #f5f5f5; }
.checkbox.disabled:checked + label:before, .radio.disabled:checked + label:before { background-color: #f5f5f5 }
.checkbox.disabled:checked + label:after, .radio.disabled:checked + label:after { background-color: #bfbfbf }
.radio + label:before { border-radius: 100%; }
.radio + label:after { border-radius: 100%; }
.checkbox + label:after { left: 5px; top: 7px; display: none; width: 12px; height: 7px; border: 2px solid #4285f4; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.checkbox:checked + label:after { display: block; background-color: transparent; }
.checkbox.disabled:checked + label:after { border-color: #bfbfbf; background-color: transparent; }
/* 라벨형 체크/라디오 버튼 */
.input.btn .checkbox + label,
.input.btn .radio + label { display: inline-block; width: 100%; padding: 9px 20px 9px 38px; border: 1px solid #d9d9d9; border-radius: 3px; transition: background 0.2s ease-out; }
.input.btn .checkbox + label:hover,
.input.btn .radio + label:hover,
.input.btn .checkbox:focus + label,
.input.btn .radio:focus + label { background: #f5f5f5 }
.input.btn .checkbox + label:before, .input.btn .radio + label:before { left: 12px; top: 10px; }
.input.btn .checkbox + label:after { left: 17px; top: 16px; }
.input.btn .radio + label:after { left: 18px; top: 16px; }
.input.btn .checkbox.disabled + label, .input.btn .radio.disabled + label { background-color: #f9f9f9 }
/* 반응형 보정(파일/라벨형) */
@media screen and (max-width:800px) {
.filebox input + label { padding: 0 8px; line-height: 36px; font-size: 13px }
.filebox input + label i { margin-right: 0px; font-size: 15px }
.filebox ul { margin-top: 5px; padding: 6px; font-size: 13px }
.filebox ul li { float: none; font-size: 13px }
.checkbox + label, .radio + label { padding-left: 22px; }
.checkbox + label:before, .radio + label:before { top: 1px; width: 18px; height: 18px; }
.radio + label:after { left: 5px; top: 5px; width: 8px; height: 8px; }
.checkbox + label:after { left: 4px; top: 5px; width: 10px; height: 6px; }
.input.btn .checkbox + label, .input.btn .radio + label { padding: 9px 20px 9px 35px; }
.input.btn .radio + label:after { left: 17px; top: 15px; }
}
/* ===== 파일 목록 UI ===== */
.filebox input { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; clip: rect(0, 0, 0, 0); }
.filebox input + label { display: inline-block; line-height: 43px; margin-right: 5px; padding: 0 15px; color: #444; font-size: 15px; border: 1px solid #444; transition: all 0.3s ease-out; }
.filebox input + label i { position: relative; top: 1px; margin-right: 3px; color: #222; transform: rotate(90deg); font-weight: 500; font-size: 16px }
.filebox ul { overflow: hidden; margin-top: 5px; padding: 17px 15px; background: #f6f6f6; border: 1px solid #d9d9d9 }
.filebox ul li { font-size: 15px; color: #666 }
.filebox ul li .name { display: inline-block; overflow: hidden; width: auto; max-width: calc(100% - 30px); text-overflow: ellipsis; white-space: nowrap; }
.filebox ul li .delete { display: inline-block; width: 15px; height: 15px; margin: 2px 0 0 9px; vertical-align: top; }
.filebox ul li .delete:before, .filebox ul li .delete:after { content: ''; display: block; position: absolute; width: 16px; height: 2px; background: #222; }
.filebox ul li .delete:before { transform: rotate(45deg); }
.filebox ul li .delete:after { transform: rotate(-45deg); }
.filebox input:hover + label, .filebox input:focus + label { background: #5a5f71; color: #fff; }
.filebox input:hover + label i, .filebox input:focus + label i { color: #fff; }
/* ───────── Grid & Pager ───────── */
.grid-wrap { display: flex; flex-grow: 1; flex-direction: column; --dxbl-grid-font-size: 1rem; border: none !important; }
.grid-wrap .dxbl-grid-table { background: #fff; /*box-shadow:0px 0px 10px 0px rgba(140,140,140,0.2);*/ }
.grid-wrap .dxbl-grid-table thead { background: #636e79 !important; color: #ffffff; line-height: 2rem; font-size: 1.5rem; border-top-right-radius: 7px !important; }
.grid-wrap .dxbl-grid-table thead th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th:nth-last-child(2) { border-top-right-radius: 7px !important; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th { border-left: none !important; padding: 4px 10px; font-size: 14px; line-height: 25px; text-align: center; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th:first-child { border-top-left-radius: 7px !important; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header:hover { /*background: #e1e3e5; */ cursor: pointer; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header:focus,
.dxbl-grid-table tbody tr td:focus { outline: none; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content > span { display: inline; font-weight: 500; align-items: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content > span .dxbl-image { width: 18px; height: 16px; fill: #fff; }
.grid-wrap .dxbl-grid-table tbody tr:hover { background: #f2f4f7 !important; }
/* [251010 KSB] 내용 초과시 ... 처리 */
.grid-wrap .dxbl-grid-table tbody tr td { font-weight: 300; font-size: 12px; line-height: 14px; padding: 6px 10px; border-bottom: 1px solid #eee; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.grid-wrap .dxbl-grid-selected-row { background-color: #eaf5ff !important; color: #0091db; outline: 0; }
.grid-wrap .dxbl-grid-selected-row td { color: #0091db !important; }
.grid-wrap .dxbl-grid-empty-row { display: none; }
.dxbl-a11y-status-helper { display: none; font-size: 12px; font-weight: 200; color: #556273; letter-spacing: 0; line-height: 1.4rem; padding-top: 8px; }
/* [251127 KKI] 선박 페이지 Grid에 높이 지정*/
.grid-wrap-h-500 .dxbl-grid-table tr { height: 31px; }
.grid-wrap-page .dxbl-grid-table tbody tr td { font-size: 14px !important; }
/* 1) Mobile ≤ 600px */
@media (max-width: 600px) {
.grid-wrap .dxbl-grid-table thead { line-height: 1.8rem; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th { padding: 6px 8px; font-size: 12px; line-height: 20px; }
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content > span .dxbl-image { width: 16px; height: 14px; padding-top: 2px; }
.grid-wrap .dxbl-grid-table tbody tr td { font-size: 11.5px; line-height: 16px; padding: 6px 8px; }
.grid-wrap .dxbl-grid-table tbody tr td.dxbl-grid-empty-data-area { height: auto; }
}
/* 2) Tablet 601–1024px */
@media (min-width: 601px) and (max-width: 1024px) {
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th { padding: 6px 10px; font-size: 13px; line-height: 22px; }
.grid-wrap .dxbl-grid-table tbody tr td { font-size: 12px; line-height: 18px; padding: 6px 10px; }
.grid-wrap .dxbl-grid-pager,
.grid-wrap .dxbl-pager { font-size: 12.5px; padding: 8px 10px; }
}
/* 3) Small PC 1025–1414px */
@media (min-width: 1025px) and (max-width: 1414px) {
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th { font-size: 13.5px; line-height: 24px; }
.grid-wrap .dxbl-grid-table tbody tr td { font-size: 12.5px; line-height: 18px; }
}
/* 4) Wide 보정 1415–1820px */
@media (min-width: 1415px) and (max-width: 1820px) {
.grid-wrap .dxbl-grid-table thead .dxbl-grid-header-row th { font-size: 14px; line-height: 25px; }
.grid-wrap .dxbl-grid-table tbody tr td { font-size: 12.5px; line-height: 18px; }
}
/*paging*/
/*paging*/
.grid-wrap .dxbl-pager-container { text-align: center; outline: none; justify-content: center; align-items: center; position: relative; display: flex; flex-wrap: nowrap; /* 한 줄 고정 */ gap: 4px; margin-top:3px; }
.grid-wrap .dxbl-pager-container .dxbl-pager { padding-top: 8px; }
/* 작고 단정한 버튼 */
.grid-wrap .dxbl-pager-container .dxbl-pager button { width: 24px; height: 24px; line-height: 24px; color: #aaa; border: none; margin: 0 2px; padding: 0; border-radius: 4px; }
.grid-wrap .dxbl-pager-container .dxbl-pager button span { font-size: 11px; }
.grid-wrap .dxbl-pager-container .dxbl-pager button > svg { padding-bottom: 3px; stroke-width: 0.1px; }
/* [250829 KSB] 이전 포커스된 pager 에도 적용되는 현상으로 인한 주석처리 */
/*.grid-wrap .dxbl-pager-container .dxbl-pager button:focus,*/
.grid-wrap .dxbl-pager-container .dxbl-pager .dxbl-pager-active-page-btn { background: #3396ff; color: #fff; font-weight: 500; border-radius: 4px; transition: border-color 0.3s, box-shadow 0.3s; }
.grid-wrap .dxbl-pager-container .dxbl-pager button:hover { background: #ceddef; color: #919191; transition: border-color 0.3s, box-shadow 0.3s; }
/* 우측 페이지 크기 셀렉터 위치 고정 */
.grid-wrap .dxbl-pager-container > .dxbl-pager-page-size-selector { position: absolute; right: 5px; margin-top: 8px; display: flex; align-items: center; gap: 6px; color: #919191; }
.grid-wrap .dxbl-pager-container > .dxbl-pager-page-size-selector > label { width: 5em; height: 21px; font-size: 11px; }
/* 탭 컨텐츠 레이아웃 */
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout { display: flex; gap: 20px; height: 760px; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout label { cursor: inherit; color: #556273; line-height: 2rem; font-size: 1.6rem; font-weight: 500; padding-bottom: 12px; display: block; height: 30px; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout .left-panel { width: 30%; border: 1px solid #eee; padding: 15px; border-radius: 15px; }
.dxbl-pager-page-edit,
.dxbl-pager-page-edit-text { display: none !important; }
/* 페이지 오브 텍스트 */
.page-of { font-size: 11px; padding: 0 5px; margin: -25px 0 25px; text-align: left !important; color: #919191; }
.page-of span { color: #aaa; font-weight: 200; }
/* DevExpress 팝업/드롭다운 */
.dxbl-popup-cell { position: absolute; top: 0; left: 0; }
.dxbl-popup-cell .dxbl-dropdown { display: flex; opacity: 1; pointer-events: auto; transform: translate(320px, 588px); border: none; }
.dxbl-text-edit { display: flex; width: 55px; }
.dxbl-text-edit .dxbl-text-edit-input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxbl-text-edit .dxbl-text-edit-input:focus { outline: none; }
.dxbl-text-edit > .dxbl-text-edit-input,
.dxbl-text-edit > textarea { width: 100%; font-size: 10px; cursor: pointer; border: 1px solid #e5e5e5; background: #fff; color: #777; text-align: center; }
.dxbl-text-edit > .dxbl-btn-group { border: 1px solid #e5e5e5; margin-left: -1px; width: 20px; padding: 0 3px; }
.dxbl-text-edit > .dxbl-btn-group .dxbl-image { padding: 0; width: 10px; display: block; fill: #919191; }
.dxbl-dropdown > .dxbl-dropdown-dialog.dxbl-edit-dropdown,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.dxbl-edit-dropdown > .dxbl-modal-content { position: relative; border: none !important; }
.dxbl-dropdown > .dxbl-dropdown-dialog,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog { display: flex; flex: 1 1 auto; min-height: 0; top: 0; left: 0; flex-direction: column; justify-content: flex-start; outline: 0; }
.dxbl-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body,
.dxbl-itemlist-dropdown > .dxbl-dropdown-dialog > .dxbl-dropdown-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dxbl-dropdown-body .dxbl-list-box-render-container { height: auto; overflow-y: auto; overflow-x: hidden; max-height: 200px; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer { border: 1px solid #eee; display: flex; position: relative; overflow: hidden; width: 100%; font-size: 11px; padding: 0 2%; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content { overflow: auto; width: 100%; scrollbar-width: none; scrollbar-height: none; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content ul { padding: 0; margin: 0; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content ul li { line-height: 24px; color: #555; text-align: center; font-size: 10px; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content ul li:hover { cursor: pointer; background: #f1f1f1; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar { top: 0; flex-direction: column; transition: width 0.3s; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar,
.dxbl-scroll-viewer > .dxbl-scroll-viewer-hor-scroll-bar { bottom: 0; right: 0; position: absolute; display: none; align-items: flex-end; z-index: 1; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-hor-scroll-bar { left: 0; height: var(--dxbl-scroll-viewer-hor-scroll-bar-hover-height); flex-direction: row; transition: height 0.3s; }
.dxbl-dropdown, .dxbl-itemlist-dropdown { background: #fff; border: 1px solid #eee; font-size: 13px; position: absolute; top: 0; left: 0; z-index: unset; outline: none; }
/* ─────────────────────────────────────────────
Responsive (pager는 항상 작게/한 줄 유지)
───────────────────────────────────────────── */
/* Small PC (1025~1414px) */
@media (min-width:1025px) and (max-width:1414px) {
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout { height: clamp(560px, 68vh, 760px); gap: 18px; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout .left-panel { width: 32%; }
}
/* Tablet (601~1024px) */
@media (min-width:601px) and (max-width:1024px) {
/* pager는 한 줄/소형 유지(변경 없음) */
/* 탭 높이 비율화 */
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout { height: clamp(520px, 64vh, 700px); gap: 16px; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout .left-panel { width: 36%; padding: 12px; border-radius: 12px; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout label { font-size: 1.4rem; line-height: 1.9rem; height: 28px; }
/* 드롭다운 리스트 높이 확대 */
.dxbl-dropdown-body .dxbl-list-box-render-container { max-height: min(52vh, 360px); }
}
/* Mobile (≤600px) */
@media (max-width:600px) {
/* pager 더 컴팩트 */
.grid-wrap .dxbl-pager-container { display:block; margin-top:10px;}
.grid-wrap .dxbl-pager-container .dxbl-pager {padding-top:0;}
.grid-wrap .dxbl-pager-container .dxbl-pager button { width: 22px; height: 22px; line-height: 22px; font-size: 10.5px; }
.grid-wrap .dxbl-pager-container .dxbl-pager button span { font-size: 10.5px; }
.grid-wrap .dxbl-pager-container > .dxbl-pager-page-size-selector { /*display:none;*/ right: 2px; margin-top:-23px;}
.page-of { margin: 0; font-size: 0.7rem; margin-top: -23px; }
/* 탭: 세로 스택 전환 */
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout { flex-direction: column; gap: 12px; height: auto; min-height: 0; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout .left-panel { width: 100%; padding: 12px; border-radius: 12px; }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout label { font-size: 1.2rem; line-height: 1.6rem; height: auto; padding-bottom: 8px; }
/* 드롭다운: 작은 화면 보정 */
.dxbl-dropdown, .dxbl-itemlist-dropdown { max-width: 94vw; }
.dxbl-dropdown-body .dxbl-list-box-render-container { max-height: min(56vh, 320px); }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer { font-size: 11.5px; padding: 0 2%; }
.dxbl-dropdown-body .dxbl-list-box-render-container .dxbl-scroll-viewer > .dxbl-scroll-viewer-content ul li { font-size: 11px; line-height: 26px; }
/* 모바일에서 강제 위치값 완화(필요 시) */
.dxbl-popup-cell .dxbl-dropdown { transform: none; left: 50%; translate: -50% 0; right: auto; }
}
/* Ultra-wide (≥1415px) */
@media (min-width:1415px) {
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout { height: clamp(700px, 72vh, 820px); }
.dxbl-tabs-content-panel .dxbl-tabs-content .tab-layout .left-panel { width: 28%; }
}
/* ───────── Grid Half Version ───────── */
.grid-h-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; justify-content: flex-end; margin: 10px 0 15px; border: none !important; }
.grid-h-wrap > .h-grid > .d-flex { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.grid-h-wrap .search_div { width: 68%; }
.grid-h-wrap .search_div > input { border-radius: 7px; width: 300px; padding: 0 10px; text-align: left; border: 1px solid #e5e5e5; }
.grid-h-wrap .search_div > input:focus { outline: 2px solid #0091db; }
.grid-h-wrap .search_div > button:hover { background: #0075be; transition: background 0.2s; }
.grid-h-wrap .right-btn_div { width: auto; background: #fff; position: relative; border-radius: 7px; border: 1px solid #e5e5e5; }
.grid-h-wrap .right-btn_div > button { flex: 1; position: relative; line-height: 36px; text-align: center; font-size: 1.35rem; color: #556273; min-width: 70px; }
.grid-h-wrap .right-btn_div > button:not(:last-child)::after { content: ""; position: absolute; top: 20%; right: 0; width: 1px; height: 60%; background-color: #eee; }
.grid-h-wrap .right-btn_div > button:hover { color: #3396ff; font-weight: 500; transition: color 0.2s; }
#chkIncludeUseYnN { align-items: center; align-self: center; gap: 10px; cursor: pointer; width: 15px; height: 15px; margin-left: 5px; border: none; }
.chk-label { line-height: 1.2; display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-size: 14px; margin-left: 5px; }
.grid-h-wrap .h-grid .dxbl-grid { border: none; border-bottom: 1px solid #ced4da; font-size: 1.3rem; }
.grid-h-wrap .dxbl-grid-table thead { background: #636e79 !important; color: #ffffff; border-top-right-radius: 7px !important; }
.grid-h-wrap .dxbl-grid-table > thead > tr > th { line-height: 2rem; font-size: 1.4rem; }
.grid-h-wrap .dxbl-grid-table thead .dxbl-grid-header-row th { border-left: none !important; padding: 10px 4px 5px !important; }
.grid-h-wrap .dxbl-grid-table thead .dxbl-grid-header-row th:first-child { border-top-left-radius: 7px !important; }
.grid-h-wrap .dxbl-grid-table thead .dxbl-grid-header-row th:nth-last-child(2) { border-top-right-radius: 7px !important; }
.grid-h-wrap .dxbl-grid-table tbody tr:hover { background: #f2f4f7 !important; }
.grid-h-wrap .dxbl-grid-table tbody tr td { font-weight: 300; font-size: 1.2rem; line-height: 16px; padding: 8px 4px !important; border-left: none !important; color: #5e616b; }
.grid-h-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content { display: inline-block; }
.grid-h-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content > span { font-weight: 500; display: inline-block; }
.grid-h-wrap .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content > span .dxbl-image { width: 18px; height: 18px; }
.grid-h-wrap .dxbl-grid-selected-row { background-color: #eaf5ff !important; color: #0091db; outline: 0; }
.grid-h-wrap .dxbl-grid-selected-row td { color: #0091db !important; }
.grid-h-wrap .dxbl-grid-empty-row { display: none; }
/* ───────── Pages: Error / Cloud / Title ───────── */
.page-title { text-align: center; font-size: 1.6rem; font-weight: 600; margin: 8.25vh auto 1.5vh; line-height: 1.3; }
.page-title span.color { color: #0091db; }
.page-title p.sub-title { display: block; font-size: 0.9rem; font-weight: 300; margin-top: 1.2vh; }
/* Tablet (≥601px) */
@media (min-width:601px) {
.page-title { font-size: 1.8rem; margin: 7.5vh auto 1.75vh; line-height: 1.25; }
.page-title p.sub-title { font-size: 0.95rem; }
}
/* 작은 PC (≥1025px) */
@media (min-width:1025px) {
.page-title { font-size: 2.0rem; margin: 9vh auto 2vh; }
.page-title p.sub-title { font-size: 1.0rem; }
}
/* 큰 PC (≥1415px) */
@media (min-width:1415px) {
.page-title { font-size: 2.3rem; margin: 10.5vh auto 2.5vh; }
.page-title p.sub-title { font-size: 1.1rem; }
}
/* **************** 에러 페이지 ***************** */
.error_area { display: flex; height: 100vh; align-items: center; justify-content: center; text-align: center; letter-spacing: -1px; background: #f4f5f7 }
.error_area .box strong { display: block; font-size: 55px; color: #307eff; letter-spacing: -3.5px }
.error_area .box strong:before { content: '!'; display: block; width: 85px; height: 85px; line-height: 76px; font-size: 50px; margin: 0 auto 7px auto; border-radius: 50%; border: 6px solid #307eff }
.error_area .box em { display: block; padding: 8px 0 18px 0; font-size: 23px; }
.error_area .box p { margin-bottom: 40px; font-weight: 300; color: #666666; font-size: 18px; line-height: 1.8 }
.error_area .box .btn { display: flex; max-width: 400px; margin: 0 auto; width: 100%; margin-bottom: 100px }
.error_area .box .btn > a { width: 49%; line-height: 55px; font-size: 15px; font-weight: 500 }
.error_area .box .btn > a:first-child { margin-right: 2% }
.error_area .box .btn > a.btnGoBack { border: 1px solid #d7d7d7; background: #fff }
.error_area .box .btn > a.btnGoHack { background: #1b2529; color: #fff; }
@media screen and (max-width:620px) {
.error_area .box { width: 100%; min-width: 320px }
.error_area .box strong { font-size: 26px }
.error_area .box strong:before { width: 42px; height: 42px; line-height: 38px; font-size: 24px; border-width: 3px }
.error_area .box em { padding: 2px 0 5px 0; font-size: 16px; }
.error_area .box p { margin-bottom: 22px; font-size: 13.5px }
.error_area .box .btn { max-width: 300px; margin-bottom: 40px }
.error_area .box .btn > a { line-height: 40px; font-size: 13.5px; }
}
/* **************** 클라우드 링크 페이지 ***************** */
.cloud_area { display: flex; height: 100vh; align-items: center; justify-content: center; text-align: center; letter-spacing: -1px; background: #f4f5f7 }
.cloud_area .box strong { display: block; margin-bottom: 20px; font-size: 50px; color: #1b2529; letter-spacing: -3.5px; line-height: 70px }
.cloud_area .box strong span { color: #307eff; }
.cloud_area .box p { margin-bottom: 40px; font-weight: 300; color: #666666; font-size: 18px; line-height: 1.8 }
.cloud_area .box .btn { display: flex; justify-content: center; margin: 0 auto; width: 100%; margin-bottom: 100px }
.cloud_area .box .btn > a { display: block; min-width: 200px; margin: 0 5px; padding: 0 10px; line-height: 55px; font-size: 15px; font-weight: 500; border: 1px solid #d7d7d7; background: #fff }
.cloud_area .box .btn > a.btnGoback { background: #1b2529; color: #fff; border: 0 none }
@media screen and (max-width:800px) {
.cloud_area .box .btn > a { min-width: 180px; }
}
@media screen and (max-width:620px) {
.cloud_area .box strong { margin-bottom: 8px; font-size: 26px; line-height: 35px; letter-spacing: -1px }
.cloud_area .box p { margin-bottom: 20px; font-size: 13.5px }
.cloud_area .box .btn { flex-wrap: wrap }
.cloud_area .box .btn > a { min-width: auto; width: 100%; line-height: 40px; font-size: 13.5px; }
.cloud_area .box .btn > a + a { margin-top: 5px }
}
/* ───────── Base: Modal / Popup ───────── */
.modal-form { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 1vh; }
.modal-label { margin-bottom: 2px; white-space: nowrap; }
.modal-input { max-width: 40% !important; }
.btn-center { display: block; width: max-content; margin: 8px auto 3px; }
.btn-center-btns { margin: 10px auto 0; display: flex; gap: 8px; }
.btn-right { display: block; width: max-content; margin-left: auto; }
.btn-right-btns { margin-left: auto; display: flex; gap: 8px; }
.dxbl-popup-cell .dxbl-modal .dxbl-modal-root { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; }
.pop-top { display: flex; align-items: center; gap: 7px; }
.modal-row { display: grid; grid-template-columns: 115px minmax(150px, 0.45fr) 70px 100px 100px minmax(0, 1fr); align-items: center; column-gap: 8px; width: 100%;}
/* ── 1Depth ── */
.pop-1depth { width: 100%; height: 100%; }
.pop-1depth .dxbl-modal-content { position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; width: auto; min-width: 15%; max-width: 35% !important; display: inline-block; box-sizing: border-box; background-color: white; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); border-radius: 15px !important; z-index: 1000; min-height: 15%; max-height: 80%; }
.pop-1depth .dxbl-modal-body { max-height: 65vh; max-height: 65svh; overflow-y: auto; margin: 8px 0 10px; padding: 1% 3.5%; }
.pop-1depth .dxbl-modal-body .modal-cttbox { padding: 1% 0%; display: inline-block; width:100%; }
.pop-1depth .dxbl-modal-body .cttbox-row { display: flex; flex-wrap: wrap; gap: 5%; align-items: center; min-height: 3.7vh; }
.pop-1depth .dxbl-modal-body .cttbox-row .modal-label { align-self: flex-start; }
.pop-1depth .dxbl-modal-body .cttbox-row .cttbox-group { flex: 1; display: flex; flex-direction: column; }
.pop-1depth .dxbl-modal-body .cttbox-row .cttbox-group > label { font-size: 14px; margin-bottom: 3px; }
.pop-1depth .dxbl-modal-body .btn-primary { flex-shrink:0; background: #3396ff; color: #fff; font-weight: 500; font-size: 14px; border-radius: 5px; display: block; border: 1px solid #0091db; width: 4.8em; line-height: 1.2; }
.pop-1depth .dxbl-modal-body .btn-2box { padding: 1% 4%; gap: 18px; }
.pop-1depth .dxbl-modal-body .btn-2box > button { flex: 1; }
.pop-1depth .dxbl-modal-body .page-of { margin-bottom: 0 !important; }
.pop-1depth .cttbox-group .form-check { padding: 0; }
.pop-1depth .cttbox-group .form-check .form-check-label { font-size: 14px; color: #555; }
.pop-1depth .inputHalf { display: block; }
.pop-1depth .inputHalf > label { display: flex; }
.pop-1depth .inputHalf .form-input { width: 49%; }
/*[251211 KKI] 25% 너비의 팝업*/
.pop-1depth.pop-w25p .dxbl-modal-content { width: 25%; height: max-content; }
.pop-1depth.pop-w25p .dxbl-modal-body { max-height: 70vh; max-height: 70svh; overflow-y: auto; margin: 1vh 0 1.1vh; padding: 1% 3.5%; }
/* ── 2Depth ── */
.pop-2depth .dxbl-modal-content { position: fixed; top: 53%; left: 50%; transform: translate(-50%, -50%); margin: auto; width: auto; min-width: 15%; max-width: 20% !important; height: auto; background-color: white; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); border-radius: 15px !important; z-index: 1000; }
.pop-2depth .dxbl-popup-cell .dxbl-modal .dxbl-modal-root { background-color: rgba(0, 0, 0, 0.2); }
.pop-2depth .dxbl-modal-header-default { display: flex; padding: 0 2.8%; line-height: 5vh; border: none; }
.pop-2depth .dxbl-modal-content .dxbl-modal-header { display: none !important; }
.pop-2depth .dxbl-modal-content .dxbl-modal-header .dxbl-modal-title { color: #0091db; font-weight: 600; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.8rem; }
.pop-2depth .dxbl-modal-content .dxbl-modal-body { overflow-y: auto; height: auto; text-align: center; padding: 30px !important; line-height: 22px; }
.pop-2depth .dxbl-modal-content .dxbl-modal-body .form-label { padding-bottom: 18px; display: block; cursor: inherit; font-size: 14px; white-space: pre-line; }
.pop-2depth .dxbl-modal-content .dxbl-modal-body .btn-primary { background: #3396ff; color: #fff; font-weight: 500; font-size: 14px; border-radius: 5px; border: 1px solid #0091db; width: 5em; line-height: 1.2; margin: 0 5px; }
.pop-2depth .dxbl-modal-body .modal-cttbox { width: 100%; }
/* ── Header / Close Button (공통) ── */
.pop-1depth .dxbl-modal-content .dxbl-modal-header,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header { background: none; padding: 0; border: none !important; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header-default,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header-default { display: flex; padding: 1.3vh 2.8%; border-bottom: 1px solid #eee; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header::before,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header::before { background: none !important; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header-default .lock-icon-dark, .pop-1depth .dxbl-modal-content .dxbl-modal-header-default .lock-icon-bright, .pop-1depth .dxbl-modal-content .dxbl-modal-header-default .lock-icon-dark2,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header-default .lock-icon-dark, .pop-1depth-move .dxbl-modal-content .dxbl-modal-header-default .lock-icon-bright, .pop-1depth-move .dxbl-modal-content .dxbl-modal-header-default .lock-icon-dark2 { display: inline-block; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header .dxbl-modal-title,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header .dxbl-modal-title { color: #333; font-weight: 800; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; display: flex; gap: 5px; }
.dxbl-popup-header-button { margin-left: auto; min-width: unset; width: auto !important; height: auto; }
.dxbl-popup-header-button .dxbl-image { width: 20px; height: 20px; display: block; }
.dxbl-popup-header-button svg { display: none; }
.dxbl-popup-header-button .dxbl-image { background-color: currentColor; -webkit-mask: url("/images/close.svg") no-repeat center / contain; mask: url("/images/close.svg") no-repeat center / contain; fill: none; }
/* modal 내 grid */
.pop-grid { width: 92% !important; margin: 0 auto; border: none !important; max-height: 60vh !important; overflow-y: auto; }
.pop-grid .dxbl-grid-table thead { background: #636e79 !important; color: #ffffff; border-top-right-radius: 7px !important; border: none !important; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row th:nth-last-child(2) { border-top-right-radius: 7px !important; font-size: 1.3rem; }
.pop-grid .dxbl-grid-header-row th { border-left: none !important; padding: 6px 4px !important; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row th:first-child { border-top-left-radius: 7px !important; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header:hover { /*background: #e1e3e5; */ cursor: pointer; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header:focus,
.pop-grid .dxbl-grid-table tbody tr td:focus { outline: none; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content { line-height: 2.5rem; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content > span { font-weight: 500; display: inline-block; padding-right: 10%; }
.pop-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > th { width: 90% !important; }
.pop-grid .dxbl-grid-table tbody tr td { font-weight: 300; font-size: 1.2rem; line-height: 16px; padding: 7px 0; border-left: none !important; color: #5e616b; }
.pop-grid .dxbl-grid-table .dxbl-grid-row-drag-anchor-cell > .dxbl-image { display: inline-block; vertical-align: middle; }
.pop-grid .dxbl-grid-table tbody tr:hover { background: #f2f4f7 !important; }
.pop-grid .dxbl-grid-table tbody tr[data-virtual-item-index="-1"] { height: 0 !important; min-height: 0 !important; line-height: 0 !important; visibility: hidden; }
.pop-grid .dxbl-grid-table tbody tr td:nth-child(2) { padding-right: 8% !important; }
.pop-grid .dxbl-grid-selected-row { background-color: #eaf5ff !important; color: #0091db; outline: 0; }
.pop-grid .dxbl-grid-selected-row td { color: #0091db !important; }
.pop-grid .dxbl-grid-empty-row { display: none; }
.pop-grid .dxbl-scroll-viewer { border-bottom: 1px solid #ced4da; }
/* 강제 min 사이즈 조절 modal */
.pop-min .dxbl-modal-content { min-height: 130px !important; max-width: 15% !important; margin:0 !important; }
.pop-min .dxbl-modal-content .dxbl-modal-header-default { padding: 1.3vh 7.5%; }
.pop-min .dxbl-modal-body { margin: 1vh 0; padding: 1% 7.5%; }
.pop-min .dxbl-modal-body .cttbox-row { margin-bottom: 8px; }
.grid-hide-selection-icon .dxbl-image { display: none !important; }
/* [250926 SYE] 상단바 user-info 회원정보 수정 팝업 + [251013 SYE] 수정 추가 */
.user-info-pop .dxbl-modal-content { width: 25%; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row { display: block; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row:nth-child(2n):not(:last-child) { margin: 15px 0; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .modal-label { margin-bottom: 2px; display: inline-block; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .cttbox-col .cttbox-input-btn { flex: 1 1 auto; display: flex; gap: 8px; align-items: stretch; box-sizing: border-box; line-height: 1.25; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .cttbox-col .cttbox-input-btn .form-input { flex: 1 1 100%; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .cttbox-col .cttbox-input-btn .btn-primary { flex: 0 0 7.5rem; width: 7.5rem; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .cttbox-col .cttbox-input-name { display: flex; gap: 8px; align-items: center; line-height: 1.25; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .cttbox-col .cttbox-input-name .form-input:first-child { flex: 0 0 40%; min-width: 0; box-sizing: border-box; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .cttbox-col .cttbox-input-name .form-input:not(:first-child) { flex: 1 1 60%; min-width: 0; box-sizing: border-box; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .tel-inline { display: flex; gap: 8px; align-items: center; line-height: 1.25; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .tel-inline .form-select { flex: 0 0 40%; min-width: 5rem; box-sizing: border-box; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .tel-inline .form-control { flex: 1 1 60%; min-width: 10rem; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .tel-inline button { flex: 0 0 7.5rem; width: 7.5rem; }
.text-muted { --bs-text-opacity: 1; color: #666; }
@media (max-width:1024px) and (min-width:601px) {
}
@media (max-width:600px) {
.user-info-pop .dxbl-modal-content { width: 90%; margin:0 auto; }
}
/* [251013 SYE] 회원정보 수정 팝업 - 비밀번호 */
.pw-wrap { position: relative; display: inline-block; width: 100%; }
.input-pw { width: 100%; padding-right: 40px; box-sizing: border-box; }
.pw-eye-btn { position: absolute; top: 50%; inset-inline-end: 5px; transform: translateY(-50%); background: transparent; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; color: #555; transition: color 0.25s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pw-eye-btn svg { width: 20px; height: 20px; transition: opacity 0.25s ease, transform 0.25s ease; }
.pw-eye-btn:hover { color: #0091db; }
.pw-eye-btn:hover svg { transform: scale(1.06); }
.pw-eye-btn:active svg { transform: scale(0.95); }
/* [251013 KSB] 패스워드 규칙 체크 UI */
.password-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; margin-left: 2px; }
.password-rules label { display: inline-flex; align-items: center; font-size: 13px; position: relative; padding-left: 20px; line-height: 1.65; transition: color 0.3s ease; cursor:default; }
.password-rules label::before { content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 15px; transform: translateY(-50%) scale(0.8); background-color: currentColor; opacity: 0.3; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease; }
.password-rules .invalid_pw { color: #E74C3C; }
.password-rules .invalid_pw::before { opacity: 0.3; transform: translateY(-50%) scale(0.9); }
.password-rules .valid { color: #2F80ED; animation: rule-pop 0.35s ease-out; }
.password-rules .valid::before { opacity: 1; transform: translateY(-50%) scale(1.1); animation: check-pop 0.35s ease-out; }
@keyframes check-pop {
0% { transform: translateY(-50%) scale(0.6); opacity: 0; }
60% { transform: translateY(-50%) scale(1.2); opacity: 1; }
100% { transform: translateY(-50%) scale(1.0); opacity: 1; }
}
/* [251013 KSB] 비고 크기 수정 */
.dxbl-modal-content .modal-cttbox .form-input.remark-area { width: 100%; border-radius: .25rem; text-align: left; resize: none; height: 54px; line-height: 22px; color: #333; font-weight: 300; }
/* [251013 KSB] 비활성화 CSS */
.disabled { pointer-events: none; }
/* [251015 SYE] 자물쇠 아이콘 */
.lock-icon-dark, .lock-icon-bright, .lock-icon-dark2 { cursor: pointer; align-items: center; justify-content: center; vertical-align: middle; display: inline-flex; }
.lock-icon-dark svg, .lock-icon-bright svg, .lock-icon-dark2 svg { vertical-align: middle; width: 16px; height: 16px; color: #f96912; display: block; }
.lock-txt { padding: 0 3px; }
/* [251119 KKI] 수심 데이터 로드 문제 해결 */
.depth-label { display: block; }
/* ── 드래그 이동 팝업 ── */
.pop-1depth-move { width: 100%; height: 100%; outline: none !important; }
.pop-1depth-move:focus { outline: none !important; }
.pop-1depth-move .dxbl-modal-content { position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 15%; max-width: 35% !important; display: inline-block; box-sizing: border-box; background-color: white; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); border-radius: 15px !important; z-index: 1000; min-height: 15%; max-height: 90%; }
.pop-1depth-move .dxbl-modal-body { max-height: 75vh; max-height: 75svh; overflow-y: auto; margin: 1vh 0 1.1vh; padding: 1% 3.5%; }
.pop-1depth-move .dxbl-modal-body .modal-cttbox { padding: 1% 0%; display: inline-block; width: auto; }
.pop-1depth-move .dxbl-modal-body .cttbox-row { display: flex; flex-wrap: wrap; gap: 5%; align-items: flex-start; min-height: 3.5vh; }
.pop-1depth-move .dxbl-modal-body .cttbox-row .cttbox-group { flex: 1; display: flex; flex-direction: column; }
.pop-1depth-move .dxbl-modal-body .cttbox-row .cttbox-group > label { font-size: 14px; margin-bottom: 3px; }
/*.pop-1depth-move .dxbl-modal-body .btn-primary, .btn-primary2 { flex-shrink: 0; background: #3396ff; color: #fff; font-weight: 500; font-size: 14px; border-radius: 5px; border: 1px solid #0091db; width: 5em; }*/
.pop-1depth-move .dxbl-modal-body .btn-2box { padding: 1% 4%; gap: 18px; }
.pop-1depth-move .dxbl-modal-body .btn-2box > button { flex: 1; }
.pop-1depth-move .dxbl-modal-body .page-of { margin-bottom: 0 !important; }
.pop-1depth-move .cttbox-group .form-check { padding: 0; }
.pop-1depth-move .cttbox-group .form-check .form-check-label { font-size: 14px; color: #555; }
.pop-1depth-move .inputHalf { display: block; }
.pop-1depth-move .inputHalf > label { display: flex; }
.pop-1depth-move .inputHalf .form-input { width: 49%; }
/* [251021 SYE] PopWithLink 구독 업그레이드 버튼 */
.link-action { width: 100%; display: flex; justify-content: center; }
.link-action a { display: inline-block; min-width: 220px; text-align: center; padding: 10px 18px; border-radius: 12px; background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff !important; font-weight: 800; text-decoration: none; box-shadow: 0 6px 12px rgba(79, 70, 229, 0.35); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.link-action a:hover { transform: translateY(-2px); box-shadow: 0 10px 16px rgba(124, 58, 237, 0.3); opacity: .96; }
/* == ADM 멀티 콤보 목록 == */
.dxbl-list-box-multi-select .dxbl-scroll-viewer .dxbl-scroll-viewer-content ul li { display: flex; align-items: center; gap: 4px; padding: 2px 6px; }
.dxbl-list-box-multi-select .dxbl-scroll-viewer .dxbl-scroll-viewer-content ul li .dxbl-checkbox .dxbl-checkbox-check-element .dxbl-image { display: none !important; }
@media (max-width:1024px) and (min-width:601px) {
.dxbl-list-box-multi-select .dxbl-scroll-viewer .dxbl-scroll-viewer-content ul li { padding: 2px 5px; }
}
@media (max-width:600px) {
.dxbl-list-box-multi-select .dxbl-scroll-viewer .dxbl-scroll-viewer-content ul li { padding: 2px 4px; font-size: .9rem; }
}
/* ───────── Responsive ───────── */
/* 1) Mobile ≤ 600px */
@media (max-width: 600px) {
.modal-form { gap: 6px; margin-bottom: 1vh; font-size: 0.9rem; }
.modal-label { font-size: 13px; }
.form-input {font-size:0.9rem;}
.pop-top { gap: 6px; }
.dxbl-modal-open { padding-right: 0 !important; }
.pop-1depth .dxbl-modal-body .page-of,
.pop-1depth-move .dxbl-modal-body .page-of { line-height: 1; margin-top: -15px; }
.pop-1depth .dxbl-modal-body .modal-form .form-check { flex: 0 0 auto; }
.pop-1depth .dxbl-modal-content,
.pop-1depth-move .dxbl-modal-content { display:flex; flex-direction: column; overflow:hidden; max-width: 90vw !important; width: min(90vw, 520px); border-radius: 12px !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; max-height: 85dvh; max-height: 85svh; max-height: 85vh; padding-bottom: env(safe-area-inset-bottom); }
.pop-min .dxbl-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pop-1depth .dxbl-modal-body,
.pop-1depth-move .dxbl-modal-body { padding: 8px 14px; margin: 0.6vh 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height:none; }
.pop-2depth .dxbl-modal-content { min-width: 55% !important; max-width: 70% !important; border-radius: 12px !important; }
.pop-2depth .dxbl-modal-content .dxbl-modal-body { padding: 20px !important; line-height: 20px; }
.pop-2depth .dxbl-modal-content .dxbl-modal-body .form-label { font-size: 13px; padding-bottom: 1.5vh; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header-default,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header-default { padding: 0 14px; line-height: 40px; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header .dxbl-modal-title,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header .dxbl-modal-title { font-size: 14px; }
.dxbl-popup-header-button .dxbl-image { width: 18px; height: 18px; }
.pop-1depth .dxbl-modal-body .cttbox-row { gap: 3px 8px; display: block; }
.pop-1depth .dxbl-modal-body .cttbox-row .cttbox-group > label { font-size: 13px; margin-top: 3px; }
.modal-input { max-width: 100% !important; }
.pop-1depth .dxbl-modal-body .btn-primary,
.pop-2depth .dxbl-modal-content .dxbl-modal-body .btn-primary,
.pop-1depth-move .dxbl-modal-body .btn-primary { min-width: 3em; padding: 6px 5px; font-size: 12px; width: 55px; border-radius: 6px; }
.btn-center-btns, .btn-right-btns { gap: 6px; }
.pop-grid { width: 96% !important; max-height: 52vh !important; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row th { padding: 6px 6px !important; }
.pop-grid .dxbl-grid-table thead .dxbl-grid-header-row .dxbl-grid-header .dxbl-grid-header-content { line-height: 2rem; }
.pop-grid .dxbl-grid-table tbody tr td { font-size: 13px; padding: 6px 4px; }
.pop-grid .dxbl-grid-table tbody tr td:nth-child(2) { padding-right: 4% !important; }
.pop-1depth.pop-w25p .dxbl-modal-content { width: min(90vw, 520px) !important; max-width: 90vw !important; max-height: 85dvh; max-height: 85svh; max-height: 85vh; height: max-content; padding-bottom: env(safe-area-inset-bottom); }
}
/* 2) Tablet 601–1024px */
@media (min-width: 601px) and (max-width: 1024px) {
.modal-form { gap: 8px; }
.modal-input { max-width: 70% !important; }
.pop-1depth .dxbl-modal-content,
.pop-1depth-move .dxbl-modal-content { min-width: 60% !important; max-width: 74% !important; border-radius: 14px !important; }
.pop-1depth .dxbl-modal-body,
.pop-1depth-move .dxbl-modal-body { padding: 16px 20px; max-height: calc(100vh - 220px); }
.pop-2depth .dxbl-modal-content { min-width: 46% !important; max-width: 54% !important; }
.pop-2depth .dxbl-modal-content .dxbl-modal-body { padding: 26px !important; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header-default,
.pop-1depth-move .dxbl-modal-content .dxbl-modal-header-default { padding: 0 20px; line-height: 48px; }
.pop-grid { width: 94% !important; max-height: 56vh !important; }
.pop-grid .dxbl-grid-table tbody tr td { font-size: 1.05rem; }
.pop-1depth.pop-w25p .dxbl-modal-content { width:55%; max-height: calc(100dvh - 24px); max-height: calc(100svh - 24px); max-height: calc(100vh - 24px); min-width: 45% !important; }
}
/* 3) Small PC 1025–1414px */
@media (min-width: 1025px) and (max-width: 1414px) {
.pop-1depth .dxbl-modal-content,
.pop-1depth-move .dxbl-modal-content { min-width: 45% !important; max-width: 58% !important; }
.pop-1depth .dxbl-modal-body,
.pop-1depth-move .dxbl-modal-body { padding: 12px 24px; max-height: calc(100vh - 240px); }
.pop-2depth .dxbl-modal-content { min-width: 34% !important; max-width: 40% !important; }
.pop-grid { width: 92% !important; max-height: 60vh !important; }
}
/* 4) Wide 1415–1820px */
@media (min-width: 1415px) and (max-width: 1820px) {
.pop-1depth .dxbl-modal-content,
.pop-1depth-move .dxbl-modal-content { min-width: 24% !important; max-width: 44% !important; }
.pop-2depth .dxbl-modal-content { min-width: 20% !important; max-width: 30% !important; }
}
/* [251029 SYE] 검정 버튼 추가 */
.pay-success-wrap .btn-black { display: inline-block; min-width: 420px; padding: 16px 20px; border-radius: 12px; background: #414347; color: #fff; font-size: 16px; font-weight: 800; border: none; cursor: pointer; transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease; }
.pay-success-wrap .btn-black:hover { background: #383a3f; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.pay-success-wrap .btn-black:active { transform: translateY(1px); }
/* [251029 SYE] 팝업 내 cancel 버튼 추가 */
.btn-cancel { background: #eeeff5 !important; color: #a8aaaf !important; border: transparent !important; box-shadow: 0 3px 4px rgb(140 148 157 / 25%) !important; }
/* [251104 KHJ] 밸리데이션 항목 폰트 색상 추가 */
.validate-input { color : #0091db; }
/* [251111 KKI] 게시글 버튼 정렬 추가 */
.btn-w43 { flex: 0 0 4.3em; width: 4.3em !important; box-sizing: border-box; }
.btn-bar{ display: grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px;}
.btn-bar > button { grid-column: 2; justify-self: center; }
.btn-bar > .actions {grid-column: 3; justify-self: end; display: flex; gap: 8px }
.btn-bar .btn-cancel { background: #eeeff5 !important; color: #a8aaaf !important; border: transparent !important; box-shadow: 0 3px 4px rgb(140 148 157 / 25%) !important; }
.cmt-reply { --indent: 0px; width: calc(50% - var(--indent)); padding-left: var(--indent); }
.cmt-reply .reply-text { width: 100%; box-sizing: border-box; }
.cmt-reply .reply-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cmt-reply .btn-cancel { background: #eeeff5 !important; color: #a8aaaf !important; border: transparent !important; box-shadow: 0 3px 4px rgb(140 148 157 / 25%) !important; }
/* 기본 Blazor reconnect Layout 숨기기 */
#components-reconnect-modal {
display: none !important;
pointer-events: none !important;
}