@charset "utf-8";
/* CSS Document */

/* 공통 */
.contop{width:100%;padding: 10px 50px;border-bottom:1px solid #E2E5EB;text-align:right;overflow: hidden;}
.contop .logout{float:right;}
.contop .logout a{color:#384361;font-weight: 500;font-size:15px;line-height: 22px;opacity:1;}
.contop .logout a::before{content:'';display:inline-block;background:url(/images/logout.png);width:25px;height:25px;vertical-align: bottom;margin-right: 5px;}
.contop .logout a:hover{opacity:.8; transition: all .5s;}
.contop .message{float:right;color:#384361;font-weight: 500;font-size:15px;line-height: 22px;margin-right: 15px;}
.contop .message a{opacity:1;vertical-align: bottom;}
.contop .message a:hover{opacity:.8; transition: all .5s;}
.contop .message a img{vertical-align: bottom;}
.contop .message span.t1{color:#e42759;}

.conbigwid{width:100%;overflow: hidden;padding: 20px 50px;}
.conbox{padding: 20px;border-radius:10px;background-color:#fff;box-shadow: 0 3px 15px rgba(0,0,0,.15); overflow:auto;}
.conbox.type1_1{width: 33%;float:left;}
.conbox.type1_2{width: 65%;float:right;}
.conbox.type2_1{width:100%;}
.conbox.type3_1{width: 40%;float:left;}
.conbox.type3_2{width: 58%;float:right;}
.conbox.bg1{background-color: #8d9dc1;padding:5px;box-shadow: 0 3px 5px rgba(0,0,0,.15);}
.conbox.bg1 .search1{margin-bottom:0;}

.bg01{background:#f3f6fd !important;}

.tabbox.type1_2{width: 65%;float:right;}
.tit h1{font-size:26px;padding: 0 0 15px;}
.titline{width:100%;text-align: left;}
.titline h2{font-size:18px; font-weight: 600; margin-bottom:10px; display:inline-block;}

.scrollw::-webkit-scrollbar, .tbscrollbox::-webkit-scrollbar {width:5px; height:5px;}
.scrollw::-webkit-scrollbar-thumb, .tbscrollbox::-webkit-scrollbar-thumb {height: 30%;background: #757C8B; border-radius: 10px;}
.scrollw::-webkit-scrollbar-track, .tbscrollbox::-webkit-scrollbar-track {background: rgba(0, 0, 0, .1);  /*스크롤바 뒷 배경 색상*/border-radius: 10px;}
.scrollw{width:100%; height:auto; overflow:auto;}

.al{text-align:left !important;}
.ar{text-align:right !important;}
.ac{text-align:center !important;}
.fl{float:left !important;}
.fr{float:right !important;}
.fwbold{font-weight:bold;}
.txtred {color:#c00;}

.hiescrol2{max-height:348px;}

.tew{width:100%;height:36px;border: 1px solid #D6D6D6;padding:10px;border-radius: 3px;}
.tew.hie400{height:398px;}
.tew.hie250{height:250px;}
.tew.hie200{height:200px;}
.tew.hie160{height:160px;}
.tew.hie150{height:153px;}
.tew.hie140{height:140px;}
.tew.hie120{height:120px;}
.tew.hie90{height:90px;}
.tew.hie80{height:80px;}
.tew.hie70{height:70px;}
.inw{width:auto;height:32px;border: 1px solid #D6D6D6;border-radius: 3px; padding:0 10px;}
.inw.type2{border-radius:20px;height: 30px;margin-top: -4px;}
.inw.hie32{height: 30px;}
.inw.hie40{height: 40px;}
.inw.noline{border:none;}
.search1 .inw{height:40px;}
select.ac{padding:0;}
.inw.in4{width:4%;}
.inw.in5{width:5%;}
.inw.in6{width:6%;}
.inw.in7{width:7%;}
.inw.in8{width:8%;}
.inw.in9{width:9%;}
.inw.in10{width:10%;}
.inw.in11{width:11%;}
.inw.in12{width:12%;}
.inw.in20{width:20%;}
.inw.in25{width:25%;}
.inw.in26{width:26%;}
.inw.in27{width:27%;}
.inw.in28{width:28%;}
.inw.in29{width:29%;}
.inw.in30{width:30%;}
.inw.in32{width:32%;}
.inw.in33{width:33%;}
.inw.in34{width:34%;}
.inw.in35{width:35%;}
.inw.in40{width:40%;}
.inw.in42{width:42%;}
.inw.in43{width:43%;}
.inw.in44{width:44%;}
.inw.in45{width:45%;}
.inw.in49{width:49%;}
.inw.in50{width:50%;}
.inw.in60{width:60%;}
.inw.in70{width:70%;}
.inw.in72{width:72%;}
.inw.in73{width:73%;}
.inw.in74{width:74%;}
.inw.in75{width:75%;}
.inw.in76{width:76%;}
.inw.in77{width:77%;}
.inw.in78{width:78%;}
.inw.in79{width:79%;}
.inw.in80{width:80%;}
.inw.in90{width:90%;}
.inw.in100{width:100%;}
.inw.in100px{width:100px;}
.inw.in150px{width:150px;}
.inw.in7_1{width:70%; float:left;}
.inw.in7_2{width:29%; float:left; margin-left:1%;}
.inw.in3_1{width:30%; float:left;}
.inw.in3_2{width:69%; float:left; margin-left:1%;}
.inw.in2_1{width:20%; float:left;}
.inw.in2_2{width:15%; float:left; margin-left:1%;}
.inw.in1_1{width:15%; float:left;}
.inw.in1_2{width:15%; float:left; margin-left:1%;}
.inw.inauto{width:auto; padding-right:30px;}

.wi1_1{width: 60% !important;float:left;margin-right:1%;}
.wi1_2{width: 39% !important;float:left;}
.wi1_3{width: 14% !important;float:left;}
.wi2_1{width: 65%;float:left;}
.wi2_2{width: 35%;float:left;padding:0 !important;}
.wid115{width:115px; margin-right:0;}
.w10p{width:10% !important;}
.w120px{width:120px !important;}
.wid4_1{width:40% !important; float:left;}
.wid4_2{width:59% !important; float:left; margin-left:1%;}
.totalbg1{background-color:#FBEBEF !important; color:#333 !important;}
.linecol1{border:2px solid #7293e0}
.ra1_1{border-top-right-radius: 0; border-bottom-right-radius: 0;}
.ra1_2{border-top-left-radius: 0; border-bottom-left-radius: 0;}

.fcolred{color:#C72D2D !important;}

/* 여러 색싱표시장치 */
.boxcol::after{content:'';display:inline-block;width: 4px;height: 4px;border-radius: 5px;vertical-align: inherit;margin-left: 2px;}
.boxcol.col1::after{background-color: #26a0eb;}
.boxcol.col2::after{background-color: #e94734;}
.boxcol.col3::after{background-color: #529222;}

.sqbox{width: 52px;height: 26px;line-height: 25px;display: inline-block;border-radius: 3px;background-color:#fff;font-size: 13px;text-align: center;}
.sqbox.w70{width:70px;}
.sqbox.w100{width:100px;}
.sqbox.ssize{width:auto; height:23px; line-height:22px; padding:0 5px}
.sqbox.col1{border:1px solid #2680EB; color:#2680EB;}
.sqbox.col2{border:1px solid #C72D2D; color:#C72D2D;}
.sqbox.col3{border: 1px solid #379210;color: #379210;}
.sqbox.colfull1{color:#fff;background-color: #26a0eb;}
.sqbox.colfull2{color:#fff;background-color: #e94734;}
.sqbox.colfull3{color:#fff;background-color: #529222;}
.sqbox.colfull4{color:#fff;background-color: #566585;}


/* 검색1 */
.search1{width:100%;overflow:hidden;padding:10px;background-color:#F0F1F6;border-radius: 6px;margin-bottom: 10px;}
.search1 .scwid{width:100%;position: relative;}
.search1 .scwid button{border:none;position: absolute;top: 10px;right: 10px;background: none;}
.searchbtn{border:none;background: #606871;padding: 10px 12px;border-radius: 3px;height: 40px;}

/* 검색2 */
.search2{width:100%;overflow:hidden;padding:10px;background-color:#F0F1F6;border-radius: 6px;margin-bottom: 10px;}
.search2 .box{margin-right:20px;display: inline-block;vertical-align: middle;}
.search2 .box:last-child{margin-right:0;}
.search2 .box p{font-weight:600;margin-right: 5px;display: inline;line-height: 30px;float: left;}
.search2 .box .inbox{width: auto;overflow:hidden;display: inline-block;float: left;}
.search2 .box .inbox select{float:left;}
.search2 .box .inbox button{float:left;}
.search2 .daywid{width:auto; display:inline-block;}
.search2 .daywid .dayw{width:110px; display:inline-block;}
.search2 .daywid .sc1{ display:inline-block;}
.search3{width:100%;overflow:hidden;/* background: #f0f1f6; */padding: 10px 0 10px 10px;border-radius: 6px;margin-bottom: 5px;border: 1px solid #999;}

/* table - 스크롤시 */
.tbscrollbox {overflow: auto !important;}
.tbscroll {border: 0px;border-collapse: collapse;border-collapse: separate;border-spacing: 0;}
.tbscroll thead th { position: sticky;  top: 0px; }

.tbscroll thead th.sticky2 { top:38px;}

/* table - type1 */
.tbwid{width:100%; overflow:auto;}
table.tb{width:100%;white-space: nowrap;}
table.tb.type1{}
table.tb.type1 thead th, table.tb.type1 tbody td{}
table.tb.type1 thead th{background-color:#8D9DC1;color:#fff;font-weight: 500;padding: 10px 5px;border-right: 1px solid #D1D4DB;border-top: 2px solid #49506D;}
table.tb.type1 thead th:last-child{border-right:none;}
table.tb.type1 tbody td{padding: 0px 5px;height: 37px;border-right: 1px solid #D1D4DB;border-bottom: 1px solid #D1D4DB;text-align:center; color:#555;}
table.tb.type1 tbody td:last-child{border-right:none;}
table.tb.type1 tbody td.line{border-right: 1px solid #D1D4DB;}
table.tb.type1 tbody tr:nth-child(even){background-color:#F9FCFE;}
table.tb.type1 tbody tr.on td{background-color:#eaeaf2;}
table.tb.type1.trnoline thead tr:last-child th{border-top:1px solid #D1D4DB;}
table.tb.type1.trnoline thead th.liner{border-right:1px solid #D1D4DB}

/* table - type2 */
table.tb.type2 thead th, table.tb.type2 tbody td{}
table.tb.type2 thead th{background-color:#E8ECF2;font-weight: 500;padding: 10px 5px;border-right: 1px solid #D6DAE1;border-top: 1px solid #D6DAE1;border-bottom: 1px solid #D6DAE1;}
table.tb.type2 thead th:last-child{border-right:none;}
table.tb.type2 thead th.lineyes{border-right: 1px solid #D6DAE1;}
table.tb.type2 tbody td{padding: 0px 5px;height: 30px;border-right: 1px solid #D6DAE1;border-bottom: 1px solid #D6DAE1;text-align:center;color: #555;}
table.tb.type2 tbody td:last-child{border-right:none;}
table.tb.type2 tbody td.line{border-right: 1px solid #D6DAE1;}
table.tb.type2.f12 thead th, table.tb.type2.f12 tbody td{font-size:12px;}
table.tb.type2.trnoline thead th{border-top:none;}
table.tb.type2.trnoline thead tr:first-child th{border-top:1px solid #D6DAE1;}
table.tb.type2.trnoline thead th.lineb{border-bottom:1px solid #707070;}
table.tb.type2.trnoline th.linel, table.tb.type2.trnoline td.linel{border-right: 1px solid #707070 !important;}
table.tb.type2 thead tr:last-child th{border-bottom:1px solid #707070;}

/* table - type3 */
table.tb.type3{}
table.tb.type3 thead th{background-color: #e8ecf2;font-weight: 500;padding: 10px 5px;border-bottom: 1px solid #D6DAE1;}
table.tb.type3 tbody td{cursor: pointer; padding: 0px 5px;height: 30px;border-bottom: 1px solid #D6DAE1;text-align:center;color: #555;}
table.tb.type3 tbody tr.on td{background-color:#ecedf1;}
table.tb .savebtn{text-align:center;border-left: 1px solid #ddd;}


/* table - write1 */
table.tb.write1{width:100%;}
table.tb.write1 thead th{background-color:#E8ECF2; text-align:left;font-weight:600; padding:8px; text-align:center; border-bottom:1px solid #D6DAE1;    border-top: 1px solid #D6DAE1;}
table.tb.write1 tbody th, table.tb.write1 tbody td{padding:5px; border-bottom:1px solid #D6DAE1;}
table.tb.write1 tbody tr:first-child th, table.tb.write1 tbody tr:first-child td{border-top:1px solid #D6DAE1;}
table.tb.write1 tbody th{background-color:#E8ECF2;text-align:left;font-weight: 500;padding:5px 10px;}
.po{color:#CA3E3E;display: inline-block;margin-left: 1px;}
table.tb.write1 tbody td{}
table.tb.write1.smtype tbody th{height:40px; padding:2px 2px 2px 10px;}
table.tb.write1.smtype tbody td{padding:2px;}
table.tb.write1.smtype input[type='text']{height:32px;}
table.tb.write1.line1 thead th, table.tb.write1.line1 tbody td{border-right:1px solid #D6DAE1;}
table.tb.write1.line1 thead th:last-child, table.tb.write1.line1 tbody td:last-child{border-right:none;}

/* table - write2 */
table.tb.write2{width:100%;}
table.tb.write2 tbody th, table.tb.write2 tbody td{padding:4px 2px;}

/* 달력 */
.icon_cal {display:inline-block;position:relative;box-sizing:border-box;width: 100%;}
.icon_cal input {width:100%;padding-left: 10px;padding-right:30px;background-color:#F8F9FC;}
.icon_cal img {max-width:22px;cursor:pointer;position:absolute;top:50%;right:5px;margin-top: -9px;}
.tb_cal {width:100%;}
.tb_cal input {width:100px;}
/* 달력레이어 */
.ui-widget-content {z-index:10 !important;}
.ui-datepicker .ui-datepicker-title select{padding:5px;border: 1px solid #a1a1a1;}
.ui-datepicker .ui-datepicker-title select:last-child{margin-left:5px !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{width: 44% !important;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{margin-top:-5px !important;}
.daywid2{width:100%; display:inline-block;}
.daywid2 .dayw{width: 45%;float:left}
.daywid2 .sc1{width:10%; float:left; text-align:center; line-height:28px;}
.daywid3{width: 250px;display: inline-block;vertical-align: middle;}
.daywid3 .dayw{width: 45%;float:left}
.daywid3 .dayw input{border:none; background:#fff}
.daywid3 .sc1{width:10%;float:left;text-align:center;line-height: 38px;}


/* 차트영역 */
.chartbox{width:100%; min-height:200px; overflow:hidden;}

/* 주소 */
.addbtn{width:100%; overflow:hidden;}
#sample6_extraAddress{display:none;}
.addbtn input:last-child{cursor: pointer;}

/* tab */
ul.tabs{list-style: none; width:100%;}
ul.tabs li{float: left;cursor: pointer;width: 175px;text-align: center;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 12px 5px;background-color: #E6E9F2;color: #666666;font-size: 16px;margin-right: 2px;background: linear-gradient(0deg, #ced2dd, #E6E9F2 17%);}
ul.tabs li.current{background: #5F6784;color: #fff;font-weight: bold;}
.tab-content{display: none;width: 100%;overflow: hidden;background: #5f6784;border-radius: 10px;border-top-left-radius: 0;padding: 15px;box-shadow: 0 3px 15px rgba(0,0,0,.15);}
.tab-content.current{display: inherit;}
.tab-content .tbox{background-color:#fff;border-radius:10px;box-shadow: 0 3px 15px rgba(0,0,0,.1);padding: 15px;}
.tab-content .tbox.boxl{width:44%; float:left;}
.tab-content .tbox.boxr{width:55%;float:right;}
.tab-content .tbox.boxl1{width:49.5%; float:left;}
.tab-content .tbox.boxr1{width:49.5%;float:right;}

/* tab 1내용 */
.fxhie1{height:300px; border:1px solid #D6DAE1;}
.tab-content .wid{width:100%; overflow:hidden;}
.tab-content .boxtx1{width:20%; float:left; overflow:hidden;}
.tab-content .boxtx1 .boxtx1_1{}
.tab-content .boxtx1 .boxtx1_2{}
.tab-content .boxtx2{width:79%; float:right; overflow:hidden;}
.tab-content .boxtx2 .boxtx2_1{width:100%; overflow:hidden;}
.tab-content .boxtx2 .boxtx2_2{width:100%;}

/* 식단관리 */
.tab-content1{display: none;width: 100%;overflow: hidden;background: #5f6784;border-radius: 10px;border-top-left-radius: 10;padding: 15px;box-shadow: 0 3px 15px rgba(0,0,0,.15);}
.tab-content1.current{display: inherit;}
.tab-content1 .tbox{background-color:#fff;border-radius:10px;box-shadow: 0 3px 15px rgba(0,0,0,.1);padding: 15px;}
.tab-content1 .tbox.boxl{width:44%; float:left;}
.tab-content1 .tbox.boxr{width:55%;float:right;}
.tab-content1 .tbox.boxl1{width:49.5%; float:left;}
.tab-content1 .tbox.boxr1{width:49.5%;float:right;}

/* 레이어팝업 */
.pop_close {display:inline-block;background-color:transparent;border:0;}
.pop_close span {display:inline-block;font-size:27px;color: #fff;width: 30px;height: 30px;line-height: 25px;border: 1px solid #ddd;border-radius: 40px;font-weight: 400;}
.popLayer .pop_close {position:absolute;top: 10px;right: 15px;}
.overlay_t {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;padding:50px 20px;box-sizing:border-box;background-color:rgba(0,0,0,0.6);text-align:center;z-index:99;}
.overlay_t::before {content:""; display:inline-block; height:100%; vertical-align:middle;}
.popLayer {vertical-align:middle;position:relative;z-index:100;width:100%;max-width:700px;margin:0 auto;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0px 1px 7px rgba(0,0,0,0.4);display:none;}
.popLayer.w1200{max-width:1200px;}
.popLayer.w1100{max-width:1100px;}
.popLayer.w1000{max-width:1000px;}
.popLayer.w800{max-width:800px;}
.popLayer.w600{max-width:600px;}
.popLayer.w500{max-width:500px;}
.popLayer.w450{max-width:450px;}
.popLayer.w400{max-width:400px;}
.popLayer.w300{max-width:300px;}
.popLayer.h690{height:690px;}
.popLayer h3 {color: #fff;font-size:20px;line-height:1.3;text-align:left;padding: 12px 20px;background: #232e47;}
.popLayer em {font-style:normal;}
.popLayer .pop_container {padding: 20px;background: #F3F6FD;max-height: 700px;overflow: auto;}
.popLayer .pop_container.scroll_cont {max-height:470px; overflow:auto;}
.popLayer .pop_container .btn_set {margin:30px 0 0;}
.popLayer .pop_container .btn_set > button {height:40px; line-height:38px; font-size:15px; min-width:80px;}

/* 기타 */
.price_in{position:relative;}
.price_in input{padding-right: 25px; text-align:right;}
.price_in .pri{position:absolute;right: 15px;top: 15px;}

/* 1:1문의 */
.collwid{width:100%; overflow:hidden; text-align:center;border-bottom: 1px solid #D6DAE1;}
.collwid .collapsible {cursor: pointer;padding: 7px 5px;width: 100%;border: none;overflow: hidden;border-top: 1px solid #D6DAE1;}
.collwid .active, .collwid .collapsible:hover {background-color: #dee7f6;}
.collwid .collcontent { max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out;background-color: #ffffff;}
.collwid .collapsible p{line-height:26px;}
.collwid .w5{float:left; width:5%;}
.collwid .w6{float:left; width:6%;}
.collwid .w8{float:left; width:8%;}
.collwid .w10{float:left; width:10%;}
.collwid .w15{float:left; width:15%;}
.collwid .w17{float:left; width:17%;}
.collwid .w51{float:left; width:51%;}
.collwid .w51{float:left; width:51%;}
.collwid .w55{float:left; width:55%;}
.collwid .w57{float:left; width:57%;}
.collwid .w59{float:left; width:59%;}
.collwid .w62{float:left; width:62%;}
.collwid .w65{float:left; width:65%;}
.collwid .wauto{float:center; width:auto;}
.collwid .w2 img{vertical-align: baseline;}
.collwid .colltop{background: #313c4f;color:#fff;padding: 12px 5px;overflow: hidden;font-weight: bold;border-top: 2px solid #172030;}
.collwid .collcontent .wid{padding:15px 10px;text-align:left;min-height: 200px;background: #f8f9f9;}
.collwid .collapsible.tlineno{border-top:none;}

/* 충전하기 */
.chargebox{width:19%;margin-right:1%;float:left;border-radius: 12px;box-shadow: 0 0 10px rgba(0,0,0,.08);}
.chargebox:last-child{margin-right:0;}
.chargebox .box1{width:100%;overflow:hidden;background-color:#ddd;border-top-left-radius: 12px;border-top-right-radius: 12px;text-align: center;padding: 17px 5px;color: #fff;}
.chargebox .box1 .t1{font-size:15px;margin-bottom: 5px;}
.chargebox .box1 .t2{font-size: 24px;font-weight: bold;}
.chargebox .box2{width:100%;padding:10px;padding-top: 20px;text-align:center;}
.chargebox .box2 .tbox{width:100%;overflow:hidden;}
.chargebox .box2 .tbox p{font-size:15px; margin-bottom:15px}
.chargebox .box2 .tbox p span{color: #DC4040;}
.chargebox .box2 a{border:1px solid #ddd;display: block;padding: 7px 10px;border-radius: 10px;font-size: 17px;font-weight: bold;margin-top: 10px;}
.chargebox.col1 .box1{background-color: #32afb4;}
.chargebox.col2 .box1{background-color:#0FA7CE;}
.chargebox.col3 .box1{background-color:#4093D4;}
.chargebox.col4 .box1{background-color:#5175D8;}
.chargebox.col5 .box1{background-color: #5d52ae;}
.chargebox.col1 .box2 a{border: 1px solid #32afb4;color: #32afb4;}
.chargebox.col2 .box2 a{border:1px solid #0FA7CE; color:#0FA7CE;}
.chargebox.col3 .box2 a{border:1px solid #4093D4; color:#4093D4;}
.chargebox.col4 .box2 a{border:1px solid #5175D8; color:#5175D8;}
.chargebox.col5 .box2 a{border: 1px solid #5d52ae;color: #5d52ae;}
.chargebox.col1 .box2 a:hover{background-color:#32B495; color:#fff; transition: all .5s;}
.chargebox.col2 .box2 a:hover{background-color:#0FA7CE; color:#fff; transition: all .5s;}
.chargebox.col3 .box2 a:hover{background-color:#4093D4; color:#fff; transition: all .5s;}
.chargebox.col4 .box2 a:hover{background-color:#5175D8; color:#fff; transition: all .5s;}
.chargebox.col5 .box2 a:hover{background-color:#6453DC; color:#fff; transition: all .5s;}


/* 달력 */
.calendar_top{width:100%;overflow:hidden;position: relative; margin-top:20px; height:34px}
.calendar_top .storename{float:left;font-size: 17px;font-weight: 600;margin-top: 10px;}
.calendar_top .cal_day{float:left;text-align:center;position: absolute;left: 50%;margin-left: -87px;}
.calendar_top .cal_day button{float:left;border: none;background: none;line-height: 34px;}
.calendar_top .cal_day p.day_tx{float:left;font-size: 28px;margin: 0 20px;font-weight: 500;}
.calendar_top .cal_search{float:right;text-align:right;margin-top: 2px;}
.calendar_top .cal_search .searchbtn{ height: 32px; padding: 6px 9px;}
.calender_con{width:100%; overflow:hidden; margin-top:20px;}
.calender_con .caltb{width:100%;}
.calender_con .caltb thead th{background-color:#F1F2F5; color:#666; font-weight:normal; border:1px solid #C8D1DB; padding:5px 10px; text-align:center;}
.calender_con .caltb thead th:first-child{color:#E62626;}
.calender_con2{width:auto; overflow:auto;}
table.caltb2{/* border-left:1px solid #C8D1DB; */border-collapse: separate;border-spacing: 0;white-space: normal;}
table.caltb2 th, table.caltb2 td {text-align:center;border-right: 1px solid #C8D1DB;border-bottom: 1px solid #C8D1DB;}
table.caltb2 th {background-color:#F1F2F5;color:#666;font-weight:normal;border-top: 1px solid #C8D1DB;padding:5px 10px;text-align:center;}
table.caltb2 thead tr th:first-child {background-color: #7683a8;color: #fff;border: 1px solid #59627c;}
table.caltb2 tbody td{padding:10px 5px;}
table.caltb2 tbody tr td:first-child {background-color: #e0e5f2;border-bottom: 1px solid #b3bacb;border-left: 1px solid #b3bacb;}
table.caltb2 thead { position: sticky; top: 0; z-index: 1; }
table.caltb2 th:first-child, table.caltb2 td:first-child { position: sticky; left: 0; }
table.caltb2 .daily{cursor: pointer;}
table.caltb2 .daily.bg1{background-color:#5D8AF3; color:#fff;}
table.caltb2 .daily.bg2{background-color: #6ba417;color:#fff;}
table.caltb2 .daily span.t1{font-size:12px; display:block; margin-top:5px;}

/* ==========================================
   1. 통합 달력 테이블 스타일 (벌어짐 버그 원천 차단)
========================================== */
.main_calendar_table {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: fixed;
    border: 1px solid #C8D1DB;
}

.main_calendar_table th {
    padding: 10px 0;
    border-top: 1px solid #C8D1DB;    /* 상단 라인 추가 */
    border-bottom: 1px solid #C8D1DB; /* 하단 라인 */
    border-left: 1px solid #C8D1DB;   /* 셀 사이 세로 라인 추가 */
    border-right: 1px solid #C8D1DB;  /* 셀 사이 세로 라인 추가 */
    background-color: #F8F9FC;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box;
}

/* 각 주(Row)의 최소 높이를 고정하되 아코디언이 열리면 유연하게 늘어나도록 설정 */
.main_calendar_table tbody td {
    border: 1px solid #C8D1DB;
    height: 120px;
    min-height: 120px;
    vertical-align: top !important;
    padding: 8px 6px;
    box-sizing: border-box;
    background-color: #fff;
}

/* 첫 번째 셀(일요일)의 왼쪽 테두리가 바깥쪽 테두리와 겹쳐 두꺼워지는 것을 방지 */
.main_calendar_table th:first-child {
    border-left: none;
}
/* 마지막 셀(토요일)의 오른쪽 테두리가 바깥쪽 테두리와 겹쳐 두꺼워지는 것을 방지 */
.main_calendar_table th:last-child {
    border-right: none;
}

/* 일요일 빨간색 처리 */
.main_calendar_table th:first-child,
.main_calendar_table tbody tr td:first-child .day_number {
    color: #E62626;
}

/* 이전/다음달 빈 날짜 불투명도 */
.main_calendar_table tbody td.opc {
    opacity: 0.4;
}

/* 날짜 숫자 스타일 */
.main_calendar_table .day_number {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* ==========================================
   2. 스케줄 버튼 및 아코디언 디자인
========================================== */
.main_calendar_table tbody td.schedule .btn_toggle {
    display: block;
    color: #fff;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 3px;
    text-align: left;
    font-weight: normal;
}
.main_calendar_table tbody td.schedule .bg1 { background-color: #5D8AF3; }
.main_calendar_table tbody td.schedule .bg2 { background-color: #6ba417; }
.main_calendar_table tbody td.schedule .bg3 { background-color: #233d77; }

/* 버튼 간 상단 간격 유지 */
.mt5 { margin-top: 5px !important; }

/* 아코디언 감싸는 박스 */
.main_calendar_table .accordion_wrap {
    margin-top: 4px;
    text-align: left;
}

/* 아코디언 내부 리스트 실시간 표기 최적화 */
.main_calendar_table .accordion_list {
    margin: 4px 0;
    padding-left: 0;
    list-style: none;
    display: none; /* 기본적으로 닫힘 유지 */
}
.main_calendar_table .accordion_list li {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 2px;
    padding: 2px 4px;
    background-color: #f4f6f9;
    border-radius: 2px;
}
.main_calendar_table .accordion_list li a {
    color: #333;
    text-decoration: none;
    display: block;
}
.main_calendar_table .accordion_list li a:hover {
    text-decoration: underline;
}

/* ==========================================
   3. 하단 객실 현황 레이아웃 박스
========================================== */
.caltxbox {
    width: 19.2%;
    margin-right: 1%;
    margin-bottom: 1%;
    float: left;
    border: 1px solid #C8D1DB;
    background-color: #F8F9FC;
    border-radius: 5px;
    padding: 10px;
    height: 168px;
    box-sizing: border-box;
}
.caltxbox:nth-child(5n) { margin-right: 0; }
.caltxbox .t1 { font-weight: bold; font-size: 15px; border-bottom: 1px solid #afafaf; padding-bottom: 3px; }
.caltxbox .t2 { padding: 10px 0; }
.caltxbox .t2 p { font-size: 14px; margin-bottom: 5px; }
.caltxbox .t2 p span { font-weight: 500; }

/* 1:1문의 */
.qline{width:100%; overflow:hidden;}
.qline > p{display:inline-block; margin-top: 14px;}
.qline > p b{color:#2680eb;}



/* paging ------------------------------- */
.paging * {box-sizing:border-box;}
.paging {display:flex; justify-content:center; text-align:center; margin:30px 0 0;}
.paging > a, .paging > span {display:inline-flex; justify-content:center; align-items:center; width:2rem; height:2rem; padding:0; margin:0 0.125rem; background-color:#fff; border:1px solid #ddd; color:#3f3f3f; font-size:0.875rem; font-weight:500; cursor:pointer;}
.paging a:hover {color:#333;}
.paging .on, .paging .on:hover {background:#454545; border-color:transparent; color:#fff; cursor:inherit;}
.paging .page_bt {text-indent:-9999px; position:relative;}
.paging .page_bt::after {content:''; background:url(../images/page_bt_arrow.png) 0 0 no-repeat; background-size:contain; width:6px; height:10px; position:absolute;}
.paging .first::after, .paging .last::after {background-image:url(../images/page_bt_arrow02.png); width:12px;}
.paging .next::after, .paging .last::after {transform: rotate(180deg);}
.paging > a[href="#"] {pointer-events: none;}

.board_controls {display:flex; position:relative; margin-top:30px;}
.board_controls .paging {margin:0 auto;}
.board_controls .btn_set {position:absolute; top:0; right:0; margin-top:0;}


input:not([type="radio"]):not([type="checkbox"])[readonly], select[readonly], textarea[readonly], .readonly, input:not([type="radio"]):not([type="checkbox"])[disabled], select[disabled], textarea[disabled], .disabled {background-color:#E4E4E4; border: 1px solid #D5D5D5;} /* 입력불가 */

/* 첨부파일 스타일 */
.file_input {display:flex; position:relative; box-sizing:border-box;}
.file_input label {display:inline-flex; justify-content:center; align-items:center; width:80px; background:#aaa; color:#fff; margin-left:5px; text-align:center; cursor:pointer;}
.file_input label input {position:absolute; width:0; height:0; overflow:hidden; padding:0; border:0;}
.file_input input[type=text] {color:#737070; background:#fff; border:1px solid #ccc;}





/* 화면 전체를 덮는 배경 설정 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 반투명 검은색 배경 */
    z-index: 9999; /* 화면 최상단에 위치 */
    display: none; /* 초기에는 보이지 않도록 숨김 */
}

/* 스피너 디자인 및 중앙 정렬 */
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 6px solid #f3f3f3; /* 옅은 회색 테두리 */
    border-top: 6px solid #3498db; /* 파란색 포인트 테두리 */
    border-radius: 50%; /* 동그랗게 */
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite; /* 1초마다 무한 회전 */
}

/* 회전 애니메이션 키프레임 */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.readonly-select {
    pointer-events: none; /* 마우스 클릭 이벤트 차단 */
    background-color: #f5f5f5; /* 비활성화 느낌의 배경색 */
    color: #888;
}

.accordion_list {
    display: none; /* 기본 숨김 */
    list-style: none;
    padding: 5px;
    margin: 4px 0 0 0;
    background: #ffffff;
    border: 1px solid #b3bacb;
    border-radius: 3px;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.accordion_list li {
    font-size: 11px;
    color: #333;
    padding: 3px 0;
    border-bottom: 1px dashed #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 글자가 길면 ... 처리 */
}
.accordion_list li:last-child {
    border-bottom: none;
}


/* 예약,입실현황 팝업에 객실별 css */
.t2_container {
    display: flex;
    flex-direction: column; /* 세로로 나열 */
}

/* 각각의 클릭 영역 */
.t2_item {
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 4px;
    transition: background 0.2s;
}
.t2_item:hover {
    background-color: #f5f5f5; /* 마우스 올렸을 때 피드백 */
}

/* ★ 중요: 입/퇴실이 한 방에 겹칠 때 (상하 분할) */
.split-room .t2_item {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* 첫 번째 아이템(퇴실) 아래에 구분용 점선 추가 */
.split-room .t2_item:first-child {
    border-bottom: 1px dashed #ddd;
    margin-bottom: 4px;
}

/* 미니 뱃지 스타일 (선택사항 - 디자인이 훨씬 깔끔해집니다) */
.badge {
    display: inline-block;
    padding: 1px 4px;
    font-size: 11px;
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1.2;
    vertical-align: middle;
}
.badge.out { background-color: #ff5e5e; } /* 퇴실 (레드) */
.badge.in  { background-color: #4aa3df; } /* 입실 (블루) */