.sub.contents.resverved {overflow-x: visible;}
.resverved .inner {gap: 35px; overflow-x: visible;}
.resverved .rsv-con {width: 100%;}

/*예약안내*/
.rsv td:nth-child(2) {text-align: left; padding-left: 20px;}
.rsv-cta {display: flex; flex-direction: column; gap: 18px; width: 100%;}
.rsv-row {display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;}
.rsv-text {display: flex; align-items: center; flex: 1; min-width: 0;}

.rsv-name {width: 100%; max-width: 740px; padding: 30px 20px; border: 1px solid #997459; display: flex; justify-content: center; align-items: center;}

.rsv-desc {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.rsv-desc p {font-size: 30px; font-weight: 400;}
.rsv-point {font-size: 20px; color: #FF4242; font-weight: 400;}

.rsv-row .link-btn {flex: 0 0 auto; white-space: nowrap;}
.rsv-text.title-sm {margin-bottom: 0; justify-content: flex-start;}
.rsv-text .ht-color {display: inline; white-space: nowrap;}

.type-wrap {width: 100%; max-width: 740px; display: flex; gap: 20px;}
.rsv-type {display: flex; justify-content: center; align-items: center; flex-direction: column; background: #F5F5F5; max-width: 360px; width: 100%; padding: 30px; gap: 10px; transition: .3s ease;}
.rsv-type:hover {background: #dfdfdf;}

.rsv-type h3 {font-size: 26px;}
.rsv-type h4 {color: #666; font-size: 20px; font-weight: 700; line-height: 1;}

/*실시간예약 달력*/
.rsv-calendar {max-width: 1190px; margin: 0 auto;}
.rsv-head {display: flex; align-items: center; justify-content: space-between; padding: 12px 0; width: 100%; max-width: 410px; margin: auto;}
.rsv-head i {font-size: 48px;}
.rsv-title {font-size: 30px; font-weight: 600;}
.rsv-nav {border: 0; background: none; font-size: 26px; cursor: pointer;}

.rsv-dows {display: flex; border-top: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;}
.rsv-dow {width: calc(100% / 7); height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background-color: aliceblue;}
.rsv-dow.sun {color: #FF4242;}
.rsv-dow.sat {color: #0054A7;}

.rsv-days {display: flex; flex-wrap: wrap; border-left: 1px solid #e6e6e6;}
/* .rsv-days {display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #e6e6e6;} */
.rsv-cell {width: calc(100% / 7); min-height: 150px; padding: 12px 10px; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; align-items: center; justify-content: center; transition: .3s ease;}
.rsv-cell:hover {background: #dfefff;}
.rsv-cell.empty {background: #fff; pointer-events: none;}
.rsv-cell .day {font-size: 28px; font-weight: 600;}
.rsv-cell .state {font-size: 20px; color: #666;}

.rsv-cell.closed {pointer-events: none;}
/* .rsv-cell.sat, .rsv-cell.sun {pointer-events: none;} */

.rsv-cell.skeleton {
  background-color: #eee;
  min-height: 150px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* 애니메이션 효과 */
.rsv-cell.skeleton::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: -150px;
  height: 100%; width: 150px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
  animation: loading 1.2s infinite;
}

@keyframes loading {
  100% { left: 100%; }
}



.rsv-cell.sun .day {color: #FF4242;}
.rsv-cell.sat .day {color: #0054A7;}
.rsv-cell.holiday .day {color: #FF4242;}

.rsv-cell.closed {background: #fafafa; pointer-events: none;}
.rsv-cell.closed .day {color: #AAAAAA;}
.rsv-cell.closed .state {color: #AAAAAA;}

.rsv-cell.open .state {color: #222;}
/* .rsv-cell.is-today {background: #dfefff;} */
.rsv-cell.is-today {color: #5DCC77;}

.rsv-box, .rsv-notice {width: 100%; background: #f5f5f5; padding: 24px 20px; text-align: center; margin: 0 auto 50px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.rsv-box.rsv-date {flex-direction: row;}
.rsv-notice {max-width: 750px;}

.rsv-notice p {font-size: 16px; line-height: 1.6; color: #333;}
.notice-caution {color: #FF4242; font-size: 18px; font-weight: 600;}

/*시간예약*/
.time .inner {display: flex; flex-direction: column; align-items: stretch; width: 100%;}
.time .wrap {display: flex; gap: 20px; flex-wrap: wrap;}
.rsv-time-wrap {flex: 0 0 calc((100% - 20px) / 2); min-width: 0;}
.time .rsv-box {width: 100%;}

.rsv-date {display: flex; justify-content: center; align-items: center; gap: 16px; max-width: 400px;}
.rsv-date .label {font-size: 24px; color: #666;}
.rsv-date .date {font-size: 24px; font-weight: 600; color: #222;}

.rsv-time-wrap .table.detail td {font-size: 18px; padding: 10px;}

.rsv-btn {display: inline-block; min-width: 90px; padding: 3px 12px; border: 1px solid #ccc; text-align: center; font-size: 14px; color: #333; transition: .3s ease; cursor: pointer;}
.rsv-btn:hover {background: #8b5a3c; border-color: #8b5a3c; color: #fff;}

.rsv-btn.is-disabled {background: #878787; color: #fff; border-color: transparent; pointer-events: none;}

.rsv-btn.is-cancel, .rsv-btn.is-change {background: #2071C2; color: #fff; transition: .3s ease; border-color: transparent;}
.rsv-btn.is-cancel:hover, .rsv-btn.is-change:hover {background: #072747;}

.rsv-comp-title {padding: 15px; border-top: 2px solid #444; margin-top: 20px;}

.reserved .total td {font-weight: 600;}

/*예약자*/
@media (max-width:1024px) {
  
}

@media (max-width:768px) {
  /*달력*/
  .rsv-calendar {max-width: 100%; padding: 0 16px;}
  .rsv-head {max-width: 100%; padding: 10px 0;}
  .rsv-head i {font-size: 34px;}
  .rsv-title {font-size: 22px;}
  .rsv-nav {font-size: 20px;}

  .rsv-dow {height: 44px; font-size: 16px;}

  .rsv-cell {min-height: 92px; padding: 10px 6px; gap: 4px;}
  .rsv-cell .day {font-size: 20px;}
  .rsv-cell .state {font-size: 14px;}

  /*시간예약*/
  .time .wrap {display: block; width: 100%; margin-top: 0;}
  .rsv-time-wrap {width: 100%;}
  .rsv-time-wrap + .rsv-time-wrap {margin-top: 16px;}
  .rsv-time-wrap .table.detail {width: 100%;}
  .rsv-date {max-width: 100%; width: 100%; padding: 16px 12px; gap: 10px; flex-wrap: wrap;}
  .rsv-date .label {font-size: 18px;}
  .rsv-date .date {font-size: 18px; text-align: center;}
  .rsv-time-wrap .table.detail td {padding: 10px 8px;}
  .rsv-time-wrap .table.detail thead th {padding: 10px 8px;}
  .rsv-btn {min-width: 80px; padding: 6px 10px;}

}

@media (max-width:480px) {
  /*달력*/
  .rsv-calendar {padding: 0 12px;}
  .rsv-head i {font-size: 30px;}
  .rsv-title {font-size: 20px;}

  .rsv-dow {height: 40px; font-size: 14px;}

  .rsv-cell {min-height: 78px; padding: 8px 4px;}
  .rsv-cell .day {font-size: 18px;}
  .rsv-cell .state {font-size: 12px;}
}