@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  font-family: "Pretendard", sans-serif;
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title],
dfn[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-size: 1rem;
  font-family: inherit; /* 1 */
  line-height: 1.2; /* 1 */
  margin: 0; /* 2 */
  padding: 0;
  vertical-align: middle;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  border: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/**
 * Margin, Padding reset
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input,
select,
optgroup,
button {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/**
 * HTML5 Tags reset for older browsers
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/*
 * List
 */
ol,
ul,
li {
  padding: 0;
  list-style: none;
}

/**
 * Table
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 * Blockquote, q
 */
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=submit], input[type=button], input[type=reset] {
  cursor: pointer;
  -webkit-appearance: none;
}

img,
fieldset {
  border: 0;
  outline: none;
}

img {
  border: 0;
  max-width: 100%;
  vertical-align: top;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

select {
  margin: 0;
  resize: none;
  vertical-align: middle;
  -webkit-border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  text-overflow: "";
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.483887 0.241943L5.99989 5.75794L11.5159 0.241943' stroke='black' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  padding-right: 22px;
}

select::-ms-expand {
  display: none;
}

input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/* Outline */
* {
  outline: none !important;
}

textarea:focus {
  outline: none !important;
}

button:focus {
  outline: none !important;
}

input:focus {
  outline: none !important;
}

em {
  font-style: normal;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 터치피드백 삭제*/
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  overflow-anchor: auto;
  font-size: max(10px, 3.125vw);
}
html::-webkit-scrollbar-track {
  background-color: #fff;
  width: 0px;
  border-radius: 0px;
}
html::-webkit-scrollbar-thumb {
  background-color: #e8e8e8;
  border-radius: 0px;
  background-clip: content-box;
}
html::-webkit-scrollbar {
  width: 0px;
}
html::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
@media (min-width: 480px) {
  html {
    font-size: 16px;
  }
}

.btn-bx .btn {
  background-color: var(--color);
  color: var(--btn-text, var(--text));
  font-size: 1.75rem;
  border-radius: 3.125rem;
  padding: 0.3125rem 1.25rem;
  min-height: 4.625rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  font-weight: 400;
  position: relative;
}
.btn-bx .btn:has(.check--o), .btn-bx .btn.selected {
  font-size: 1.875rem !important;
  font-weight: 700;
}
.btn-bx .btn.selected {
  -webkit-box-shadow: 0 0.25rem 0.625rem rgba(17, 17, 17, 0.2);
          box-shadow: 0 0.25rem 0.625rem rgba(17, 17, 17, 0.2);
}
.btn-bx .btn[disabled]:not(.selected) {
  font-size: 1.5rem;
}
.btn-bx .btn[disabled]:not(.selected):not(:has(.check--o)) {
  background-color: color-mix(in srgb, var(--color) 20%, transparent);
}
.btn-bx .btn:has(.check--x) {
  font-weight: 300;
  background-color: color-mix(in srgb, var(--color) 50%, transparent);
  -webkit-animation: 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.btn-bx .btn:has(.check--x).selected {
  -webkit-animation-name: shake-horizontal;
          animation-name: shake-horizontal;
}
.btn-bx .btn .check {
  position: absolute;
  right: 2.1875rem;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.btn-bx .btn .check svg {
  width: 2rem;
  height: 2rem;
  overflow: visible;
}
.btn-bx .btn .check svg * {
  stroke: var(--btn-text, var(--text));
}
.btn-bx .btn--sub {
  background-color: var(--btn-secondary);
  font-size: 1.5rem;
  font-weight: 500;
}
.btn-bx .btn--sub:not(:first-child) {
  margin-top: 0.5rem;
}
.btn-bx[data-check=check] .btn {
  padding-left: 4.8125rem;
  padding-right: 4.8125rem;
}
.btn-bx-ox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
}
.btn-bx-ox.selected .btn path {
  fill: #ddd;
}
.btn-bx-ox .btn {
  margin: 0 !important;
  background-color: #fff;
  border: 1px solid #ddd;
  max-width: 11.25rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 1.5rem) / 2);
          flex: 0 0 calc((100% - 1.5rem) / 2);
  aspect-ratio: 180/154;
  border-radius: 3.125rem;
  position: relative;
  overflow: hidden;
  -webkit-box-shadow: 0 0.25rem 0.625rem rgba(17, 17, 17, 0.2);
          box-shadow: 0 0.25rem 0.625rem rgba(17, 17, 17, 0.2);
}
.btn-bx-ox .btn svg {
  width: 100%;
  height: 100%;
}
.btn-bx-ox .btn.selected path {
  fill: #ff3e41 !important;
}
.btn-bx-ox[data-check=check] .btn--true.selected {
  -webkit-box-shadow: inset 0 0 0 0.3125rem #ff3e41, 0 0.25rem 0.625rem rgba(17, 17, 17, 0.2);
          box-shadow: inset 0 0 0 0.3125rem #ff3e41, 0 0.25rem 0.625rem rgba(17, 17, 17, 0.2);
}
.btn-bx-ox .btn--false {
  -webkit-animation: 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.btn-bx-ox .btn--false.selected {
  -webkit-animation-name: shake-horizontal;
          animation-name: shake-horizontal;
}
@-webkit-keyframes shake-horizontal {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

.page {
  background-color: var(--bg);
  color: var(--text);
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.0625rem;
}
.page .container {
  width: 100%;
}
.page > .contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
  min-height: 100dvh;
  width: 100%;
  margin: 0 auto;
  padding: 1.6875rem 1.875rem;
  max-width: 640px;
}
.page .txt-wrap {
  margin: 2.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
}

.page--quest > .contents,
.page--name > .contents,
.page--text > .contents {
  min-height: 100dvh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page:has(.btn-back) > .contents {
  padding-top: 5.4375rem;
}

.page--quest .img,
.page--name .img,
.page--text .img {
  width: 100%;
  aspect-ratio: 1160/610;
  border-radius: 1rem;
  overflow: hidden;
}
.page--quest .img img,
.page--name .img img,
.page--text .img img {
  width: 100%;
  aspect-ratio: 1160/610;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.page--cover > .contents {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page--cover .txt-bx {
  padding: 0 1rem;
}
.page--cover .cover-title {
  color: var(--color);
  margin-bottom: 0.625rem;
  line-height: 1.3;
  font-size: 2.5rem;
}
.page--cover .cover-desc {
  font-size: 1.375rem;
  line-height: 1.4;
}
.page--cover .cover-img {
  margin: 4.375rem auto;
  border-radius: 1rem;
  overflow: hidden;
}
.page--cover .cover-img img {
  width: 100%;
  aspect-ratio: 1160/610;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.page--cover .cover-enter {
  margin-top: 1.25rem;
  font-size: 1.125rem;
}
.page--cover .btn {
  font-weight: 700;
}

.page--name .img {
  margin-bottom: 3.125rem;
}
.page--name .desc {
  font-weight: 500;
  font-size: 1.25rem;
  width: 100%;
  color: var(--color);
}
.page--name .input {
  margin-top: 0.625rem;
  width: 22.5rem;
  height: 4.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 1rem;
  border: 1px solid #333;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: #111;
  background-color: rgba(255, 255, 255, 0.6);
}
.page--name .input::-webkit-input-placeholder {
  color: rgba(17, 17, 17, 0.7);
}
.page--name .input::-moz-placeholder {
  color: rgba(17, 17, 17, 0.7);
}
.page--name .input:-ms-input-placeholder {
  color: rgba(17, 17, 17, 0.7);
}
.page--name .input::-ms-input-placeholder {
  color: rgba(17, 17, 17, 0.7);
}
.page--name .input::placeholder {
  color: rgba(17, 17, 17, 0.7);
}

.page--quest .btn-bx > * {
  margin-top: 1.25rem;
}
.page--quest .btn-bx > *:nth-child(1) {
  margin-top: 0;
}
.page--quest .title {
  color: var(--color);
  font-weight: 700;
  line-height: 1.3;
  font-size: 2.5rem;
  letter-spacing: -0.09375rem;
  margin-bottom: 3.125rem;
}
.page--quest .title .no {
  display: block;
  font-size: 1.875rem;
  font-weight: 300;
  display: block;
  margin-bottom: 0.625rem;
}
.page--quest .img:nth-child(1) {
  margin-top: 0;
}
.page--quest .img + .title {
  margin-top: 3.125rem;
}
.page--quest .desc {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
}

.pagination {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: absolute;
  top: 1.6875rem;
  left: 0;
  right: 0;
  width: 100%;
}
.pagination .btn-back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: max(12px, 1.25rem);
}
.pagination .btn-back[disabled] {
  opacity: 0.3;
  cursor: default;
}
.pagination .btn-back .i-caret {
  width: 1.25rem;
}
.pagination .btn-back .i-caret path {
  stroke: var(--color);
}
.pagination__step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.pagination__step .step {
  height: 1.25rem;
  border-radius: 1.25rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  background-color: var(--color);
  opacity: 0.1;
}
.pagination__step .step.on {
  opacity: 1;
}

.loading {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg, #fff);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
.loading__bx {
  position: relative;
  margin: 0 auto;
}
.loading .state {
  background-color: #fff;
  border-radius: 1rem;
  padding: 1.25rem;
}
.loading .state svg {
  width: 5.625rem;
  height: 5.625rem;
  overflow: visible;
}
.loading .state--loading svg {
  -webkit-animation: loadingSpin 2s infinite;
          animation: loadingSpin 2s infinite;
}
.loading .state--finish {
  background-color: #fff;
  opacity: 0;
  -webkit-transition: 300ms opacity;
  transition: 300ms opacity;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.loading .state--finish.show {
  opacity: 1;
}
.loading .state--finish.show svg {
  -webkit-animation: loadingFinish 500ms;
          animation: loadingFinish 500ms;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.loading p {
  margin-top: 0.625rem;
  color: #111;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

@-webkit-keyframes loadingSpin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loadingSpin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes loadingFinish {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  30% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
}
@keyframes loadingFinish {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  30% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
}
html:has(.page--result) {
  overflow-x: hidden;
  overflow-y: hidden;
}
html:has(.page--result) .contents {
  opacity: 0;
}

.page--result > .contents {
  padding-top: 3.125rem;
  padding-bottom: 3.125rem;
}

.result {
  text-align: center;
}
.result--img .img {
  font-size: 0;
  position: relative;
  overflow: hidden;
  border-radius: 3.75rem;
  background: #fff;
  -webkit-box-shadow: 0.25rem 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0.25rem 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.08);
  outline: 1px solid #333 !important;
  max-width: 640px;
}
@media all and (min-width: 640px) {
  .result--img .img {
    width: calc(100vw - 3.75rem);
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
    left: 50%;
  }
}
.result .img-save-txt {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: 1.875rem;
}
.result .test-result {
  margin-bottom: 3.75rem;
}
.result .name {
  font-family: "NanumSquareNeo", "Pretendard", sans-serif;
  font-weight: 700;
  line-height: 1.5;
}
.result .text {
  margin-top: 1.875rem;
  text-align: left;
  color: #333;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: -0.125rem;
}
.result .text li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.result .text li .dot, .result .text li:before {
  position: relative;
  top: -0.125rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  background-color: #111;
  content: "";
}
.result .text li:before {
  top: -0.25em;
}
.result .text li .dot {
  display: none;
}
.result .text li:not(:first-child) {
  margin-top: 0.625rem;
}
.result .card-wrap {
  position: relative;
  width: 100%;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 1600ms all;
  transition: 1600ms all;
}
.result .card-wrap .card--front {
  display: block;
  position: relative !important;
}
.result .card-wrap .card--back {
  display: none;
  position: relative;
}
.result .card-wrap.open {
  -webkit-transform: rotateY(180deg) matrix(1, 0, 0, 1, 0, 0);
          transform: rotateY(180deg) matrix(1, 0, 0, 1, 0, 0);
  -webkit-perspective: none;
          perspective: none;
}
.result .card-wrap.open .card--front {
  z-index: 1;
}
.result .card-wrap.open .card--back {
  overflow: visible;
}
.result .card-wrap .card {
  width: 100%;
  color: var(--btn-text);
  color: #111;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.result .card-wrap .card:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-color: var(--color);
  -webkit-transform: rotate(4deg) translate(-50%, -50%);
          transform: rotate(4deg) translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  border-radius: 3.75rem;
  z-index: -1;
}
.result .card-wrap .card img {
  width: 100%;
  aspect-ratio: 860/1075;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.result .card-wrap .card .wrap {
  width: 100%;
  display: block;
  padding: 3.125rem 2.5rem;
  border-radius: 3.75rem;
  background-color: #fff;
  outline: 1px solid #333 !important;
  overflow: hidden;
}
.result .card-wrap .card--front {
  -webkit-transition: 1600ms opacity, 800ms -webkit-transform;
  transition: 1600ms opacity, 800ms -webkit-transform;
  transition: 1600ms opacity, 800ms transform;
  transition: 1600ms opacity, 800ms transform, 800ms -webkit-transform;
  opacity: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.result .card-wrap .card--front img {
  opacity: 1;
  -webkit-transition-delay: 800ms;
          transition-delay: 800ms;
  margin: 1.5rem auto;
  max-width: 86%;
}
.result .card-wrap .card--back {
  -webkit-transition: 800ms -webkit-transform;
  transition: 800ms -webkit-transform;
  transition: 800ms transform;
  transition: 800ms transform, 800ms -webkit-transform;
  -webkit-transition-delay: 533.3333333333ms;
          transition-delay: 533.3333333333ms;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 2;
}
.result .card-wrap .card--back img {
  margin: 1.875rem auto 0;
  width: 62%;
}
.result .card-wrap .card--back .text {
  position: relative;
}
.result .card-wrap .card--back .text li .dot {
  display: block;
}
.result .card-wrap .card--back .text li:before {
  content: none;
}
.result .card-wrap .card--back .text li:not(:first-child) {
  margin-top: 0.375rem;
}
.result .card-wrap .card--back .hr {
  margin: 0;
  margin-top: 1.875rem;
  width: 100%;
  border: 0;
  display: block;
  height: 1px;
  background: repeating-linear-gradient(to right, #111 0px, #111 0.625rem, #fff 0.625rem, #fff 1.25rem);
}
.result .card-wrap .desc {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0.25rem;
  color: #333;
}
.result .card-wrap .title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
}
.result .card-wrap .name {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
}
.result .card-wrap .cardflip {
  font-size: 1.5rem;
  font-weight: 700;
}
.result--img .name {
  margin-bottom: 1.875rem;
  line-height: 1;
  font-size: 2rem;
  color: var(--color);
}
.result--contents .test-result img {
  max-width: 250px;
  width: 0.390625vw;
  width: min(39.0625vw, 250px);
  margin-bottom: 2.5rem;
  aspect-ratio: 860/1075;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.result--contents .test-result .name {
  font-size: 1.75rem;
  color: var(--color);
}
.result--contents .test-result .title {
  color: var(--color);
  font-size: 3.125rem;
  font-weight: 700;
}
.result--contents .test-result .desc {
  font-size: 1.5rem;
  font-weight: 400;
}
.result--contents .test-result .text {
  padding: 2.5rem 1.875rem;
  border-radius: 3.75rem;
  background-color: #fff;
  border-radius: 3.75rem;
  border: 1px solid var(--color);
  background: #fff;
  -webkit-box-shadow: 0.25rem 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0.25rem 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.08);
}
.result--contents .test-result .text li:before {
  margin: 0 0.5rem;
  width: 0.25rem;
  height: 0.25rem;
}

.result-util {
  margin: 3.125rem auto 0;
  text-align: center;
}
.result-util .title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.result-util .mbti-match {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.875rem;
}
.result-util .mbti-match .link {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 1.875rem) / 2);
          flex: 0 0 calc((100% - 1.875rem) / 2);
}
.result-util .mbti-match img {
  aspect-ratio: 860/1075;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.result-util .mbti-match .txt {
  line-height: 1.3;
  margin-top: 1em;
  font-size: 1.25rem;
}

.share-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.75rem;
}
.share-list .btn {
  width: 3.875rem;
  height: 3.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-size: 100% 100%;
}
.share-list .btn--kakao {
  background-image: url("data:image/svg+xml,%3Csvg width='62' height='62' viewBox='0 0 62 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' fill='white'/%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' stroke='%23999999'/%3E%3Crect x='18.0684' y='26.2129' width='26.082' height='9.57471' fill='%23FEE800'/%3E%3Cpath d='M30.9997 18C40.1221 18 47.513 23.7402 47.513 30.818C47.513 37.8958 40.1221 43.636 30.9997 43.636C29.9962 43.636 29.0158 43.5682 28.064 43.4328C27.1121 44.0932 21.6077 47.8973 21.0859 47.9707C21.0859 47.9707 20.8738 48.0497 20.6903 47.9481C20.5068 47.8465 20.5412 47.57 20.5412 47.57C20.5986 47.1975 21.9747 42.5354 22.227 41.6718C17.5768 39.4085 14.4863 35.3898 14.4863 30.8123C14.4863 23.7345 21.8772 18 30.9997 18ZM19.4289 26.9856C18.9128 26.9856 18.4943 27.3976 18.4943 27.9056C18.4943 28.4136 18.9128 28.8256 19.4289 28.8256H20.9139V34.3964C20.9139 34.8931 21.3439 35.2938 21.8657 35.2938C22.3875 35.2938 22.8175 34.8931 22.8175 34.3964V28.8256H24.3026C24.8186 28.8256 25.2372 28.4136 25.2372 27.9056C25.2372 27.3976 24.8186 26.9856 24.3026 26.9856H19.4231H19.4289ZM27.502 26.9856C26.8828 26.9969 26.3954 27.4597 26.2349 27.9112L23.9586 33.8151C23.6719 34.7012 23.9242 35.0286 24.1822 35.1471C24.3657 35.2318 24.5778 35.2769 24.79 35.2769C25.1856 35.2769 25.4895 35.1189 25.5812 34.8649L26.0514 33.6457H28.9584L29.4286 34.8592C29.5203 35.1132 29.8242 35.2713 30.2199 35.2713C30.432 35.2713 30.6384 35.2261 30.8276 35.1414C31.0914 35.0229 31.3437 34.6956 31.0513 33.8094L28.7749 27.9112C28.6144 27.4597 28.127 26.9969 27.502 26.9856ZM37.8745 26.9856C37.347 26.9856 36.9227 27.4089 36.9227 27.9225V34.34C36.9227 34.8592 37.3527 35.2769 37.8745 35.2769C38.3963 35.2769 38.8263 34.8536 38.8263 34.34V32.2968L39.1588 31.9694L41.3893 34.8818C41.5728 35.1189 41.848 35.2543 42.1519 35.2543C42.3583 35.2543 42.559 35.1922 42.7253 35.0681C42.926 34.9157 43.0578 34.6956 43.0922 34.4472C43.1266 34.1989 43.0636 33.9505 42.9088 33.753L40.5636 30.6938L42.7367 28.5603C42.8858 28.4136 42.9604 28.2104 42.9489 27.9902C42.9374 27.7701 42.8342 27.5613 42.6679 27.3976C42.4902 27.2226 42.2494 27.121 42.0143 27.121C41.8079 27.121 41.6244 27.1944 41.4868 27.3299L38.832 29.9488V27.9338C38.832 27.4145 38.402 26.9969 37.8802 26.9969L37.8745 26.9856ZM32.6395 26.9856C32.1063 26.9856 31.6705 27.4089 31.6705 27.9225V34.2892C31.6705 34.7633 32.0776 35.1471 32.5822 35.1527H35.6383C36.1429 35.1527 36.55 34.7633 36.55 34.2892C36.55 33.8151 36.1371 33.4313 35.6383 33.4313H33.6143V27.9225C33.6143 27.4032 33.1785 26.9856 32.6395 26.9856ZM28.4539 31.9863H26.5502L27.502 29.3279L28.4539 31.9863Z' fill='%23392325'/%3E%3C/svg%3E");
}
.share-list .btn--facebook {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='62' height='62' viewBox='0 0 62 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' fill='white'/%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' stroke='%23999999'/%3E%3Cpath d='M27.8742 22.4221V26.2772H23.8833V30.9909H27.8742V45H33.6736V30.9923H37.5666C37.5666 30.9923 37.9314 28.7322 38.1081 26.2604H33.6975V23.0366C33.6975 22.5554 34.3288 21.9073 34.9545 21.9073H38.1166V17H33.8181C27.7297 17 27.8742 21.7179 27.8742 22.4221Z' fill='%233F5798'/%3E%3C/svg%3E%0A");
}
.share-list .btn--x {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='62' height='62' viewBox='0 0 62 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' fill='white'/%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' stroke='%23999999'/%3E%3Cpath d='M26.0826 18.9998H19.0142L35.9179 42.9998H42.9863L26.0826 18.9998ZM36.758 41.4373L22.0558 20.5622H25.2427L39.945 41.4373H36.758Z' fill='%23111111'/%3E%3Cpath d='M26.2378 18.7L26.3276 18.8269L43.2319 42.8269L43.564 43.2996H35.7622L35.6724 43.1726L18.436 18.7H26.2378ZM35.9179 42.9998H42.9863L26.0826 18.9998H19.0142L35.9179 42.9998ZM39.945 41.4373H36.758L22.0558 20.5622H25.2427L39.945 41.4373ZM36.9136 41.1375H39.3667L25.0874 20.8621H22.6343L36.9136 41.1375Z' fill='%23111111'/%3E%3Cpath d='M29.4291 32.0959L30.2611 33.2764L21.7089 42.9999H19.8431L29.4291 32.0959Z' fill='%23111111'/%3E%3Cpath d='M31.0238 33.3176L30.7113 33.6721L21.9798 43.5999H18.517L29.4808 31.1282L31.0238 33.3176ZM19.8431 42.9999H21.7089L30.2611 33.2764L29.4291 32.0959L19.8431 42.9999Z' fill='%23111111'/%3E%3Cpath d='M42.1359 18.9998L32.3693 29.9934L31.4807 28.7445L38.4365 20.9112L40.1427 18.9998H42.1359Z' fill='%23111111'/%3E%3Cpath d='M43.4719 18.4001L32.3176 30.9548L31.8801 30.3416L30.9915 29.0925L30.7151 28.7029L31.0325 28.3464L37.9876 20.5125L37.9885 20.5115L39.6946 18.6003L39.8743 18.4001H43.4719ZM40.1427 18.9998L38.4365 20.9112L31.4807 28.7445L32.3693 29.9934L42.1359 18.9998H40.1427Z' fill='%23111111'/%3E%3C/svg%3E");
}
.share-list .btn--link {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='62' height='62' viewBox='0 0 62 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' fill='white'/%3E%3Crect x='0.5' y='0.5' width='61' height='61' rx='30.5' stroke='%23999999'/%3E%3Cpath d='M33.3931 28.6065C32.1641 27.3776 30.5097 26.668 28.7722 26.6246C27.0346 26.5813 25.3469 27.2074 24.0581 28.3735L23.8128 28.6065L19.9812 32.4395C18.7333 33.6896 18.0231 35.3777 18.0018 37.144C17.9805 38.9102 18.6499 40.6149 19.8674 41.8947C21.0848 43.1745 22.7539 43.9282 24.519 43.9951C26.2841 44.0621 28.0055 43.4369 29.3163 42.253L29.5602 42.02L32.4352 39.1449C32.6782 38.9011 32.8193 38.5739 32.8298 38.2298C32.8403 37.8857 32.7195 37.5506 32.4918 37.2924C32.2642 37.0342 31.9467 36.8723 31.6041 36.8397C31.2614 36.807 30.9191 36.906 30.6468 37.1166L30.5195 37.2291L27.6444 40.1041C26.8991 40.8538 25.8911 41.2836 24.8342 41.3024C23.7773 41.3212 22.7547 40.9275 21.9832 40.2048C21.2117 39.4822 20.7521 38.4874 20.7019 37.4315C20.6517 36.3757 21.0147 35.3417 21.7141 34.5491L21.897 34.3553L25.7286 30.5237C26.1061 30.1462 26.5542 29.8467 27.0474 29.6424C27.5405 29.4381 28.0692 29.333 28.603 29.333C29.1368 29.333 29.6654 29.4381 30.1586 29.6424C30.6518 29.8467 31.0999 30.1462 31.4774 30.5237C31.7316 30.7778 32.0763 30.9204 32.4357 30.9203C32.7951 30.9202 33.1398 30.7773 33.3938 30.523C33.6479 30.2688 33.7905 29.9241 33.7904 29.5647C33.7903 29.2052 33.6474 28.8606 33.3931 28.6065ZM42.0156 19.984C40.7865 18.755 39.1321 18.0455 37.3946 18.0021C35.6571 17.9587 33.9693 18.5849 32.6805 19.751L32.4352 19.984L29.5616 22.8605C29.3186 23.1043 29.1775 23.4315 29.167 23.7755C29.1565 24.1196 29.2773 24.4548 29.505 24.713C29.7327 24.9712 30.0501 25.133 30.3927 25.1657C30.7354 25.1983 31.0777 25.0993 31.35 24.8887L31.4774 24.7763L34.351 21.9025C35.0976 21.1608 36.1028 20.7376 37.155 20.7219C38.2073 20.7061 39.2247 21.0992 39.9931 21.8183C40.7615 22.5373 41.221 23.5264 41.275 24.5775C41.3291 25.6285 40.9733 26.6595 40.2827 27.4535L40.0998 27.6486L36.2668 31.4816C35.5046 32.2436 34.4709 32.6717 33.3931 32.6717C32.3154 32.6717 31.2817 32.2436 30.5195 31.4816C30.3937 31.3557 30.2443 31.2559 30.0799 31.1877C29.9155 31.1195 29.7393 31.0844 29.5614 31.0844C29.3834 31.0843 29.2072 31.1193 29.0427 31.1873C28.8783 31.2554 28.7289 31.3552 28.603 31.4809C28.4771 31.6067 28.3772 31.7561 28.3091 31.9205C28.2409 32.0849 28.2058 32.2611 28.2057 32.4391C28.2057 32.617 28.2407 32.7932 28.3087 32.9577C28.3767 33.1221 28.4765 33.2716 28.6023 33.3974C29.8314 34.6264 31.4858 35.336 33.2233 35.3794C34.9608 35.4227 36.6486 34.7966 37.9374 33.6305L38.184 33.3974L42.0156 29.5645C43.2856 28.2941 43.999 26.5713 43.999 24.7749C43.999 22.9786 43.2856 21.2544 42.0156 19.984Z' fill='%23666666'/%3E%3C/svg%3E%0A");
}