/* common */
/* ==========================================================================
   원형 체크박스 (약관동의 등에서 사용) - 공용
   - 미체크: 회색 테두리 + 회색 체크
   - 체크: #3366ff 테두리 + 파란색 체크
   ========================================================================== */
.checkbox-circle { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; border-radius: 50%; border: 1px solid #808080; background-color: transparent; position: relative; cursor: pointer; margin: 0; vertical-align: middle; flex-shrink: 0; }
.checkbox-circle::after { content: "\F012C"; font-family: "Material Design Icons"; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; line-height: 1; color: #808080; pointer-events: none; font-weight: 700; }
.checkbox-circle:checked { border-color: #3366ff; }
.checkbox-circle:checked::after { color: #3366ff; }
.checkbox-circle:disabled { opacity: .5; cursor: not-allowed; }


/* user/login */
.login-container .section__login {position: absolute; top:0; width: 100%; height: 100%;}
.login-container .section__login button {position: absolute; bottom: 40.5%; width: 48%; left: 26%; padding-bottom: 12%; border-radius: 10px;}


/* gravity-modal */
.gravity-modal .modal-dialog {height: 80dvh; border-radius: 20px; }
.gravity-modal .modal-dialog .modal-content {padding: 5%; box-sizing: border-box; height: 100%; justify-content: space-between;}
.gravity-modal .modal-dialog .modal-content .modal-header {padding: 0; margin-bottom: 5%;}
.gravity-modal .modal-dialog .modal-content .modal-body {padding: 0; display: flex; align-items: center; flex-wrap: wrap; min-height: auto; overflow: unset;}
.gravity-modal .modal-dialog .modal-content .modal-footer {padding: 0;}

.gravity-modal .modal-dialog .modal-content .modal-header .title {color: #000; font-size: 1.65rem; line-height: 2rem; font-weight: 700;}
.gravity-modal .modal-dialog .modal-content .modal-header .sub-title {margin-top: 5%; font-size: 1.2rem; font-weight: 700; color: #3366ff;}

.gravity-modal .modal-dialog .modal-content .modal-body .section__box {width: 100%;}

.gravity-modal .modal-footer .box__btn {text-align: center; margin-top: 5%;}
.gravity-modal .modal-footer .box__btn button {font-size: 1.5rem; border-bottom: 2px solid #000; font-weight: 700;}

/* login-modal */
.login-modal .modal-body .form-group {padding: 5% 0;}
.login-modal .modal-body .form-group .form-group-label {font-size: 1.3rem; color: #4d4d4d; font-weight: 700;}
.login-modal .modal-body .form-group .form-group-label.sm {font-size: 1.1rem; color: #989898; font-weight: 600;}
.login-modal .modal-body .form-group .row__form-input {margin-top: 5%; height: 3rem; align-items: center; border-bottom: 1px solid #333;}
.login-modal .modal-body .form-group .row__form-input label {flex: 0 0 20%; font-size: 1.65rem; font-weight: 800; color: #333;}
.login-modal .modal-body .form-group .row__form-input input {padding: 0; font-size: 1.65rem; font-weight: 600;}
.login-modal .modal-body .form-group .row__form-input input::placeholder {font-size: 1.1rem; font-weight: 300; color: #c3c3c3;}
.login-modal .modal-body .form-group .row__form-input input:disabled {background: inherit;}

.login-modal .modal-body #area-wrapper .form-group .row__form-input input {font-size: 1.1rem; font-weight: 500;}

.login-modal .modal-body .form-group .btn-func {height: 2.7rem; font-size: 1.1rem; font-weight: 600; border-radius: 30px; width: 100%; border: 1px solid;}
.login-modal .modal-body .form-group .btn-func#btn-send-sms {color: #3366ff; border-color: #3366ff;}
.login-modal .modal-body .form-group .sms-func#sms-timer {color: #ff6666; border-color: #ff6666; display: flex; align-items: center; justify-content: center;}

.login-modal .modal-body .form-group .btn-func.search-address {color: #3366ff; border-color: #3366ff;}

.login-modal .modal-body .remember-box {display: flex; align-items: center; height: 1.5rem; margin-top: 2%;}
.login-modal .modal-body .remember-box label {font-size: 1.15rem; color: #3366ff; font-weight: 600;}
.login-modal .modal-body .remember-box input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1.2rem; height: 1.2rem; border-radius: 0; cursor: pointer; border: 1px solid #3366ff; background: unset; position: relative; margin: 0 0.5rem 0 0;}
.login-modal .modal-body .remember-box input[type="checkbox"]:checked::after { content: "\F012C"; font-family: "Material Design Icons"; position: absolute; top: 30%; left: 70%; transform: translate(-50%, -50%); font-size: 1.4rem; line-height: 1; color: #000; pointer-events: none; font-weight: 700; }

.login-modal .modal-body .find-pw-box {display: flex; align-items: center; justify-content: right; height: 1.5rem; margin-top: 5%;}
.login-modal .modal-body .find-pw-box button {font-size: 1.1rem; color: #3366ff; font-weight: 600; display: flex; align-items: center; justify-content: right;}
.login-modal .modal-body .find-pw-box button img {width: 8.5%; margin-left: 0.3rem;}

.login-modal .modal-body .box__agree-all,
.login-modal .modal-body .box__agree-item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }

.login-modal .modal-body .box__agree-all {background-color: #e5edff; height: 3.5rem; padding: 0 5%; box-sizing: border-box; border-radius: 15px; margin-bottom: 5%;}
.login-modal .modal-body .box__agree-all label {font-size: 1.3rem; font-weight: 700;}

.login-modal .modal-body .box__agree-item {box-sizing: border-box; height: 3rem; padding: 0 5%; margin-bottom: 5%;}
.login-modal .modal-body .box__agree-item label {font-weight: 500; color: #666; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%;}
.login-modal .modal-body .box__agree-item label .term-label {display: flex; align-items: center;}
.login-modal .modal-body .box__agree-item label .term-required {font-size: 0.9rem; font-weight: 700; border: 1px solid; border-radius: 15px; padding: 0.1rem 0.5rem; margin-right: 0.3rem;}
.login-modal .modal-body .box__agree-item label .term-title {font-size: 1.1rem;}
.login-modal .modal-body .box__agree-item label .term-icon {font-size: 1.5rem; margin-right: -0.5rem;}

.login-modal .modal-body .box__agree-item .checkbox-circle:checked + label { color: #000; font-weight: 600; }

.login-modal .modal-footer .box__alert {display: flex; align-items: center; justify-content: center; height: 3rem; margin-top: 5%;}
.login-modal .modal-footer .box__alert p {font-size: 1.1rem; color: #ff6666; font-weight: 600; text-align: center;}

/* term-detail-modal */
#term-detail-modal .modal-body .term-content {font-size: 1rem; overflow: auto; height: 100%;}


/* user/main */
.main-container {display: flex; flex-direction: column;}
.main-container .content-body {display: flex; flex-direction: column; flex: 1 1 auto;}
.main-container .section__main {flex-grow: 1; background-size: contain; background-position: top; background-repeat: no-repeat; padding: 5%;}

.main-container .section__main .box__header .row__header {align-items: center; justify-content: space-between;}
.main-container .section__main .box__header .row__header .logo {flex: 0 0 50%;}
.main-container .section__main .box__header .row__header .logo a img {width: 50%;}

.main-container .section__main .box__header .row__header .logout {flex: 0 0 50%; text-align: right;}
.main-container .section__main .box__header .row__header .logout a img{width: 40%}

.main-container .section__main .box__header .row__menu {margin-top: 7%; gap: 9%; align-items: center;}
.main-container .section__main .box__header .row__menu li a {font-size: 1rem; font-weight: 700;}

.main-container .section__main .box__body {margin-top: 10%;}
.main-container .section__main .box__body .box__title {padding: 3%;}
.main-container .section__main .box__body .box__title .body-title {font-size: 1.8rem; font-weight: 800;}
.main-container .section__main .box__body .box__title i.mdi-minus {font-size: 3rem; margin-left: -2%;}
.main-container .section__main .box__body .box__title .user-title {font-size: 1.2rem; font-weight: 700; line-height: 1.5rem; margin-top: -2%;}

.main-container .section__main .box__body .box__entrance-card {margin-top: 10%;}
.main-container .section__main .box__body .box__entrance-card .entrance-card {position: relative; display: block;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content {position: absolute; top:0; padding: 5%; width: 100%; height: 100%; box-sizing: border-box; font-size: 1rem; color: #fff;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-expire {margin-top: 16%; padding-left: 8%;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-available {margin-top: 1%; padding-left: 8%;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-summary {margin-top: 10%; height: 2rem; display: flex; align-items: flex-end; color: #78ffff;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-summary p {font-size: 0.8rem}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-summary p:nth-child(1) {flex: 0 0 32%;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-summary p:nth-child(2) {margin-left: 7%;}
.main-container .section__main .box__body .box__entrance-card .entrance-card .entrance-card-content .row__card-summary p span {font-size: 1.3rem; font-weight: 500; margin-left: 0.5rem;}

.main-container .section__main .box__body .box__carousel {cursor: grab; margin-top: 5%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
.main-container .section__main .box__body .box__carousel.is-dragging {cursor: grabbing; user-select: none; scroll-snap-type: none; scroll-behavior: auto;}
.main-container .section__main .box__body .box__carousel::-webkit-scrollbar {display: none;}
.main-container .section__main .box__body .box__carousel .banner-item {flex: 0 0 100%; scroll-snap-align: center;}
.main-container .section__main .box__body .box__carousel .banner-item:not(:last-child) {margin-right: 5%;}
.main-container .section__main .box__body .box__carousel .banner-item img {width: 100%;display: block;}

.main-container .section__footer {flex-shrink: 0; padding: 5% 5% 3%; background-color: #e4e4e4;}
.main-container .section__footer .row__contact {align-items: center; flex-wrap: nowrap; justify-content: space-between;}
.main-container .section__footer .row__contact .box__contact {flex: 0 0 70%; color: #666;}
.main-container .section__footer .row__contact .box__contact .contacts {font-size: 1.2rem; font-weight: 700;}
.main-container .section__footer .row__contact .box__contact .cs-time {font-size: 0.7rem; font-weight: 500; margin-top: 1%;}

.main-container .section__footer .row__contact .box__sns {flex: 0 0 21%; justify-content: space-between;}
.main-container .section__footer .row__contact .box__sns .btn-sns {width: 40%;}

.main-container .section__footer .row__func {margin-top: 4%; align-items: center; flex-wrap: nowrap; justify-content: space-between;}
.main-container .section__footer .row__func .box__ask {flex: 0 0 40%;}
.main-container .section__footer .row__func .box__ask .btn-ask-wrapper {width: 62%;}

.main-container .section__footer .row__func .box__terms {flex: 0 0 55%; font-size: 0.8rem; color: #666; font-weight: 500; text-align: right; margin-right: -1%;}

.main-container .section__footer .row__copyright {margin-top: 7%; flex-wrap: wrap; justify-content: center;}
.main-container .section__footer .row__copyright p {font-size: 0.8rem; color: #989898; line-height: 1rem;}


/* inner */
.inner-container {display: flex; flex-direction: column; background-color: #e4e4e4; height: 100vh; height: 100dvh; overflow: hidden;}
.inner-container .content-body {display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;}


.inner-container .box__inner_header {height: 5rem; flex-shrink: 0;}
.inner-container .box__inner_header .row__inner_header {height: 100%; align-items: center; justify-content: space-between; padding: 0 5%;}
.inner-container .box__inner_header .row__inner_header .header-col a {font-size: 0;}
.inner-container .box__inner_header .row__inner_header .header-col.header-back {text-align: left; flex: 0 0 10%;}
.inner-container .box__inner_header .row__inner_header .header-col.header-back img {width: 30%;}
.inner-container .box__inner_header .row__inner_header .header-col.header-title {text-align: center;}
.inner-container .box__inner_header .row__inner_header .header-col.header-title img {width: 60%;}
.inner-container .box__inner_header .row__inner_header .header-col.header-home {text-align: right; flex: 0 0 10%;}
.inner-container .box__inner_header .row__inner_header .header-col.header-home img {width: 90%;}

.inner-container .box__inner_main {flex-grow: 1; min-height: 0; background-color: #fff; border-radius: 30px 30px 0 0; padding: 8% 5%; display: flex; flex-direction: column; overflow: auto;}
.inner-container .box__inner_main .box__inner_title {font-size: 1.6rem; font-weight: 700; line-height: 2rem; color: #1a1a1a;}
.inner-container .box__inner_main .box__inner_title .title-desc {font-size: 1rem; font-weight: 500; margin-top: 5%;}

/* centers/index */
.center-container .box__center_tab {margin-top: 10%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative;}
.center-container .box__center_tab .box__tab_header {flex: 0 0 auto;}
.center-container .box__center_tab .box__tab_content {flex: 1 1 auto; min-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative;}
.center-container .box__center_tab .box__tab_footer {flex: 0 0 auto; box-shadow: 0 -6px 10px rgba(255, 255, 255, 0.8); position: relative; z-index: 1;}

.center-container .box__center_tab .box__tab_header .row__tab {height: 3rem; align-items: center; gap: 10%}
.center-container .box__center_tab .box__tab_header .row__tab .li_tab {font-size: 1rem; font-weight: 700; color: #989898; list-style: none; height: 1.5rem; border-bottom: 2px solid #fff;}
.center-container .box__center_tab .box__tab_header .row__tab .li_tab.active {color: #3366ff; border-color: #3366ff;}

.center-container .box__center_tab .box__tab_content .box__tab_status {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.center-container .box__center_tab .box__tab_content .box__tab_status p {font-size: 1rem; font-weight: 500; color: #989898;}

.center-container .box__center_tab .box__tab_content .row__list {flex-direction: column; padding-bottom: 2%;}
.center-container .box__center_tab .box__tab_content .row__list .li_center {list-style: none; border: 1px solid #989898; border-radius: 15px; padding: 4% 3%; box-sizing: border-box; font-size: 1rem; margin: 2% 0; outline: 4px solid transparent; outline-offset: -4px;}
.center-container .box__center_tab .box__tab_content .row__list .li_center.active {border-color: #3366ff; outline-color: #3366ff;}

.center-container .box__center_tab .box__tab_content .row__list .li_center .row__center {align-items: center; justify-content: space-between; margin-bottom: 2.5%;}
.center-container .box__center_tab .box__tab_content .row__list .li_center .row__center .center-name {font-size: 1.2rem; font-weight: 700; word-break: keep-all; flex: 0 0 75%;}
.center-container .box__center_tab .box__tab_content .row__list .li_center .row__center .btn-center-info {display: flex; align-items: center; color: #8f8f8f; font-size: 0.9rem; font-weight: 500;}
.center-container .box__center_tab .box__tab_content .row__list .li_center .row__center .btn-center-info i {font-size: 1.2rem;}
.center-container .box__center_tab .box__tab_content .row__list .li_center .center-address {font-weight: 500; margin-bottom: 1.5%;}
.center-container .box__center_tab .box__tab_content .row__list .li_center .row__center .center-contact {font-weight: 500; color: #8f8f8f;}
.center-container .box__center_tab .box__tab_content .row__list .li_center .row__center .center-distance {font-weight: 500; color: #3366ff;}

.center-container .box__center_tab .box__tab_footer button {background-color: #3333ff; color: #fff; font-size: 1.2rem; font-weight: 600; width: 100%; height: 4rem; border-radius: 10px;}

/* centers/detail */
.center-container .box__detail {margin-top: 10%;}
.center-container .box__detail .center-basic p {font-size: 1.3rem; line-height: 1.8rem; font-weight: 500; word-break: keep-all; margin-bottom: 1%;}

.center-container .box__detail .center-time {margin-top: 10%;}
.center-container .box__detail .center-time .title {font-size: 1.3rem; font-weight: 700; color: #808080; margin-bottom: 2%;}
.center-container .box__detail .center-time .time {font-size: 1.3rem; font-weight: 500; line-height: 2rem;}

.center-container .box__detail .btn-naver-place {margin-top: 5%; display: flex; align-items: center; justify-content: center; height: 3.5rem; border-radius: 10px; background-color: #e5edff; color: #3366ff; font-size: 1.2rem; font-weight: 700;}

.center-container .box__common {margin-top: 15%;}
.center-container .box__common .hat {width: 12%; border-top: 5px solid #3366ff;}
.center-container .box__common .common-notice {margin-top: 5%; font-size: 1.3rem; font-weight: 700; color: #3366ff; line-height: 2rem;}
.center-container .box__common .notice-ul {margin-top: 5%}
.center-container .box__common .notice-ul li {font-size: 1rem; font-weight: 600; line-height: 1.5rem; margin-bottom: 1%;}
.center-container .box__common .notice-ul li .bullet {flex: 0 0 0.5rem;}

/* user/my */
.user-container .box__my {margin-top: 10%; padding: 5%;}
.user-container .box__my .my_info {background-color: #f5f5f7; padding: 28% 5% 8%; border-radius: 15px; position: relative;}
.user-container .box__my .my_info .my_photo {position: absolute; width: 33.33%; left: 33.33%; top: -15%; border: 1px solid #3366ff; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1;}
.user-container .box__my .my_info .my_photo img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.user-container .box__my .my_info p {text-align: center;}
.user-container .box__my .my_info .name {font-size: 1.7rem; font-weight: 700;}
.user-container .box__my .my_info .period-title {font-size: 1.2rem; color: #909090; font-weight: 500; margin-top: 8%}
.user-container .box__my .my_info .avail-period {font-size: 1.2rem; color: #666; font-weight: 500; margin-top: 2%;}

.user-container .box__area {margin-top: 10%;}
.user-container .box__usage {margin-top: 10%;}

.user-container .box_title {font-size: 1.2rem; font-weight: 600;}
.user-container .box_content {background-color: #f5f5f7; border-radius: 15px; margin-top: 2%; padding: 4% 5% 3%;}
.user-container .box_content .section__row {font-size: 1.1rem; font-weight: 500; align-items: center; margin-bottom: 3%; justify-content: space-between;}
.user-container .box_content .section__row.row__func {justify-content: right; margin: 0;}
.user-container .box_content .section__row .col.col_title {flex: 0 0 23%; color: #909090;}
.user-container .box_content .section__row .col.col_value {flex: 0 0 75%; color: #333; word-break: keep-all;}
.user-container .box_content .section__row .btn-func {display: flex; font-size: 0.9rem; align-items: center; color: #808080;}
.user-container .box_content .section__row .btn-func i {font-size: 1.1rem;}

/* user/my_photo */
.user-container .box__upload {flex-grow: 1; margin-top: 10%;}
.user-container .box__upload .upload_area {padding: 0 20%;}
.user-container .box__upload .upload_area button {width: 100%; aspect-ratio: 1 / 1; border-radius: 15px; overflow: hidden;}
.user-container .box__upload .upload_area button img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px; display: block;}

.user-container .box__upload .upload-desc {font-size: 1.2rem; font-weight: 700; color: #3366ff; text-align: center; margin-top: 5%;}

.user-container .box__bottom {flex-shrink: 0; margin-top: 5%;}
.user-container .box__bottom button {height: 4rem; font-size: 1.2rem; font-weight: 700; background-color: #3333ff; color: #fff; width: 100%; border-radius: 10px;}
.user-container .box__bottom button.btn-disabled {color: #aaa; background-color: #dcdcdc;}

/* user/usage */
.user-container .box__usage {flex-grow: 1; display: flex; flex-direction: column; min-height: 0;}
.user-container .box__usage .usage-list-box {flex-grow: 1; display: flex; flex-direction: column; min-height: 0;}
.user-container .box__usage .usage-list-box .usage-month { position: relative; display: inline-block; width: 27%;}
.user-container .box__usage .usage-list-box .usage-month i { position: absolute; right: 2%; top: 48%; transform: translateY(-50%); pointer-events: none; color: #666; font-size: 2rem;}
.user-container .box__usage .usage-list-box .usage-month select { border: none; font-size: 1.25rem; font-weight: 500; color: #333; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 5% 1.5rem 5% 0; }
.user-container .box__usage .usage-list-box .usage-month select option {font-size: 1.2rem; font-weight: 500; color: #333;}

.user-container .box__usage .usage-list-box .usage-list {margin-top: 1%; flex-grow: 1; overflow-y: auto; min-height: 0;}
.user-container .box__usage .usage-list-box .usage-list .usage-empty {font-size: 1.1rem; font-weight: 500; color: #575756; line-height: 1.8rem; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; border-top: 1px solid #bfbfbf;}
.user-container .box__usage .usage-list-box .usage-list .row__usage_list {align-items: center; justify-content: space-between; padding: 5% 0; border-top: 1px solid #bfbfbf; flex-wrap: nowrap; margin-bottom: 10%;}
.user-container .box__usage .usage-list-box .usage-list .row__usage_list .usage-col {font-size: 1.2rem; font-weight: 500;}
.user-container .box__usage .usage-list-box .usage-list .row__usage_list .usage-col.col__round {flex: 0 0 15%; color: #4d4d4d;}
.user-container .box__usage .usage-list-box .usage-list .row__usage_list .usage-col.col__date {flex: 0 0 40%; text-align: center; font-weight: 600;}
.user-container .box__usage .usage-list-box .usage-list .row__usage_list .usage-col.col__center {flex: 0 0 45%; text-align: right; font-weight: 600; word-break: keep-all;}

.user-container .box__usage .usage-bottom {flex-shrink: 0; margin-top: 5%; background-color: #e5edff; padding: 3% 5%; border-radius: 20px;}
.user-container .box__usage .usage-bottom p {font-size: 1.1rem; font-weight: 500; line-height: 1.6rem;}

/* board/notice */
.board-container .box__notice {flex-grow: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 10%;}
.board-container .box__notice .notice-list-box {flex-grow: 1; display: flex; flex-direction: column; min-height: 0;}

.board-container .box__notice .notice-list-box .btn-inquiry-box {margin: 2% 0; display: flex; align-items: center; justify-content: right;}
.board-container .box__notice .notice-list-box .btn-inquiry-box .btn-inquiry {font-size: 1.2rem; font-weight: 600; color: #666; display: flex; align-items: center;}
.board-container .box__notice .notice-list-box .btn-inquiry-box .btn-inquiry i {font-size: 1.7rem;}

.board-container .box__notice .notice-list-box .notice-list {margin-top: 1%; flex-grow: 1; overflow-y: auto; min-height: 0; border-top: 1px solid #bfbfbf; overflow-x: hidden;}
.board-container .box__notice .notice-list-box .notice-list .notice-empty {font-size: 1.1rem; font-weight: 500; color: #575756; line-height: 1.8rem; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; border-top: 1px solid #bfbfbf;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list {flex-direction: column; align-items: stretch; justify-content: center; border-top: 1px solid #bfbfbf; cursor: pointer; margin-bottom: 10%;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list:first-child {border-top: none;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-col {font-size: 1.2rem; font-weight: 500;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-row-head {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2% 0; height: 2.8rem;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-col.col__no {flex: 0 0 10%; color: #4d4d4d;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-col.col__title {flex: 1 1 auto; font-weight: 600; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4rem; max-height: 2.8rem;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-col.col__icon {flex: 0 0 auto; margin-left: 8px; transition: transform 0.2s;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list.is-open .notice-col.col__icon {transform: rotate(180deg);}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-row-body {display: none; padding: 0 0 5%; border-top: 1px dashed #bfbfbf; overflow-x: hidden;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-detail-title {font-size: 1.1rem; font-weight: 600; margin: 4% 0 2%; word-break: break-word;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-detail-content {font-size: 1rem; font-weight: 400; color: #575756; line-height: 1.6rem; word-break: break-word;}
.board-container .box__notice .notice-list-box .notice-list .row__notice_list .notice-detail-content img {height: auto !important;}

/* board/inquiry */
.board-container .box__inquiry {flex-grow: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 10%;}
.board-container .box__inquiry .inquiry-box {flex-grow: 1;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box {margin-bottom: 8%;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input-title {display: flex; justify-content: space-between; align-items: flex-end;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input-title .tit {font-size: 1.2rem; font-weight: 600;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input-title .tit span {font-size: 1.1rem; font-weight: 500; color: #333;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input-title .cnt {font-size: 0.8rem; text-align: right; color: #4d4d4d;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input {margin-top: 2%; border: 1px solid #808080; border-radius: 5px; height: 3rem; overflow: hidden;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input.textarea {height: 16rem;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input input,
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input textarea {padding: 0 1rem; height: 100%; width: 100%; box-sizing: border-box; font-size: 1.1rem;}
.board-container .box__inquiry .inquiry-box .inquiry-input-box .input textarea {resize: none; overflow-y: auto; padding: 1rem;}

.board-container .box__inquiry .inquiry-box .inquiry-noti-box .noti-title {font-size: 1.2rem; font-weight: 700; color: #4d4d4d; margin-bottom: 2%;}
.board-container .box__inquiry .inquiry-box .inquiry-noti-box .row__noti {align-items: flex-start; font-size: 1rem; font-weight: 500; color: #666; line-height: 1.3rem; margin-bottom: 1%;}
.board-container .box__inquiry .inquiry-box .inquiry-noti-box .row__noti .bullet {flex: 0 0 0.8rem;}
.board-container .box__inquiry .inquiry-box .inquiry-noti-box .row__noti .value {word-break: keep-all;}

.board-container .box__inquiry .inquiry-bottom {flex-shrink: 0; margin-top: 5%;}
.board-container .box__inquiry .inquiry-bottom button {height: 4rem; font-size: 1.2rem; font-weight: 700; background-color: #3333ff; color: #fff; width: 100%; border-radius: 10px;}
.board-container .box__inquiry .inquiry-bottom button.btn-disabled {color: #aaa; background-color: #dcdcdc;}



/* center-usages/sign */
.center-container .box__sign {flex-grow: 1; margin-top: 10%;}
.center-container .box__sign .sign-title {font-size: 1.2rem; font-weight: 700; color: #3366ff;}
.center-container .box__sign .sign-form {margin-top: 5%;}
.center-container .box__sign .sign-form canvas {border: 1px solid #979797; border-radius: 20px; background-color: #f5f5f7; height: 14rem; width: 100%; box-sizing: border-box;}
.center-container .box__sign .sign-form p {font-size: 1.2rem; color: #b2b2b2; width: 100%; text-align: center; line-height: 1.5rem;} 
.center-container .box__sign .sign-form .btn-sign-clear {text-align: right; margin-bottom: 2%;}
.center-container .box__sign .sign-form .btn-sign-clear button {font-size: 1rem; font-weight: 500; color: #aaa;}

.center-container .box__sign .sign-btn-box {margin-top: 5%;}
.center-container .box__sign .sign-btn-box button {height: 4rem; font-size: 1.2rem; font-weight: 700; background-color: #3333ff; color: #fff; width: 100%; border-radius: 10px;}
.center-container .box__sign .sign-btn-box button.btn-disabled {color: #aaa; background-color: #dcdcdc;}

.center-container .box__self {flex-shrink: 0; margin-top: 10%;}
.center-container .box__self .btn-self-entrance {background-color: #e5edff; display: flex; flex-wrap: nowrap; width: 100%; border-radius: 20px; padding: 5% 8%; justify-content: space-between;}
.center-container .box__self .btn-self-entrance .btn-col.col__txt {text-align: left; display: flex; flex-direction: column; justify-content: space-between;}
.center-container .box__self .btn-self-entrance .btn-col.col__txt .t1 {font-size: 1.35rem; font-weight: 700;}
.center-container .box__self .btn-self-entrance .btn-col.col__txt .t2 {font-size: 1.1rem; font-weight: 600; color: #4d4d4d; line-height: 1.6rem; margin-top: 5%;}
.center-container .box__self .btn-self-entrance .btn-col.col__icon {display: flex; align-items: center; justify-content: right;}
.center-container .box__self .btn-self-entrance .btn-col.col__icon i {font-size: 3rem; color: #9bbdff; margin-right: -1.5rem;}

/* center-usages/ticket */
.ticket-container .box__ticket {flex-grow: 1; margin: 0 5% 5%; background-color: #fff; border-radius: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); overflow: hidden; display: flex; flex-direction: column;}
.ticket-container .box__ticket .box__ticket_header {background: linear-gradient(90deg, #1d1d1b, #1e1e22, #2f2fda); display: flex; align-items: center; justify-content: center; height: 3.5rem; flex-shrink: 0;}
.ticket-container .box__ticket .box__ticket_header p {font-size: 1.3rem; font-weight: 500; text-align: center; color: #fff;}

.ticket-container .box__ticket .box__ticket_body {flex-grow: 1; overflow: auto;}
.ticket-container .box__ticket .box__ticket_body .box__user {padding: 5%;}
.ticket-container .box__ticket .box__ticket_body .box__user .user_profile {text-align: center; margin: 8% 0 5%;}
.ticket-container .box__ticket .box__ticket_body .box__user .user_profile img {width: 35%; border-radius: 15px;}

.ticket-container .box__ticket .box__ticket_body .box__user .user_name {font-size: 1.6rem; font-weight: 700; letter-spacing: 0.3rem; text-align: center; margin-bottom: 10%;}

.ticket-container .box__ticket .box__ticket_body .box__user .row__usage {font-size: 1.3rem; font-weight: 500; justify-content: space-between; align-items: flex-start; padding: 0 13%; margin-bottom: 5%; flex-wrap: nowrap;}
.ticket-container .box__ticket .box__ticket_body .box__user .row__usage .usage-col.col__title {color: #575756; flex: 0 0 25%;}
.ticket-container .box__ticket .box__ticket_body .box__user .row__usage .usage-col.col__value {font-size: 1.35rem; word-break: keep-all; flex: 0 0 70%; text-align: right;}

.ticket-container .box__ticket .box__ticket_body .box__dashed {margin: 0 2%; border-top: 2px dashed #b0b0b0;}

.ticket-container .box__ticket .box__ticket_body .box__sign {padding: 5%;}
.ticket-container .box__ticket .box__ticket_body .box__sign .sign-title {font-size: 1.35rem; font-weight: 600; text-align: center; margin: 5% 0;}
.ticket-container .box__ticket .box__ticket_body .box__sign .sign-area {border-radius: 20px; background-color: #f5f5f7; height: 10rem; display: flex; align-items: center; justify-content: center;}
.ticket-container .box__ticket .box__ticket_body .box__sign .sign-area img {height: inherit; max-height: 100%;}
.ticket-container .box__ticket .box__ticket_body .box__sign .sign-area p {font-size: 2rem; font-weight: 500; color: #909090;}

.ticket-container .box__ticket .box__ticket_body .empty {font-size: 1.25rem; font-weight: 500; color: #575756; line-height: 1.8rem; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;}

/* alert-modal */
.alert-modal .modal-dialog {border-radius: 20px;}
.alert-modal .modal-dialog .modal-content {padding: 5%;}
.alert-modal .modal-dialog .modal-content .modal-body {display: flex; flex-direction: column; padding: 0;}
.alert-modal .modal-dialog .modal-content .modal-body .content {flex-grow: 1; min-height: 30dvh; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.alert-modal .modal-dialog .modal-content .modal-body .content .icon {margin: 5% 0; text-align: center;}
.alert-modal .modal-dialog .modal-content .modal-body .content .icon img {width: 55%;}
.alert-modal .modal-dialog .modal-content .modal-body .content p {font-size: 1.4rem; font-weight: 700; color: #333;}
.alert-modal .modal-dialog .modal-content .modal-body .content p.desc {font-size: 1.3rem; font-weight: 500; color: #666; margin: 10% 0 5%; line-height: 2rem; text-align: center;}
.alert-modal .modal-dialog .modal-content .modal-body .content p.desc span {color: #333; font-weight: 600;}
.alert-modal .modal-dialog .modal-content .modal-body button.popup_button {flex-shrink: 0; height: 3.5rem; width: 80%; margin-left: 10%; margin-top: 5%; background-color: #3333ff; color: #fff; font-size: 1.2rem; font-weight: 500; border-radius: 10px; border: 1px solid #3333ff;}
.alert-modal .modal-dialog .modal-content .modal-body .row__confirm-buttons {flex-direction: column;}
.alert-modal .modal-dialog .modal-content .modal-body .row__confirm-buttons .btn-confirm-no {background-color: #fff; border-color: #3333ff; color: #3366ff; font-weight: 700;}