html, body {margin:0;height:100%;}
html { font-size: 15px }
body.waitMe_container {position: fixed; top: 0; left: 0;}

@media screen and (max-width: 400px) {
  html { font-size: 15px }
}

@media screen and (max-width: 375px) {
  html { font-size: 14px }
}

@media screen and (max-width: 370px) {
  html { font-size: 13.5px }
}

@media screen and (max-width: 340px) {
  html { font-size: 12px }
}

@media screen and (max-width: 300px) {
  html { font-size: 10.5px }
}

@media screen and (max-width: 261px) {
  html { font-size: 10px }
}

a, a:hover, a:visited {text-decoration:none; color: inherit;}
p {margin: 0;}
div.wrapper {position:relative;}
.container {margin:0 auto; max-width:400px; position: relative;}
.content-body {position: relative; font-size: 0; margin: 0 auto;}
.button {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; cursor: pointer;}
.button.disabled {cursor: not-allowed;}
.clearboth:after {content: ''; display: block; clear: both;}
.overflow-ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.multiline-ellipsis-2 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
ul {list-style: none; padding: 0; margin: 0;}
img {max-width: 100%;}
.text-danger {color: #ff0000;}
.row {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.col {position: relative; width: 100%; box-sizing: border-box;}
.d-inline-block {display: inline-block !important;}
input:focus, textarea:focus {outline: none;}
input[type="checkbox"] {margin-top: 0; margin-bottom: 0;}
input[type="number"], input[type="text"], input[type="password"], input[type="tel"], textarea {border: none; padding: 1rem 0.8rem;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; border-radius: 0;
}
li.empty_list {text-align: center; padding: 5rem 0;}
.datepicker {position: absolute; left: 0; top: 0; background-color: #fff; border: 1px solid #b9c3c8;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent;}
@supports (-webkit-touch-callout: none) {
    select {text-align: center; text-indent: 33.3%;}
}
button {background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; outline: inherit; cursor: pointer; font-size: 0;}
button.hidden {display: none; width: 0;}

.btn {background: #3366ff;color: #fff !important; padding: 5%;font-size: 1.2rem;font-weight: 500;}



/* 모달 */
.modal-open {overflow: hidden;}
.modal-backdrop.show {opacity: .5; position: fixed; top: 0; left: 0; z-index: 999; width: 100vw; height: 100vh; background-color: #000;}
.modal {position: fixed; top:0; left: 0; z-index: 1000; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0;}
.modal .modal-dialog {position: absolute; width: 90%; max-width: 380px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; display: block;}
.modal .modal-dialog .modal-content {display: flex; flex-direction: column; max-height: 80vh; min-height: 10rem; overflow: auto; padding: 3% 0;}
.modal .modal-dialog .modal-content .modal-header {padding: 0 5% 5% 7%; flex-shrink: 0; color: #4385f9;}
.modal .modal-dialog .modal-content .modal-body {padding: 0 3%; overflow-y: auto; flex: 1 1 auto; min-height: 0; max-height: 60vh; font-size: 0;}
.modal .modal-dialog .modal-content .modal-footer {padding: 5% 7% 0; flex-shrink: 0;}

.modal .modal-dialog .modal-content .modal-header .popup_close {font-size: 0; text-align: right; padding-bottom: 1%;}
.modal .modal-dialog .modal-content .modal-header .popup_close button.close {width: 8%;}
.modal .modal-dialog .modal-content .modal-header .title {font-size: 1.2rem; font-weight: bold; padding-bottom: 5%;}
.modal .modal-dialog .modal-content .modal-header .desc {font-size: 1rem; word-break: keep-all;}
.modal .modal-dialog .modal-content .modal-header .added {font-size: 0.85rem; word-break: keep-all;}

.modal .modal-dialog .modal-content .modal-footer button {width: 100%; background: linear-gradient(1deg, rgba(86, 134, 241, 1) 0%, rgba(75, 122, 237, 1) 29%, rgba(49, 94, 227, 1) 100%);display: block;padding: 4% 0;text-align: center;color: #fff;font-size: 1.5rem;border-radius: 10px;box-sizing: border-box;}

.modal-body .content tbody td.empty {text-align: center; min-height: 40vh; max-height: 40vh; border-bottom: 0 !important; justify-content: center !important; font-weight: normal !important; color: #333 !important; cursor: default !important;}

#alert-modal .modal-dialog .modal-body button.close {position: absolute; right: 3%; width: 7%;}
#alert-modal .modal-dialog .modal-body .content {min-height: 10vh; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; padding-bottom: 5%;}
#alert-modal .modal-dialog .modal-body .content p { position:absolute; left:8%; top:50%; transform:translate(-8%, -50%); width:100%; text-align:center; }
#alert-modal .modal-dialog .modal-body .content p .gray {color: #999;}

/* 비밀번호 분실 모달 */
.modal .modal-dialog .modal-content .modal-header {padding: 0 5% 5% 7%; flex-shrink: 0; color: #3366ff;}

.modal .modal-dialog .modal-content .modal-header .title {font-size: 1.5rem;font-weight: 600;padding-bottom: 5%;}
.modal .modal-dialog .modal-content .modal-header .desc {font-size: 1.1rem;word-break: keep-all;color: #333333;font-weight: 500;line-height: 1.6rem;}

.modal .modal-dialog .modal-content .modal-footer button { width: 100%; background: #3366ff; display: block; padding: 4% 0; text-align: center; color: #fff; font-size: 1.5rem; border-radius: 0px; box-sizing: border-box; }

#pw-modal .modal-body .content {padding: 0 5% 10%;}
#pw-modal .modal-body .content .input-row {display: flex;border-bottom: 1px solid #c3c3c3;align-items: center;justify-content: space-between;padding: 1rem 0 0.5rem;}
#pw-modal .modal-body .content .input-row .label {font-size: 1rem; flex: 0 0 5rem; color: #4d4d4d; text-align: left;}
#pw-modal .modal-body .content .input-row input {font-size: 1rem;width: 100%;padding: .3rem;text-align: left;}


.container {min-height: 100vh;}


/* login */
.login-container .bg-box { padding: 1rem; }
.login-container .bg-box .tit-box {position: absolute;box-sizing: border-box;width: 75%;top: 25%;left: 50%;transform: translateX(-50%);text-align: center;}
.login-container .bg-box .tit-box img {width: 5rem;}
.login-container .bg-box .tit-box p {font-size: 2.1rem;color: #3333fe;font-weight: 600;margin-top: 1.2rem;}

.login-container .bg-box .login-box {position: absolute;box-sizing: border-box;width: 75%;top: 49%;left: 50%;transform: translateX(-50%);}
.login-container .bg-box .login-box .login-row {display: flex;border-radius: 5px;height: 2.6rem;align-items: center;border: 1px solid #3333fb;margin: 0 14% 4%;}
.login-container .bg-box .login-box .login-row label {flex: 0 0 30%;font-size: .9rem;color: #3333fe;font-weight: 600;text-align: center;}
.login-container .bg-box .login-box .login-row input {box-sizing: border-box;width: 100%;height: 100%;font-size: 1rem;border: none;background: none;padding: .5rem .8rem;}
.login-container .bg-box .login-box p {font-size: 0.8rem;font-weight: 500;color: #4d4d4d;text-align: center;}
.login-container .bg-box #btn-submit {position: absolute;width: 58%;bottom: 22%;left: 50%;transform: translateX(-50%);background: #0036e5;color: #fff !important;padding: 2.9%;font-size: 1.2rem;font-weight: 500;}
.login-container .bg-box .find-pw {position: absolute;font-size: 0.8rem;text-decoration: underline;color: #4d4d4d;font-weight: 600;width: 18%;right: 21%;bottom: 19%;}

.login-container .footer-box { padding: 1rem; }
.login-container .footer-box p {font-size: .9rem;font-weight: 400;color: #4d4d4d;}
.login-container .footer-box p.tit {font-size: 1.3rem;font-weight: 600;padding-bottom: .4rem;}

/* pw */
.pw-container .content-body {min-height: 100vh;display: flex;flex-direction: column;justify-content: space-between;}

.pw-container .tit-box {box-sizing: border-box;padding: 0 5%;margin: 10% 0;width: 100%;}
.pw-container .tit-box p {color: #000000;font-size: 1.5rem;font-weight: 600;}

.pw-container .form-box {box-sizing: border-box;padding: 0 5%;margin: 10% 0 0;width: 100%;flex-grow: 1;}
.pw-container .form-box .input-item {margin-bottom: 11%;}
.pw-container .form-box .input-item label {font-size: 1.3rem;color: #000000;font-weight: 500;}
.pw-container .form-box .input-item input {font-size: 1.3rem;border-bottom: 1px solid #c3c3c3;display: block;width: 80%;margin: 1rem 0 0.5rem;}
.pw-container .form-box .input-item .cond {font-size: 1rem;color: #ff6a96;font-weight: 500;}

.pw-container .bottom-box {box-sizing: border-box;padding: 0 5%;margin: 5% 0;width: 100%;}
.pw-container .bottom-box button { background: #3366ff; width: 100%; }

/* header */
.inner-header {position: sticky; z-index: 100; height: 3.5rem; top: 0; left: 0; width: 100%; max-width: 400px; box-sizing: border-box; padding: 0 5%; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); background-color: #fff;}
.inner-header .header-row {height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.inner-header .header-row .header-title {font-size: 1.4rem; font-weight: 600; color: #002fee;}
.inner-header .header-row .header-title span,
.inner-header .header-row .header-title small {font-weight: 400;}
.inner-header .header-row .header-title span.voucher_type {font-size: 1rem; color: #ff5697;}
.inner-header .header-row .btn-logout {display: block; font-size: 0.9rem; padding: 0.2rem 0.5rem; border: 1px solid #4d4d4d; color: #4d4d4d; font-weight: 500;}

/* /main */
.main-container .content-body {min-height: 100vh; display: flex; flex-direction: column;}

.main-container .user-menu-box {width: 100%; height: 3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 5%; margin-top: 0.5rem;}
.main-container .user-menu-box a {font-size: 1rem; font-weight: 500; color: #8e8e8e; display: flex; flex-wrap: wrap; align-items: center; height: 1.5rem;}
.main-container .user-menu-box a img {width: 1.1rem; height: 1.1rem; margin-left: 0.2rem;}

.main-container .greeting-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 10%;}
.main-container .greeting-box .greeting {font-size: 1.5rem; font-weight: 700; line-height: 2rem;}

.main-container .voucher-info-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 5%; color: #3366ff; font-size: 1.1rem; font-weight: 500;}
.main-container .voucher-info-box a {display: flex; flex-wrap: wrap; align-items: center; height: 1.5rem; text-decoration: underline; width: fit-content;}
.main-container .voucher-info-box a img {width: 1.2rem; height: 1.2rem; margin-left: 0.2rem;}
.main-container .voucher-info-box p {margin-top: 0.5rem;}

.main-container .voucher-list-box {width: 100%; box-sizing: border-box; margin-top: 10%; background-color: #efefef; border-radius: 20px 20px 0 0; padding: 5%; flex-grow: 1; min-height: 50vh; display: flex; flex-direction: column;}
.main-container .voucher-list-box .list-box-title {font-size: 1.2rem; font-weight: 600; color: #4d4d4d;}

.main-container .voucher-list-box .voucher-list {width: 100%; box-sizing: border-box; margin-top: 5%; flex-grow: 1; display: flex; flex-direction: column;}
.main-container .voucher-list-box .voucher-list .empty {display: flex; align-items: center; justify-content: center; width: 100%; flex-grow: 1;}
.main-container .voucher-list-box .voucher-list .empty p {font-size: 1rem; font-weight: 400; color: #4d4d4d;}

.main-container .voucher-list-box .voucher-list .voucher-box {display: flex;flex-wrap: wrap;background-color: #fff;border: 1px solid #000;border-radius: 15px;height: 6.5rem;padding: 4%;box-sizing: border-box;justify-content: space-between;margin-bottom: 5%;}
.main-container .voucher-list-box .voucher-list .voucher-box .voucher-icon {flex: 0 0 8%; display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 1%;}

.main-container .voucher-list-box .voucher-list .voucher-box .voucher {flex: 0 0 70%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding: 0 1%;}
.main-container .voucher-list-box .voucher-list .voucher-box .voucher .type {font-size: 1.1rem;font-weight: 700;}
.main-container .voucher-list-box .voucher-list .voucher-box .voucher .code {font-size: 1rem;font-weight: 600;}
.main-container .voucher-list-box .voucher-list .voucher-box .voucher .expire {font-size: 1rem;font-weight: 500;color: #ff5697;}

.main-container .voucher-list-box .voucher-list .voucher-box .voucher-btn {flex: 0 0 19%;display: flex;flex-wrap: wrap;align-items: center;}
.main-container .voucher-list-box .voucher-list .voucher-box .voucher-btn a {display: block;color: #fff;width: 100%;text-align: center;font-size: .9rem;font-weight: 500;background-color: #002fee;padding: 0.4rem;border-radius: 3px;}


/* /voucher/{voucher_code} */
.voucher-container .region-title-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 8%;}
.voucher-container .region-title-box p {font-size: 1.3rem; font-weight: 600; line-height: 1.7rem;}

.voucher-container .region-list-box {width: 100%; box-sizing: border-box; padding-left: 3%; margin-top: 5%;}
.voucher-container .region-list-box .region-list {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem;}
.voucher-container .region-list-box .region-list .region {display: flex; flex-wrap: wrap; align-items: center; height: 2.5rem;}
.voucher-container .region-list-box .region-list .region label p {font-size: 1.1rem; font-weight: 500;}
.voucher-container .region-list-box .region-list .region label p small {margin-left: 0.5rem;}
/* 1. 기본 체크박스 숨기기 */
.custom-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 2. 체크박스 미클릭 시 기본 스타일 (회색 박스) */
.custom-checkbox + label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

/* 커스텀 체크박스 모양 생성 (회색 박스) */
.custom-checkbox + label::before {
    content: '';
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid #ccc;       /* 회색 테두리 */
    background-color: #ccc;   /* 미클릭 시 회색 배경 */
    border-radius: 4px;          /* 부드러운 곡면 처리 */
    margin-right: 8px;           /* 텍스트와의 간격 */
    box-sizing: border-box;
    transition: all 0.2s ease;   /* 색상 변경 애니메이션 */
    flex: 0 0 1.3rem;
}

/* 3. 체크박스 클릭(Checked) 시 스타일 (파란 박스) */
.custom-checkbox:checked + label::before {
    background-color: #007bff;   /* 클릭 시 파란 배경 */
    border-color: #007bff;       /* 테두리도 파란색으로 변경 */
}

.custom-checkbox:disabled+label {
  cursor: not-allowed;
  color: #bbb !important;
}

.custom-checkbox:disabled+label::before {
  background-color: #e9e9e9;
  border-color: #ddd;
  opacity: 0.6;
}

.voucher-container .region-list-box .region-list .region-partner-box {width: 100%; box-sizing: border-box; padding-left: 8%; display: none; overflow: hidden;}
.voucher-container .region-list-box .region-list .region-partner-box li a {display: flex; flex-wrap: wrap; align-items: center; height: 3rem; background-color: #f3f3f3; border-top: 1px solid #4d4d4d;}
.voucher-container .region-list-box .region-list .region-partner-box li a .region2 {flex: 0 0 20%; font-size: 0.8rem; padding-left: 1rem; color: #4d4d4d;}
.voucher-container .region-list-box .region-list .region-partner-box li a .name {font-size: 1rem; font-weight: 500;}

/* /voucher/{voucher_code}/{partner_code} */
.partner-container .partner-box {width: 100%; box-sizing: border-box; padding: 5%; background-color: #efefef;}
.partner-container .partner-box .name {font-size: 1.4rem; font-weight: 500; word-break: auto-phrase;}
.partner-container .partner-box .address {font-size: 0.8rem; color: #4d4d4d; word-break: auto-phrase; margin-top: 0.5rem;}

.partner-container .partner-box .partner-row {display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; justify-content: space-between; margin-top: 0.5rem;}
.partner-container .partner-box .partner-row .partner-img {flex: 0 0 45%;}
.partner-container .partner-box .partner-row .partner-info {flex: 0 0 50%; font-size: 1rem; font-weight: 400; box-sizing: border-box; padding: 2% 0; word-break: auto-phrase;}

.partner-container .voucher-info-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 5%; font-size: 0.9rem; font-weight: 500; color: #ff5697; line-height: 1.3rem;}

.partner-container .data-box {width: 100%; box-sizing: border-box; margin-top: 10%;}
.partner-container .data-box .date-box {margin-bottom: 10%;}
.partner-container .data-box .date-row {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 3rem; margin-bottom: 0.5rem; padding: 0 5%;}
.partner-container .data-box .date-row .date-title {flex: 0 0 28%; font-size: 1.1rem; font-weight: 600;}
.partner-container .data-box .date-row .flatpickr {flex: 0 0 72%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.partner-container .data-box .date-row .date-btn {flex: 0 0 40%; font-size: 1rem; border: 1px solid #000; padding: 0.2rem 0;}
.partner-container .data-box .date-row .date-input {flex: 0 0 55%; width: 50%; box-sizing: border-box; border-bottom: 1px solid #999; padding: 0; text-align: center; height: 2rem; font-size: 1.2rem;}

.partner-container .data-box .package-box {width: 100%; box-sizing: border-box;}
.partner-container .data-box .package-box p {font-size: 1rem; padding: 0 5%; font-weight: 600; margin-bottom: 0.5rem;}
.partner-container .data-box .package-box p img {width: 1.1rem; margin: 0 0.3rem;}
.partner-container .data-box .package-box p span {font-size: 0.9rem; color: #969696; font-weight: 500;}
.partner-container .data-box .package-box.open p img {transform: rotate(180deg);}
.partner-container .data-box .package-box .package-list-box {display: none; overflow: hidden; width: 100%; box-sizing: border-box; background-color: #fcf5fa; padding: 5%;}

.partner-container .package-list-box .package-row {width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; margin-bottom: 1rem;}
.partner-container .package-list-box .package-row:last-child {margin-bottom: 0;}
.partner-container .package-list-box .package-row .group {flex: 0 0 28%; font-size: 1.1rem; font-weight: 600; color: #666;}
.partner-container .package-list-box .package-row .package-list {flex: 0 0 72%;}
.partner-container .package-list-box .package-row .package-list li {display: flex; flex-wrap: wrap; align-items: center; min-height: 3rem; }
.partner-container .package-list-box .package-row .package-list li label {font-size: 1.1rem; font-weight: 500; color: #808080; word-break: auto-phrase; align-items: flex-start; min-height: 3rem;}
.partner-container .package-list-box .package-row .package-list li .custom-checkbox:checked + label {color: #000;}

.partner-container .package-list-box .package-info {font-size: 1rem; color: #1563ff; font-weight: 500;}

.partner-container .user-box {width: 100%; box-sizing: border-box; margin-top: 10%; padding: 0 5%;}
.partner-container .user-box .user-row {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.partner-container .user-box .user-row .user-title {flex: 0 0 28%; font-size: 1.1rem; font-weight: 600; margin-top: 0.6rem;}
.partner-container .user-box .user-row .user-title p.sub {font-size: 1rem; color: #969696; font-weight: 500; margin-top: 0.5rem;} 
.partner-container .user-box .user-row .user-info {flex: 0 0 72%; display: flex; flex-wrap: wrap; justify-content: space-between;}

.partner-container .user-info .user-info-row {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 2.5rem; margin-bottom: 1rem; }
.partner-container .user-info .user-info-row .user-info-title {flex: 0 0 25%; font-size: 1.1rem; color: #666; font-weight: 600; height: 100%; display: flex; align-items: center;}
.partner-container .user-info .user-info-row .user-info-value {flex: 0 0 75%; height: 100%;}
.partner-container .user-info .user-info-row input {width: 75%; box-sizing: border-box; border-bottom: 1px solid #999; padding: 2%; text-align: left; height: 2rem; font-size: 1.2rem;}
.partner-container .user-info .user-info-row.mobile .user-info-value {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.partner-container .user-info .user-info-row.mobile .user-info-value .input-select {flex: 0 0 35%; position: relative; height: 100%; border-bottom: 1px solid #999;}
.partner-container .user-info .user-info-row.mobile .user-info-value .input-select select {border: none; height: 100%; margin-left: 5%; font-size: 1.2rem; width: 100%;}
.partner-container .user-info .user-info-row.mobile .user-info-value .input-select i {position: absolute; font-size: 1.2rem; top: 23%; right: 5%; pointer-events: none;}
.partner-container .user-info .user-info-row.mobile .user-info-value .input-tel {flex: 0 0 60%;height: 100%; border-bottom: 1px solid #999;}
.partner-container .user-info .user-info-row.mobile .user-info-value .input-tel input {width: 100%; height: 100%; border: none;}

.partner-container .user-info textarea {margin-top: 0.6rem; border: 1px solid #000; resize: none; height: 5rem; overflow-y: auto; width: 100%; font-size: 1rem; font-weight: 500;}

.partner-container .btn-box {width: 100%; box-sizing: border-box; padding: 0 5% 5%; margin-top: 10%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.partner-container .btn-box .btn {box-sizing: border-box; text-align: center;}
.partner-container .btn-box .btn.btn-back {flex: 0 0 40%; background-color: #d8d6d2; color: #808080;}
.partner-container .btn-box .btn.btn-submit {flex: 0 0 55%; background-color: #1563ff;}

/* /confirm/{voucher_code} */
.confirm-container .content-body {min-height: 100vh; display: flex; flex-direction: column;}

.confirm-container .confirm-title-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 8%;}
.confirm-container .confirm-title-box p {font-size: 1.3rem; font-weight: 600; line-height: 1.7rem;}

.confirm-container .reserve-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 10%;}
.confirm-container .reserve-box .reserve-row {display: flex; flex-wrap: wrap; align-items: flex-start; font-size: 1.1rem; font-weight: 500; margin-bottom: 1rem;}
.confirm-container .reserve-box .reserve-row .row-title {flex: 0 0 20%; }
.confirm-container .reserve-box .reserve-row .row-value {flex: 0 0 80%; word-break: auto-phrase;}
.confirm-container .reserve-box .reserve-row .row-value p {margin-bottom: 0.5rem;}

.confirm-container .reserve-info-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 10%;}
.confirm-container .reserve-info-box p {font-size: 1.1rem; color: #1563ff; font-weight: 500; line-height: 1.5rem; margin-bottom: 1.5rem;}

.confirm-container .bottom-box {width: 100%; flex-grow: 1; display: flex; align-items: flex-end;}
.confirm-container .btn-box {width: 100%; box-sizing: border-box; padding: 0 5% 5%; margin-top: 10%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.confirm-container .btn-box .btn {box-sizing: border-box; text-align: center;}
.confirm-container .btn-box .btn.btn-back {flex: 0 0 40%; background-color: #d8d6d2; color: #808080;}
.confirm-container .btn-box .btn.btn-submit {flex: 0 0 55%; background-color: #1563ff;}

/* /completed/{voucher_code} */
.completed-container .content-body {min-height: 100vh; display: flex; flex-direction: column;}

.completed-container .completed-title-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 8%;}
.completed-container .completed-title-box p {font-size: 1.3rem; font-weight: 600; line-height: 1.7rem;}

.completed-container .completed-info-box {width: 100%; box-sizing: border-box; padding: 0 5%; margin-top: 15%;}
.completed-container .completed-info-box p {font-size: 1.1rem; font-weight: 500; line-height: 1.5rem; margin-bottom: 1.5rem;}

.completed-container .bottom-box {width: 100%; flex-grow: 1; display: flex; align-items: flex-end; padding: 0 5% 5%; box-sizing: border-box;}
.completed-container .btn {background-color: #1563ff; display: block; width: 100%; text-align: center; color: #fff;}


/* 아코디언 페이지 공통 */
.bcc-container .content-body { min-height: 100vh; display: flex; flex-direction: column;}
.bcc-container .content-body .tit-box {box-sizing: border-box;padding: 0 5%;margin: 7% 0;width: 100%; }
.bcc-container .content-body .tit-box p { color: #000000;font-size: 1.3rem;font-weight: 600;}

.bcc-container .content-body .content-box {box-sizing: border-box;padding: 0 5%;margin: 0 0 7%;width: 100%; flex-grow: 1;}
.bcc-container .content-body .content-box .bc-content {border-top: 1px solid #000;}
.bcc-container .content-body .content-box .bc-content .bcc {border-bottom: 1px solid #000000;cursor: pointer;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title {color: #000000;padding: .7rem 0;line-height: 1.7rem;display: flex;justify-content: space-between;align-items: center;min-height: 2rem;font-size: 1rem;}

.bcc-container .content-body .content-box:has(.empty) { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 50vh;  }
.bcc-container .content-body .content-box .empty {text-align: center;padding: 2rem 0;font-size: 1rem;}

.bcc-container .bottom-box {box-sizing: border-box;padding: 0 5%;margin: 5% 0;width: 100%;}
.bcc-container .bottom-box a {display: block;width: 100%;box-sizing: border-box;text-align: center;}

/*  공지사항 & 이용안내 */
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .post-box {display: flex;column-gap: 1.2rem;width: 100%;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .post-box .date {color: #4d4d4d;font-weight: 600;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .post-box .title {font-weight: 600;flex: 0 0 70%;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.bcc-container .content-body .content-box .bc-content .bcc .bcc-content { display: none; overflow: hidden; cursor: default; }
.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap {background: #f7f7f9;padding: 0.8rem;color: #000000;line-height: 1.7rem;border-top: 1px solid #000000;font-size: 1rem;font-weight: 600;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap img { width: 100%;}

.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap p.tit { line-height: 1.4rem; margin-bottom: .8rem; }

.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap .summ {font-size: .9rem;line-height: 1.4rem;padding: .7rem 0;border-top: 1px solid #454545;font-weight: 500;}


/* 이용 현황 */
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box {width: 100%;line-height: 1.5rem;height: 5.5rem;display: flex;flex-direction: column;row-gap: .1rem;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-code-box {display: flex;column-gap: .3rem;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-code-box p {font-size: .95rem;font-weight: 500;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-code-box p.tit { font-size: 1.1rem; font-weight: 800; }

.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-status-box {display: flex;column-gap: .3rem;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-status-box p {color: #3b59ff;font-weight: 800;font-size: 1rem;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-status-box p.done { color: #969696;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-status-box p.voucher-cancel {color: #4d4d4d;font-weight: 400;font-size: .95rem;text-decoration: underline;}

.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-date-box {display: flex;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-title .voucher-box .voucher-date-box p {color: #333333;font-weight: 500;font-size: .95rem;}

.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap .reserve-box .reserve-row {display: flex;flex-wrap: wrap;align-items: flex-start;font-size: 1rem;font-weight: 500;margin-bottom: .3rem;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap .reserve-box .reserve-row .row-title {flex: 0 0 23%;}
.bcc-container .content-body .content-box .bc-content .bcc .bcc-content .bcc-content-wrap .reserve-box .reserve-row .row-value {flex: 0 0 77%;word-break: auto-phrase;flex-grow: 1;}

/* 예약신청취소 */
#cancel-modal .modal-dialog .modal-body .content {min-height: 10vh; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
#cancel-modal .modal-dialog .modal-body .content p { width:100%; text-align:center; }

#cancel-modal .btn-box {width: 100%; box-sizing: border-box; padding: 0 5% 5%; margin-top: 10%; display: flex; flex-wrap: wrap; justify-content: space-between;}
#cancel-modal .btn-box .btn {box-sizing: border-box; text-align: center;}
#cancel-modal .btn-box .btn.btn-cancel {flex: 0 0 40%; background-color: #d8d6d2; color: #808080;}
#cancel-modal .btn-box .btn.btn-submit {flex: 0 0 55%; background-color: #1563ff;}
#cancel-modal .btn-box .btn.btn-done {flex: 0 0 100%;}