/*!*****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/scss/site.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap);
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/svg/logo/MvStartLogo.vue?vue&type=style&index=0&id=5013d1db&lang=scss&scoped=true ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.mv-start-logo[data-v-5013d1db] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/svg/logo/MvLogo.vue?vue&type=style&index=0&id=51bca46d&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.mv-logo[data-v-51bca46d] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/layout/CommonFooter.vue?vue&type=style&index=0&id=abdf622a&scoped=true&lang=scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.common-footer[data-v-abdf622a] {
  color: #4B465C;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  background: var(--bg-home-color);
  white-space: pre-line;
  padding: 100px 20px 110px 20px;
}
.common-footer strong[data-v-abdf622a] {
  font-weight: 600;
}
.common-footer .terms-row[data-v-abdf622a] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.common-footer .divider[data-v-abdf622a] {
  width: 1px;
  height: 16px;
  background: #333333;
}
.common-footer .terms-sheet[data-v-abdf622a] {
  padding: 0 20px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/pages/discover/comp/EventSortFilterComp.vue?vue&type=style&index=0&id=11f555fa&lang=scss&scoped=true ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.filter-text-button[data-v-11f555fa] {
  display: flex;
  align-content: center;
  gap: 4px;
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/pages/popup/comp/UserInviteComp.vue?vue&type=style&index=0&id=64f96396&lang=scss&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.img-box[data-v-64f96396] {
  height: 160px;
  text-align: center;
}
.img-box img[data-v-64f96396] {
  width: 152px;
  height: 100%;
}
.text-box[data-v-64f96396] {
  padding: 24px 16px !important;
  border-radius: 10px !important;
  color: var(--typo-body, #6f6b7d);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.text-box .email[data-v-64f96396] {
  display: contents;
  color: var(--typo-heading, #5d596c);
  font-weight: 600;
}
/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-14.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-14.use[2]!./node_modules/vue3-lottie/dist/style.css ***!
  \***************************************************************************************************************************************************************************************/
.lottie-animation-container{width:var(--lottie-animation-container-width);height:var(--lottie-animation-container-height);background-color:var(--lottie-animation-container-background-color);overflow:hidden;margin:0 auto}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/pages/popup/comp/SaleCpltComp.vue?vue&type=style&index=0&id=7634959d&lang=scss&scoped=true ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.result-text[data-v-7634959d] {
  color: var(--typo-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.name-text[data-v-7634959d] {
  color: var(--typo-black);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/scss/site.scss (1) ***!
  \*********************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.mb-4 {
  margin-bottom: 4px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-17 {
  margin-bottom: 17px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mb-100 {
  margin-bottom: 100px;
}

.ml-20 {
  margin-left: 20px;
}

.hidden {
  visibility: hidden;
}

.expand-col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.pointer-event-none {
  pointer-events: none;
}

.cursor-pointer {
  cursor: pointer;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url(/fonts/Pretendard-ExtraBold.dd3e76c5.woff2) format("woff2"), url(/fonts/Pretendard-ExtraBold.bf3b77f7.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url(/fonts/Pretendard-SemiBold.cfa29e4f.woff2) format("woff2"), url(/fonts/Pretendard-SemiBold.a963592c.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url(/fonts/Pretendard-Medium.12f0acdc.woff2) format("woff2"), url(/fonts/Pretendard-Medium.55b46aea.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url(/fonts/Pretendard-Regular.119cf01b.woff2) format("woff2"), url(/fonts/Pretendard-Regular.78df9e04.woff) format("woff");
}
body {
  scroll-behavior: smooth;
}

html,
body,
div,
h1,
h2,
h3,
h4,
h5,
p,
ul,
li,
ol,
img,
iframe,
canvas,
video,
svg,
b,
i,
strong,
span,
form,
input,
label,
button,
select,
textarea,
pre {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: inherit;
  text-decoration: inherit;
  list-style: none;
  cursor: inherit;
  -webkit-appearance: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
div::-webkit-scrollbar,
h1::-webkit-scrollbar,
h2::-webkit-scrollbar,
h3::-webkit-scrollbar,
h4::-webkit-scrollbar,
h5::-webkit-scrollbar,
p::-webkit-scrollbar,
ul::-webkit-scrollbar,
li::-webkit-scrollbar,
ol::-webkit-scrollbar,
img::-webkit-scrollbar,
iframe::-webkit-scrollbar,
canvas::-webkit-scrollbar,
video::-webkit-scrollbar,
svg::-webkit-scrollbar,
b::-webkit-scrollbar,
i::-webkit-scrollbar,
strong::-webkit-scrollbar,
span::-webkit-scrollbar,
form::-webkit-scrollbar,
input::-webkit-scrollbar,
label::-webkit-scrollbar,
button::-webkit-scrollbar,
select::-webkit-scrollbar,
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar {
  width: 12px;
  height: 5px;
}
@media (width <= 568px) {
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  div::-webkit-scrollbar,
  h1::-webkit-scrollbar,
  h2::-webkit-scrollbar,
  h3::-webkit-scrollbar,
  h4::-webkit-scrollbar,
  h5::-webkit-scrollbar,
  p::-webkit-scrollbar,
  ul::-webkit-scrollbar,
  li::-webkit-scrollbar,
  ol::-webkit-scrollbar,
  img::-webkit-scrollbar,
  iframe::-webkit-scrollbar,
  canvas::-webkit-scrollbar,
  video::-webkit-scrollbar,
  svg::-webkit-scrollbar,
  b::-webkit-scrollbar,
  i::-webkit-scrollbar,
  strong::-webkit-scrollbar,
  span::-webkit-scrollbar,
  form::-webkit-scrollbar,
  input::-webkit-scrollbar,
  label::-webkit-scrollbar,
  button::-webkit-scrollbar,
  select::-webkit-scrollbar,
  textarea::-webkit-scrollbar,
  pre::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb,
h1::-webkit-scrollbar-thumb,
h2::-webkit-scrollbar-thumb,
h3::-webkit-scrollbar-thumb,
h4::-webkit-scrollbar-thumb,
h5::-webkit-scrollbar-thumb,
p::-webkit-scrollbar-thumb,
ul::-webkit-scrollbar-thumb,
li::-webkit-scrollbar-thumb,
ol::-webkit-scrollbar-thumb,
img::-webkit-scrollbar-thumb,
iframe::-webkit-scrollbar-thumb,
canvas::-webkit-scrollbar-thumb,
video::-webkit-scrollbar-thumb,
svg::-webkit-scrollbar-thumb,
b::-webkit-scrollbar-thumb,
i::-webkit-scrollbar-thumb,
strong::-webkit-scrollbar-thumb,
span::-webkit-scrollbar-thumb,
form::-webkit-scrollbar-thumb,
input::-webkit-scrollbar-thumb,
label::-webkit-scrollbar-thumb,
button::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
  width: 5px;
  background: #D9D9D9;
}

input,
button,
textarea,
select {
  display: block;
  width: 100%;
  background-color: transparent;
}

.mv-button {
  width: 100%;
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
  white-space: nowrap;
}
.mv-button button {
  padding: 16px 0;
}
.mv-button .rec-type button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  padding: 13px 0;
}
.mv-button .round-black-type {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--btn-color-black);
  color: var(--color-white);
}
.mv-button .round-black-type button:disabled {
  background: #D4DBE4;
  border-color: #D4DBE4;
  border-radius: 100px;
}
.mv-button .round-white-type {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--color-black);
  color: var(--color-black);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  background: var(--color-white);
}
.mv-button .round-primary-type {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--primary-color);
  color: var(--color-white);
}
.mv-button .rec-primary-type button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--primary-color);
  color: var(--color-white);
  background: var(--primary-color);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  padding: 13px 0;
}
.mv-button .rec-primary-type button:disabled {
  background: var(--typo-mute);
  border-color: var(--typo-mute);
}
.mv-button .rec-secondary-type button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--secondary-dark-2);
  color: var(--color-white);
  background: var(--secondary-dark-2);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  padding: 13px 0;
}
.mv-button .rec-secondary-type button:disabled {
  background: #D4DBE4;
  border-color: #D4DBE4;
}
.mv-button .rec-red-type button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--red-5-base);
  color: var(--gray-0);
  background: var(--red-5-base);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  padding: 13px 0;
}
.mv-button .rec-red-type button:disabled {
  color: white;
  background: #D4DBE4;
  border-color: #D4DBE4;
}
.mv-button .toner-primary button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: var(--primary-color);
  background: var(--primary-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  padding: 20px 24px;
}
.mv-button .toner-primary button:disabled {
  color: var(--typo-mute);
  background: var(--gray-2);
}
.mv-button .toner-red button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--red-1);
  color: var(--red-5-base);
  background: var(--red-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  padding: 20px 24px;
}
.mv-button.mv-button-disabled {
  pointer-events: none;
}

.kakao-button {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  padding: 13px 0;
  background: #FFEB00;
}

.google-button {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  padding: 13px 0;
  background: #EFF4FA;
}

.text-divider {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 26px;
}
.text-divider .divider-line {
  z-index: -1;
  height: 1px;
  width: 100%;
  background: #EBEEF1;
}
.text-divider .text-area {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
}
.text-divider .divider-text {
  background: var(--bg-color);
  color: #A2AFBC;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  padding: 0 19px;
}

.mv-input {
  position: relative;
}
.mv-input #phone, .mv-input .mv-input-area > input {
  border: 1px solid var(--gray-l-1);
  border-radius: 10px;
  color: var(--detail-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  padding: 13px 17px;
}
.mv-input #phone:focus, .mv-input .mv-input-area > input:focus {
  border-color: var(--primary-color);
}
.mv-input #phone:disabled, .mv-input .mv-input-area > input:disabled {
  opacity: 1;
  color: var(--gray-l-2);
  -webkit-text-fill-color: var(--gray-l-2);
  background: rgba(212, 219, 228, 0.3);
}
.mv-input #phone::-moz-placeholder, .mv-input .mv-input-area > input::-moz-placeholder {
  color: var(--gray-l-1);
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
}
.mv-input #phone::placeholder, .mv-input .mv-input-area > input::placeholder {
  color: var(--gray-l-1);
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
}
.mv-input label {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}
.mv-input .label-area {
  display: flex;
  margin-bottom: 6px;
}
.mv-input .label-area span {
  color: var(--primary-color);
}
.mv-input .has-error input {
  border-color: red !important;
}
.mv-input .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
}
.mv-input .mv-input-area {
  position: relative;
}
.mv-input .init-button {
  display: none;
  position: absolute;
  top: 18px;
  right: 20px;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #D4DBE4;
}
.mv-input .init-button img {
  width: 8px;
}
.mv-input .desc-txt {
  font-size: 12px;
  color: var(--primary-color);
  margin-top: 4px;
  margin-bottom: 8px;
}

.mv-input-focus .init-button {
  display: none;
}

.mv-checkbox {
  cursor: pointer;
}
.mv-checkbox input {
  width: 0;
  height: 0;
}
.mv-checkbox .checkbox {
  display: flex;
  align-items: center;
}
.mv-checkbox .checkbox svg circle {
  fill: var(--gray-3);
}
.mv-checkbox .primary-type .checked svg circle {
  fill: var(--primary-color);
}
.mv-checkbox .sub-type .checked svg circle {
  fill: var(--color-black);
}
.mv-checkbox .box-row {
  display: flex;
  gap: 8px;
  align-items: self-start;
}
.mv-checkbox label {
  color: var(--detail-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.mv-checkbox label span {
  color: var(--gray-l-2);
}
.mv-checkbox .has-error label span {
  color: red;
}
.mv-checkbox.mv-checkbox-disabled {
  pointer-events: none;
}
.mv-checkbox.mv-checkbox-disabled svg circle {
  fill: #B6B6B6;
}
.mv-checkbox.mv-checkbox-disabled .checked svg circle {
  fill: #B6B6B6;
}
.mv-checkbox.mv-checkbox-disabled label {
  color: #B6B6B6;
}
.mv-checkbox.mv-checkbox-disabled label span {
  color: #B6B6B6;
}

.mv-modal {
  position: fixed;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
}
.mv-modal .modal-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 568px;
  min-width: 360px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}
.mv-modal .modal-content {
  background: #FFFFFF;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.agree-modal-comp .agree-content {
  padding: 24px 22px;
}
.agree-modal-comp .mv-button {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
}
.agree-modal-comp .mv-button button {
  padding: 12px 0;
}
.agree-modal-comp .terms-text {
  overflow-y: auto;
  max-height: 50vh;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 18px;
}
.agree-modal-comp .disagree-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.agree-modal-comp .disagree-row button {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gray-3);
  border-radius: 22px;
}
.agree-modal-comp .disagree-row .row-text {
  color: black;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}

.mv-pw-input {
  padding-bottom: 50px;
}
.mv-pw-input .pw-row {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.mv-pw-input .pw-base {
  width: 24px;
  height: 24px;
  border-radius: 24px;
}
.mv-pw-input .empty-pw {
  background: var(--gray-4);
}
.mv-pw-input .inputted-pw {
  background: var(--primary-color);
}
.mv-pw-input input {
  position: relative;
  color: transparent;
  caret-color: transparent;
  width: 100%;
  height: 1px;
}
.mv-pw-input .auth-error {
  height: 15px;
  color: red;
  text-align: center;
  margin-top: 15px;
}
.mv-pw-input .input-loading {
  animation: blink 1s infinite ease-out;
}

.mv-switch {
  cursor: pointer;
}
.mv-switch .switch-back {
  position: relative;
  display: flex;
  width: 56px;
  height: 30px;
  background: #424758;
  border-radius: 100px;
  padding: 5px;
  transition: all 0.5s;
}
.mv-switch .switch-object {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  transition: all 0.5s;
}
.mv-switch .switch-text {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  color: var(--color-white);
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 11px;
  line-height: 20px;
  padding: 0 8px 0 8px;
}

.mv-switch-checked .switch-back {
  background: var(--primary-color);
}
.mv-switch-checked .switch-object {
  transform: translateX(26px);
}
.mv-switch-checked .switch-text {
  justify-content: flex-start;
}

.mv-tab .mv-tab-row {
  display: flex;
  gap: 4px;
}
.mv-tab .mv-tab-type-round.mv-tab-row {
  color: var(--typo-body);
  background: var(--tab-bg-color);
  border-radius: 100px;
  padding: 8px 16px;
}
.mv-tab .mv-tab-type-round.mv-tab-selected {
  color: var(--color-white);
  background: var(--secondary-dark-2);
}
.mv-tab .mv-tab-type-round .tab-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
}
.mv-tab .mv-tab-type-text.mv-tab-row {
  color: var(--typo-mute);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding-bottom: 10px;
}
.mv-tab .mv-tab-type-text.mv-tab-selected {
  color: var(--secondary-dark-2);
  border-bottom: 2px solid var(--secondary-dark-2);
}
.mv-tab .mv-tab-type-text .tab-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

.mv-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.mv-progress-bar .bar-pointer {
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
}
.mv-progress-bar .bar-area {
  position: relative;
  flex-grow: 1;
}
.mv-progress-bar .bar-area .back-bar {
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 8px;
  border-radius: 10px;
}
.mv-progress-bar .bar-area .upper-bar {
  position: absolute;
  bottom: 0;
  background: var(--progress-color);
  height: 8px;
  border-radius: 10px;
}
.mv-progress-bar .pointer-row {
  position: relative;
}
.mv-progress-bar .limit-row {
  display: flex;
  justify-content: space-between;
  font-family: "Pretendard";
}
.mv-progress-bar .current-pointer {
  flex-grow: 1;
  color: var(--progress-color);
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
  text-align: right;
}

.bottom-slide-sheet {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.bottom-slide-sheet .slide-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(64, 64, 64, 0.5019607843);
}
@keyframes slideup {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
.bottom-slide-sheet .slide-frame {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 568px;
  border-radius: 16px 16px 0 0;
  background: #ffffff;
  animation-name: slideup;
  box-shadow: 0px -6px 10px rgba(0, 0, 0, 0.06);
}
.bottom-slide-sheet .slide-frame .slide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--typo-body);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 20px;
}
.bottom-slide-sheet .slide-frame .slide-header .header-left {
  width: 24px;
}
.bottom-slide-sheet .slide-frame .slide-header span {
  flex: 1;
  text-align: center;
}
.bottom-slide-sheet .slide-frame .slide-header img {
  width: 24px;
  height: 24px;
}
.bottom-slide-sheet .slide-frame .slide-header .top-bar {
  width: 40px;
  height: 4px;
  border-radius: 16px;
  background: #e0e0e0;
  margin: 0 auto;
}
.bottom-slide-sheet .slide-frame .slide-content {
  overflow-y: auto;
  max-height: calc(var(--vh) * 100 - 210px);
}
.bottom-slide-sheet .slide-frame .slide-content-max {
  height: calc(var(--vh) * 100 - 80px);
}
.bottom-slide-sheet .slide-frame .slide-footer {
  width: 100%;
  background: #fdfdfd;
  border-top: 1px #e0e0e0 solid;
  margin-bottom: 5px;
}

.bottom-slide-sheet-hidden {
  display: none;
}

.pagination-nav {
  position: relative;
  height: 5px;
  background: var(--gray-4);
  border-radius: 10px;
}
.pagination-nav .bullet-active {
  position: absolute;
  left: 0;
  max-width: 20px;
  width: 100%;
  height: 5px;
  border-radius: 10px;
  background: var(--color-black);
  transform: translateX(2em);
}

.mv-slide-switch {
  width: 100%;
  height: 58px;
  background: linear-gradient(90deg, #00A8B4 32.66%, #37E2C4 91.56%);
  border-radius: 100px;
  padding: 9px 10px;
}
.mv-slide-switch .switch-back {
  position: relative;
  display: flex;
}
.mv-slide-switch .loading-back {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 20px;
  gap: 19px;
  width: 100%;
  height: 100%;
}
.mv-slide-switch .loader-area {
  margin-right: 8px;
}
.mv-slide-switch .switch-object {
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF2F2 100%);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  touch-action: pan-y;
}
.mv-slide-switch .switch-text-area {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mv-slide-switch .switch-text {
  flex-shrink: 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

.mv-passcode-input .input-area {
  display: flex;
  gap: 10px;
}
.mv-passcode-input .input-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 50px;
  border: 1px solid #00C4AC;
  border-radius: 12px;
  color: var(--title-color);
  font-family: "Pretendard";
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
}
.mv-passcode-input .input-item input {
  width: 100%;
  height: 100%;
}
.mv-passcode-input input {
  width: 100px;
  height: 0;
}

.mv-ntfc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 260px;
  border-radius: 12px;
  background: rgba(17, 17, 17, 0.94);
  text-align: center;
  padding: 8px 0;
  animation: ntfc-move 2.5s ease-in-out;
}
.mv-ntfc p {
  display: block;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
}
.mv-ntfc .error-message {
  color: var(--color-danger);
}

.simple-pwd-comp .config-title {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 40px;
  text-align: center;
}
.simple-pwd-comp .sub-row {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-decoration-line: underline;
  margin-top: 40px;
}

.mv-sticky-footer {
  margin-top: auto;
  margin-bottom: 20px;
}

.qr-scanner video {
  width: 100vw;
  max-width: 568px;
}
.qr-scanner .overlay {
  position: relative;
  outline: rgba(0, 0, 0, 0.25) solid 100vmax;
  border-radius: 20px;
}
.qr-scanner .overlay .left-top {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotateZ(90deg);
}
.qr-scanner .overlay .left-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotateZ(180deg);
}
.qr-scanner .overlay .right-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotateZ(270deg);
}
.qr-scanner .overlay .qr-text {
  position: absolute;
  bottom: -78px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  width: 253px;
  text-align: center;
  white-space: pre-line;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.black-bg-scan {
  position: absolute;
  top: 0;
  background-color: #000;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.select-filter-comp {
  padding: 16px 20px 0 20px;
  border-radius: 20px;
  width: 100%;
  margin-bottom: 200px;
}
.select-filter-comp .select-filter-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.select-filter-comp .select-filter-header .select-filter-title {
  grid-column: 2;
  justify-self: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: #4b465c;
}
.select-filter-comp .select-filter-header .select-filter-cancel {
  grid-column: 3;
  justify-self: end;
  color: #ff7474;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
}
.select-filter-comp .select-filter-contents {
  font-weight: 500;
  font-size: 16px;
  color: #4b465c;
}
.select-filter-comp .select-filter-contents .select-filter-item {
  height: 32px;
  margin-bottom: 8px;
}
.select-filter-comp .select-filter-contents .select-filter-item .select-filter-item_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-filter-comp .select-filter-contents .select-filter-item__list {
  height: 32px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-filter-comp .select-filter-contents .recent {
  margin-bottom: 24px;
}
.select-filter-comp .select-filter-contents .top {
  margin-top: 32px;
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  height: 16px;
  margin-bottom: 16px;
  color: rgba(75, 70, 92, 0.5);
}

.select-filter-back {
  background-color: rgba(26, 29, 42, 0.68);
  position: absolute;
  z-index: 1010100;
  top: -56px;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9;
}

.nft-card-info-comp {
  padding: 16px 20px 100px 20px;
  position: relative;
}
.nft-card-info-comp .nft-card-info-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.nft-card-info-comp .nft-card-info-header .header-title {
  display: flex;
  align-items: center;
}
.nft-card-info-comp .nft-card-info-header .header-title img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.nft-card-info-comp .nft-card-info-header .header-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.nft-card-info-comp .nft-card-info-item-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nft-card-info-comp .nft-card-info-item-section {
  border-radius: 10px;
  background: #FAFAFA;
  padding: 20px 16px;
}
.nft-card-info-comp .nft-card-info-item-section .nft-card-info-item .nft-card-info-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nft-card-info-comp .nft-card-info-item-section .nft-card-info-item .nft-card-info-title {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.nft-card-info-comp .nft-card-info-item-section .nft-card-info-item .info-col {
  color: var(--typo-mute);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.nft-card-info-comp .nft-card-info-item-section .nft-card-info-item .nft-card-info-content {
  color: var(--cool-gray-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
  white-space: pre-line;
  word-break: break-all;
  min-width: 0;
}
.nft-card-info-comp .nft-card-info-item-section .nft-card-info-item .nft-card-info-content .content-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.nft-card-info-comp .extra-row {
  display: flex;
  justify-content: space-between;
}
.nft-card-info-comp .extra-row .col-text {
  color: var(--typo-heading);
  font-size: 13px;
  font-weight: 400;
}
.nft-card-info-comp .extra-row .val-text {
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.mv-date-picker .display-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--secondary-5-base);
  padding: 12px;
}
.mv-date-picker .value-text {
  color: var(--typo-placeholder);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.mv-date-picker .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
}

.mv-price-input .input-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  border: 1px solid var(--secondary-5-base, #DDE4EB);
  padding: 12px;
}
.mv-price-input .input-title {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.mv-price-input .price-row {
  display: flex;
  gap: 4px;
  align-items: center;
  width: 100%;
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.mv-price-input .number-input {
  flex-grow: 1;
}
.mv-price-input .number-input input {
  width: 100%;
}
.mv-price-input .number-input input::-moz-placeholder {
  color: var(--typo-placeholder);
  font-weight: 400;
}
.mv-price-input .number-input input::placeholder {
  color: var(--typo-placeholder);
  font-weight: 400;
}
.mv-price-input .input-append {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.mv-price-input .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
}

.mv-range-slider {
  width: 100%;
}
.mv-range-slider .vue-slider {
  padding: 12px 0;
}
.mv-range-slider .vue-slider-marks {
  height: 10px;
}
.mv-range-slider .custom-tooltip {
  color: var(--primary-color);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.mv-range-slider .vue-slider-dot-tooltip-top {
  top: 0px;
}
.mv-range-slider .vue-slider-rail {
  border-radius: 1000px;
  background: var(--gray-1);
}
.mv-range-slider .vue-slider-process {
  background: var(--primary-7-active);
}
.mv-range-slider .vue-slider-dot {
  color: black;
}
.mv-range-slider .vue-slider-dot-tooltip {
  visibility: visible;
  transition: all 0.3s;
  border: none;
}
.mv-range-slider .vue-slider-dot-tooltip-inner {
  padding: 8px 16px;
  border-radius: 100px;
  background: #0d2238;
  white-space: nowrap;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.mv-range-slider .vue-slider-dot {
  height: 36px;
}
.mv-range-slider .vue-slider-dot-handle {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid var(--primary-color);
  background: #FFF;
  box-sizing: border-box;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
}
.mv-range-slider .vue-slider-mark-label {
  color: #111;
  font-size: 18px;
}
.mv-range-slider .range-div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mv-range-slider .range-div .range-text {
  color: var(--typo-mute);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.date-picker-modal {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: 568px;
  min-width: 360px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
  transform: translateX(-50%);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}
.date-picker-modal .modal-title {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.date-picker-modal .picker-row {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}
.date-picker-modal .picker-row .dp__button {
  width: 100%;
}
.date-picker-modal .picker-row .dp__cell_inner {
  width: 100%;
}
.date-picker-modal .picker-row .dp__cell_disabled.dp__range_between {
  background: transparent;
  border-color: transparent;
}
.date-picker-modal .picker-row .dp__calendar_item {
  flex: 1;
}
.date-picker-modal .picker-row button {
  width: inherit;
}
.date-picker-modal .picker-row .dp__main {
  justify-content: center;
}
.date-picker-modal .picker-row .dp__outer_menu_wrap {
  width: 100%;
}
.date-picker-modal .button-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 2px solid var(--secondary-1);
  background: var(--gray-0);
  padding: 16px 20px 32px 20px;
  margin-top: auto;
}
.date-picker-modal .select-text {
  color: var(--typo-body);
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.mv-chip {
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  border-radius: 110px;
  color: var(--primary-color);
  background: #F2F7F7;
}
.mv-chip.mv-chip-rec {
  border-radius: 4px;
  padding: 4px 8px;
}
.mv-chip.mv-chip-rec.mv-chip-color-primary {
  color: var(--primary-color);
  background: var(--primary-1);
}

.mv-page-tab .tab-row {
  width: 100%;
  display: flex;
}
.mv-page-tab .tab-item {
  width: 100%;
  color: var(--typo-mute);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 16px 0;
  border-bottom: 2px solid #F6F6F7;
}
.mv-page-tab .tab-selected {
  color: var(--primary-5-base);
  border-bottom: 2px solid var(--primary-5-base);
}

.mv-page-tab-black {
  background: var(--gray-0);
}
.mv-page-tab-black .tab-item {
  width: 100%;
  border-bottom: 2px solid rgba(113, 123, 133, 0.8);
  color: var(--typo-mute);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  border-bottom: 1px solid var(--typo-mute);
  padding: 12px 20px;
  text-align: center;
}
.mv-page-tab-black .tab-selected {
  border-bottom: 2px solid var(--typo-black);
  color: var(--typo-black);
}

.result-comp-common .result-title {
  color: var(--typo-black);
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  white-space: pre-line;
}
.result-comp-common .fail-title {
  color: var(--red-5-base);
}
.result-comp-common .title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.result-comp-common .image-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
}
.result-comp-common .loading-back {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.result-comp-common .loading-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-62%) translateY(-50%);
}
.result-comp-common .result-text {
  color: var(--typo-body);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: pre-line;
  padding: 30px 20px 30px 20px;
}
.result-comp-common .result-text-heading {
  color: var(--typo-body);
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.result-comp-common .btn-row {
  display: flex;
  gap: 8px;
  padding: 0 20px 32px 20px;
}
.result-comp-common .success-row .result-title {
  color: var(--primary-color);
}

.mv-accordion {
  transition: transform 1s;
}
.mv-accordion .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 8px 20px;
}
.mv-accordion .header-row .stroke-icon {
  transform: rotate(90deg);
}
.mv-accordion .content-row {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s;
}
.mv-accordion .content-row > div {
  overflow: hidden;
}

.mv-accordion-flipped .header-row .stroke-icon {
  transform: rotate(270deg);
}
.mv-accordion-flipped .content-row {
  grid-template-rows: 1fr;
}

.mv-count-input {
  display: flex;
  gap: 4px;
  border-radius: 100px;
  width: 110px;
  height: 36px;
  background: var(--secondary-3);
  color: var(--typo-black);
  padding: 8px 16px;
}
.mv-count-input svg {
  width: 20px;
  height: 20px;
}
.mv-count-input .value-col {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.mv-count-input .count-btn {
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
}
.mv-count-input .count-btn.count-btn--disabled {
  pointer-events: none;
  color: var(--secondary-5-base);
}
.mv-count-input.mv-count-input--selected {
  background: var(--primary-1);
  color: var(--primary-7-active);
}
.mv-count-input.mv-count-input--disabled {
  color: var(--secondary-5-base);
  pointer-events: none;
}

.intl-phone-input .iti {
  width: 100%;
}
.intl-phone-input .custom-input-area {
  width: 100%;
}
.intl-phone-input .custom-input-area #phone {
  padding-left: 50px;
}

.mv-text-checkbox {
  cursor: pointer;
}
.mv-text-checkbox > .inner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gray-14);
  border-radius: 10px;
  padding: 12px;
}
.mv-text-checkbox .text-content {
  color: var(--color-black);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.mv-text-checkbox > .desc-row {
  color: var(--typo-mute);
  font-size: 13px;
  font-weight: 500;
  line-height: 14px;
  margin-top: 4px;
}
.mv-text-checkbox.mv-text-checkbox-checked > .inner-row {
  background: #C8EFEA;
}

.alert-comp .alert-frame {
  border-radius: 10px;
  background: var(--gray-0);
  width: 312px;
  padding: 24px 0;
}
.alert-comp .text-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--typo-heading);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  min-height: 120px;
  white-space: pre-line;
  padding: 0 8px;
}
.alert-comp .text-area.style-em {
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.alert-comp .text-area.style-em-2 {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
}
.alert-comp .btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.alert-comp .confirm-btn {
  width: 100%;
  color: var(--primary-color);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.mv-media-input input {
  visibility: hidden;
  display: block;
  width: 0;
  height: 0;
}
.mv-media-input .default-row {
  width: 150px;
}
.mv-media-input .default-row button {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 12px;
}
.mv-media-input .input-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mv-media-input .input-display {
  display: flex;
  justify-content: center;
}
.mv-media-input .input-display img {
  width: 168px;
  height: 158px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}
.mv-media-input .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
}

.mv-option-select label {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}
.mv-option-select .label-area {
  display: flex;
  margin-bottom: 6px;
}
.mv-option-select .label-area span {
  color: var(--primary-color);
}
.mv-option-select .check-svg {
  display: none;
}
.mv-option-select .op-wrapper {
  display: flex;
  gap: 12px;
}
.mv-option-select .op-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: var(--gray-14);
  color: var(--black);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 12px;
  cursor: pointer;
}
.mv-option-select .op-btn .check-svg circle {
  fill: var(--gray-3);
}
.mv-option-select .op-btn-selected {
  background: var(--primary-3);
  font-weight: 600;
  color: var(--primary-color);
}
.mv-option-select .op-btn-selected .check-svg circle {
  fill: var(--primary-color);
}
.mv-option-select .op-btn-type-check {
  color: var(--color-black);
  justify-content: space-between;
}
.mv-option-select .op-btn-type-check .check-svg {
  display: block;
}
.mv-option-select .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}
.mv-option-select .sub-msg {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.mv-option-select.mv-option-select-vertical .op-wrapper {
  flex-direction: column;
}

.mv-textarea label {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
}
.mv-textarea .label-area {
  display: flex;
  margin-bottom: 6px;
}
.mv-textarea .label-area span {
  color: var(--primary-color);
}
.mv-textarea .input-wrapper {
  border-radius: 10px;
  border: 1px solid var(--secondary-5-base);
  background: var(--gray-0);
  padding: 16px 12px 8px 12px;
}
.mv-textarea textarea {
  font-family: "Pretendard";
  margin-bottom: 10px;
  max-height: 94px;
  resize: none;
}
.mv-textarea textarea:disabled {
  opacity: 1;
  color: var(--gray-l-2);
}
.mv-textarea .max-txt {
  color: var(--typo-placeholder);
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
}
.mv-textarea .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
}
.mv-textarea.mv-textarea-error .input-wrapper {
  border-color: red;
}
.mv-textarea.mv-textarea-disabled .input-wrapper {
  background: rgba(212, 219, 228, 0.3);
}

.mv-select .etc-row {
  margin-top: 4px;
}
.mv-select .dropdown-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--gray-2);
  background: var(--gray-0);
  padding: 16px;
  cursor: pointer;
}
.mv-select .dropdown-box svg {
  color: var(--typo-placeholder);
}
.mv-select .dropdown-box.dropdown-box-disable {
  pointer-events: none;
  border-color: transparent;
}
.mv-select .dropdown-box.dropdown-box-disable svg {
  visibility: hidden;
}
.mv-select .dropdown-box.dropdown-box-error {
  border-color: red;
}
.mv-select .dropdown-box.dropdown-box-empty {
  color: var(--gray-l-1);
}
.mv-select .error-msg {
  color: red;
  font-weight: 500;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 5px;
}
.mv-select .op-wrapper {
  position: relative;
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding: 0 20px 24px 20px;
}
.mv-select .search-row {
  position: sticky;
  top: 0;
  background: #FFFFFF;
}
.mv-select .op-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
}
.mv-select .op-row .check-img {
  visibility: hidden;
}
.mv-select .op-row.op-row-selected .check-img {
  visibility: visible;
}
.mv-select .op-footer {
  padding: 16px 40px;
}

.dot-loader {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side,currentColor 90%,#0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: 33.3333333333% 100%;
  animation: l7 1s infinite linear;
}

@keyframes l7 {
  33% {
    background-size: 33.3333333333% 0%, 33.3333333333% 100%, 33.3333333333% 100%;
  }
  50% {
    background-size: 33.3333333333% 100%, 33.3333333333% 0%, 33.3333333333% 100%;
  }
  66% {
    background-size: 33.3333333333% 100%, 33.3333333333% 100%, 33.3333333333% 0%;
  }
}
@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}
.spin-loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m:
          conic-gradient(#0000 10%,#000),
          linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}
.mv-input.address-input .input-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mv-input.address-input .input-list .mv-input input {
  padding: 10px;
}
.mv-input.address-input .input-list .item-row {
  display: flex;
  gap: 8px;
}
.mv-input.address-input .input-list .item-row .mv-button button {
  padding: 11px 0;
}

.theme-light {
  --primary-color: #00c4ac;
  --primary-1: #E5F9F7;
  --primary-3: #80E1D5;
  --primary-5-base: #00C4AC;
  --primary-7-active: #00A792;
  --detail-color: #333333;
  --bg-color: #ffffff;
  --title-color: #111111;
  --back-btn-color: #111111;
  --color-search: #5D596C;
  --bg-home-color: #f2f7f7;
  --bg-blank-color: rgba(0, 0, 0, 0);
  --color-black: #000000;
  --color-black-2: #101010;
  --color-black-3: #070707;
  --color-black-4: #333;
  --secondary-1: #F8FAFB;
  --secondary-3: #EBEFF3;
  --secondary-5-base: #DDE4EB;
  --secondary-dark-2: #2F3349;
  --puple-5-base: #7C4AFF;
  --color-white: #ffffff;
  --color-danger: #ff1717;
  --typo-black: #333;
  --gray-0: #FFF;
  --gray-1: #F6F6F7;
  --gray-2: #DBDADE;
  --gray-3: #ccd7e1;
  --gray-4: #d9d9d9;
  --gray-5: #9aa4ae;
  --gray-6: #e3e8e8;
  --gray-7: #d1dcda;
  --gray-8: #e5e5e5;
  --gray-9: #dddddd;
  --gray-10: #a2afbc;
  --gray-11: #7f95a0;
  --gray-12: #ededed;
  --gray-13: #f2f4f8;
  --gray-14: #fafafa;
  --gray-l-1: #dde4eb;
  --gray-l-2: #717b85;
  --cool-gray-1: #717B85;
  --red-1: #FFE3E3;
  --red-5-base: #FF7474;
  --red-7-active: #D96363;
  --red-warn: #DC3545;
  --bg-green: #F2F7F7;
  --tab-bg-color: #e3e8e8;
  --tab-font-color: #000000;
  --home-footer-bg: #ffffff;
  --progress-color: #8049f5;
  --typo-mute: #A5A2AD;
  --typo-heading: #5D596C;
  --typo-body: #6F6B7D;
  --typo-placeholder: #B7B5BE;
  --dim-1: rgba(0, 0, 0, 0.70);
  --primary-gradient-1: linear-gradient(90deg, #20D0B8 10.18%, #3BC7F8 107.73%);
  --cover-effect: linear-gradient(180deg, rgba(18, 18, 18, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
  --seat-back: #222;
  --btn-color-black: #000;
}
.theme-light .dp__theme_light {
  --dp-menu-border-color: #FFF;
  --dp-primary-color: #E5F9F7;
  --dp-primary-text-color: #00C4AC;
}
.theme-light.theme-monsterEnergy {
  --primary-color: #6BD41A;
  --primary-1: #DDF2CD;
  --primary-3: #DDF2CD;
}
.theme-light.theme-monsterEnergy .discover-event-detail-view .cltn-image-content {
  background: transparent;
}
.theme-light.theme-monsterEnergy .agree-modal-comp {
  --detail-color: #333;
}
.theme-light.theme-monsterEnergy .register-common {
  background: #111213;
  --back-btn-color: #fff;
  --title-color: #fff;
  --detail-color: #fff;
}
.theme-light.theme-monsterEnergy .register-common .status-text {
  color: #fff;
}
.theme-light.theme-monsterEnergy .start-view {
  --bg-color: #111213;
}
.theme-light.theme-monsterEnergy .start-view .sub-text,
.theme-light.theme-monsterEnergy .start-view .login-txt {
  color: #fff;
}
.theme-light.theme-monsterEnergy .reset-pwd-view {
  background: #111213;
  --title-color: #fff;
}
.theme-light.theme-monsterEnergy .reset-pwd-view input {
  color: #fff;
}
.theme-light.theme-monsterEnergy .reset-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-monsterEnergy .forgot-pwd-view {
  --title-color: #fff;
  --gray-l-2: #fff;
  --gray-l-1: #9aa4ae;
  --detail-color: #FFF;
  background: #111213;
  --back-btn-color: #fff;
}
.theme-light.theme-monsterEnergy .forgot-pwd-view .email-row {
  color: #fff;
}
.theme-light.theme-monsterEnergy .forgot-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-monsterEnergy .blank-layout .theme-header {
  --bg-color: #111213;
  --back-btn-color: #fff;
}
.theme-light.theme-monsterEnergy .auth-ctgy {
  --bg-color: #111213;
  --back-btn-color: #fff;
  --detail-color: #FFF;
  --btn-color-black: #6BD41A;
}
.theme-light.theme-monsterEnergy .auth-ctgy .auth-layout {
  color: #FFF !important;
}
.theme-light.theme-monsterEnergy .auth-ctgy .auth-layout .title-text {
  color: #fff;
}
.theme-light.theme-monsterEnergy .auth-ctgy label {
  color: #fff !important;
}

.status-disabled {
  --bg-home-color: #191c23;
  --bg-blank-color: #191c23;
  --tab-bg-color: #2a2e3d;
  --tab-font-color: #a2afbc;
  --home-footer-bg: #272b32;
  --color-search: #FFF;
}

@keyframes list-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 100;
    transform: translateY(0);
  }
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 100;
  }
}
@keyframes ntfc-move {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 100;
  }
  80% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 100;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}
@keyframes history-slide-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-400px);
  }
}
@keyframes skeleton-bg {
  from {
    background-color: rgb(233, 236, 239);
  }
  50% {
    background-color: rgb(222, 226, 230);
  }
  to {
    background-color: rgb(233, 236, 239);
  }
}
.qr-card-comp {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0px 10px 20px rgba(0, 124, 142, 0.16);
  border-radius: 30px;
  padding: 40px 24px;
}
.qr-card-comp .title-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
}
.qr-card-comp img {
  width: 190px;
  height: 176px;
  margin-bottom: 24px;
}
.qr-card-comp .mv-button button {
  padding: 10px;
}

.nft-card-comp {
  position: relative;
  width: 300px;
  color: var(--color-black);
}
.nft-card-comp .nft-card-theme {
  perspective: 1500px;
  transition: opacity 1s;
}
.nft-card-comp .card-line {
  position: absolute;
  top: 0;
  left: 0;
}
.nft-card-comp .nft-card-back {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  width: 300px;
  height: 470px;
  background-size: cover;
  padding: 15px 20px;
  backface-visibility: hidden;
  transition: transform 1s;
}
.nft-card-comp .card-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}
.nft-card-comp .card-footer img {
  width: 30px;
  height: 30px;
}
.nft-card-comp .logo-area {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  min-height: 39px;
}
.nft-card-comp .logo-area .float-right-info {
  font-size: 16px;
  font-weight: 600;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
}
.nft-card-comp .logo-area img {
  max-width: 140px;
  height: 39px;
}
.nft-card-comp .logo-area .float-seat-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  align-items: center;
  height: 20px;
  border-radius: 100px;
  box-shadow: 4px 10px 30px 0px rgba(4, 4, 4, 0.07);
  background: #FFF;
  color: #5D596C;
  text-align: center;
  font-size: 7px;
  font-weight: 700;
  padding: 4px 6.5px 4px 5px;
  margin-left: 10px;
}
.nft-card-comp .logo-area .float-seat-btn img {
  width: 12px;
}
.nft-card-comp .logo-area .float-info-img {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
}
.nft-card-comp .logo-area .float-info-img img {
  width: 20px;
  height: 20px;
}
.nft-card-comp .qr-row {
  display: flex;
  justify-content: center;
}
.nft-card-comp .qr-image-area {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: var(--color-white);
  overflow: hidden;
}
.nft-card-comp .qr-image-area img {
  width: 100%;
}
.nft-card-comp .qr-status-area {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
}
.nft-card-comp .qr-status-area img {
  width: 100%;
}
.nft-card-comp .nft-color-gold .nft-card-back {
  background: linear-gradient(135deg, #9c7e41 0%, #d4af37 15%, #fcf6ba 30%, #bf953f 40%, #fbf5b7 45%, #aa771c 80%, #916a12 100%);
}
.nft-card-comp .nft-color-black {
  color: #D7BD77;
}
.nft-card-comp .nft-color-black .nft-card-back {
  background: linear-gradient(135deg, #353535 0%, #1E1E1E 50%, #161616 100%);
}
.nft-card-comp .nft-color-white .nft-card-back {
  background: linear-gradient(135deg, #EDF1F4 0%, #CAD5EB 50%, #BAC5E3 100%);
}
.nft-card-comp .nft-color-pink .nft-card-back {
  background: url(/img/card_back_pink.f3759b8c.png);
  background-size: cover;
}
.nft-card-comp .nft-color-green .nft-card-back {
  background: url(/img/card_back_green.c8576c86.png);
  background-size: cover;
}
.nft-card-comp .nft-color-blue .nft-card-back {
  background: url(/img/card_back_blue.230b0c32.png);
  background-size: cover;
}
.nft-card-comp .nft-color-yellow .nft-card-back {
  background: url(/img/card_back_yellow.ff0972d7.png);
  background-size: cover;
}
.nft-card-comp .nft-color-orange .nft-card-back {
  background: url(/img/card_back_orange.d85bf793.png);
  background-size: cover;
}
.nft-card-comp .nft-color-pay .nft-card-back {
  background: url(/img/card_back_pay.a26dbd9e.png);
  background-size: 100% 100%;
}
.nft-card-comp .tag-area {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/img/tag_area.1e2173f6.svg);
  width: 65.22px;
  height: 65.46px;
}
.nft-card-comp .tag-area .tag-name {
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;
  background: linear-gradient(270.9deg, rgba(255, 255, 255, 0.7) 0.79%, #ffffff 83.72%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: rotate(-45deg) translateY(-15px);
}
.nft-card-comp .nft-image {
  position: relative;
}
.nft-card-comp .nft-image > img {
  width: 260px;
  height: 260px;
  border-radius: 20px;
}
.nft-card-comp .nft-image .nft-image-el {
  -o-object-fit: cover;
     object-fit: cover;
}
.nft-card-comp .nft-status-image {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #B7B5BE;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  white-space: pre-line;
}
.nft-card-comp .nft-status-image-fail {
  color: var(--red-5-base);
}
.nft-card-comp .nft-status-image-qtnr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.nft-card-comp .nft-status-image-qtnr img {
  width: 50px;
  height: 50px;
}
.nft-card-comp .nft-status-image-qtnr .desc-text {
  color: var(--gray-0);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.nft-card-comp .nft-status-image-qtnr .mv-button {
  width: 174px;
}
.nft-card-comp .nft-status-image-primary {
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--gray-1, #F6F6F7);
  background: rgba(0, 167, 146, 0.7);
}
.nft-card-comp .nft-status-image-gray {
  color: var(--gray-0);
  background: rgba(162, 175, 188, 0.8);
}
.nft-card-comp .nft-status-image-red {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--gray-0);
  background: rgba(255, 116, 116, 0.8);
}
.nft-card-comp .more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 111px;
  height: 48px;
  border: 1px solid var(--gray-0, #FFF);
  color: var(--gray-0);
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}
.nft-card-comp .center-icon {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.nft-card-comp .offer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 8px;
}
.nft-card-comp .nft-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.nft-card-comp .card-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.nft-card-comp .card-loading {
  opacity: 0.5;
  width: 300px;
  height: 470px;
  border-radius: 20px;
  animation: skeleton-bg 0.5s infinite;
}
.nft-card-comp .fixed-info {
  position: absolute;
  bottom: 24px;
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}

.nft-card-flipped .card-front {
  transform: rotateY(-180deg);
}
.nft-card-flipped .card-back {
  transform: rotateY(0deg);
}

.nft-card-disabled {
  filter: grayscale(1);
}
.nft-card-disabled .tag-area {
  background: url(/img/tag_area_disabled.a1b0c325.svg);
}
.nft-card-disabled .center-icon .used-mark {
  width: 100px;
  height: 100px;
}
.nft-card-disabled .center-icon .lock-mark {
  width: 65px;
  height: auto;
}
.nft-card-disabled .card-footer img {
  filter: opacity(0.2);
}

.nft-card-comp-mmbs .qr-image-area {
  width: 260px;
  height: 260px;
  padding: 5px;
}
.nft-card-comp-mmbs .qr-status-area {
  width: 260px;
  height: 260px;
}

.nft-card-comp-ticket .nft-card-back {
  -webkit-mask-image: url(/img/ticket_mask.eb9deeed.svg);
          mask-image: url(/img/ticket_mask.eb9deeed.svg);
  height: 490px;
}
.nft-card-comp-ticket .divider {
  position: absolute;
  bottom: 148px;
  left: 15px;
  border-top: 2px dashed rgba(0, 0, 0, 0.12);
  width: 271px;
}
.nft-card-comp-ticket .qr-image-area {
  width: 260px;
  height: 260px;
  padding: 8px;
}
.nft-card-comp-ticket .qr-status-area {
  width: 260px;
  height: 260px;
}
.nft-card-comp-ticket .name-area {
  padding-top: 18px;
}

.nft-card-comp-pay .nft-card-back {
  padding-top: 40px;
  padding-left: 35px;
  padding-right: 35px;
  border-radius: 10px;
}
.nft-card-comp-pay .logo-area {
  margin-bottom: 21px;
}
.nft-card-comp-pay .card-line {
  display: none;
}
.nft-card-comp-pay .tag-area {
  display: none;
}
.nft-card-comp-pay .nft-image {
  border-radius: 10px;
  margin-bottom: 0;
}
.nft-card-comp-pay .nft-image img {
  border: 2px solid #DDE4EB;
  background: #FFFFFF;
  width: 228px;
  height: 228px;
  border-radius: 10px;
}
.nft-card-comp-pay .nft-status-image {
  width: 228px;
  height: 228px;
  border-radius: 10px;
}
.nft-card-comp-pay .name-area {
  padding-top: 16px;
}
.nft-card-comp-pay .offer-name {
  color: #FFF;
  margin-bottom: 8px;
}
.nft-card-comp-pay .nft-name {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.nft-card-comp-pay .qr-image-area {
  border-radius: 10px;
  background: #FFFFFF;
  width: 228px;
  height: 228px;
  border: 2px solid #DDE4EB;
  margin-bottom: 34px;
}
.cltn-card-comp {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
}
.cltn-card-comp .back-image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cltn-card-comp .count-row {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
}
.cltn-card-comp .count-tag {
  display: flex;
  gap: 3px;
  background: var(--color-white);
  border-radius: 100px;
  padding: 2px 6px;
}
.cltn-card-comp .cltn-count {
  color: var(--primary-color);
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.cltn-card-comp .card-footer {
  display: flex;
  gap: 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 99.63%);
  padding: 24px 24px;
  margin-top: auto;
}
.cltn-card-comp .cltn-text {
  width: 100%;
  overflow: hidden;
}
.cltn-card-comp .cltn-brand {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--color-white);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.cltn-card-comp .cltn-name {
  color: var(--color-white);
  font-weight: 600;
  font-size: 20px;
}

.nft-card-back-mmbs {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nft-card-back-mmbs .text-area {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.nft-card-back-mmbs .text-area .sub-text {
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.nft-card-back-mmbs .text-area .main-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--title-color);
  font-family: "Pretendard";
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nft-card-back-mmbs .text-area .loct-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 12px;
}
.nft-card-back-mmbs .text-area .seat-text {
  position: absolute;
  bottom: 9px;
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}

.nft-card-back-ticket {
  z-index: 2;
  padding-top: 32px;
}
.nft-card-back-ticket .divider {
  position: absolute;
  bottom: 148px;
  left: 15px;
  border-top: 2px dashed rgba(0, 0, 0, 0.12);
  width: 271px;
}
.nft-card-back-ticket .sub-text {
  height: 20px;
}
.nft-card-back-ticket .text-item-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nft-card-back-ticket .text-item-area .text-item {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nft-card-back-ticket .text-item-area .main-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black, #333);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}
.nft-card-back-ticket .text-item-area .detail-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.nft-card-back-ticket .underline {
  text-decoration: underline;
}
.nft-card-back-ticket .strong-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.nft-card-back-pay .text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.nft-card-back-pay .date-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.nft-card-back-pay .row-line {
  flex-grow: 1;
  height: 1px;
  border-radius: 999px;
  background: var(--body-gradient, linear-gradient(150deg, #EAE8FF 0%, #FFE7E8 100%));
}
.nft-card-back-pay .sub-text {
  color: #FFF;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}
.nft-card-back-pay .main-text {
  display: flex;
  align-items: center;
  height: 40px;
  color: #FFF;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.nft-history-card-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 298px;
  border-radius: 20px;
  border: 2px solid #f6f6f7;
  background: #fff;
  overflow: hidden;
  padding-top: 36px;
}
.nft-history-card-comp .sub-detail {
  font-size: 11px;
  white-space: pre-line;
  padding: 0 20px 20px 20px;
}
.nft-history-card-comp .title-area {
  width: 100%;
  text-align: center;
  position: relative;
}
.nft-history-card-comp .title-area .coupon-history-btn {
  position: absolute;
  right: 16px;
  top: 0;
  font-weight: 600;
  font-size: 12px;
  color: rgba(75, 70, 92, 0.6);
}
.nft-history-card-comp .title-area .coupon-history-btn div {
  display: flex;
  align-items: center;
}
.nft-history-card-comp .history-title {
  color: #4b465c;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  margin-bottom: 8px;
}
.nft-history-card-comp .sub-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.nft-history-card-comp .sub-row img {
  width: 14px;
  height: 14px;
  border-radius: 14px;
}
.nft-history-card-comp .sub-row .sub-text {
  color: #4b465c;
  font-size: 12px;
  font-weight: 400;
}
.nft-history-card-comp .sub-row .sub-text p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
}
.nft-history-card-comp .sub-row .sub-text span {
  color: #b7b5be;
}
.nft-history-card-comp .use-container {
  padding: 8px 20px 4px 20px;
  width: 100%;
  border-bottom: 2px solid #f6f6f7;
}
.nft-history-card-comp .pay-container .use-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: transparent;
}
.nft-history-card-comp .use-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  background: #ebeff3;
  border-radius: 16px;
}
.nft-history-card-comp .use-area .divider {
  width: 1px;
  height: 40px;
  background: #c9c7ce;
}
.nft-history-card-comp .use-area .use-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 0 16px 16px 0;
}
.nft-history-card-comp .use-area .use-title {
  color: #6f6b7d;
  text-align: center;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  margin-bottom: 8px;
}
.nft-history-card-comp .use-area .cnt-text {
  color: #4b465c;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  margin-bottom: 4px;
}
.nft-history-card-comp .use-area .cnt-text .available {
  color: #00c4ac;
}
.nft-history-card-comp .use-area .left-text {
  color: #a5a2ae;
  text-align: center;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
}
.nft-history-card-comp .use-area .right-selected {
  background-color: #f8fafb;
}
.nft-history-card-comp .use-area .right-selected .use-title .item-title {
  color: #b7b5be;
}
.nft-history-card-comp .use-area .right-selected .available {
  color: #b7b5be;
}
.nft-history-card-comp .use-area .right-selected .cnt-text {
  color: #b7b5be;
}
.nft-history-card-comp .use-area .left-selected {
  border-radius: 16px 0 0 16px;
  background-color: #f8fafb;
}
.nft-history-card-comp .use-area .left-selected .use-title .item-title {
  color: #b7b5be;
}
.nft-history-card-comp .use-area .left-selected .available {
  color: #b7b5be;
}
.nft-history-card-comp .use-area .left-selected .cnt-text {
  color: #b7b5be;
}
.nft-history-card-comp .history-area {
  width: 100%;
  max-height: calc(100vh - 430px);
  overflow: scroll;
  padding: 14px 20px;
}
.nft-history-card-comp .info-area {
  display: flex;
  gap: 8px;
  width: 100%;
  background: #f8f7fa;
  padding: 16px 20px;
}
.nft-history-card-comp .info-area .info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nft-history-card-comp .info-area .info-title {
  display: flex;
  gap: 8px;
}
.nft-history-card-comp .info-area .info-title .title-text {
  color: #4b465c;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.nft-history-card-comp .info-area .right-item {
  flex-grow: 1;
}
.nft-history-card-comp .info-area .info-value {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a5a2ad;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
}
.nft-history-card-comp .info-area .info-value img {
  width: 14px;
}

.nft-history-list-emtpy-comp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 21px;
}
.nft-history-list-emtpy-comp .empty-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 70, 92, 0.5);
}
.nft-history-list-emtpy-comp .no-data-img {
  width: 180px;
}

.nft-history-list-comp {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nft-history-list-comp .history-item-used {
  background-color: #f6f6f7;
  color: rgba(75, 70, 92, 0.5);
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nft-history-list-comp .history-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.nft-history-list-comp .image-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 14px;
  background: #f6f6f7;
}
.nft-history-list-comp .image-area .image-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: red;
}
.nft-history-list-comp .item-text {
  flex-grow: 1;
}
.nft-history-list-comp .item-name {
  color: #4b465c;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}
.nft-history-list-comp .item-content {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 200px;
  max-width: 100%;
  color: #5D596C;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.nft-history-list-comp .send-row {
  display: flex;
  min-width: 0;
  width: 100%;
}
.nft-history-list-comp .send-row .user-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-bottom: 2px;
  max-width: 90px;
}
.nft-history-list-comp .send-divider {
  margin: 0 6px;
}
.nft-history-list-comp .item-sub {
  display: flex;
  gap: 9px;
  align-items: center;
  color: #b7b5be;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.nft-history-list-comp .link {
  display: flex;
  align-items: center;
}
.nft-history-list-comp .link img {
  width: 12px;
  height: 12px;
}
.nft-history-list-comp .wait-item {
  color: var(--gray-l-2);
}
.nft-history-list-comp .wait-item .item-name {
  color: #a5a2ae;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}
.nft-history-list-comp .vertical-line {
  z-index: 0;
  position: absolute;
  top: 16px;
  left: 8px;
  height: 100%;
  border-left: 1px dashed #dbdade;
}
.nft-history-list-comp .available {
  color: var(--primary-color);
}

.nft-history-list-comp-mmbs .item-name {
  margin-bottom: 8px;
}
.nft-history-list-comp-mmbs .item-content {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #a5a2ae;
  width: 200px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
  margin-top: 0;
  margin-bottom: 2px;
  padding-bottom: 1px;
}

.coupon-detail-card-comp {
  position: relative;
  width: 300px;
  height: 470px;
  background: var(--gray-12);
  -webkit-mask-image: url(/img/coupon_line.711b450b.svg);
}
.coupon-detail-card-comp .deactive-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14.933px;
  width: 100%;
  height: 260px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
}
.coupon-detail-card-comp .deactive-area .title-text {
  color: var(--gray-0);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}
.coupon-detail-card-comp .deactive-area .desc-text {
  color: var(--gray-0);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.coupon-detail-card-comp .deactive-area .date-txt {
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.coupon-detail-card-comp .status-text {
  font-size: 20px;
  font-weight: 600;
}
.coupon-detail-card-comp .barcode-area {
  padding: 22px 20px 0 20px;
  margin-bottom: 44px;
}
.coupon-detail-card-comp .barcode-area img {
  max-width: 90%;
}
.coupon-detail-card-comp .barcode-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 260px;
  background: var(--color-white);
  border-radius: 16px;
}
.coupon-detail-card-comp .coupon-pin {
  font-size: 20px;
}
.coupon-detail-card-comp .divider {
  position: absolute;
  bottom: 159px;
  width: 100%;
  border-top: 2px dashed rgba(0, 0, 0, 0.12);
}
.coupon-detail-card-comp .text-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 14px 15px 14px;
  overflow: hidden;
}
.coupon-detail-card-comp .offer-name {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.coupon-detail-card-comp .desc-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.coupon-detail-card-comp .valid-date {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 13px;
  height: 22px;
  line-height: 22px;
}
.coupon-detail-card-comp .mv-button {
  margin-top: auto;
}
.coupon-detail-card-comp .mv-button button {
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  padding: 10px 0;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.coupon-detail-card-comp .qr-loading {
  width: 100px;
  animation: spin 1s linear infinite;
}

.coupon-warning-content {
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px 20px;
  height: 100%;
}
.coupon-warning-content .box-list {
  flex: 1 1 auto;
  display: flex;
  gap: 16px;
  flex-direction: column;
  min-height: 0;
}
.coupon-warning-content .single-min-height {
  flex-grow: 1;
}
.coupon-warning-content .extra-box {
  flex: 1;
  overflow-y: scroll;
}
.coupon-warning-content .notice-box {
  border-radius: 10px;
  background: #FAFAFA;
  padding: 20px;
}
.coupon-warning-content .place-text {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--typo-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  min-width: 0;
}
.coupon-warning-content .ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.coupon-warning-content .title-text {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 12px;
}
.coupon-warning-content .memo-text {
  color: var(--cool-gray-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: pre-line;
  word-break: break-all;
}

.qr-status-comp {
  width: 100%;
  height: 100%;
}
.qr-status-comp p {
  z-index: 1;
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
}
.qr-status-comp .status-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.qr-status-comp .type-MEMBERSHIP img {
  width: 100px;
  height: 100px;
}
.qr-status-comp .type-TICKET {
  background: rgba(255, 255, 255, 0.5);
}
.qr-status-comp .type-TICKET img {
  width: 100px;
  height: 100px;
}
.qr-status-comp .status-lock {
  position: relative;
  gap: 7px;
  background: #FFFFFF;
  padding: 35px;
}
.qr-status-comp .status-lock img {
  z-index: 1;
  width: 94px;
  height: 107px;
}
.qr-status-comp .status-lock .back-image-area {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.qr-status-comp .status-lock .back-image {
  width: 163px;
  height: 163px;
  filter: opacity(0.2);
}
.qr-status-comp .event-lock {
  position: relative;
  gap: 7px;
  padding: 10px;
  background: #FFF;
}
.qr-status-comp .event-lock .lock-icon {
  z-index: 1;
  width: 60px;
  height: 60px;
}
.qr-status-comp .event-lock .title-text {
  z-index: 1;
  color: var(--gray-0);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  white-space: pre;
}
.qr-status-comp .event-lock .desc-text {
  z-index: 1;
  color: var(--gray-0);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.qr-status-comp .event-lock .desc-text button {
  width: 100px;
  height: 40px;
}
.qr-status-comp .event-lock .back-image-area {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}
.qr-status-comp .event-lock .back-image {
  width: 163px;
  height: 163px;
  filter: opacity(0.2);
}

.nft-owner-history-list-comp {
  padding: 8px 20px;
}
.nft-owner-history-list-comp .receiver-mark {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 3px solid var(--primary-1);
  background: var(--primary-color);
}
.nft-owner-history-list-comp .profile-image {
  width: 24px;
  height: 24px;
  border-radius: 24px;
}
.nft-owner-history-list-comp .default-image {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: #D9D9D9;
}
.nft-owner-history-list-comp .item-text {
  max-width: 100%;
}
.nft-owner-history-list-comp .name-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.nft-owner-history-list-comp .name-row .mv-image {
  flex-shrink: 0;
}
.nft-owner-history-list-comp .item-name {
  flex-grow: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.nft-status-card-common {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  padding: 110px 24px 32px 24px;
}
.nft-status-card-common .logo-area {
  margin-bottom: 16px;
}
.nft-status-card-common .logo-area .logo-icon {
  width: 100px;
  height: 100px;
}
.nft-status-card-common .name-area {
  color: var(--gray-0);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 16px;
}
.nft-status-card-common .desc-area {
  height: 72px;
  color: var(--gray-0);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: pre;
}
.nft-status-card-common .action-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 32px;
  padding-top: 16px;
}
.nft-status-card-common .action-row button {
  height: 56px;
  padding: 0;
}

.nft-status-card-fail {
  background: rgba(0, 0, 0, 0.7);
}
.nft-status-card-fail .name-area {
  color: var(--red-5-base);
}
.nft-status-card-fail .desc-area {
  color: var(--red-5-base);
}

.nft-sending-modal .image-row img {
  height: 140px;
}
.nft-sending-modal button {
  background: var(--secondary-dark-2);
}

.modal-common {
  padding: 24px;
}
.modal-common .image-row {
  display: flex;
  justify-content: center;
  height: 140px;
}
.modal-common .title-row {
  color: var(--color-black-4);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  white-space: pre-line;
}
.modal-common .desc-row {
  color: #6F6B7D;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: pre-line;
}
.modal-common .button-row {
  display: flex;
  gap: 8px;
}

.theme-light.theme-xrp-seoul {
  --primary-color: #3D8AF7;
  --primary-7-active: #2a60ac;
  --primary-1: #77adf9;
  --primary-3: #b1d0fb;
}
.theme-light.theme-xrp-seoul .mv-button .toner-primary button {
  color: #FFFFFF;
}
.theme-light.theme-xrp-seoul .agree-modal-comp {
  --detail-color: #333;
}
.theme-light.theme-xrp-seoul .register-common {
  background: #111213;
  --back-btn-color: #fff;
  --title-color: #fff;
  --detail-color: #fff;
}
.theme-light.theme-xrp-seoul .register-common .status-text {
  color: #fff;
}
.theme-light.theme-xrp-seoul .start-view {
  --bg-color: #111213;
}
.theme-light.theme-xrp-seoul .start-view .sub-text,
.theme-light.theme-xrp-seoul .start-view .login-txt {
  color: #fff;
}
.theme-light.theme-xrp-seoul .reset-pwd-view {
  background: #111213;
  --title-color: #fff;
}
.theme-light.theme-xrp-seoul .reset-pwd-view input {
  color: #fff;
}
.theme-light.theme-xrp-seoul .reset-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-xrp-seoul .forgot-pwd-view {
  --title-color: #fff;
  --gray-l-2: #fff;
  --gray-l-1: #9aa4ae;
  --detail-color: #FFF;
  background: #111213;
  --back-btn-color: #fff;
}
.theme-light.theme-xrp-seoul .forgot-pwd-view .email-row {
  color: #fff;
}
.theme-light.theme-xrp-seoul .forgot-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-xrp-seoul .blank-layout .theme-header {
  --bg-color: #111213;
  --back-btn-color: #fff;
}
.theme-light.theme-xrp-seoul .auth-ctgy {
  --bg-color: #111213;
  --back-btn-color: #fff;
  --detail-color: #FFF;
  --btn-color-black: #3D8AF7;
}
.theme-light.theme-xrp-seoul .auth-ctgy .auth-layout {
  color: #FFF !important;
}
.theme-light.theme-xrp-seoul .auth-ctgy .auth-layout .title-text {
  color: #fff;
}
.theme-light.theme-xrp-seoul .auth-ctgy label {
  color: #fff !important;
}

.theme-light.theme-vivabravo {
  --primary-color: #bf0c4f;
  --primary-7-active: #5f0627;
  --primary-1: #d25483;
  --primary-3: #df85a7;
}
.theme-light.theme-vivabravo .mv-button .toner-primary button {
  color: #FFFFFF;
}
.theme-light.theme-vivabravo .agree-modal-comp {
  --detail-color: #333;
}
.theme-light.theme-vivabravo .register-common {
  background: #111213;
  --back-btn-color: #fff;
  --title-color: #fff;
  --detail-color: #fff;
}
.theme-light.theme-vivabravo .register-common .status-text {
  color: #fff;
}
.theme-light.theme-vivabravo .start-view {
  --bg-color: #111213;
}
.theme-light.theme-vivabravo .start-view .sub-text,
.theme-light.theme-vivabravo .start-view .login-txt {
  color: #fff;
}
.theme-light.theme-vivabravo .reset-pwd-view {
  background: #111213;
  --title-color: #fff;
}
.theme-light.theme-vivabravo .reset-pwd-view input {
  color: #fff;
}
.theme-light.theme-vivabravo .reset-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-vivabravo .forgot-pwd-view {
  --title-color: #fff;
  --gray-l-2: #fff;
  --gray-l-1: #9aa4ae;
  --detail-color: #FFF;
  background: #111213;
  --back-btn-color: #fff;
}
.theme-light.theme-vivabravo .forgot-pwd-view .email-row {
  color: #fff;
}
.theme-light.theme-vivabravo .forgot-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-vivabravo .blank-layout .theme-header {
  --bg-color: #111213;
  --back-btn-color: #fff;
}
.theme-light.theme-vivabravo .auth-ctgy {
  --bg-color: #111213;
  --back-btn-color: #fff;
  --detail-color: #FFF;
}
.theme-light.theme-vivabravo .auth-ctgy .auth-layout {
  color: #FFF !important;
}
.theme-light.theme-vivabravo .auth-ctgy .auth-layout .title-text {
  color: #fff;
}
.theme-light.theme-vivabravo .auth-ctgy label {
  color: #fff !important;
}

.theme-light.theme-cis .register-view .label-image embed {
  height: 20px;
}
.theme-light.theme-cis .register-common {
  background: #0E1332;
  --back-btn-color: #fff;
  --title-color: #fff;
  --detail-color: #fff;
}
.theme-light.theme-cis .register-common .status-text {
  color: #fff;
}
.theme-light.theme-cis .start-view {
  --bg-color: #0E1332;
}
.theme-light.theme-cis .start-view .label-image embed {
  max-height: 80px;
}
.theme-light.theme-cis .start-view .sub-text,
.theme-light.theme-cis .start-view .login-txt {
  color: #fff;
}
.theme-light.theme-cis .reset-pwd-view {
  background: #0E1332;
  --title-color: #fff;
}
.theme-light.theme-cis .reset-pwd-view input {
  color: #fff;
}
.theme-light.theme-cis .reset-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-cis .forgot-pwd-view {
  --title-color: #fff;
  --gray-l-2: #fff;
  --gray-l-1: #9aa4ae;
  --detail-color: #FFF;
  background: #0E1332;
  --back-btn-color: #fff;
}
.theme-light.theme-cis .forgot-pwd-view .email-row {
  color: #fff;
}
.theme-light.theme-cis .forgot-pwd-view label {
  color: #fff !important;
}
.theme-light.theme-cis .blank-layout .theme-header {
  --bg-color: #0E1332;
  --back-btn-color: #fff;
}
.theme-light.theme-cis .auth-ctgy {
  --bg-color: #0E1332;
  --back-btn-color: #fff;
  --detail-color: #FFF;
}
.theme-light.theme-cis .auth-ctgy .label-image embed {
  max-height: 80px;
}
.theme-light.theme-cis .auth-ctgy .auth-layout {
  color: #FFF !important;
}
.theme-light.theme-cis .auth-ctgy .auth-layout .title-text {
  color: #fff;
}
.theme-light.theme-cis .auth-ctgy label {
  color: #fff !important;
}

.common-header {
  z-index: 4;
  position: sticky;
  top: 0;
  background: var(--bg-color);
}
.common-header > .nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 68px;
  padding: 17px 20px;
}
.common-header > .nav-row svg {
  color: var(--back-btn-color);
}
.common-header.detail-header-comp {
  background: transparent;
}
.common-header.detail-header-comp .menu-col {
  display: flex;
  align-items: center;
  width: 24px;
}
.common-header.detail-header-comp .header-right {
  width: 0;
}
.common-header img {
  width: 34px;
}
.common-header .header-right {
  width: 34px;
}
.common-header .name-area {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.common-header .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 700;
  font-size: 17px;
  line-height: 26px;
}
.common-header .name-image {
  width: 34px;
  height: 34px;
  border-radius: 34px;
}
.common-header .back-button {
  flex-shrink: 0;
  cursor: pointer;
}
.common-header .menu-button {
  width: 24px;
  cursor: pointer;
}

.blank-layout {
  position: relative;
  min-height: calc(var(--vh) * 100);
  background-color: var(--bg-blank-color);
}
.blank-layout > .header-row {
  position: absolute;
}
.blank-layout .top-back {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
}
.blank-layout .blank-layout-footer {
  z-index: 10;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 568px;
  min-width: 360px;
}
.blank-layout + .common-footer {
  background: var(--bg-blank-color);
}

.auth-layout {
  display: flex;
  flex-direction: column;
  height: calc(var(--vh) * 100);
  padding: 0 20px;
}
.auth-layout .logo-row svg {
  max-height: 50px;
}
.auth-layout .title-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  align-items: center;
  margin-top: 37px;
  margin-bottom: 30px;
}
.auth-layout .title-text {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: var(--title-color);
}

.home-layout-header {
  background: var(--bg-home-color);
}
.home-layout-header .title-section {
  overflow: hidden;
  z-index: 1;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 11px 20px;
  background: var(--bg-home-color);
  max-width: 568px;
}
.home-layout-header .tab-list {
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-layout-header .title-right {
  display: flex;
  align-items: center;
  color: var(--color-search);
}
.home-layout-header .tab-item {
  color: var(--typo-placeholder);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  cursor: pointer;
}
.home-layout-header .tab-item.selected {
  font-weight: 600;
  background: var(--primary-gradient-1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-layout-header .title-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-layout-header .title-area img {
  height: 26px;
}
.home-layout-header .layout-title {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  background: linear-gradient(272.51deg, #19ACB7 14.07%, #23CAB5 102.74%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-layout-footer {
  position: relative;
  background: var(--home-footer-bg);
  box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 10px 10px 0 0;
  padding-bottom: 8px;
}
.home-layout-footer .tab-list {
  display: flex;
  justify-content: space-around;
}
.home-layout-footer .tab-item {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--gray-5);
  padding-top: 10px;
  cursor: pointer;
}
.home-layout-footer .tab-selected {
  color: var(--primary-color);
}
.home-layout-footer .tab-selected:before {
  content: " ";
  position: absolute;
  top: 0;
  background: var(--primary-color);
  border-radius: 20px;
  width: 36px;
  height: 2px;
}
.home-layout-footer .tab-selected .search-svg {
  fill: var(--color-white);
  color: var(--primary-color);
}
.home-layout-footer .tab-selected .search-svg circle {
  stroke: var(--primary-color);
}
.home-layout-footer .tab-selected .search-svg path {
  stroke: var(--primary-color);
}
.home-layout-footer .tab-selected .search-svg rect {
  stroke: var(--primary-color);
}
.home-layout-footer .tab-selected .coupon-svg {
  fill: var(--primary-color);
  color: var(--color-white);
}
.home-layout-footer .tab-selected .coupon-svg rect {
  stroke: var(--primary-color);
}
.home-layout-footer .tab-selected .profile-svg {
  color: var(--color-white);
  fill: var(--primary-color);
}
.home-layout-footer .tab-selected .profile-svg .border {
  stroke: var(--primary-color);
}
.home-layout-footer .tab-name {
  font-weight: 400;
  font-size: 11px;
  line-height: 20px;
}
.home-layout-footer .scan-button {
  position: absolute;
  top: -13px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: linear-gradient(152.59deg, #4ceaca 5.37%, #00cfa5 73.18%);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12), inset 0px 1px 2px rgba(255, 255, 255, 0.8);
}
.home-layout-footer .scan-tab {
  position: relative;
  padding-top: 40px;
}
.home-layout-footer .toggle-area {
  position: absolute;
  top: -73px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.home-layout-footer .toggle-button {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  border-radius: 100px;
  width: initial;
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  padding: 9px 12px;
}

.home-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--vh) * 100);
}
.home-layout .home-layout-header-row {
  z-index: 10;
  width: 100%;
  max-width: 568px;
  min-width: 360px;
}
.home-layout section {
  flex-grow: 1;
}
.home-layout .filter-section {
  z-index: 10;
  position: sticky;
  top: 0;
}
.home-layout .filter-section > .filters-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-home-color);
  padding: 16px 20px;
}
.home-layout footer {
  z-index: 9;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 568px;
  min-width: 360px;
}

.common-header {
  z-index: 4;
  position: sticky;
  top: 0;
  background: var(--bg-color);
}
.common-header > .nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 68px;
  padding: 17px 20px;
}
.common-header > .nav-row svg {
  color: var(--back-btn-color);
}
.common-header.detail-header-comp {
  background: transparent;
}
.common-header.detail-header-comp .menu-col {
  display: flex;
  align-items: center;
  width: 24px;
}
.common-header.detail-header-comp .header-right {
  width: 0;
}
.common-header img {
  width: 34px;
}
.common-header .header-right {
  width: 34px;
}
.common-header .name-area {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.common-header .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 700;
  font-size: 17px;
  line-height: 26px;
}
.common-header .name-image {
  width: 34px;
  height: 34px;
  border-radius: 34px;
}
.common-header .back-button {
  flex-shrink: 0;
  cursor: pointer;
}
.common-header .menu-button {
  width: 24px;
  cursor: pointer;
}

.qr-scan-header {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 13px 20px;
}
.qr-scan-header .exit-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-white);
  border-radius: 32px;
  background: rgba(102, 102, 102, 0.6);
  cursor: pointer;
}
.qr-scan-header .exit-button svg {
  width: 20px;
  height: 20px;
}
.qr-scan-header .profile-button {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  width: initial;
  border-radius: 100px;
  background: var(--color-black);
  color: var(--primary-color);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  padding: 11px 16px;
  cursor: pointer;
}
.qr-scan-header .profile-button img {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.qr-scan-header .sub-button {
  width: initial;
}

.float-view {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: 568px;
  min-width: 360px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
  transform: translateX(-50%);
}

.discover-layout {
  background: var(--bg-home-color);
}
.discover-layout .nft-type-filter-comp .tab-list {
  gap: 20px;
}
.discover-layout .filter-section {
  background: var(--bg-home-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.discover-layout .type-filter {
  padding-top: 14px;
}

.home-view {
  position: relative;
  min-height: calc(var(--vh) * 100);
  background: var(--bg-home-color);
}
.home-view .list-section {
  padding: 6px 20px 40px 20px;
}

.nft-type-filter-comp .tab-list {
  display: flex;
  gap: 7px;
  overflow-x: scroll;
}

.nft-sort-filter-comp .filter-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: var(--gray-0);
  cursor: pointer;
}
.nft-sort-filter-comp .filter-area {
  padding: 20px;
}
.nft-sort-filter-comp .group-name {
  color: var(--typo-mute);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  padding: 8px 0;
}
.nft-sort-filter-comp .button-row {
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 0 20px 0;
}
.nft-sort-filter-comp .filter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
}

.nft-list-comp {
  display: flex;
  justify-content: center;
}
.nft-list-comp .list-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nft-list-comp .list-action {
  animation: list-appear 1s;
}
.nft-list-comp .empty-row {
  padding-top: 44px;
}

.cltn-list-comp {
  display: flex;
  justify-content: center;
}
.cltn-list-comp .list-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cltn-list-comp .list-area:first-child {
  margin-top: 10px;
}
.cltn-list-comp .list-area:last-child {
  margin-bottom: 90px;
}
.cltn-list-comp .cltn-card-comp {
  cursor: pointer;
}

.qr-scan-view {
  position: relative;
  height: calc(var(--vh) * 100);
  background: var(--color-black);
  touch-action: pan-x;
}
.qr-scan-view .qr-suggest {
  position: absolute;
  bottom: 100px;
  color: var(--color-white);
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.list-empty-comp {
  display: flex;
  gap: 16px;
  flex-direction: column;
  align-items: center;
}
.list-empty-comp .empty-text {
  color: var(--typo-body);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  white-space: pre-line;
}
.list-empty-comp .move-btn {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  border-radius: 10px;
  background: var(--primary-gradient-1);
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 16px;
}

.rsvp-view {
  padding: 48px 20px;
}
.rsvp-view .main-txt {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.rsvp-view .sub-txt {
  color: var(--typo-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
.rsvp-view .date-txt {
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.rsvp-view .op-row {
  margin-top: 60px;
}
.rsvp-view .op-row.op-row-disabled {
  pointer-events: none;
}

.seat-select-view .footer-row {
  z-index: 2;
  position: sticky;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}
.seat-select-view .selected-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px;
  background-color: #4A4A4A;
  border-radius: 10px;
  margin-bottom: 8px;
  color: var(--color-white);
}
.seat-select-view .selected-list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.seat-select-view .selected-title {
  font-size: 14px;
  font-weight: 600;
}
.seat-select-view .default-btn {
  min-width: 60px;
}
.seat-select-view .default-btn button {
  padding: 5px;
}

.block-email-view {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.block-email-view .header {
  display: flex;
  justify-content: center;
}
.block-email-view .text-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}
.block-email-view .text-area img {
  width: 200px;
}

.start-view {
  display: flex;
  flex-direction: column;
  padding: 0 20px 24px 20px;
  height: calc(var(--vh) * 100);
  background: var(--bg-color);
}
.start-view .title-section {
  padding-top: 70px;
  margin-bottom: 72px;
}
.start-view .title-section .label-image img {
  width: 250px;
}
.start-view .login-txt {
  color: var(--detail-color);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  margin-top: 20px;
}
.start-view .start-text {
  font-weight: 600;
  font-size: 24px;
  line-height: 34px;
  background: linear-gradient(90deg, #B8BFC3 0%, #02A5AA 94.1%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.start-view .divider-area {
  padding: 20px 0 14px 0;
}
.start-view .sub-text {
  display: flex;
  justify-content: center;
  gap: 11px;
  color: var(--detail-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.start-view .sub-text a {
  color: var(--primary-color);
}
.start-view .logo-section {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.login-view {
  background: var(--bg-color);
}
.login-view form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.login-view .title-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  align-items: center;
  margin-top: 70px;
  margin-bottom: 30px;
}
.login-view .title-text {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: var(--title-color);
}
.login-view .check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-view .check-row .forgot-text {
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.login-view .input-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.login-view .sub-text {
  display: flex;
  justify-content: center;
  gap: 11px;
  color: var(--detail-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.login-view .sub-text a {
  color: var(--primary-color);
}
.login-view footer {
  margin-top: auto;
}

.register-view {
  background: var(--bg-color);
  position: relative;
  padding-bottom: 30px;
}
.register-view .title-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.register-view .title-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.register-view .input-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.register-view .check-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.register-view footer {
  bottom: 20px;
  width: 100%;
  margin-top: 22px;
  margin-bottom: 20px;
}

.terms-common {
  color: var(--detail-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  overflow-y: scroll;
  overflow-x: scroll;
}
.terms-common .terms-title {
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}
.terms-common .terms-sub-title {
  color: var(--title-color);
  font-weight: 700;
}
.terms-common .terms-content {
  white-space: pre-wrap;
  font-family: Pretendard;
}

.register-email-wait-view .image-area {
  position: relative;
  margin-bottom: 50px;
}
.register-email-wait-view .image-area img {
  width: 120px;
}
.register-email-wait-view .back-deco {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 77px;
  height: 28px;
  background: #3BA8FF;
  filter: blur(20px);
  transform: rotate(-13.11deg);
}
.register-email-wait-view .status-text {
  color: var(--color-black-2);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
}

.wallet-config-pw-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wallet-config-pw-view .config-title {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  margin-top: 88px;
  margin-bottom: 40px;
}
.wallet-config-pw-view .confirm-title {
  margin-top: 57px;
  margin-bottom: 48px;
}
.wallet-config-pw-view .sub-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 32px;
}

.register-common .content-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register-common .main-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  margin-bottom: 40px;
}
.register-common .process-area {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}

.register-email-expired-view .main-text {
  margin-bottom: 30px;
}
.register-email-expired-view .mv-button {
  width: 100%;
  padding: 10px;
}

.register-success-view .lottie-area {
  margin-top: 98px;
  margin-bottom: 30px;
}
.register-success-view .footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 43px;
}

.register-external-view .main-text {
  margin-bottom: 27px;
}
.register-external-view .process-area {
  margin-bottom: 51px;
}
.register-external-view .check-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 10px;
}
.register-external-view form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  height: 100%;
}
.register-external-view .mv-button {
  width: 100%;
  margin-top: auto;
  margin-bottom: 20px;
}

.forgot-pwd-view .sub-text {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  margin-bottom: 24px;
  white-space: pre-line;
}
.forgot-pwd-view .back-button {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  margin-top: 17px;
}
.forgot-pwd-view .confirm-area .main-text {
  margin-bottom: 20px;
}
.forgot-pwd-view .icon-row {
  display: flex;
  justify-content: center;
}
.forgot-pwd-view .icon-area {
  position: relative;
  margin-bottom: 30px;
}
.forgot-pwd-view .icon-area:before {
  position: absolute;
  bottom: 20px;
  right: 0;
  content: " ";
  width: 77px;
  height: 28px;
  background: #3BA8FF;
  filter: blur(20px);
  transform: rotate(-13.11deg);
}
.forgot-pwd-view .email-icon {
  width: 100px;
  height: 100px;
}
.forgot-pwd-view .email-row {
  color: var(--color-black-2);
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}
.forgot-pwd-view .email-row span {
  color: var(--primary-color);
}

.reset-pwd-view .image-row {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
}
.reset-pwd-view .icon-image {
  width: 70.5px;
  height: 80px;
}
.reset-pwd-view .input-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.two-step-verify-view-comp {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: 568px;
  min-width: 360px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
  transform: translateX(-50%);
}
.two-step-verify-view-comp .auth-layout {
  background: var(--color-white);
}
.two-step-verify-view-comp .explain-text {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  margin-bottom: 40px;
}
.two-step-verify-view-comp .input-row {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.two-step-verify-view-comp .resend-text {
  color: #333333;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}
.two-step-verify-view-comp .resend-text span {
  color: var(--primary-color);
}
.two-step-verify-view-comp .button-row {
  margin-top: 40px;
  margin-bottom: 20px;
}

.wallet-pwd-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  min-height: 200px;
}
.wallet-pwd-comp .title-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}

.register-config-view .footer {
  z-index: 2;
  position: fixed;
  width: 100%;
  max-width: 568px;
  box-sizing: border-box;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}

.adult-identify-view {
  padding: 20px;
}
.adult-identify-view .mark-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 38px 0;
}
.adult-identify-view .main-txt {
  color: var(--typo-black);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.adult-identify-view .desc-txt {
  color: var(--typo-body);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  white-space: pre-line;
}
.adult-identify-view .btn-row {
  padding: 24px 0;
}

.detail-common {
  padding-bottom: 20px;
}
.detail-common header {
  z-index: 3;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
}
.detail-common .detail-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}
.detail-common .card-section {
  z-index: 2;
}
.detail-common .history-section {
  position: relative;
  margin-top: 12px;
}
.detail-common .history-section .refresh-button {
  position: absolute;
  top: 9px;
  right: -70px;
  cursor: pointer;
}
.detail-common .history-section-open {
  position: relative;
  top: -35px;
}
.detail-common .history-section-list-open {
  position: relative;
  top: -60px;
}
.detail-common .card-close {
  animation: history-slide-up 0.5s;
}
.detail-common .coupon-list-section {
  margin-top: 28px;
}
.detail-common .coupon-list-section .name-row {
  display: flex;
  justify-content: space-between;
}
.detail-common .coupon-list-section .list-name {
  color: var(--title-color);
  font-weight: 700;
  font-size: 20px;
  text-align: left;
  line-height: 30px;
  margin-bottom: 12px;
}

.nft-history-comp .toggle-button {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.nft-history-comp .open-button {
  background: var(--color-black);
  border-radius: 100px;
  color: var(--color-white);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  padding: 9px 20px;
}
.nft-history-comp .close-button {
  gap: 4px;
  color: var(--title-color);
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
}
.nft-history-comp .close-button svg {
  transform: rotateZ(180deg);
}

.nft-list-carousel {
  max-width: 100vw;
}
@media screen and (min-width: 568px) {
  .nft-list-carousel {
    max-width: 568px;
  }
}
.nft-list-carousel .slide-item {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.nft-list-carousel swiper-container {
  z-index: 2;
}
.nft-list-carousel swiper-slide {
  transition: 0.2s;
}
.nft-list-carousel .swiper-slide-prev {
  pointer-events: none;
  transform: scale(0.9);
  filter: opacity(0.5);
}
.nft-list-carousel .swiper-slide-next {
  pointer-events: none;
  transform: scale(0.9);
  filter: opacity(0.5);
}
.nft-list-carousel .pagination-area {
  z-index: 0;
  display: flex;
  justify-content: center;
  max-width: 100%;
  padding: 0 20px;
}

.nft-locked-detail-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(var(--vh) * 100);
}
.nft-locked-detail-view header {
  width: 100%;
}
.nft-locked-detail-view .slider-section {
  width: 280px;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 24px;
}

.nft-passcode-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 20px 20px;
}
.nft-passcode-comp .title-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 8px;
}
.nft-passcode-comp .sub-text {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 46px;
}
.nft-passcode-comp .mv-button {
  margin-top: 39px;
}

.coupon-detail-view {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 568px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
.coupon-detail-view .close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
  border-radius: 44px;
  margin-top: 44px;
  cursor: pointer;
}

.coupon-list-comp {
  min-width: 320px;
}
.coupon-list-comp .list-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.coupon-list-comp .loading-row {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.coupon-list-comp .list-empty-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon-list-comp .list-empty-row img {
  height: 160px;
}
.coupon-list-comp .list-item {
  animation: list-appear 1s;
}
.coupon-list-comp.coupon-list-comp__disabled {
  pointer-events: none;
}
.coupon-list-comp .coupon-ticket-comp {
  cursor: pointer;
}

.coupon-ticket-comp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-white);
  width: 296px;
  height: 116px;
  background: transparent;
  background-image: url(data:image/png;base64,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);
  background-repeat: no-repeat;
  background-size: cover; /* This will scale the background image to be as large as possible */
  background-position: center; /* This will center the background image */
  padding: 26px;
}
.coupon-ticket-comp .coupon-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #dde4eb;
  -o-object-fit: cover;
     object-fit: cover;
}
.coupon-ticket-comp .text-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  min-width: 0;
}
.coupon-ticket-comp .offer-name {
  color: var(--color-black);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  min-height: 14px;
  line-height: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.coupon-ticket-comp .desc-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  color: var(--title-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  margin-top: 4px;
  margin-bottom: 8px;
  min-height: 18px;
  letter-spacing: -0.32px;
}
.coupon-ticket-comp .valid-date {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 10px;
  line-height: 22px;
  margin-top: auto;
}
.coupon-ticket-comp .active-txt {
  color: var(--primary-color);
}
.coupon-ticket-comp .tag-area {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/img/tag_area.1e2173f6.svg);
  width: 65.22px;
  height: 65.46px;
}
.coupon-ticket-comp .tag-area .tag-name {
  color: var(--color-white);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  transform: rotate(-45deg) translateY(-15px);
}
.coupon-ticket-comp .ex-mark {
  position: absolute;
  top: 4px;
  right: 9px;
  width: 37px;
  height: 21px;
}
.coupon-ticket-comp .tag-section {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.coupon-ticket-comp .tag-text-area {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 49px;
  height: 46px;
}
.coupon-ticket-comp .tag-name {
  color: #FFF;
  font-family: Pretendard;
  font-size: 10px;
  font-weight: 500;
  line-height: 10px;
  transform: rotate(-45deg) translateY(-6px);
}

.coupon-disabled {
  filter: grayscale(1);
  background-image: url(data:image/png;base64,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);
}

.coupon-list-view {
  padding-bottom: 100px;
}
.coupon-list-view .coupon-list-header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}
.coupon-list-view .toggle-area {
  display: flex;
  align-items: center;
  gap: 7px;
}
.coupon-list-view .header-title {
  font-family: "Pretendard";
  font-weight: 700;
  font-size: 24px;
  line-height: 26px;
  background: linear-gradient(272.51deg, #19ACB7 14.07%, #23CAB5 102.74%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.coupon-list-view .list-section {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.coupon-list-view .list-section .list-name {
  display: none;
}

.coupon-history-slide-comp {
  padding: 24px;
  min-height: 550px;
}
.coupon-history-slide-comp .coupon-history-slide-title-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.coupon-history-slide-comp .coupon-history-slide-title-section .close-btn {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
}
.coupon-history-slide-comp .coupon-history-slide-count-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  padding: 0 20px;
  margin-bottom: 24px;
}
.coupon-history-slide-comp .coupon-history-slide-count-section .count-item {
  min-width: 90px;
}
.coupon-history-slide-comp .coupon-history-slide-count-section .count-item .item-title {
  text-align: center;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(75, 70, 92, 0.8);
}
.coupon-history-slide-comp .coupon-history-slide-count-section .count-item .item-number {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: rgba(75, 70, 92, 0.8);
  width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coupon-history-slide-comp .coupon-history-slide-count-section .count-item .can-use {
  color: var(--primary-color);
}
.coupon-history-slide-comp .coupon-history-slide-count-section .column-divider {
  border-left: 1px solid rgba(75, 70, 92, 0.05);
  border-right: 1px solid rgba(75, 70, 92, 0.05);
}
.coupon-history-slide-comp .coupon-history-slide-list-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item {
  display: flex;
  gap: 8px;
  height: 100px;
  overflow-y: scroll;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .image-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border-radius: 14px;
  background: #f6f6f7;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .image-area .image-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: red;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .list-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .list-title .list-title-name {
  line-height: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #5d596c;
  display: flex;
  gap: 8px;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .list-title .list-title-name .coupon-history-name {
  flex: 1;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .list-title .list-contents {
  line-height: 12px;
  font-size: 12px;
  color: #a5a2ad;
}
.coupon-history-slide-comp .coupon-history-slide-list-section .list-item .list-title .list-contents .contents-location {
  width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coupon-history-slide-comp .coupon-history-slide-no-data-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.coupon-history-slide-comp .coupon-history-slide-no-data-section .no-data-text {
  font-size: 14px;
  font-weight: 500;
  color: #a5a2ad;
}

.coupon-list-modal .list-area {
  display: flex;
  gap: 8px;
  flex-direction: column;
  min-height: 100px;
  max-height: 500px;
  overflow-y: auto;
  padding-bottom: 88px;
}
.coupon-list-modal .coupon-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px;
}
.coupon-list-modal .coupon-row .title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-heading);
  font-size: 14px;
  text-align: left;
  font-weight: 600;
  line-height: 16px;
  margin-bottom: 4px;
}
.coupon-list-modal .coupon-image {
  width: 50px;
  height: 50px;
  border: 1px solid var(--secondary-3);
  border-radius: 50px;
}
.coupon-list-modal .sub-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-mute);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.coupon-list-modal .used-coupon .coupon-image {
  filter: grayscale(1);
}

.my-profile-view {
  min-height: 100vh;
  background: var(--bg-home-color);
  padding: 0 20px 20px 20px;
}
.my-profile-view .profile-qr-comp .qr-image-area {
  width: 160px;
  height: 160px;
}
.my-profile-view .profile-qr-comp .qr-image-area img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  border: 2px solid var(--primary-3);
}
.my-profile-view .profile-qr-comp .qr-text {
  color: var(--typo-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background: transparent;
  padding: 8px 0;
}
.my-profile-view .section-box {
  border-radius: 10px;
  background: var(--gray-0, #FFF);
  padding: 16px;
}
.my-profile-view .profile-header {
  z-index: 2;
  position: sticky;
  top: 0;
  display: flex;
  background: var(--bg-home-color);
  padding: 16px 0;
  margin-bottom: 8px;
}
.my-profile-view .title-text {
  background: linear-gradient(90deg, #18ABB7 0%, #23CAB5 90.91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 24px;
  line-height: 26px;
}
.my-profile-view .profile-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-1, #F6F6F7);
}
.my-profile-view .profile-image-delete-btn {
  cursor: pointer;
  text-align: center;
}
.my-profile-view .profile-detail {
  align-self: flex-end;
  margin-left: 20px;
  min-width: 0;
}
.my-profile-view .profile-detail .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}
.my-profile-view .profile-detail .sub-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.my-profile-view .profile-detail .sub-text img {
  vertical-align: bottom;
  width: 20px;
}
.my-profile-view .edit-button {
  align-self: flex-start;
  flex-shrink: 0;
  width: initial;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid #000000;
  border-radius: 10px;
  padding: 8px 16px;
  margin-left: auto;
  cursor: pointer;
}
.my-profile-view .invite-row {
  margin-bottom: 24px;
}
.my-profile-view .invite-row .invite-button {
  border-radius: 10px;
  background: linear-gradient(90deg, #20D0B8 10.18%, #3BC7F8 107.73%);
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  padding: 20px 0;
  cursor: pointer;
}
.my-profile-view .config-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--typo-black);
}
.my-profile-view .config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}
.my-profile-view .logout-button {
  width: 100%;
  color: var(--typo-black);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  padding-left: 20px;
  text-align: center;
  cursor: pointer;
}

.profile-image-comp {
  position: relative;
}
.profile-image-comp .profile-image {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.profile-image-comp .default-profile-image {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #dde4eb;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background: #f1f1f2;
  font-weight: 500;
}
.profile-image-comp .edit-icon-area {
  position: absolute;
  bottom: 0;
  right: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 20px;
  background: var(--color-white);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
}
.profile-image-comp input {
  width: 0;
  height: 0;
}

.profile-image-delete-btn {
  font-size: 10px;
  font-weight: 400;
  color: rgba(75, 70, 92, 0.6);
  padding-top: 6px;
  text-decoration: underline;
}

.edit-profile-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.edit-profile-view .tab-list {
  display: flex;
}
.edit-profile-view .tab-item {
  width: 100%;
  border-bottom: 2px solid rgba(113, 123, 133, 0.8);
  color: rgba(113, 123, 133, 0.8);
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}
.edit-profile-view .tab-selected {
  color: var(--color-black-2);
  border-color: var(--color-black-2);
}
.edit-profile-view .edit-area {
  padding-top: 25px;
}

.edit-profile-info-comp {
  padding: 0 20px;
}
.edit-profile-info-comp .info-area {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.edit-profile-info-comp .edit-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.edit-profile-info-comp .edit-row .mv-input {
  flex-grow: 1;
}
.edit-profile-info-comp .edit-row .mv-button {
  width: initial;
  min-width: 70px;
}
.edit-profile-info-comp .button-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.edit-profile-info-comp .withdraw-btn {
  font-size: 12px;
  text-align: right;
  color: var(--gray-5);
  padding-top: 24px;
  cursor: pointer;
}

.edit-password-comp .edit-form {
  display: flex;
  flex-direction: column;
}
.edit-password-comp .input-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 20px;
}
.edit-password-comp .edit-password-footer {
  margin-top: auto;
}
.edit-password-comp .button-row {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
}

.profile-qr-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-qr-comp .qr-image-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background: #13D6AF;
  border-radius: 30px;
}
.profile-qr-comp .qr-image-area img {
  border-radius: 24px;
}
.profile-qr-comp .qr-text {
  color: #13B191;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  background: rgba(19, 214, 175, 0.1);
  border-radius: 100px;
  padding: 4px 12px;
}
.profile-qr-comp .action-list {
  display: flex;
  justify-content: space-around;
  width: 230px;
}
.profile-qr-comp .action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.profile-qr-comp .action-item img {
  width: 24px;
}

.change-auth-pwd-view .modify-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
  animation: appear 1s both;
}
.change-auth-pwd-view .config-title {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 40px;
  text-align: center;
}
.change-auth-pwd-view .sub-row {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-decoration-line: underline;
  margin-top: 40px;
}

.two-step-auth-view {
  padding: 0 20px;
}
.two-step-auth-view .toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.two-step-auth-view .title-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
}
.two-step-auth-view .explain-text {
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
  word-break: keep-all;
}
.two-step-auth-view .explain-text span {
  color: var(--primary-color);
}
.two-step-auth-view .pwd-area {
  padding-top: 100px;
}

.two-step-verify-comp {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.two-step-verify-comp .explain-text {
  margin-bottom: 25px;
}
.two-step-verify-comp .input-area {
  margin-bottom: 40px;
}
.two-step-verify-comp .button-row {
  width: 272px;
  margin-bottom: 17px;
}
.two-step-verify-comp .button-row button {
  padding: 10px 0;
}
.two-step-verify-comp .resend-text {
  color: #333333;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}
.two-step-verify-comp .resend-text span {
  color: var(--primary-color);
}

.my-profile-qr-view {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: 568px;
  min-width: 360px;
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
  transform: translateX(-50%);
  background: var(--bg-home-color);
}
.my-profile-qr-view .action-row {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}
.my-profile-qr-view .action-list {
  display: flex;
  justify-content: space-around;
  width: 230px;
}
.my-profile-qr-view .action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gray-l-2);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.my-profile-qr-view .action-item img {
  width: 24px;
}
.my-profile-qr-view .profile-row {
  margin-top: 12px;
  margin-bottom: 20px;
}
.my-profile-qr-view .profile-row .image-area img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.16);
}
.my-profile-qr-view .profile-row .default-profile-image {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #dde4eb;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #f1f1f2;
  font-weight: 500;
}
.my-profile-qr-view .qr-row {
  padding: 0 20px;
  margin-bottom: 24px;
}
.my-profile-qr-view .qr-image-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  background: #13d6af;
  border-radius: 30px;
  padding: 64px 49px 67px 49px;
  margin: 0 auto;
}
.my-profile-qr-view .qr-image-area img {
  width: 100%;
  border-radius: 24px;
  margin-bottom: 17px;
}
.my-profile-qr-view .qr-name {
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
}

.change-language-comp .change-language-title-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
.change-language-comp .change-language-title-section .title-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(75, 70, 92, 0.9);
}
.change-language-comp .change-language-contents-section {
  padding: 16px 20px;
  margin-bottom: 40px;
}
.change-language-comp .change-language-contents-section .change-language-item .change-language-item-title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 16px;
  color: rgba(75, 70, 92, 0.5);
}
.change-language-comp .change-language-contents-section .change-language-item .change-language-item_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.change-language-comp .change-language-contents-section .change-language-item .change-language-item_box .change-language-item_text {
  font-size: 16px;
  font-weight: 5600;
  margin-bottom: 8px;
  color: rgba(75, 70, 92, 0.9);
}
.change-language-comp .change-language-contents-section .change-language-item .change-language-item_box .change-language-item_box_lang {
  font-size: 12px;
  font-weight: 400;
  color: rgba(75, 70, 92, 0.9);
}
.change-language-comp .change-language-footer-section {
  position: fixed;
  width: 100%;
  max-width: 568px;
  bottom: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 20px 20px;
  background: var(--color-white);
}
.change-language-comp .change-language-footer-section .change-language-footer-item {
  width: 100%;
  height: 52px;
  border-radius: 100px;
  border: 1px solid #111111;
  display: flex;
  justify-content: center;
  align-items: center;
}
.change-language-comp .change-language-footer-section .confirm {
  border: 1px solid black;
  background-color: black;
  color: white;
  cursor: pointer;
}
.change-language-comp .change-language-footer-section .disabled {
  border: 1px solid rgba(75, 70, 92, 0.1);
  background-color: rgba(75, 70, 92, 0.7);
  color: white;
  pointer-events: none;
}
.change-language-comp .mb-32 {
  margin-bottom: 32px;
}

.delete-profile-img-comp {
  height: 380px;
  padding: 24px;
}
.delete-profile-img-comp .delete-profile-img-title-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.delete-profile-img-comp .delete-profile-img-title-section .delete-profile-img {
  width: 24px;
  height: 24px;
}
.delete-profile-img-comp .delete-profile-img-title-section .delete-profile-img img {
  width: 100%;
  height: 100%;
}
.delete-profile-img-comp .delete-profile-img-contents-section {
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(75, 70, 92, 0.9);
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.delete-profile-img-comp .delete-profile-img-footer-section {
  margin-top: 48px;
}
.delete-profile-img-comp .delete-profile-img-footer-section .delete-profile-img-footer-item {
  width: 100%;
  border-radius: 10px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete-profile-img-comp .delete-profile-img-footer-section .delete-btn {
  background-color: #ff7474;
  color: #ffffff;
  margin-bottom: 8px;
}
.delete-profile-img-comp .delete-profile-img-footer-section .disabled {
  background-color: rgba(255, 116, 116, 0.1);
  pointer-events: none;
}
.delete-profile-img-comp .delete-profile-img-footer-section .cancel-btn {
  background-color: #dde4eb;
  color: #242745;
}

.my-trst-common .filter-row {
  padding: 8px 20px;
}
.my-trst-common .filter-row .mv-tab-row {
  gap: 8px;
  color: var(--typo-mute);
  background: var(--gray-1);
  padding: 4px 12px;
}
.my-trst-common .filter-row .mv-tab-selected {
  color: var(--color-white);
  background: var(--typo-black);
}
.my-trst-common .filter-row .tab-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.my-trst-common .summary-row {
  padding: 20px;
  background: var(--gray-0);
}
.my-trst-common .total-name {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.my-trst-common .total-value {
  color: var(--typo-black);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

.trst-list-comp {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trst-list-comp .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--typo-mute);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  border-bottom: 1px solid var(--gray-1);
  padding: 8px 20px;
}
.trst-list-comp .trst-item-comp {
  background: var(--gray-0);
}
.trst-list-comp .trst-item-comp .body-row {
  padding: 16px 20px;
}
.trst-list-comp .trst-item-comp .status-row {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 4px;
}
.trst-list-comp .trst-item-comp .status-row.status-row-refunded {
  color: var(--typo-mute);
}
.trst-list-comp .trst-item-comp .info-row {
  display: flex;
  gap: 20px;
  align-items: center;
}
.trst-list-comp .trst-item-comp .card-area {
  flex-shrink: 0;
  width: 46px;
  height: 71px;
}
.trst-list-comp .trst-item-comp .card-area .nft-card-comp {
  position: absolute;
  transform: scale(0.15);
  transform-origin: top left;
  pointer-events: none;
}
.trst-list-comp .trst-item-comp .card-col {
  padding: 0 8px;
  width: 96px;
}
.trst-list-comp .trst-item-comp .card-col > .banner-img {
  width: 96px;
}
.trst-list-comp .trst-item-comp .info-col {
  width: 100%;
  min-width: 0;
}
.trst-list-comp .trst-item-comp .type-row {
  color: var(--puple-5-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.trst-list-comp .trst-item-comp .name-row {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.trst-list-comp .trst-item-comp .sub-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.trst-list-comp .trst-item-comp .price-row {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.trst-list-comp .trst-item-comp .action-row .mv-button button {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  height: 38px;
  padding: 12px 16px;
}

.my-trst-view {
  background: var(--gray-1);
}

.refund-comp .refund-content {
  padding: 16px 20px 160px 20px;
}
.refund-comp .ask-txt {
  color: var(--typo-black);
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}
.refund-comp .card-area {
  position: relative;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  height: 120px;
  padding: 16px 0;
}
.refund-comp .card-area .nft-card-comp {
  position: absolute;
  transform: scale(0.2);
  transform-origin: top center;
  pointer-events: none;
}
.refund-comp .title-txt {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
}
.refund-comp .price-row {
  display: flex;
  justify-content: space-between;
}
.refund-comp .desc-txt {
  color: var(--typo-mute);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.refund-comp .primary-txt {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.refund-comp .price-txt {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
}
.refund-comp .price-danger-txt {
  color: var(--red-5-base);
  font-size: 16px;
  font-weight: 600;
}
.refund-comp .sheet-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fdfdfd;
  max-width: 568px;
  border-top: 1px #e0e0e0 solid;
  max-width: 568px;
  margin-bottom: 5px;
  padding: 16px 20px 48px 20px;
}

.withdraw-comp {
  padding: 20px;
}
.withdraw-comp .btn-row {
  display: flex;
  gap: 8px;
}
.withdraw-comp .header-text {
  color: var(--typo-black);
  font-size: 18px;
  font-weight: 600;
  white-space: pre-line;
}
.withdraw-comp .detail-text {
  color: var(--red-warn);
  font-size: 16px;
  white-space: pre-line;
}
.withdraw-comp .detail-text .mail-text {
  color: var(--typo-black);
  font-weight: 600;
  padding: 10px;
}

.my-order-detail-view {
  background: var(--gray-1);
  padding-bottom: 40px;
}
.my-order-detail-view .order-name {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  word-break: break-word;
}
.my-order-detail-view .main-price-text {
  font-size: 20px;
  font-weight: 600;
}
.my-order-detail-view .fee-text {
  color: var(--typo-body);
  font-size: 12px;
  padding-left: 8px;
}
.my-order-detail-view .sub-title-text {
  font-size: 16px;
  font-weight: 600;
  padding: 16px;
}
.my-order-detail-view .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.my-order-detail-view .summary-row button {
  padding: 8px 20px;
}

.ntfc-view {
  z-index: 100;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nft-ntfc-view {
  z-index: 11;
}
.nft-ntfc-view .slide-content {
  padding: 20px;
}

.alert-popup-view {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh) * 100);
}
.alert-popup-view .alert-back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.receive-nft-comp.send-nft-confirm-comp .content-area {
  padding-top: 80px;
}
.receive-nft-comp.send-nft-confirm-comp .nft-card-row {
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  opacity: 0.2;
}

.send-nft-comp {
  padding: 0 20px 20px 20px;
}
.send-nft-comp .method-list {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.send-nft-comp .method-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 130px;
  border: 1px solid #DDE4EB;
  border-radius: 20px;
  cursor: pointer;
}
.send-nft-comp .method-item img {
  width: 43px;
}
.send-nft-comp .method-item span {
  color: var(--title-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
}
.send-nft-comp .tab-selected {
  border: 2px solid #111111;
}
.send-nft-comp .tab-selected span {
  font-weight: 700;
}

.send-nft-email-comp .image-row {
  display: flex;
  justify-content: center;
}
.send-nft-email-comp .image-area {
  position: relative;
  display: flex;
  justify-content: center;
}
.send-nft-email-comp .image-area img {
  width: 64px;
}
.send-nft-email-comp .image-area:before {
  position: absolute;
  bottom: 5px;
  right: -5px;
  content: " ";
  background: #64BBFF;
  opacity: 0.78;
  filter: blur(15px);
  transform: rotate(-4.58deg);
  width: 44.18px;
  height: 21.09px;
}
.send-nft-email-comp .title-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
}
.send-nft-email-comp .warning-text {
  color: var(--color-danger);
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  margin-top: 6px;
  margin-bottom: 24px;
}

.send-nft-confirm-comp {
  position: relative;
}
.send-nft-confirm-comp .button-row {
  display: flex;
  gap: 12px;
}
.send-nft-confirm-comp .nft-card-comp {
  transform-origin: 0 0;
  transform: scale(0.4) translateX(75%);
}
.send-nft-confirm-comp .nft-card-row {
  display: flex;
  justify-content: center;
  height: 200px;
  margin-bottom: 39px;
}
.send-nft-confirm-comp .text-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--gray-13);
  border-radius: 16px;
  text-align: center;
  padding: 36px 52px;
  white-space: pre-line;
  margin-bottom: 26px;
}
.send-nft-confirm-comp .text-box .text {
  z-index: 3;
  color: var(--title-color);
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  white-space: pre-line;
}
.send-nft-confirm-comp .text-box .text span {
  font-weight: 600;
}
.send-nft-confirm-comp .profile-row {
  z-index: 3;
  position: absolute;
  top: -19px;
}
.send-nft-confirm-comp .profile-row img {
  width: 38px;
  height: 38px;
  border-radius: 38px;
}
.send-nft-confirm-comp .profile-row .default-profile-image {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #DDE4EB;
  width: 38px;
  height: 38px;
  border-radius: 38px;
  background: #F1F1F2;
  font-weight: 500;
}

.send-nft-view .pwd-area {
  padding-top: 53px;
}

.send-nft-result-comp .result-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 47px;
  height: 50vh;
}
.send-nft-result-comp .result-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}

.nft-menu-comp {
  padding: 16px 20px 24px 20px;
}
.nft-menu-comp .menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  cursor: pointer;
}
.nft-menu-comp .menu-item img {
  width: 40px;
  height: 40px;
}
.nft-menu-comp .menu-item:active {
  border-radius: 10px;
  background: rgba(246, 246, 247, 0.8);
}
.nft-menu-comp .menu-item-disabled {
  pointer-events: none;
  filter: grayscale(1);
  color: var(--typo-mute);
}

.sale-reg-nft-comp {
  padding-bottom: 180px;
}
.sale-reg-nft-comp .price-input-row .mv-price-input .input-box {
  padding: 16px 12px;
}
.sale-reg-nft-comp .price-input-row .mv-price-input input {
  font-size: 24px;
}
.sale-reg-nft-comp .price-input-row .mv-price-input .unit {
  font-size: 24px;
}
.sale-reg-nft-comp .price-input-row .input-append {
  right: 12px;
}
.sale-reg-nft-comp .price-input-row .max-btn button {
  white-space: nowrap;
  width: 62px;
  height: 36px;
}
.sale-reg-nft-comp .price-desc {
  color: var(--typo-mute);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.sale-reg-nft-comp .content-area {
  padding: 24px 20px;
}
.sale-reg-nft-comp .period-area {
  position: relative;
  height: 48px;
}
.sale-reg-nft-comp .period-option-list {
  position: absolute;
  left: -20px;
  width: calc(100% + 40px);
  display: flex;
  gap: 8px;
  overflow-x: scroll;
  padding: 0 20px;
}
.sale-reg-nft-comp .period-option {
  flex-shrink: 0;
  min-width: 118px;
  color: var(--typo-mute);
  border-radius: 10px;
  background: var(--gray-1);
  text-align: center;
  padding: 12px 16px;
}
.sale-reg-nft-comp .option-selected {
  color: var(--primary-color);
  background: var(--primary-1);
}
.sale-reg-nft-comp .period-title {
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 16px;
}
.sale-reg-nft-comp .button-area {
  z-index: 2;
  position: fixed;
  width: 100%;
  max-width: 568px;
  box-sizing: border-box;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}
.sale-reg-nft-comp .slider-row {
  display: flex;
  justify-content: center;
}
.sale-reg-nft-comp .slider-row .mv-range-slider {
  width: calc(100% - 36px);
}
.sale-reg-nft-comp .slider-row .mv-range-slider .range-text {
  font-size: 16px;
}
.sale-reg-nft-comp .cal-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 10px;
  background: var(--gray-1);
  padding: 16px 12px;
}
.sale-reg-nft-comp .cal-text-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.sale-reg-nft-comp .cal-title {
  color: var(--typo-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}
.sale-reg-nft-comp .sum-text {
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.sale-reg-nft-comp .cal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sale-reg-nft-comp .cal-list li {
  color: var(--typo-mute);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.sale-reg-nft-comp .date-warn {
  color: var(--typo-mute);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 8px;
}

.nft-result-comp .result-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 47px;
  height: 50vh;
}
.nft-result-comp .result-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
}

.sale-nft-detail-view {
  min-height: calc(var(--vh) * 100);
  background: var(--gray-0);
}
.sale-nft-detail-view .nft-info-row {
  position: relative;
  padding: 16px 20px 16px 20px;
}
.sale-nft-detail-view .nft-card-col {
  top: 0;
}
.sale-nft-detail-view .btn-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.sale-nft-detail-view .btn-row button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 8px 12px;
}

.nft-detail-history-comp .history-content {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 20px;
}
.nft-detail-history-comp .history-info-area {
  display: flex;
  gap: 8px;
  width: 100%;
  background: #f8f7fa;
  padding: 16px 20px;
}
.nft-detail-history-comp .history-info-area .info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nft-detail-history-comp .history-info-area .info-title {
  display: flex;
  gap: 8px;
}
.nft-detail-history-comp .history-info-area .info-title .title-text {
  color: #4b465c;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.nft-detail-history-comp .history-info-area .right-item {
  flex-grow: 1;
}
.nft-detail-history-comp .history-info-area .info-value {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a5a2ad;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
}
.nft-detail-history-comp .history-info-area .info-value img {
  width: 14px;
}

.sale-nft-detail-comp {
  padding: 16px 20px;
  background: var(--gray-1);
}
.sale-nft-detail-comp .col-icon {
  color: var(--typo-black);
}
.sale-nft-detail-comp .modal-row {
  margin-top: 8px;
}
.sale-nft-detail-comp .modal-btn {
  color: var(--typo-Black);
  border-radius: 8px;
  background: var(--gray-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  padding: 12px;
}
.sale-nft-detail-comp .img-btn {
  color: var(--typo-body);
  background: var(--gray-2);
}
.sale-nft-detail-comp .info-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
}
.sale-nft-detail-comp .info-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.sale-nft-detail-comp .sub-col {
  flex-shrink: 0;
  display: flex;
  align-content: center;
  gap: 8px;
}
.sale-nft-detail-comp .col-name {
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.sale-nft-detail-comp .loc-col {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 20px;
}
.sale-nft-detail-comp .loc-col .value-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sale-nft-detail-comp .loc-col svg {
  flex-shrink: 0;
}
.sale-nft-detail-comp .value-col {
  color: var(--secondary-dark-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.sale-nft-detail-comp .map-icon {
  color: var(--primary-color);
  margin-left: 4px;
}
.sale-nft-detail-comp .underline {
  text-decoration-line: underline;
}

.receive-pending-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.receive-pending-view .result-text {
  color: var(--title-color);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  margin-top: 48px;
}

.qtnr-input-comp .view-content,
.nft-qtnr-view .view-content {
  padding: 48px 20px;
}
.qtnr-input-comp .qtnr__title,
.nft-qtnr-view .qtnr__title {
  color: var(--color-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.2px;
  white-space: pre-wrap;
  margin-bottom: 16px;
}
.qtnr-input-comp .qtnr__desc,
.nft-qtnr-view .qtnr__desc {
  overflow: hidden;
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.qtnr-input-comp .input-list,
.nft-qtnr-view .input-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.qtnr-input-comp .terms-title,
.nft-qtnr-view .terms-title {
  color: #111;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 12px;
}
.qtnr-input-comp .terms-content,
.nft-qtnr-view .terms-content {
  white-space: pre-line;
}
.qtnr-input-comp .terms-content strong,
.nft-qtnr-view .terms-content strong {
  font-weight: 600;
}
.qtnr-input-comp .terms-content ol, .qtnr-input-comp .terms-content ul,
.nft-qtnr-view .terms-content ol,
.nft-qtnr-view .terms-content ul {
  padding-left: 20px;
}
.qtnr-input-comp .terms-content ul li,
.nft-qtnr-view .terms-content ul li {
  list-style-type: disc;
}
.qtnr-input-comp .footer-row,
.nft-qtnr-view .footer-row {
  z-index: 2;
  position: sticky;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}

.cltn-detail-view {
  padding-bottom: 50px;
  background: #FFF;
}
.cltn-detail-view .cltn-image-section {
  background: black;
  position: relative;
  height: 270px;
}
.cltn-detail-view .cltn-image-section .banner-img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 270px;
}
.cltn-detail-view .cltn-image-section .back-button {
  position: absolute;
  top: 14px;
  left: 19px;
  transform: rotateZ(90deg);
  mix-blend-mode: difference;
  cursor: pointer;
}
.cltn-detail-view .cltn-image-section .count-tag {
  display: flex;
  gap: 3px;
  background: var(--color-white);
  border-radius: 100px;
  padding: 2px 6px;
  position: absolute;
  right: 16px;
  top: 14px;
}
.cltn-detail-view .cltn-image-section .count-tag .cltn-count {
  color: var(--primary-color);
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.cltn-detail-view .cltn-image-section .share-icon {
  position: absolute;
  bottom: 14px;
  right: 17px;
}
.cltn-detail-view .cltn-profile-section {
  position: relative;
}
.cltn-detail-view .cltn-profile-section .cltn-profile-name {
  padding: 24px 17px 0 22px;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cltn-detail-view .cltn-profile-section .cltn-created-by {
  display: flex;
  align-items: center;
  padding: 3.6px 22px 0 22px;
}
.cltn-detail-view .cltn-profile-section .cltn-created-by .brand-img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 6px;
  margin-right: 3px;
  -o-object-fit: fill;
     object-fit: fill;
}
.cltn-detail-view .cltn-profile-section .cltn-created-by .created-by {
  white-space: nowrap;
}
.cltn-detail-view .cltn-profile-section .cltn-created-by .brand-name {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cltn-detail-view .cltn-profile-section .cltn-description {
  padding: 17.15px 22px 0 22px;
}
.cltn-detail-view .cltn-profile-section .cltn-description .desc-title-text {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
}
.cltn-detail-view .cltn-profile-section .cltn-description .desc-text {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-word;
}
.cltn-detail-view .cltn-profile-section .cltn-description .desc-text-full {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}
.cltn-detail-view .cltn-profile-section .cltn-description .read-more {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #00c4ac;
}
.cltn-detail-view .cltn-profile-section .cltn-map {
  padding: 12px 20px 0 19px;
}
.cltn-detail-view .cltn-profile-section .cltn-map #google-map {
  width: 100%;
  height: 131px;
  border-radius: 14px;
}
.cltn-detail-view .cltn-profile-section .cltn-profile-info-list {
  padding: 25px 22px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 4.81px;
}
.cltn-detail-view .cltn-profile-section .cltn-profile-info-list .cltn-profile-info-list-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cltn-detail-view .cltn-profile-section .cltn-profile-info-list .cltn-profile-info-list-item .list-item-text {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}

.brand-detail-view {
  position: relative;
  min-height: 100vh;
  background: #f2f7f7;
  padding-bottom: 74px;
}
.brand-detail-view .banner-section {
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05));
}
.brand-detail-view .back-button {
  z-index: 1;
  position: absolute;
  top: 14px;
  left: 19px;
  transform: rotateZ(90deg);
  mix-blend-mode: difference;
  cursor: pointer;
}
.brand-detail-view .profile-section {
  display: flex;
  align-items: baseline;
  position: relative;
  padding: 3px 23px 0 95px;
}
.brand-detail-view .profile-section .profile-img {
  position: absolute;
  top: -32px;
  left: 20px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 2;
}
.brand-detail-view .profile-section .profile-name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: -0.02em;
}
.brand-detail-view .section-title-text {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
}
.brand-detail-view .section-text {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  white-space: pre-wrap;
}
.brand-detail-view .more-text {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #00c4ac;
}
.brand-detail-view .brand-desc-section {
  padding: 25px 20px 0 20px;
}
.brand-detail-view .brand-desc-section .brand-desc-text {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}
.brand-detail-view .website-section {
  padding: 26px 20px 0 20px;
}
.brand-detail-view .cltns-list-section {
  padding: 25px 0 0 0;
}
.brand-detail-view .cltns-list-section .view-more-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.brand-detail-view .cltns-list-section .cltn-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.brand-detail-view .cltns-list-section .cltn-list {
  padding-top: 13px;
  display: flex;
  gap: 13px;
  overflow-x: auto;
}
.brand-detail-view .cltns-list-section .cltn-item:first-child {
  padding-left: 20px;
}
.brand-detail-view .cltns-list-section .cltn-item:last-child {
  padding-right: 20px;
}
.brand-detail-view .more-about-section {
  padding-top: 97px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 27px;
}
.brand-detail-view .more-about-section .more-about-text {
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
}
.brand-detail-view .more-about-section .link-icons {
  display: flex;
  gap: 15px;
}
.brand-detail-view .more-about-section .link-icons .icon {
  width: 24px;
  height: 24px;
}

.brand-list-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 17px 20px;
}
.brand-list-header .header-right {
  width: 24px;
}
.brand-list-header .name-area {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.brand-list-header .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 26px;
  color: #333333;
}
.brand-list-header .name-image {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.search-view {
  background-color: transparent;
}

.search-bar-comp {
  border-bottom: 1px solid black;
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 16px 20px;
}
.search-bar-comp .search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.search-bar-comp .search-bar .search-btn-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-bar-comp .search-bar .search-btn-wrapper .search-btn {
  height: -moz-fit-content;
  height: fit-content;
}

.search-hover-comp {
  position: absolute;
  background-color: rgba(75, 70, 92, 0.6784313725) !important;
  width: 100%;
  max-width: 568px;
  height: 100%;
  z-index: 9;
}
.search-hover-comp .search-hover-list {
  background-color: white;
  padding-top: 32px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 32px;
}
.search-hover-comp .search-hover-list .search-hover-title {
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 8px;
  color: rgba(75, 70, 92, 0.5);
}
.search-hover-comp .search-hover-list .search-hover-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  height: 36px;
}
.search-hover-comp .search-hover-list .search-hover-item .search-hover-item-name {
  font-weight: 400;
  line-height: 20px;
  font-size: 16px;
}
.search-hover-comp .search-hover-list .search-hover-item .search-hover-item-type {
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  color: rgba(75, 70, 92, 0.5);
}
.search-hover-comp .search-hover-list .search-hover-item .highlight {
  color: var(--primary-color); /* 강조할 색상 */
}
.search-hover-comp .result-container {
  font-weight: 400;
  line-height: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  width: 250px; /* 고정된 너비 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-recent-result-list-comp .search-recent-result-list__item {
  display: flex;
  align-items: center;
}
.search-recent-result-list-comp .search-recent-result-list__item .search-recent-result-list__item__img img {
  width: 32px;
  height: 32px;
}
.search-recent-result-list-comp .search-recent-result-list__item .search-recent-result-list__item__info {
  flex: 1;
  display: flex;
}
.search-result-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin-block-end: 50px;
}
.search-result-section .search-result-title {
  margin-top: 40px;
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  color: rgba(75, 70, 92, 0.8);
}
.search-result-section .search-result-nav {
  width: 100%;
  height: 36px;
  border-bottom: 2px solid #f1f1f2;
  display: flex;
  align-items: center;
  padding-left: 20px;
  gap: 48px;
  position: relative;
}
.search-result-section .search-result-nav .nav {
  color: #717b85;
  display: flex;
  align-items: center;
  height: 38px;
  border-bottom: 2px solid #f1f1f2;
}
.search-result-section .search-result-nav .selected {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}
.search-result-section .search-result-list-wrapper {
  width: 100%;
}
.search-result-section .search-result-filter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  margin-top: 24px;
  padding-right: 20px;
}
.search-result-section .search-result-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.search-result-section .nft-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: self-start;
  justify-items: center;
  padding: 0 20px;
}

.search-nft-card-comp .search-nft-card-wrapper .search-nft-card .search-nft-card-img {
  height: 120px;
}
.search-nft-card-comp .search-nft-card-wrapper .search-nft-card .search-nft-card-img img {
  width: 154px;
  height: 120px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.search-nft-card-comp .search-nft-card-wrapper .search-nft-card .search-nft-card-info .search-nft-card-info-title {
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--primary-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 152px;
}
.search-nft-card-comp .search-nft-card-wrapper .search-nft-card .search-nft-card-info .search-nft-card-info-contents {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 152px;
}
.search-nft-card-comp .search-nft-card-wrapper .search-nft-card .search-nft-card-info .search-nft-card-info-location {
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  width: 152px;
}

.search-empty-comp {
  width: 100%;
  height: 379px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}
.search-empty-comp .search-empty-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 27px;
}
.search-empty-comp .search-empty-wrapper .search-empty-title {
  font-size: 14px;
  font-weight: 400;
}
.search-empty-comp .search-empty-wrapper .search-empty-title .search-empty-img {
  width: 100%;
  height: 100%;
}

.search-filter-comp {
  display: flex;
  align-items: center;
  gap: 4px;
}
.search-filter-comp .search-filter-name {
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  color: rgba(75, 70, 92, 0.5);
}

.invite-view {
  min-height: 100vh;
  background: var(--bg-home-color);
}
.invite-view .content-area {
  padding: 0 24px 0 24px;
}
.invite-view .title-text {
  color: #000;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  white-space: pre-line;
  margin-bottom: 24px;
}
.invite-view .desc-text {
  color: #000;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  white-space: pre-line;
  margin-bottom: 32px;
}
.invite-view .invite-input-row {
  position: relative;
}
.invite-view .invite-button {
  position: absolute;
  top: 11px;
  right: 14px;
  width: -moz-fit-content;
  width: fit-content;
}
.invite-view .invite-button button {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 12px;
}
.invite-view .email-input input {
  background: #FFF;
}
.invite-view .email-input .error-msg {
  text-align: center;
}
.invite-view .copy-row {
  display: flex;
  justify-content: center;
}
.invite-view .copy-button {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  color: #5D596C;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration-line: underline;
  margin-top: 40px;
  cursor: pointer;
}

.discover-cltn-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1.0625;
  border-radius: 20px;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.discover-cltn-item .border-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}
.discover-cltn-item .banner-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
.discover-cltn-item .content-area {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.discover-cltn-item .mv-chip {
  position: absolute;
  top: 28px;
  right: 28px;
}
.discover-cltn-item .info-row {
  padding: 24px;
}
.discover-cltn-item .cltn-name {
  color: var(--bg-green);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.discover-cltn-item .brand-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.discover-cltn-item .brand-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 250px;
  color: var(--gray-1);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.discover-cltn-item .brand-image {
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.discover-cltn-item .price-row {
  color: var(--bg-green);
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}
.discover-cltn-item .sale-content {
  display: none;
}
.discover-cltn-item.discover-cltn-item-sale-end {
  filter: grayscale(1);
}
.discover-cltn-item.discover-cltn-item-sale-end .mv-chip {
  color: var(--typo-heading);
}

.discover-cltn-item-coming .brand-content {
  display: none;
}
.discover-cltn-item-coming .sale-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.discover-cltn-item-coming .mv-chip {
  display: none;
}
.discover-cltn-item-coming .open-box {
  flex-grow: 1;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  border-radius: 20px;
  background: rgba(17, 17, 17, 0.8);
  padding: 16px 0;
  margin-bottom: 8px;
}
.discover-cltn-item-coming .open-box .box-title {
  color: #F2F7F7;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.discover-cltn-item-coming .open-box .date-area {
  color: #F2F7F7;
  font-size: 34px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  word-break: keep-all;
}
.discover-cltn-item-coming .sale-info-row {
  display: flex;
  gap: 4px;
  color: var(--gray-2);
}

.discover-view .list-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
}

.discover-nft-detail-view .cltn-image-area {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
.discover-nft-detail-view .cltn-image {
  display: block;
  width: 100%;
  height: 270px;
  -o-object-fit: cover;
     object-fit: cover;
}
.discover-nft-detail-view .cltn-image-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--cover-effect);
}
.discover-nft-detail-view .chip-pos {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
.discover-nft-detail-view .info-row {
  padding: 24px;
}
.discover-nft-detail-view .event-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}
.discover-nft-detail-view .icon-image {
  width: 20px;
  height: 20px;
  border: 2px solid var(--secondary-5-base);
  border-radius: 20px;
}
.discover-nft-detail-view .icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.discover-nft-detail-view .icon-row .icon-col {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.discover-nft-detail-view .brand-row {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.discover-nft-detail-view .brand-row .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.discover-nft-detail-view .price-row {
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.discover-nft-detail-view .cltn-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--gray-1);
}
.discover-nft-detail-view .cltn-detail .detail-item {
  background: var(--gray-0);
}
.discover-nft-detail-view .cltn-detail .title-text {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.32px;
}
.discover-nft-detail-view .cltn-detail .detail-content {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 16px 20px;
}
.discover-nft-detail-view .cltn-detail .icon-row {
  display: flex;
  gap: 6px;
}
.discover-nft-detail-view .cltn-detail .cltn-map {
  padding-top: 6px;
}
.discover-nft-detail-view .cltn-detail .cltn-map #google-map {
  width: 100%;
  height: 152px;
  border-radius: 10px;
}
.discover-nft-detail-view .cltn-detail .detail-text {
  white-space: pre-line;
  padding-bottom: 32px;
}

.discover-nft-list-comp .discover-nft-item {
  padding: 24px;
  border-bottom: 1px solid var(--secondary-3);
  background: var(--gray-0);
}
.discover-nft-list-comp .icon-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.discover-nft-list-comp .brand-row {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.discover-nft-list-comp .nft-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.discover-nft-list-comp .nft-name .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}
.discover-nft-list-comp .nft-name svg {
  flex-shrink: 0;
  margin-left: 20px;
}
.discover-nft-list-comp .user-row .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.discover-nft-list-comp .info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.discover-nft-list-comp .detail-col {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.discover-nft-list-comp .cnt-col {
  color: var(--secondary-dark-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.discover-nft-list-comp .price-col {
  color: var(--typo-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}
.discover-nft-list-comp .body-color {
  color: var(--typo-body);
}
.discover-nft-list-comp .more-btn {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}
.discover-nft-list-comp .more-btn button {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--typo-heading);
  border-radius: 999px;
  background: var(--gray-2);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  padding: 8px 16px;
}

.payment-view {
  padding-bottom: 104px;
}
.payment-view .nft-row {
  padding: 24px 20px 16px 20px;
}
.payment-view .title-text {
  color: var(--typo-black);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  white-space: pre;
}
.payment-view .nft-detail-area {
  position: relative;
  padding: 0 20px;
}
.payment-view .nft-detail-area hr {
  border: 1px solid var(--gray-2);
  margin: 0;
}
.payment-view .nft-info-row {
  position: relative;
  padding: 30px 20px 0 20px;
  background: var(--gray-1);
  border-radius: 10px 10px 0 0;
}
.payment-view .nft-card-col {
  position: absolute;
  top: 30px;
  left: 20px;
  transform: scale(0.2);
  transform-origin: top left;
}
.payment-view .nft-card-col .nft-card-comp {
  pointer-events: none;
}
.payment-view .icon-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.payment-view .nft-info-col {
  padding-left: 80px;
  padding-bottom: 32px;
}
.payment-view .brand-row {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.payment-view .nft-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.32px;
}
.payment-view .user-row {
  color: var(--typo-black);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.payment-view .user-row .name-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.payment-view .info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.payment-view .detail-col {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.payment-view .cnt-col {
  color: var(--secondary-dark-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.payment-view .price-col {
  color: var(--typo-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
.payment-view .body-color {
  color: var(--typo-body);
}
.payment-view .total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.payment-view .detail-row .sale-nft-detail-comp {
  border-radius: 0 0 10px 10px;
}
.payment-view .price-row {
  padding: 23px 20px 16px 20px;
}
.payment-view .total-col {
  color: #404040;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}
.payment-view .total-text {
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.payment-view .price-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
}
.payment-view .price-col {
  color: #404040;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.payment-view .price-text {
  color: var(--typo-heading);
  text-align: right;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.payment-view .footer-row {
  z-index: 2;
  position: fixed;
  width: 100%;
  max-width: 568px;
  box-sizing: border-box;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}

.discover-search-header .header-input {
  position: relative;
  padding: 12px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  border-bottom: 2px solid var(--secondary-1);
}
.discover-search-header .input-area {
  flex-grow: 1;
  display: flex;
  gap: 10px;
  border-radius: 10px;
  background: var(--gray-1);
  padding: 12px 10px;
}
.discover-search-header input {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
.discover-search-header .search-icon {
  flex-shrink: 0;
}
.discover-search-header .close-icon {
  color: var(--typo-mute);
}

.discover-search-preview {
  z-index: 1;
  position: absolute;
  top: 64px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 64px);
  background: var(--dim-1);
}
.discover-search-preview .preview-area {
  padding: 8px 0;
  background: #FFF;
  padding: 24px 20px;
}
.discover-search-preview .subject-row {
  padding: 8px 0;
  color: var(--typo-mute);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.discover-search-preview .empty-text {
  color: var(--typo-mute);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}
.discover-search-preview .result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.discover-search-preview .result-item img {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  border: 1px solid var(--secondary-5-base);
}
.discover-search-preview .sub-text {
  color: var(--typo-placeholder);
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
}
.discover-search-preview .search-highlight {
  color: var(--primary-color);
}
.discover-search-preview .rest-area {
  flex-grow: 1;
  height: 100%;
}

.discover-search-view .list-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 48px;
  padding: 0 20px;
}
.discover-search-view .tab-row {
  border-bottom: 2px solid var(--secondary-1);
  padding: 0 20px;
}
.discover-search-view .tab-item {
  position: relative;
  color: var(--primary-color);
  width: 60px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  border-bottom: 2px solid var(--primary-color);
  padding: 8px 0;
}
.discover-search-view .filter-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}
.discover-search-view .empty-text {
  color: var(--typo-mute);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}

.discover-event-detail-view a {
  color: inherit;
}
.discover-event-detail-view .cltn-image-area {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
.discover-event-detail-view .cltn-image {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.discover-event-detail-view .cltn-image-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.discover-event-detail-view .chip-pos {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
.discover-event-detail-view > .info-row {
  position: relative;
  padding: 24px;
  border-bottom: 2px solid var(--gray-1);
}
.discover-event-detail-view > .info-row .share-icon {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 24px;
}
.discover-event-detail-view .sub-info-row {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--typo-body);
}
.discover-event-detail-view .sub-info-row svg {
  width: 16px;
}
.discover-event-detail-view .sub-info-row p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.discover-event-detail-view .event-name {
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
}
.discover-event-detail-view .icon-image {
  width: 20px;
  height: 20px;
  border: 2px solid var(--secondary-5-base);
  border-radius: 20px;
}
.discover-event-detail-view .icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
}
.discover-event-detail-view .icon-row .icon-col {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.discover-event-detail-view .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.discover-event-detail-view .cltn-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--gray-1);
}
.discover-event-detail-view .cltn-detail .detail-item {
  background: var(--gray-0);
}
.discover-event-detail-view .cltn-detail .title-text {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.32px;
}
.discover-event-detail-view .cltn-detail .detail-content {
  color: var(--typo-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 16px 20px;
  word-break: break-all;
}
.discover-event-detail-view .cltn-detail .icon-row {
  display: flex;
  gap: 6px;
}
.discover-event-detail-view .cltn-detail .cltn-map {
  padding-top: 6px;
}
.discover-event-detail-view .cltn-detail .cltn-map #google-map {
  width: 100%;
  height: 152px;
  border-radius: 10px;
}
.discover-event-detail-view .cltn-detail .detail-text {
  white-space: pre-line;
  padding-bottom: 32px;
}
.discover-event-detail-view .footer-row {
  z-index: 2;
  position: sticky;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}
.discover-event-detail-view .footer-row .sub-btn {
  display: flex;
  justify-content: center;
  color: var(--typo-body);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: underline;
  padding: 16px 0 26px 0;
}
.discover-event-detail-view .footer-row .sub-btn button {
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
}

.pay-date-time-comp {
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  margin-bottom: 172px;
}
.pay-date-time-comp .date-row .dp__button {
  width: 100%;
}
.pay-date-time-comp .date-row .dp__cell_inner {
  width: 100%;
}
.pay-date-time-comp .date-row .dp__cell_disabled.dp__range_between {
  background: transparent;
  border-color: transparent;
}
.pay-date-time-comp .date-row .dp__calendar_item {
  flex: 1;
}
.pay-date-time-comp .date-row button {
  width: inherit;
}
.pay-date-time-comp .date-row .dp__outer_menu_wrap {
  flex-grow: 1;
}
.pay-date-time-comp .select-time-title {
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
}
.pay-date-time-comp .list-row {
  padding-top: 16px;
}

.discover-payment-view {
  display: flex;
  flex-direction: column;
}
.discover-payment-view .section-row {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.discover-payment-view .section-row > div {
  flex-grow: 1;
}
.discover-payment-view .select-title {
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 16px;
}
.discover-payment-view .time-text {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 16px 12px;
}
.discover-payment-view .list-item-select .item-box-selected .time-text {
  color: var(--primary-color);
}
.discover-payment-view .timer-comp {
  position: absolute;
  top: 80px;
  right: 20px;
}
.discover-payment-view .footer-row {
  z-index: 2;
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 568px;
  transform: translateX(-50%);
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}

.pay-group-select-comp {
  display: flex;
  flex-direction: column;
  padding-bottom: 104px;
}
.pay-group-select-comp .header-row {
  border-bottom: 1px solid var(--gray-1);
  background: var(--gray-0);
  padding: 8px 20px;
}
.pay-group-select-comp .header-row .title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.pay-group-select-comp .header-row .date-text {
  color: var(--typo-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: -0.2px;
}
.pay-group-select-comp .list-section {
  padding: 16px 24px;
}
.pay-group-select-comp .sub-title {
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 16px;
}
.pay-group-select-comp .group-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 12px;
}
.pay-group-select-comp .count-input-col {
  position: relative;
}
.pay-group-select-comp .name-text {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  min-height: 40px;
  word-break: break-all;
}
.pay-group-select-comp .count-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--typo-mute);
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.pay-group-select-comp .price-text {
  color: var(--typo-black);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.pay-group-select-comp .warn-color {
  color: var(--red-5-base);
}
.pay-group-select-comp .item-box-disabled .name-text {
  color: var(--typo-placeholder);
}
.pay-group-select-comp .item-box-disabled .price-text {
  color: var(--typo-placeholder);
}
.pay-group-select-comp .list-item-select .item-box {
  cursor: initial;
}

.pay-group-detail-view {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--gray-1);
  margin-bottom: 144px;
}
.pay-group-detail-view .pg-view {
  padding: 20px 20px;
  z-index: 2;
  position: absolute;
  background: var(--bg-color);
  top: 0;
  left: 0;
  width: 100%;
  min-height: calc(var(--vh) * 100 - 70px);
}
.pay-group-detail-view .pg-view .btn-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.pay-group-detail-view .pg-view .btn-row .mv-button {
  width: 120px;
}
.pay-group-detail-view .pg-view .btn-row .mv-button button {
  padding: 10px 0;
}
.pay-group-detail-view .card-section {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--gray-1);
  padding: 12px 20px;
}
.pay-group-detail-view .event-name {
  word-break: break-all;
}
.pay-group-detail-view .cltn-img-container {
  width: 60px;
  height: 60px;
}
.pay-group-detail-view .cltn-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pay-group-detail-view .crcy-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pay-group-detail-view .crcy-row .dropdown-box {
  padding: 10px;
}
.pay-group-detail-view .detail-section {
  background: var(--gray-0);
  padding: 8px 20px;
}
.pay-group-detail-view .sub-title {
  padding: 8px 0;
}
.pay-group-detail-view .group-text-row {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 8px 0;
}
.pay-group-detail-view .order-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pay-group-detail-view .order-item-row {
  display: flex;
  justify-content: space-between;
}
.pay-group-detail-view .order-item-row .count-text {
  color: var(--primary-color);
}
.pay-group-detail-view .order-item-row .name-col {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pay-group-detail-view .info-row {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-1);
}
.pay-group-detail-view .info-row:last-child {
  border-bottom: 0;
}
.pay-group-detail-view .info-col {
  width: 150px;
  color: var(--typo-mute);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.pay-group-detail-view .info-val {
  color: var(--typo-black);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.pay-group-detail-view .price-text {
  flex-grow: 1;
  color: var(--typo-black);
  text-align: right;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
.pay-group-detail-view .pay-warn-text {
  font-size: 12px;
  color: var(--red-warn);
  padding-top: 16px;
}

.pay-price-select-view .select-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 20px;
}
.pay-price-select-view .notice-text {
  color: var(--color-black-4);
  font-size: 12px;
  padding: 25px;
  white-space: pre-line;
}
.pay-price-select-view .price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pay-price-select-view .price-row .left-col {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pay-price-select-view .price-row .right-col {
  font-size: 14px;
}
.pay-price-select-view .dropdown-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 150px;
  border: 1px solid var(--gray-2);
  background: var(--gray-0);
  padding: 10px 12px;
  font-size: 12px;
}
.pay-price-select-view .dropdown-box.dropdown-box-disable {
  pointer-events: none;
  border-color: transparent;
  white-space: nowrap;
}
.pay-price-select-view .dropdown-box.dropdown-box-disable svg {
  visibility: hidden;
}
.pay-price-select-view .submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pay-price-select-view .submit-row .total-row {
  color: var(--typo-mute);
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
}
.pay-price-select-view .submit-row .btn-col {
  width: 156px;
}
.pay-price-select-view .submit-row .price-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}
.pay-price-select-view .price-type-list {
  padding: 0 20px 10px 20px;
}
.pay-price-select-view .price-type-list .type-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}
.pay-price-select-view .price-type-list .type-row .left-col {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pay-price-select-view .price-type-list .type-row .check-img {
  visibility: hidden;
}
.pay-price-select-view .price-type-list .type-row.type-row-selected .check-img {
  visibility: visible;
}
.pay-price-select-view .price-footer {
  padding: 16px 20px;
}

.pay-group-select-sheet .list-section {
  padding: 0 20px;
}
.pay-group-select-sheet .group-area {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  color: var(--typo-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.seat-comp {
  height: 100%;
}
.seat-comp .seat-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 37px;
  min-height: 37px;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #EEE;
  background: var(--seat-back);
  color: #F5F5F5;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.seat-comp.seat-comp-mini .seat-inner {
  border-color: transparent;
  background: #EEE;
}
.seat-comp.seat-comp-selected .seat-inner {
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
}
.seat-comp.seat-comp-selected .mini-seat {
  background: var(--primary-color);
}
.seat-comp.seat-comp-reserved {
  pointer-events: none;
}
.seat-comp.seat-comp-reserved .seat-inner {
  border: 1px solid #6F6B7D;
  background: #6F6B7D;
}
.seat-comp.seat-comp-reserved .mini-seat {
  background: #6F6B7D;
}
.seat-comp.seat-comp-reserved .seat-name {
  color: #93909D;
  background: var(--typo-body);
}
.seat-comp.seat-comp-empty {
  pointer-events: none;
}
.seat-comp.seat-comp-empty .seat-inner {
  background: transparent;
  border-color: transparent;
}
.seat-comp.seat-comp-empty .mini-seat {
  background: transparent;
}

.seat-select-comp {
  position: relative;
  overflow: hidden;
}
.seat-select-comp .seat-item {
  width: 100%;
  height: 100%;
}
.seat-select-comp.seat-select-comp-not-edit .seat-item {
  pointer-events: none;
}
.seat-select-comp.seat-select-comp-scroll .select-height {
  height: calc(var(--vh) * 100 - 220px);
}
.seat-select-comp .select-back {
  background: #222;
}
.seat-select-comp .select-back .option-row {
  position: sticky;
  top: 0;
  padding: 8px;
}
.seat-select-comp .select-back .option-row .mv-select .dropdown-box {
  padding: 12px;
}
.seat-select-comp .select-back .option-row .mv-select .dropdown-box.dropdown-box-empty {
  color: var(--primary-color);
}
.seat-select-comp .scroll-area {
  position: relative;
  overflow: auto;
}
.seat-select-comp .scroll-area::-webkit-scrollbar {
  height: 12px; /* 가로 스크롤바 높이 */
}
.seat-select-comp .scroll-area::-webkit-scrollbar-track {
  background: white; /* 트랙 배경 색 */
}
.seat-select-comp .select-area {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  justify-content: center;
  padding: 20px 20px 100px 20px;
}
.seat-select-comp .svg-area {
  padding: 8px;
}
.seat-select-comp .svg-area svg {
  width: 100%;
  height: auto;
}
.seat-select-comp .svg-area .zone-btn {
  cursor: pointer;
}
.seat-select-comp .desc-txt {
  font-size: 14px;
  color: var(--gray-14);
  padding: 20px;
}
.seat-select-comp .select-height {
  height: calc(var(--vh) * 100 - 214px);
}
.seat-select-comp .seat-wrapper {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  display: grid;
  row-gap: 3px;
  -moz-column-gap: 3px;
       column-gap: 3px;
  margin-bottom: 20px;
  marin: 0 auto;
}
.seat-select-comp .y-axis {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  top: 114px;
  left: -40px;
  pointer-events: none;
}
.seat-select-comp .y-axis .seat-comp .seat-inner {
  border: 0;
}
.seat-select-comp .x-axis {
  display: flex;
  gap: 3px;
  position: absolute;
  top: -40px;
  left: 0;
  pointer-events: none;
}
.seat-select-comp .x-axis .seat-comp .seat-inner {
  border: 0;
}
.seat-select-comp .scroll-map {
  position: absolute;
  top: 0;
  left: 0;
  border: 8px solid var(--primary-color);
  transform-origin: 0 0;
}
.seat-select-comp .stage-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.seat-select-comp .stage-row.stage-row-vertical {
  writing-mode: vertical-lr;
}
.seat-select-comp .stage-row.stage-row-vertical .stage-block {
  width: 37px;
  height: 200px;
}
.seat-select-comp .stage-block {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--gray-0);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  height: 49px;
  border-radius: 10px;
  background: var(--typo-body);
}
.seat-select-comp .seat-map {
  position: absolute;
  bottom: 10px;
  right: 10px;
  transform-origin: bottom right;
  transform: scale(0.2);
  opacity: 0.8;
  overflow: hidden;
}
.seat-select-comp .seat-map .seat-comp {
  transform: scale(0.4);
}
.seat-select-comp .seat-map .select-area {
  position: relative;
  background: #070707;
}
.seat-select-comp .back-btn {
  position: absolute;
  bottom: 26px;
  left: 10px;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  align-items: center;
  color: var(--gray-0);
  border-radius: 999px;
  background: var(--typo-black);
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.04);
  padding: 8px 20px;
  cursor: pointer;
}
.seat-select-comp .back-btn svg {
  transform: rotateZ(90deg);
}

.pay-common .header-row {
  border-bottom: 1px solid var(--gray-1);
  background: var(--gray-0);
  padding: 8px 20px;
}
.pay-common .header-row .title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--typo-black);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  max-width: 70%;
}
.pay-common .header-row .date-text {
  color: var(--typo-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: -0.2px;
}

.apply-form-view {
  padding-bottom: 140px;
}
.apply-form-view .content-section {
  padding: 16px;
}
.apply-form-view .intro-row {
  color: var(--typo-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}
.apply-form-view .qtnr-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.apply-form-view .label-txt {
  color: var(--typo-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}
.apply-form-view .label-txt .required {
  color: var(--red-warn);
}
.apply-form-view .desc-txt {
  color: var(--typo-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: pre-line;
}
.apply-form-view .desc-txt .desc-warn-txt {
  font-weight: 600;
}
.apply-form-view .terms-title {
  color: #111;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 12px;
}
.apply-form-view .terms-content {
  white-space: pre-line;
}
.apply-form-view .terms-content strong {
  font-weight: 600;
}
.apply-form-view .terms-content ol, .apply-form-view .terms-content ul {
  padding-left: 20px;
}
.apply-form-view .terms-content ul li {
  list-style-type: disc;
}
.apply-form-view .footer-row {
  z-index: 2;
  position: fixed;
  width: 100%;
  max-width: 568px;
  box-sizing: border-box;
  bottom: 0;
  background: var(--gray-0);
  border-top: 2px solid var(--secondary-2, #F1F4F7);
  padding: 16px 20px 32px 20px;
}

.crcy-select-comp {
  padding: 20px;
}

.wallet-connect-view .link-area {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border-style: dashed;
  border-width: 2px;
  width: 100%;
  height: 140px;
  border-color: var(--primary-color);
  padding: 20px;
  transition: background-color, color 1s;
}
.wallet-connect-view .link-area.link-area-connected {
  color: white;
  border-style: double;
  background: var(--primary-7-active);
}
.wallet-connect-view .link-area.link-area-connected .title-text {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
}
.wallet-connect-view .link-area.link-area-connected .btn-row button {
  padding: 4px;
}
.wallet-connect-view .pay-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 24px;
  margin-bottom: 24px;
}
.wallet-connect-view .pay-detail .pay-col {
  color: var(--cool-gray-1);
}
.wallet-connect-view .pay-detail .pay-value {
  font-size: 24px;
  font-weight: 600;
}
.wallet-connect-view .pay-ct-txt {
  color: var(--primary-color);
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
}

.req-mmbs-comp .req-list-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.req-mmbs-comp .req-item-row {
  display: flex;
  gap: 4px;
}
.req-mmbs-comp .req-item-text {
  text-decoration: underline;
}

.loading-view {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  background: white;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: calc(var(--vh) * 100);
}
.loading-view .logo-row {
  animation: blink 2s infinite;
}

html {
  display: flex;
  justify-content: center;
  font-size: 16px;
}

body {
  max-width: 568px;
  min-width: 360px;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  background: var(--bg-color);
}

.lang-ko {
  font-family: "Pretendard", sans-serif;
}

.lang-en {
  font-family: "Poppins", sans-serif;
}

.pointer-hover {
  cursor: pointer;
}
.pointer-hover:hover {
  opacity: 0.8;
}

.primary-color {
  color: var(--primary-color);
}

.text-color-default {
  color: rgba(75, 70, 92, 0.8);
}

.iti--fullscreen-popup {
  width: 100%;
  left: 50% !important;
  transform: translateX(-50%);
  max-width: 568px;
}