@charset "UTF-8";
/* 개별 스타일 작성 */
/* 소개 */
.page--introduce .introduce-group:first-child {
  margin-top: 16px;
}
.page--introduce .introduce-group ~ .introduce-group {
  margin-top: 40px;
}
.page--introduce .introduce-thum {
  display: block;
  width: 60px;
  height: 66px;
  margin: 0 auto 20px;
  background: url("../images/img_salad.png") no-repeat center/contain;
}
.page--introduce .introduce-txt {
  font-size: var(--lab-h4);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 150%;
  text-align: center;
  color: #4B4B4B;
}
.page--introduce .introduce-txt ~ .introduce-txt {
  padding-top: 12px;
}
.page--introduce .guide-group {
  margin-top: 0 !important;
}
.page--introduce .guide-group .page-title {
  padding-top: 40px;
}
.page--introduce .guide-group .thum-aspect {
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}
.page--introduce .guide-group .thum-aspect iframe {
  width: 100%;
  height: 100%;
}
.page--introduce .guide-group .guide-btn {
  margin-top: 12px;
}
.page--introduce .guide-group .guide-btn .lab-btn {
  width: 100%;
}
.page--introduce .guide-group .ud-title-block {
  margin-top: 20px;
  font-size: var(--lab-h4);
}
.page--introduce .page-title {
  padding-bottom: 16px;
}
.page--introduce .option-list-title {
  text-align: left;
  cursor: default;
}
.page--introduce .deco-bg {
  position: relative;
}
.page--introduce .deco-bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/img_salad_02.png") no-repeat right bottom/contain;
  opacity: 0.2;
}

/* 메인 */
/* 미션 */
.page--mission .mission-card-item {
  padding: 12px 10px;
  border-radius: 8px;
  background-color: var(--color-white);
  overflow: hidden;
}
.page--mission .mission-card-item ~ .mission-card-item {
  margin-top: 16px;
}
.page--mission .mission-card-item.is-complete {
  position: relative;
}
.page--mission .mission-card-item.is-complete::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  opacity: 0.6;
}
.page--mission .mission-card-item.is-complete .lab-btn i {
  display: block;
}
.page--mission .mission-card-item .lab-badge {
  margin-bottom: 12px;
}
.page--mission .mission-card-item .lab-btn i {
  display: none;
}
.page--mission .mission-card-head {
  margin-bottom: 12px;
  text-align: center;
}
.page--mission .mission-card-head .tit {
  font-weight: 500;
}
.page--mission .mission-card-body .body-title {
  margin-bottom: 8px;
}
.page--mission .mission-card-body .ud-btn-block {
  margin-top: 18px;
}
.page--mission .mission-card-body .ud-btn-block .lab-btn {
  width: 100%;
}
.page--mission .mission-card-body .body-txt {
  margin-top: 8px;
  line-height: 140%;
}

/* 미션 상세 */
.page--mission-dtl-txt {
  margin: 30px 0;
  font-size: var(--lab-h4);
  font-weight: 600;
  line-height: 140%;
  text-align: center;
}
.page--mission-dtl .mission-card-list .mission-card-item .mission-card-cta {
  margin-top: 16px;
}
.page--mission-dtl .mission-card-item {
  padding: 20px 12px;
  border-radius: 8px;
  border: 1px solid #EFEFEF;
}
.page--mission-dtl .mission-card-item .ud-title-block {
  justify-content: center;
  margin-bottom: 12px;
}
.page--mission-dtl .mission-card-item .ud-title-block i {
  margin: 0;
}
.page--mission-dtl .mission-card-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start !important;
  gap: 16px;
}
.page--mission-dtl .mission-card-head .title {
  font-weight: 600;
  line-height: 140%;
  text-align: left;
}
.page--mission-dtl .mission-card-body .body-txt {
  font-weight: 500;
  line-height: 140%;
  text-align: center;
}
.page--mission-dtl .mission-dtl-cta.is-complete i {
  display: block;
}
.page--mission-dtl .mission-dtl-cta i {
  display: none;
}

/* 미션 완료 */
.page--mission-complete {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
}
.page--mission-complete .mission-complete-img {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 390/353;
  background: #1B1B45 url("../images/img_badge_lg.jpg") no-repeat center/contain;
  text-align: center;
}
.page--mission-complete .mission-complete-img::before {
  content: "ddd";
  display: block;
  width: 100%;
  aspect-ratio: 360/258;
}
.page--mission-complete .mission-complete-img .sub {
  font-size: var(--lab-h3);
  font-weight: 500;
  color: #FFA310;
}
.page--mission-complete .mission-complete-img .tit {
  padding-top: 12px;
  font-size: 32px;
  font-weight: 700;
  color: #FFA310;
}
.page--mission-complete .mission-complete-desc {
  padding-top: 40px;
  font-size: var(--lab-h4);
  font-weight: 500;
  line-height: 140%;
  text-align: center;
  color: var(--color-white);
}

/* 진단-인트로 */
/* 진단 */
.page--diagnosis .diagnosis-title {
  padding-bottom: var(--card-padding-16);
  border-bottom: 1px solid #C2C2C2;
  font-size: var(--lab-h5);
  line-height: 140%;
}
.page--diagnosis .diagnosis-title + .diagnosis-list {
  padding-top: 30px;
}
.page--diagnosis .diagnosis-list-item {
  padding-bottom: var(--card-padding-20);
  border-bottom: 1px solid var(--color-d9);
}
.page--diagnosis .diagnosis-list-item ~ .diagnosis-list-item {
  margin-top: var(--box-gap-16);
}
.page--diagnosis .diagnosis-list-title {
  padding-bottom: 8px;
  font-size: var(--lab-h4);
  line-height: 140%;
  font-weight: 700;
}

/* 진단 결과  */
.diagnosis-result-area,
.page--mission-area {
  padding: 20px 0;
  margin-top: 16px;
  background-color: #F7F8FC;
}

.page--diagnosis-result .diagnosis-result-area .list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page--diagnosis-result .diagnosis-result-area .item {
  display: flex;
  align-items: baseline;
  padding: 12px 8px;
  gap: 10px;
  background: #FFFFFF;
  border-radius: 8px;
}
.page--diagnosis-result .diagnosis-result-area .tit {
  font-size: var(--lab-h4);
  line-height: 140%;
  font-weight: 600;
}
.page--diagnosis-result .diagnosis-result-cta {
  margin-top: var(--group-gap-20);
}
.page--diagnosis-result .diagnosis-result-cta .lab-btn {
  width: 100%;
  background-color: #fff;
}
.page--diagnosis-result .page-bottom {
  padding: 30px 0;
}

/* 동의서 */
.page--agree .agree-desc-block {
  height: 450px;
  padding: 20px 10px 30px;
  margin-top: var(--group-gap-20);
  border-radius: 8px;
  background-color: var(--color-fa);
  border: 1px solid var(--color-ccc);
  overflow-y: scroll;
}
.page--agree .agree-desc-block .title {
  margin-bottom: var(--group-gap-20);
  font-size: var(--lab-h4);
  font-weight: 700;
  line-height: 140%;
  text-align: center;
}
.page--agree .agree-desc-block .title2 {
  margin-top: var(--group-gap-30);
}
.page--agree .agree-desc-block .tit {
  margin-bottom: var(--gap-10);
  font-size: var(--lab-h5);
  font-weight: 600;
  line-height: 140%;
}
.page--agree .agree-desc-block .txt {
  display: block;
  margin-bottom: var(--group-gap-20);
  font-size: var(--lab-h7);
  line-height: 140%;
  font-weight: 500;
}
.page--agree .agree-desc-block .box {
  padding: 12px;
  margin-bottom: var(--group-gap-20);
  border-radius: 4px;
  border: 1px solid #dbdbdb;
}
.page--agree .agree-desc-block .box .txt {
  margin-bottom: 0;
}
.page--agree .agree-desc-block .box .txt ~ .txt {
  margin-top: var(--gap-10);
}
.page--agree .agree-desc-block .group .title {
  margin-top: var(--group-gap-30);
}
.page--agree .agree-desc-block .group .txt {
  margin-bottom: var(--gap-10);
}
.page--agree .agree-desc-block .agree-desc-call {
  align-items: baseline;
  margin-bottom: 10px;
}
.page--agree .agree-desc-block .agree-desc-call .title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.page--agree .agree-desc-block .agree-desc-call span {
  font-size: var(--lab-h7);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.page--agree .agree-desc-block .agree-desc-call span ~ span {
  padding-left: 12px;
}
.page--agree .agree-desc-block .agree-desc-call i {
  font-size: var(--lab-h7);
  color: var(--color-black);
}
.page--agree .agree-form-block {
  margin-top: 40px;
}
.page--agree .agree-form-block > .ud-title-block .title {
  font-size: var(--lab-h4);
  font-weight: 600;
}
.page--agree .agree-form-block .agree-form-area:last-of-type {
  padding-bottom: 0;
}
.page--agree .agree-form-block .lab-info-txt {
  margin-top: 8px;
}
.page--agree .agree-form-area {
  padding-bottom: var(--group-gap-30);
}
.page--agree .agree-form-area > div {
  margin-top: var(--box-gap-20);
}

/* 일반 사항*/
.page--personal-data .ud-input-md {
  height: 32px;
}
.page--personal-data .check-block > .input-combo, .page--personal-data .check-block > .check-item, .page--personal-data .check-block > .radio-item,
.page--personal-data .radio-block > .input-combo,
.page--personal-data .radio-block > .check-item,
.page--personal-data .radio-block > .radio-item {
  display: block;
}
.page--personal-data .radio-block > .input-combo:first-child {
  margin-top: 10px;
}
.page--personal-data .sub-period {
  margin-top: 4px;
  padding-left: 16px;
}
.page--personal-data .sub-period .lab-input-tit {
  padding-bottom: 4px;
  font-size: 15px;
  font-weight: 500;
}
.page--personal-data .personal-data-group ~ .personal-data-group {
  margin-top: 24px;
}
.page--personal-data .lab-input-combo:has(.radio-block) .lab-input-tit {
  margin-bottom: 0;
}

.signature-aspect {
  width: 100%;
  aspect-ratio: 350/180;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-ccc);
  font-size: 0;
}
.signature-aspect canvas {
  width: 100%;
  height: 100%;
}

/* 마이 (공통) */
.page--my .tab-block:not(.type2) {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-bottom: 0;
  padding: 2px;
}
.page--my .tab-block:not(.type2) .item.is-active {
  background-color: var(--lab-color-primary);
}
.page--my .tab-block:not(.type2) .btn {
  max-width: unset;
  min-width: unset;
  min-height: var(--lab-input-h-sm);
  font-size: var(--lab-h5);
}
.page--my table.form-table {
  border-top: 0;
}
.page--my table.form-table th {
  height: 32px;
  padding: 6px 8px;
  background-color: #DCDFE6;
  border-left: 1px solid var(--color-white);
  border-bottom: 0;
  font-weight: 500;
  text-align: center;
}
.page--my table.form-table th[colspan], .page--my table.form-table th.th-group {
  border-bottom: 1px solid var(--color-white);
}
.page--my table.form-table td {
  height: 32px;
  padding: 6px 8px;
  text-align: center;
}
.page--my table.form-table td ~ td {
  border-left: 1px solid var(--color-ddd);
}
.page--my table.form-table td .txt {
  font-size: var(--lab-h7);
}
.page--my .filter-select-block {
  margin-bottom: 16px;
}

/* 마이 > 실천이력 */
/* 마이 > 실천배지 */
.page-my-badge .badge-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.page-my-badge .badge-list .item {
  max-width: 60px;
  min-width: 50px;
  aspect-ratio: 1/1;
  background: url("../images/img_badge_sm_02.png") no-repeat center/contain;
}

/* 마이 > info */
.page-my-info .info-table-block .form-table tr {
  display: grid;
  grid-template-columns: 100%;
}
.page-my-info .info-table-block .form-table th, .page-my-info .info-table-block .form-table td {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  text-align: left;
}
.page-my-info .info-table-block .form-table th {
  border-bottom: 1px solid var(--color-ddd);
}
.page-my-info .info-change-btn {
  padding: 0 10px;
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
}
.page-my-info .num-change-btn {
  margin-left: 10px;
}
.page-my-info .password-change-btn {
  width: 100%;
}
.page-my-info .logout-btn-block {
  margin-top: 16px;
}
.page-my-info .logout-btn-block .ud-btn {
  padding: 0;
  color: #4B4A4A;
  text-decoration: underline;
}

.acc-pannel {
  padding: 20px 10px 0;
}
.acc-pannel .lab-select {
  width: 100%;
  border-radius: 8px;
}

/* 회원 가입 */
.page--join .join-group {
  display: block;
}
.page--join .join-group ~ .join-group {
  margin-top: 24px;
}
.page--join .page--join-sub {
  margin-top: 8px;
}
.page--join .talk-bubblle {
  margin-top: 10px;
  font-size: var(--lab-h6);
  line-height: 140%;
}
.page--join .join-table-check {
  margin-top: 20px;
}
.page--join .join-table-check .row {
  grid-template-columns: unset;
  grid-template-rows: 1fr 1fr;
}
.page--join .join-table-check .using-info-btn {
  margin-left: 10px;
  font-size: 14px;
}

/* 로그인 */
.page--login .login-btn-group {
  margin-top: 30px;
}
.page--login .login-btn-group .lab-btn {
  width: 100%;
}
.page--login .login-btn-group .lab-btn ~ .lab-btn {
  margin-top: 8px;
}
.page--login .login-talk-bubble {
  border: 1px solid #ddd;
}
.page--login .login-talk-bubble .tit {
  letter-spacing: -1px;
  line-height: 140%;
  text-align: center;
}
.page--login .login-talk-bubble .tit span {
  display: block;
  padding-top: 4px;
  text-decoration: underline;
}

.ud-input-item.input-icon .ri-lock-line {
  top: 50%;
  transform: translateY(-50%);
}

.pw-toggle-btn {
  position: absolute;
  top: 0;
  right: 0px;
  width: auto;
  height: 100%;
  background-color: transparent;
}

.lab-select {
  width: 100%;
}

/* Popup */
.pop-password-change .ud-input-item {
  width: 100%;
  padding: 0;
}
.pop-password-change .ud-input-item .ud-input {
  font-size: 16px;
}
.pop-password-change .ud-input-item .ud-input::-moz-placeholder {
  font-size: 16px;
}
.pop-password-change .ud-input-item .ud-input::placeholder {
  font-size: 16px;
}
.pop-password-change .ud-input-item .ri-lock-line,
.pop-password-change .ud-input-item .pw-toggle-btn {
  top: 50%;
  transform: translateY(-50%);
}
.pop-password-change .ud-input-item .pw-toggle-btn {
  position: absolute;
  right: 10px;
  width: auto;
  background-color: transparent;
  aspect-ratio: unset;
}

.pop-using-personal-info .using-personal-info-cta {
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media screen and (min-width: 360px) {
  .page--my .tab-block:not(.type2) {
    display: grid;
    grid-template-columns: 1fr 1fr 1f;
    gap: 0;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  /* 일반 사항*/
  .page--personal-data .personal-data-group:nth-child(3) {
    display: block;
  }
  .page--personal-data .personal-data-group:nth-child(3) .lab-input-item ~ .lab-input-item {
    margin-top: 8px;
  }
}
@media screen and (max-width: 360px) {
  .page--mission-dtl .mission-card-head .title br {
    display: none;
  }
}