/*
    Custom extensions (SHJ)
*/

@import url('font.css');


:root{
    --pc-height-full: calc(100vh - 225px);
    --pc-height-full-title: calc(100vh - 270px);
}



/* ===== COMMON ===== */
.card.h-full{height: calc(100% - 1.5rem);}
.metismenu .has-arrow::after{right: .7em;}
.form-label-title{font-weight: 600; color: var(--bs-dark); font-size: 1em;}
.bg-blue-light-line{background-color: var(--bg-e-blue-light); border: 1px solid var(--bg-e-blue-light-line);}

.img-sidebar-flag{width: 20px; height: 20px; object-fit: cover; object-position: center center; border-radius: 50%;}


.card{box-shadow: none; border: 1px solid var(--bs-e-gray-300); box-shadow: var(--bs-card-shadow);}
.card-body{padding: 1.5rem 1.5rem;}
.top-header .navbar{border-bottom: 1px solid var(--bs-e-gray-300); box-shadow: none;}


.btn-gx-md{padding: 7px 20px; text-align: center; min-width: 100px; font-size: 1rem;}

.fs-7{font-size: 0.95em;}
.fs-8{font-size: 0.90em;}

.row > [class*='col']{min-width: 0;}

.pagination a{color: var(--bs-e-gray-550);}
.pagination a:not(.active):hover,
.pagination a:not(.active):focus{color: var(--bs-e-gray-900);}

textarea.form-control::placeholder{color: var(--bs-e-gray-500);}

.text-gray-100 { color: var(--bs-e-gray-100); }
.text-gray-200 { color: var(--bs-e-gray-200); }
.text-gray-300 { color: var(--bs-e-gray-300); }
.text-gray-400 { color: var(--bs-e-gray-400); }
.text-gray-500 { color: var(--bs-e-gray-500); }
.text-gray-600 { color: var(--bs-e-gray-600); }
.text-gray-700 { color: var(--bs-e-gray-700); }
.text-gray-800 { color: var(--bs-e-gray-800); }
.text-gray-900 { color: var(--bs-e-gray-900); }


.pc-h-100{height: var(--pc-height-full);}


/* 타이틀 */
.gx-title-5{margin-bottom: 2.5rem; margin-top: 5px; font-weight: 600; color: var(--dtp-black); font-size: 1.4rem; background-repeat: no-repeat; background-position: left 2px center; padding-left: 28px; min-height: 30px; align-content: center; background-image: url('../images/ic-bullet-1.svg'); background-size: 16px;}
.gx-title-5:has(+ .gx-sub-title-1){margin-bottom: 0.8rem;}

.gx-title-6{margin-bottom: 1.9rem; font-weight: 600; color: var(--bs-e-gray-800); font-size: 1.20rem; padding-left: 22px; position: relative;}
.gx-title-6::before{content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--bs-primary);}

/* 서브 타이틀 */
.gx-sub-title-1{font-size: 1rem; color: var(--bs-e-gray-500); margin-bottom: 1.5rem;}


/* 높이값 */
.gvc-height-01{height: var(--pc-height-full-title); min-height: 500px;}


@media all and (max-width: 1200px){
    .btn-gx-md{padding: 5px 20px; min-width: 60px;}
    .gx-title-6{margin-bottom: 1.2rem; color: var(--bs-e-gray-650); font-size: 1.15rem; padding-left: 18px;}
    .gx-title-6::before{top: 6px; width: 5px; height: 5px;}

    .pc-h-100{height: auto;}

    .gvc-height-01{height: auto; min-height: 0;}

    .card-body{padding: 1rem;}
}




/* ===== SEARCH ===== */
.gx-search-top-area{background-color: var(--bg-e-blue-light); padding: 25px; margin-bottom: 20px; border-radius: var(--bs-border-radius);  border: 1px solid var(--bg-e-blue-search-border); box-shadow: var(--bs-card-shadow);}
.gx-search-top-area .col-form-label{font-weight: 600; color: var(--bs-e-gray-800);}
.gx-search-top-area .btn{font-weight: 400;}


@media all and (max-width: 1200px){
    .gx-search-top-area{padding: 20px; margin-bottom: 35px;}
}




/* ===== FORM ===== */

/* 라벨 */
.form-label{font-size: 0.97rem; color: var(--bs-e-gray-600); font-weight: 500;}

/* 탭 */
.nav.nav-tab-gx{margin-bottom: 30px; position: relative; border-bottom: none; --border-width: 1px;}
.nav.nav-tab-gx::before{content:""; position: absolute; left: 0; bottom: 0px; width: 100%; height: var(--border-width); background-color: var(--bs-primary); z-index: 1;}
.nav.nav-tab-gx.mg-lg{margin-bottom: 50px;}
.nav.nav-tab-gx > li{margin: -1px 0 0 -1px; border: var(--border-width) solid var(--bs-e-gray-300); position: relative; z-index: 2; border-radius: 10px 10px 0 0; overflow: hidden; border-bottom: var(--border-width) solid var(--bs-primary);}
.nav.nav-tab-gx > li:has(.active){border-width: var(--border-width); border-color: var(--bs-primary); border-bottom: var(--bs-e-white); z-index: 10;}
.nav.nav-tab-gx .nav-link{padding: 14px 30px; display: block; height: 100%; border-radius: 0; border:1px solid transparent; outline: none; box-shadow:none; background-color:var(--bs-e-gray-100);}
.nav.nav-tab-gx .nav-link .tab-title{font-weight: 500; font-size: 1rem; color: var(--bs-e-gray-600);}
.nav.nav-tab-gx .nav-link.active{background-color:var(--bs-e-white); border-color:transparent;  border-bottom-color:transparent; position:relative; z-index:3;}
.nav.nav-tab-gx .nav-link.active .tab-title{font-weight: 700; color: var(--bs-primary);}
.nav.nav-tab-gx .nav-link:hover,
.nav.nav-tab-gx .nav-link:focus-visible,
.nav.nav-tab-gx .nav-link:focus{outline:none; box-shadow:none; border-color:transparent;}


/* 폼 레이아웃 */
.gx-form-layout{--bs-gutter-x: 1.5rem; --bs-gutter-y: 0; padding:0 calc(0.5 * var(--bs-gutter-x));}
.gx-form-layout.type-line > .row{border-bottom: 1px solid var(--bs-border-color); padding: 12px 0;}
.gx-form-layout.type-line > .row:first-of-type{border-top: 1px solid var(--bs-border-color);}
.gx-form-layout.type-line-2 > .row{border-bottom: 1px solid var(--bs-border-color); padding: 12px 0;}
.gx-form-layout.type-line-2 > .row:last-of-type{border-bottom: none;}
.gx-form-layout > .row{padding: 7px 0;}
.gx-form-layout > .row > [class*='col']{align-content: center;}
.gx-form-layout .col-form-label{text-align: center;}
.gx-form-layout.text-left-label .col-form-label{text-align: left;}

/* 입력 텍스트 */
.gx-after-text{min-height: 37px; align-content: center; padding: 0 10px; line-height: 1.4; font-size: 1rem; font-weight: 500; color: var(--dtp-black); margin: 0; line-height: 1.6;}
.gx-after-text :where(p, span, a){font-size: inherit; font-weight: inherit; color: inherit; margin: 0;}

.help-textarea {resize: vertical; min-height: 180px;}
.help-textarea::placeholder {color: var(--bs-e-gray-500); font-size: 1rem;}


/* 필터 리스트 */
.filter-list {height: 150px; overflow-y: auto; padding: 0; background-color: var(--bs-e-white); margin: 0;}
.filter-list > li{padding: 0.6rem 1rem; margin: 0; border-bottom: 1px solid var(--gray-table-border);}
.filter-list .form-check label{display: block;}


/* 체크박스 - 전부 체워져 있는 */
.filter-tags .form-check {padding: 0;}
.filter-tags .form-check-input {display: none;}
.filter-tags .form-check-label {cursor: pointer; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--bs-e-gray-300); background-color: var(--bs-e-white); font-size: 0.875rem; font-weight: 500; color: var(--bs-e-gray-700); transition: all 0.15s ease-in-out;}
.filter-tags .form-check-label:hover {background-color: var(--bs-e-gray-100);}
.filter-tags .form-check-input:checked + .form-check-label {background-color: var(--bs-blue); border-color: var(--bs-blue); color: var(--bs-e-white);}


/* 인풋 - 캘린더 calendar */
.input-calendar{padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2875_35839' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2875_35839)'%3E%3Cpath d='M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z' fill='%23555555'/%3E%3C/g%3E%3C/svg%3E%0A");}

/* 게시판 페이지 텍스트 */
.page-count{font-size: 1rem; color: var(--dtp-gray-600); margin-left: 0.5rem; margin-bottom: 0.2rem;}
.page-count .current{color: var(--dtp-black); font-weight: 600; margin-left: 5px;}


@media all and (max-width: 1200px){

    /* 탭 */
    .nav.nav-tab-gx{margin-bottom: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); text-align: center; border-bottom: none;}
    .nav.nav-tab-gx::before{display: none;}
    .nav.nav-tab-gx.mg-lg{margin-bottom: 25px;}
    .nav.nav-tab-gx > li{border-bottom-color: var(--bs-e-gray-300);}
    .nav.nav-tab-gx > li:has(.active){border-color: var(--bs-primary); border-bottom: var(--border-width) solid var(--bs-primary);}
    .nav.nav-tab-gx .nav-link{padding: 10px 12px;}
    .nav.nav-tab-gx .nav-link .tab-title{font-size: 1rem;}

    .gx-after-text{padding: 0; min-height: auto;}

    .filter-list {height: 110px;}
}


@media all and (max-width: 575px){

    .form-label{color: var(--bs-e-gray-700); font-weight: 600;}


    /* 폼 레이아웃 */
    .gx-form-layout{padding: 0;}
    .gx-form-layout.type-line > .row{border-bottom: none; padding: 0;}
    .gx-form-layout.type-line > .row:first-of-type{border-top: none;}
    .gx-form-layout.type-line-2 > .row{border-bottom: none; padding: 0;}
    .gx-form-layout.type-line-2 > .row:last-of-type{border-bottom: none;}
    .gx-form-layout > .row{padding: 0;}
    .gx-form-layout > .row > [class*='col']{margin-top: 3px;}
    .gx-form-layout .col-form-label{text-align: left;}
    .gx-form-layout .col-form-label.form-label{padding: 5px 15px; background-color: var(--dtp-light); margin: 10px 5px; width: calc(100% - 10px); border-radius: 3px;}
}





/* ===== BREADCRUMB - NAV ===== */

.header-breadcrumb-group{display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin: 5px 0 30px; min-height: 30px; align-content: center;}
.header-breadcrumb-group:has(.gx-title-5){margin-bottom: 2.5rem;}
.header-breadcrumb-group .gx-title-5{margin-bottom: 0;}

.page-breadcrumb-2 .list{display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0;}
.page-breadcrumb-2 .list > li{list-style: none; padding-right: 30px; position: relative; background-image: url("data:image/svg+xml,%3Csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.775 20L0 18.225L8.225 10L0 1.775L1.775 0L11.775 10L1.775 20Z' fill='%23888888'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: right 12px center; background-size: 5px;}
.page-breadcrumb-2 .list > li:last-of-type{background: none; padding-right: 0;}
.page-breadcrumb-2 .list > li > a{font-size: 16px; color: var(--bs-e-gray-600); font-weight: 400;}
.page-breadcrumb-2 .list > li > a:hover,
.page-breadcrumb-2 .list > li > a:focus{text-decoration: underline;}
.page-breadcrumb-2 .list > li span{font-size: 1.3em; display: block;}
.page-breadcrumb-2 .list > li .active{color: var(--dtp-black); font-weight: 600; font-size: 17px;}


@media all and (max-width: 1200px){
    .page-breadcrumb-2 .list > li:not(:has(.active), :first-of-type){display: none;}
    .page-breadcrumb-2 .list > li > a{font-size: 15px;}
    .page-breadcrumb-2 .list > li > .active{font-size: 15px;}
}







/* ===== grid table ===== */
.grid-table-box{width: 100%;}





/* ===== TABLE ===== */
.gx-table-group{width: 100%; overflow: auto;}

.form-table-list{width: 100%; border-top: 1px solid var(--gray-table-border); line-height: 1.4;}
.form-table-list tr{border-bottom: 1px solid var(--gray-table-border);}
.form-table-list td{padding: 12px 10px; line-height: 1.6; font-size: 1rem; color: var(--dtp-black); font-weight: 500;}
.form-table-list .form-label{text-align: center; display: block;}
.form-table-list .bor-r{border-right: 1px solid var(--gray-table-border);}



@media all and (max-width: 1000px){
    .form-table-list{display: block; border-top: none;}
    .form-table-list colgroup{display: none;}
    .form-table-list tbody{display: block; width: 100%;}
    .form-table-list tr{display: block; width: 100%; border-bottom: none;}
    .form-table-list th,
    .form-table-list td{display: block; width: 100%;}
    .form-table-list .form-label{text-align: center; display: block;}
    .form-table-list th:has(.col-form-label.form-label),
    .form-table-list td:has(.col-form-label.form-label){padding: 0;}
    .form-table-list .col-form-label{text-align: left;}
    .form-table-list .col-form-label.form-label{padding: 7px 15px; background-color: var(--dtp-light); border-radius: 3px; margin: 0; font-weight: 600;}
    .form-table-list td.bor-r{border-right: none; border-bottom: 1px solid var(--gray-table-border);}
}










/* ===== LOGIN ===== */

.login-bg-img{width: 100%; height: 100%; object-fit: cover; object-position: center center; max-height: 100vh;}

.logo-gnl-box{display: inline-flex; align-items: center; gap: 0.5rem;}

.auth-login{letter-spacing: -0.020em; line-height: 1.3; padding: 60px 30px; overflow: auto; min-height: 100vh; width: 100%; margin: 0; background: linear-gradient(180deg, #EEF3FF 0%, #F7FAFF 35%, #fbfcfd 100%);}

.auth-login-bg{background: url('../images/login-bg-01.jpg') no-repeat center center / cover !important;}

.auth-login .card {border-color: #DCE4F2; box-shadow: 0 8px 24px rgba(0,0,0,0.06);}


.auth-login.center{display: flex; align-items: center; justify-content: center;}
.auth-login .card-body{padding: 3rem;}
.auth-login :where(.form-select, .form-control, button){letter-spacing: -0.025em;}
.auth-login .form-label{font-weight: 500;}
.auth-login .form-control.is-invalid + .input-group-text{border-color: var(--bs-form-invalid-border-color);}
.auth-login .form-control.is-valid + .input-group-text{border-color: var(--bs-form-valid-border-color);}

.auth-login .login-container{width: 100%; max-width: 520px; margin: auto;}
.auth-login .join-container{width: 100%; max-width: 700px; margin: 50px auto 0;}

.login-header{text-align: center; margin-bottom: 25px; min-height: 50px; align-content: center;}
.login-header.left{text-align: left;}
.login-header.left .logo-gnl-box{margin-left: 0;}
.login-header.left:has(.logo-gnl-box){margin-bottom: 25px;}
.login-header:has(.logo-gnl-box){margin-bottom: 40px;}
.login-header .logo-gnl-box{margin-left: -15px; margin-bottom: 10px;}
.login-header .login-sub-title{font-size: 20px; font-weight: 600; color: var(--dtp-black); line-height: 1.5;}

.login-bott-action-link{display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 0; margin: 20px 0 0;}
.login-bott-action-link > a{display: block; padding: 0 15px; font-size: 15px; color: var(--bs-secondary); line-height: 1; border-right: 1px solid var(--bs-border-color); letter-spacing: -0.03em; min-width: 30%; text-align: center;}
.login-bott-action-link > a:last-of-type{border-right: none;}
.login-bott-action-link > a:hover,
.login-bott-action-link > a:focus{text-decoration: underline;}

.btn-auth-01{width: 100%; height: 100%; border: 1px solid var(--bs-border-color); border-radius: 5px; width: 100%; min-height: 50px; padding: 5px 10px; align-content: center; vertical-align: middle; display: flex; align-items: center; justify-content: center; gap: 10px; background-color: var(--bs-e-white); font-size: 15px; color: var(--bs-secondary); transition: .25s;}
.btn-auth-01 i{font-size: 1.3em; transition: .25s;}
.btn-auth-01:hover,
.btn-auth-01:focus{background-color: var(--dtp-light); color: var(--dtp-black); border-color: var(--dtp-black);}

.auth-code-input-group{display: flex; gap: 10px; justify-content: center;}
.auth-code-input-group .auth-code-input{padding: 5px 2px; text-align: center; height: 50px; max-width: 50px; font-size: 20px; font-weight: 600; text-align: center;}

.auth-otp-resend{display: flex; margin: 5px 0; padding: 0 20px; align-items: center; justify-content: center; gap: 15px;}
.auth-otp-resend .time{font-size: 15px;}
.auth-otp-resend .time b{color: var(--dtp-black); font-size: 1.1em; margin: 0 2px;}
.auth-otp-resend .btn{font-weight: 600;}
.auth-otp-resend.fill{padding: 0 10px;}
.auth-otp-resend.fill .time{flex: 1;}

.text-join-gray{color: var(--bs-e-gray-550); font-size: .875em;}



.login-complete-header{padding: 30px 0 50px;}
.login-complete-header .icon-group{text-align: center; margin: 0 0 30px;}
.login-complete-header .circle-icon{font-size: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--dtp-light); width: 70px; height: 70px; color: var(--dtp-dark);}
.login-complete-header .circle-icon.warning{background-color: rgba(255, 193, 7, .15); color: var(--bs-warning);}
.login-complete-header .circle-icon.danger{background-color: rgba(252, 24, 90, .10); color: var(--bs-danger);}
.login-complete-header .circle-icon span{font-size: 40px; color: var(--dtp-black);}
.login-complete-header .circle-icon.warning span{color: var(--bs-warning);}
.login-complete-header .circle-icon.danger span{color: var(--bs-danger);}
.login-complete-header .status-text{margin: 0; text-align: center; font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--dtp-black); letter-spacing: -0.03em; word-break: keep-all;}

.login-auth-warning-box{background-color: var(--dtp-light); border-radius: 10px; padding: 25px 20px 30px; text-align: center; margin: 35px 0;}
.login-auth-warning-box .sbj{margin: 0 0 15px; font-size: 16px; font-weight: 700; color: var(--dtp-black);}
.login-auth-warning-box .desc{margin: 0; font-size: 15px; color: var(--bs-e-gray-600);}

.auth-terms-title{display: flex; flex-wrap: wrap; align-items: center;}
.auth-terms-title .form-check{font-size: 16px; margin: 0; line-height: 1.5; color: var(--bs-e-gray-550); font-weight: 400;}
.auth-terms-title .form-check:has(.form-check-input:checked){font-weight: 600; color: var(--bs-e-gray-800);}
.auth-terms-title > a{font-size: 14px;}
.auth-terms-title > a:hover,
.auth-terms-title > a:focus{text-decoration: underline;}
.auth-terms-title > a::after{font-family: 'Material Icons Outlined'; content: '\e5e1'; font-size: 10px; margin-left: 3px;}

.auth-terms-contents{margin-top: 15px; padding: 20px 25px; border: 1px solid var(--bs-e-gray-300); border-radius: 10px; line-height: 1.6; font-size: 14px; letter-spacing: -0.025em; min-height: 100px; max-height: 250px; overflow: auto;}
.auth-terms-sub-desc{padding-left: 20px; margin-top: 8px; color: var(--bs-e-gray-550); font-size: 14px;}


.auth-member-type-select{display: flex; flex-wrap: wrap; width: 100%; align-items: center; min-height: 50px; margin-bottom: 15px; position: relative; padding: 5px 25px; border: 1px solid var(--bs-e-gray-300); border-radius: 10px; gap: 15px; font-size: 15px; transition: .25s; background-repeat: no-repeat; background-position: right 15px center; background-image: url("data:image/svg+xml,%3Csvg width='17' height='13' viewBox='0 0 17 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.7 12.025L0 6.325L1.425 4.9L5.7 9.175L14.875 0L16.3 1.425L5.7 12.025Z' fill='%23adb5bd'/%3E%3C/svg%3E%0A"); padding-right: 40px; background-size: 13px;}
.auth-member-type-select .form-input{position: absolute; left: 0; top: 0; visibility: hidden; width: 100%; height: 100%;}
.auth-member-type-select .icon{font-size: 1.3em; vertical-align: middle; color: var(--bs-e-gray-500); align-content: center;}
.auth-member-type-select .icon span{font-size: inherit; vertical-align: middle;}
.auth-member-type-select .text{font-weight: 400; color: var(--bs-e-gray-500);}
.auth-member-type-select:last-of-type{margin-bottom: 0;}

.auth-member-type-select:has(.form-input:checked){border-color: var(--bs-blue); background-image: url("data:image/svg+xml,%3Csvg width='17' height='13' viewBox='0 0 17 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.7 12.025L0 6.325L1.425 4.9L5.7 9.175L14.875 0L16.3 1.425L5.7 12.025Z' fill='%230d6efd'/%3E%3C/svg%3E%0A"); background-color: rgba(13, 110, 253, .05);}
.auth-member-type-select:has(.form-input:checked) .icon{color: var(--bs-blue); font-weight: 500;}
.auth-member-type-select:has(.form-input:checked) .text{color: var(--bs-blue); font-weight: 500;}

.auth-member-type-select.green:has(.form-input:checked){border-color: var(--bs-success); background-image: url("data:image/svg+xml,%3Csvg width='17' height='13' viewBox='0 0 17 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.7 12.025L0 6.325L1.425 4.9L5.7 9.175L14.875 0L16.3 1.425L5.7 12.025Z' fill='%2302c27a'/%3E%3C/svg%3E%0A"); background-color: rgba(2, 194, 122, .05);}
.auth-member-type-select.green:has(.form-input:checked) .icon{color: var(--bs-success);}
.auth-member-type-select.green:has(.form-input:checked) .text{color: var(--bs-success);}

.separator.cus-sepa .line{background-color: var(--bs-e-gray-200);}
.separator.cus-sepa span{font-weight: 600; color: var(--dtp-black);}


/* 테이블 */
.hs-table-group{width: 100%; overflow: auto;}
.hs-tbl-1{width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 5px;}
.hs-tbl-1 th{background-color: var(--gray-table); border: 1px solid var(--gray-table-border); text-align: center; padding: 10px 10px; color: var(--dtp-black); font-weight: 500; vertical-align: middle; font-size: 14px; font-weight: 600; word-break: break-all;}
.hs-tbl-1 td{padding: 10px 10px;  border: 1px solid var(--gray-table-border); text-align: center; color: var(--bs-e-550); vertical-align: middle; font-size: 14px; word-break: break-all;}
.hs-tbl-1 .textL{text-align: left; padding-left: 20px;}
.hs-tbl-1.sm th{font-size: 0.9rem; padding: 0.6rem 0.4rem;}
.hs-tbl-1.sm td{font-size: 0.9rem; padding: 0.6rem 0.4rem;}

.fs-20p{font-size: 20px;}



/* 프로그래스 바 */
.join-stepper {max-width: 980px; margin: 10px auto 55px;}
.join-stepper-list{display: flex; align-items: flex-start; gap: 0; padding: 0; margin: 0; list-style: none;}
.join-stepper-item{flex: 1; position: relative; text-align: center; padding-top: 0;}
.join-stepper-item::before{content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: var(--gray-table-border); z-index: 0;}
.join-stepper-item:first-child::before{display: none;}

.join-stepper-dot{width: 33px; height: 33px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--gray-table); border: 1px solid var(--gray-table-border); color: var(--bs-e-gray-550); position: relative; z-index: 1; font-size: 15px;}
.join-stepper-label{display: block; margin-top: 12px; font-weight: 400; color: var(--bs-e-gray-550); font-size: 14px;}

.join-stepper-item.is-done .join-stepper-dot{background: var(--dtp-blue-light); border-color: var(--dtp-blue-light); color: var(--bs-blue);}
.join-stepper-item.is-done::before{background: var(--dtp-blue-light);}
.join-stepper-item.is-done .join-stepper-label{color: #3f7bd1;}
.join-stepper-item.is-active .join-stepper-dot{background: var(--bs-blue); border-color: var(--bs-blue); color: var(--bs-e-white);}
.join-stepper-item.is-active .join-stepper-label{color: var(--bs-blue); font-weight: 600;}
.join-stepper-item.is-active::before{background: #88b9ff;}




@media all and (max-width: 1200px){
    .auth-login{padding: 30px 15px;}
    .auth-login .card-body{padding: 3rem 2rem;}
    .auth-login .join-container{margin-top: 0;}

    .login-header .login-sub-title{font-size: 18px;}

    .login-container{width: 100%; max-width: 500px; margin: auto;}

    .login-header{margin-bottom: 22px; min-height: 40px;}
    .login-header:has(.logo-gnl-box){margin-bottom: 35px;}

    .login-bott-action-link > a{padding: 0 10px; font-size: 13px;}

    .btn-auth-01{min-height: 45px; font-size: 14px;}

    .auth-code-input-group{display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
    .auth-code-input-group .auth-code-input{flex: 1;}

    .login-complete-header{padding: 10px 0 30px;}
    .login-complete-header .icon-group{text-align: center; margin: 0 0 30px;}
    .login-complete-header .circle-icon{width: 60px; height: 60px;}
    .login-complete-header .circle-icon span{font-size: 30px;}
    .login-complete-header .status-text{font-size: 18px;}

    .login-auth-warning-box{padding: 25px 20px;}


    .hs-tbl-1 th{padding: 10px 5px; font-size: 13px;}
    .hs-tbl-1 td{padding: 10px 5px; font-size: 13px;}


    /* 프로그래스 바 */
    .join-stepper {max-width: 980px; margin: 8px auto 40px;}
    .join-stepper-label{font-size: 12px; padding: 0 3px;}
    .join-stepper-dot{width: 30px; height: 30px; font-size: 13px;}
    .join-stepper-item::before{top: 15px;}
}

@media all and (max-width: 600px){
    .hs-table-group{width: 100%; overflow: auto; }
    .hs-tbl-1.mobile{display: block; width: 100%;}
    .hs-tbl-1.mobile colgroup{display: none;}
    .hs-tbl-1.mobile thead{display: none;}
    .hs-tbl-1.mobile tbody{display: grid; width: 100%; grid-template-columns: 1fr; gap: 10px;}
    .hs-tbl-1.mobile tr{display: block; border: 1px solid var(--bs-e-gray-300); border-radius: 10px; padding: 10px 10px; display: flex; flex-wrap: wrap; align-items: center;}
    .hs-tbl-1.mobile td{display: block; width: 100%; border: none; padding: 5px 10px; margin: 0; text-align: left;}
    .hs-tbl-1.mobile td[data-mo-title]::before{content: '◦ ' attr(data-mo-title)' : '; font-weight: 600; margin-right: 5px; color: var(--dtp-black);}
}





/* ===== 에러 페이지 (Error Page) ===== */
.error-page-section{width: 100%; text-align: center; word-break: break-all;}
.error-page-section .inner{width: 100%; padding: 100px 50px;}
.error-page-section .img-box{width: 100%; max-width: 380px; margin: 0 auto 10px;}
.error-page-section .img-box img{width: 100%;}
.error-page-section h2{font-size: 180px; font-weight: 900; color: var(--bs-e-gray-900); margin-bottom: 5px;}
.error-page-section .sub-title{font-size: 28px; font-weight: 700; color: var(--bs-e-gray-700); letter-spacing: -0.03em; margin-bottom: 5px;}
.error-page-section .desc{font-size: 17px; font-weight: 400; color: var(--bs-e-gray-550);}
.error-page-section .btn-box{margin-top: 60px;}


@media all and (max-width: 900px){
    .error-page-section .inner{padding: 80px 50px;}
    .error-page-section h2{font-size: 90px;}
    .error-page-section .sub-title{font-size: 18px; font-weight: 600;}
    .error-page-section .desc{font-size: 14px;}
    .error-page-section .btn-box{margin-top: 30px;}
}










/* ===== DTP ===== */
.dtp-route-list-group{letter-spacing: -0.01em;}
.dtp-route-list{padding: 5px;}
.dtp-route-list > li{list-style: none; position: relative; display: flex; padding-bottom: 20px;}
.dtp-route-list > li::before{content: ""; position: absolute; left: 15px; height: 100%; width: 1px; background-color: var(--bs-gray-300); z-index: 0;}
.dtp-route-list > li:first-child::before{top: 10px;}
.dtp-route-list > li:last-child::before{height: 10px;}
.dtp-route-list > li:last-of-type{padding-bottom: 0;}

.dtp-route-list .route-step{flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;  background-color: var(--dtp-blue-light); display: flex; justify-content: center; align-items: center; margin-top: 10px; z-index: 5;}
.dtp-route-list .route-step .number{font-weight: 700; color: var(--bs-blue); font-size: 15px;}
/* .dtp-route-list .route-step .icon{position: absolute; right: -10px; bottom: -15px; font-size: 5px; color: #4c94ff;} */
.dtp-route-list .route-step .icon{position: absolute; left: 19px; top: 22px; font-size: 22px; color: var(--dtp-route-icon); transition: .25s;}
.dtp-route-list .route-step .icon span{font-size: inherit;}
.dtp-route-list .route-step .icon:only-child{position: relative; right: 0; bottom: 0; font-size: 4px;}

.dtp-route-list li:has(.data-group.show) .route-step .icon{top: 50%; left: 5px;}

.dtp-route-list .route-contents{flex: 1; margin-left: 18px; min-width: 0;}
.dtp-route-list .route-contents .code-name{font-size: 15px; font-weight: 700; color: var(--dtp-black); padding: 10px 25px 10px 15px; display: block; border-radius: 10px; transition: .25s; position: relative;}
.dtp-route-list .route-contents .code-name::after{content: ""; display: block; position: absolute; right: 7px; top: calc(50% - 10px); width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7.4L0 1.4L1.4 0L6 4.575L10.6 0L12 1.4L6 7.4Z' fill='%23888888'/%3E%3C/svg%3E%0A"); background-size: 10px; transition: .4s;}
.dtp-route-list .route-contents .code-name.active::after{transform: rotate(180deg);}
.dtp-route-list .route-contents .code-name:focus,
.dtp-route-list .route-contents .code-name:hover{background-color: var(--bg-e-blue-light);}
.dtp-route-list .route-contents .code-name:only-child{margin-bottom: 0;}
.dtp-route-list .route-contents:not(:has(.data-group)) .code-name::after{display: none;}

.dtp-route-list .route-contents .data-group{height: auto; max-height: 0; margin-top: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);}
.dtp-route-list .route-contents .data-group.show{max-height: 1000px; transition: max-height 1s ease-in-out;}
.dtp-route-list .route-contents .data-group .inner{padding: 20px; border-radius: 10px; background-color: var(--dtp-light); margin-top: 5px; max-height: 950px; overflow: auto;}

.dtp-route-list .route-contents .data-row{font-size: 14px; color: var(--bs-secondary); margin-bottom: 2px; line-height: 1.4;}
.dtp-route-list .route-contents .data-row .sbj{font-weight: 400;}
.dtp-route-list .route-contents .data-row .data{font-weight: 600; color: var(--dtp-gray-700);}
.dtp-route-list .route-contents .data-row:last-of-type{margin-bottom: 0;}


.dtp-card-footer{border-color: var(--bs-border-color); background-color: transparent;}

.dropdown-custom{padding: 10px; min-width: 180px; max-width: 220px;}
.dropdown-custom .result-list{margin: 0; padding: 0; max-height: 200px; overflow: auto;}
.dropdown-custom .result-list > li{list-style: none;}
.dropdown-custom .dropdown-item{padding: 5px 10px; word-break: break-all; white-space: wrap; flex: 1; min-width: 0;}

.dropdown-custom2{padding: 10px; min-width: 180px; max-width: 350px; width: 100%;}

.switch-lg .form-check-input {width: 3rem; height: 1.5rem;}
.switch-lg .form-check-input::before {width: 1.2rem; height: 1.2rem;}

.switch-xl .form-check-input {width: 3.5rem; height: 1.75rem;}
.switch-xl .form-check-input::before {width: 1.45rem; height: 1.45rem;}


.dtp-total-emission{min-height: 100%; align-content: center;}
.dtp-total-emission .tit{ text-align: center; margin-bottom: 10px; font-size: 16px; font-weight: 600; line-height: 1.2;}
.dtp-total-emission .value{margin: 0; text-align: center; font-size: 55px; line-height: 1; color: var(--bs-blue);}
.dtp-total-emission .value strong{font-weight: 900; font-weight: bold; line-height: 1;}


.dtp-leg-emission-rate-group{padding: 30px 10px 0; border-radius: 20px; background-color: var(--bg-e-blue-light);}
.dtp-leg-emission-rate{display: flex; position: relative; padding: 0 20px;}
.dtp-leg-emission-rate .leg-node{flex-shrink: 0; padding-bottom: 50px; position: relative;}
.dtp-leg-emission-rate .hd{height: 50px; align-content: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.dtp-leg-emission-rate .hd .line{width: 100%; height: 3px; background-color: var(--bs-gray-400);}
.dtp-leg-emission-rate .hd p{margin: 0; font-size: 14px; font-weight: 500; padding: 5px; line-height: 1.2; color: var(--bs-secondary);}
.dtp-leg-emission-rate .hd .percent{font-weight: 700; font-size: 1.1em; color: var(--bs-dark-blue);}

.dtp-leg-emission-rate .direction{width: 40px; height: 40px; border-radius: 50%; background-color: var(--dtp-blue-light); display: flex; align-items: center; justify-content: center; border: 1px solid #b6c7dd; position: relative;}
.dtp-leg-emission-rate .direction b{font-size: 16px; font-weight: 600; color: var(--bs-blue);}

.dtp-leg-emission-rate .name{position: absolute; top: 55px; left: 50%; transform: translateX(-50%); width: 100px; text-align: center; word-break: break-all; font-size: 15px; margin: 0; font-size: 14px; font-weight: 600; color: var(--dtp-black);}


/* 테이블 */
.dtp-table-group{width: 100%; overflow: auto;}

.dtp-table-list{width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; word-break: break-all;}

.dtp-table-list.sticky thead{position: sticky; left: 0; top: 0; z-index: 1;}
.dtp-table-list.bb-none th{border-bottom: none;}
.dtp-table-list.blue-light-header th{background-color: var(--bg-table-blue-light);}
.dtp-table-list.red-light-header th{background-color: var(--bg-table-red-light);}

.dtp-table-list th{background-color: var(--gray-table); border-bottom: 1px solid var(--gray-table-border); text-align: center; padding: 15px 10px; color: var(--dtp-black); font-weight: 500; vertical-align: middle; box-shadow: inset 0 1px 0 #dee2e6; font-size: 1rem;}
.dtp-table-list td{padding: 15px 10px;  border-bottom: 1px solid var(--gray-table-border); text-align: center; color: var(--bs-e-gray-550); vertical-align: middle; font-size: 1rem;}

.dtp-table-list .textL{text-align: left; padding-left: 20px;}

.dtp-table-list th:not(:first-child),
.dtp-table-list td:not(:first-child) {border-left: 1px solid var(--gray-table-border);}
.dtp-table-list th[rowspan]:not(:last-child),
.dtp-table-list td[rowspan]:not(:last-child) {border-right: 1px solid var(--gray-table-border);}

.dtp-table-list.pd-sm th{padding: 0.77rem; font-size: 0.98rem;}
.dtp-table-list.pd-sm td{padding: 0.77rem; font-size: 0.98rem;}

.dtp-table-list .sbj-link{display: block; text-align: left; padding: 0 10px; color: inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.dtp-table-list .sbj-link:hover,
.dtp-table-list .sbj-link:focus{text-decoration: underline;}

.dtp-graph-group-1{display: flex; align-items: center; gap: 10px 30px; justify-content: center; flex-wrap: wrap;}
.dtp-graph-group-1:has(.graph-gauge){max-width: 350px; margin: 0 auto;}
.dtp-graph-group-1 .graph-gauge{ flex-shrink: 0; flex: 1; min-width: 0; max-width: 200px;}
.dtp-graph-group-1 .graph-stack{ flex-shrink: 0; flex: 1; max-width: 300px; width: 100%;}
.dtp-graph-group-1 .cate-box{display: flex; gap: 10px 20px; flex-wrap: wrap; width: 100%; justify-content: center;}
.dtp-cate-base{display: flex; align-items: center; gap: 5px;}
.dtp-cate-base .squre{width: 12px; height: 12px; display: block;}
.dtp-cate-base .text{font-size: 13px; color: var(--bs-secondary);}
.dtp-cate-base .data{font-size: 13px; font-weight: 700; color: var(--dtp-black);}


.dtp-height-01{height: calc(100vh - 180px); min-height: 350px;}
.dtp-height-02{min-height: var(--pc-height-full);}
.dtp-height-scroll{min-height: calc(100vh - 130px);}

.dtp-display{display: none; scroll-margin-top: 130px;}
.dtp-display.show{display: block; animation: show .5s forwards;}

.flex-column-area{display: flex; flex-direction: column; min-height: 0;}
.flex-column-area .flex-scroll{flex: 1; overflow: auto; min-height: 0;}

@keyframes show {
    0%{opacity: 0; transform: translateY(50px);}
    100%{opacity: 1; transform: translateY(0);}
}


#world-map-markers {position: relative; width: 100%; height: 100%; min-height: 300px; align-content: center;}
#world-map-markers .jvectormap-container {position: absolute; inset: 0; height: calc(100% - 50px) !important;}

body:has(#world-map-markers) .jvectormap-tip{position: fixed; display: none !important;}



@media all and (max-width: 1200px){
    .card.h-full{height: auto;}

    .dtp-total-emission{margin: 10px 0;}
    .dtp-total-emission .tit{ margin-bottom: 5px; font-size: 15px;}
    .dtp-total-emission .value{font-size: 40px; line-height: initial;}
    .dtp-total-emission .value strong{line-height: initial;}


    .dtp-leg-emission-rate-group{padding: 30px 5px 0;}
    .dtp-leg-emission-rate{padding: 0 15px;}
    .dtp-leg-emission-rate .leg-node{padding-bottom: 50px;}
    .dtp-leg-emission-rate .hd{height: 40px;}
    .dtp-leg-emission-rate .hd p{font-size: 12px;}
    .dtp-leg-emission-rate .hd .percent{font-size: 1.05em;}

    .dtp-leg-emission-rate .direction{width: 25px; height: 25px;}
    .dtp-leg-emission-rate .direction b{font-size: 14px;}

    .dtp-leg-emission-rate .name{top: 45px; font-size: 13px; width: 70px;}

    .dtp-table-group.mobile-height{max-height: 300px;}

    .dtp-table-list th{padding: 13px 7px;}
    .dtp-table-list td{padding: 13px 7px;}

    .dtp-table-list .textL{padding-left: 15px;}

    .dtp-height-01{height: auto; min-height: auto;}
    .dtp-height-02{min-height: auto;}
    .dtp-height-scroll{min-height: auto;}

    .dropdown-custom2{padding: 10px; max-width: 320px; width: 85vw;}

}







/* ===== 트리 목록 JStree ===== */
.tree-scroll {max-height: 630px; overflow: auto; background: var(--bs-e-white);}

.gx-menu-tree .jstree-wholerow.jstree-wholerow-clicked {background: rgba(13, 110, 253, .1); box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .1); border-radius: .375rem;}
.gx-menu-tree .jstree-wholerow.jstree-wholerow-hovered {background: rgba(13, 110, 253, .1);}
.gx-menu-tree .jstree-container-ul .jstree-anchor{color: var(--bs-e-gray-600);}
.gx-menu-tree .jstree-container-ul .text-icon{color: var(--bs-e-gray-550);}

.gx-menu-tree .jstree-anchor {white-space: nowrap;}
.is-order-on .gx-menu-tree {outline: 2px dashed rgba(13, 110, 253, .25); outline-offset: 6px; border-radius: 8px;}
.gx-menu-tree .jstree-icon {font-size: 18px; margin-right: 6px;}
.gx-menu-tree .jstree-anchor {display: inline-flex; align-items: center; gap: 4px;}


@media all and (max-width: 990px){
    .tree-scroll {max-height: 400px; overflow: auto; background: var(--bs-e-white);}
}




/* ===== 댓글(코멘트) comment ===== */
.gx-comment-list{border-top: 1px solid var(--bs-e-gray-300); padding-left: 0;}
.gx-comment-list > li{list-style: none; padding-left: 0;}
.gx-comment-list .comment-item{padding: 20px 15px; display: flex; flex-direction: column; gap: 15px 0; border-bottom: 1px solid var(--bs-e-gray-300);}
.gx-comment-list .comment-item .cm-header{display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;}
.gx-comment-list .comment-item .cm-header .info-box{margin-right: auto; display: flex; align-items: center; gap: 5px 10px; flex-wrap: wrap;}
.gx-comment-list .comment-item .cm-header .action-box{margin-left: auto;}
.gx-comment-list .comment-item .cm-header .name{font-size: 1.07rem; font-weight: 600; color: var(--dtp-black);}
.gx-comment-list .comment-item .cm-header .date{color: var(--bs-e-gray-550); font-size: 15px;}
.gx-comment-list .comment-item .cm-body > p{margin: 0; font-size: 1rem; color: var(--dtp-dark); line-height: 1.6;}
.gx-comment-list .comment-item.reply{padding-left: 50px; background-repeat: no-repeat; background-position: left 22px top 27px; background-size: 12px; background-image: url("data:image/svg+xml,%3Csvg width='15' height='17' viewBox='0 0 15 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 17L7.575 15.575L11.175 12H0V0H2V10H11.175L7.575 6.4L8.975 4.975L15 11L9 17Z' fill='%23888888'/%3E%3C/svg%3E%0A");}



@media screen and (max-width: 1000px) {
    .gx-comment-list .comment-item{padding: 15px 10px;}
    .gx-comment-list .comment-item .cm-header .name{font-size: 15px;}
    .gx-comment-list .comment-item .cm-header .date{font-size: 14px;}
    .gx-comment-list .comment-item .cm-body > p{font-size: 14px;}
    .gx-comment-list .comment-item.reply{padding-left: 40px; background-position: left 15px top 22px; background-size: 10px;}
}








/* ===== GVC 내용 Contents ===== */
.gvc-dash-title{background-color: var(--bg-e-blue-light); text-align: center; border-radius: 15px; margin-bottom: 40px; padding: 1.8rem 2rem; background: linear-gradient(270deg, #eb4437 0%, #4D4DFF 100%);}
.gvc-dash-title h2{margin: 0; color: var(--bs-e-white); font-weight: 700; font-size: 2rem;}

.gvc-graph-box{width: 100%;}
.gvc-graph-box img{max-width: 100%;}
.gvc-graph-box .graph-img{width: 100%;}

.gx-description-area{background-color: rgba(var(--bs-success-rgb), .07); border: 1px solid rgba(var(--bs-success-rgb), .3); border-radius: 10px; padding: 1.5rem 1.5rem;}
.gx-description-area .data-value{margin-bottom: 8px; font-size: 1rem;}
.gx-description-area .data-value:last-of-type{margin-bottom: 0;}
.gx-description-area .sbj{font-weight: 600; color: var(--dtp-black);}
.gx-description-area .desc{font-weight: 400; color: var(--dtp-black);}

.list-line-type{padding: 0;}
.list-line-type > li{list-style: none; border-bottom: 1px solid var(--gray-table-border); padding: 13px 5px;}
.list-line-type > li:last-of-type{border-bottom: none;}

.number-text-item{display: flex;}
.number-text-item .num{flex-shrink: 0; margin-right: 10px; width: 21px; height: 21px; background-color: var(--bs-primary); border-radius: 50%; color: var(--bs-e-white); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 0.87rem;}
.number-text-item .text{flex: 1; min-width: 0; font-size: 0.95rem; color: var(--bs-e-gray-600);}


@media screen and (max-width: 1000px) {
    .gvc-dash-title{border-radius: 10px; margin-bottom: 40px; padding: 1.3rem 1rem;}
    .gvc-dash-title h2{font-size: 1.45rem; letter-spacing: -0.03em;}

    .gx-description-area{padding: 1.3rem 1.1rem;}
}