@charset "utf-8";

/*폰트*/
/* @import url('./font.css'); */
/* reset */
/* @import url('./normalize.css'); */
/* Utility */
/* @import url('./utility.css'); */

/* =========================================================
   Utility //레이아웃에만 적용**
========================================================= */
.du-flex{
    display:flex;
}
.du-center{
    align-items:center;
}
.du-between{
    justify-content:space-between;
}
.du-end{
    justify-content:flex-end;
}
.du-justify-center{
    justify-content:center;
}
.du-wrap{
    flex-wrap:wrap;
}
.du-full{
    width:100%;
}
.du-column{
    flex-direction:column;
}
/* 버튼 찌그러짐 방지 */
.du-shrink-0{
    flex-shrink:0;
}
/* gap */
.du-gap-8{
    gap:8px;
}
.du-gap-16{
    gap:16px;
}
.du-gap-24{
    gap:24px;
}
/* margin top */
.du-mt-8{
    margin-top:8px;
}
.du-mt-12{
    margin-top:12px;
}
.du-mt-16{
    margin-top:16px;
}
.du-mt-24{
    margin-top:24px;
}
.du-mt-32{
    margin-top:32px;
}
/* margin bottom */
.du-mb-8{
    margin-bottom:8px;
}
.du-mb-12{
    margin-bottom:12px;
}
.du-mb-16{
    margin-bottom:16px;
}
.du-mb-24{
    margin-bottom:24px;
}
.du-mb-32{
    margin-bottom:32px;
}

/* wdth */
.du-w-120{
    width:120px;
    max-width:100%;
}
.du-w-160{
    width:160px;
    max-width:100%;
}
.du-w-200{
    width:200px;
    max-width:100%;
}
.du-w-400 {
	width: 400px;
	max-width:100%;
}
.du-w-600 {
	width: 600px;
	max-width:100%;	
}
.du-w-800 {
	width: 800px;
	max-width:100%;
}
.du-w-1000 {
	width: 1000px;
	max-width:100%;
}

/* =========================================================
   Reset CSS //
========================================================= */
*,
*::before,
*::after{
    box-sizing:border-box;
    padding: 0;
    margin: 0;
}

.dorm-ui{
    height:100%;
    font-family:Pretendard, sans-serif;
    font-weight:400;
    line-height:1.6;
    color:#111827;
}

h1,h2,h3,h4,h5,h6{
    margin:0;
}

.dorm-ui a{
    color:inherit;
    text-decoration:none;
}

.dorm-ui ul,
.dorm-ui li{
    list-style:none;
}

.dorm-ui em{
    font-style:normal;
}

.dorm-ui button{
    cursor:pointer;
}

/* ###### Variables CSS ###### */
:root {

    /* =========================================================
       brand
    ========================================================= */

    --du-primary:#1688EB;
    --du-primary-dark:#2D64C0;
    --du-primary-deep:#243D8E;


    /* =========================================================
       text
    ========================================================= */

    --du-text-primary:#111827;
    --du-text-secondary:#1f2937;
    --du-text-tertiary:#374151;

    --du-text-disabled:#6b7280;
    --du-text-sub:#4B5563;


    /* =========================================================
       background
    ========================================================= */

    --du-bg-subtle:#F3F4F6;
    --du-bg-muted:#E5E7EB;
    --du-bg-dark:#374151;

    --du-bg-info:#EBF4FF;
    --du-bg-success:#DCFCE7;
    --du-bg-danger:#FEE2E2;
    --du-bg-warning:#FEF9C3;


    /* =========================================================
       border
    ========================================================= */

    --du-border-primary:#6B7280;
    --du-border-secondary:#9CA3AF;
    --du-border-tertiary:#D1D5DB;
    --du-border-disabled:#6B7280;
    --du-focus-ring:#BE123C;


    /* =========================================================
       status
    ========================================================= */

    --du-success:#16A34A;
    --du-info:#2563EB;
    --du-danger:#bf2424;
    --du-warning:#CA8A04;


    /* =========================================================
       radius
    ========================================================= */

    --du-radius-sm:4px;
    --du-radius-md:8px;
    --du-radius-lg:12px;


    /* =========================================================
       spacing
    ========================================================= */

    --du-gap-4:4px;
    --du-gap-8:8px;
    --du-gap-12:12px;
    --du-gap-16:16px;
    --du-gap-24:24px;
    --du-gap-32:32px;


    /* =========================================================
       size
    ========================================================= */

    --du-input-h-sm:36px;
    --du-input-h-md:40px;
    --du-input-h-lg:48px;

    --du-btn-h-sm:36px;
    --du-btn-h-md:40px;
    --du-btn-h-lg:48px;


    /* =========================================================
       font
    ========================================================= */

    --du-fz-12:12px;
    --du-fz-13:13px;
    --du-fz-14:14px;
    --du-fz-16:16px;
    --du-fz-18:18px;
    --du-fz-24:24px;
    --du-fz-32:32px;
}

/* ###### Common CSS ###### */
.dorm-ui {
    /* width: 1400px; */
    max-width: 100%;
    margin: 0 auto;
    margin-top: 24px;
}
.du-section + .du-section {
    margin-top: 32px;
}
/* ### 타이틀 영역  ### */
.du-head{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom: 32px;
}
.du-head:has(.du-title + .du-title) {
    margin-bottom:12px;
}
/* du-head 위치 조정 */
.du-head--center{
    justify-content:center;
    text-align:center;
}
.du-head--reverse{
    flex-direction:row-reverse;
}
/* 타이틀 사이즈 */
.du-title{
    color:var(--tp);
}
.du-title + .du-title {
    margin-top: 16px;
}
.du-title--xl {
    font-size: 40px;
}
.du-title--lg{
    position: relative;
    font-size:32px;
    font-weight:700;
}
.du-title--lg:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background-color: var(--du-primary-dark);
    left: 0;
    top: calc(100% + 10px);
}
.du-title--md{
    font-size:24px;
    font-weight: 400;
    padding-left: 20px;
    background: url(../images/dorm_img/line_end_diamond.png) no-repeat center left;
    background-size: 16px auto;
}


.du-title--sm{
    font-size:18px;
    font-weight:500;
    color:var(--tsi);
}



/* ### 버튼 그룹  ### */
.du-btn-group{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.du-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:var(--du-btn-h-md);
    padding:0 16px;
    border:1px solid transparent;
    border-radius:var(--du-radius-sm);
    background:#fff;
    font-size:var(--du-fz-16);
    font-weight:500;
    color:var(--du-text-primary);
    white-space:nowrap;
    vertical-align:middle;
    transition:.2s ease;
}
.du-btn{
    border-color:var(--du-border-tertiary);
    background:#fff;
}
.du-btn--primary{
    background:var(--du-primary);
    border-color:var(--du-primary);
    color:#fff;
}
.du-btn--primary-dark{
    background:var(--du-primary-dark);
    border-color:var(--du-primary-dark);
    color:#fff;
}
.du-btn--line{
    border-color:var(--du-primary);
    background:#fff;
    color:var(--du-primary);
}
.du-btn--danger{
    background:var(--du-danger);
    border-color:var(--du-danger);
    color:#fff;
}
.du-btn--danger.du-btn--line{
    background:var(--du-bg-danger);
    border-color:var(--du-danger);
    color:var(--du-danger);
}
.du-btn--secondary{
    background:#f3f4f6;
    border-color:#d1d5db;
    color:var(--tp);
}
.du-btn--secondary.du-btn--danger{
    color:var(--du-danger);
}
.du-btn--secondary.du-btn--primary{
    color:var(--du-primary);
}
.du-btn--secondary.du-btn--success {
    color: var(--du-success);
}
.du-btn--success{
    background:var(--du-success);
    border-color:var(--du-success);
    color:#fff;
}
.du-btn--success.du-btn--line{
    background:var(--du-bg-success);
    border-color:var(--du-success);
    color: var(--du-success);
}





.du-btn--sm{
    height:var(--du-btn-h-sm);
    padding:0 12px;
    font-size:var(--du-fz-14);
}
.du-btn--lg{
    height:var(--du-btn-h-lg);
    padding:0 20px;
    font-size:var(--du-fz-18);
}
.du-btn:hover{
    opacity:.9;
}
.du-btn:disabled{
    opacity:.5;
    cursor:default;
}
/* 아이콘 버튼 대응 */
.du-btn i,
.du-btn img,
.du-btn svg {
    display:inline-flex;
    flex-shrink:0;
    width: 18px;
    height: 18px;
}
.du-btn--sm i,
.du-btn--sm svg,
.du-btn--sm img{
    width:14px;
    height:14px;
}
.du-btn--lg i,
.du-btn--lg svg,
.du-btn--lg img{
    width:20px;
    height:20px;
}
/* 작성 아이콘 버튼 */
.ico_border_color_w {
    background: url(../images/dorm_img/border_color_w.png) no-repeat center center;
    background-size: contain;
}
/* 출력 아이콘 버튼 */
.ico_print_w {
    background: url(../images/dorm_img/print_w.png) no-repeat center center;
    background-size: contain;
}
.ico_print {
    background: url(../images/dorm_img/print.png) no-repeat center center;
    background-size: contain;
}
/* 엑셀 아이콘 버튼 */
.ico_ex {
    background: url(../images/dorm_img/ex.png) no-repeat center center;
    background-size: contain;
}

/* ### badge ### */
.du-badge--failed{
    color:var(--du-danger); /* 회색계열 */
}
.du-badge--review{
    color:var(--du-primary); /* 파랑 */
}
.du-badge--pass{
    color:var(--du-success); /* 초록 */
}
.du-badge--warn{
    color:var(--du-danger); /* 빨강 */
}

/*### 입력박스  ###*/
.du-input,
.du-select{
    width:100%;
    height:var(--du-input-h-md);
    padding:0 12px;
    border:1px solid var(--du-border-tertiary);
    border-radius:var(--du-radius-sm);
    background:#fff;
    font-size:14px;
}
.du-input--sm,
.du-select--sm{
    height:36px;
    font-size:13px;
}

.du-textarea{
    width:100%;
    min-height:120px;
    padding:12px;
    border:1px solid var(--du-border-tertiary);
    border-radius:var(--du-radius-md);
    resize:vertical;
}

.du-input:focus,
.du-select:focus,
.du-textarea:focus{
    outline:none;
    border-color:var(--du-primary);
}

/* 입력박스 배열 */
.du-inline{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.du-inline .du-input,
.du-inline .du-select{
    width:auto;
}
.du-inline .du-input{
    flex:1;
    min-width:0;
}
.du-date-range{
    display:flex;
    align-items:center;
    gap:8px;
}
.du-date-range .du-input{
    flex:1;
    min-width:0;
}
.du-date-range .du-w-120{
    flex: none;
    width:120px;
    max-width:100%;
}
.du-date-range .du-w-160{
    flex: none;
    width:160px;
    max-width:100%;
}
.du-date-range .du-w-200{
    flex: none;
    width:200px;
    max-width:100%;
}


/* 검색박스 */


/* ### 테이블 공통 묶음 ### */
.du-table-wrap{
    overflow:auto;
    width: 100%;
}
/* ### 목록 형식 ### */ 
.du-table{
    min-width:100%;
    width:max-content;
    border-collapse:collapse;
    border-top:2px solid var(--du-text-secondary);
}
.du-table th,
.du-table td{
    padding: 8px 12px;
    border:1px solid var(--du-border-tertiary);
}
.du-table th{
    background:var(--du-bg-subtle);
    font-weight:600;
}
.du-table--left td{
    text-align: left;
}
.du-table--right td{
    text-align: right;
}
.du-table--center td{
    text-align: center;
}
/*강조 td*/
.du-td-em{
    background:#f8fafc;
    font-weight:600;
}
/* 호버 td */
.du-tr-click:hover td{
    background:#f8fafc;
    cursor: pointer;
}

/* ### 폼 형식 ### */ 
.du-form-table{
    width:100%;
    border-collapse:collapse;
    border-top:2px solid var(--du-text-secondary);
}
.du-form-table th,
.du-form-table td{
    padding:8px 12px;
    border:1px solid var(--du-border-tertiary);
}
.du-form-table th{
    width:160px;
    background:var(--du-bg-subtle);
    text-align:left;
    font-weight:600;
    color: var(--du-text-tertiary);
}
.du-layout-table-wrap {
	
}
.du-layout-table {
	border-collapse: collapse;
	border-top: 1px solid var(--du-border-tertiary);
}
.du-layout-table tr {
}
.du-layout-table th,
.du-layout-table td {
	border-bottom: 1px solid var(--du-border-tertiary);
	font-size: 15px; 
	padding: 6px; 	
}
.du-layout-table th{
	border-right: 1px solid var(--du-border-tertiary);
	font-weight: 500;
	width: 200px; 
}
.du-layout-table td {
}





/* ### 체크 ### */ 
.du-check,
.du-radio{
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-weight: normal;
}
.du-check-group,
.du-radio-group{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}
.du-check input,
.du-radio input{
    flex-shrink:0;
    margin: 0 0;
}


/* =========================================================
   Modal: 모달 CSS
========================================================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.modal_cont {
    background: #fff;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    height: fit-content;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    border-radius: 8px;
    overflow: auto;
    position: relative;
}
/* .modal_cont .du-head {
    position: sticky;
    top: 0;
    background-color: #fff;
} */
.modal.active {
    display: block;
}
/*.modal_close {
    background: url(../images/dorm_img/close.png) no-repeat center center;
    background-size: cover;
    width: 38px;
    height: 38px;
    border: 2px solid var(--du-text-primary);
}*/


/* 미납 알림창 */
.pay_modal {

}
.pay_modal .modal_cont {
    width: 460px;
}


/* =========================================================
   Modal: 모달 CSS
========================================================= */





/* 파일 첨부 */
.du-file-list {
    margin-top: 16px;
    padding: 12px;
    background: var(--du-bg-subtle);
}
.du-file-item__del {
    color: var(--du-danger);
    background: transparent;
    border: none;
}
.du-file-item + .du-file-item {
    margin-top: 12px;
}

/* 개인정보 수집 및 이용 동의 */
.du-agree__check {
}
.du-agree__check {
    background-color: var(--du-bg-subtle);
    border-top: 2px solid var(--du-text-secondary);
}
.du-agree__check:has(input:checked) {
    background: var(--du-bg-info);
    border-top: 2px solid var(--du-primary);
    color: var(--du-primary-deep);
}
.du-agree__check label {
    padding: 12px;
    width: 100%;
}
.du-agree__check label:hover {
    color: var(--du-primary-dark);
}
.du-agree__cont {
    height: 200px;
    overflow: auto;
    padding: 16px;
    border-bottom: 1px solid var(--du-border-secondary);
}

/* 언어 선택 */
.du-lang {
    display: flex;
}
.du-lang-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    padding: 10px;
    min-width: 120px;
    flex: 1;
    background: var(--du-bg-subtle);
    transition: .3s;
}
.du-lang-btn:hover {
    color: var(--du-primary);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: var(--du-bg-info);
}
.du-lang-btn.is-active {
    color: var(--du-primary);
    background: var(--du-bg-info);
    font-weight: 600;
    border: 1px solid var(--du-primary);
    border-bottom: 1px solid transparent;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.du-lang-btn:hover i, 
.du-lang-btn.is-active i {
}
.du-lang-btn i {
    width: 24px;
    height: 24px;
    border-radius: 999px;
}
.du-lang .kor {
    background: url(../images/dorm_img/kor.png) no-repeat center center;
    background-size: cover;
}
.du-lang .eng {
    background: url(../images/dorm_img/eng.png) no-repeat center center;
    background-size: cover;
}
.du-lang .china {
    background: url(../images/dorm_img/china.png) no-repeat center center;
    background-size: cover;
}
.du-lang .viet {
    background: url(../images/dorm_img/viet.png) no-repeat center center;
    background-size: cover;
}


/* 관생카드 미작성시 표출화면 */
.card-guide {
    text-align: center;
    background-color: var(--du-bg-subtle);
    padding: 32px;
}
.card-guide-desc {
    margin-bottom: 32px;
}
.card-guide-desc h2 {
    font-size: 36px;
    color: var(--du-danger);
    margin-top: 16px;
}
.card-guide-desc p {
    margin-top: 8px;
    color: var(--du-text-sub);
    font-size: 18px;
}
.card-ill {
    width: 200px;
    max-width: 100%;
}
.underline {
    text-decoration: underline;
    font-weight: 600;
    text-underline-offset: 8px;
}

/* 관리자-기초정보관리 등록 모달 */
.regist_modal .modal_cont {
    width: 600px;
}
.lock_modal .modal_cont {
    width: 400px;
}


/* 관리자- 유의사항 작성 모달*/
.note_modal .modal_cont {
    width: 1000px;
}
.note_modal textarea {
    height: 400px;
}

/* 관리자- 신청상세 모달*/
.apply_detail_modal .modal_cont {
    width: 640px;
}

/* ##############################
   TAB
############################## */

/* 메뉴 */

.du-tab-menu{
    display:flex;
    align-items:center;
}

/* 버튼 */
.du-tab-btn{
    background: transparent;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    padding: 10px;
    flex: 1;
    background: var(--du-bg-subtle);
    transition: .3s;
}
.du-tab-btn:hover {
    color: var(--du-primary);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: var(--du-bg-info);
}

/* active */
.du-tab-btn.is-active{
    color: var(--du-primary);
    background: var(--du-bg-info);
    font-weight: 600;
    border: 1px solid var(--du-primary);
    border-bottom: 1px solid transparent;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

}


/* 콘텐츠 */
.du-tab-cont{
    padding-top:12px;
}
/* 패널 */
.du-tab-pane{
    display:none;
}
.du-tab-pane.is-active{
    display:block;
}


/* ## 관리자-배정정보 관리 침대 ## */
.bed_status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.bed_status button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.bed_status .is-empty {
    background-color: var(--du-bg-subtle);
    color: var(--du-text-sub);
}
.bed_status .is-empty:hover {
    border: 1px solid var(--du-border-secondary);
}
.bed_status .is-used:hover {
    border: 1px solid var(--du-primary);
}
.bed_status .is-used {
    background-color: var(--du-bg-info);
    color: var(--du-primary);
}
.bed_status i {
    width: 26px;
    height: 26px;
}
.is-empty .ico_bed {
    background: url(../images/dorm_img/bedroom_child_gray.png) no-repeat center center;
    background-size: contain;
}
.is-used .ico_bed {
    background: url(../images/dorm_img/bedroom_child_blue.png) no-repeat center center;
    background-size: contain;
}
/* 배정 정보 관리 침대 범례 */
.is-empty .du-legend-text {
    color: var(--du-text-sub);
}
.is-used .du-legend-text {
    color: var(--du-primary);
}
.du-legend-bed {
    width: 18px;
    height: 18px;
}
.is-empty .du-legend-bed {
    background: url(../images/dorm_img/bedroom_child_gray.png) no-repeat center center;
    background-size: contain;
}
.is-used .du-legend-bed{
    background: url(../images/dorm_img/bedroom_child_blue.png) no-repeat center center;
    background-size: contain;
}


/* ### 범례 ### */
.du-legend {
    display: flex;
    align-items: center;
    gap: 16px;
}
.du-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}



/* 호실 상세 배정 현황 모달 */
.room_details_modal .modal_cont {
    width: 600px;
}


/* 관생카드 상세화면 */
.stu_card_table {

}
.stu_card_title th {
    text-align: center;
}
.stu_img {
    text-align: center;
}
.stu_card_table img {
    max-width: 100%;
    width: 120px;
}
.stu_card_note td {
    font-size: 15px;
}
.stu_card_note_wrap {

}
.stu_card_note td p {
    text-align: center;
    font-size: 18px;
}

/* 고지서 */
.bill_wrap {
    display: flex;
    /* align-items: flex-start; */
    gap: 16px;
}
.bill_table {
    border-collapse: collapse;
    width: 100%;
}
.bill_table th,
.bill_table td {
    border: 1px solid blue;
    padding: 6px;
}
.bill_table th {
    text-align: center;
    font-weight: 400;
}
.bill_table td {}
.bill_table td.align_right {
    text-align: right;
}
.seal {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.seal span {
    display: block;
}
.seal img {
    width: 80px;
    height: 80px;
    position: absolute;
    right: -40px;
    bottom: 0;
    z-index: -1;
}
.bill_txt_right {
    text-align: right;
}
.bill_txt_left {
    text-align: left;
}






/* =========================================================
   responsive // 반응형
========================================================= */

@media screen and (max-width: 768px) {
    /* ### 폼 형식 ### */ 
    .du-form-table tr {
        display: flex;
        flex-direction: column;
    }
    .du-form-table th {
        width: 100%;
    }
    .du-form-table td {
        padding: 16px;
    }

    /* 관생카드 미작성시 표출화면 */
    .card-ill {
        width: 140px;
    }
    .card-guide-desc h2 {
        font-size: 26px;
    }
    .card-guide-desc p {
        font-size: 16px;
    }
    
}


@media screen and (max-width: 560px) {
    /* 언어 선택 */
    .du-lang-btn {
        font-size: 14px;
        border: 1px solid var(--du-border-secondary);
        border-bottom: 1px solid transparent;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        min-width: auto;
        flex-direction: column;
    }
    .du-lang-btn i {
        width: 18px;
        height: 18px;
    }
    .du-btn--lg {
        font-size: 16px;
    }
}


/* =========================================================
   기존 reset 제거
========================================================= */
.dorm-ui th,
.dorm-ui td {
	vertical-align: baseline;
}
.dorm-ui button {
	font-family: inherit;
}
.dorm-ui label {
	margin-bottom: 0;
}



/* =========================================================
   방 선택 CSS
========================================================= */

/* Scrollbar Custom */
/* Chrome, Whale, Edge */
/* 스크롤바 전체 기본 꾸미기 */
section::-webkit-scrollbar,
aside::-webkit-scrollbar,
div::-webkit-scrollbar {
	width: 12px;
    height: 12px;
}
/* 스크롤바 막대 꾸미기 */
section::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
    background-color: var(--du-border-secondary);
}
/* 스크롤바 트랙 꾸미기 */
section::-webkit-scrollbar-track,
aside::-webkit-scrollbar-track,
div::-webkit-scrollbar-track {
    background: var(--du-border-tertiary);
}


/* 전체 */
.dorm_modal{
    
}
.dormitory_layout {
    display:flex;
    width: 100%;
    min-height:100vh;
    background-color: #F8FAFD;
    color: #111827;
    position: relative;
}
/* 사이드바 wrapper */
.dormitory_sidebar_wrap{
    width:320px;
    flex-shrink:0;
    overflow:hidden;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 0 1px 16px #9fb3d05f;
    transition:
    width .35s ease,
    max-height .35s ease;
}
/* =========================
사이드바 PC 닫힘
========================= */

.dormitory.is-sidebar-close .dormitory_sidebar_wrap{
    width:0;
}

.dormitory.is-sidebar-close .dormitory_sidebar{
    transform:translateX(-100%);
    opacity:0;
}
.sidebar_toggle {
    position: absolute;
    left: 320px;
    top: 50%;
    transform: translateY(-50%);
    transition:left .35s ease;
    z-index: 100;
    background: #fff;
    border: none;
    width:32px;
    height: 80px;
    border-radius: 0 12px 12px 0;
    box-shadow: 7px 2px 6px #9fb3d05f;
}
.sidebar_toggle:hover {
}
.sidebar_toggle:hover i {
    transform:rotate(180deg);
}
.dormitory.is-sidebar-close .sidebar_toggle{
    left:0;
}
.sidebar_toggle i {
    transition:.3s;
    width: 32px;
    height: 30px;
    display: block;
    background: url(../images/dorm_img/chevron_forward_gray.png) no-repeat center center;
    background-size: contain;
}
.dormitory.is-sidebar-close .sidebar_toggle i{
    transform:rotate(180deg);
}


/* 닫기 */
.dorm_modal .modal_close {
    background: url(../images/dorm_img/close.png) no-repeat center center;
    background-size: contain;
    width: 42px;
    height: 42px;
    border: none;
    position: absolute;
    right: 32px;
    top: 32px;
    z-index: 1000;
    display: none;
}

/* 사이드 */
.dormitory_sidebar{
    width:320px;
    height:100%;

    transition:
        transform .35s ease,
        opacity .25s ease;

    transform:translateX(0);
    opacity:1;
    padding:32px 24px;
    overflow-y:auto;
    scrollbar-gutter: stable;
    /* background: #ECF1F8; */
    background: #fff;

}
/* 내부 */
.dormitory_sidebar_inner{
    height:100%;
    overflow:auto;
}
.sidebarTitle {
    margin-bottom: 20px;
}
.sidebarTitle h1 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 26px;
    margin-bottom: 16px;
}
.ico_night_bed {
    background: url(../images/dorm_img/night_shelter.png) no-repeat center center;
    background-size: contain;
    width: 32px;
    height: 32px;
}
.sidebarTitle p {
    font-weight: 500;
    word-break: keep-all;
    line-height: 1.6;
}
.dormitory_section + .dormitory_section{
    margin-top:40px;
}
.dormitory_sectionTitle{
    margin-bottom:16px;
    font-size:20px;
    font-weight:700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}
.step_num {
	font-family: pretendard;
    background: #367AF0;
    color: #fff;
    font-size: 12px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 탭 */
.dormitory_tabs{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.dormitory_tab{
    padding: 16px;
    font-size: 16px;
    border-radius:8px;
    background: #fff url(../images/dorm_img/check_circle.png) no-repeat center right 12px;
    background-size: 0 auto;
    transition:.2s;
    border: 1px solid var(--du-border-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 6px #7778792b;
    cursor: pointer;
}
.dormitory_tab:hover {
    border: 1px solid #367AF0;
    color: #367AF0;
    box-shadow: 0 0 6px #B9D1FB;
}
.dormitory_tab.is-active{
    border: 1px solid #367AF0;
    background:#F3F7FE url(../images/dorm_img/check_circle.png) no-repeat center right 12px;
    background-size: 18px auto;
    color: #367AF0;
    box-shadow: 0 0 6px #B9D1FB;
}
.dormitory_tab i {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    transition:.2s;
}
.dormitory_tab1 i {
    background: var(--du-bg-subtle) url(../images/dorm_img/home_work_gray.png) no-repeat center center;
    background-size: 64%;
}
.dormitory_tab1.is-active i,
.dormitory_tab1:hover i {
    background: #fff url(../images/dorm_img/home_work_blue.png) no-repeat center center;
    background-size: 64%;
    box-shadow: 0 0 6px #B9D1FB;
}
.dormitory_tab2 i {
    background: var(--du-bg-subtle) url(../images/dorm_img/account_balance_gray.png) no-repeat center center;
    background-size: 64%;
}
.dormitory_tab2.is-active i,
.dormitory_tab2:hover i  {
    background: #fff url(../images/dorm_img/account_balance_blue.png) no-repeat center center;
    background-size: 64%;
    box-shadow: 0 0 6px #B9D1FB;
}


/* 층 */
.floorList{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.floorBtn{
    padding: 16px;
    border-radius:6px;
    background:#fff url(../images/dorm_img/check_circle.png) no-repeat center right 12px;
    background-size: 0 auto;
    transition:.2s;
    border: 1px solid var(--du-border-secondary);
    font-weight: 500;
    font-size: 16px;
    display: flex;
    gap: 4px;
    align-items: center;
    box-shadow: 0 0 6px #7778792f;
    cursor: pointer;
    
}
.floorBtn.is-active{
    border: 1px solid #367AF0;
    background:#F3F7FE url(../images/dorm_img/check_circle.png) no-repeat center right 12px;
    background-size: 18px auto;
    color: #367AF0;
    box-shadow: 0 0 6px #B9D1FB;
}
.floorBtn:hover {
    color: #367AF0;
    border: 1px solid #367AF0;
    box-shadow: 0 0 6px #B9D1FB;
}
.floorBtn i {
    width: 18px;
    height: 18px;
    background: url(../images/dorm_img/layers_gray.png) no-repeat center bottom;
    background-size: contain;
}
.floorBtn:hover i,
.floorBtn.is-active i {
    background: url(../images/dorm_img/layers_blue.png) no-repeat center center;
    background-size: contain;
}




/* 우측 */
.dormitory_content{
    flex:1;
    min-width:0;
    height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
    padding:32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px; 
}
.dormitory_content_left {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.dormitory_content_left::-webkit-scrollbar {
    /* display: none; */
}
.dormitory_content_right {
    width: 30%;  
    max-width: 100%;
}


/* 상단 */
.dormitory_top{
    margin-bottom: 8px;
}
.dormitory_title{
    font-weight:700;
    text-align: center;
    font-size: 18px;
    color: var(--du-text-tertiary);
}
.dormitory_desc{
    color: #7A8591;
}

/* 범례 */
.dormitory_legend{
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:8px;
    font-size: 14px;
}
.legendItem{
    display:flex;
    align-items:center;
    gap:4px;
}
.legendColor{
    width:10px;
    height:10px;
    border-radius:2px;
}
.legendColor--male{
    background:#63b3ed;
}
.legendColor--male + .legendText {
    color:#63b3ed;
}
.legendColor--female{
    background:#f687b3;
}
.legendColor--female + .legendText {
    color:#f687b3;
}
.legendColor--disabled{
    background:#a0aec0;
}
.legendColor--disabled + .legendText {
    color:var(--du-text-disabled);
}

/* 맵 */
.dormitory_mapWrap{
    height: 100%;
}
.dormitory_map{
    height: 100%;
    padding:24px;
}

/* SVG */
#svgContainer {
    min-width: 640px;
    height: 100%;
}
#svgContainer svg{
    width: 100%;
    height: auto;
}

/* 침대 선택 */
.dormitory_bed_wrap {
    padding: 24px;
    box-shadow: 0 1px 10px #9fb3d05f;
    border-radius: 16px;
}
.bed_card_title {
    color: var(--du-text-sub);
    font-size: 16px;
    margin-top: 16px;
}
.bed_cards {
    display: flex;
    /* flex-direction: column; */
    gap: 8px;
}
.bed_card {
    border: 1px solid transparent;
    padding: 10px;
    border-radius: 8px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background: #fff;
    color: #367AF0;
    border: 1px solid #367AF0;
    box-shadow: 0 1px 16px #9fb3d05f;
}
.bed_card:hover {
    background: #367AF0;
    color: #fff;
}
.bed_card.is-selected {
    border: 1px solid #367AF0;
    background: #367AF0;
    color: #fff;
}
.bed_card.is-disabled {
    background: #d4d5d6;
    border: 1px solid transparent;
    color: var(--du-text-disabled);
    pointer-events: none;
    box-shadow: none;
}
.bed_info {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ico_bed {
    width: 30px;
    height: 30px;
    background: url(../images/dorm_img/bedroom_child_blue.png) no-repeat center center;
    background-size: contain;
}
.bed_info strong {
    font-size: 18px;
}
.bed_card_top {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bed_card_bottom {
    word-break: keep-all;
    font-size: 13px;
    color: var(--du-text-disabled);
}
.bed_card_wrap .dormitory_legend {
    justify-content: flex-start;
}
.legendColor--available {
    border: 1px solid #367AF0;
    background: #fff;
}
.legendColor--available + .legendText{
    color: #367AF0;
}
.bedroom_img {
    width: 100%;
    aspect-ratio: auto 3 / 2;
    margin-top: 24px;
    border-radius: 12px;
    overflow: hidden;
}
.bedroom_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.final_applyBtn {
    margin-top: 16px;
    color: #fff;
    border-radius: 8px;
    background-color: #2C64C7;
    border: none;
    width: 100%;
    border-radius: 8px;
    font-size: 18px;
    padding: 24px;
    box-shadow: 0 1px 12px #839dc35f;
}
.final_applyBtn:hover {
    background-color: var(--du-primary-deep);
}

/* 모달 열 닫 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}
.modal.active {
    display: flex;
}
.modal_btn {
}

.dorm-ui .pagination-sm > li > a,
.dorm-ui .pagination-sm > li > span {
	font-size: 16px; 
}
.dorm-ui .rpager .gpager .pagination {
	margin-top: 32px; 	
}




/* =========================================================
   svg 내부 CSS
========================================================= */

/* [공통] 룸(Room)을 제외한 모든 요소는 클릭/호버 무시 */
[id^="dom_f"], [id^="int_f"] {
    pointer-events: none;
}

/* [공통] 오직 룸(Room) 그룹에만 마우스 이벤트 허용 */
[id*="_room_"] {
    pointer-events: auto;
    cursor: pointer;
}
/* [상태1] 이미 선택되어 선택 불가능한 룸 (Disabled) */
[id*="_room_"].is-disabled {
    pointer-events: none; 
}

/* [상태2] 마우스 호버 시 (Hover) */
/* [id*="_room_"]:hover rect {
    fill: #F4F6FD !important; 
    stroke: #6171E9 !important;
}
[id*="_room_"]:hover text {
    fill: #6171E9 !important;
} */


/* [상태3] 클릭하여 선택된 룸 (Active) */
/* [id*="_room_"].is-active rect {
    fill: #4A5AD1 !important; 
    stroke: #4A5AD1 !important;
}
[id*="_room_"].is-active text {
    fill: #ffffff !important;
} */


/* ### 남학생 ###*/
/* 기본 */
#male [id*="_room_"] rect {
    stroke: #0d90ed !important;
}
#male [id*="_room_"] text {
    fill: #0d90ed !important;
}
/* 호버 */
#male [id*="_room_"]:hover rect {
    fill: #e4f1f9 !important;
}
/* 선택 */
#male [id*="_room_"].is-active rect {
    fill: #0d90ed !important; 
    stroke: #0d90ed !important;
}
#male [id*="_room_"].is-active text {
    fill: #ffffff !important;
} 
/* 선택불가 */
#male [id*="_room_"].is-disabled rect {
    fill: #E9ECEF !important; 
    stroke: #DEE2E6 !important;
}
#male [id*="_room_"].is-disabled text {
    fill: #666a72 !important;
}

/* ### 여학생 ###*/
/* 기본 */
#female [id*="_room_"] rect {
    stroke: #ea6198 !important;
}
#female [id*="_room_"] text {
    fill: #ea6198 !important;
}
/* 호버 */
#female [id*="_room_"]:hover rect {
    fill: #fdedf3 !important;
}
/* 선택 */
#female [id*="_room_"].is-active rect {
    fill: #ea6198 !important; 
    stroke: #ea6198 !important;
}
#female [id*="_room_"].is-active text {
    fill: #ffffff !important;
} 
/* 선택불가 */
#female [id*="_room_"].is-disabled rect {
    fill: #E9ECEF !important; 
    stroke: #DEE2E6 !important;
}
#female [id*="_room_"].is-disabled text {
    fill: #666a72 !important;
}

/* 1. 모든 아이콘과 텍스트의 드래그를 '물리적'으로 차단 */
[id^="dom_f"] text, 
[id^="dom_f"] [id^="icon_"],
[id^="int_f"] text,
[id^="int_f"] [id^="icon_"] {
    /* 드래그 차단 */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;

    /* 마우스 이벤트 투과 (유령 모드) */
    /* 이걸 주면 텍스트를 클릭해도 그 밑의 '방(Path)'이 클릭됩니다 */
    pointer-events: none !important;

    /* 커서가 I자로 변하는 것 방지 */
    cursor: default !important;
}
/* 2. 룸(Room) 그룹 자체에도 드래그 방지 추가 */
[id*="_room_"] {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* =========================================================
  // svg CSS
========================================================= */
/*테스트용 버튼~*/
.dorm_room_modal_open {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--du-primary-dark);
    color: #fff;
    border: none;
    padding: 16px;
    font-size: 24px;
}
.dorm_room_modal_open:hover {
    background: var(--du-primary-deep);
}
/* //테스트용 버튼 */

/* =========================
   사이드바 PC 닫힘 MOBILE
========================= */
@media (max-width:1440px){
	.dormitory_content_left {
		width: 100%;
	}
	.dormitory_content_right {
		width: 640px; 
		max-width: 100%; 
	}
}
@media (max-width:1280px){

    .dormitory_layout{
        display:block;
    }
    .dormitory_sidebar_wrap{
        width:100%;
        max-height: 480px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 24px;
        border-bottom-left-radius: 24px;
        overflow: auto;
    }
    .dormitory_sidebar{
        width:100%;
        height:fit-content;
        transform:translateY(0);
    }
    .dormitory.is-sidebar-close .dormitory_sidebar_wrap{
        width: 100%;
        max-height:0;
    }
    .dormitory.is-sidebar-close .dormitory_sidebar{
        transform:translateY(-100%);
        opacity:0;
    }
    .sidebar_toggle {
        top: 480px;  
        left: 50%;
        transform: translate(-50%, 0);
        width: 80px;
        height: 32px;
        border-radius: 0 0 12px 12px;
    }
    .sidebar_toggle i {
        width: 80px;
        height: 32px;
        transform: rotate(90deg);
    }
    .sidebar_toggle:hover i {
       transform: rotate(90deg);
    }
    .dormitory.is-sidebar-close .sidebar_toggle {
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        transition: top .35s ease;
    }
    .dormitory.is-sidebar-close .sidebar_toggle i{
        transform:rotate(270deg);
    }
    .dormitory_section {
    	
    }
    .dormitory_tabs,
    .floorList {
    	flex-direction: row;
    	flex-wrap: wrap;
    }
	.dormitory_tab.is-active,
	.floorBtn.is-active {
		padding-right: 62px;
	}
	.dormitory_content_left {
		height: auto;
	}
	.dormitory_mapWrap {
		height: auto;
	}
	.dormitory_map {
		height: auto;
	}
	#svgContainer {
		min-width: auto;
		height: auto;
	}
}