/* *****************************************************************
* filename : common.css
* description : reset 에서 제어하는 class 중 변경되는 CSS + 공통으로 사용되는 CSS
* date : 2025-09-03
***************************************************************** */
/* reset(변경) */
body, input, button, select, textarea, sub { color: #333; font-family: Pretendard, '돋움', dotum, sans-serif; font-feature-settings: 'tnum'; letter-spacing: -0.1px; }
html, body { height: auto; overflow-y: auto; }
input, select, textarea { font-size: 14px; }
.navbar-brand img { max-width: 160px; }
.dxbl-image { vertical-align: middle; width: 14px; height: 12px; padding: 0 2px; display: block; 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; }
/* 프라이머리 버튼(차별점만 정의: 나머지는 .btn에서 상속) */
.btn-primary { color: #fff; background-color: #1857b5; border-color: #1857b5; }
.btn-primary:hover { background-color: #294077; border-color: #294077; }
.btn-primary:disabled { background: #9da0cc; border-color: #7e81b8; color: #f1f1f1; cursor: not-allowed; }
/* 출력 및 정렬 유틸 (프로젝트 전용) */
.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; }
.mb10 { margin-bottom: 10px !important; }
/* ===== 브랜드 인터랙션(placeholder/포커스/색상) ===== */
input::placeholder { color: #999; font-weight: 300; }
/* form-input 브랜드 룩앤필 */
.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; }
/* select: 아이콘/색상/포커스 */
.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; }
/* checked 시 브랜드 컬러(#0d6efd) 적용 */
/* 기본 상태 (체크 안 됨) */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 15px; height: 15px; border: 2px solid #b9c0cf; /* 연한 회색 테두리 */ border-radius: 4px; background: #fff; /* 흰 바탕 */ cursor: pointer; position: relative; vertical-align: middle; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
/* hover (체크 안 됐을 때도 테두리 강조) */
input[type="checkbox"]:hover { border-color: #86b7fe; /* 블루 톤으로 강조 */ }
/* checked 상태 */
input[type="checkbox"]:checked { background-color: #0d6efd; /* 브랜드 블루 */ border-color: #0d6efd; }
input[type="checkbox"]:checked:hover { background-color: #0b5ed7; /* hover 시 진한 블루 */ border-color: #0b5ed7; }
/* 체크 마크 */
input[type="checkbox"]:checked::after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -49%); font-size: 11px; line-height: 1; color: #fff; /* 흰색 체크 표시 */ font-weight: 700; }
/* disabled 상태 */
input[type="checkbox"]:disabled { cursor: not-allowed; background: #eef0f5; border-color: #d5d9e3; }
/* 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; }
/* ===== 커스텀 파일 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 }
/* ===== 파일 목록 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; }
/* ===== 라벨 기반 커스텀 체크박스/라디오 ===== */
.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; }
}
/* [251013 SYE] footer */
.footer { position: absolute; bottom: 0; right: 0; font-weight: 200; font-size: 12px; letter-spacing: 0; z-index: 5; display:flex;}
.footer p { padding: 1px 5px; color: #b0b4b7 ;}
.footer .footer-inner { background-color: rgba(255, 255, 255, 0.6); padding: 1px 4px; border-radius: 3px; color: #10192f; cursor: default;}
.footer .footer-inner > a { color: #10192f; cursor:pointer;}
/* **************** 에러 페이지 ***************** */
.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 }
}
.page-title { text-align: center; font-size: 2.3rem; font-weight: 600; margin: 12vh auto 4vh; }
.page-title span.color {color:#0091db;}
.page-title p.sub-title { display: block; font-size: 1.1rem; font-weight: 300; margin-top: 2vh; }
/**** [250826 SYE] 디자인 개편 [250917~ SYE] 반응형****/
/* === Base (PC) === */
.logo-div-user .btn { min-width: 70px; max-width: 150px; text-align: center; }
.logo-div-user .mmsi-check { display: flex; justify-content: space-between; align-items: center; }
.logo-div-user .mmsi-check .mmsi-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* PC: MMSI 한 줄(로고+라벨+인풋+버튼) */
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .mmsi-logo { display: inline-flex; align-items: center; justify-content: center; width: 130px; height: 25px; margin:0 5px; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .mmsi-logo img { width: 100%; height: auto; object-fit: contain; }
.logo-div-user .mmsi-check .mmsi-controls .label-mmsi { display: inline-block; min-width: 30px; text-align: right; font-weight: 500; }
.logo-div-user .mmsi-check .mmsi-controls .input-mmsi { width: 200px; flex-shrink: 0; }
/* PC: 체크박스 묶음 */
.logo-div-user .mmsi-check .mmsi-controls .mmsi-chk-wrap { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.logo-div-user .mmsi-check .mmsi-controls .chk-group { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* PC: 수신기 라인 */
.logo-div-user .mmsi-check .mmsi-controls .mmsi-rcv-wrap { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 수신기 콤보(PC) */
.logo-div-user .mmsi-check .mmsi-controls .select-equip { width: 200px; line-height: 28px; border-radius: .25rem; overflow: hidden; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip .dxbl-edit-validation-status { display: none; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip .dxbl-btn-group { background: #fff; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip .dxbl-text-edit-input { font-size: 13px; text-align: left; padding: 0 6px; }
/* PC: 업데이트 영역 — 한 줄 */
.logo-div-user .last-update { margin-left: auto; font-size: 12px; font-weight: 200; display: flex; align-items: center; gap: 12px; line-height: inherit; text-align: right; padding:0 3px;}
.logo-div-user .last-update .label-mmsi { display: inline; white-space: nowrap; }
/* == 1600~1215px: 보정 == */
@media (max-width:1600px) and (min-width:1215px) {
.logo-div-user .mmsi-check, .logo-div-user .last-update { min-width: 0; /* ← 중요: 줄어들 수 있게 */ }
.logo-div-user .mmsi-check .mmsi-controls {gap:0;}
.logo-div-user .mmsi-check .mmsi-controls .mmsi-chk-wrap { line-height: 27px; padding-bottom: 5px; padding-left: 8px; }
}
/* == 작은 PC (1025~1214px) == */
@media (max-width:1214px) and (min-width:1025px) {
.logo-div-user .mmsi-check .mmsi-controls { gap: 12px; }
.logo-div-user .mmsi-check .mmsi-controls .label-mmsi { width: 45px; text-align: right; font-size: 13px; line-height: 22px; }
.logo-div-user .mmsi-check .mmsi-controls .input-mmsi { width: 180px; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-chk-wrap { gap: 6px 10px; line-height: 1.3; }
.logo-div-user .mmsi-check .mmsi-controls .chk-group label { font-size: 13px; line-height: 1.3; }
.logo-div-user .last-update { font-size: 11px; line-height: 1.3; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip { width: 180px; line-height: 26px; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip .dxbl-text-edit-input { font-size: 12.5px; }
}
/* == Tablet (601~1024px) == */
@media (max-width:1024px) and (min-width:601px) {
.logo-div-user .btn { min-width: 64px; max-width: 120px; font-size: 14px; height: 32px; }
.logo-div-user .mmsi-check .mmsi-controls { gap: 10px; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .mmsi-logo { height: 3.5vh; max-height: 100%; /* 줄어든 화면 폭에 맞춰 자동 축소 */ width: auto; /* 비율 유지 */ }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .mmsi-logo img { max-height: 100%; width: auto; }
.logo-div-user .mmsi-check .mmsi-controls .label-mmsi { text-align: right; line-height: 20px; }
.logo-div-user .mmsi-check .mmsi-controls .input-mmsi { width: 20rem; }
.logo-div-user .mmsi-check .mmsi-controls .chk-group label { font-size: 13px; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-chk-wrap { line-height: 1.3; margin:0 7px;}
.logo-div-user .last-update { text-align: left; font-size: 11px; line-height: 1.3; white-space: normal; padding-right: 0; margin-left: auto; }
.logo-div-user .last-update .label-mmsi { display: block; margin-bottom: 2px; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip { width: 160px; line-height: 26px; }
.logo-div-user .mmsi-check .mmsi-controls .select-equip .dxbl-text-edit-input { font-size: 12px; }
}
/* == Mobile (≤600px) == */
@media (max-width:600px) {
.logo-div-user .btn { min-width: 58px; max-width: 100px; font-size: 13px; line-height: 28px; padding: 0 6px; }
.logo-div-user .mmsi-check .mmsi-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
/* 모바일에서 이메일 감춤 */
.logo-div-user .user-email { display: none; }
/* 수신기: 3열(라벨 50 / 필드 / 버튼) */
.logo-div-user .mmsi-check .mmsi-controls .mmsi-rcv-wrap { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; column-gap: 8px; align-items: center; width: 100%; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-rcv-wrap > label { grid-column: 1; min-width: 30px; font-size: .85rem; line-height: 28px; text-align: left; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-rcv-wrap .select-equip { grid-column: 2; min-width: 0; height: 28px; font-size: .85rem; width: auto; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-rcv-wrap .select-equip .dxbl-text-edit-input { height: 100%; line-height: 1.1; padding: .25rem .35rem; font-size: .85rem; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-rcv-wrap .btn { grid-column: 3; height: 28px; font-size: .85rem; padding: .3rem .6rem; line-height: 1.1; white-space: nowrap; flex-shrink: 0; }
/* ✅ MMSI: 4열(로고/라벨/입력/버튼) — 3fr : 1fr : 6fr : 1fr */
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap { display: grid; grid-template-columns: 3fr 1fr 6fr 1fr; column-gap: 6px; align-items: center; width: 100%; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .mmsi-logo { grid-column: 1; display: flex; align-items: center; justify-content: flex-start; height: 100%; width: 8rem; margin:0;}
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .mmsi-logo img { height: auto; width: 100%; object-fit: contain; display: block; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap > .label-mmsi { grid-column: 2; display: flex; align-items: center; font-size: 0.9rem; line-height: 1.2; min-width: 2rem; text-align: left; margin-left: 5px; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .input-mmsi { grid-column: 3; min-width: 0; height: 28px; font-size: .85rem; width: auto; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-src-wrap .btn { grid-column: 4; height: 28px; font-size: 0.9rem; padding: .3rem .6rem; line-height: 1.1; white-space: nowrap; flex-shrink: 0; }
.logo-div-user .mmsi-check .mmsi-controls .mmsi-chk-wrap { display: flex; flex-wrap: wrap; gap: 8px 10px; width: 100%; align-items: flex-start; }
.logo-div-user .mmsi-check .mmsi-controls .chk-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
.logo-div-user .mmsi-check .mmsi-controls .chk-group label { font-size: .9rem; line-height: 1.25; }
.logo-div-user .update-user-mobile .last-update { text-align: left; font-size: 10.5px; opacity: .9; padding-right: 0; display: block; margin-left: 7px; padding-right: 0; text-align: left; font-size: 11px; flex: 1 1 auto; }
.logo-div-user .update-user-mobile .last-update .label-mmsi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
}
/**** [251016 SYE]자물쇠 버튼 추가 ****/
.btn-lock { display: inline-flex; align-items: center; justify-content: center; }
.btn-lock .lock-icon-dark, .lock-icon-bright { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; }
.btn-lock .lock-txt { line-height: 1; }
/* == 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; }
}
/*grid*/
.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 .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-block; font-weight: 500; align-items: center; }
.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; padding-top: 3px; }
.grid-wrap .dxbl-grid-table tbody tr:hover { background: #f2f4f7 !important; }
/* [251010 KSB]내용이 해당 열 크기 초과하는 경우 ... 으로 표현되도록 수정(overflow, text-overflow, white-space 항목 추가) */
.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; }
.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; }
/*paging*/
.grid-wrap .dxbl-pager-container { text-align: center; outline: none; justify-content: center; align-items: center; position: relative; display: flex; }
.grid-wrap .dxbl-pager-container .dxbl-pager { padding-top: 10px; }
.grid-wrap .dxbl-pager-container .dxbl-pager button { width: 27px; height: 27px; line-height: 27px; color: #aaa; border: none !important; margin: 0; }
/* [250829 KSB] 이전 포커스된 pager 에도 적용되는 현상으로 인한 주석처리 */
/*.grid-wrap .dxbl-pager-container .dxbl-pager button:focus,*/ .dxbl-pager-container .dxbl-pager-active-page-btn { background: #0091db; color: #fff !important; font-weight: 500; border-radius: 5px !important; transition: border-color 0.3s, box-shadow 0.3s; }
.grid-wrap .dxbl-pager-container .dxbl-pager button:hover { background: #ceddef !important; color: #919191; border-radius: 5px; transition: border-color 0.3s, box-shadow 0.3s; border-radius: 5px !important; }
.grid-wrap .dxbl-pager-container .dxbl-pager button span { font-size: 12px; }
.grid-wrap .dxbl-pager-container .dxbl-pager button > svg { padding-bottom: 3px; stroke-width: 0.1px; }
.grid-wrap .dxbl-pager-container > .dxbl-pager-page-size-selector { position: absolute; right: 5px; margin-top: 10px; 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; }
.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: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-transition: width 0.3s; -o-transition: width 0.3s; 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; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; 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); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-transition: height 0.3s; -o-transition: height 0.3s; 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; }
/*grid half 버전*/
.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: #0091db; 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; }
/*modal*/
.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: 10px auto 2px; }
.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; }
.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: 88%; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header { background: none !important; padding: 0; border: none !important; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header-default { display: flex; padding: 0 4%; line-height: 4.8vh; border-bottom: 1px solid #eee; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header::before { background: none !important; }
.pop-1depth .dxbl-modal-content .dxbl-modal-header .dxbl-modal-title { padding-top: 2px; color: #333; font-weight: 800; flex: 1; /* ✅ title이 남는 공간 전부 차지 */ overflow: hidden; /* 긴 텍스트 넘치면 잘리게 */ white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
.pop-1depth .dxbl-popup-header-button { margin-left: auto; min-width: unset; width: auto !important; /* ✅ 핵심: 내용만큼 */ height: auto; }
.pop-1depth .dxbl-popup-header-button .dxbl-image { width: 20px; height: 20px; display: block; }
.pop-1depth .dxbl-modal-body { max-height: calc(90vh - 11vh); /* 헤더/푸터 높이 고려 */ overflow-y: auto; margin: 1vh 0 1.1vh; padding: 1% 3.5%; }
.pop-1depth .dxbl-modal-body .modal-cttbox { padding: 1% 0%; display: inline-block; width: auto; }
.pop-1depth .dxbl-modal-body .cttbox-row { display: flex; flex-wrap: wrap; gap: 5%; align-items: flex-start; min-height: 3.5vh; }
.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 { background: #0091db; color: #fff; font-weight: 500; font-size: 14px; border-radius: 5px; display: block; border: 1px solid #0091db; width: 5em; 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%; }
.pop-2depth .dxbl-modal-content { position: fixed; top: 55%; 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 4%; 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; /* ✅ title이 남는 공간 전부 차지 */ overflow: hidden; /* 긴 텍스트 넘치면 잘리게 */ white-space: nowrap; text-overflow: ellipsis; font-size: 1.8rem; }
.pop-2depth .dxbl-popup-header-button { margin-left: auto; min-width: unset; width: auto !important; /* ✅ 핵심: 내용만큼 */ height: auto; }
.pop-2depth .dxbl-popup-header-button .dxbl-image { width: 20px; height: 20px; display: block; }
.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: #0091db; 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%; }
.dxbl-popup-header-button .dxbl-image { width: 20px; height: 20px; background-color: currentColor; /* 색은 color 속성으로 제어 */ -webkit-mask: url("/images/close.svg") no-repeat center / contain; mask: url("/images/close.svg") no-repeat center / contain; fill: none; /* DevExpress 기본 fill 제거 */ }
.dxbl-popup-header-button svg { display: 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, .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; }
.pop-min .dxbl-modal-content .dxbl-modal-header-default { padding: 0 8%; }
.pop-min .dxbl-modal-body { margin: 1vh 0; padding: 1% 8%; }
.pop-min .dxbl-modal-body .cttbox-row { margin-bottom: 8px; }
/*VesselFilterPop*/
.filters-ico .form-check-label img { max-width: 20px; padding-right: 3px; padding-bottom: 1px; margin: 0 3px; }
/*// ───────── 별도 css ───────── //*/
.cttbox-row-mmsi { flex: 1; display: flex; flex-direction: column; }
.cttbox-row-mmsi .form-input { width: 68%; }
/* [250904 KSB]Wait 커서 추가 // 커서만 body가 책임지게 */
body.wait { cursor: wait !important; }
/* 자식 요소들만 클릭/선택 불가 */
body.wait * { pointer-events: none !important; user-select: none !important; cursor: wait !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%; /* select는 50% 비율 */ min-width: 5rem; /* 최소폭 */ box-sizing: border-box; font-size: 12px; }
.user-info-pop .dxbl-modal-content .dxbl-modal-body .div_user-info .cttbox-row .tel-inline .form-control { flex: 1 1 60%; /* input은 나머지 영역 */ 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; }
/* [251001 KHJ] 회원정보 수정 팝업 - 비밀번호
.password-rules label { display: inline-block; margin-right: 10px; font-size: 12px; border: none; }
.password-rules .valid { color: dodgerblue; }
.password-rules .invalid_pw { color: red; border: none !important; } */
/* [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; /* right 대신 */ transform: translateY(-50%); background: transparent; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; width: 30px; /* 모바일 터치 권장 사이즈 */ height: 30px; color: #555; /* 아이콘 색 (stroke=currentColor) */ 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); }
.password-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; margin-left:3px;}
.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; }
/* 체크 아이콘 공통 */
.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]비고 크기 수정 // [251014 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; }
/* [251013 KSB]툴팁 CSS 추가 + [251015 SYE] 자물쇠 아이콘 수정 */
.lock-icon-dark, .lock-icon-bright { cursor: pointer; display: inline-block; align-items: center; justify-content: center; vertical-align: middle; }
.lock-icon-dark svg, .lock-icon-bright svg { vertical-align: text-bottom; width: 16px; height: 16px; color: #efb616; display: block;}
.lock-txt {padding:0 3px;}
/*.lock-icon-bright svg { color: #cfd8e3; }
.lock-icon-dark svg { color: #5f6b7a; }*/
#globalTooltip { position: fixed; display: none; background: #2b2b2b; color: #fff; padding: 10px 14px; border-radius: 6px; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 100000; }
#globalTooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #2b2b2b transparent transparent transparent;}
#globalTooltip a { color: #4aa3ff; text-decoration: none; font-weight: 500;}
#globalTooltip a:hover { text-decoration: underline;}