main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main > .container > h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main > .container > h1 span { position:relative; font-size:40px; font-weight:500; }
main > .container > h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }


#sub0205 { display:flex; flex-direction:column; }

#reservation-typeA { width:360px; height:650px; place-self:center; background-size:cover; border-left:5px solid #000; border-top:10px solid #000; border-right:5px solid #000; border-bottom:5px solid #000; border-radius:15px; display:flex; flex-direction:column; }
#reservation-typeA .mobile-header { display:flex; align-items:center; justify-content:space-between; height:30px; padding:0 14px; }
#reservation-typeA .mobile-header span { font-weight:bold; }
#reservation-typeA .title { font-size:18px; font-weight:bold; height:50px; display:flex; justify-content:center; align-items:center; }
#reservation-typeA .weekdays { width:100%; height:35px; display:flex; justify-content:center; align-items:center; place-self:center; }
#reservation-typeA .weekdays > .weekday { flex:1; text-align:center; }
#reservation-typeA .thisMonth { height:35px; display:flex; justify-content:center; align-items:center; gap:10px; font-size:14px; }
#reservation-typeA .thisWeek { height:35px; display:flex; justify-content:center; align-items:center; gap:10px; font-size:14px; }

#reservation-typeA .calendar-wrapper { flex:1; display:flex; flex-direction:column; overflow:auto; }
#reservation-typeA .calendar-controls button, .reservation-button { font-size:12px; border: 1px solid #ccc; border-radius:5px; padding:3px 10px; }
#reservation-typeA .toggle-btn:after { content:"주간"; }
#reservation-typeA .calendar-nav { margin-top:10px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
#reservation-typeA .calendar-nav button { position:relative; border: 1px solid #ccc; border-radius:5px; padding:3px 10px; }

#reservation-typeA .calendar-nav .choice-day { display:flex; align-items:center; }
#reservation-typeA .calendar-nav .choice-day span { font-size:12px; }
#reservation-typeA .calendar-nav .choice-day p { display:none;  }
#reservation-typeA .calendar-nav .choice-day.on p { display:flex; background:#5685fc; color:#fff; border-radius:5px; padding:3px 10px; }

#calendar-container { position:relative; max-height:500px; overflow: hidden; transition: all 0.2s ease-in; }
#calendar-container.maxheight { max-height:155px; }

.swiper { width:100%; height:100%; }
#calendar-container.on .swiper-wrapper { display:flex; justify-content:center; gap:10px; }
.swiper-slide { width:280px; height:100%; background:#5685fc; color:#fff; border-radius:10px; font-size:12px; user-select: none; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-day { position:relative; height:35px; display:flex; justify-content:center; align-items:center; }
.calendar-day.today { color:#000; }
.calendar-day.today:after { content:""; position:absolute; width:25px; height:25px; background:#78A8FF; border-radius:50%; z-index:-2; }

.calendar-day.choiceday { color:#000; }
.calendar-day.choiceday:before { content:""; position:absolute; width:25px; height:25px; background:#FE8130; border-radius:50%; z-index:-1; }

.calendar-content { flex:1; display:flex; flex-direction:column; gap:10px; padding:20px 14px; overflow:auto;  }
.reservation-item { display:flex; align-items:center; justify-content:space-between; }
.reservation-item .reservation-title { font-weight:bold; }
.reservation-item .reservation-action {  }

.calendar-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); }