@import url(reset.css);
/* 로그인 화면 */
.loginWrap{height:100vh;display: flex;justify-content: center;align-items: center;}
.loginWrap .loginCon{width:20.625rem;}
.loginWrap .loginCon h1{text-align: center; margin-bottom: 1.875rem; color:#171719;}
.loginWrap form{display: flex;flex-direction: column;}
.loginWrap form input[type="text"]{margin-bottom: 0.5rem;}
.loginWrap form input[type="password"]{margin-bottom: 1rem;}
.loginWrap form input::placeholder{color: #989ba2;font-size: 0.875rem;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.0175rem;}
.loginWrap form input[type="text"],
.loginWrap form input[type="password"]{height: 2.625rem;padding:0 1rem;background: #fff;border:1px solid #DBDCDF;border-radius: 0.5rem;}
.loginWrap form .rememberId{display: flex; align-items: center; gap: 0.5rem; width: 7rem; color:#171719; cursor: pointer;}
.loginWrap form .rememberId input[type="checkbox"]{width:1rem; height: 1rem; border-radius: 0.25rem;accent-color: #fd322e;}
.loginWrap form button{height: 2.625rem;padding:0 0.75rem;margin-top: 1.5rem;border-radius: 0.5rem;border:none;background: #fd322e;color:#fff;}
/* 예약관리 */
.reservationCon{display: flex;margin: 0 auto; margin-top: 5rem; width:100%; max-width: 120rem;}
.reservationCon .lnb{position: fixed; width:13.75rem; height: 100%; padding:2.5rem 0.875rem; border-right: 1px solid #eaebec;}
.reservationCon .lnb .lnbMenu{position: relative; margin-bottom: 1rem;}
.reservationCon .lnb .lnbMenu .arrowDown.active{transform: rotate(180deg);}
.reservationCon .lnb .lnbMenu .menuList{display: none; margin-top: 0.5rem;}
.reservationCon .lnb .lnbMenu .menuList.on{display: block;}
.reservationCon .lnb .lnbMenu a{display: block; padding:0.75rem 0.5625rem; color:#171719;}
.reservationCon .lnb .lnbMenu .menuList a.active{border-radius: 0.5rem;background: #f7f7f8;color:#FD322E;}
.reservationCon .lnb li .arrowDown{position: absolute; right: 0.7rem; top: 1rem;}
/* ⚠️ width 를 고정하면 안 된다. .lnb 가 position:fixed 라 margin-left 로 자리를 비우는데,
   고정폭 1700px + margin 220px = 1920px 이라 그보다 좁은 화면에서 페이지 전체가 가로로 밀렸다
   (1280px 에서 117px 넘침). 남은 폭을 쓰고 최대폭만 예전 값으로 묶는다. */
.reservationCon .rightCon{position: relative;width:calc(100% - 13.75rem);max-width:106.25rem;min-width:0;margin-left: 13.75rem;padding:2.5rem 2.5rem 5rem 2.5rem;}
.reservationCon .rightCon h1{color:#171719;margin-bottom: 2.5rem;}
.reservationCon .rightCon select{width:11.25rem;height: 2.625rem;padding:0 1rem;border: 1px solid #DBDCDF;border-radius: 0.5rem;font-size: 0.875rem; background:url(../../images/arrowDown.svg) no-repeat 90% 50% #fff;outline-style: none;-webkit-appearance:none;-moz-appearance:none; appearance:none;}
.reservationCon .rightCon select.business{background-position:95% 53%;}
.reservationCon .rightCon .businessWrap{display: flex; gap: 1rem;}
.reservationCon .rightCon select.business{width:25rem;}
.reservationCon .rightCon select::-ms-expand{display:none;}
.reservationCon .rightCon .adminListTable{margin:1rem 0; text-align: center; }
.reservationCon .rightCon .adminListTable thead{ border-bottom: 1px solid #70737c;}
.reservationCon .rightCon .adminListTable thead th{padding:0.75rem 0.5rem; color: #70737c;}
.reservationCon .rightCon .adminListTable thead th.no,
.reservationCon .rightCon .adminListTable thead th.delete{width:6rem}
.reservationCon .rightCon .adminListTable thead th.state,
.reservationCon .rightCon .adminListTable thead th.okCancle{width:10rem}
.reservationCon .rightCon .adminListTable thead th.name{min-width: 10rem;}
.reservationCon .rightCon .adminListTable thead th.date,
.reservationCon .rightCon .adminListTable thead th.phone{min-width:10rem; max-width: 15rem;}
.reservationCon .rightCon .adminListTable thead th.peopel{width:7.5rem;}
.reservationCon .rightCon .adminListTable tbody tr{border-bottom:1px solid #EAEBEC;}
.reservationCon .rightCon .adminListTable tbody tr:hover{background:#fff9f8;}
.reservationCon .rightCon .adminListTable tbody td{padding:0.75rem 0.5rem; color:#171719;}
.reservationCon .rightCon .adminListTable tbody tr:hover{background:#fff9f8;}
.reservationCon .rightCon .adminListTable tbody td button{color:#171719;}
.reservationCon .rightCon .adminListTable tbody td button:disabled{color:#DBDCDF;background:#f7f7f8; border:1px solid #eaebec;}
.reservationCon .rightCon .adminListTable tbody td .stateBtn{padding:0.25rem 0.375rem;border-radius: 0.25rem; }
.reservationCon .rightCon .adminListTable tbody td .confirm{border:1px solid #b8f8b9; background:#f3fff6;color:#00bf40;}
.reservationCon .rightCon .adminListTable tbody td .cancle{border:1px solid #EAEBEC; background:#f7f7f8 ; color:#70737c;}
.reservationCon .rightCon .adminListTable tbody td .complete{border: 1px solid #fdd; background: #fff4f3; color:#fd322e;}
.reservationCon .rightCon .adminListTable tbody td.okCancleBtn{display: flex;justify-content: center;align-items: center;gap: 0.5rem;}
.reservationCon .rightCon .adminListTable tbody td input[type="checkbox"]{width:1rem; height: 1rem; border-radius: 0.25rem;accent-color: #fd322e;appearance: auto;}
.reservationCon .rightCon .adminListTable tbody td button{height: 1.56rem;padding:0 0.625rem;border-radius: 62.43rem;border: 1px solid #DBDCDF;background: #fff;}
.reservationCon .rightCon .addBtn{display: flex;justify-content: flex-end;}
.reservationCon .rightCon .addBtn button{height: 2.625rem;padding: 0 0.75rem;border: none;border-radius: 0.5rem;background: #fd322e;color:#fff;}
.reservationCon .rightCon .page{display: flex;justify-content: center;align-items: center;gap: 0.5rem; margin-top: 2rem;}
.reservationCon .rightCon .page li a{display: flex;width: 2rem;height: 2rem;padding: 0.5rem;justify-content: center;align-items: center;gap: 0.5rem;border-radius: 0.5rem;border: 1px solid #DBDCDF; color:#989ba2;} 
.reservationCon .rightCon .page li a.active{background: #fd322e; color:#fff;}
/*인원수 hover*/
.reservationCon .rightCon .peopleHover{width:37.5rem; position: absolute; display: none; z-index: 100;border-radius: 0.5rem;box-shadow: 0px 0.25rem 1.25rem 0px rgba(0, 0, 0, 0.16);overflow: hidden;}
.reservationCon .rightCon .peopleHover.on{display: block;}
.reservationCon .rightCon .peopleHover table{color:#171719;border:1px solid #eaebec; background: #fff;}
.reservationCon .rightCon .peopleHover table tr.first{border-bottom: 1px solid #eaebec;}
.reservationCon .rightCon .peopleHover table td{width:9.375rem; padding:0.75rem 1rem; border-right:1px solid #eaebec;}
.reservationCon .rightCon .peopleHover table td.last{border-right: none;}

/*예약추가 페이지*/
.reservationCon .rightCon .conWrap{display: flex;flex-direction: column;align-items: flex-start;gap: 2rem;}
.reservationCon .rightCon .conWrap .con{display: flex;align-items: center;gap: 1rem;}
.reservationCon .rightCon .conWrap .con p{width:7.5rem; color:#171719;}
.reservationCon .rightCon .conWrap .con input{height: 2.625rem;width: 11.25rem; padding: 0 1rem;border-radius: 0.5rem;border:1px solid #DBDCDF;background: #fff;}
.reservationCon .rightCon .conWrap .con input::placeholder{font-size: 0.875rem;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.0175rem;color:#989ba2;}
.reservationCon .rightCon .conWrap .con .belong,
.reservationCon .rightCon .conWrap .con .company{width:39.375rem;}
.reservationCon .rightCon .conWrap .con .product{width:25rem}
.reservationCon .rightCon .conWrap .con input[type="radio"]{width:1rem;height: 1rem; accent-color: red;}
.reservationCon .rightCon .conWrap .con label{color:#171719;}
.reservationCon .rightCon .conWrap .con .people{padding-bottom: 2rem;}
.reservationCon .rightCon .conWrap .con .peoples p{width:100%; margin-top: 0.75rem; color: #70737c;}
.reservationCon .rightCon .conWrap .con .radioWrap{display: flex; height: 2.625rem; align-items: center; gap: 0.38rem;}
.reservationCon .rightCon .con textarea{width:100%; height: 12.5rem;}  /* 고정폭(1484px)이라 좁은 화면에서 화면 밖으로 나갔다 */
.reservationCon .rightCon .conWrap .con .adminMemo{padding-bottom: 10rem;}
/* 저장 전 주의 안내. .conBtn 바로 위에 놓이므로 아래 여백은 .conBtn 의 margin-top 이 맡는다.
   word-break:keep-all 은 한국어가 어절 중간에서 끊기지 않게 한다. */
.reservationCon .rightCon .saveNotice{margin-top: 1.5rem; text-align: left; font-size: 0.8125rem; line-height: 150%; color: #70737C; word-break: keep-all;}
.reservationCon .rightCon .conBtn{display: flex; justify-content: center; align-items: center; margin-top: 2.5rem; gap:0.5rem} 
/* 맨 아래 버튼이 화면 바닥에 바싹 붙어 보이던 화면(예약 상세·예약 추가)에만 여백을 더한다.
   .rightCon 의 padding-bottom(5rem) 위에 얹는 것이라 .conBtn 공통 규칙은 그대로 둔다 —
   거기에 주면 예약 수정 화면까지 함께 벌어진다. */
.reservationCon .rightCon .conBtn.bottomGap{margin-bottom: 2.5rem;}
.reservationCon .rightCon .conBtn button{height: 2.625rem; padding:0 0.75rem;border-radius: 0.5rem; border: none;}
.reservationCon .rightCon .conBtn button.conBtnCancle,
.reservationCon .rightCon .conBtn button.conBtnList{border: 1px solid #DBDCDF; background: #fff; color:#171719;}
.reservationCon .rightCon .conBtn button.conBtnSave,
.reservationCon .rightCon .conBtn button.conBtnModi{background: #fd322e; color:#fff;}
.reservationCon .rightCon .conBtn button.conBtnList,
.reservationCon .rightCon .conBtn button.conBtnModi{padding:0.8125rem 1rem 0.75rem 1rem;}
.reservationCon .rightCon .conWrap .flexStart{align-items: flex-start;}
.reservationCon .rightCon .conWrap .con .attendTitle{padding-top: 0.8rem;}
.reservationCon .rightCon .conWrap .con .attendList{display: flex;flex-direction: column;gap: 1rem;}
.reservationCon .rightCon .conWrap .con.relative{position: relative;}
.reservationCon .rightCon .conWrap .con .plusBtn{position: absolute; right: -2.5rem; bottom:0.5625rem;}
.reservationCon .rightCon .conWrap .con .attendList .attendItem{display: flex; align-items: center; gap: 1rem;}
.reservationCon .rightCon .conWrap .con input::-webkit-outer-spin-button,
.reservationCon .rightCon .conWrap .con input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
/*admin View*/
.reservationCon .rightCon .viewH1{margin-bottom: 3.75rem;}
.reservationCon .rightCon .downLoad{display: flex; justify-content: space-between; gap: 2rem;}
.reservationCon .rightCon .downLoad button{height: 2rem; padding:0 0.75rem; background:#f7f7f8; border-radius: 0.5rem; border: none;color:#171719;}
.reservationCon .rightCon .downLoad .searchBox {display: flex;align-items: center;gap: 0.5rem;}
.reservationCon .rightCon .downLoad .searchBox input {display: flex;align-items: center;width: 18.75rem;height: 2.625rem;padding: 0 1rem;font-size: 0.875rem;border-radius: 0.5rem;border: 1px solid #DBDCDF;}
.reservationCon .rightCon .downLoad .searchBox input::placeholder{color: #989BA2;}
.reservationCon .rightCon .downLoad .searchBox button {display: flex;align-items: center;justify-content: center;width: 2.625rem;height: 2.625rem;}
.reservationCon .rightCon .downLoad .searchBox .filterBtn {padding: 0;background-image: url('../images/IconSet.svg');background-size: 1rem;background-repeat: no-repeat;background-position: center center;}
.reservationCon .rightCon .downLoad .searchBox .searchBtn {padding: 0;border: 1px solid #DBDCDF;background-image: url('../images/ImageAssets_search.svg');background-size: 1rem;background-repeat: no-repeat;background-position: center center;background-color: #ffffff;}
.reservationCon .rightCon .downLoad .searchBox .downloadBtn {width: auto;height: 2rem;margin-left: 0.5rem;}
.reservationCon .rightCon h2{color:#171719;}
.adminViewTable{margin:2.5rem 0 4rem 0; border-top:1px solid #eaebec; border-bottom:1px solid #eaebec;}
.adminViewTable tbody tr{border-bottom:1px solid #eaebec;}
.adminViewTable tbody tr th{width:10rem; padding:0.75rem; background: #fbfbfb; color:#70737c;}
.adminViewTable tbody tr td{padding:0.75rem 1rem; color:#171719;}
.adminViewTable tbody tr.infoList td{border-right: 1px solid #eaebec; width:22.8125rem}
.adminViewTable tbody tr.infoList td.last{border:none}
.reservationCon .rightCon .suggestion p{margin-bottom: 1rem; color:#171719;}
.reservationCon .rightCon .suggestion textarea{width:100%;height: 12.5rem;}

@media screen and (max-width : 1260px) {
  .tableWrap table tr td .state {
    padding: 0.4vw 1.59vw;
    font-size: 1.11vw;
  }
  .tableWrap table tr td,
  .tableWrap table tr td a,
  .btn {
    font-size: 1.11vw;
  }

  .btn {
    padding: 0.4vw 0.8vw;
  }
}


@media screen and (max-width : 1024px) {
  /* 공통 */
  .btn {
    padding: 0.5vw 1vw;
  }

  .btn01 {
    margin-right: 0.5vw;
  }
  #wrapper #wrap .lnb {
    padding: 1.95vw;
    width: 29.29vw;
  }

  .contWrap h1{
    font-size: 2.34vw;
  }

  .category,
  .tableWrap,
  .addReservation{
    margin-top: 1.95vw;
  }
  /* 카테고리 */
  .category select {
    padding: 0.4vw 0.8vw;
    width: 19.53vw;
    font-size: 1.56vw;
  }

  .category button{
    padding: 1vw 0;
    width: 9.77vw;
    font-size: 1.56vw;
  }

  /* 테이블 */
  .tableWrap table tr th,
  .tableWrap table tr td {
    font-size: 1.56vw;
  }

  .tableWrap table tr td,
  .tableWrap table tr td a,
  .btn {
    font-size: 1.37vw;
  }

  .tableWrap table tr td a {
    padding: 1.46vw 0;
  }

  .addReservation a {
    padding: 0.5vw 1vw;
    font-size: 1.56vw;
  }
  /* 페이지 넘버 */
  .pageWrap .pageNum {
    gap: 1vw;
    margin-top: 1.95vw;
  }

  .pageWrap .pageNum li a {
    font-size: 1.56vw;
  }
  
}

.none {
	display: none;
}


/* Pageing Style */
.paging_all { margin:3rem auto 0; position:relative; width:100%; font-size:0; line-height:0; text-align:center; } 
.board_btn + .paging_all { margin-top:0; } 
.paging_all .btns,.paging_all>.num>strong,.paging_all>.num>a { display:inline-block; border:1px solid #dbdbdb; position: relative; width:4rem; height:4rem; vertical-align:top; background-color: #fff; text-align: center; } 

.paging_all .btns,.paging_all .btns * { font-size:0 !important; line-height:0 !important; } 
.paging_all .btns:before,.paging_all .btns:after { display: inline-block; border-style:solid; border-color:#666; position:absolute; top:50%; left: 50%; width: 1.2rem; height: 1.2rem; content: ""; border-width:1px 0 0 1px; } 
.paging_all .btns:after { opacity: 0; } 
.paging_all .btns.prev:before { margin:-0.6rem 0 0 -0.3rem; transform:rotate(-45deg); } 
.paging_all .btns.next:before { margin:-0.6rem 0 0 -0.9rem; transform:rotate(135deg); } 

.paging_all>.num { display:inline-block; margin:0; vertical-align:top } 

.paging_all>.num>strong,.paging_all>.num>a { margin-left:1rem; font-size:1.6rem; font-weight: 300; line-height:3.8rem; color:#666; } 
.paging_all>.num .pg_start { margin-left:0; } 

.paging_all .btns:hover { border-color:var(--point); background-color: var(--point); } 
.paging_all .btns:hover:before,.paging_all .btns:hover:after { border-color:#fff; } 

.paging_all>.num>strong,.paging_all>.num>a:hover { border-color:var(--point); z-index:2; background-color: var(--point); color:#fff; } 
.paging_all>.num>.pg_current { background:#000; color:#fff; } 

/* Pageing Style */
.paging_all>.btn,.paging_all>.num>strong,.paging_all>.num>a { width:4rem; height:4rem; } 

.paging_all>.btn:before,.paging_all>.btn:after { width: 1.6rem; height: 1.6rem; } 
.paging_all>.btn.prev:before { margin:-0.8rem 0 0 -0.5rem; transform:rotate(-45deg); } 
.paging_all>.btn.next:before { margin:-0.8rem 0 0 -1.2rem; transform:rotate(135deg); } 

.paging_all>.num { margin:0 -1px 0 0; } 

.paging_all>.num>strong,.paging_all>.num>a { font-size:2rem; line-height:3.5rem; }