@import url("https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("_root.css");

:root {
  --header-height: 5.7rem;
}


/***********************************************************************************************************************
  A. Default
***********************************************************************************************************************/
* {
  vertical-align: baseline;
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
  box-sizing: border-box;
  line-height: 150%;
}

html,
body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans SC", normal, "Spoqa Han Sans Neo", normal, sans-serif;
  line-height: 150%;
  color: var(--label-normal);
}

a {
  text-decoration: none;
  color: inherit;
}
a:not([href]):hover {
  cursor: pointer;
}

button {
  padding: 0;
  background-color: transparent;
  border: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
p,
span {
  margin: 0;
}

hr {
  border-color: var(--border-normal);
}

pre {
  font-family: Pretendard Variable;
  white-space: pre-wrap;
}

input,
textarea,
select {
  width: 100%;
  vertical-align: middle;
  box-shadow: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
}
input::placeholder,
textarea::placeholder {
  color: var(--label-disabled);
}
input[type="text"]:focus,
input[type="submit"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="reset"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--border-dark);
}
input[type="text"],
input[type="submit"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="reset"],
input[type="email"],
input[type="tel"],
input[type="date"],
select {
  height: 4.8rem;
  padding: 0 var(--space-6);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-md);
  color: var(--label-normal);
  line-height: 4.8rem;
}
input[readonly],
textarea[readonly] {
  background-color: var(--bg-subtle-gray);
  cursor: default;
}
input:not([type="radio"], [type="checkbox"]):read-only,
textarea:read-only {
  background-color: var(--bg-subtle-gray);
  color: var(--label-assistive);
  cursor: default;
}
input[readonly]:focus,
input:not([type="radio"], [type="checkbox"]):read-only:focus,
textarea[readonly]:focus,
textarea:read-only:focus {
  border-color: var(--border-normal);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../svg/caret-down-bold.svg) no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding: 0 calc(var(--space-6) + 24px) 0 var(--space-6);
}

textarea {
  padding: var(--space-6);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-md);
  color: var(--label-normal);
  line-height: 150%;
}

/* common */
.hidden {
  display: inline-block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.data_none {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh;
  font-size: var(--fs-body-md);
  color: var(--label-normal);
}

/***********************************************************************************************************************
  B. Layout
***********************************************************************************************************************/
.wrapper {
  overflow: hidden;
}

/*-------------------------------------------
  -- container
-------------------------------------------*/
.container {
  width: 100%;
  max-width: unset;
  height: 100%;
  min-height: calc(100vh - 35rem);
  padding: 0;
  padding-top: var(--header-height);
  margin: 0;
}

.content {
  max-width: 480px;
  /* padding: 4rem 0 8rem 0; */
  padding: var(--space-14) 0;
  margin: 0 auto;
}
.top_group + .content {
  padding-top: calc(4rem + 4rem);
  padding-bottom: calc(6rem + 4rem);
}

.content .inner {padding: 0 2rem;}

/*-------------------------------------------
  -- header
-------------------------------------------*/
/* 기본 헤더 */
.header {
  position: fixed;
  width: 100%;
  height: auto;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-light);
  background-color: #fff;
  backdrop-filter: blur(2px);
  z-index: 99;
}
.header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 480px;
  height: 100%;
  padding: 0 var(--space-8);
  margin: 0 auto;
}
.header .logo {height: 2.8rem;}
.header_btns {
  display: flex;
  gap: var(--gap-4);
}
.header a.btns_item {
  line-height: 3.2rem;
}
.header .btns_item i {
  width: 2.4rem;
  height: 2.4rem;
}

/* 
  모바일용 서브페이지 헤더
  (ex. 회원가입, 상세보기 페이지 등에 사용)
*/
.sub_header {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid var(--border-light);
  background-color: #fff;
}
.sub_header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-5);
  width: 100%;
  max-width: 480px;
  height: 100%;
  padding: 0 var(--space-8);
  margin: 0 auto;
}
.sub_header h3 {
  font-size: var(--fs-body-md);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}
.sub_header .sub_header_btn {background-color: transparent;}
.sub_header .sub_header_btn i {
  width: 2.4rem;
  height: 2.4rem;
}

/* lnb */
.lnb_header {
  width: 100%;
  border-bottom: 1px solid var(--gray-300);
  background-color: #fff;
}
.lnb_header .lnb_header_inner {
  max-width: 480px;
  padding: 0 2rem;
  margin: 0 auto;
}
.lnb_header .nav {
  display: flex;
  gap: 1.6rem;
  font-size: 1.4rem;
}
.lnb_header .nav li {
  color: var(--dark);
  opacity: 0.5;
}
.lnb_header .nav li.on {
  border-bottom: 2px solid var(--dark);
  font-weight: 500;
  opacity: 1;
}
.lnb_header .nav li a {
  display: inline-block;
  padding: 1.2rem 0;
}

/*-------------------------------------------
  -- footer
-------------------------------------------*/
footer {
  padding: var(--space-8) 0;
  padding-bottom: var(--space-14);
  background-color: var(--bg-subtle-gray);
}

footer .footer_inner {
  position: relative;
  max-width: 480px;
  padding: 0 2rem;
  margin: 0 auto;
}

footer .footer_info ul {
  font-size: var(--fs-body-xs);
  color: var(--label-assistive);
}
footer .footer_info ul li + li {margin-top: var(--gap-1);}

footer .footer_info ul.top {
  margin-bottom: var(--space-9);
  font-size: var(--fs-body-md);
  color: var(--label-normal);
}
footer .footer_info ul.top li span {
  margin-right: var(--gap-2);
  font-weight: var(--u-fw-bold);
}
footer .footer_info ul.top li + li {margin-top: var(--gap-2);}

footer .copyright {
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-normal);
  font-size: var(--fs-body-xs);
  color: var(--label-assistive);
}

footer .sns_wrap {
  position: absolute;
  right: 2rem;
  display: flex;
  gap: var(--gap-2);
}
footer .sns_wrap a {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-1);
}
footer .sns_wrap a i {
  width: 100%;
  height: 100%;
}


/*-------------------------------------------
  -- allmenu
     * 햄버거버튼 클릭 시 노출되는 전체메뉴 style
-------------------------------------------*/
.allmenu_wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  display: none;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #fff;
  overflow-y: auto;
}

.allmenu_header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1040;
  height: var(--header-height);
  background-color: #fff;
}
.allmenu_header .allmenu_header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 480px;
  padding: 0 var(--space-8);
  margin: 0 auto;
}
.allmenu_header span {
  font-size: var(--fs-body-lg);
  font-weight: var(--u-fw-medium);
  color: var(--label-strong);
}
.allmenu_header_btns {
  display: flex;
  gap: var(--gap-4);
}
.allmenu_header_btn i {
  width: 2.4rem;
  height: 2.4rem;
}

.allmenu_nav {
  max-width: 480px;
  padding-top: calc(5.6rem + var(--space-10));
  margin: 0 auto;
}
.allmenu_nav .user_wrap {}
.allmenu_nav .user_wrap .inner {
  padding: var(--space-10) var(--space-8);
  border-bottom: 1px solid var(--border-normal);
}
.allmenu_nav .user_wrap a {
  font-size: var(--fs-heading-lg);
}
.allmenu_nav .user_wrap a i {
  width: 2.8rem;
  height: 2.8rem;
}
.allmenu_nav .nav_wrap {
  padding: 0 var(--space-8);
  margin: var(--space-14) 0;
}

/* 대메뉴 */
.allmenu_nav .nav {
  display: block;
  font-size: var(--fs-body-md);
  overflow-y: auto;
}
.allmenu_nav li + li {
  margin-top: var(--gap-6);
}

/* 메뉴 리스트 */
.allmenu_nav li .depth_title {
  color: var(--label-alternative);
  line-height: 150%;
}
.allmenu_nav li .depth1 {
  padding: var(--space-8);
  margin-top: var(--gap-2);
  border-radius: var(--radius-2);
  background-color: var(--bg-subtle-gray);
}
.allmenu_nav li .depth1 li + li {
  margin-top: var(--gap-3);
}
.allmenu_nav li .depth1 li a {
  font-weight: var(--u-fw-medium);
  color: var(--label-netural);
}

/* 메뉴 하단 */
.nav_bottom {margin-top: var(--space-10); text-align: center;}
.nav_bottom a {color: var(--label-assistive);}

/*-------------------------------------------
  -- appbar
     * 모바일용 하단 고정 탭바
-------------------------------------------*/
.appbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid var(--gray-300);
  z-index: 102;
}

.appbar ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.appbar ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  font-size: 1rem;
  color: var(--gray-800);
  text-align: center;
}
.appbar ul li a i {
  width: 3rem;
  height: 3rem;
  filter: invert(28%) sepia(39%) saturate(53%) hue-rotate(160deg)
    brightness(84%) contrast(88%);
}
.appbar ul li a.on {
  color: var(--primary);
}
.appbar ul li a.on i {
  filter: var(--filter-primary);
}

/*-------------------------------------------
  -- fixed bottom
-------------------------------------------*/
.fixed-bottom.btn_bottom_wrap {
  background-color: #fff;
  box-shadow: 0px -4px 14px 0px rgba(0, 0, 0, 0.08);
  z-index: 2;
}
.btn_bottom_wrap .inner {
  max-width: 480px;
  padding: 0 2rem;
  margin: 0 auto;
}
.btn_bottom_wrap .btn_group {
  display: flex;
  gap: 1rem;
  padding: 1.6rem 0;
}

/*-------------------------------------------
  -- modal
-------------------------------------------*/
/* default */
.modal-dialog {
  margin: var(--space-8);
}
.modal-content {
  padding: var(--space-5);
  border-radius: var(--radius-4);
  font-size: var(--fs-body-md);
  color: var(--label-netural);
}
.modal-dialog-scrollable {height: calc(100% - 2rem * 2);}
.modal-dialog-centered {min-height: calc(100% - 2rem * 2);}

.modal-header {
  gap: var(--gap-3);
  padding: var(--space-5);
  border-bottom: 0;
  border-top-left-radius: var(--radius-4);
  border-top-right-radius: var(--radius-4);
}
.modal-title {
  margin-bottom: 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
  line-height: 150%;
}
.modal-header .btn-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  margin-left: auto;
  border: 0;
  border-radius: 0;
  background: transparent url(../svg/x-bold.svg) center/100% no-repeat;
  filter: var(--filter-assistive);
}

.modal-body {
  padding: var(--space-5);
}

.modal-footer {
  justify-content: center;
  gap: var(--gap-2);
  padding: var(--space-5); 
  border-top: 0;
  border-bottom-left-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
}
.modal-footer > * {
  margin: 0;
}

/* size */
.modal-full {
  width: 100%;
  max-width: unset;
  height: 100%;
  margin: 0;
  padding: 0;
}
.modal-full .modal-content {
  height: 100%;
  border: none;
  border-radius: 0;
}
.modal-full .modal-header, .modal-full .modal-footer {border-radius: 0;}



/***********************************************************************************************************************
  C. Sub
***********************************************************************************************************************/
/*-------------------------------------------
  -- common
     * 서브페이지 공통 스타일
-------------------------------------------*/
/* title */
.page_title_wrap {margin-bottom: var(--space-10);}
.page_title {
  font-size: var(--fs-heading-md);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}
.page_title.v2 {text-align: center;}

.page_desc {
  font-size: var(--fs-body-md);
  color: var(--label-alternative);
  margin-top: var(--gap-1);
}
.page_title.v2 + .page_desc {text-align: center;}

.sec_title_wrap {margin-bottom: var(--space-6);}
.sec_title {
  font-size: var(--fs-body-lg);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}
.sec_title_ref {
  margin-left: var(--gap-1);
  font-size: var(--fs-body-sm);
  font-weight: var(--u-fw-regular);
  color: var(--label-alternative);
}

/* content */
.conts_wrap {}



/*-------------------------------------------
  -- agree
     * 약관 동의 공통 style
-------------------------------------------*/
.agree_wrap {}

/* 전체동의 */
.agree_all {
  padding: var(--space-7);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-2);
}
.agree_all .form_checkbox label {
  font-weight: var(--u-fw-bold);
}

.agree_all + .agree_group {
  margin-top: var(--gap-4);
  padding: 0 var(--space-7);
}

.agree_group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}
.agree_group .form_checkbox {gap: var(--gap-4);}
.agree_group .form_checkbox .chk_group {align-items: center;}
.agree_group .form_checkbox .btn_arrow {width: 2rem; height: 2rem;}
.agree_group .form_checkbox .btn_arrow i {width: 100%; height: 100%; filter: var(--filter-disabled);}
.agree_group .form_checkbox .hidden {display: none;}

/* 240309 임시 스타일 */
.agree_detail_modal .modal-body p {
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark);
}
.agree_detail_modal .modal-body pre {
  padding-bottom: 1.6rem;
}
.agree_detail_modal .modal-body table {
  margin-top: 1rem;
}

/*-------------------------------------------
  -- compl area
     * 완료 페이지 (ex. 신청완료 등등)
-------------------------------------------*/
.compl_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-6);
  padding: var(--space-14) 0;
  text-align: center;
}

.compl_area img {
  width: 7.2rem;
  height: 7.2rem;
  margin-bottom: var(--gap-4);
}

.compl_area .compl_text {
  font-size: var(--fs-body-md);
  color: var(--label-alternative);
  word-break: keep-all;
}
.compl_area .compl_text .title {
  margin-bottom: var(--gap-2);
  font-size: var(--fs-heading-md);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}

.compl_area .compl_btn .u_btn {
  width: auto;
  min-width: 10rem;
}


/*-------------------------------------------
  -- login
-------------------------------------------*/
.login_area {padding: 6rem 0;}


/*-------------------------------------------
  -- mypage
-------------------------------------------*/
.content.mypage {padding: 0;}
.content.mypage .conts_wrap {padding: var(--space-14) 0;}

/* profile */
.my_profile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--gap-4);
}
.my_profile_thumb {
  position: relative;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 999px;
  background-color: var(--bg-subtle-gray);
  overflow: hidden;
}
.my_profile_thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my_profile_info {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-2);
}
.my_profile_info .user_area {
  flex: 1;
}
.my_profile_info .user_area .name {
  font-size: var(--fs-heading-md);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}
.my_profile_info .user_area .membership {
  font-size: var(--fs-body-md);
  color: var(--primary);
}

.profile_info_box {
  padding: var(--space-8);
  margin-top: var(--gap-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2);
}
.profile_info_box hr {
  margin: var(--gap-5) 0;
  border: 1px dashed var(--border-normal);
}
.profile_info_box .box {text-align: center;}
.profile_info_box .qr-section {text-align: center;}
.profile_info_box .qr-section img {
  width: 100%;
  height: auto;
  max-width: 200px;
}

/* benefit */
.my_benefit_area .acc_wrap {border-top: 1px solid var(--border-dark);}

/* reservation */
.my_status_area {background-color: var(--bg-subtle-gray);}
.my_status_area .status_box {
  padding: var(--space-8) 0;
  border-radius: var(--radius-2);
  background-color: #fff;
}
.status_group_area {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.status_group_area li {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-body-sm);
  color: var(--label-assistive);
}
.status_group_area li .num {
  font-size: var(--fs-heading-lg);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}
.my_status_area .status_box .btn_group {
  padding: 0 var(--space-8);
  margin-top: var(--gap-5);
}
.my_status_area .status_box .btn_group .u_btn {width: 100%;}



/***********************************************************************************************************************
  D. Componant
***********************************************************************************************************************/
.components_wrap {padding: 0;}
.components_wrap .conts_wrap {padding: var(--space-14) 0;}

/*-------------------------------------------
  -- form
     * 폼 공통 style
-------------------------------------------*/
.form_wrap + .form_wrap {
  margin-top: 2.4rem;
}
.form_wrap > * + * {
  margin-top: var(--gap-6);
}

.form_title {
  padding-bottom: 1.6rem;
  margin: 4.8rem 0 2rem 0;
  border-bottom: 1px solid var(--gray-300);
}
.form_title h3 {
  font-size: 1.8rem;
}

.form_group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.form_group + .form_group {
  margin-top: var(--gap-6);
}

.form_head {
  font-size: var(--fs-body-sm);
  color: var(--label-alternative);
  line-height: normal;
}
.form_head.req::after {
  content: '*';
  color: var(--primary);
}

.form_input {
  position: relative;
}

.form_msg {
  font-size: var(--fs-body-sm);
  color: var(--label-assistive);
  line-height: normal;
}

/*
  폼 flex style
  - form_row: 그리드
  - form_flex: 단순 input+button 등 조합
*/
.form_row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2) 0;
  margin: 0 -0.6rem;
}
.form_row > * {
  padding: 0 0.6rem;
}

.form_flex {
  display: flex;
  align-items: center;
}
.form_flex .form_input {
  flex: 1;
}
.form_flex .form_btn {
  flex-shrink: 0;
  width: auto;
  min-width: 8rem;
  height: 4.8rem;
  padding: 0 var(--space-3);
  margin-left: var(--gap-2);
  font-size: var(--fs-body-md);
}

/*
  form control style
*/
.control_group {}
.control_group > .form_checkbox, .control_group > .form_radio {
  padding: var(--space-4) 0;
}

/* input 컨트롤 커스텀 */
.form_checkbox, .form_radio {
  display: flex;
  align-items: center;
}
.form_checkbox input[type="checkbox"] {
  position: relative;
  width: 2rem;
  height: 2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-1);
}
.form_checkbox input[type="checkbox"]:checked {
  border-color: var(--primary);
  background-color: var(--primary);
}
.form_checkbox input[type="checkbox"]::before {
  content: "";
  background: url(../svg/checkbox-icon.svg) no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  filter: var(--filter-white);
}
.form_checkbox input[type="checkbox"]:disabled {background-color: var(--bg-subtle-gray);}
.form_checkbox input[type="checkbox"]:disabled::before {display: none;}
.form_checkbox input[type="checkbox"]:checked:disabled {background-color: var(--label-disabled); border-color: var(--border-normal);}
.form_checkbox input[type="checkbox"]:checked:disabled::before {display: block;}

.form_radio input[type="radio"] {
  position: relative;
  width: 2rem;
  height: 2rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--border-normal);
  border-radius: 999px;
}
.form_radio input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #fff;
}
.form_radio input[type="radio"]:checked {
  border-color: var(--primary);
}
.form_radio input[type="radio"]:checked::before {background-color: var(--primary);}
.form_radio input[type="radio"]:disabled {background-color: var(--bg-subtle-gray);}
.form_radio input[type="radio"]:disabled::before {display: none;}
.form_radio input[type="radio"]:checked:disabled {border-color: var(--border-normal);}
.form_radio input[type="radio"]:checked:disabled::before {display: block; background-color: var(--border-normal);}

.form_checkbox label, .form_radio label {
  font-size: var(--fs-body-md);
  color: var(--label-normal);
  margin-left: var(--gap-2);
  line-height: 150%;
  word-break: keep-all;
}
.form_checkbox input[type="checkbox"]:disabled + label,
.form_radio input[type="radio"]:disabled + label {
  color: var(--label-assistive);
}

.form_checkbox .chk_group {
  display: flex;
  flex: 1;
}
.form_checkbox .btn_arrow {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}
.form_checkbox .btn_arrow i {
  filter: invert(36%) sepia(6%) saturate(338%) hue-rotate(175deg)
    brightness(95%) contrast(89%);
}

/*
  form select style
*/
.select_group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
}
.select_group.v2 > * {width: calc(50% - (var(--gap-3)/2));}

/* radio 커스텀 */
.select_btn {
  position: relative;
}
.select_btn input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
.select_btn label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: var(--space-6);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-md);
  font-weight: var(--u-fw-medium);
  color: var(--label-assistive);
  line-height: 150%;
}
.select_btn input[type="radio"]:checked + label {
  border-color: var(--border-dark);
  color: var(--label-normal);
}
.select_btn input[type="radio"]:checked + label i {
  filter: var(--filter-dark);
}

.select_btn.ico label {
  padding-left: var(--space-13);
}
.select_btn.ico label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--space-6);
  transform: translateY(-50%);
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background: url(../svg/check-circle-fill.svg) no-repeat center/100%;
  filter: var(--filter-disabled);
}
.select_btn.ico input[type="radio"]:checked + label::before {
  filter: var(--filter-normal);
}

.select_btn input[type="radio"]:disabled + label {
  background-color: var(--bg-subtle-gray);
  color: var(--label-disabled);
}
.select_btn input[type="radio"]:checked:disabled + label {
  color: var(--label-assistive);
  border-color: var(--label-assistive);
}
.select_btn.ico input[type="radio"]:checked:disabled + label::before {
  filter: var(--filter-assistive);
}

/* input file 커스텀 */
.form_file {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap-2);
}
.form_file input[type=file] {
  display: none;
}
.form_file_inp {
    width: 100%;
    height: 4.8rem;
    line-height: 4.8rem;
    padding: 0 var(--space-6);
    border: 1px solid var(--border-normal);
    border-radius: var(--radius-2);
    font-size: var(--fs-body-md);
    background-color: var(--bg-subtle-gray);
    color: var(--label-assistive);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form_file_btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: fit-content;
  padding: 0 var(--space-7);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-md);
  color: #fff;
  background-color: var(--u-gray-700);
}
    

/* 이미지 업로드, 미리보기 */
#billAdd .img_list li {
  max-width: 320px;
  margin: 0 auto;
}
#ticketAImgList li {
  max-width: 420px;
  margin: 0 auto;
}

.img_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0;
  margin: 0 -0.4rem;
}
.img_list li {
  padding: 0 0.4rem;
}

.img_item {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-2);
  text-align: center;
  overflow: hidden;
}
.img_item input[type="file"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}
.img_item label {
}
.img_item .img_add {
  cursor: pointer;
}
.img_item .img_add::before {
  content: "";
  background: url(../../assets/svg/plus.svg) no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 15%;
  height: 15%;
  min-width: 4rem;
  min-height: 4rem;
  filter: var(--filter-disabled);
}
.img_item img {
  position: absolute;
  width: auto;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.img_item .img_item_remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10rem;
  background-color: var(--u-alpha-gray-40);
}
.img_item .img_item_remove::before {
  content: "";
  background: url(../../assets/svg/x-bold.svg) no-repeat center/100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  filter: var(--filter-white);
}

.img_item.full {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: unset;
  border: unset;
  border-radius: unset;
  text-align: center;
  overflow: unset;
}
.img_item.full img {
  position: unset;
  width: 100%;
  height: auto;
  transform: unset;
}

/* 폼 안내문구 */
.form_notice {
  width: 100%;
  padding: var(--space-7);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-sm);
  background-color: var(--bg-subtle-gray);
  color: var(--label-netural);
}
.form_notice ul.list {--list-font-size: var(--fs-body-sm);}
.form_notice .list_dash li::before,
.form_notice .list_dot li::before {
  background-color: var(--label-alternative);
}

/* form etc */
.form_input .timer {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--primary);
}


/*-------------------------------------------
  -- board
-------------------------------------------*/
.board {}

.board_head {margin-bottom: var(--gap-5);}
.board_head .title {
  font-size: var(--fs-body-lg);
  font-weight: var(--u-fw-bold);
  color: var(--label-strong);
}

.board_content {
  font-size: var(--fs-body-md);
  color: var(--label-normal);
  overflow-x: auto;
}
.board_content img {
  max-width: 100%;
  margin: 0 auto;
}


/*-------------------------------------------
  -- badge
-------------------------------------------*/
.badge {
  display: inline-block;
  height: fit-content;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  font-weight: var(--u-fw-regular);
  text-align: center;
  line-height: 150%;

  padding: 0 var(--space-2);
  font-size: var(--fs-body-xs);
  background-color: var(--bg-subtle-gray);
  color: var(--label-alternative);
}

.badge_lg {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-body-md);
}
.badge_s {
  padding: 0 var(--space-2);
  font-size: var(--fs-body-xs);
}

.badge_primary {border-color: var(--primary); background-color: var(--primary); color: #fff;}
.badge_danger {border-color: var(--danger); background-color: var(--danger); color: #fff;}
.badge_warning {border-color: var(--warning); background-color: var(--warning); color: #fff;}
.badge_success {border-color: var(--success); background-color: var(--success); color: #fff;}
.badge_info {border-color: var(--info); background-color: var(--info); color: #fff;}
.badge_gray {border-color: var(--label-alternative); background-color: var(--label-alternative); color: #fff;}
.badge_light-primary {border-color: var(--bg-subtle-primary); background-color: var(--bg-subtle-primary); color: var(--primary);}
.badge_light-danger {border-color: var(--bg-subtle-danger); background-color: var(--bg-subtle-danger); color: var(--danger);}
.badge_light-warning {border-color: var(--bg-subtle-warning); background-color: var(--bg-subtle-warning); color: var(--warning);}
.badge_light-success {border-color: var(--bg-subtle-success); background-color: var(--bg-subtle-success); color: var(--success);}
.badge_light-info {border-color: var(--bg-subtle-info); background-color: var(--bg-subtle-info); color: var(--info);}
.badge_light-gray {border-color: var(--bg-subtle-gray); background-color: var(--bg-subtle-gray); color: var(--label-alternative);}
.badge_line-primary {border-color: var(--primary); background-color: transparent; color: var(--primary);}
.badge_line-danger {border-color: var(--danger); background-color: transparent; color: var(--danger);}
.badge_line-warning {border-color: var(--warning); background-color: transparent; color: var(--warning);}
.badge_line-success {border-color: var(--success); background-color: transparent; color: var(--success);}
.badge_line-info {border-color: var(--info); background-color: transparent; color: var(--info);}
.badge_line-gray {border-color: var(--gray); background-color: transparent; color: var(--label-alternative);}


/*-------------------------------------------
  -- list
-------------------------------------------*/
/* 기본 리스트 */
.list {
  --list-font-color: var(--label-normal);
  --list-font-size: var(--fs-body-md);
}
.list li {
  position: relative;
  font-size: var(--list-font-size);
  line-height: 150%;
}
.list li + li {margin-top: var(--gap-2);}
.list li.ref {
  margin-top: var(--space-2);
  padding-left: var(--space-6);
}

/* size */
.list_s {--list-font-size: var(--fs-body-sm);}
.list_s li + li {margin-top: var(--gap-2);}

/* list style */
.list_dash li {padding-left: calc(var(--list-font-size) * .8);}
.list_dash li::before {
  content: "";
  position: absolute;
  top: calc(var(--list-font-size) / 1.5);
  left: 0;
  display: block;
  width: calc(var(--list-font-size) / 3);
  min-width: 3px;
  height: 1px;
  background-color: var(--list-font-color);
}
.list_dash li.ref:before {display: none;}

.list_dot li {padding-left: calc(var(--list-font-size) * .8);}
.list_dot li::before {
  content: "";
  position: absolute;
  top: calc(var(--list-font-size) / 1.75);
  left: 0;
  display: block;
  width: calc(var(--list-font-size) / 5);
  min-width: 2px;
  height: calc(var(--list-font-size) / 5);
  min-height: 2px;
  border-radius: 999px;
  background-color: var(--list-font-color);
}
.list_dot li.ref:before {display: none;}

.list_counter {counter-reset: list;}
.list_counter > li {
  counter-increment: list;
  padding-left: calc(var(--list-font-size) * 1.25);
}
.list_counter > li::before {
  content: counter(list) ".";
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  font-size: var(--list-font-size);
  color: var(--list-font-color);
}
.list_counter > li.ref:before {display: none;}

.list_ico li {
  display: flex;
  align-items: self-start;
  gap: var(--gap-2);
}

/* list depth */
.list li .list, .list li .list li .list {margin-top: var(--space-6);}
.list li .list li .list li {--list-font-size: var(--fs-body-sm);}
.list li .list li .list li + li {margin-top: var(--gap-2);}


/*-------------------------------------------
  -- data list
-------------------------------------------*/
/* 
  info list
  * 단순 정보 리스트화
*/
.info_list {
  font-size: var(--fs-body-md);
  color: var(--label-normal);
}
.info_list li {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-3);
}
.info_list li + li {margin-top: var(--gap-4);}
.info_list li .title {
  color: var(--label-assistive);
  word-break: keep-all;
}

/*
  history list
  * 내역 리스트화
*/
.history_list {}
.history_list > li {
  display: flex;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--border-normal);
}
.history_list .title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  font-size: var(--fs-body-lg);
  font-weight: var(--u-fw-bold);
  color: var(--label-normal);
}
.history_list .text {
  font-size: var(--fs-body-md);
  font-weight: var(--u-fw-regular);
  color: var(--label-netural);
}
.history_list ul.text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gap-2);
}
.history_list ul.text li {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
}
.history_list ul.text li span {font-weight: var(--u-fw-bold);}

/* type1 */
.history_list.type1 > li {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-2);
}
.history_list.type1 .title span {
  font-size: var(--fs-body-sm);
  font-weight: var(--u-fw-regular);
  color: var(--label-assistive);
}

/* type2 */
.history_list.type2 > li {
  flex-direction: column;
  gap: var(--gap-4);
}
.history_list.type2 .info_top {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-size: var(--fs-body-xs);
  color: var(--label-assistive);
}
.history_list.type2 .info_body {
  display: inline-flex;
  flex-direction: row;
  gap: var(--gap-3);
}


/*-------------------------------------------
  -- box
-------------------------------------------*/
.box {border-radius: var(--radius-2);}

/* type */
.box_type1 {
  background-color: var(--bg-subtle-gray);
  padding: var(--space-8);
}
.box_type2 {
  border: 1px solid var(--border-light);
  padding: var(--space-8);
}

/* group */
.box_group_area {}
.box_group_area li + li {margin-top: var(--gap-3);}
.box_group_area .box_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-2);
  width: 100%;
  padding: var(--space-8);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-2);
  font-size: var(--fs-body-md);
  color: var(--label-normal);
  line-height: 150%;
}
.box_group_area .box_item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--space-8);
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  background: center/cover url(../../assets/svg/caret-right-bold.svg) no-repeat;
  filter: var(--filter-assistive);
}

/*-------------------------------------------
  -- tab
-------------------------------------------*/
.u_tab {
  position: relative;
  overflow: hidden;
}
.tab_content {
  padding-top: var(--space-8);
}
.u_tab .tab_list {display: flex;}
.u_tab .swiper-slide {width: auto;}
.u_tab .tab_item {
  display: inline-block;
  color: var(--label-assistive);
  text-align: center;
  line-height: 150%;
}

/* 
  tab type
  - tab_type1: 하단 선
  - tab_type2: 검은바탕 + oval
  - tab_type3: 하단 선 + li width 100
*/
.u_tab_type1 {}
.u_tab_type1 .tab_list {gap: var(--gap-2);}
.u_tab_type1 .tab_list li .tab_item {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-md);
}
.u_tab_type1 .tab_list li .tab_item:hover {color: var(--label-alternative);}
.u_tab_type1 .tab_list li .tab_item.on {
  color: var(--label-normal);
  border-bottom: 2px solid var(--border-dark);
  font-weight: var(--u-fw-medium);
}

.u_tab_type2 {}
.u_tab_type2 .tab_list {display: flex;}
.u_tab_type2 .tab_list li {flex: 1 1 auto;}
.u_tab_type2 .tab_list li .tab_item {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-md);
}
.u_tab_type2 .tab_list li .tab_item:hover {color: var(--label-alternative);}
.u_tab_type2 .tab_list li .tab_item.on {
  color: var(--label-normal);
  border-bottom: 2px solid var(--border-dark);
  font-weight: var(--u-fw-medium);
}

.u_tab_type3 {}
.u_tab_type3 .tab_list {gap: var(--gap-2);}
.u_tab_type3 .tab_list li .tab_item {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-1);
  font-size: var(--fs-body-md);
}
.u_tab_type3 .tab_list li .tab_item:hover {
  color: var(--label-alternative);
  background-color: var(--bg-subtle-gray);
}
.u_tab_type3 .tab_list li .tab_item.on {
  color: #fff;
  background-color: var(--u-gray-700);
}

.u_tab_type4 {}
.u_tab_type4 .tab_list {gap: var(--gap-2);}
.u_tab_type4 .tab_list li .tab_item {
  padding: var(--space-2) var(--space-6);
  border-radius: 999px;
  font-size: var(--fs-body-md);
}
.u_tab_type4 .tab_list li .tab_item:hover {
  color: var(--label-alternative);
  background-color: var(--bg-subtle-gray);
}
.u_tab_type4 .tab_list li .tab_item.on {
  color: #fff;
  background-color: var(--u-gray-700);
}


/*-------------------------------------------
  -- accordion
-------------------------------------------*/
/* default */
.acc_wrap {}

.acc_title {
  margin-top: var(--gap-5);
  padding-bottom: var(--gap-2);
  font-size: var(--fs-body-sm);
  color: var(--label-alternative);
  line-height: normal;
}
.acc_group {
  font-size: var(--fs-body-sm);
  color: var(--label-normal);
}

.acc_group .acc_item {}

.acc_group .acc_header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--space-6) 0;
  cursor: pointer;
  line-height: 150%;
}
.acc_group .acc_header::after {
  content: '';
  position: relative;
  width: 1.4rem;
  min-width: 1.4rem;
  height: 1.4rem;
  background: center/cover url(../../assets/svg/caret-down-bold.svg) no-repeat;
  filter: var(--filter-alternative);
}

.acc_group .acc_header.on {
  font-weight: var(--u-fw-bold);
}
.acc_group .acc_header.on::after {
  background: center/cover url(../../assets/svg/caret-up-bold.svg) no-repeat;
}

.acc_group .acc_content {
  padding: var(--space-7);
  border-radius: var(--radius-1);
  background-color: var(--bg-subtle-gray);
  line-height: 1.75;
}

/* large */
.acc_group.acc_lg {
  font-size: var(--fs-body-md);
}
.acc_group.acc_lg .acc_header {
  padding: var(--space-8) 0;
}
.acc_group.acc_lg .acc_content {
  padding: var(--space-8);
  border-radius: var(--radius-2);
}

/* type */
.acc_wrap.type_line .acc_group .acc_item {border-bottom: 1px solid var(--border-normal);}
.acc_wrap.type_line .acc_group .acc_content {border-radius: 0;}

.acc_wrap.type_qna .acc_group .acc_item {border-bottom: 1px solid var(--border-normal);}
.acc_wrap.type_qna .acc_group .acc_header {
  position: relative;
  padding-left: var(--space-8);
}
.acc_wrap.type_qna .acc_group .acc_header::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: var(--fs-body-sm);
  font-weight: var(--u-fw-bold);
  color: var(--label-assistive);
}
.acc_wrap.type_qna .acc_group .acc_content {border-radius: 0;}


/*-------------------------------------------
  -- button
-------------------------------------------*/
.btn_wrap {
  position: relative;
  width: 100%;
  margin-top: var(--space-10);
}
.btn_wrap2 {margin-top: var(--space-8);}

.btn_group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-4);
  width: 100%;
}
.btn_group > * {width: 100%;}
.btn_group.row {margin: 0;}
.btn_group.row > * {
  width: calc(50% - var(--gap-2));
  padding: 0;
  margin: 0;
}

/* btn group */
.modal_btn_group {gap: 1rem;}
.modal_btn_group>* {margin: 0;}

/* default button */
.u_btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-1);
  border-radius: var(--radius-2);
  vertical-align: middle;
  text-align: center;
  line-height: 150%;

  background-color: var(--bg-subtle-gray);
  color: var(--label-normal);
}
.u_btn_text {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--space-1);
  border-radius: var(--radius-1);
  vertical-align: middle;
  text-align: center;
  line-height: 150%;

  color: var(--label-normal);
}

/* button size */
.u_btn_lg {
  height: 5.6rem;
  padding: 0 var(--space-7);
  font-size: var(--fs-body-lg);
  font-weight: var(--u-fw-medium);
}
.u_btn_md {
  height: 4.8rem;
  padding: 0 var(--space-7);
  font-size: var(--fs-body-md);
  font-weight: var(--u-fw-medium);
}
.u_btn_s {
  height: 4rem;
  padding: 0 var(--space-6);
  font-size: var(--fs-body-sm);
  font-weight: var(--u-fw-medium);
}
.u_btn_xs {
  gap: 0;
  height: 2.4rem;
  padding: 0 var(--space-4);
  border-radius: 999px;
  font-size: var(--fs-body-sm);
}
.u_btn_d {
  height: 3.2rem;
  padding: 0 var(--space-5);
  border-radius: var(--radius-1);
  font-size: var(--fs-body-sm);
  font-weight: var(--u-fw-medium);
}

.u_btn_text.u_btn_lg,
.u_btn_text.u_btn_md,
.u_btn_text.u_btn_s,
.u_btn_text.u_btn_d {height: fit-content; padding: var(--space-1);}

.u_btn_lg > i,
.u_btn_md > i {width: 1.6rem; height: 1.6rem;}
.u_btn_s > i,
.u_btn_xs > i,
.u_btn_d > i {width: 1.4rem; height: 1.4rem;}

/* button color */
.u_btn_primary {border-color: var(--primary); background-color: var(--primary); color: #fff;}
.u_btn_primary:hover {background-color: var(--primary-hover); color: #fff;}
.u_btn_primary > i {filter: var(--filter-white);}

.u_btn_lp {border-color: var(--bg-subtle-primary); background-color: var(--bg-subtle-primary); color: var(--primary);}
.u_btn_lp:hover {background-color: var(--u-alpha-primary-16); color: var(--primary);}
.u_btn_lp > i {filter: var(--filter-primary);}

.u_btn_dark {border-color: var(--u-gray-700); background-color: var(--u-gray-700); color: #fff;}
.u_btn_dark:hover {background-color: var(--u-gray-800); color: #fff;}
.u_btn_dark > i {filter: var(--filter-white);}

.u_btn_light {border-color: var(--bg-subtle-gray); background-color: var(--bg-subtle-gray); color: var(--label-normal);}
.u_btn_light:hover {background-color: var(--u-alpha-gray-15); color: var(--label-normal);}
.u_btn_light > i {filter: var(--filter-normal);}

.u_btn_gray {border-color: var(--u-gray-500); background-color: var(--u-gray-500); color: #fff;}
.u_btn_gray:hover {background-color: var(--u-gray-600); color: #fff;}
.u_btn_gray > i {filter: var(--filter-white);}

.u_btn_line-primary {border: 1px solid var(--primary); background-color: #fff; color: var(--primary);}
.u_btn_line-primary:hover {background-color: var(--bg-subtle-primary); color: var(--primary);}
.u_btn_line-primary > i {filter: var(--filter-primary);}

.u_btn_line-dark {border: 1px solid var(--border-dark); background-color: #fff; color: var(--label-normal);}
.u_btn_line-dark:hover {background-color: var(--bg-subtler-gray); color: var(--label-normal);}
.u_btn_line-dark > i {filter: var(--filter-normal);}

.u_btn_line-gray {border: 1px solid var(--border-normal); background-color: #fff; color: var(--label-normal);}
.u_btn_line-gray:hover {background-color: var(--bg-subtler-gray); color: var(--label-normal);}
.u_btn_line-gray > i {filter: var(--filter-normal);}

.u_btn_text.u_btn_primary {border: unset; background-color: transparent; color: var(--primary);}
.u_btn_text.u_btn_primary:hover {background-color: var(--bg-subtle-primary); color: var(--primary);}
.u_btn_text.u_btn_primary > i {filter: var(--filter-primary);}
.u_btn_text.u_btn_dark {border: unset; background-color: transparent; color: var(--label-normal);}
.u_btn_text.u_btn_dark:hover {background-color: var(--bg-subtle-gray); color: var(--label-normal);}
.u_btn_text.u_btn_light > i {filter: var(--filter-assistive);}
.u_btn_text.u_btn_light {border: unset; background-color: transparent; color: var(--label-assistive);}
.u_btn_text.u_btn_light:hover {background-color: var(--bg-subtle-gray); color: var(--label-assistive);}
.u_btn_text.u_btn_light > i {filter: var(--filter-assistive);}

/* disabled */
.u_btn:disabled, .u_btn_text:disabled {color: var(--label-disabled);}
.u_btn:disabled > i, .u_btn_text:disabled > i {filter: var(--filter-disabled);}
.u_btn:disabled:hover {background-color: inherit; color: var(--label-disabled);}
.u_btn_text:disabled:hover {background-color: transparent; color: var(--label-disabled);}

.u_btn.u_btn_primary:disabled, .u_btn.u_btn_lp:disabled, .u_btn.u_btn_dark:disabled,
.u_btn.u_btn_light:disabled, .u_btn.u_btn_gray:disabled {background-color: var(--bg-subtle-gray);}
.u_btn.u_btn_line-primary:disabled, .u_btn.u_btn_line-dark:disabled, .u_btn.u_btn_line-gray:disabled {border-color: var(--border-light);}

/* etc */
.btn_link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  color: var(--label-normal);
  background-color: transparent;
  line-height: 150%;
}
.btn_link > i {filter: var(--filter-normal);}

.btn_link.primary {color: var(--primary);}
.btn_link.primary > i {filter: var(--filter-primary);}

.btn_link.btn_link_lg {font-size: var(--fs-body-lg);}
.btn_link.btn_link_lg > i {width: 2rem; height: 2rem;}
.btn_link.btn_link_md {font-size: var(--fs-body-md);}
.btn_link.btn_link_md > i {width: 1.6rem; height: 1.6rem;}
.btn_link.btn_link_s {font-size: var(--fs-body-sm);}
.btn_link.btn_link_s > i {width: 1.4rem; height: 1.4rem;}

.btn_link.type2 {text-decoration: underline;}

.form_password .btn_view {
  position: absolute;
  top: 12px;
  right: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
}
.form_password .btn_view::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url(../svg/eye.svg) center/100% no-repeat;
  filter: var(--filter-disabled);
}
.form_password .btn_view.on::before {
  background: url(../svg/eye-slash.svg) center/100% no-repeat;
}


/*-------------------------------------------
  -- divider
-------------------------------------------*/
.divider {
  width: 100%;
  height: var(--gap-3);
  background-color: var(--bg-subtler-gray);
}


/*-------------------------------------------
  -- text
-------------------------------------------*/
.u_text {}

/* size */
.u_fs-lg {font-size: var(--fs-body-lg);}
.u_fs-md {font-size: var(--fs-body-md);}
.u_fs-s {font-size: var(--fs-body-sm);}
.u_fs-xs {font-size: var(--fs-body-xs);}

/* color */
.u_fc-primary {color: var(--primary);}
.u_fc-normal {color: var(--label-normal);}
.u_fc-netural {color: var(--label-netural);}
.u_fc-alternative {color: var(--label-alternative);}
.u_fc-assistive {color: var(--label-assistive);}
.u_fc-dark {color: var(--label-strong);}
.u_fc-danger {color: var(--danger);}

/* weight */
.u_fw-bold {font-weight: var(--u-fw-bold);}
.u_fw-md {font-weight: var(--u-fw-medium);}


/*-------------------------------------------
  -- space
-------------------------------------------*/
.mb_1 {margin-bottom: var(--gap-1);}
.mb_2 {margin-bottom: var(--gap-2);}
.mb_3 {margin-bottom: var(--gap-3);}
.mb_4 {margin-bottom: var(--gap-4);}
.mb_5 {margin-bottom: var(--gap-5);}
.mb_6 {margin-bottom: var(--gap-6);}


/*-------------------------------------------
  -- icons

  *small: 1
  *bold: 2
  *solid: 3 
-------------------------------------------*/
i {
  display: inline-block;
  vertical-align: middle;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ico-xl {width: 3.2rem; height: 3.2rem;}
.ico-lg {width: 2.8rem; height: 2.8rem;}
.ico-md {width: 2.4rem; height: 2.4rem;}
.ico-sm {width: 2rem; height: 2rem;}
.ico-xs {width: 1.6rem; height: 1.6rem;}
.ico-xxs {width: 1.4rem; height: 1.4rem;}

/* ico */
.ico_calendar {background-image: url(../svg/calndar.svg);}
.ico_camera-3 {background-image: url(../svg/camera.svg);}
.ico_caret-down-2 {background-image: url(../svg/caret-down-bold.svg);}
.ico_caret-down-3 {background-image: url(../svg/caret-down-fill.svg);}
.ico_caret-left-1 {background-image: url(../svg/caret-left-mini.svg);}
.ico_caret-left-2 {background-image: url(../svg/caret-left-bold.svg);}
.ico_caret-right-1 {background-image: url(../svg/caret-right-mini.svg);}
.ico_caret-right-2 {background-image: url(../svg/caret-right-bold.svg);}
.ico_caret-up-2 {background-image: url(../svg/caret-up-bold.svg);}
.ico_check {background-image: url(../svg/check.svg);}
.ico_check-2 {background-image: url(../svg/check-bold.svg);}
.ico_check-3 {background-image: url(../svg/check-lg.svg);}
.ico_check-circle-3 {background-image: url(../svg/check-circle-fill.svg);}
.ico_circle-dollar {background-image: url(../svg/currency-circle-dollar.svg);}
.ico_circle-one {background-image: url(../svg/number-circle-one.svg);}
.ico_circle-two {background-image: url(../svg/number-circle-two.svg);}
.ico_edit {background-image: url(../svg/edit.svg);}
.ico_exclamation-3 {background-image: url(../svg/exclamation-circle-fill.svg);}
.ico_exclamation-triangle-3 {background-image: url(../svg/exclamation-triangle.svg);}
.ico_house {background-image: url(../svg/house.svg);}
.ico_list {background-image: url(../svg/list.svg);}
.ico_search {background-image: url(../svg/magnifying-glass.svg);}
.ico_search-2 {background-image: url(../svg/magnifying-glass-bold.svg);}
.ico_null {background-image: url(../svg/null.svg);}
.ico_plus {background-image: url(../svg/plus.svg);}
.ico_qr {background-image: url(../svg/qr.svg);}
.ico_logout {background-image: url(../svg/sign-out.svg);}
.ico_logout-2 {background-image: url(../svg/sign-out-bold.svg);}
.ico_star-3 {background-image: url(../svg/star-fill.svg);}
.ico_user {background-image: url(../svg/user.svg);}
.ico_warning-3 {background-image: url(../svg/warning-circle-fill.svg);}
.ico_x {background-image: url(../svg/x.svg);}
.ico_x-2 {background-image: url(../svg/x-bold.svg);}

/* sepcial icon */
.ico_step_w {background-image: url(../../assets/svg/exclamation-circle-fill.svg);}
.ico_step_c {background-image: url(../../assets/svg/check-lg.svg);}
.ico_kakao-ch {background-image: url(../../assets/svg/kakao-ch.svg);}
.ico_facebook {background-image: url(../../assets/svg/facebook.svg);}



/***********************************************************************************************************************
  D. Media quiery
***********************************************************************************************************************/
@media screen and (min-width: 768px) {
  /*** B. Layout ***/
  .container {min-height: calc(100vh - 25rem);}
  .content {
    /* padding: 6rem 0 9rem 0; */
  }

  /* -- allmenu */
  .allmenu_nav .user_wrap {padding: 0 var(--space-8);}

  /* -- appbar */
  .appbar {display: none;}


  /*** D. Components ***/
  /* -- modal */
  .modal-dialog {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .modal-content {
    max-width: 480px;
    max-height: calc(100% - var(--space-14));
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100% - var(--space-14));
  }

  .modal-full .modal-content {
    border-radius: var(--radius-4);
  }

  /*** ETC ***/
  .mob-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}

/* input 라디오 커스텀 */
.form_radio_type2 {
  position: relative;
} /* 선택 버튼 */
.form_radio_type2 input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
.form_radio_type2 label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  border: 1px solid var(--u-gray-300);
  border-radius: 1rem;
  font-size: 1.4rem;
  color: var(--u-gray-600);
}
.form_radio_type2 label i {
  position: absolute;
  left: 1.6rem;
  filter: var(--u-filter-light); /* #bdbfc1 */
}
.form_radio_type2 input[type="radio"]:checked + label {
  border-color: var(--u-dark);
  color: var(--u-dark);
  font-weight: 600;
}
.form_radio_type2 input[type="radio"]:checked + label i {
  filter: var(--u-filter-dark);
}

/*-------------------------------------------
  -- loading
-------------------------------------------*/
.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
}
.loading .loading_inner {
  display: flex;
  width: auto;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.loading .loading_spinner {
  width: 8rem;
  height: 8rem;
  border: 5px solid var(--primary);
  border-right-color: transparent;
  border-radius: 75%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}