/* COMMON */
:root {
  --main-color: #374151;
}

body {
  background: #fafafa;
}

.inner {
  width: 100%;
  padding: 0 1.6rem;
  margin: 0 auto;
}

.notice_container {
  padding-bottom: 2.4rem;
}
.notice_container .inner,
.notice_container.flex {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.notice_container .title_wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.notice_container .title_wrap img {
  width: 1.6rem;
  aspect-ratio: 1 / 1;
  margin-top: .2rem;
}
.notice_container p {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2rem;
  color: #64748B;
  word-break: keep-all;
}

main {
  margin-top: 11rem;
}

/* HEADER */
header {
  text-align: center;
  padding: 2rem 0 0;
  position: fixed;
  top: 0;
  left: 0;
  background: #fafafa;
  z-index: 99;
  width: 100%;
}
header .inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
header .logo {
  display: inline-block;
  width: 6rem;
}
header .logo img {
  width: 100%;
}
header .close {
  width: 3rem;
  aspect-ratio: 1 / 1;
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
}
header .close img {
  width: 100%;
}


/* home.php */
.home .title_wrap {
  text-align: center;
  margin-bottom: 3rem;
}
.home .title_wrap h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.6rem;
}
.home .title_wrap p {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--main-color);
}
.home .info_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 3rem;
}
.home .info_wrap .info_box {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.home .info_wrap .info_box img {
  width: 2.4rem;
  aspect-ratio: 1 / 1;
}
.home .info_wrap .info_box p {
  font-size: 1.6rem;
  font-weight: 500;
  color: #6b7280;
}
.home .mbti_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 22rem;
  border-radius: 1.5rem;
}
.home .mbti_wrap span {
  font-size: 1.6rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 1.6rem;
}
.home .mbti_wrap h2 {
  font-family: 'Gaseok';
  font-size: 7.8rem;
  
  margin-bottom: .6rem;
}
.home .mbti_wrap p {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 2.6rem;
}
.home .mbti_wrap b {
  font-size: 1rem;
  font-weight: 300;
  color: #6b7280;
  letter-spacing: -.5px;
}
.home .mbti_wrap.empty {
  background: #e5e7eb;
  border: 0;
}
.home .mbti_wrap.empty p {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 3rem;
  color: #6b7280;
  margin: 0;
}
.home .btn_wrap.empty a {
  background: #00C3D0;
  border: 0;
  color: #fff;
}
.home .btn_wrap {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2.4rem;
}
.home .btn_wrap a {
  width: 100%;
  display: block;
  text-align: center;
  padding: 2rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  border-radius: 1.5rem;
}
.home .btn_wrap .replay {
  color: #fff;
}

/* 검사 결과 MBTI에 따라 색깔 다르게 나오기 */
/* [분석가형] : INTJ / INTP / ENTJ / ENTP */
.home .intj .mbti_wrap,
.home .intp .mbti_wrap,
.home .entj .mbti_wrap,
.home .entp .mbti_wrap { border: 1px solid #5B21B6; background: #EDE9FE; }
.home .intj .mbti_wrap h2,
.home .intp .mbti_wrap h2,
.home .entj .mbti_wrap h2,
.home .entp .mbti_wrap h2 { color: #7C3AED; }
.home .intj .mbti_wrap p,
.home .intp .mbti_wrap p,
.home .entj .mbti_wrap p,
.home .entp .mbti_wrap p { color: #5B21B6; }
.home .intj .btn_wrap a,
.home .intp .btn_wrap a,
.home .entj .btn_wrap a,
.home .entp .btn_wrap a { color: #5B21B6; background: #EDE9FE; border: 1px solid #5B21B6; }
.home .intj .btn_wrap .replay,
.home .intp .btn_wrap .replay,
.home .entj .btn_wrap .replay,
.home .entp .btn_wrap .replay { background: #5B21B6; color: #fff; }

/* [외교관형] : INFJ / INFP / ENFJ / ENFP */
.home .infj .mbti_wrap,
.home .infp .mbti_wrap,
.home .enfj .mbti_wrap,
.home .enfp .mbti_wrap { border: 1px solid #15803D; background: #E8F8E8; }
.home .infj .mbti_wrap h2,
.home .infp .mbti_wrap h2,
.home .enfj .mbti_wrap h2,
.home .enfp .mbti_wrap h2 { color: #22C55E; }
.home .infj .mbti_wrap p,
.home .infp .mbti_wrap p,
.home .enfj .mbti_wrap p,
.home .enfp .mbti_wrap p { color: #15803D; }
.home .infj .btn_wrap a,
.home .infp .btn_wrap a,
.home .enfj .btn_wrap a,
.home .enfp .btn_wrap a { color: #15803D; background: #E8F8E8; border: 1px solid #15803D; }
.home .infj .btn_wrap .replay,
.home .infp .btn_wrap .replay,
.home .enfj .btn_wrap .replay,
.home .enfp .btn_wrap .replay { background: #15803D; color: #fff; }

/* [관리자형] : ISTJ / ISFJ / ESTJ / ESFJ */
.home .istj .mbti_wrap,
.home .isfj .mbti_wrap,
.home .estj .mbti_wrap,
.home .esfj .mbti_wrap { border: 1px solid #1D4ED8; background: #DBEAFE; }
.home .istj .mbti_wrap h2,
.home .isfj .mbti_wrap h2,
.home .estj .mbti_wrap h2,
.home .esfj .mbti_wrap h2 { color: #3B82F6; }
.home .istj .mbti_wrap p,
.home .isfj .mbti_wrap p,
.home .estj .mbti_wrap p,
.home .esfj .mbti_wrap p { color: #1D4ED8; }
.home .istj .btn_wrap a,
.home .isfj .btn_wrap a,
.home .estj .btn_wrap a,
.home .esfj .btn_wrap a { color: #1D4ED8; background: #DBEAFE; border: 1px solid #1D4ED8; }
.home .istj .btn_wrap .replay,
.home .isfj .btn_wrap .replay,
.home .estj .btn_wrap .replay,
.home .esfj .btn_wrap .replay { background: #1D4ED8; color: #fff; }

/* [탐험가형] : ISTP / ISFP / ESTP / ESFP */
.home .istp .mbti_wrap,
.home .isfp .mbti_wrap,
.home .estp .mbti_wrap,
.home .esfp .mbti_wrap { border: 1px solid #CA8A04; background: #FEF3C7; }
.home .istp .mbti_wrap h2,
.home .isfp .mbti_wrap h2,
.home .estp .mbti_wrap h2,
.home .esfp .mbti_wrap h2 { color: #F9CB13; }
.home .istp .mbti_wrap p,
.home .isfp .mbti_wrap p,
.home .estp .mbti_wrap p,
.home .esfp .mbti_wrap p { color: #CA8A04; }
.home .istp .btn_wrap a,
.home .isfp .btn_wrap a,
.home .estp .btn_wrap a,
.home .esfp .btn_wrap a { color: #CA8A04; background: #FEF3C7; border: 1px solid #CA8A04; }
.home .istp .btn_wrap .replay,
.home .isfp .btn_wrap .replay,
.home .estp .btn_wrap .replay,
.home .esfp .btn_wrap .replay { background: #CA8A04; color: #fff; }




.home .notice_wrap {
  background: #f3f4f6;
  padding: 3.2rem 0;
  margin-top: 5rem;
}
.home .notice_wrap h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 1rem;
}
.home .notice_wrap h3 img {
  width: 1.6rem;
  aspect-ratio: 1 / 1;
}
.home .notice_wrap p {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2rem;
  color: #6b7280;
  padding-left: 2rem;
}

/* prepare.php */
.prepare .title_wrap {
  text-align: center;
  margin-bottom: 3rem;
}
.prepare .title_wrap h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.6rem;
}
.prepare .title_wrap p {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--main-color);
}
.prepare .info_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 3.6rem;
  background: #f3f4f6;
  padding: 2.4rem 0;
  border-radius: 1.5rem;
}
.prepare .info_wrap .info_row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.prepare .info_wrap .info_row .info_box {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.prepare .info_wrap .info_row .info_box img {
  width: 2.4rem;
}
.prepare .info_wrap .info_row .info_box p {
  font-size: 1.6rem;
  font-weight: 500;
  color: #6b7280;
}
.prepare .list_wrap {
  background: #f3f4f6;
  border-radius: 1.5rem;
  padding: 3.6rem 2rem;
  margin-top: 2.4rem;
}
.prepare .list_wrap h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 3.2rem;
}
.prepare .list_wrap ul {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.prepare .list_wrap ul li {
  font-size: 1.6rem;
  color: #374151;
  text-align: left;
}
.prepare .start {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
  background: var(--main-color);
  padding: 2rem 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-top: 2.4rem;
}

/* test.php */
.test .progress {
  width: 100%;
  height: .5rem;
  position: fixed;
  top: 8rem;
  left: 0;
  background: #E5E7EB;
  z-index: 100;
}
.test .progress span {
  width: 50%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: #00C3D0;
}
.test .title_wrap {
  text-align: center;
  margin-bottom: 3.6rem;
}
.test .title_wrap span {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: .6rem;
}
.test .title_wrap h1 {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 4rem;
  word-break: keep-all;
  max-width: 80%;
  margin: 0 auto;
}
.test .option_wrap ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.test .option_wrap ul li {
  padding: 2rem 0;
  text-align: center;
  border-radius: 1.5rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #111827;
  opacity: .5;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.test .option_wrap ul li:active {
  transform: scale(.98);
}
.test .option_wrap ul li.active {
  opacity: 1;
}
.test .option_wrap ul li.very_agree {
  background: #9ae1e5;
}
.test .option_wrap ul li.agree {
  background: #D6EDEE;
}
.test .option_wrap ul li.normal {
  background: #E5E7EB;
}
.test .option_wrap ul li.disagree {
  background: #EED6E3;
}
.test .option_wrap ul li.very_disagree {
  background: #FEBFE2;
}
.test .btn_wrap {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 5rem;
  margin-bottom: 3rem;
}
.test .btn_wrap button {
  width: 100%;
  padding: 2rem 0;
  border-radius: 1.5rem;
  text-align: center;
  border: 1px solid #00C3D0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #00C3D0;
}
.test .btn_wrap .next {
  background: #ABC6C8;
  border: 1px solid #ABC6C8;
  color: #6b7280;
}
.test .btn_wrap .next.active {
  border: 1px solid #00C3D0;
  background: #00C3D0;
  color: #fff;
}

.test_modal.active {
  display: block;
}

.test_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 9999;
}
.test_modal .modal_wrap {
  width: 85%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 1.5rem;
  padding: 2.5rem;
  text-align: center;
}
.test_modal .modal_wrap h3 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2.2rem;
}
.test_modal .modal_wrap p {
  font-size: 1.8rem;
  line-height: 2.5rem;
  color: #374151;
  max-width: 75%;
  word-break: keep-all;
  margin: 0 auto;
}
.test_modal .modal_wrap .btn_wrap {
  margin-top: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.test_modal .modal_wrap .btn_wrap button {
  display: block;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  padding: 1.7rem 0;
  border: 1px solid #00C3D0;
  border-radius: 1.5rem;
  color: #00C3D0;
  white-space: nowrap;
}
.test_modal .modal_wrap .btn_wrap button.replay {
  background: #00C3D0;
  color: #fff;
}

.analyzing.active {
  display: flex;
}

.analyzing {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.analyzing .loader {
  width: 10rem;
  height: 10rem;
  border: 6px solid #E5E7EB;
  border-bottom-color: #00C3D0;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  margin-bottom: 4rem;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.analyzing h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.6rem;
}
.analyzing p {
  font-size: 1.6rem;
  font-weight: 500;
  color: #374151;
}

/* result.php */
.result .mbti_wrap {
  padding-bottom: 3.6rem;
}
.result .mbti_wrap .title_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 3.6rem;
}
.result .mbti_wrap .title_wrap span {
  font-size: 2.4rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: .8rem;
}
.result .mbti_wrap .title_wrap h2 {
  font-family: 'Gaseok';
  font-size: 8rem;
  margin-bottom: .8rem;
}

/* [분석가형] : INTJ / INTP / ENTJ / ENTP */
.result.intj .mbti_wrap .title_wrap h2,
.result.intp .mbti_wrap .title_wrap h2,
.result.entj .mbti_wrap .title_wrap h2,
.result.entp .mbti_wrap .title_wrap h2 { color: #7C3AED; }
.result.intj .mbti_wrap .title_wrap p,
.result.intp .mbti_wrap .title_wrap p,
.result.entj .mbti_wrap .title_wrap p,
.result.entp .mbti_wrap .title_wrap p { color: #5B21B6; }

/* [외교관형] : INFJ / INFP / ENFJ / ENFP */
.result.infj .mbti_wrap .title_wrap h2,
.result.infp .mbti_wrap .title_wrap h2,
.result.enfj .mbti_wrap .title_wrap h2,
.result.enfp .mbti_wrap .title_wrap h2 { color: #22C55E; }
.result.infj .mbti_wrap .title_wrap p,
.result.infp .mbti_wrap .title_wrap p,
.result.enfj .mbti_wrap .title_wrap p,
.result.enfp .mbti_wrap .title_wrap p { color: #15803D; }

/* [관리자형] : ISTJ / ISFJ / ESTJ / ESFJ */
.result.istj .mbti_wrap .title_wrap h2,
.result.isfj .mbti_wrap .title_wrap h2,
.result.estj .mbti_wrap .title_wrap h2,
.result.esfj .mbti_wrap .title_wrap h2 { color: #3B82F6; }
.result.istj .mbti_wrap .title_wrap p,
.result.isfj .mbti_wrap .title_wrap p,
.result.estj .mbti_wrap .title_wrap p,
.result.esfj .mbti_wrap .title_wrap p { color: #1D4ED8; }

/* [탐험가형] : ISTP / ISFP / ESTP / ESFP */
.result.istp .mbti_wrap .title_wrap h2,
.result.isfp .mbti_wrap .title_wrap h2,
.result.estp .mbti_wrap .title_wrap h2,
.result.esfp .mbti_wrap .title_wrap h2 { color: #F9CB13; }
.result.istp .mbti_wrap .title_wrap p,
.result.isfp .mbti_wrap .title_wrap p,
.result.estp .mbti_wrap .title_wrap p,
.result.esfp .mbti_wrap .title_wrap p { color: #CA8A04; }

.result .mbti_wrap .title_wrap p {
  font-size: 1.6rem;
  font-weight: 700;
}
.result .mbti_wrap .detail_wrap ul {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
}
.result .mbti_wrap .detail_wrap ul li {
  display: flex;
  align-items: center;
  gap: 2.3rem;
}
.result .mbti_wrap .detail_wrap ul li p {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}
.result .mbti_wrap .detail_wrap ul li p b {
  font-size: 2.4rem;
  font-weight: 800;
  color: #111827;
}
.result .mbti_wrap .detail_wrap ul li .bar {
  width: 100%;
  height: .6rem;
  border-radius: 5rem;
  background: #d6d8dd;
  position: relative;
}
.result .mbti_wrap .detail_wrap ul li .bar .gage {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: .6rem;
  z-index: 2;
  border-radius: 5rem;
  transition: width .8s ease;
}
.result .mbti_wrap .detail_wrap ul li.ei .bar .gage {
  background: #a78bfa;
}
.result .mbti_wrap .detail_wrap ul li.sn .bar .gage {
  background: #86EFAC;
}
.result .mbti_wrap .detail_wrap ul li.tf .bar .gage {
  background: #93C5FD;
}
.result .mbti_wrap .detail_wrap ul li.jp .bar .gage {
  background: #FDE68A;
}
.result .mbti_wrap .detail_wrap ul li .bar .percent {
  font-size: 1.2rem;
  font-weight: 600;
  position: absolute;
  bottom: -1.5rem;
  left: calc(50% - 1.2rem);
}
.result .mbti_wrap .detail_wrap ul li.ei .bar .percent {
  color: #5B21B6;
}
.result .mbti_wrap .detail_wrap ul li.sn .bar .percent {
  color: #15803D;
}
.result .mbti_wrap .detail_wrap ul li.tf .bar .percent {
  color: #1D4ED8;
}
.result .mbti_wrap .detail_wrap ul li.jp .bar .percent {
  color: #CA8A04;
}

.result .info_wrap {
  padding: 3.6rem 0;
  border-top: 1px solid #e5e7eb;;
  border-bottom: 1px solid #e5e7eb;;
}
.result .info_wrap .title_wrap {
  text-align: center;
  margin-bottom: 2.4rem;
}
.result .info_wrap .title_wrap h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1.6rem;
}
.result .info_wrap .title_wrap p {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.5rem;
  color: #374151;
}
.result .info_wrap .list_wrap ul {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.result .info_wrap .list_wrap ul li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: #E8F8E8;
  border-radius: 1.5rem;
  padding: 1.8rem 2.4rem;
}
.result .info_wrap .list_wrap ul li img {
  width: 2.4rem;
}
.result .info_wrap .list_wrap ul li p {
  font-size: 1.6rem;
  font-weight: 500;
  color: #374151;
  line-height: 2rem;
  word-break: keep-all;
}
.result .btn_wrap {
  padding: 2.4rem 0;
}
.result .btn_wrap a {
  display: block;
  width: 100%;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: #00c3d0;
  border-radius: 1.5rem;
  padding: 2rem 0;
}
.result .btn_wrap p {
  font-size: 1.4rem;
  color: #6b7280;
  text-align: center;
  margin-top: 3.6rem;
  line-height: 2rem;
}

/* detail.php */
.detail .detail_box,
.detail .list_box {
  margin-bottom: 3.6rem;
}
.detail .detail_box h2,
.detail .list_box h2 {
  font-size: 2.4rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1.6rem;
  text-align: center;
}
.detail .detail_box p {
  background: #f3f4f6;
  border-radius: 1.5rem;
  padding: 2.4rem 3rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.5rem;
  text-align: center;
  word-break: keep-all;
}
.detail .list_box ul {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.detail .list_box ul li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.8rem 2.4rem;
  border-radius: 1.5rem;
  background: #eee;
}
.detail .list_box.strength ul li {
  background: #E8F8E8;
}
.detail .list_box.weak ul li {
  background: #FAF3D6;
}
.detail .list_box ul li img {
  width: 2.4rem;
}
.detail .list_box ul li p {
  font-size: 1.6rem;
  font-weight: 500;
  color: #374151;
  line-height: 2rem;
  word-break: keep-all;
}
.detail .notice {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #6b7280;
  text-align: center;
  margin-bottom: 3.6rem;
}